Enhance project to support SolidJS runtime and update documentation

- Added SolidJS as a new runtime option in the code generation process, allowing for idiomatic SolidJS components to be generated alongside existing runtimes.
- Updated package.json and bun.lock to include necessary SolidJS dependencies and configurations.
- Revised README and other documentation to reflect the addition of SolidJS, including updated runtime descriptions and usage instructions.
- Enhanced CLI commands and scripts to support SolidJS development and integration.
- Improved test coverage for SolidJS components to ensure parity with other runtimes.

These changes aim to expand the capabilities of the UI8Kit codegen engine and provide developers with more options for rendering components.

Author: alexy-os

README.md

@@ -1,12 +1,12 @@
 # UI8Kit Codegen
 
-**One brick definition → six identical runtimes.**
+**One brick definition → seven identical runtimes.**
 
-Spec-driven codegen for UI8Kit `ui/` primitives. Define props, variants, and a render tree once; emit idiomatic Templ, React, Svelte, Vue, Latte, and Twig with the same DOM, design tokens, and ARIA contract — verified by parity tests, not by review.
+Spec-driven codegen for UI8Kit `ui/` primitives. Define props, variants, and a render tree once; emit idiomatic Templ, React, Svelte, Vue, SolidJS, Latte, and Twig with the same DOM, design tokens, and ARIA contract — verified by parity tests, not by review.
 
 | Fact | Value |
 |------|-------|
-| **Inventory** | 33 bricks · 63 parts · 6 runtimes |
+| **Inventory** | 33 bricks · 63 parts · 7 runtimes |
 | **PHP templates** | 60 / 63 parts (3 skipped by structural predicate) |
 | **License** | MIT |
 
@@ -20,6 +20,7 @@ Spec-driven codegen for UI8Kit `ui/` primitives. Define props, variants, and a r
 | **React 19** | `ui/<brick>/<brick>.tsx` | `forwardRef`, `asChild` / `Slot` |
 | **Svelte 5** | `ui/<brick>/<Part>.svelte` | runes, snippets, `<svelte:element>` |
 | **Vue 3** | `ui/<brick>/<Part>.vue` | `<script setup>`, slots, `<component :is>` |
+| **SolidJS** | `ui/<brick>/<brick>.solid.tsx` | `splitProps`, `Dynamic`, `*Classes()` |
 | **Latte** | `ui/<brick>/<Part>.latte` | typed `{parameters}`, `n:attr` |
 | **Twig** | `ui/<brick>/<Part>.html.twig` | `ui8kit_attr_str`, `include with` |
 
@@ -33,7 +34,7 @@ All runtimes share the same colocated `*.variants.json` (CVA-style recipes). Att
 
 ## Why codegen?
 
-Hand-writing `.templ` + `.tsx` (and then Svelte, Vue, Latte, Twig) multiplies drift. This engine inverts the workflow:
+Hand-writing `.templ` + `.tsx` (and then Svelte, Vue, Solid, Latte, Twig) multiplies drift. This engine inverts the workflow:
 
 1. **Brick definitions** (`bricks/<name>/<name>.def.ts`) — single source of truth
 2. **Canonical renderer** (`src/domain/render.ts`) — executable DOM spec
@@ -51,14 +52,14 @@ Identity across runtimes is a property of the test suite, not a convention.
 ```bash
 bun install
 bun run check       # validate all brick definitions
-bun run generate    # emit all six runtimes → generated/
+bun run generate    # emit all seven runtimes → generated/
 bun test            # domain units + DOM parity
 bun run verify      # check + typecheck + tests (CI equivalent)
 ```
 
 ### Local previews
 
-Seven welcome screens (generated primitives + shadcn tokens) live in [`examples/`](examples/):
+Eight welcome screens (generated primitives + shadcn tokens) live in [`examples/`](examples/):
 
 ```bash
 bun run generate && cd examples && bun install && bun run build:css
@@ -69,6 +70,7 @@ bun run dev:svelte  # :5174
 bun run dev:vue     # :5175
 bun run dev:latte   # :5176
 bun run dev:twig    # :5177
+bun run dev:solid   # :5178
 bun run build:html  # → examples/html/
 ```
 
@@ -78,7 +80,7 @@ bun run build:html  # → examples/html/
 bun src/infrastructure/cli.ts generate \
   --out generated \
   --go-module github.com/ui8kit/ui \
