Skip to content

Commit f8498e0

Browse files
antfubotantfubot
committed
feat(examples): install every built-in plugin in all hub-* examples
Each hub host example (hub-vite, hub-next, and the vite/next/rsbuild/hono/nitro minimal hosts) now mounts all nine built-in plugins — a11y, assets, code-server, data-inspector, git, inspect, messages, og, terminals — so every example dogfoods the full plugin surface end to end. - Node-config hosts (vite/rsbuild/hono/nitro) import the plugin factories directly; nitro adds each package to its externalized list so their import.meta.url dist lookups resolve. - Bundled Next hosts load the node-side plugins through the existing bundler-ignored dynamic import() (variable specifiers) so Turbopack never inlines their node-only code. - data-inspector gets a colon-free id override (its default id carries ':', invalid as a hub mount segment), and the assets watcher is disabled since these hosts demonstrate mounting, not authoring. Verified all nine frames mount with no diagnostics on both a node-config host (hub-vite-minimal) and a bundled host (hub-next-minimal) at runtime.
1 parent 70d6db2 commit f8498e0

16 files changed

Lines changed: 307 additions & 13 deletions

File tree

‎examples/hub-hono-minimal/package.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"type": "module",
44
"version": "0.8.1",
55
"private": true,
6-
"description": "Minimal Hono host for @devframes/hub \u2014 the same app file serves the devtools namespace on Node and Bun.",
6+
"description": "Minimal Hono host for @devframes/hub — the same app file serves the devtools namespace on Node and Bun.",
77
"scripts": {
88
"dev": "tsx src/server.ts",
99
"dev:bun": "bun src/bun.ts",
@@ -12,8 +12,15 @@
1212
"dependencies": {
1313
"@devframes/hub": "workspace:*",
1414
"@devframes/hub-ui": "workspace:*",
15+
"@devframes/plugin-a11y": "workspace:*",
16+
"@devframes/plugin-assets": "workspace:*",
17+
"@devframes/plugin-code-server": "workspace:*",
18+
"@devframes/plugin-data-inspector": "workspace:*",
19+
"@devframes/plugin-git": "workspace:*",
1520
"@devframes/plugin-inspect": "workspace:*",
1621
"@devframes/plugin-messages": "workspace:*",
22+
"@devframes/plugin-og": "workspace:*",
23+
"@devframes/plugin-terminals": "workspace:*",
1724
"@hono/node-server": "catalog:deps",
1825
"devframe": "workspace:*",
1926
"hono": "catalog:deps"

‎examples/hub-hono-minimal/src/app.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
import type { HubInstance } from '@devframes/hub/initiate'
22
import { createUi } from '@devframes/hub-ui'
33
import { DEVFRAMES_HUB_BASE, initHub } from '@devframes/hub/initiate'
4+
import { createA11yDevframe } from '@devframes/plugin-a11y'
5+
import { createAssetsDevframe } from '@devframes/plugin-assets'
6+
import { createCodeServerDevframe } from '@devframes/plugin-code-server'
7+
import { createDataInspectorDevframe } from '@devframes/plugin-data-inspector'
8+
import { createGitDevframe } from '@devframes/plugin-git'
49
import { createInspectDevframe } from '@devframes/plugin-inspect'
510
import { createMessagesDevframe } from '@devframes/plugin-messages'
11+
import { createOgDevframe } from '@devframes/plugin-og'
12+
import { createTerminalsDevframe } from '@devframes/plugin-terminals'
613
import { Hono } from 'hono'
714

815
// One runtime-agnostic app file: the hub instance and the Hono routes are
@@ -16,9 +23,20 @@ const globalRef = globalThis as { __hubHonoMinimal?: HubInstance }
1623

1724
export const hub: HubInstance = globalRef.__hubHonoMinimal ??= initHub({
1825
base: DEVFRAMES_HUB_BASE,
26+
// Every built-in plugin, dogfooded end to end through the hub mount path.
27+
// `data-inspector`'s default id carries `:` (a route-param marker), so it
28+
// gets a colon-free id override to be a valid `<base><id>/` segment; the
29+
// assets watcher is off since this host demonstrates mounting, not authoring.
1930
devframes: [
31+
createGitDevframe(),
32+
createTerminalsDevframe(),
33+
createCodeServerDevframe(),
2034
createInspectDevframe(),
35+
createDataInspectorDevframe({ id: 'devframes_plugin_data-inspector' }),
36+
createA11yDevframe(),
2137
createMessagesDevframe(),
38+
createOgDevframe(),
39+
createAssetsDevframe({ watch: false }),
2240
],
2341
ui: createUi(),
2442
// Single-user localhost demo: reachable only on loopback, so it opts out

‎examples/hub-next-minimal/package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,15 @@
1515
"@devframes/json-render": "workspace:*",
1616
"@devframes/json-render-ui": "workspace:*",
1717
"@devframes/next": "workspace:*",
18+
"@devframes/plugin-a11y": "workspace:*",
19+
"@devframes/plugin-assets": "workspace:*",
20+
"@devframes/plugin-code-server": "workspace:*",
21+
"@devframes/plugin-data-inspector": "workspace:*",
22+
"@devframes/plugin-git": "workspace:*",
1823
"@devframes/plugin-inspect": "workspace:*",
1924
"@devframes/plugin-messages": "workspace:*",
25+
"@devframes/plugin-og": "workspace:*",
26+
"@devframes/plugin-terminals": "workspace:*",
2027
"devframe": "workspace:*",
2128
"next": "catalog:frontend",
2229
"react": "catalog:frontend",

‎examples/hub-next-minimal/src/client/hub.ts‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,41 @@ const jsonRenderDock: DevframeJsonRenderDockEntry = {
3434
// `webpackIgnore` / `turbopackIgnore` so Next's bundler leaves them alone and
3535
// Node resolves the published `dist` at request time — a static import would
3636
// be bundled from source and break those lookups.
37+
//
38+
// The default-export plugins load from a list of specifier *variables* (not
39+
// string literals), so Next's bundler and TypeScript alike treat them as
40+
// opaque — the plugins' node-side source (child processes, the native
41+
// `zigpty` PTY backend) never gets pulled into this app's build or type
42+
// program. `data-inspector` (a `:`-carrying default id) and `assets` (its
43+
// watcher) need constructor options, so they load through dedicated helpers.
44+
const BUILTIN_PLUGIN_PACKAGES = [
45+
'@devframes/plugin-git',
46+
'@devframes/plugin-terminals',
47+
'@devframes/plugin-code-server',
48+
'@devframes/plugin-inspect',
49+
'@devframes/plugin-a11y',
50+
'@devframes/plugin-messages',
51+
'@devframes/plugin-og',
52+
] as const
53+
3754
async function loadHub(): Promise<HubInstance> {
38-
const [hubUi, jsonRenderUi, inspect, messages] = await Promise.all([
55+
const [hubUi, jsonRenderUi, dataInspector, assets, ...builtins] = await Promise.all([
3956
import(/* webpackIgnore: true */ /* turbopackIgnore: true */ '@devframes/hub-ui'),
4057
import(/* webpackIgnore: true */ /* turbopackIgnore: true */ '@devframes/json-render-ui/hub'),
41-
import(/* webpackIgnore: true */ /* turbopackIgnore: true */ '@devframes/plugin-inspect'),
42-
import(/* webpackIgnore: true */ /* turbopackIgnore: true */ '@devframes/plugin-messages'),
58+
import(/* webpackIgnore: true */ /* turbopackIgnore: true */ '@devframes/plugin-data-inspector'),
59+
import(/* webpackIgnore: true */ /* turbopackIgnore: true */ '@devframes/plugin-assets'),
60+
...BUILTIN_PLUGIN_PACKAGES.map(
61+
pkg => import(/* webpackIgnore: true */ /* turbopackIgnore: true */ pkg),
62+
),
4363
])
64+
// Every built-in plugin, dogfooded end to end through the hub mount path.
65+
// `data-inspector`'s default id carries `:` (a route-param marker), so it
66+
// gets a colon-free id override to be a valid `<base><id>/` segment; the
67+
// assets watcher is off since this host demonstrates mounting, not authoring.
4468
const devframes: DevframeDefinition[] = [
45-
(inspect.createInspectDevframe as () => DevframeDefinition)(),
46-
(messages.createMessagesDevframe as () => DevframeDefinition)(),
69+
...builtins.map(mod => mod.default as DevframeDefinition),
70+
(dataInspector.createDataInspectorDevframe as (options: { id: string }) => DevframeDefinition)({ id: 'devframes_plugin_data-inspector' }),
71+
(assets.createAssetsDevframe as (options: { watch: boolean }) => DevframeDefinition)({ watch: false }),
4772
]
4873
// Next route handlers can't accept WebSocket upgrades, so the socket asks
4974
// for a side-car server of its own, advertised via `__connection.json`.

‎examples/hub-next/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"type": "module",
44
"version": "0.8.2",
55
"private": true,
6-
"description": "Protocol-witness example \u2014 a tiny Next.js Devframe Hub built on @devframes/hub that exercises every hub subsystem end-to-end.",
6+
"description": "Protocol-witness example — a tiny Next.js Devframe Hub built on @devframes/hub that exercises every hub subsystem end-to-end.",
77
"homepage": "https://github.com/devframes/devframe/tree/main/examples/hub-next",
88
"scripts": {
99
"dev": "pnpm -C ../.. run build && next dev src/client",
@@ -19,9 +19,11 @@
1919
"@devframes/plugin-a11y": "workspace:*",
2020
"@devframes/plugin-assets": "workspace:*",
2121
"@devframes/plugin-code-server": "workspace:*",
22+
"@devframes/plugin-data-inspector": "workspace:*",
2223
"@devframes/plugin-git": "workspace:*",
2324
"@devframes/plugin-inspect": "workspace:*",
2425
"@devframes/plugin-messages": "workspace:*",
26+
"@devframes/plugin-og": "workspace:*",
2527
"@devframes/plugin-terminals": "workspace:*",
2628
"@json-render/react": "catalog:frontend",
2729
"colorjs.io": "catalog:frontend",

‎examples/hub-next/src/client/devframe/next-devframe-hub.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const BUILTIN_PLUGIN_PACKAGES = [
3333
'@devframes/plugin-inspect',
3434
'@devframes/plugin-a11y',
3535
'@devframes/plugin-messages',
36+
'@devframes/plugin-og',
3637
] as const
3738

3839
async function loadBuiltinPlugins(): Promise<DevframeDefinition[]> {
@@ -62,6 +63,18 @@ async function loadAssetsDevframe(): Promise<DevframeDefinition> {
6263
return (mod.createAssetsDevframe as (options: { dir: string, watch: boolean }) => DevframeDefinition)({ dir, watch: false })
6364
}
6465

66+
/**
67+
* Load the data-inspector plugin with a colon-free id. Its default id
68+
* (`devframes:plugin:data-inspector`) carries `:` — a route-param marker to
69+
* the router the hub mounts each frame on — so it can't be a `<base><id>/`
70+
* segment (`DF8004`); the override makes it mountable. Loaded through the same
71+
* bundler-ignored dynamic `import()` as the other plugins.
72+
*/
73+
async function loadDataInspectorDevframe(): Promise<DevframeDefinition> {
74+
const mod = await import(/* webpackIgnore: true */ /* turbopackIgnore: true */ '@devframes/plugin-data-inspector')
75+
return (mod.createDataInspectorDevframe as (options: { id: string }) => DevframeDefinition)({ id: 'devframes_plugin_data-inspector' })
76+
}
77+
6578
/**
6679
* The reference json-render renderer registration for `initHub({ renderers })`.
6780
* Loaded through the same bundler-ignored dynamic `import()` as the plugins:
@@ -188,6 +201,7 @@ export async function nextDevframeHub(
188201
? { devframe: def, dock: { clientScript: { importFrom: a11yAgent.importFrom } } }
189202
: def,
190203
),
204+
await loadDataInspectorDevframe(),
191205
await loadAssetsDevframe(),
192206
{
193207
devframe: tabbedDevframe,

‎examples/hub-nitro-minimal/hub.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
import type { HubInstance } from '@devframes/hub/initiate'
22
import { createUi } from '@devframes/hub-ui'
33
import { DEVFRAMES_HUB_BASE, initHub } from '@devframes/hub/initiate'
4+
import { createA11yDevframe } from '@devframes/plugin-a11y'
5+
import { createAssetsDevframe } from '@devframes/plugin-assets'
6+
import { createCodeServerDevframe } from '@devframes/plugin-code-server'
7+
import { createDataInspectorDevframe } from '@devframes/plugin-data-inspector'
8+
import { createGitDevframe } from '@devframes/plugin-git'
49
import { createInspectDevframe } from '@devframes/plugin-inspect'
510
import { createMessagesDevframe } from '@devframes/plugin-messages'
11+
import { createOgDevframe } from '@devframes/plugin-og'
12+
import { createTerminalsDevframe } from '@devframes/plugin-terminals'
613

714
// The whole devtools installation in one call: two plugins mounted under
815
// /__devframes/, the reference UI filling the hub's ui slot (the standalone
@@ -19,9 +26,20 @@ const globalRef = globalThis as { __hubNitroMinimal?: HubInstance }
1926
export const hub: HubInstance = globalRef.__hubNitroMinimal ??= initHub({
2027
base: DEVFRAMES_HUB_BASE,
2128
ws: { sidecar: true },
29+
// Every built-in plugin, dogfooded end to end through the hub mount path.
30+
// `data-inspector`'s default id carries `:` (a route-param marker), so it
31+
// gets a colon-free id override to be a valid `<base><id>/` segment; the
32+
// assets watcher is off since this host demonstrates mounting, not authoring.
2233
devframes: [
34+
createGitDevframe(),
35+
createTerminalsDevframe(),
36+
createCodeServerDevframe(),
2337
createInspectDevframe(),
38+
createDataInspectorDevframe({ id: 'devframes_plugin_data-inspector' }),
39+
createA11yDevframe(),
2440
createMessagesDevframe(),
41+
createOgDevframe(),
42+
createAssetsDevframe({ watch: false }),
2543
],
2644
ui: createUi(),
2745
// Single-user localhost demo: reachable only on loopback, so it opts out

‎examples/hub-nitro-minimal/nitro.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,15 @@ const devframePackages = [
99
'@devframes/hub',
1010
'@devframes/hub/initiate',
1111
'@devframes/hub-ui',
12+
'@devframes/plugin-a11y',
13+
'@devframes/plugin-assets',
14+
'@devframes/plugin-code-server',
15+
'@devframes/plugin-data-inspector',
16+
'@devframes/plugin-git',
1217
'@devframes/plugin-inspect',
1318
'@devframes/plugin-messages',
19+
'@devframes/plugin-og',
20+
'@devframes/plugin-terminals',
1421
]
1522

1623
export default defineNitroConfig({

‎examples/hub-nitro-minimal/package.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,23 @@
33
"type": "module",
44
"version": "0.8.1",
55
"private": true,
6-
"description": "Minimal Nitro host for @devframes/hub \u2014 one catch-all route mounts the whole devtools namespace.",
6+
"description": "Minimal Nitro host for @devframes/hub — one catch-all route mounts the whole devtools namespace.",
77
"scripts": {
88
"dev": "nitro dev",
99
"typecheck": "tsc --noEmit"
1010
},
1111
"dependencies": {
1212
"@devframes/hub": "workspace:*",
1313
"@devframes/hub-ui": "workspace:*",
14+
"@devframes/plugin-a11y": "workspace:*",
15+
"@devframes/plugin-assets": "workspace:*",
16+
"@devframes/plugin-code-server": "workspace:*",
17+
"@devframes/plugin-data-inspector": "workspace:*",
18+
"@devframes/plugin-git": "workspace:*",
1419
"@devframes/plugin-inspect": "workspace:*",
1520
"@devframes/plugin-messages": "workspace:*",
21+
"@devframes/plugin-og": "workspace:*",
22+
"@devframes/plugin-terminals": "workspace:*",
1623
"devframe": "workspace:*",
1724
"nitro": "catalog:deps"
1825
},

‎examples/hub-rsbuild-minimal/package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,15 @@
1414
"@devframes/hub-ui": "workspace:*",
1515
"@devframes/json-render": "workspace:*",
1616
"@devframes/json-render-ui": "workspace:*",
17+
"@devframes/plugin-a11y": "workspace:*",
18+
"@devframes/plugin-assets": "workspace:*",
19+
"@devframes/plugin-code-server": "workspace:*",
20+
"@devframes/plugin-data-inspector": "workspace:*",
21+
"@devframes/plugin-git": "workspace:*",
1722
"@devframes/plugin-inspect": "workspace:*",
1823
"@devframes/plugin-messages": "workspace:*",
24+
"@devframes/plugin-og": "workspace:*",
25+
"@devframes/plugin-terminals": "workspace:*",
1926
"devframe": "workspace:*"
2027
},
2128
"devDependencies": {

0 commit comments

Comments
 (0)