feat: serve the client UI as devframe remote assets via @nuxt/devtools-assets (#1071)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: antfubot

knip.jsonc

@@ -63,6 +63,13 @@
 "playground/nuxt.config.ts"
  ]
  },
+// The assets package is never imported: it only satisfies the runtime
+// package resolution of the client UI's remote-assets source (see
+// `resolveClientAssetsSource` in `src/module-main.ts`), keeping the
+// monorepo/e2e flows serving the local build with zero network.
+"ignoreDependencies": [
+"@nuxt/devtools-assets"
+ ],
 "entry": [
 "scripts/*.mjs",
 "src/webcomponents/scripts/*.ts",

packages/devtools-assets/README.md

@@ -0,0 +1,18 @@
+# @nuxt/devtools-assets
+
+Pre-built client UI assets for [Nuxt DevTools](https://github.com/nuxt/devtools).
+
+`@nuxt/devtools` does not bundle its client UI. Instead, it declares this
+version-locked package as [devframe remote assets](https://devfra.me/guide/client-assets.html#remote-assets):
+files are resolved from a locally installed copy of this package when present,
+otherwise streamed on demand from a CDN mirror of npm and cached on disk.
+
+You normally don't need to install this package. For offline or air-gapped
+environments, install it explicitly so the UI is served with zero network:
+
+```sh
+npm install -D @nuxt/devtools-assets
+```
+
+Keep its version in lockstep with `@nuxt/devtools` (it is published together
+with each release).

packages/devtools-assets/package.json

@@ -0,0 +1,23 @@
+{
+"name": "@nuxt/devtools-assets",
+"type": "module",
+"version": "4.0.0-alpha.12",
+"description": "Pre-built client UI assets for Nuxt DevTools, resolved on demand.",
+"license": "MIT",
+"homepage": "https://devtools.nuxt.com",
+"repository": {
+"type": "git",
+"url": "git+https://github.com/nuxt/devtools.git",
+"directory": "packages/devtools-assets"
+ },
+"exports": {
+"./package.json": "./package.json"
+ },
+"files": [
+"dist"
+ ],
+"scripts": {
+"build": "pnpm -C ../devtools run build:client",
+"prepack": "turbo run build --filter=@nuxt/devtools-assets"
+ }
+}

packages/devtools-kit/package.json

@@ -24,7 +24,7 @@
 "build": "unbuild",
 "stub": "unbuild --stub",
 "dev:prepare": "nr stub",
-"prepack": "pnpm build"
+"prepack": "turbo run build --filter=@nuxt/devtools-kit"
  },
 "peerDependencies": {
 "@nuxt/kit": "^4.0.0-0 || ^5.0.0-0",

packages/devtools-kit/src/_types/client-api.ts

@@ -11,18 +11,6 @@ import type { NuxtDevtoolsNotifyInput } from './notify'
 importtype{ServerFunctions}from'./rpc'
 importtype{TimelineMetrics}from'./timeline-metrics'
 
-exportinterfaceDevToolsFrameState{
-width: number
-height: number
-top: number
-left: number
-open: boolean
-route: string
-position: 'left'|'right'|'bottom'|'top'
-closeOnOutsideClick: boolean
-minimizePanelInactive: number
-}
-
 exportinterfaceNuxtDevtoolsClientHooks{
 /**
  * When the DevTools navigates, used for persisting the current tab
@@ -57,8 +45,6 @@ export interface NuxtDevtoolsHostClient {
 nuxt: NuxtApp
 hooks: Hookable<NuxtDevtoolsClientHooks>
 
-getIframe: ()=>HTMLIFrameElement|undefined
-
 inspector?: {
 enable: ()=>void
 disable: ()=>void
@@ -80,7 +66,6 @@ export interface NuxtDevtoolsHostClient {
 navigate: (path: string,hard?: boolean)=>void
 appConfig: AppConfig
 colorMode: Ref<'dark'|'light'>
-frameState: Ref<DevToolsFrameState>
 $fetch: $Fetch
 }
 
@@ -95,12 +80,6 @@ export interface NuxtDevtoolsHostClient {
  * A counter to trigger reactivity updates
  */
 revision: Ref<number>
-
-/**
- * Update client
- * @internal
- */
-syncClient: ()=>NuxtDevtoolsHostClient
 }
 
 exportinterfaceCodeHighlightOptions{
@@ -152,7 +131,3 @@ export interface NuxtDevtoolsIframeClient {
 host: NuxtDevtoolsHostClient
 devtools: NuxtDevtoolsClient
 }
-
-exportinterfaceNuxtDevtoolsGlobal{
-setClient: (client: NuxtDevtoolsHostClient)=>void
-}

packages/devtools-kit/src/_types/options.ts

@@ -69,11 +69,6 @@ export interface ModuleOptions {
  */
 disableAuthorization?: boolean
 
-/**
- * Props for the iframe element, useful for environment with stricter CSP
- */
-iframeProps?: Record<string,string|boolean>
-
 /**
  * Experimental features
  */

packages/devtools-ui-kit/package.json

@@ -23,7 +23,7 @@
 "build": "nuxt-build-module build",
 "stub": "nuxt-build-module build --stub",
 "dev": "nuxi dev playground",
-"prepack": "pnpm build",
+"prepack": "turbo run build --filter=@nuxt/devtools-ui-kit",
 "playground:build": "nuxi generate playground"
  },
 "peerDependencies": {

packages/devtools/client/app.vue

@@ -32,7 +32,9 @@ useHead({
  {
  rel: 'icon',
  type: 'image/svg+xml',
- href: '/nuxt.svg',
+// Relative: resolves against the document URL, which is always the
+// client's mount root (the production build uses hash routing).
+ href: './nuxt.svg',
  },
  ],
 })

packages/devtools/client/composables/storage.ts

@@ -61,6 +61,13 @@ export default defineNuxtConfig({
 // We set a placeholder for the middleware to be replaced with the correct base URL
 baseURL: '/__NUXT_DEVTOOLS_BASE__/',
 },
+router: {
+options: {
+// Hash routing keeps the document URL at the mount root, so relative
+// asset URLs always resolve regardless of the active tab route.
+hashMode: true,
+},
+},
 },
 
 ssr: false,