-  --runtimes templ,react,svelte,vue,latte,twig
+  --runtimes templ,react,svelte,vue,solid,latte,twig
 ```
 
 Also available: `bun run generate:latte-bundle` for a Latte-only package — see [docs/latte-bundle.md](docs/latte-bundle.md).
@@ -94,17 +96,17 @@ generated/
   php/UI8Kit/          # Rt.php, Classes.php, TwigExtension.php
   utils/               # shared runtime support (Go + TS)
   ui/
-    index.ts | index.svelte.ts | index.vue.ts
+    index.ts | index.svelte.ts | index.vue.ts | index.solid.ts
     button/
       button.variants.json   # shared CVA recipe
       button.shared.ts       # TS types + classes helpers
-      button.templ | button.tsx | Button.svelte | Button.vue
+      button.templ | button.tsx | button.solid.tsx | Button.svelte | Button.vue
       Button.latte | Button.html.twig
 ```
 
-**Consume:** Templ → `templ generate && go build` · TS → Vite (`@vitejs/plugin-vue`, `@sveltejs/vite-plugin-svelte`) · PHP → `composer install` in `generated/` with a loader rooted at `generated/ui`.
+**Consume:** Templ → `templ generate && go build` · TS → Vite (`@vitejs/plugin-vue`, `@sveltejs/vite-plugin-svelte`, `vite-plugin-solid`) · PHP → `composer install` in `generated/` with a loader rooted at `generated/ui`.
 
-Peer deps: `react` / `svelte` / `vue` + `clsx` + `tailwind-merge`; PHP: `latte/latte ^3` or `twig/twig ^3`.
+Peer deps: `react` / `svelte` / `vue` / `solid-js` + `clsx` + `tailwind-merge`; PHP: `latte/latte ^3` or `twig/twig ^3`.
 
 ---
 
@@ -119,7 +121,7 @@ src/
   infrastructure/  # CLI
 runtime/           # support files copied into generated/utils
 tests/             # domain units + cross-runtime parity
-examples/          # seven welcome previews
+examples/          # eight welcome previews
 docs/              # full documentation
 ```
 

bun.lock

@@ -1,6 +1,6 @@
 # UI8Kit Codegen — Documentation
 
-Spec-driven codegen engine for UI8Kit `ui/` primitives. One typed render contract per brick, six generated runtimes (plus a static HTML export), and DOM parity verified by tests.
+Spec-driven codegen engine for UI8Kit `ui/` primitives. One typed render contract per brick, seven generated runtimes (plus a static HTML export), and DOM parity verified by tests.
 
 ## Contents
 

docs/README.md

@@ -18,7 +18,7 @@ Entry: `src/infrastructure/cli.ts` (also exposed as `ui8kit-codegen` bin when pu
 |------|---------|-------------|
 | `--out <dir>` | `generated` | Output directory |
 | `--go-module <module>` | `github.com/ui8kit/ui` | Go module path in `go.mod` |
-| `--runtimes <list>` | all six | Comma-separated: `templ,react,svelte,vue,latte,twig` |
+| `--runtimes <list>` | all seven | Comma-separated: `templ,react,svelte,vue,solid,latte,twig` |
 
 ### Examples
 

docs/cli-and-scripts.md

@@ -23,7 +23,7 @@ bun install
 
 ```bash
 bun run check       # validate all brick definitions (no I/O)
