docs: host the dev devframes in Nuxt DevTools v4 (#439)

Author: antfubot

docs/nuxt.config.ts

@@ -31,16 +31,25 @@ export default defineNuxtConfig({
     },
   },
 
-  // Dev only: production builds never resolve the hub or its devframes.
-  // Factories defer the plugin imports, so `docs:build` needs no built workspace packages.
+  // Dev only: mount the devframes into Nuxt DevTools. The imports are lazy,
+  // so `docs:build` needs no built workspace packages.
   $development: {
-    modules: [['@devframes/nuxt/hub', {
-      quiet: true,
-      devframes: [
-        () => import('@devframes/plugin-a11y').then(m => m.createA11yDevframe()),
-        () => import('@devframes/plugin-og').then(m => m.createOgDevframe({ defaultUrl: 'http://localhost:5175' })),
-      ],
-    }]],
+    // DevTools v4 sets `noExternals` to an array when it is unset. Nitro 2 reads
+    // any truthy value as "inline everything" and fails on `playwright-core`.
+    nitro: { noExternals: false },
+    modules: [
+      async () => {
+        const [{ onDevtoolsReady }, { createA11yDevframe }, { createOgDevframe }] = await Promise.all([
+          import('@nuxt/devtools-kit'),
+          import('@devframes/plugin-a11y'),
+          import('@devframes/plugin-og'),
+        ])
+        onDevtoolsReady(async (kit) => {
+          await kit.install(createA11yDevframe())
+          await kit.install(createOgDevframe({ defaultUrl: 'http://localhost:5175' }))
+        })
+      },
+    ],
   },
 
   app: {

docs/package.json

@@ -24,11 +24,9 @@
     "shiki": "catalog:deps"
   },
   "devDependencies": {
-    "@devframes/hub": "workspace:*",
-    "@devframes/hub-ui": "workspace:*",
-    "@devframes/nuxt": "workspace:*",
     "@devframes/plugin-a11y": "workspace:*",
     "@devframes/plugin-og": "workspace:*",
+    "@nuxt/devtools-kit": "catalog:docs",
     "@types/d3-shape": "catalog:types",
     "devframe": "workspace:*"
   }

knip.jsonc

@@ -51,11 +51,7 @@
       // referenced as the `@shikijs/magic-move/style.css` subpath in the
       // `nuxt.config.ts` `css` array; knip can't map that CSS-only subpath back
       // to the package, so it mis-reports the (genuinely-listed) dep as unlisted.
-      //
-      // `@devframes/nuxt` is named as a string in the `$development.modules`
-      // array, and `@devframes/hub` / `@devframes/hub-ui` are its optional
-      // peers (the dev hub and its default dock UI), so nothing imports them.
-      "ignoreDependencies": ["ai", "@ai-sdk/vue", "@comark/nuxt.*", "@nuxt/ui.*", "@shikijs/magic-move", "@devframes/nuxt", "@devframes/hub", "@devframes/hub-ui"]
+      "ignoreDependencies": ["ai", "@ai-sdk/vue", "@comark/nuxt.*", "@nuxt/ui.*", "@shikijs/magic-move"]
     },
     "examples/custom-hub-next": {
       // The React client build's root sits at `src/client` (`next dev

package.json

@@ -20,7 +20,7 @@
     "watch": "turbo watch build --concurrency=3",
     "play": "tsx scripts/play.ts",
     "dev": "tsx scripts/play.ts",
-    "docs": "turbo run build --filter=devframe-docs^... && pnpm -C docs run docs",
+    "docs": "turbo run build --filter=./packages/* --filter=./plugins/* && pnpm -C docs run docs",
     "docs:build": "pnpm -C docs run docs:build",
     "docs:serve": "pnpm -C docs run docs:serve",
     "storybook": "pnpm -C storybook dev",