@nuxt/devtools 0.7.6 → 0.8.0

package/dist/runtime/plugins/view/client.mjs

@@ -18,52 +18,72 @@ export async function setupDevToolsClient({
   const timeline = initTimelineMetrics();
   const client = shallowReactive({
     nuxt: markRaw(nuxt),
-    appConfig: useAppConfig(),
     hooks: createHooks(),
-    getClientHooksMetrics: () => Object.values(clientHooks),
-    clientPluginMetrics: window.__NUXT_DEVTOOLS_PLUGINS_METRIC__,
-    clientTimelineMetrics: timeline,
-    loadingTimeMetrics: timeMetric,
-    reloadPage() {
-      location.reload();
-    },
-    toggle() {
-      if (state.value.open)
-        client.close();
-      else
-        client.open();
-    },
-    close() {
-      if (!state.value.open)
-        return;
-      state.value.open = false;
-      if (popupWindow.value) {
-        try {
-          popupWindow.value.close();
-        } catch (e) {
+    inspector: getInspectorInstance(),
+    getIframe,
+    syncClient,
+    devtools: {
+      toggle() {
+        if (state.value.open)
+          client.devtools.close();
+        else
+          client.devtools.open();
+      },
+      close() {
+        if (!state.value.open)
+          return;
+        state.value.open = false;
+        if (popupWindow.value) {
+          try {
+            popupWindow.value.close();
+          } catch (e) {
+          }
+          popupWindow.value = null;
         }
-        popupWindow.value = null;
+      },
+      open() {
+        if (state.value.open)
+          return;
+        state.value.open = true;
+        return nextTick(() => {
+          client.syncClient();
+        });
+      },
+      async navigate(path) {
+        if (!state.value.open)
+          await client.devtools.open();
+        await client.hooks.callHook("host:action:navigate", path);
+      },
+      async reload() {
+        await client.hooks.callHook("host:action:reload");
       }
     },
-    open() {
-      if (state.value.open)
-        return;
-      state.value.open = true;
-      nextTick(() => {
-        client.updateClient();
-      });
+    app: {
+      appConfig: useAppConfig(),
+      reload() {
+        location.reload();
+      },
+      navigate(path, hard = false) {
+        if (hard)
+          location.href = path;
+        else
+          router.push(path);
+      },
+      colorMode,
+      frameState: state
     },
-    inspector: getInspectorInstance(),
-    colorMode,
-    getIframe,
-    updateClient,
-    frameState: state
+    metrics: {
+      clientPlugins: () => window.__NUXT_DEVTOOLS_PLUGINS_METRIC__,
+      clientHooks: () => Object.values(clientHooks),
+      clientTimeline: () => timeline,
+      loading: () => timeMetric
+    }
   });
+  window.__NUXT_DEVTOOLS_HOST__ = client;
   let iframe;
-  function updateClient() {
+  function syncClient() {
     if (!client.inspector)
       client.inspector = getInspectorInstance();
-    client.clientPluginMetrics = window.__NUXT_DEVTOOLS_PLUGINS_METRIC__;
     try {
       iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__?.setClient(client);
     } catch (e) {
@@ -80,7 +100,7 @@ export async function setupDevToolsClient({
         iframe.src = initialUrl;
         iframe.onload = async () => {
           await waitForClientInjection();
-          client.updateClient();
+          client.syncClient();
         };
       } catch (e) {
         console.error(e);
@@ -105,7 +125,7 @@ export async function setupDevToolsClient({
           resolve();
         } else if (retry-- <= 0) {
           clearInterval(interval);
-          reject("Nuxt Devtools client injection failed");
+          reject("Nuxt DevTools client injection failed");
         }
       }, timeout);
     });
@@ -153,7 +173,7 @@ export async function setupDevToolsClient({
   clientRef.value = client;
   const documentPictureInPicture = window.documentPictureInPicture;
   if (documentPictureInPicture?.requestWindow) {
-    client.popup = async () => {
+    client.devtools.popup = async () => {
       const iframe2 = getIframe();
       if (!iframe2)
         return;
@@ -189,14 +209,14 @@ export async function setupDevToolsClient({
       });
     };
   }
-  client.updateClient();
+  client.syncClient();
   const holder = document.createElement("div");
   holder.id = "nuxt-devtools-container";
   holder.setAttribute("data-v-inspector-ignore", "true");
   document.body.appendChild(holder);
   addEventListener("keydown", (e) => {
     if (e.code === "KeyD" && e.altKey && e.shiftKey)
-      client.toggle();
+      client.devtools.toggle();
   });
   const app = createApp({
     render: () => h(Main, { client }),
@@ -284,8 +304,8 @@ function setupReactivity(client, router, timeMetric) {
   }, 100, { trailing: true });
   watch(() => [
     client.nuxt.payload,
-    client.colorMode.value,
-    client.loadingTimeMetrics,
+    client.app.colorMode.value,
+    client.metrics.loading(),
     timeMetric
   ], () => {
     refreshReactivity();

package/dist/runtime/use-nuxt-devtools.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from 'vue';
+import type { NuxtDevtoolsHostClient } from '../types';
+/**
+ * Get Nuxt DevTools client for host app
+ *
+ * Returns undefined if not in development mode or the devtools is not enabled
+ */
+export declare function useNuxtDevTools(): Ref<NuxtDevtoolsHostClient | undefined>;

package/dist/runtime/use-nuxt-devtools.mjs

@@ -0,0 +1,23 @@
+import { shallowRef } from "vue";
+export function useNuxtDevTools() {
+  const r = shallowRef();
+  if (!process.dev)
+    return r;
+  if (process.server)
+    return r;
+  if (window.__NUXT_DEVTOOLS_HOST__) {
+    r.value = window.__NUXT_DEVTOOLS_HOST__;
+  } else {
+    Object.defineProperty(window, "__NUXT_DEVTOOLS_HOST__", {
+      set(value) {
+        r.value = value;
+      },
+      get() {
+        return r.value;
+      },
+      enumerable: false,
+      configurable: true
+    });
+  }
+  return r;
+}

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import './global-ea55645c.js';
+import './global-2a48a9e5.js';
 import { ModuleStaticInfo } from '@nuxt/devtools-kit/types';
 export * from '@nuxt/devtools-kit/types';
 import 'vite-plugin-vue-inspector';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools",
   "type": "module",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -62,8 +62,8 @@
     "wait-on": "^7.0.1",
     "which": "^3.0.1",
     "ws": "^8.13.0",
-    "@nuxt/devtools-kit": "0.7.6",
-    "@nuxt/devtools-wizard": "0.7.6"
+    "@nuxt/devtools-kit": "0.8.0",
+    "@nuxt/devtools-wizard": "0.8.0"
   },
   "devDependencies": {
     "@antfu/utils": "^0.7.5",
@@ -78,10 +78,10 @@
     "@parcel/watcher": "^2.2.0",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/ua-parser-js": "^0.7.36",
-    "@unocss/nuxt": "^0.54.2",
-    "@unocss/preset-icons": "^0.54.2",
-    "@unocss/preset-uno": "^0.54.2",
-    "@unocss/runtime": "^0.54.2",
+    "@unocss/nuxt": "^0.55.0",
+    "@unocss/preset-icons": "^0.55.0",
+    "@unocss/preset-uno": "^0.55.0",
+    "@unocss/runtime": "^0.55.0",
     "@vueuse/nuxt": "^10.3.0",
     "esno": "^0.17.0",
     "flatted": "^3.2.7",
@@ -102,7 +102,7 @@
     "splitpanes": "^3.1.5",
     "theme-vitesse": "^0.7.2",
     "ua-parser-js": "^1.0.35",
-    "unocss": "^0.54.2",
+    "unocss": "^0.55.0",
     "vanilla-jsoneditor": "^0.17.8",
     "vis-data": "^7.1.6",
     "vis-network": "^9.1.6",
@@ -111,7 +111,7 @@
     "vue-virtual-scroller": "2.0.0-beta.8",
     "xterm": "^5.2.1",
     "xterm-addon-fit": "^0.7.0",
-    "@nuxt/devtools": "0.7.6"
+    "@nuxt/devtools": "0.8.0"
   },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client && esno scripts/prepare.ts",

package/dist/client/_nuxt/FilepathItem.vue.a967b383.js

@@ -1 +0,0 @@
-import{d as u,a6 as f,a7 as c,a as k,b4 as v,o as t,h as y,j as B,m as s,F as p,v as d,t as n,f as a,k as C,p as N,E as b,ap as g}from"./entry.b81bf245.js";const E={key:0,op50:""},F=u({__name:"FilepathItem",props:{filepath:{},lineBreak:{type:Boolean},subpath:{type:Boolean},override:{}},setup(m){const r=m,h=f(),l=c(),o=k(()=>r.filepath&&l.value?v(r.filepath,l.value.rootDir):{path:r.filepath||""});return(e,i)=>(t(),y(g(e.filepath?"button":"span"),{class:b([e.filepath?"hover:underline":"",e.lineBreak?"":"ws-nowrap of-hidden truncate"]),"font-mono":"",title:e.override||e.filepath,onClick:i[0]||(i[0]=w=>e.filepath&&a(h)(e.filepath))},{default:B(()=>[e.override?(t(),s(p,{key:0},[d(n(e.override),1)],64)):a(o).moduleName?(t(),s(p,{key:1},[C("span",null,n(a(o).moduleName),1),e.subpath?(t(),s("span",E,n(a(o).path.slice(a(o).moduleName.length)),1)):N("",!0)],64)):(t(),s(p,{key:2},[d(n(a(o).path),1)],64))]),_:1},8,["class","title"]))}});export{F as _};

package/dist/client/_nuxt/NSelect.vue.7a8edc85.js

@@ -1 +0,0 @@
-import{d as u,a4 as p,m as l,a5 as t,H as f,bC as m,f as b,k as h,t as _,p as n,l as v,o as s,h as k,a0 as V}from"./entry.b81bf245.js";const y={class:"n-text-input flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"},B=["disabled"],w={key:0,value:"",disabled:"",hidden:""},g=u({__name:"NSelect",props:{modelValue:{default:void 0},placeholder:{default:""},icon:{default:""},disabled:{type:Boolean,default:!1}},setup(d,{emit:i}){const o=p(d,"modelValue",i,{passive:!0});return(e,a)=>{const r=V;return s(),l("div",y,[t(e.$slots,"icon",{},()=>[e.icon?(s(),k(r,{key:0,icon:e.icon,class:"mr-0.4em text-1.1em op50"},null,8,["icon"])):n("",!0)]),f(h("select",{"onUpdate:modelValue":a[0]||(a[0]=c=>v(o)?o.value=c:null),disabled:e.disabled,class:"w-full flex-auto n-bg-base !outline-none"},[e.placeholder?(s(),l("option",w,_(e.placeholder),1)):n("",!0),t(e.$slots,"default")],8,B),[[m,b(o)]])])}}});export{g as _};