-bun run generate    # emit all six runtimes into generated/
+bun run generate    # emit all seven runtimes into generated/
 ```
 
 Generate with custom options:

docs/getting-started.md

@@ -6,7 +6,7 @@ UI8Kit Codegen is a **spec-driven codegen engine** for UI8Kit `ui/` primitives.
 
 1. **Validates** definitions before emitting anything.
 2. **Renders** a canonical reference DOM via `src/domain/render.ts` — the executable specification.
-3. **Emits** idiomatic code for six runtimes from the same definition.
+3. **Emits** idiomatic code for seven runtimes from the same definition.
 4. **Tests** that every generated runtime produces identical normalized DOM for every part and showcase fixture.
 
 Identity across runtimes is not a review convention — it is enforced by the test suite.
@@ -19,6 +19,7 @@ Identity across runtimes is not a review convention — it is enforced by the te
 | **React 19** | `ui/<brick>/<brick>.tsx` | `forwardRef`, `asChild` via `Slot`, rest props |
 | **Svelte 5** | `ui/<brick>/<Part>.svelte` | runes, snippets, `<svelte:element>` |
 | **Vue 3** | `ui/<brick>/<Part>.vue` | `<script setup>`, slots, `<component :is>` |
+| **SolidJS** | `ui/<brick>/<brick>.solid.tsx` | `splitProps`, `Dynamic`, shared `*Classes()` |
 | **Latte** | `ui/<brick>/<Part>.latte` | typed `{parameters}`, `n:attr`, children as HTML string |
 | **Twig** | `ui/<brick>/<Part>.html.twig` | `ui8kit_attr_str`, `include with`, children as HTML string |
 
@@ -53,7 +54,7 @@ Codegen/
 ├── runtime/                # support files copied into generated/ (Go, TS, PHP)
 ├── generated/              # codegen output (gitignored; created by `bun run generate`)
 ├── tests/                  # domain units + cross-runtime parity suites
-├── examples/               # seven welcome previews + static HTML export
+├── examples/               # eight welcome previews + static HTML export
 ├── docs/                   # this documentation
 └── .github/workflows/      # CI
 ```
@@ -68,7 +69,7 @@ Codegen/
 
 ## Why an IR instead of hand-written runtimes
 
-The upstream registry hand-writes `.templ` and `.tsx` pairs against a shared spec. Adding Svelte, Vue, Latte, and Twig by hand multiplies drift surface. This engine inverts the workflow: definitions are data, the canonical renderer is the spec, emitters are printers, parity tests are the gate.
+The upstream registry hand-writes `.templ` and `.tsx` pairs against a shared spec. Adding Svelte, Vue, Solid, Latte, and Twig by hand multiplies drift surface. This engine inverts the workflow: definitions are data, the canonical renderer is the spec, emitters are printers, parity tests are the gate.
 
 ## License
 

docs/overview.md

