@nuxt/devtools-nightly 0.0.0 → 2.0.0-beta.0-28940159.3b2c84c

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

@@ -0,0 +1,332 @@
+import { useAppConfig, useRuntimeConfig } from "#imports";
+import { setIframeServerContext } from "@vue/devtools-kit";
+import { createHooks } from "hookable";
+import { debounce } from "perfect-debounce";
+import { computed, createApp, h, markRaw, ref, shallowReactive, shallowRef, watch } from "vue";
+import { initTimelineMetrics } from "../../function-metrics-helpers.js";
+import Main from "./Main.vue";
+import { popupWindow, state } from "./state.js";
+const clientRef = shallowRef();
+export { clientRef as client };
+export async function setupDevToolsClient({
+  nuxt,
+  clientHooks,
+  timeMetric,
+  router
+}) {
+  const isInspecting = ref(false);
+  const colorMode = useClientColorMode();
+  const timeline = initTimelineMetrics();
+  const client = shallowReactive({
+    nuxt: markRaw(nuxt),
+    hooks: createHooks(),
+    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 {
+          }
+          popupWindow.value = null;
+        }
+      },
+      open() {
+        if (state.value.open)
+          return;
+        state.value.open = true;
+      },
+      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");
+      }
+    },
+    app: {
+      appConfig: useAppConfig(),
+      reload() {
+        location.reload();
+      },
+      navigate(path, hard = false) {
+        if (hard)
+          location.href = path;
+        else
+          router.push(path);
+      },
+      colorMode,
+      frameState: state,
+      $fetch: globalThis.$fetch
+    },
+    metrics: {
+      clientPlugins: () => window.__NUXT_DEVTOOLS_PLUGINS_METRIC__,
+      clientHooks: () => Object.values(clientHooks),
+      clientTimeline: () => timeline,
+      loading: () => timeMetric
+    },
+    revision: ref(0)
+  });
+  window.__NUXT_DEVTOOLS_HOST__ = client;
+  let iframe;
+  function syncClient() {
+    if (!client.inspector)
+      client.inspector = getInspectorInstance();
+    try {
+      iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__?.setClient(client);
+    } catch {
+    }
+    return client;
+  }
+  function getIframe() {
+    if (!iframe) {
+      const runtimeConfig = useRuntimeConfig();
+      const CLIENT_BASE = "/__nuxt_devtools__/client";
+      const CLIENT_PATH = `${runtimeConfig.app.baseURL.replace(CLIENT_BASE, "/")}${CLIENT_BASE}`.replace(/\/+/g, "/");
+      const initialUrl = CLIENT_PATH + state.value.route;
+      iframe = document.createElement("iframe");
+      for (const [key, value] of Object.entries(runtimeConfig.app.devtools?.iframeProps || {}))
+        iframe.setAttribute(key, String(value));
+      iframe.id = "nuxt-devtools-iframe";
+      iframe.src = initialUrl;
+      iframe.onload = async () => {
+        try {
+          setIframeServerContext(iframe);
+          await waitForClientInjection();
+          client.syncClient();
+        } catch (e) {
+          console.error("Nuxt DevTools client injection failed");
+          console.error(e);
+        }
+      };
+    }
+    return iframe;
+  }
+  function waitForClientInjection(retry = 20, timeout = 300) {
+    let lastError;
+    const test = () => {
+      try {
+        return !!iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__;
+      } catch (e) {
+        lastError = e;
+      }
+      return false;
+    };
+    if (test())
+      return;
+    return new Promise((resolve, reject) => {
+      const interval = setInterval(() => {
+        if (test()) {
+          clearInterval(interval);
+          resolve();
+        } else if (retry-- <= 0) {
+          clearInterval(interval);
+          reject(lastError);
+        }
+      }, timeout);
+    });
+  }
+  function enableComponentInspector() {
+    window.__VUE_INSPECTOR__?.enable();
+    isInspecting.value = true;
+  }
+  function disableComponentInspector() {
+    if (!window.__VUE_INSPECTOR__?.enabled)
+      return;
+    window.__VUE_INSPECTOR__?.disable();
+    client?.hooks.callHook("host:inspector:close");
+    isInspecting.value = false;
+  }
+  function getInspectorInstance() {
+    const componentInspector = window.__VUE_INSPECTOR__;
+    if (componentInspector) {
+      componentInspector.openInEditor = async (url) => {
+        disableComponentInspector();
+        await client.hooks.callHook("host:inspector:click", url);
+      };
+      componentInspector.onUpdated = () => {
+        client.hooks.callHook("host:inspector:update", {
+          ...componentInspector.linkParams,
+          ...componentInspector.position
+        });
+      };
+    }
+    return markRaw({
+      isEnabled: isInspecting,
+      enable: enableComponentInspector,
+      disable: disableComponentInspector,
+      toggle: () => {
+        if (!state.value.open)
+          client.devtools.open();
+        if (window.__VUE_INSPECTOR__?.enabled)
+          disableComponentInspector();
+        else
+          enableComponentInspector();
+      },
+      instance: componentInspector
+    });
+  }
+  setupRouteTracking(timeline, router);
+  setupReactivity(client, router, timeline);
+  clientRef.value = client;
+  const documentPictureInPicture = window.documentPictureInPicture;
+  if (documentPictureInPicture?.requestWindow) {
+    client.devtools.popup = async () => {
+      const iframe2 = getIframe();
+      if (!iframe2)
+        return;
+      const pip = popupWindow.value = await documentPictureInPicture.requestWindow({
+        width: Math.round(window.innerWidth * state.value.width / 100),
+        height: Math.round(window.innerHeight * state.value.height / 100)
+      });
+      const style = pip.document.createElement("style");
+      style.innerHTML = `
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        iframe {
+          width: 100vw;
+          height: 100vh;
+          border: none;
+          outline: none;
+        }
+      `;
+      pip.__NUXT_DEVTOOLS_DISABLE__ = true;
+      pip.__NUXT_DEVTOOLS_IS_POPUP__ = true;
+      pip.__NUXT__ = window.parent?.__NUXT__ || window.__NUXT__;
+      pip.document.title = "Nuxt DevTools";
+      pip.document.head.appendChild(style);
+      pip.document.body.appendChild(iframe2);
+      pip.addEventListener("resize", () => {
+        state.value.width = Math.round(pip.innerWidth / window.innerWidth * 100);
+        state.value.height = Math.round(pip.innerHeight / window.innerHeight * 100);
+      });
+      pip.addEventListener("pagehide", () => {
+        popupWindow.value = null;
+        pip.close();
+      });
+    };
+  }
+  const holder = document.createElement("div");
+  holder.id = "nuxt-devtools-container";
+  holder.setAttribute("data-v-inspector-ignore", "true");
+  document.body.appendChild(holder);
+  window.addEventListener("keydown", (e) => {
+    if (e.code === "KeyD" && e.altKey && e.shiftKey)
+      client.devtools.toggle();
+  });
+  const app = createApp({
+    render: () => h(Main, { client }),
+    devtools: {
+      hide: true
+    }
+  });
+  app.mount(holder);
+}
+export function useClientColorMode() {
+  const explicitColor = ref();
+  const systemColor = ref();
+  const elements = [
+    document.documentElement,
+    document.body
+  ];
+  const ob = new MutationObserver(getExplicitColor);
+  elements.forEach((el) => {
+    ob.observe(el, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+  });
+  const preferDarkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const preferLightQuery = window.matchMedia("(prefers-color-scheme: light)");
+  preferDarkQuery.addEventListener("change", getSystemColor);
+  preferLightQuery.addEventListener("change", getSystemColor);
+  function getExplicitColor() {
+    let color;
+    for (const el of elements) {
+      if (el.classList.contains("dark")) {
+        color = "dark";
+        break;
+      }
+      if (el.classList.contains("light")) {
+        color = "light";
+        break;
+      }
+    }
+    explicitColor.value = color;
+  }
+  function getSystemColor() {
+    if (preferDarkQuery.matches)
+      systemColor.value = "dark";
+    else if (preferLightQuery.matches)
+      systemColor.value = "light";
+    else
+      systemColor.value = void 0;
+  }
+  getExplicitColor();
+  getSystemColor();
+  return computed(() => explicitColor.value || systemColor.value || "light");
+}
+function setupRouteTracking(timeline, router) {
+  if (timeline.options.enabled && router?.currentRoute?.value?.path) {
+    const start = timeline.events[0]?.start || Date.now();
+    timeline.events.unshift({
+      type: "route",
+      from: router.currentRoute.value.path,
+      to: router.currentRoute.value.path,
+      start,
+      end: start
+    });
+  }
+  let lastRouteEvent;
+  router?.afterEach(() => {
+    if (lastRouteEvent && !lastRouteEvent?.end)
+      lastRouteEvent.end = Date.now();
+  });
+  router?.beforeEach((to, from) => {
+    if (!timeline.options.enabled)
+      return;
+    lastRouteEvent = {
+      type: "route",
+      from: from.path,
+      to: to.path,
+      start: Date.now()
+    };
+    timeline.events.push(lastRouteEvent);
+  });
+}
+function setupReactivity(client, router, timeMetric) {
+  const refreshReactivity = debounce(() => {
+    client.hooks.callHook("host:update:reactivity");
+  }, 100, { trailing: true });
+  watch(() => [
+    client.nuxt.payload,
+    client.app.colorMode.value,
+    client.metrics.loading(),
+    timeMetric
+  ], () => {
+    refreshReactivity();
+  }, { deep: true });
+  router?.afterEach(() => {
+    refreshReactivity();
+  });
+  client.nuxt.hook("app:mounted", () => {
+    refreshReactivity();
+  });
+  client.hooks.hook("devtools:navigate", (path) => {
+    state.value.route = path;
+  });
+}

package/dist/runtime/plugins/view/state.d.ts

@@ -0,0 +1,5 @@
+export declare const PANEL_PADDING = 10;
+export declare const PANEL_MIN = 20;
+export declare const PANEL_MAX = 100;
+export declare const popupWindow: import("vue").ShallowRef<Window | null, Window | null>;
+export declare const state: import("vue").Ref<DevToolsFrameState, DevToolsFrameState>;

package/dist/runtime/plugins/view/state.js

@@ -0,0 +1,17 @@
+import { shallowRef } from "vue";
+import { useObjectStorage } from "./utils.js";
+export const PANEL_PADDING = 10;
+export const PANEL_MIN = 20;
+export const PANEL_MAX = 100;
+export const popupWindow = shallowRef(null);
+export const state = useObjectStorage("nuxt-devtools-frame-state", {
+  width: 80,
+  height: 60,
+  top: 0,
+  left: 50,
+  open: false,
+  route: "/",
+  position: "bottom",
+  closeOnOutsideClick: false,
+  minimizePanelInactive: 5e3
+}, false);

package/dist/runtime/plugins/view/utils.d.ts

@@ -0,0 +1,31 @@
+import type { Ref } from 'vue';
+export declare function useObjectStorage<T>(key: string, initial: T, listenToStorage?: boolean): Ref<T>;
+export declare function useTransform<F, T>(data: Ref<F>, to: (data: F) => T, from: (data: T) => F): Ref<T>;
+export declare function useEventListener(target: EventTarget, type: string, listener: any, options?: boolean | AddEventListenerOptions): void;
+/**
+ * @see https://vueuse.org/useElementBounding
+ */
+export declare function useElementBounding(target: Ref<HTMLElement | null | undefined>): {
+    height: Ref<number, number>;
+    bottom: Ref<number, number>;
+    left: Ref<number, number>;
+    right: Ref<number, number>;
+    top: Ref<number, number>;
+    width: Ref<number, number>;
+    x: Ref<number, number>;
+    y: Ref<number, number>;
+    update: () => void;
+};
+export declare function millisecondToHumanreadable(ms: number): [number, string];
+/**
+ * Reactive `env(safe-area-inset-*)`
+ *
+ * @see https://vueuse.org/useScreenSafeArea
+ */
+export declare function useScreenSafeArea(): {
+    top: Ref<number, number>;
+    right: Ref<number, number>;
+    bottom: Ref<number, number>;
+    left: Ref<number, number>;
+    update: () => void;
+};

package/dist/runtime/plugins/view/utils.js

@@ -0,0 +1,156 @@
+import { computed, getCurrentInstance, getCurrentScope, onMounted, onScopeDispose, ref, toValue, watch } from "vue";
+export function useObjectStorage(key, initial, listenToStorage = true) {
+  const raw = localStorage.getItem(key);
+  const data = ref(raw ? JSON.parse(raw) : initial);
+  for (const key2 in initial) {
+    if (data.value[key2] === void 0)
+      data.value[key2] = initial[key2];
+  }
+  let updating = false;
+  let wrote = "";
+  watch(data, (value) => {
+    if (updating)
+      return;
+    wrote = JSON.stringify(value);
+    localStorage.setItem(key, wrote);
+  }, { deep: true, flush: "post" });
+  if (listenToStorage) {
+    useEventListener(window, "storage", (e) => {
+      if (e.key === key && e.newValue && e.newValue !== wrote) {
+        updating = true;
+        data.value = JSON.parse(e.newValue);
+        updating = false;
+      }
+    });
+  }
+  return data;
+}
+export function useTransform(data, to, from) {
+  return computed({
+    get() {
+      return to(data.value);
+    },
+    set(value) {
+      data.value = from(value);
+    }
+  });
+}
+export function useEventListener(target, type, listener, options) {
+  target.addEventListener(type, listener, options);
+  if (getCurrentScope())
+    onScopeDispose(() => target.removeEventListener(type, listener, options));
+}
+export function useElementBounding(target) {
+  const height = ref(0);
+  const bottom = ref(0);
+  const left = ref(0);
+  const right = ref(0);
+  const top = ref(0);
+  const width = ref(0);
+  const x = ref(0);
+  const y = ref(0);
+  function update() {
+    const el = toValue(target);
+    if (!el) {
+      height.value = 0;
+      bottom.value = 0;
+      left.value = 0;
+      right.value = 0;
+      top.value = 0;
+      width.value = 0;
+      x.value = 0;
+      y.value = 0;
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    height.value = rect.height;
+    bottom.value = rect.bottom;
+    left.value = rect.left;
+    right.value = rect.right;
+    top.value = rect.top;
+    width.value = rect.width;
+    x.value = rect.x;
+    y.value = rect.y;
+  }
+  watch(() => toValue(target), update);
+  useEventListener(window, "resize", update);
+  if (getCurrentInstance())
+    onMounted(() => update());
+  let observer;
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch(
+    () => toValue(target),
+    (el) => {
+      cleanup();
+      if (window) {
+        observer = new ResizeObserver(update);
+        if (el)
+          observer.observe(el);
+      }
+    },
+    { immediate: true, flush: "post", deep: true }
+  );
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      cleanup();
+      stopWatch();
+    });
+  }
+  return {
+    height,
+    bottom,
+    left,
+    right,
+    top,
+    width,
+    x,
+    y,
+    update
+  };
+}
+export function millisecondToHumanreadable(ms) {
+  if (ms < 1e3)
+    return [+ms.toFixed(0), "ms"];
+  if (ms < 1e3 * 60)
+    return [+(ms / 1e3).toFixed(1), "s"];
+  if (ms < 1e3 * 60 * 60)
+    return [+(ms / 1e3 / 60).toFixed(1), "min"];
+  return [+(ms / 1e3 / 60 / 60).toFixed(1), "hour"];
+}
+const topVarName = "--nuxt-devtools-safe-area-top";
+const rightVarName = "--nuxt-devtools-safe-area-right";
+const bottomVarName = "--nuxt-devtools-safe-area-bottom";
+const leftVarName = "--nuxt-devtools-safe-area-left";
+export function useScreenSafeArea() {
+  const top = ref(0);
+  const right = ref(0);
+  const bottom = ref(0);
+  const left = ref(0);
+  document.documentElement.style.setProperty(topVarName, "env(safe-area-inset-top, 0px)");
+  document.documentElement.style.setProperty(rightVarName, "env(safe-area-inset-right, 0px)");
+  document.documentElement.style.setProperty(bottomVarName, "env(safe-area-inset-bottom, 0px)");
+  document.documentElement.style.setProperty(leftVarName, "env(safe-area-inset-left, 0px)");
+  update();
+  useEventListener(window, "resize", update);
+  function getValue(position) {
+    return Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue(position)) || 0;
+  }
+  function update() {
+    top.value = getValue(topVarName);
+    right.value = getValue(rightVarName);
+    bottom.value = getValue(bottomVarName);
+    left.value = getValue(leftVarName);
+  }
+  return {
+    top,
+    right,
+    bottom,
+    left,
+    update
+  };
+}

