feat: add all integration examples and Pages preview

.github/workflows/ci.yml

@@ -15,11 +15,23 @@ jobs:
         node: [22.22.1, 24.11.0]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
         with:
           node-version: ${{ matrix.node }}
+          package-manager-cache: false
       - run: corepack enable
       - run: corepack pnpm install --frozen-lockfile
       - run: corepack pnpm typecheck
       - run: corepack pnpm test
+  examples:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 24.11.0
+          package-manager-cache: false
+      - run: corepack enable
+      - run: corepack pnpm install --frozen-lockfile
+      - run: corepack pnpm build:pages

.github/workflows/pages.yml

@@ -0,0 +1,37 @@
+name: GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  id-token: write
+  pages: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 24.11.0
+          package-manager-cache: false
+      - run: corepack enable
+      - run: corepack pnpm install --frozen-lockfile
+      - run: corepack pnpm build:pages
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v4
+        with:
+          path: site
+      - id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -4,4 +4,5 @@ dist
 .docusaurus
 .cache
 coverage
+site
 *.tsbuildinfo

README.md

@@ -1,20 +1,66 @@
 # @vp-tw/react-live
 
-Build editable React examples directly from the component source used by your
-application and documentation.
+Build editable React examples from the same component source files that an
+application or documentation site imports. A `*.live.tsx` module keeps normal
+imports and a single default export; the build plugin turns it into an editor,
+runtime errors, and a live preview.
 
 This repository is the next-generation successor to
