@nuxt/devtools 0.0.1 → 0.1.0

package/dist/runtime/plugins/view/Frame.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
+import type { PropType } from 'vue'
+import { computed, ref, watch, watchEffect } from 'vue'
+import type { NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient, NuxtDevtoolsGlobal as NuxtDevtoolsViewGlobal } from '../../../types'
+import { PANEL_MAX, PANEL_MIN, PANEL_PADDING, closePanel, state, viewMode } from './state'
+import { useEventListener } from './utils'
+
+// Can't use reactivity transform here because this file is shipped as-is,
+// where we can't guarantee that the user has the reactivity transform enabled.
+// Same for not using auto imports.
+const props = defineProps({
+  client: Object as PropType<NuxtDevtoolsHostClient>,
+})
+
+const CLIENT_PATH = '/__nuxt_devtools__/client'
+
+const initialUrl = CLIENT_PATH + state.value.route
+const iframe = ref<HTMLIFrameElement>()
+const isDragging = ref<false | 'vertical' | 'horizontal' | 'both'>(false)
+
+const frameStyle = computed(() => {
+  if (viewMode.value === 'component-inspector') {
+    return {
+      bottom: `${PANEL_PADDING}px`,
+      left: '50%',
+      transform: 'translateX(-50%)',
+      height: '80px',
+      width: '400px',
+    }
+  }
+
+  const height = `calc(${state.value.height}vh - ${PANEL_PADDING * 2}px)`
+  const width = `calc(${state.value.width}vw - ${PANEL_PADDING * 2}px)`
+
+  if (state.value.position === 'left' || state.value.position === 'right') {
+    return {
+      [state.value.position]: `${PANEL_PADDING}px`,
+      borderRadius: '0.5rem',
+      top: `calc(${(100 - state.value.height) / 2}vh + ${PANEL_PADDING}px)`,
+      height,
+      width,
+    }
+  }
+  else {
+    return {
+      [state.value.position || 'bottom']: `${PANEL_PADDING}px`,
+      borderRadius: '0.5rem',
+      left: `calc(${(100 - state.value.width) / 2}vw + ${PANEL_PADDING}px)`,
+      height,
+      width,
+    }
+  }
+})
+
+async function onLoad() {
+  await waitForClientInjection()
+  setupClient()
+}
+
+function waitForClientInjection(retry = 10, timeout = 200) {
+  const test = () => !!iframe.value?.contentWindow?.__NUXT_DEVTOOLS_VIEW__
+
+  if (test())
+    return
+
+  return new Promise<void>((resolve, reject) => {
+    const interval = setInterval(() => {
+      if (test()) {
+        clearInterval(interval)
+        resolve()
+      }
+      else if (retry-- <= 0) {
+        clearInterval(interval)
+        // eslint-disable-next-line prefer-promise-reject-errors
+        reject('Nuxt Devtools client injection failed')
+      }
+    }, timeout)
+  })
+}
+
+function setupClient() {
+  // trigger update for payload change
+  watch(() => props.client?.nuxt.payload, () => {
+    props.client!.hooks.callHook('host:update:reactivity')
+  }, { deep: true })
+
+  // trigger update for route change
+  props.client?.nuxt.vueApp.config.globalProperties?.$router?.afterEach(() => {
+    props.client!.hooks.callHook('host:update:reactivity')
+  })
+
+  updateClient()
+}
+
+function updateClient() {
+  const injection = iframe.value?.contentWindow?.__NUXT_DEVTOOLS_VIEW__ as NuxtDevtoolsViewGlobal
+  const componentInspector = window.__VUE_INSPECTOR__ as VueInspectorClient
+
+  if (componentInspector) {
+    componentInspector.openInEditor = async (baseUrl, file, line, column) => {
+      await props.client!.hooks.callHook('host:inspector:click', baseUrl, file, line, column)
+      disableComponentInspector()
+    }
+    componentInspector.onUpdated = () => {
+      props.client!.hooks.callHook('host:inspector:update', {
+        ...componentInspector.linkParams,
+        ...componentInspector.position,
+      })
+    }
+  }
+
+  injection?.setClient({
+    ...props.client as any,
+    inspector: {
+      enable: enableComponentInspector,
+      instance: componentInspector,
+    },
+  })
+
+  props.client?.hooks.hook('devtools:navigate', (path) => {
+    state.value.route = path
+  })
+}
+
+function enableComponentInspector() {
+  window.__VUE_INSPECTOR__?.enable()
+  viewMode.value = 'component-inspector'
+}
+
+function disableComponentInspector() {
+  window.__VUE_INSPECTOR__?.disable()
+  props.client?.hooks.callHook('host:inspector:close')
+  if (viewMode.value === 'component-inspector')
+    viewMode.value = 'default'
+}
+
+useEventListener(window, 'mousemove', (e: MouseEvent) => {
+  if (!isDragging.value)
+    return
+
+  const alignSide = state.value.position === 'left' || state.value.position === 'right'
+
+  if (isDragging.value === 'horizontal' || isDragging.value === 'both') {
+    const y = state.value.position === 'top'
+      ? window.innerHeight - e.clientY
+      : e.clientY
+    const boxHeight = window.innerHeight - PANEL_PADDING * 2
+    const value = alignSide
+      ? (Math.abs(y - (window.innerHeight / 2)) - PANEL_PADDING) / boxHeight * 100 * 2
+      : (window.innerHeight - y - PANEL_PADDING) / boxHeight * 100
+    state.value.height = Math.min(PANEL_MAX, Math.max(PANEL_MIN, value))
+  }
+
+  if (isDragging.value === 'vertical' || isDragging.value === 'both') {
+    const x = state.value.position === 'left'
+      ? window.innerWidth - e.clientX
+      : e.clientX
+    const boxWidth = window.innerWidth - PANEL_PADDING * 2
+    const value = alignSide
+      ? (window.innerWidth - x - PANEL_PADDING) / boxWidth * 100
+      : (Math.abs(x - (window.innerWidth / 2)) - PANEL_PADDING) / boxWidth * 100 * 2
+    state.value.width = Math.min(PANEL_MAX, Math.max(PANEL_MIN, value))
+  }
+})
+
+useEventListener(window, 'mouseup', () => {
+  isDragging.value = false
+})
+
+useEventListener(window, 'mouseleave', () => {
+  isDragging.value = false
+})
+
+useEventListener(window, 'keydown', (e: KeyboardEvent) => {
+  if (e.key === 'Escape')
+    closePanel()
+})
+
+watch(viewMode, (mode) => {
+  if (mode === 'component-inspector')
+    enableComponentInspector()
+  else
+    disableComponentInspector()
+}, { immediate: true })
+
+watchEffect(() => {
+  if (!state.value.open)
+    iframe.value?.blur()
+  else
+    iframe.value?.focus()
+})
+</script>
+
+<script lang="ts">
+declare global {
+  interface Window {
+    __NUXT_DEVTOOLS_VIEW__?: NuxtDevtoolsViewGlobal
+    __NUXT_DEVTOOLS__?: NuxtDevtoolsIframeClient
+    __VUE_INSPECTOR__?: VueInspectorClient
+  }
+}
+</script>
+
+<template>
+  <div v-show="state.open" class="frame" :style="frameStyle">
+    <iframe
+      ref="iframe"
+      :src="initialUrl"
+      :style="{
+        'pointer-events': isDragging ? 'none' : 'auto',
+      }"
+      @load="onLoad"
+    />
+    <template v-if="viewMode === 'default'">
+      <div v-if="state.position !== 'top'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal" :style="{ top: 0 }" @mousedown.prevent="() => isDragging = 'horizontal'" />
+      <div v-if="state.position !== 'bottom'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal" :style="{ bottom: 0 }" @mousedown.prevent="() => isDragging = 'horizontal'" />
+      <div v-if="state.position !== 'left'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical" :style="{ left: 0 }" @mousedown.prevent="() => isDragging = 'vertical'" />
+      <div v-if="state.position !== 'right'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical" :style="{ right: 0 }" @mousedown.prevent="() => isDragging = 'vertical'" />
+      <div v-if="state.position !== 'top' && state.position !== 'left'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner" :style="{ top: 0, left: 0, cursor: 'nwse-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <div v-if="state.position !== 'top' && state.position !== 'right'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner" :style="{ top: 0, right: 0, cursor: 'nesw-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <div v-if="state.position !== 'bottom' && state.position !== 'right'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner" :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <div v-if="state.position !== 'bottom' && state.position !== 'left'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner" :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.frame {
+  position: fixed;
+  z-index: 2147483646;
+}
+
+.frame iframe {
+  width: 100%;
+  height: 100%;
+  outline: none;
+  border: 1px solid rgba(125,125,125,0.2);
+  border-radius: 0.5rem;
+}
+
+.nuxt-devtools-resize-handle-horizontal {
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  height: 10px;
+  margin: -5px 0;
+  cursor: ns-resize;
+  border-radius: 5px;
+}
+.nuxt-devtools-resize-handle-vertical {
+  position: absolute;
+  top: 6px;
+  bottom: 0;
+  width: 10px;
+  margin: 0 -5px;
+  cursor: ew-resize;
+  border-radius: 5px;
+}
+.nuxt-devtools-resize-handle-corner {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin: -6px;
+  border-radius: 6px;
+}
+.nuxt-devtools-resize-handle:hover {
+  background: rgba(125,125,125,0.1);
+}
+</style>

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

