@pyreon/vite-plugin 0.22.0 → 0.24.0

package/README.md

@@ -1,6 +1,8 @@
 # @pyreon/vite-plugin
 
-Vite plugin for the Pyreon framework. Applies the Pyreon JSX reactive transform to `.tsx`, `.jsx`, and `.pyreon` files, and optionally adds SSR dev middleware.
+Vite plugin for Pyreon — JSX transform, signal-preserving HMR, SSR middleware, islands auto-registry, compat aliasing.
+
+`@pyreon/vite-plugin` is the single Vite integration Pyreon needs. It wires `@pyreon/compiler` into Vite's transform pipeline, sets `resolve.conditions: ["bun"]` so workspace source files resolve via the `bun` condition, configures the JSX runtime to `@pyreon/core`, and provides signal-preserving HMR (top-level `signal()` values survive hot reload). Optional features: SSR dev middleware (`ssr.entry`), an auto-discovered islands registry (`islands: true`, the `virtual:pyreon/islands-registry` module fed to `hydrateIslandsAuto()`), drop-in compat-mode aliasing (`compat: 'react' | 'preact' | 'vue' | 'solid' | 'svelte'`), and the opt-in compile-time rocketstyle wrapper collapse (`collapse: true`, build-only).
 
 ## Install
 
@@ -8,7 +10,7 @@ Vite plugin for the Pyreon framework. Applies the Pyreon JSX reactive transform
 bun add -D @pyreon/vite-plugin
 ```
 
-## Quick Start (SPA)
+## Quick start (SPA)
 
 ```ts
 // vite.config.ts
@@ -20,21 +22,30 @@ export default defineConfig({
 })
 ```
 
-## SSR Mode
+`tsconfig.json`:
 
-Pass an `ssr` option to enable SSR dev middleware. The plugin will load your server entry via Vite's `ssrLoadModule` and call its exported `handler` function for every non-asset GET request.
+```jsonc
+{
+  "extends": "@pyreon/typescript/app",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@pyreon/core"
+  }
+}
+```
+
+## SSR dev mode
 
 ```ts
 // vite.config.ts
 import pyreon from '@pyreon/vite-plugin'
-import { defineConfig } from 'vite'
 
-export default defineConfig({
+export default {
   plugins: [pyreon({ ssr: { entry: './src/entry-server.ts' } })],
-})
+}
 ```
 
-Your server entry must export a `handler` (or default export) with the signature `(req: Request) => Promise<Response>`:
+The entry must export a `handler` (or default export) of shape `(req: Request) => Promise<Response>`:
 
 ```tsx
 // src/entry-server.ts