-[`react-live-unplugin`](https://github.com/VdustR/react-live-unplugin). It is
-under active development and is not published yet.
+[`react-live-unplugin`](https://github.com/VdustR/react-live-unplugin). The first
+review build is not published to npm yet.
 
-## First review target
+## Status
 
-- One npm package with explicit subpath exports.
-- Deterministic compiler output with documented module semantics.
-- React runtime powered by `react-live`.
-- Unplugin adapters for Vite, Rollup, Webpack, and Rolldown.
-- Docusaurus and Astro/Starlight integrations.
-- Runnable projects for every supported target in [`examples`](./examples).
-- A GitHub Pages index for all browser-capable demos.
+- One npm package with explicit subpath exports; no nested package family.
+- Vite, Rollup, Webpack, and Rolldown adapters.
+- Docusaurus and Astro Starlight integrations.
+- React 18 and newer are represented by the peer dependency contract.
+- Node.js 22.22.1, 24.11.0, and future even-numbered releases are represented by
+  the workspace engine and CI matrix.
 
-Track the implementation in [migration epic #1](https://github.com/vp-tw/react-live/issues/1).
+Every supported integration has a production-built project in
+[`examples`](./examples). The GitHub Pages workflow publishes all seven browser
+demos from one index.
+
+## Module contract
+
+Create a file such as `Counter.live.tsx`:
+
+```tsx
+import { useState } from "react";
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
+}
+```
+
+The module must contain exactly one default export. Imports become the runtime
+scope available to the editor. Type-only imports are excluded. Re-exports are
+rejected because they do not provide editable component source.
+
+## Entry points
+
+| Entry point | Purpose |
+| --- | --- |
+| `@vp-tw/react-live` | Compiler and runtime exports |
+| `@vp-tw/react-live/unplugin` | Vite, Rollup, Webpack, and Rolldown adapters |
+| `@vp-tw/react-live/react` | Default React live renderer |
+| `@vp-tw/react-live/docusaurus` | Docusaurus configuration plugin |
+| `@vp-tw/react-live/docusaurus/renderer` | Docusaurus renderer used by generated modules |
+| `@vp-tw/react-live/starlight` | Astro Starlight integration |
+
+The custom-renderer example demonstrates how to replace the default UI while
+keeping the same compiler.
+
+## Development
+
+```sh
+corepack pnpm install --frozen-lockfile
+corepack pnpm check
+corepack pnpm build:pages
+```
+
+Track architecture and migration work in
+[migration epic #1](https://github.com/vp-tw/react-live/issues/1). Publishing,
+moving users, and archiving the legacy repository require separate approval.

examples/README.md

@@ -0,0 +1,21 @@
+# Examples
+
+Each directory is a runnable production build and a fixture for one supported
+integration. `pnpm build:pages` builds every project and assembles the output in
+`site/` for GitHub Pages.
+
+| Directory | Coverage |
+| --- | --- |
+| `vite` | Vite adapter and React 18 runtime |
+| `rollup` | Direct Rollup adapter |
+| `webpack` | Webpack 5 adapter |
+| `rolldown` | Native Rolldown adapter |
+| `custom-renderer` | Custom generated-module renderer |
+| `docusaurus` | Docusaurus configuration plugin and SSR hydration |
+| `starlight` | Astro Starlight integration and hydrated React island |
+
+The remaining examples use React 19, so the examples exercise both supported
+React major versions.
+
+All example dependencies are workspace-local development fixtures. They are not
+additional published packages.

examples/custom-renderer/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Custom renderer demo</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>

examples/custom-renderer/package.json

@@ -0,0 +1 @@
+{"name":"@example/custom-renderer","private":true,"type":"module","scripts":{"build":"vite build","typecheck":"tsc --noEmit"},"dependencies":{"@vp-tw/react-live":"workspace:*","react":"^19.2.8","react-dom":"^19.2.8","react-live":"^4.1.8"}}

examples/custom-renderer/src/CustomLive.tsx

@@ -0,0 +1,2 @@
+import type {ReactLiveProps} from "@vp-tw/react-live/react"; import {ReactLive} from "@vp-tw/react-live/react";
+export function CustomLive(props:ReactLiveProps){return <div style={{border:"2px solid #7c3aed",borderRadius:12,padding:16}}><strong>Custom renderer</strong><ReactLive {...props}/></div>}

examples/custom-renderer/src/Demo.live.tsx

@@ -0,0 +1 @@
+import {useState} from "react"; export default function Counter(){const [count,setCount]=useState(0);return <button onClick={()=>setCount(count+1)}>Custom count: {count}</button>}

examples/custom-renderer/src/main.tsx

@@ -0,0 +1 @@
+import React from "react"; import {createRoot} from "react-dom/client"; import Demo from "./Demo.live"; createRoot(document.getElementById("root")!).render(<React.StrictMode><h1>Custom renderer</h1><Demo/></React.StrictMode>);

examples/custom-renderer/tsconfig.json

@@ -0,0 +1 @@
+{"extends":"../../tsconfig.json","compilerOptions":{"module":"ESNext","moduleResolution":"Bundler"},"include":["src","vite.config.ts"]}

examples/custom-renderer/vite.config.ts

@@ -0,0 +1,2 @@
+import react from "@vitejs/plugin-react"; import {defineConfig} from "vite"; import {reactLiveUnplugin} from "@vp-tw/react-live/unplugin";
+export default defineConfig({base:"/react-live/custom-renderer/",plugins:[reactLiveUnplugin.vite({rendererExport:"CustomLive",rendererModule:"./CustomLive"}),react()]});

examples/docusaurus/docs/index.mdx

@@ -0,0 +1,12 @@
+---
+title: Docusaurus demo
+slug: /
+---
+
+import Demo from "../src/components/Demo.live";
+
+# Docusaurus
+
+The source component below is also an editable live example.
+
+<Demo />

examples/docusaurus/docusaurus.config.ts

@@ -0,0 +1,2 @@
+import type {Config} from "@docusaurus/types"; import docusaurusReactLive from "@vp-tw/react-live/docusaurus";
+export default {title:"React Live · Docusaurus",url:"https://vp-tw.github.io",baseUrl:"/react-live/docusaurus/",favicon:"data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22><text y=%221em%22>⚛</text></svg>",organizationName:"vp-tw",projectName:"react-live",onBrokenLinks:"throw",presets:[["classic",{docs:{routeBasePath:"/",sidebarPath:false},blog:false}]],plugins:[docusaurusReactLive],themeConfig:{navbar:{title:"React Live",items:[]}}} satisfies Config;

examples/docusaurus/package.json

@@ -0,0 +1 @@
+{"name":"@example/docusaurus","private":true,"scripts":{"build":"docusaurus build --out-dir dist","typecheck":"tsc --noEmit"},"dependencies":{"@docusaurus/core":"^3.10.2","@docusaurus/preset-classic":"^3.10.2","@docusaurus/types":"^3.10.2","@mdx-js/react":"^3.1.1","@vp-tw/react-live":"workspace:*","clsx":"^2.1.1","prism-react-renderer":"^2.4.1","react":"^19.2.8","react-dom":"^19.2.8","react-live":"^4.1.8","webpack":"^5.110.3"}}

examples/docusaurus/src/components/Demo.live.tsx

@@ -0,0 +1 @@
+import {useState} from "react"; export default function Counter(){const [count,setCount]=useState(0);return <button onClick={()=>setCount(count+1)}>Docusaurus count: {count}</button>}

examples/docusaurus/tsconfig.json

@@ -0,0 +1 @@
+{"extends":"../../tsconfig.json","include":["src","docusaurus.config.ts"]}

examples/rolldown/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Rolldown demo</title></head><body><div id="root"></div><script type="module" src="./app.js"></script></body></html>

examples/rolldown/package.json

@@ -0,0 +1 @@
+{"name":"@example/rolldown","private":true,"type":"module","scripts":{"build":"rolldown -c && cp index.html dist/index.html","typecheck":"tsc --noEmit"},"dependencies":{"@vp-tw/react-live":"workspace:*","react":"^19.2.8","react-dom":"^19.2.8","react-live":"^4.1.8"}}

examples/rolldown/rolldown.config.ts

@@ -0,0 +1,2 @@
+import {defineConfig} from "rolldown"; import {reactLiveUnplugin} from "@vp-tw/react-live/unplugin";
+export default defineConfig({input:"src/main.tsx",output:{dir:"dist",entryFileNames:"app.js",format:"esm"},plugins:[reactLiveUnplugin.rolldown()]});

examples/rolldown/src/Demo.live.tsx

@@ -0,0 +1 @@
+import {useState} from "react"; export default function Counter(){const [count,setCount]=useState(0);return <button onClick={()=>setCount(count+1)}>Rolldown count: {count}</button>}

examples/rolldown/src/main.tsx

@@ -0,0 +1 @@
+import React from "react"; import {createRoot} from "react-dom/client"; import Demo from "./Demo.live"; createRoot(document.getElementById("root")!).render(<React.StrictMode><h1>Rolldown</h1><Demo/></React.StrictMode>);

examples/rolldown/tsconfig.json

@@ -0,0 +1 @@
+{"extends":"../../tsconfig.json","compilerOptions":{"module":"ESNext","moduleResolution":"Bundler"},"include":["src","rolldown.config.ts"]}

examples/rollup/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Rollup demo</title></head><body><div id="root"></div><script type="module" src="./app.js"></script></body></html>

examples/rollup/package.json

@@ -0,0 +1 @@
+{"name":"@example/rollup","private":true,"type":"module","scripts":{"build":"rollup -c && cp index.html dist/index.html","typecheck":"tsc --noEmit"},"dependencies":{"@vp-tw/react-live":"workspace:*","react":"^19.2.8","react-dom":"^19.2.8","react-live":"^4.1.8"},"devDependencies":{"@rollup/plugin-replace":"^6.0.3"}}

examples/rollup/rollup.config.ts

@@ -0,0 +1,3 @@
+import commonjs from "@rollup/plugin-commonjs"; import resolve from "@rollup/plugin-node-resolve"; import typescript from "@rollup/plugin-typescript"; import {reactLiveUnplugin} from "@vp-tw/react-live/unplugin";
+import replace from "@rollup/plugin-replace";
+export default {input:"src/main.tsx",output:{dir:"dist",entryFileNames:"app.js",format:"esm"},plugins:[replace({preventAssignment:true,"process.env.NODE_ENV":JSON.stringify("production")}),reactLiveUnplugin.rollup(),resolve({extensions:[".js",".jsx",".ts",".tsx"]}),commonjs(),typescript({jsx:"react-jsx",outDir:"dist"})]};

examples/rollup/src/Demo.live.tsx

@@ -0,0 +1 @@
+import { useState } from "react"; export default function Counter(){const [count,setCount]=useState(0);return <button onClick={()=>setCount(count+1)}>Rollup count: {count}</button>}

examples/rollup/src/main.tsx

@@ -0,0 +1 @@
+import React from "react"; import {createRoot} from "react-dom/client"; import Demo from "./Demo.live"; createRoot(document.getElementById("root")!).render(<React.StrictMode><h1>Rollup</h1><Demo/></React.StrictMode>);

examples/rollup/tsconfig.json

@@ -0,0 +1 @@
+{"extends":"../../tsconfig.json","compilerOptions":{"module":"ESNext","moduleResolution":"Bundler"},"include":["src","rollup.config.ts"]}

examples/starlight/astro.config.mjs

@@ -0,0 +1,2 @@
+import {defineConfig} from "astro/config"; import starlight from "@astrojs/starlight"; import starlightReactLive from "@vp-tw/react-live/starlight";
+export default defineConfig({site:"https://vp-tw.github.io",base:"/react-live/starlight",integrations:[starlight({title:"React Live · Starlight",plugins:[starlightReactLive()],sidebar:[{label:"Demo",slug:"demo"}]})]});

examples/starlight/package.json

@@ -0,0 +1 @@
+{"name":"@example/starlight","private":true,"type":"module","scripts":{"build":"astro build","typecheck":"astro check"},"dependencies":{"@astrojs/check":"^0.9.6","@astrojs/react":"^6.0.5","@astrojs/starlight":"^0.42.0","@vp-tw/react-live":"workspace:*","astro":"^7.3.1","react":"^19.2.8","react-dom":"^19.2.8","react-live":"^4.1.8","sharp":"^0.34.4"}}

examples/starlight/src/components/Demo.live.tsx

@@ -0,0 +1 @@
+import {useState} from "react"; export default function Counter(){const [count,setCount]=useState(0);return <button onClick={()=>setCount(count+1)}>Starlight count: {count}</button>}

examples/starlight/src/content.config.ts

@@ -0,0 +1,2 @@
+import {defineCollection} from "astro:content"; import {docsLoader} from "@astrojs/starlight/loaders"; import {docsSchema} from "@astrojs/starlight/schema";
+export const collections={docs:defineCollection({loader:docsLoader(),schema:docsSchema()})};

examples/starlight/src/content/docs/demo.mdx

@@ -0,0 +1,12 @@
+---
+title: Starlight demo
+description: An editable React component hydrated as an Astro island.
+---
+
+import Demo from "../../components/Demo.live";
+
+# Astro Starlight
+
+The source component below is transformed at build time and hydrated as a React island.
+
+<Demo client:load />

examples/starlight/tsconfig.json

@@ -0,0 +1 @@
+{"extends":"astro/tsconfigs/strict","include":[".astro/types.d.ts","**/*"],"exclude":["dist"]}

examples/vite/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vite demo</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>

examples/vite/package.json

@@ -0,0 +1 @@
+{"name":"@example/vite","private":true,"type":"module","scripts":{"build":"vite build","typecheck":"tsc --noEmit"},"dependencies":{"@vp-tw/react-live":"workspace:*","react":"^18.3.1","react-dom":"^18.3.1","react-live":"^4.1.8"},"devDependencies":{"@vitejs/plugin-react":"^6.0.1","vite":"^8.2.2"}}

examples/vite/src/Button.tsx

@@ -0,0 +1,5 @@
+import type { ButtonHTMLAttributes } from "react";
+
+export function Button(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button {...props} />;
+}

examples/vite/src/Demo.live.tsx

@@ -0,0 +1,3 @@
+import { useState } from "react";
+import { Button } from "./Button";
+export default function Counter() { const [count, setCount] = useState(0); return <Button onClick={() => setCount(count + 1)}>Vite count: {count}</Button>; }

examples/vite/src/main.tsx

@@ -0,0 +1,2 @@
+import React from "react"; import { createRoot } from "react-dom/client"; import Demo from "./Demo.live";
+createRoot(document.getElementById("root")!).render(<React.StrictMode><main><h1>Vite</h1><Demo /></main></React.StrictMode>);

examples/vite/tsconfig.json

@@ -0,0 +1 @@
+{"extends":"../../tsconfig.json","compilerOptions":{"module":"ESNext","moduleResolution":"Bundler"},"include":["src","vite.config.ts"]}

examples/vite/vite.config.ts

@@ -0,0 +1,2 @@
+import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import { reactLiveUnplugin } from "@vp-tw/react-live/unplugin";
+export default defineConfig({base:"/react-live/vite/",resolve:{dedupe:["react","react-dom"]},plugins:[reactLiveUnplugin.vite(),react()]});

examples/webpack/package.json

@@ -0,0 +1 @@
+{"name":"@example/webpack","private":true,"type":"module","scripts":{"build":"webpack --mode production","typecheck":"tsc --noEmit"},"dependencies":{"@vp-tw/react-live":"workspace:*","react":"^19.2.8","react-dom":"^19.2.8","react-live":"^4.1.8"},"devDependencies":{"html-webpack-plugin":"^5.6.8","ts-loader":"^9.6.2","webpack":"^5.110.3","webpack-cli":"^7.2.3"}}

examples/webpack/src/Demo.live.tsx

@@ -0,0 +1 @@
+import {useState} from "react"; export default function Counter(){const [count,setCount]=useState(0);return <button onClick={()=>setCount(count+1)}>Webpack count: {count}</button>}

examples/webpack/src/main.tsx

@@ -0,0 +1 @@
+import React from "react"; import {createRoot} from "react-dom/client"; import Demo from "./Demo.live"; createRoot(document.getElementById("root")!).render(<React.StrictMode><h1>Webpack</h1><Demo/></React.StrictMode>);

examples/webpack/tsconfig.json

@@ -0,0 +1 @@
+{"extends":"../../tsconfig.json","compilerOptions":{"module":"ESNext","moduleResolution":"Bundler"},"include":["src"]}

package.json

@@ -9,13 +9,26 @@
   },
   "scripts": {
     "build": "corepack pnpm --filter @vp-tw/react-live build",
-    "build:examples": "corepack pnpm --filter './examples/*' build",
+    "build:examples": "corepack pnpm --workspace-concurrency=1 --filter './examples/*' build",
+    "build:pages": "corepack pnpm build && corepack pnpm build:examples && node scripts/build-pages.mjs",
     "check": "corepack pnpm typecheck && corepack pnpm test && corepack pnpm build:examples",
     "test": "corepack pnpm --filter @vp-tw/react-live test",
-    "typecheck": "corepack pnpm -r typecheck"
+    "typecheck": "corepack pnpm build && corepack pnpm -r typecheck"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@types/node": "^24.10.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2"
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-live": "^4.1.8",
+    "rolldown": "^1.2.7",
+    "rollup": "^4.63.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.2.2"
   }
 }

packages/react-live/build.config.ts

@@ -1,23 +1,46 @@
+import type { BuildEntry } from "unbuild";
 import { defineBuildConfig } from "unbuild";
+import { build } from "esbuild";
+
+const entry = {
+  builder: "mkdist",
+  declaration: true,
+  ext: "js",
+  format: "esm",
+  input: "src",
+  outDir: "dist",
+} satisfies BuildEntry;
 
 export default defineBuildConfig({
   clean: true,
-  declaration: true,
-  entries: [
-    "src/index",
-    "src/unplugin",
-    "src/react",
-    "src/docusaurus",
-    "src/starlight",
-  ],
+  entries: [entry],
+  failOnWarn: true,
   externals: [
     "@astrojs/react",
     "@astrojs/starlight",
     "@docusaurus/core",
-    "@docusaurus/theme-live-codeblock",
     "react",
     "react-dom",
     "react-live",
   ],
-  rollup: { emitCJS: false },
+  hooks: {
+    async "build:done"(ctx) {
+      await build({
+        bundle: true,
+        entryPoints: ["src/docusaurus.tsx"],
+        format: "cjs",
+        outfile: "dist/docusaurus.cjs",
+        packages: "external",
+        platform: "node",
+      });
+      for (const warning of ctx.warnings) {
+        if (
+          warning.includes("Potential missing package.json files:") &&
+          warning.includes("dist/docusaurus.cjs")
+        ) {
+          ctx.warnings.delete(warning);
+        }
+      }
+    },
+  },
 });