@@ -0,0 +1,10 @@
+import type { DevToolsFrameState } from '../../../types';
+export declare const PANEL_PADDING = 10;
+export declare const PANEL_MIN = 15;
+export declare const PANEL_MAX = 100;
+export type ViewMode = 'default' | 'component-inspector';
+export declare const viewMode: import("vue").Ref<ViewMode>;
+export declare const state: import("vue").Ref<DevToolsFrameState>;
+export declare function togglePanel(): void;
+export declare function closePanel(): void;
+export declare function openPanel(): void;

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

@@ -0,0 +1,30 @@
+import { ref } from "vue";
+import { useObjectStorage } from "./utils.mjs";
+export const PANEL_PADDING = 10;
+export const PANEL_MIN = 15;
+export const PANEL_MAX = 100;
+export const viewMode = ref("default");
+export const state = useObjectStorage("nuxt-devtools-frame-state", {
+  width: 80,
+  height: 60,
+  bottom: 0,
+  left: 0,
+  open: false,
+  route: "/",
+  position: "bottom"
+});
+export function togglePanel() {
+  if (state.value.open)
+    closePanel();
+  else
+    openPanel();
+}
+export function closePanel() {
+  if (viewMode.value !== "default")
+    viewMode.value = "default";
+  else
+    state.value.open = false;
+}
+export function openPanel() {
+  state.value.open = true;
+}

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