@@ -43,35 +54,96 @@ import App from './App'
 
 export async function handler(req: Request): Promise<Response> {
   const html = await renderToString(<App />)
-  return new Response(html, {
-    headers: { 'Content-Type': 'text/html' },
-  })
+  return new Response(html, { headers: { 'Content-Type': 'text/html' } })
 }
 ```
 
-For production, build client and server bundles separately:
+Production builds:
 
 ```bash
 vite build                                                  # client bundle
 vite build --ssr src/entry-server.ts --outDir dist/server   # server bundle
 ```
 
-## API
+## Drop-in compat mode
+
+Alias an existing framework's imports to Pyreon's compat layer — zero code changes:
+
+```ts
+pyreon({ compat: 'react' })    // react + react-dom → @pyreon/react-compat
+pyreon({ compat: 'preact' })   // preact + hooks + signals → @pyreon/preact-compat
+pyreon({ compat: 'vue' })      // vue → @pyreon/vue-compat
+pyreon({ compat: 'solid' })    // solid-js → @pyreon/solid-compat
+pyreon({ compat: 'svelte' })   // svelte + svelte/store → @pyreon/svelte-compat
+```
+
+Framework-internal `@pyreon/*` files are detected and skip the redirect so published `@pyreon/zero` etc. still load their real JSX runtime.
+
+## Islands auto-registry
+
+```ts
+pyreon({ islands: true })  // default on
+```
+
+Pre-scans `island(() => import('PATH'), { name, hydrate })` calls at `buildStart` and emits `virtual:pyreon/islands-registry`. Consume it in your client entry:
+
+```ts
+// src/entry-client.ts
+import { hydrateIslandsAuto } from '@pyreon/server/client'
+import islands from 'virtual:pyreon/islands-registry'
+
+hydrateIslandsAuto(islands)
+```
+
+`hydrate: 'never'` islands are deliberately OMITTED from the registry — the strategy ships zero client JS, so registering a loader (which would pull the component into the client bundle graph) would defeat it. Manual `hydrateIslands({ … })` stays public for non-Vite consumers.
+
+## Rocketstyle collapse (opt-in, build-only)
+
+```ts
+pyreon({ collapse: true })
+// or with overrides
+pyreon({ collapse: { sources: ['@pyreon/ui-components'], components: ['Button'] } })
+```
+
+A literal-prop rocketstyle call site (`<Button state="primary" size="medium">Save</Button>`) collapses from a 5-layer wrapper mount into one `_rsCollapse` cloneNode. The plugin SSR-resolves the real component twice (light + dark) and the compiler bakes the classes into a `_tpl` template. **Build-only** by design — dev keeps the normal mount so theme-source HMR edits stay reactive.
+
+## Options
+
+| Option        | Type                                                | Description                                                                                                |
+| ------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `compat`      | `'react' \| 'preact' \| 'vue' \| 'solid' \| 'svelte'` | Alias an existing framework's imports to the matching `@pyreon/*-compat` package.                          |
+| `ssr.entry`   | `string`                                            | Server entry path. Enables SSR dev middleware.                                                              |
+| `islands`     | `boolean`                                           | Auto-discover `island()` declarations into `virtual:pyreon/islands-registry`. Default `true`.              |
+| `collapse`    | `boolean \| PyreonCollapseOptions`                  | Opt-in compile-time rocketstyle wrapper collapse. OFF by default. Build-only.                              |
+
+`PyreonCollapseOptions`: `sources?: string[]` (default `['@pyreon/ui-components']`), `components?: string[]` (optional local-name allowlist), `provider?: { name, source }` (default `PyreonUI@@pyreon/ui-core`), `theme?: { name, source }` (default `theme@@pyreon/ui-theme`), `mode?: { name, source }` (default `useMode@@pyreon/ui-core`).
+
+## What it does
+
+- Wires `@pyreon/compiler`'s JSX reactive transform into `.tsx` / `.jsx` / `.pyreon` files (auto-call signals, hoist static subtrees, `_tpl` + `_bind`).
+- Sets `resolve.conditions: ["bun"]` so Pyreon workspace source files resolve through the `bun` condition (no separate build step in dev).
+- Configures the JSX runtime to `@pyreon/core` via `esbuild.jsx = 'automatic'` + `jsxImportSource`.
+- In dev: auto-injects debug names into `signal()` calls so devtools show meaningful labels.
+- In dev SSR: catch-all middleware loads the server entry via `ssrLoadModule` and renders every non-asset request.
+- Provides signal-preserving HMR via `virtual:pyreon/hmr-runtime` — top-level signal values survive hot reload.
+- Component-level fast-refresh: edits to a route component re-render in place via the router's `_hmrSwap` coordinator (registered on `globalThis.__pyreon_hmr_swap__`).
+- Pre-scans signal exports across files so cross-module signal references auto-call correctly.
+
+## Gotchas
+
+- **Vite's config bundler hardcodes `conditions: ["node"]`** — plugin source changes are INVISIBLE to a running dev server until `lib/` is rebuilt. After editing the plugin, `bun run --filter='@pyreon/vite-plugin' build` + restart Vite.
+- **Compat-mode applies `jsxImportSource`** automatically for the user's code. Set `jsxImportSource: "@pyreon/<compat>-compat"` in your tsconfig for type resolution.
+- **`collapse` is build-only by design.** Dev keeps the normal mount (HMR-reactive); the plugin emits `this.info('[Pyreon] collapse is build-only …')` once per dev process if `collapse: true` is set in `vite dev`.
+- **HMR accept callback uses the fresh module Vite hands it** — NOT a re-run of the lazy import thunk (that would return the frozen `?t=` old module).
 
-### `pyreonPlugin(options?)`
+## Peer dependencies
 
-Default export. Returns a Vite `Plugin`.
+- `vite >= 8.0.0`
 
-### Options
+## Documentation
 
-| Option      | Type     | Description                                         |
-| ----------- | -------- | --------------------------------------------------- |
-| `ssr.entry` | `string` | Server entry file path. Enables SSR dev middleware. |
+Full docs: [docs.pyreon.dev/docs/vite-plugin](https://docs.pyreon.dev/docs/vite-plugin) (or `docs/docs/vite-plugin.md` in this repo).
 
-## What It Does
+## License
 
-- Configures `resolve.conditions: ["bun"]` so Vite resolves Pyreon workspace source files.
-- Sets `esbuild.jsx` to `automatic` with `@pyreon/core` as the JSX import source.
-- Transforms `.tsx`, `.jsx`, and `.pyreon` files through `@pyreon/compiler` for reactive JSX optimizations.
-- In dev mode, auto-injects debug names into `signal()` calls so devtools show meaningful labels instead of "anonymous".
-- In SSR mode, adds a catch-all middleware that renders pages through your server entry with full HMR support.
+MIT

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src/index.ts","uid":"f3fd0c0b-1"}]},{"name":"rocketstyle-collapse-C4eMAnwR.js","children":[{"name":"src/rocketstyle-collapse.ts","uid":"f3fd0c0b-3"}]}],"isRoot":true},"nodeParts":{"f3fd0c0b-1":{"renderedLength":33323,"gzipLength":10763,"brotliLength":0,"metaUid":"f3fd0c0b-0"},"f3fd0c0b-3":{"renderedLength":3424,"gzipLength":1530,"brotliLength":0,"metaUid":"f3fd0c0b-2"}},"nodeMetas":{"f3fd0c0b-0":{"id":"/src/index.ts","moduleParts":{"index.js":"f3fd0c0b-1"},"imported":[{"uid":"f3fd0c0b-4"},{"uid":"f3fd0c0b-5"},{"uid":"f3fd0c0b-6"},{"uid":"f3fd0c0b-2","dynamic":true}],"importedBy":[],"isEntry":true},"f3fd0c0b-2":{"id":"/src/rocketstyle-collapse.ts","moduleParts":{"rocketstyle-collapse-C4eMAnwR.js":"f3fd0c0b-3"},"imported":[{"uid":"f3fd0c0b-7","dynamic":true}],"importedBy":[{"uid":"f3fd0c0b-0"}]},"f3fd0c0b-4":{"id":"node:fs","moduleParts":{},"imported":[],"importedBy":[{"uid":"f3fd0c0b-0"}]},"f3fd0c0b-5":{"id":"node:path","moduleParts":{},"imported":[],"importedBy":[{"uid":"f3fd0c0b-0"}]},"f3fd0c0b-6":{"id":"@pyreon/compiler","moduleParts":{},"imported":[],"importedBy":[{"uid":"f3fd0c0b-0"}]},"f3fd0c0b-7":{"id":"vite","moduleParts":{},"imported":[],"importedBy":[{"uid":"f3fd0c0b-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src/index.ts","uid":"e04d9c6c-1"}]},{"name":"rocketstyle-collapse-C4eMAnwR.js","children":[{"name":"src/rocketstyle-collapse.ts","uid":"e04d9c6c-3"}]}],"isRoot":true},"nodeParts":{"e04d9c6c-1":{"renderedLength":45559,"gzipLength":14773,"brotliLength":0,"metaUid":"e04d9c6c-0"},"e04d9c6c-3":{"renderedLength":3424,"gzipLength":1530,"brotliLength":0,"metaUid":"e04d9c6c-2"}},"nodeMetas":{"e04d9c6c-0":{"id":"/src/index.ts","moduleParts":{"index.js":"e04d9c6c-1"},"imported":[{"uid":"e04d9c6c-4"},{"uid":"e04d9c6c-5"},{"uid":"e04d9c6c-6"},{"uid":"e04d9c6c-2","dynamic":true},{"uid":"e04d9c6c-7","dynamic":true}],"importedBy":[],"isEntry":true},"e04d9c6c-2":{"id":"/src/rocketstyle-collapse.ts","moduleParts":{"rocketstyle-collapse-C4eMAnwR.js":"e04d9c6c-3"},"imported":[{"uid":"e04d9c6c-8","dynamic":true}],"importedBy":[{"uid":"e04d9c6c-0"}]},"e04d9c6c-4":{"id":"node:fs","moduleParts":{},"imported":[],"importedBy":[{"uid":"e04d9c6c-0"}]},"e04d9c6c-5":{"id":"node:path","moduleParts":{},"imported":[],"importedBy":[{"uid":"e04d9c6c-0"}]},"e04d9c6c-6":{"id":"@pyreon/compiler","moduleParts":{},"imported":[],"importedBy":[{"uid":"e04d9c6c-0"}]},"e04d9c6c-7":{"id":"node:fs/promises","moduleParts":{},"imported":[],"importedBy":[{"uid":"e04d9c6c-0"}]},"e04d9c6c-8":{"id":"vite","moduleParts":{},"imported":[],"importedBy":[{"uid":"e04d9c6c-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;