package/dist/runtime/settings.d.ts

@@ -0,0 +1,4 @@
+import type { NuxtDevToolsOptions } from '@nuxt/devtools/types';
+export declare const settings: {
+    ui: NuxtDevToolsOptions["ui"];
+};

package/dist/runtime/settings.js

@@ -0,0 +1,2 @@
+import _settings from "#build/devtools/settings";
+export const settings = _settings;

package/dist/runtime/shared/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { Hookable } from 'hookable';
+export declare function setupHooksDebug<T extends Hookable<any>>(hooks: T): Record<string, HookInfo>;

package/dist/runtime/shared/hooks.js

@@ -0,0 +1,33 @@
+export function setupHooksDebug(hooks) {
+  const serverHooks = {};
+  const now = typeof globalThis.performance === "undefined" ? () => Date.now() : () => performance.now();
+  hooks.beforeEach((event) => {
+    if (!serverHooks[event.name]) {
+      serverHooks[event.name] = {
+        name: event.name,
+        start: now(),
+        // @ts-expect-error private field
+        listeners: hooks._hooks[event.name]?.length || 0,
+        executions: []
+      };
+    } else {
+      const hook = serverHooks[event.name];
+      if (hook.duration != null)
+        hook.executions.push(hook.duration);
+      hook.start = now();
+      hook.end = void 0;
+      hook.duration = void 0;
+    }
+  });
+  hooks.afterEach((event) => {
+    const hook = serverHooks[event.name];
+    if (!hook)
+      return;
+    hook.end = now();
+    hook.duration = hook.end - hook.start;
+    const listeners = hooks._hooks[event.name]?.length;
+    if (listeners != null)
+      hook.listeners = listeners;
+  });
+  return serverHooks;
+}

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