@@ -0,0 +1,4 @@
+import type { Ref } from 'vue';
+export declare function useObjectStorage<T>(key: string, initial: T): 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;

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

@@ -0,0 +1,39 @@
+import { computed, getCurrentScope, onScopeDispose, ref, watch } from "vue";
+export function useObjectStorage(key, initial) {
+  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: "sync" });
+  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);
+  getCurrentScope() && onScopeDispose(() => target.removeEventListener(type, listener, options));
+}

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

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

package/dist/runtime/shared/hooks.mjs

@@ -0,0 +1,32 @@
+export function setupHooksDebug(hooks) {
+  const serverHooks = {};
+  hooks.beforeEach((event) => {
+    if (!serverHooks[event.name]) {
+      serverHooks[event.name] = {
+        name: event.name,
+        start: performance.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 = performance.now();
+      hook.end = void 0;
+      hook.duration = void 0;
+    }
+  });
+  hooks.afterEach((event) => {
+    const hook = serverHooks[event.name];
+    if (!hook)
+      return;
+    hook.end = performance.now();
+    hook.duration = hook.end - hook.start;
+    const listeners = hooks._hooks[event.name]?.length;
+    if (listeners != null)
+      hook.listeners = listeners;
+  });
+  return serverHooks;
+}

package/dist/shared/devtools.34d9e53a.mjs

@@ -0,0 +1,68 @@
+import { defineNuxtModule } from '@nuxt/kit';
+import require$$0__default from 'fs';
+import { g as globalDirs$1 } from './devtools.861712a3.mjs';
+import require$$1 from 'path';
+
+
+
+// -- Unbuild CommonJS Shims --
+import __cjs_url__ from 'url';
+import __cjs_path__ from 'path';
+import __cjs_mod__ from 'module';
+const __filename = __cjs_url__.fileURLToPath(import.meta.url);
+const __dirname = __cjs_path__.dirname(__filename);
+const require = __cjs_mod__.createRequire(import.meta.url);
+const path = require$$1;
+
+var isPathInside$1 = (childPath, parentPath) => {
+	const relation = path.relative(parentPath, childPath);
+	return Boolean(
+		relation &&
+		relation !== '..' &&
+		!relation.startsWith(`..${path.sep}`) &&
+		relation !== path.resolve(childPath)
+	);
+};
+
+const fs = require$$0__default;
+const globalDirs = globalDirs$1;
+const isPathInside = isPathInside$1;
+
+var isInstalledGlobally = (() => {
+	try {
+		return (
+			isPathInside(__dirname, globalDirs.yarn.packages) ||
+			isPathInside(__dirname, fs.realpathSync(globalDirs.npm.packages))
+		);
+	} catch {
+		return false;
+	}
+})();
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@nuxt/devtools",
+    configKey: "devtools"
+  },
+  defaults: {
+    enabled: void 0,
+    vscode: {
+      enabled: true,
+      startOnBoot: false,
+      port: 3080,
+      reuseExistingServer: true
+    }
+  },
+  setup(options, nuxt) {
+    if (options.enabled === false)
+      return;
+    if (isInstalledGlobally) {
+      const globalOptions = nuxt.options.devtoolsGlobal || {};
+      if (options.enabled !== true && !globalOptions.projects?.includes(nuxt.options.rootDir))
+        return;
+    }
+    return import('../chunks/module-main.mjs').then(function (n) { return n.m; }).then(({ enableModule }) => enableModule(options, nuxt));
+  }
+});
+
+export { isInstalledGlobally as i, module as m };

package/dist/shared/devtools.7127abb3.mjs

@@ -0,0 +1,4 @@
+const name = "@nuxt/devtools";
+const version = "0.1.0";
+
+export { name as n, version as v };