@@ -70,6 +70,25 @@ Bun test preload compiles `.svelte` with `generate: "server"` for parity tests (
 
 **Peer deps:** `vue`, `clsx`, `tailwind-merge`.
 
+## SolidJS
+
+**Output:** `ui/<brick>/<brick>.solid.tsx` (all parts in one file; `.solid.tsx` avoids colliding with React)
+
+| Feature | Implementation |
+|---------|----------------|
+| Children | `children` prop (`JSX.Element`) |
+| Prop naming | camelCase variants; HTML-native `class` (+ `className` alias) |
+| Dynamic tags | `<Dynamic component={…}>` from `solid-js/web` |
+| Rest props | `splitProps` → `{...rest}` spread last |
+| Class merge | shared `*Classes()` helpers (no `asChild`) |
+| Shared types | `<brick>.shared.ts` — same as React/Svelte/Vue |
+
+**Composition:** no Radix-style `asChild`. Style another element via `buttonClasses()` / `*Classes()` — same substitute as Svelte/Vue.
+
+**Peer deps:** `solid-js`, `clsx`, `tailwind-merge`.
+
+Bun/Vitest transform `*.solid.tsx` with `babel-preset-solid` / `vite-plugin-solid` (`generate: "ssr"`) for parity tests.
+
 ## Latte (PHP)
 
 **Output:** `ui/<brick>/<Part>.latte`
@@ -147,13 +166,13 @@ Writes `examples/html/index.html`, `examples/html/about/index.html` with relativ
 bun src/infrastructure/cli.ts generate --runtimes react,svelte
 ```
 
-Valid values: `templ`, `react`, `svelte`, `vue`, `latte`, `twig` (comma-separated). Default: all six.
+Valid values: `templ`, `react`, `svelte`, `vue`, `solid`, `latte`, `twig` (comma-separated). Default: all seven.
 
 ## Parity policy per runtime
 
 | Runtime | Parity test | Skipped when |
 |---------|-------------|--------------|
-| React, Svelte, Vue | `tests/parity.test.ts` | never (always run) |
+| React, Svelte, Vue, Solid | `tests/parity.test.ts` | never (always run) |
 | Go Templ | `tests/parity.templ.test.ts` | `go` not on PATH |
 | Latte | `tests/parity.latte.test.ts` | PHP or Composer unavailable |
 | Twig | `tests/parity.twig.test.ts` | PHP or Composer unavailable |

docs/runtimes.md

@@ -1,7 +1,7 @@
-# Codegen examples — seven welcome screens
+# Codegen examples — eight welcome screens
 
 Local preview for **generated** `ui/` primitives. Same shadcn tokens and
-welcome layout on all seven runtimes.
+welcome layout on all eight surfaces (seven codegen runtimes + static HTML).
 
 | Path | Runtime | Dev command | URL |
 |------|---------|-------------|-----|
@@ -12,6 +12,7 @@ welcome layout on all seven runtimes.
 | [`vue/`](vue/) | Vue 3 + Vite | `bun run dev:vue` | http://127.0.0.1:5175 |
 | [`latte/`](latte/) | Latte + PHP server | `bun run dev:latte` | http://127.0.0.1:5176 |
 | [`twig/`](twig/) | Twig + PHP server | `bun run dev:twig` | http://127.0.0.1:5177 |
+| [`solid/`](solid/) | SolidJS + Vite | `bun run dev:solid` | http://127.0.0.1:5178 |
 
 Shared assets live under [`web/static/`](web/static/) (CSS tokens, Tailwind
 output). Copy and feature text in [`data/welcome.json`](data/welcome.json).
@@ -34,7 +35,7 @@ From `ui8kit-codegen/`:
 bun run generate          # emit generated/ui (if missing)
 cd examples && bun install
 bun run build:css         # Tailwind → web/static/css/app.css
-bun run dev:templ         # or dev:react / dev:svelte / dev:vue
+bun run dev:templ         # or dev:react / dev:svelte / dev:vue / dev:solid
 ```
 
 Or from `ui8kit-codegen/` root (after `examples` deps are installed):
@@ -44,6 +45,7 @@ bun run dev:templ
 bun run dev:react
 bun run dev:svelte
 bun run dev:vue
+bun run dev:solid
 ```
 
 ## Layout
@@ -58,5 +60,6 @@ bun run dev:vue
 | `react/script/generate-static.tsx` | Static HTML export (routes + relative links) |
 | `svelte/src/Welcome.svelte` | Svelte twin |
 | `vue/src/Welcome.vue` | Vue twin |
+| `solid/src/Welcome.tsx` | Solid twin |
 | `latte/templates/welcome.latte` | Latte twin (generated `.latte` includes) |
 | `twig/templates/welcome.html.twig` | Twig twin (generated `.html.twig` includes) |

examples/README.md

@@ -8,7 +8,7 @@
     },
     {
       "title": "Seven runtimes",
-      "description": "Go Templ, React 19, Svelte 5, Vue 3, Latte, Twig, and static HTML from the same source."
+      "description": "Go Templ, React 19, Svelte 5, Vue 3, SolidJS, Latte, and Twig from the same source."
     },
     {
       "title": "DOM parity",
@@ -21,6 +21,7 @@
     { "id": "svelte", "label": "Svelte 5", "port": 5174 },
     { "id": "vue", "label": "Vue 3", "port": 5175 },
     { "id": "latte", "label": "Latte", "port": 5176 },
-    { "id": "twig", "label": "Twig", "port": 5177 }
+    { "id": "twig", "label": "Twig", "port": 5177 },
+    { "id": "solid", "label": "SolidJS", "port": 5178 }
   ]
 }

examples/data/welcome.json

@@ -10,6 +10,7 @@
     "dev:react": "bun run build:css && vite --config react/vite.config.ts",
     "dev:svelte": "bun run build:css && vite --config svelte/vite.config.ts",
     "dev:vue": "bun run build:css && vite --config vue/vite.config.ts",
+    "dev:solid": "bun run build:css && vite --config solid/vite.config.ts",
     "dev:latte": "bun run composer:install && bun run build:css && bun scripts/php-server.mjs latte 5176",
     "dev:twig": "bun run composer:install && bun run build:css && bun scripts/php-server.mjs twig 5177",
     "build:html": "bun run build:css && bun react/script/generate-static.tsx"
@@ -18,6 +19,7 @@
     "clsx": "^2.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "solid-js": "^1.9.5",
     "svelte": "^5.19.0",
     "tailwind-merge": "^2.6.0",
     "vue": "^3.5.13"
@@ -32,6 +34,7 @@
     "sirv": "^3.0.1",
     "tailwindcss": "^4.2.1",
     "typescript": "^5.7.3",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vite-plugin-solid": "^2.11.6"
   }
 }