@@ -0,0 +1,8 @@
+import type { NuxtDevtoolsHostClient } from '@nuxt/devtools/types';
+import type { Ref } from 'vue';
+/**
+ * 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.js

@@ -0,0 +1,23 @@
+import { shallowRef } from "vue";
+export function useNuxtDevTools() {
+  const r = shallowRef();
+  if (!import.meta.dev)
+    return r;
+  if (import.meta.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/runtime/vue-devtools/overlay.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/vue-devtools/overlay.js

@@ -0,0 +1,8 @@
+import { functions } from '@vue/devtools-core'
+import { createRpcServer, devtools } from '@vue/devtools-kit'
+
+devtools.init()
+
+createRpcServer(functions, {
+  preset: 'iframe',
+})

package/dist/shared/devtools-nightly.2a48a9e5.d.mts

@@ -0,0 +1,62 @@
+import { VueInspectorClient } from 'vite-plugin-vue-inspector';
+import { NuxtDevtoolsIframeClient, NuxtDevtoolsHostClient, NuxtDevtoolsGlobal, PluginMetric, TimelineMetrics, LoadingTimeMetric } from '@nuxt/devtools-kit/types';
+
+declare global {
+    interface Window {
+        /**
+         * API for module integration
+         */
+        __NUXT_DEVTOOLS__?: NuxtDevtoolsIframeClient;
+        /**
+         * Nuxt DevTools client for host app
+         */
+        __NUXT_DEVTOOLS_HOST__?: NuxtDevtoolsHostClient;
+        /**
+         * Nuxt DevTools for receiving host client
+         *
+         * @internal
+         */
+        __NUXT_DEVTOOLS_VIEW__?: NuxtDevtoolsGlobal;
+        /**
+         * Metrics for plugin loading time
+         *
+         * @internal
+         */
+        __NUXT_DEVTOOLS_PLUGINS_METRIC__?: PluginMetric[];
+        /**
+         * Metrics for function calls
+         *
+         * @internal
+         */
+        __NUXT_DEVTOOLS_TIMELINE_METRICS__?: TimelineMetrics;
+        /**
+         * Metrics for page / route loading time
+         *
+         * @internal
+         */
+        __NUXT_DEVTOOLS_TIME_METRIC__?: LoadingTimeMetric;
+        /**
+         * Manually disable Nuxt DevTools embedding.
+         * Used for popup mode.
+         *
+         * @internal
+         */
+        __NUXT_DEVTOOLS_DISABLE__?: boolean;
+        /**
+         * Is popup mode
+         *
+         * @internal
+         */
+        __NUXT_DEVTOOLS_IS_POPUP__?: boolean;
+        /**
+         * Vue Inspector client
+         */
+        __VUE_INSPECTOR__?: VueInspectorClient;
+        /**
+         * Experimental API: Picture-in-Picture mode
+         *
+         * @see https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
+         */
+        documentPictureInPicture?: any;
+    }
+}