{"id":51377231,"url":"https://github.com/One-Learning-Community/rozie.js","last_synced_at":"2026-07-05T21:00:36.895Z","repository":{"id":357464787,"uuid":"1226843744","full_name":"One-Learning-Community/rozie.js","owner":"One-Learning-Community","description":"One source, five frameworks. Author components in Vue/Alpine-flavored .rozie SFCs; ship idiomatic React, Vue, Svelte, Angular, and Solid output.","archived":false,"fork":false,"pushed_at":"2026-07-04T20:29:38.000Z","size":24830,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-04T22:11:19.889Z","etag":null,"topics":["angular","compiler","component-library","cross-framework","design-system","react","sfc","solidjs","svelte","typescript","unplugin","vite-plugin","vue"],"latest_commit_sha":null,"homepage":"https://one-learning-community.github.io/rozie.js/","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/One-Learning-Community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":null,"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-01T22:25:00.000Z","updated_at":"2026-07-04T20:29:49.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/One-Learning-Community/rozie.js","commit_stats":null,"previous_names":["one-learning-community/rozie.js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/One-Learning-Community/rozie.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-Learning-Community%2Frozie.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-Learning-Community%2Frozie.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-Learning-Community%2Frozie.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-Learning-Community%2Frozie.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/One-Learning-Community","download_url":"https://codeload.github.com/One-Learning-Community/rozie.js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-Learning-Community%2Frozie.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35168795,"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-07-05T02:00:06.290Z","response_time":100,"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":["angular","compiler","component-library","cross-framework","design-system","react","sfc","solidjs","svelte","typescript","unplugin","vite-plugin","vue"],"created_at":"2026-07-03T14:00:27.948Z","updated_at":"2026-07-05T21:00:36.889Z","avatar_url":"https://github.com/One-Learning-Community.png","language":"TypeScript","funding_links":[],"categories":["Framework Interoperability"],"sub_categories":["Cross-Framework Integration"],"readme":"# Rozie.js\n\nA cross-framework component definition language and compiler. Authors write components once in a Vue/Alpine-flavored block-based syntax (`.rozie` files), and Rozie compiles them to idiomatic React, Vue, Svelte, Angular, Solid, and Lit components. The name derives from the Rosetta Stone — one source, many target languages.\n\nRozie is **not** a runtime framework. It does not own the rendering pipeline; the heavy lifting still happens in whichever target framework the consumer chose. Rozie owns the **author-side API** so a single component definition can drop into any of the six supported frameworks without per-framework wrapper boilerplate.\n\n**📖 [Documentation](https://one-learning-community.github.io/rozie.js/)** — install, quick start, features tour, and live examples (the docs site dogfoods the compiler — every example is the actual `.rozie` source compiled by `@rozie/unplugin/vite` and rendered inline).\n\n## Who it's for\n\nComponent-library and design-system authors who today maintain manual bindings/wrappers across React, Vue, Svelte, Angular, Solid, and Lit for libraries that ultimately do their real work in vanilla JS. Write one `.rozie` file, ship working idiomatic consumers in every framework from it.\n\n## Status\n\nPre-v1.0, internal monorepo. All six target emitters are shipped and gated by a byte-identical dist-parity suite — every reference component compiled across all six targets and every entrypoint (compile API / CLI / Babel plugin / unplugin) must match byte-for-byte. Each target ships with a consumer demo plus Playwright e2e coverage.\n\n| Package | Status |\n|---|---|\n| [`@rozie/core`](packages/core) | Shipped — SFC parser, IR, lowering pipeline |\n| [`@rozie/target-vue`](packages/targets/vue) | Shipped — Vue 3.4+ SFC emitter |\n| [`@rozie/target-react`](packages/targets/react) | Shipped — React 18+ function-component emitter |\n| [`@rozie/target-svelte`](packages/targets/svelte) | Shipped — Svelte 5+ runes-mode emitter |\n| [`@rozie/target-angular`](packages/targets/angular) | Shipped — Angular 19+ standalone-component emitter |\n| [`@rozie/target-solid`](packages/targets/solid) | Shipped — Solid 1.8+ signals-native emitter |\n| [`@rozie/target-lit`](packages/targets/lit) | Shipped — Lit web-component emitter |\n| [`@rozie/runtime-vue`](packages/runtime/vue) | Shipped — runtime helpers (`useOutsideClick`, `debounce`, `throttle`, key filters) |\n| [`@rozie/runtime-react`](packages/runtime/react) | Shipped — runtime helpers + `useControllableState` |\n| [`@rozie/runtime-svelte`](packages/runtime/svelte) | Shipped — runtime helpers |\n| [`@rozie/runtime-solid`](packages/runtime/solid) | Shipped — runtime helpers + `createControllableSignal` |\n| [`@rozie/runtime-lit`](packages/runtime/lit) | Shipped — runtime helpers |\n| [`@rozie/unplugin`](packages/unplugin) | Shipped — Vite + Rollup + Webpack + esbuild + Rolldown + Rspack |\n| [`@rozie/cli`](packages/cli) | Shipped — `rozie build` CLI across all six targets |\n| [`@rozie/babel-plugin`](packages/babel-plugin) | Shipped — Babel-plugin path for non-Vite consumers |\n| [`@rozie/docs`](docs) | Shipped — VitePress documentation site |\n| [`tools/intellij-plugin`](tools/intellij-plugin) | Shipped — JetBrains IDE syntax + injection plugin |\n| [`tools/textmate`](tools/textmate) | Shipped — TextMate grammar (VS Code, IDEA Community, docs-site Shiki) |\n\nAll six target emitters and the toolchain (CLI, Babel plugin, unplugin, editor tooling) are shipped and feature-complete internally. Public npm release under MIT (v1.0) is the remaining milestone before public availability.\n\n## Quick look\n\nA minimal Counter component in `.rozie`:\n\n```rozie\n\u003crozie name=\"Counter\"\u003e\n\u003cprops\u003e{ value: { type: Number, default: 0, model: true }, step: { type: Number, default: 1 } }\u003c/props\u003e\n\u003cscript\u003e\nconst canIncrement = $computed(() =\u003e $props.value + $props.step \u003c= Infinity)\n// Read a prop with $props; write a two-way (model) prop with $model.\nconst increment = () =\u003e { if (canIncrement) $model.value += $props.step }\n\u003c/script\u003e\n\u003ctemplate\u003e\n  \u003cbutton @click=\"increment\"\u003e{{ $props.value }}\u003c/button\u003e\n\u003c/template\u003e\n\u003cstyle\u003e.counter { display: inline-flex; }\u003c/style\u003e\n\u003c/rozie\u003e\n```\n\nIn any Vite project today — pick a target and drop the unplugin in:\n\n```ts\n// vite.config.ts\nimport Rozie from '@rozie/unplugin/vite';\nimport vue from '@vitejs/plugin-vue'; // or @vitejs/plugin-react, @sveltejs/vite-plugin-svelte, etc.\n\nexport default { plugins: [Rozie({ target: 'vue' }), vue()] };\n//                                  ^^^^^ swap for 'react' | 'svelte' | 'angular' | 'solid' | 'lit'\n```\n\n```vue\n\u003cscript setup\u003e\nimport Counter from './Counter.rozie';\n\u003c/script\u003e\n\u003ctemplate\u003e\u003cCounter v-model:value=\"n\" /\u003e\u003c/template\u003e\n```\n\nSee the [docs site](https://one-learning-community.github.io/rozie.js/examples/) for the same `.rozie` source compiled side-by-side into all six targets, plus live demos for each example.\n\n## Repo layout\n\n```\npackages/\n  core/                                SFC parser, IR, lowering pipeline\n  targets/{vue,react,svelte,angular,solid,lit}/  Per-framework emitters\n  runtime/{vue,react,svelte,solid,lit}/  Runtime helpers consumed by emitted code\n  unplugin/                            Vite/Rollup/Webpack/esbuild/Rolldown/Rspack plugin\n  cli/                                 Standalone `rozie build` CLI\n  babel-plugin/                        Babel-plugin path for non-Vite consumers\nexamples/\n  *.rozie                              Reference components (Counter, SearchInput,\n                                       Modal, Dropdown, TreeNode, Card/CardHeader, TodoList)\n  consumers/                           Live Vite demos + Playwright e2e per target\ndocs/                                  VitePress documentation site\ntools/\n  intellij-plugin/                     JetBrains IDE plugin (syntax + injection)\n  textmate/                            TextMate grammar (VSCode, IDEA Community)\ntests/\n  dist-parity/                         Byte-identical fixtures across all targets\n  ...                                  Per-feature integration suites\n.planning/                             Phase artifacts (gitignored — internal)\n```\n\n## Getting started\n\nThe shortest path to working output:\n\n```bash\npnpm install\npnpm -r --filter '@rozie/core' --filter '@rozie/unplugin' --filter '@rozie/target-*' --filter '@rozie/runtime-*' build\n```\n\nThen either run one of the consumer demos:\n\n```bash\ncd examples/consumers/vue-vite      # or react-vite, svelte-vite, angular-analogjs, solid-vite, lit-vanilla-demo\npnpm dev                            # dev server with HMR\npnpm test:e2e                       # Playwright suite for this target\n```\n\nOr use the CLI directly for one-shot codegen:\n\n```bash\npnpm rozie build examples/Counter.rozie --target solid --out Counter.tsx\n```\n\nFor the full walkthrough — install, three different compile paths (Vite plugin, Babel plugin, CLI), per-feature tour, and live examples — see the [docs site](https://one-learning-community.github.io/rozie.js/guide/quick-start).\n\n## Tech stack rationale\n\n- `@babel/parser` + `@babel/traverse` + `@babel/types` + `@babel/generator` — `\u003cscript\u003e` AST round-trip\n- `htmlparser2` — SFC block splitter and `\u003ctemplate\u003e` tokenizer\n- `peggy` — modifier micro-grammar (`@click.outside($refs.x).stop`, `.debounce(300)`, `.throttle(100)`)\n- `magic-string` — source-map-preserving string mutation in `\u003cscript\u003e` and CSS\n- `postcss` — `\u003cstyle\u003e` AST + scope-attribute selector rewriting\n- `unplugin` v3 — author once, ship to Vite + Rollup + Webpack + esbuild + Rolldown + Rspack\n\nFull rationale and alternatives considered in [`CLAUDE.md`](CLAUDE.md).\n\n## IDE Tooling\n\nA JetBrains IntelliJ Platform plugin (Rozie.js) provides syntax highlighting and JS/HTML/CSS language injection for `.rozie` files in IDEA Ultimate / WebStorm / PhpStorm / RubyMine / GoLand 2024.2+, with first-class support for the `\u003ccomponents\u003e` block.\n\nSee [`tools/intellij-plugin/README.md`](tools/intellij-plugin/README.md) for installation, supported IDEs, dev loop, and dogfood feedback workflow.\n\nFor lightweight color-only support (no JS plugin required), the [TextMate grammar](tools/textmate/) at `tools/textmate/` works in IDEA Community, PyCharm CE, and VSCode. The same grammar powers Shiki syntax highlighting on the docs site.\n\n## Contributing\n\nThis is a planned, phase-driven build under the [GSD workflow](https://github.com/anthropics/gsd) (`/gsd-execute-phase`, `/gsd-plan-phase`, etc.). Phase artifacts live in `.planning/phases/` (gitignored). Read [`CLAUDE.md`](CLAUDE.md) and `.planning/PROJECT.md` before opening a substantive PR.\n\nReleasing packages to npm? See [`RELEASING.md`](RELEASING.md) — the release runbook, plus `pnpm release:precheck` to catch the mechanical footguns automatically.\n\n## License\n\n[MIT](LICENSE) © 2026 One Learning Community LTD.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOne-Learning-Community%2Frozie.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOne-Learning-Community%2Frozie.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOne-Learning-Community%2Frozie.js/lists"}