{"id":50323622,"url":"https://github.com/p-arndt/jslop","last_synced_at":"2026-05-29T04:30:26.377Z","repository":{"id":357673198,"uuid":"1237165128","full_name":"p-arndt/jslop","owner":"p-arndt","description":"Another Slop Javascript Framework","archived":false,"fork":false,"pushed_at":"2026-05-13T19:00:01.000Z","size":274,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-13T21:24:34.542Z","etag":null,"topics":["framework","javascript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/p-arndt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"docs/roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-13T00:01:48.000Z","updated_at":"2026-05-13T19:00:06.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/p-arndt/jslop","commit_stats":null,"previous_names":["p-arndt/jslop"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/p-arndt/jslop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-arndt%2Fjslop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-arndt%2Fjslop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-arndt%2Fjslop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-arndt%2Fjslop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/p-arndt","download_url":"https://codeload.github.com/p-arndt/jslop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-arndt%2Fjslop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33637485,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","javascript"],"created_at":"2026-05-29T04:30:25.541Z","updated_at":"2026-05-29T04:30:26.366Z","avatar_url":"https://github.com/p-arndt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# JSlop\n\n**A fullstack TypeScript framework that compiles normal-looking component code into resumable, fine-grained, progressively-enhanced web apps.**\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)\n[![Node](https://img.shields.io/badge/node-%E2%89%A520-43853d.svg)](https://nodejs.org)\n[![pnpm](https://img.shields.io/badge/pnpm-%E2%89%A511-f69220.svg)](https://pnpm.io)\n[![Status: pre-1.0](https://img.shields.io/badge/status-pre--1.0-orange.svg)](./TODO.md)\n\n*Svelte-like authoring · Solid-like reactivity · Qwik-like resumability · Next-like fullstack — without the mental tax.*\n\n[**Docs**](./docs/README.md) · [**Getting started**](./docs/getting-started.md) · [**Syntax**](./docs/syntax.md) · [**Roadmap**](./docs/roadmap.md) · [**FAQ**](./docs/faq.md)\n\n\u003c/div\u003e\n\n---\n\nNo `useEffect`. No dependency arrays. No `use client`. No loader/action files. State is just variables; the compiler turns them into fine-grained reactive cells.\n\n\u003e [!WARNING]\n\u003e **Status: early.** JSlop is pre-1.0. The compiler, runtime, SSR, client boot, router, Vite plugin, layouts, 404 pages, and the production build path all work end-to-end for the apps in [`examples/`](./examples). Many features in [`PLAN.md`](./PLAN.md) (server functions, schema forms, local-first collections, devtools) are **not yet implemented** — see [`TODO.md`](./TODO.md) for the honest status.\n\n---\n\n## A 60-second tour\n\n```tsx\ncomponent Counter {\n  state count = 0\n\n  function increment() {\n    count++\n  }\n\n  view {\n    \u003cbutton onclick={increment}\u003eclicked {count} times\u003c/button\u003e\n  }\n}\n```\n\nFive things to notice:\n\n1. **`state count = 0`** declares a reactive variable. When it changes, every place that reads it updates — fine-grained, no virtual DOM diff.\n2. **`count++`** is a plain expression. No `count.value`, no `setCount(c =\u003e c + 1)`.\n3. **`function increment()`** is a plain JS function. No `useCallback`, no closure traps.\n4. **`view { ... }`** holds HTML-ish markup with `{expr}` interpolation, `on\u003cevent\u003e` handlers, `{#if}` / `{#each}`, and `bind:value` sugar.\n5. **No imports for the runtime.** `state`, `view`, `component` are language constructs the compiler understands; the runtime is wired up for you.\n\nA `.jslop` file may declare any number of components — the first is the default export, the rest are named exports.\n\n```tsx\nimport { Display, Stepper } from \"../components/widgets.jslop\"\n\ncomponent Counter {\n  state count = 0\n\n  view {\n    \u003cdiv\u003e\n      \u003ch1\u003eJSlop Counter\u003c/h1\u003e\n      \u003cDisplay value={count} label=\"Count\" /\u003e\n      \u003cStepper label=\"+\" onstep={() =\u003e count++} /\u003e\n\n      {#if count \u003e 0}\n        \u003cp\u003ecount is positive: {count}\u003c/p\u003e\n      {/if}\n    \u003c/div\u003e\n  }\n}\n```\n\nSee [docs/syntax.md](./docs/syntax.md) for the full DSL reference.\n\n---\n\n## Quickstart\n\n```bash\npnpm create jslop my-app\n# or:  npm create jslop@latest my-app\n# or:  bun create jslop my-app\n\ncd my-app\npnpm install\npnpm dev\n```\n\nOpen the URL Vite prints (usually `http://localhost:5173`). You'll see an SSR'd page from `src/routes/index.jslop`, hydrated by `@jslop/client`. Edit the file and save — the dev server reloads.\n\nBuild and serve a production bundle (SSR + hashed client + static assets via `@jslop/node-adapter`):\n\n```bash\npnpm build      # vite build \u0026\u0026 vite build --ssr\npnpm serve      # node serve.mjs → http://localhost:3000\n```\n\n### Hacking on JSlop itself\n\nIf you cloned this monorepo to work on the framework rather than build an app on top of it, the workflow is the older `pnpm install \u0026\u0026 pnpm build \u0026\u0026 pnpm dev:counter` — see [Contributing](#contributing) below. The workspace is pnpm-only.\n\n---\n\n## What works today\n\n| Feature                                            | Status   |\n|----------------------------------------------------|----------|\n| `state` / `prop` / `let` reactivity                | ✅ done   |\n| `{#if}` / `{#each}` with keyed reconciliation      | ✅ done   |\n| `bind:value` / `bind:checked` two-way sugar        | ✅ done   |\n| Multiple components per file                       | ✅ done   |\n| File-system routing with `[param]` segments        | ✅ done   |\n| Layouts (`_layout.jslop`) and `_404.jslop`         | ✅ done   |\n| SSR with state capsule + client resume             | ✅ done   |\n| Production build + Node adapter                    | ✅ done   |\n| Tailwind v4 out of the box                         | ✅ done   |\n| Server functions / schema forms / local-first      | 🚧 planned ([roadmap](./docs/roadmap.md)) |\n| Source maps, devtools, streaming SSR               | 🚧 planned |\n\nFull status in [`TODO.md`](./TODO.md).\n\n---\n\n## The mental model\n\n**Three kinds of variables**, picked by what reads them:\n\n```tsx\ncomponent Search {\n  prop query = \"\"        // input from a parent — reactive\n  state results = []     // the view reads it — reactive, serialized to the client\n  let cache = new Map()  // bookkeeping the view never reads — plain JS\n}\n```\n\n**One way to update:** assign. `count = count + 1`, `count++`, `todos = [...todos, t]`. There is no setter function and no `.value` accessor.\n\n**One way to react:** read. If a `state` or `prop` is read inside `view {...}` or inside a `function`, that location depends on it. Update it, and only that location re-runs.\n\nThat's the whole model. The rest of the docs are details.\n\n---\n\n## Docs\n\nThe full guide lives in [`docs/`](./docs/README.md). The quickest path through it:\n\n- **[Introduction](./docs/introduction.md)** — what JSlop is, the mental model.\n- **[Getting started](./docs/getting-started.md)** — install, run the examples, write your first component.\n- **[Components](./docs/components.md)** — `prop`, `state`, `let`, `function`, `view`.\n- **[Template syntax](./docs/template-syntax.md)** · **[Logic blocks](./docs/logic-blocks.md)** · **[Events](./docs/events.md)** · **[Bindings](./docs/bindings.md)**\n- **[Routing](./docs/routing.md)** · **[SSR \u0026 resumability](./docs/ssr-and-resumability.md)** · **[Building \u0026 deploying](./docs/building.md)** · **[Styling](./docs/styling.md)**\n- **[Reactivity](./docs/reactivity.md)** · **[Cheatsheet](./docs/syntax.md)** · **[FAQ](./docs/faq.md)** · **[Roadmap](./docs/roadmap.md)**\n\nFor contributors and curious readers: [`docs/internals/`](./docs/internals/) covers the architecture and how each `@jslop/*` package fits together.\n\n---\n\n## Repository layout\n\n```\npackages/\n  compiler/         — .jslop → JS module (parser, AST rewriter, codegen)\n  runtime/          — cell / derived / effect / batch / untrack / scope\n  server/           — SSR: render component tree + serialize state capsule\n  client/           — boot: restore state capsule + attach handlers + reactive DOM\n  router/           — file-system route scan + URL match + layout chains\n  vite/             — Vite plugin: transform + virtual modules + dev SSR + prod build\n  node-adapter/     — Node HTTP wrapper around the built SSR render() + static assets\n  prettier-plugin/  — Prettier formatter for .jslop files\n\nexamples/\n  counter/   — minimal interactive demo\n  site/      — multi-route example with Tailwind v4, layouts, 404, dynamic routes\n\neditors/\n  vscode-jslop — VS Code grammar + snippets for .jslop files\n\nbenchmarks/\n  bundle-size/   — esbuild same-fixture comparison vs Svelte 5\n  reactivity/    — reactivity-throughput micro-benchmarks vs Svelte 5 runes\n```\n\n---\n\n## Requirements\n\n- **Node** 20 or newer\n- **pnpm** 11 or newer\n\n---\n\n## Contributing\n\nJSlop is pre-1.0 and the API surface is still moving. If you want to hack on it:\n\n1. Fork the repo, `pnpm install`, `pnpm build`.\n2. Run the example apps (`pnpm dev:counter`) to verify your environment.\n3. Look at [`TODO.md`](./TODO.md) for the honest status of each area — many items have small, well-scoped gaps.\n4. Open an issue before starting on anything large, so we can sanity-check the design.\n\nEach package has its own README explaining what it does and how it's tested.\n\n### Cutting a release\n\nThe publish flow (first `0.1.0`, subsequent Changesets-driven releases, troubleshooting) lives in [`docs/publishing.md`](./docs/publishing.md).\n\n---\n\n## License\n\n[MIT](./LICENSE) © 2026 p-arndt \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp-arndt%2Fjslop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fp-arndt%2Fjslop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp-arndt%2Fjslop/lists"}