diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 23a0f11..d129870 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -19,6 +19,7 @@ function listErrorCodes(prefix: string): string[] { function guideItems(prefix: string): DefaultTheme.NavItemWithLink[] { return [ { text: 'Introduction', link: `${prefix}/guide/` }, + { text: 'Built with Devframe', link: `${prefix}/guide/built-with` }, { text: 'Devframe Definition', link: `${prefix}/guide/devframe-definition` }, { text: 'RPC', link: `${prefix}/guide/rpc` }, { text: 'Shared State', link: `${prefix}/guide/shared-state` }, diff --git a/docs/guide/built-with.md b/docs/guide/built-with.md new file mode 100644 index 0000000..a7ba144 --- /dev/null +++ b/docs/guide/built-with.md @@ -0,0 +1,17 @@ +--- +outline: deep +--- + +# Built with Devframe + +Real-world devtools shipping on Devframe: + +- [**Vite DevTools**](https://devtools.vite.dev/) — the host that bundles multiple devframes into one UI (docks, command palette, terminals). Mount your own definition into it via the [`vite` adapter](/adapters/vite). +- [**ESLint Config Inspector**](https://github.com/eslint/config-inspector) — official ESLint tool for inspecting flat configs. +- [**node-modules-inspector**](https://github.com/antfu/node-modules-inspector) — interactive visualizer for your `node_modules` dependency graph. + +End-to-end examples in this repo, exercising the full adapter surface: + +- [**counter**](https://github.com/devframes/devframe/tree/main/examples/counter) — smallest possible demo, exercises all adapters. +- [**files-inspector**](https://github.com/devframes/devframe/tree/main/examples/files-inspector) — lists files in cwd via RPC; exercises CLI dev/build/spa surfaces. +- [**streaming-chat**](https://github.com/devframes/devframe/tree/main/examples/streaming-chat) — streams synthetic chat tokens from server to client via `ctx.rpc.streaming`. diff --git a/docs/guide/index.md b/docs/guide/index.md index 791522e..3cf11d6 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -109,16 +109,3 @@ Devframe has zero dependencies on Vite or any `@vitejs/*` package — the same d - [RPC](./rpc) — define type-safe server functions your client can call - [Agent-Native](./agent-native) — expose your devframe to Claude Desktop, Cursor, or any MCP client -## Built with Devframe - -Real-world devtools shipping on Devframe: - -- [**Vite DevTools**](https://devtools.vite.dev/) — the host that bundles multiple devframes into one UI (docks, command palette, terminals). Mount your own definition into it via the [`vite` adapter](/adapters/vite). -- [**ESLint Config Inspector**](https://github.com/eslint/config-inspector) — official ESLint tool for inspecting flat configs. -- [**node-modules-inspector**](https://github.com/antfu/node-modules-inspector) — interactive visualizer for your `node_modules` dependency graph. - -End-to-end examples in this repo, exercising the full adapter surface: - -- [**devframe-counter**](https://github.com/devframes/devframe/tree/main/examples/devframe-counter) — smallest possible demo, exercises all adapters. -- [**devframe-files-inspector**](https://github.com/devframes/devframe/tree/main/examples/devframe-files-inspector) — lists files in cwd via RPC; exercises CLI dev/build/spa surfaces. -- [**devframe-streaming-chat**](https://github.com/devframes/devframe/tree/main/examples/devframe-streaming-chat) — streams synthetic chat tokens from server to client via `ctx.rpc.streaming`. diff --git a/docs/guide/streaming.md b/docs/guide/streaming.md index 9ad9da7..2843d53 100644 --- a/docs/guide/streaming.md +++ b/docs/guide/streaming.md @@ -234,5 +234,5 @@ When you need authoritative state rather than every intermediate value, [shared ## Reference - API surface: `RpcStreamingHost`, `RpcStreamingChannel`, `StreamSink`, `StreamReader` in `devframe/types`. -- Working example: [`devframe/examples/devframe-streaming-chat`](https://github.com/vitejs/devtools/tree/main/devframe/examples/devframe-streaming-chat). +- Working example: [`examples/streaming-chat`](https://github.com/devframes/devframe/tree/main/examples/streaming-chat). - Errors: [`DF0029`](../errors/DF0029) (overflow), [`DF0030`](../errors/DF0030) (unknown stream id), [`DF0031`](../errors/DF0031) (write to closed stream), [`DF0032`](../errors/DF0032) (channel name collision). diff --git a/examples/devframe-counter/bin.mjs b/examples/counter/bin.mjs similarity index 100% rename from examples/devframe-counter/bin.mjs rename to examples/counter/bin.mjs diff --git a/examples/devframe-counter/package.json b/examples/counter/package.json similarity index 82% rename from examples/devframe-counter/package.json rename to examples/counter/package.json index def4841..2d8bde8 100644 --- a/examples/devframe-counter/package.json +++ b/examples/counter/package.json @@ -1,12 +1,12 @@ { - "name": "devframe-counter-example", + "name": "counter-example", "type": "module", "version": "0.2.0", "private": true, "description": "Smallest end-to-end devframe demo — exercises all six adapters.", "main": "src/devframe.ts", "bin": { - "devframe-counter": "./bin.mjs" + "counter": "./bin.mjs" }, "scripts": { "dev": "node bin.mjs", diff --git a/examples/devframe-counter/src/client/index.html b/examples/counter/src/client/index.html similarity index 100% rename from examples/devframe-counter/src/client/index.html rename to examples/counter/src/client/index.html diff --git a/examples/devframe-counter/src/client/main.ts b/examples/counter/src/client/main.ts similarity index 100% rename from examples/devframe-counter/src/client/main.ts rename to examples/counter/src/client/main.ts diff --git a/examples/devframe-counter/src/devframe.ts b/examples/counter/src/devframe.ts similarity index 100% rename from examples/devframe-counter/src/devframe.ts rename to examples/counter/src/devframe.ts diff --git a/examples/devframe-files-inspector/.gitignore b/examples/files-inspector/.gitignore similarity index 100% rename from examples/devframe-files-inspector/.gitignore rename to examples/files-inspector/.gitignore diff --git a/examples/devframe-files-inspector/README.md b/examples/files-inspector/README.md similarity index 77% rename from examples/devframe-files-inspector/README.md rename to examples/files-inspector/README.md index 450c509..1c59ad2 100644 --- a/examples/devframe-files-inspector/README.md +++ b/examples/files-inspector/README.md @@ -14,11 +14,11 @@ The Preact client showcases two patterns relevant to devframe authors: ```sh pnpm install -pnpm -C examples/devframe-files-inspector run build # build the Preact client -pnpm -C examples/devframe-files-inspector run dev # http://127.0.0.1:9876/__devframe-files-inspector/ -pnpm -C examples/devframe-files-inspector run cli:build # static deploy in ./dist/static -serve examples/devframe-files-inspector/dist/static # any static host works (relative paths) -pnpm -C examples/devframe-files-inspector run test # E2E tests +pnpm -C examples/files-inspector run build # build the Preact client +pnpm -C examples/files-inspector run dev # http://127.0.0.1:9876/__devframe-files-inspector/ +pnpm -C examples/files-inspector run cli:build # static deploy in ./dist/static +serve examples/files-inspector/dist/static # any static host works (relative paths) +pnpm -C examples/files-inspector run test # E2E tests ``` ## File map diff --git a/examples/devframe-files-inspector/bin.mjs b/examples/files-inspector/bin.mjs similarity index 100% rename from examples/devframe-files-inspector/bin.mjs rename to examples/files-inspector/bin.mjs diff --git a/examples/devframe-files-inspector/package.json b/examples/files-inspector/package.json similarity index 89% rename from examples/devframe-files-inspector/package.json rename to examples/files-inspector/package.json index fd8898f..bcac659 100644 --- a/examples/devframe-files-inspector/package.json +++ b/examples/files-inspector/package.json @@ -1,12 +1,12 @@ { - "name": "devframe-files-inspector-example", + "name": "files-inspector-example", "type": "module", "version": "0.2.0", "private": true, "description": "End-to-end devframe demo — lists files in cwd via RPC, exercises CLI dev/build/spa surfaces.", "main": "src/devframe.ts", "bin": { - "devframe-files-inspector": "./bin.mjs" + "files-inspector": "./bin.mjs" }, "scripts": { "build": "vite build --config src/client/vite.config.ts", diff --git a/examples/devframe-files-inspector/src/client/app.tsx b/examples/files-inspector/src/client/app.tsx similarity index 100% rename from examples/devframe-files-inspector/src/client/app.tsx rename to examples/files-inspector/src/client/app.tsx diff --git a/examples/devframe-files-inspector/src/client/index.html b/examples/files-inspector/src/client/index.html similarity index 100% rename from examples/devframe-files-inspector/src/client/index.html rename to examples/files-inspector/src/client/index.html diff --git a/examples/devframe-files-inspector/src/client/main.tsx b/examples/files-inspector/src/client/main.tsx similarity index 100% rename from examples/devframe-files-inspector/src/client/main.tsx rename to examples/files-inspector/src/client/main.tsx diff --git a/examples/devframe-files-inspector/src/client/routes/about.tsx b/examples/files-inspector/src/client/routes/about.tsx similarity index 100% rename from examples/devframe-files-inspector/src/client/routes/about.tsx rename to examples/files-inspector/src/client/routes/about.tsx diff --git a/examples/devframe-files-inspector/src/client/routes/home.tsx b/examples/files-inspector/src/client/routes/home.tsx similarity index 100% rename from examples/devframe-files-inspector/src/client/routes/home.tsx rename to examples/files-inspector/src/client/routes/home.tsx diff --git a/examples/devframe-files-inspector/src/client/vite.config.ts b/examples/files-inspector/src/client/vite.config.ts similarity index 100% rename from examples/devframe-files-inspector/src/client/vite.config.ts rename to examples/files-inspector/src/client/vite.config.ts diff --git a/examples/devframe-files-inspector/src/devframe.ts b/examples/files-inspector/src/devframe.ts similarity index 100% rename from examples/devframe-files-inspector/src/devframe.ts rename to examples/files-inspector/src/devframe.ts diff --git a/examples/devframe-files-inspector/tests/_utils.ts b/examples/files-inspector/tests/_utils.ts similarity index 97% rename from examples/devframe-files-inspector/tests/_utils.ts rename to examples/files-inspector/tests/_utils.ts index 816c8c5..4e1f170 100644 --- a/examples/devframe-files-inspector/tests/_utils.ts +++ b/examples/files-inspector/tests/_utils.ts @@ -29,7 +29,7 @@ export const CLIENT_DIST = resolve(HERE, '../dist/client') export function assertClientBuilt(): void { if (!existsSync(path.join(CLIENT_DIST, 'index.html'))) { throw new Error( - `[devframe-files-inspector] dist/client missing — run \`pnpm -C examples/devframe-files-inspector run build\` first.`, + `[devframe-files-inspector] dist/client missing — run \`pnpm -C examples/files-inspector run build\` first.`, ) } } diff --git a/examples/devframe-files-inspector/tests/dev-server.test.ts b/examples/files-inspector/tests/dev-server.test.ts similarity index 100% rename from examples/devframe-files-inspector/tests/dev-server.test.ts rename to examples/files-inspector/tests/dev-server.test.ts diff --git a/examples/devframe-files-inspector/tests/static-build.test.ts b/examples/files-inspector/tests/static-build.test.ts similarity index 100% rename from examples/devframe-files-inspector/tests/static-build.test.ts rename to examples/files-inspector/tests/static-build.test.ts diff --git a/examples/devframe-files-inspector/tests/static-serve.test.ts b/examples/files-inspector/tests/static-serve.test.ts similarity index 100% rename from examples/devframe-files-inspector/tests/static-serve.test.ts rename to examples/files-inspector/tests/static-serve.test.ts diff --git a/examples/devframe-files-inspector/tsconfig.json b/examples/files-inspector/tsconfig.json similarity index 100% rename from examples/devframe-files-inspector/tsconfig.json rename to examples/files-inspector/tsconfig.json diff --git a/examples/devframe-streaming-chat/README.md b/examples/streaming-chat/README.md similarity index 92% rename from examples/devframe-streaming-chat/README.md rename to examples/streaming-chat/README.md index 7d4a920..f0d2cd1 100644 --- a/examples/devframe-streaming-chat/README.md +++ b/examples/streaming-chat/README.md @@ -26,8 +26,8 @@ client (re)joins mid-stream. ## Run it ```sh -pnpm -C devframe/examples/devframe-streaming-chat run build -pnpm -C devframe/examples/devframe-streaming-chat run dev +pnpm -C examples/streaming-chat run build +pnpm -C examples/streaming-chat run dev ``` Then open http://localhost:9897/ — type a prompt, watch tokens stream @@ -37,7 +37,7 @@ in, refresh the page mid-conversation, cancel a long answer, click ## Run the tests ```sh -pnpm -C devframe/examples/devframe-streaming-chat run test +pnpm -C examples/streaming-chat run test ``` Tests boot the server in-process and exercise the full WS round-trip: diff --git a/examples/devframe-streaming-chat/bin.mjs b/examples/streaming-chat/bin.mjs similarity index 100% rename from examples/devframe-streaming-chat/bin.mjs rename to examples/streaming-chat/bin.mjs diff --git a/examples/devframe-streaming-chat/package.json b/examples/streaming-chat/package.json similarity index 89% rename from examples/devframe-streaming-chat/package.json rename to examples/streaming-chat/package.json index 8eb9d0c..59f0011 100644 --- a/examples/devframe-streaming-chat/package.json +++ b/examples/streaming-chat/package.json @@ -1,12 +1,12 @@ { - "name": "devframe-streaming-chat-example", + "name": "streaming-chat-example", "type": "module", "version": "0.2.0", "private": true, "description": "End-to-end devframe demo — streams synthetic chat tokens from server to client via `ctx.rpc.streaming`. Mirrors the AI-deltas use case from issue #306.", "main": "src/devframe.ts", "bin": { - "devframe-streaming-chat": "./bin.mjs" + "streaming-chat": "./bin.mjs" }, "scripts": { "build": "vite build --config src/client/vite.config.ts", diff --git a/examples/devframe-streaming-chat/src/client/app.tsx b/examples/streaming-chat/src/client/app.tsx similarity index 100% rename from examples/devframe-streaming-chat/src/client/app.tsx rename to examples/streaming-chat/src/client/app.tsx diff --git a/examples/devframe-streaming-chat/src/client/index.html b/examples/streaming-chat/src/client/index.html similarity index 100% rename from examples/devframe-streaming-chat/src/client/index.html rename to examples/streaming-chat/src/client/index.html diff --git a/examples/devframe-streaming-chat/src/client/main.tsx b/examples/streaming-chat/src/client/main.tsx similarity index 100% rename from examples/devframe-streaming-chat/src/client/main.tsx rename to examples/streaming-chat/src/client/main.tsx diff --git a/examples/devframe-streaming-chat/src/client/vite.config.ts b/examples/streaming-chat/src/client/vite.config.ts similarity index 100% rename from examples/devframe-streaming-chat/src/client/vite.config.ts rename to examples/streaming-chat/src/client/vite.config.ts diff --git a/examples/devframe-streaming-chat/src/devframe.ts b/examples/streaming-chat/src/devframe.ts similarity index 100% rename from examples/devframe-streaming-chat/src/devframe.ts rename to examples/streaming-chat/src/devframe.ts diff --git a/examples/devframe-streaming-chat/tests/_utils.ts b/examples/streaming-chat/tests/_utils.ts similarity index 100% rename from examples/devframe-streaming-chat/tests/_utils.ts rename to examples/streaming-chat/tests/_utils.ts diff --git a/examples/devframe-streaming-chat/tests/streaming-chat.test.ts b/examples/streaming-chat/tests/streaming-chat.test.ts similarity index 100% rename from examples/devframe-streaming-chat/tests/streaming-chat.test.ts rename to examples/streaming-chat/tests/streaming-chat.test.ts diff --git a/examples/devframe-streaming-chat/tsconfig.json b/examples/streaming-chat/tsconfig.json similarity index 100% rename from examples/devframe-streaming-chat/tsconfig.json rename to examples/streaming-chat/tsconfig.json diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 03ab94f..5659e54 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -235,13 +235,13 @@ importers: specifier: catalog:docs version: 2.0.17(mermaid@11.15.0)(vitepress@2.0.0-alpha.17(@types/node@25.7.0)(change-case@5.4.4)(jiti@2.7.0)(lightningcss@1.32.0)(postcss@8.5.14)(tsx@4.21.0)(typescript@6.0.3)(yaml@2.8.4)) - examples/devframe-counter: + examples/counter: dependencies: devframe: specifier: workspace:* version: link:../../packages/devframe - examples/devframe-files-inspector: + examples/files-inspector: dependencies: devframe: specifier: workspace:* @@ -272,7 +272,7 @@ importers: specifier: catalog:deps version: 8.20.0 - examples/devframe-streaming-chat: + examples/streaming-chat: dependencies: devframe: specifier: workspace:* diff --git a/skills/devframe/SKILL.md b/skills/devframe/SKILL.md index 55afe95..b9b7361 100644 --- a/skills/devframe/SKILL.md +++ b/skills/devframe/SKILL.md @@ -239,7 +239,7 @@ Readable.fromWeb(reader.readable).pipe(targetNodeWritable) | Per-call lifecycles with cancellation | Cross-cutting fire-and-forget signals | Diff-based sync between clients | | Replay on reconnect | | | -For chat-style UIs that combine both: keep the **conversation log** in shared state (survives reconnects), and use a streaming channel for **active responses**. The action that starts a response appends a placeholder to shared state; on producer close, commit the joined content back to shared state. Working example: [`devframe/examples/devframe-streaming-chat`](https://github.com/vitejs/devtools/tree/main/devframe/examples/devframe-streaming-chat). +For chat-style UIs that combine both: keep the **conversation log** in shared state (survives reconnects), and use a streaming channel for **active responses**. The action that starts a response appends a placeholder to shared state; on producer close, commit the joined content back to shared state. Working example: [`examples/streaming-chat`](https://github.com/devframes/devframe/tree/main/examples/streaming-chat). ## Mounting into a host (Vite DevTools example) diff --git a/turbo.json b/turbo.json index b8f43f2..8b78a88 100644 --- a/turbo.json +++ b/turbo.json @@ -10,12 +10,12 @@ "outputLogs": "new-only", "outputs": ["dist/**"] }, - "devframe-files-inspector-example#build": { + "files-inspector-example#build": { "outputLogs": "new-only", "dependsOn": ["devframe#build"], "outputs": ["dist/**"] }, - "devframe-streaming-chat-example#build": { + "streaming-chat-example#build": { "outputLogs": "new-only", "dependsOn": ["devframe#build"], "outputs": ["dist/**"] diff --git a/vitest.config.ts b/vitest.config.ts index c5a96b3..c9b5ee3 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -4,8 +4,8 @@ export default defineConfig({ test: { projects: [ 'packages/devframe', - 'examples/devframe-files-inspector', - 'examples/devframe-streaming-chat', + 'examples/files-inspector', + 'examples/streaming-chat', 'tests', ], testTimeout: 10000,