@nuxt/hints 0.0.0 → 1.0.0-alpha.10

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@nuxt/hints",
+  "configKey": "hints",
+  "version": "1.0.0-alpha.10",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,442 @@
+import { addDevServerHandler, useNuxt, defineNuxtModule, createResolver, addTemplate, addServerTemplate, addPlugin, addComponent, addServerHandler, addBuildPlugin, addServerPlugin } from '@nuxt/kit';
+import { HINTS_SSE_ROUTE } from '../dist/runtime/core/server/types.js';
+import { existsSync } from 'node:fs';
+import { eventHandler, proxyRequest } from 'h3';
+import { genImport } from 'knitwork';
+import MagicString from 'magic-string';
+import { dirname, resolve, parse } from 'node:path';
+import { parseSync, Visitor } from 'oxc-parser';
+import { createUnplugin } from 'unplugin';
+import { fileURLToPath } from 'node:url';
+
+const DEVTOOLS_UI_ROUTE = "/__nuxt-hints";
+const DEVTOOLS_UI_LOCAL_PORT = 3300;
+function setupDevToolsUI(nuxt, resolver) {
+  const clientPath = resolver.resolve("./client");
+  const isProductionBuild = existsSync(clientPath);
+  if (isProductionBuild) {
+    nuxt.hook("vite:serverCreated", async (server) => {
+      const sirv = await import('sirv').then((r) => r.default || r);
+      server.middlewares.use(
+        DEVTOOLS_UI_ROUTE,
+        sirv(clientPath, { dev: true, single: true })
+      );
+    });
+  } else {
+    addDevServerHandler({
+      route: DEVTOOLS_UI_ROUTE,
+      handler: eventHandler((e) => {
+        return proxyRequest(e, "http://localhost:" + DEVTOOLS_UI_LOCAL_PORT + DEVTOOLS_UI_ROUTE + e.path);
+      })
+    });
+  }
+  nuxt.hook("devtools:customTabs", (tabs) => {
+    tabs.push({
+      name: "hints",
+      title: "Hints",
+      icon: "carbon:idea",
+      category: "analyze",
+      view: {
+        type: "iframe",
+        src: DEVTOOLS_UI_ROUTE
+      }
+    });
+  });
+}
+
+const distDir = dirname(fileURLToPath(import.meta.url));
+
+const INCLUDE_VUE_RE = /\.vue$/;
+const EXCLUDE_NODE_MODULES$1 = /node_modules|dist/;
+const DEFINE_COMPONENT_RE = /defineComponent/;
+const DEFINE_NUXT_COMPONENT_RE = /defineNuxtComponent/;
+const skipPath$1 = normalizePath$1(resolve(distDir, "runtime/hydration/component.ts"));
+const InjectHydrationPlugin = createUnplugin(() => {
+  return [
+    {
+      name: "@nuxt/hints:modify-hydration-composable-import",
+      enforce: "post",
+      transform: {
+        filter: {
+          id: {
+            include: /.(vue|ts|js|tsx|jsx)$/,
+            exclude: [skipPath$1, EXCLUDE_NODE_MODULES$1]
+          },
+          code: {
+            include: [DEFINE_COMPONENT_RE, DEFINE_NUXT_COMPONENT_RE]
+          }
+        },
+        async handler(code, id) {
+          const m = new MagicString(code);
+          const { program } = parseSync(id, code);
+          const imports = program.body.filter((node) => node.type === "ImportDeclaration");
+          const hasDefineComponent = DEFINE_COMPONENT_RE.test(code);
+          const hasDefineNuxtComponent = DEFINE_NUXT_COMPONENT_RE.test(code);
+          const defineComponentImport = findImportSpecifier(
+            imports,
+            "defineComponent",
+            ["vue", "#imports"],
+            (specifier, nextSpecifier) => {
+              m.remove(
+                specifier.start,
+                nextSpecifier?.start ?? specifier.end
+              );
+            }
+          );
+          const defineComponentAlias = defineComponentImport?.local.name || "defineComponent";
+          const defineNuxtComponentImport = findImportSpecifier(
+            imports,
+            "defineNuxtComponent",
+            ["#app/composables/component", "#imports", "#app", "nuxt/app"],
+            (specifier, next) => {
+              m.remove(
+                specifier.start,
+                next?.start ?? specifier.end
+              );
+            }
+          );
+          const defineNuxtComponentAlias = defineNuxtComponentImport?.local.name || "defineNuxtComponent";
+          const importsToAdd = new Set([
+            hasDefineComponent && genImport(
+              "@nuxt/hints/runtime/hydration/component",
+              [defineComponentAlias === "defineComponent" ? "defineComponent" : { name: "defineComponent", as: defineComponentAlias }]
+            ),
+            hasDefineNuxtComponent && genImport(
+              "@nuxt/hints/runtime/hydration/component",
+              [defineNuxtComponentAlias === "defineNuxtComponent" ? "defineNuxtComponent" : { name: "defineNuxtComponent", as: defineNuxtComponentAlias }]
+            )
+          ].filter(Boolean));
+          m.prepend([...importsToAdd].join("\n") + "\n");
+          if (m.hasChanged()) {
+            return {
+              code: m.toString(),
+              map: m.generateMap({ hires: true })
+            };
+          }
+        }
+      }
+    },
+    {
+      name: "@nuxt/hints:inject-hydration-composable",
+      enforce: "post",
+      transform: {
+        filter: {
+          id: {
+            include: INCLUDE_VUE_RE,
+            exclude: [skipPath$1, EXCLUDE_NODE_MODULES$1]
+          },
+          code: {
+            exclude: [DEFINE_COMPONENT_RE, DEFINE_NUXT_COMPONENT_RE]
+          }
+        },
+        handler(code, id) {
+          const m = new MagicString(code);
+          const { program } = parseSync(id, code);
+          const exportDeclaration = program.body.find(
+            (node) => node.type === "ExportDefaultDeclaration"
+          )?.declaration;
+          if (exportDeclaration) {
+            m.prepend(genImport(
+              "@nuxt/hints/runtime/hydration/component",
+              ["defineComponent"]
+            ));
+            m.overwrite(
+              exportDeclaration.start,
+              exportDeclaration.end,
+              `defineComponent(${code.slice(exportDeclaration.start, exportDeclaration.end)})`
+            );
+          }
+          if (m.hasChanged()) {
+            return {
+              code: m.toString(),
+              map: m.generateMap({ hires: true })
+            };
+          }
+        }
+      }
+    }
+  ];
+});
+function findImportSpecifier(importDecl, importedName, pkgNames, callback) {
+  const names = Array.isArray(pkgNames) ? pkgNames : [pkgNames];
+  const allSpecifiers = importDecl.filter((imp) => names.includes(imp.source.value)).flatMap((decl) => decl.specifiers.map((spec, i) => ({ spec, next: decl.specifiers[i + 1] })));
+  const match = allSpecifiers.find(
+    ({ spec }) => spec.type === "ImportSpecifier" && spec.imported.type === "Identifier" && spec.imported.name === importedName
+  );
+  if (match) {
+    callback?.(match.spec, match.next);
+    return match.spec;
+  }
+}
+function normalizePath$1(path) {
+  return path.replace(/\\/g, "/");
+}
+
+function findDefineComponentCalls(program) {
+  const imports = program.body.filter(
+    (node) => node.type === "ImportDeclaration"
+  );
+  const defineComponentImport = findImport("defineComponent", imports);
+  const defineComponentNames = /* @__PURE__ */ new Set(["defineNuxtComponent"]);
+  if (defineComponentImport) {
+    for (const specifier of defineComponentImport.specifiers) {
+      if (specifier.type === "ImportSpecifier" && specifier.imported.type === "Identifier") {
+        defineComponentNames.add(specifier.local.name);
+      }
+    }
+  }
+  const defineComponentNodes = [];
+  const visitor = new Visitor({
+    CallExpression(node) {
+      if (node.callee.type === "Identifier" && defineComponentNames.has(node.callee.name)) {
+        defineComponentNodes.push(node);
+      }
+    }
+  });
+  visitor.visit(program);
+  return defineComponentNodes;
+}
+function findImport(name, imports) {
+  return imports.find((imp) => {
+    return imp.specifiers.some((specifier) => {
+      if (specifier.type === "ImportSpecifier" && specifier.imported.type === "Identifier") {
+        return specifier.imported.name === name;
+      }
+      return false;
+    });
+  });
+}
+
+const INCLUDE_FILES = /\.(vue|tsx?|jsx?)$/;
+const EXCLUDE_NODE_MODULES = /node_modules/;
+const skipPath = normalizePath(resolve(distDir, "runtime/lazy-load"));
+const LazyLoadHintPlugin = createUnplugin(() => {
+  const nuxt = useNuxt();
+  let nuxtComponents = nuxt.apps.default.components;
+  nuxt.hook("components:extend", (extendedComponents) => {
+    nuxtComponents = extendedComponents;
+  });
+  return {
+    name: "@nuxt/hints:lazy-load-plugin",
+    enforce: "post",
+    transform: {
+      filter: {
+        id: {
+          include: INCLUDE_FILES,
+          exclude: [skipPath, EXCLUDE_NODE_MODULES]
+        }
+      },
+      handler(code, id) {
+        const m = new MagicString(code);
+        const { program } = parseSync(id, code);
+        const imports = program.body.filter(
+          (node) => node.type === "ImportDeclaration"
+        );
+        const directComponentImports = [];
+        for (const importDecl of imports) {
+          const source = importDecl.source.value;
+          if (!source.endsWith(".vue")) continue;
+          if (importDecl.importKind === "type") continue;
+          for (const specifier of importDecl.specifiers ?? []) {
+            if (specifier.type === "ImportDefaultSpecifier" || specifier.type === "ImportSpecifier") {
+              const localName = specifier.local.name;
+              directComponentImports.push({
+                name: localName,
+                source,
+                start: importDecl.start,
+                end: importDecl.end,
+                specifier
+              });
+            }
+          }
+        }
+        if (directComponentImports.length === 0) {
+          return;
+        }
+        m.prepend(genImport(
+          "@nuxt/hints/runtime/lazy-load/composables",
+          ["__wrapImportedComponent", "__wrapMainComponent"]
+        ) + "\n" + genImport(
+          "@nuxt/hints/runtime/lazy-load/composables",
+          ["useLazyComponentTracking"]
+        ) + "\n");
+        const wrapperStatements = directComponentImports.map((imp) => {
+          const originalName = `__original_${imp.name}`;
+          const resolvedName = resolveComponentName(imp, nuxtComponents);
+          return `const ${imp.name} = __wrapImportedComponent(${originalName}, '${resolvedName}', '${imp.source}', '${normalizePath(id)}')`;
+        }).join("\n");
+        for (const imp of directComponentImports) {
+          const specifier = imp.specifier;
+          const localName = specifier.local.name;
+          const newName = `__original_${localName}`;
+          if (specifier.type === "ImportDefaultSpecifier") {
+            m.overwrite(
+              specifier.local.start,
+              specifier.local.end,
+              newName
+            );
+          } else if (specifier.type === "ImportSpecifier" && specifier.imported.type === "Identifier" && specifier.imported.name !== specifier.local.name) {
+            m.overwrite(
+              specifier.local.start,
+              specifier.local.end,
+              newName
+            );
+          } else {
+            m.overwrite(
+              specifier.local.start,
+              specifier.local.end,
+              `${localName} as ${newName}`
+            );
+          }
+        }
+        if (code.includes("_sfc_main")) {
+          const wrappedComponents = directComponentImports.map((imp) => {
+            const componentName = resolveComponentName(imp, nuxtComponents);
+            return `{ componentName: '${componentName}', importSource: '${imp.source}', importedBy: '${normalizePath(id)}', rendered: false }`;
+          }).join(", ");
+          m.replace("export default _sfc_main", `const _sfc_main_wrapped = __wrapMainComponent(_sfc_main, [${wrappedComponents}]);
+export default _sfc_main_wrapped`);
+        }
+        const components = findDefineComponentCalls(program);
+        if (components && components.length > 0) {
+          for (const comp of components) {
+            injectUseLazyComponentTrackingInComponentSetup(comp, m, directComponentImports, id, nuxtComponents);
+          }
+        }
+        const lastImport = imports[imports.length - 1];
+        if (lastImport) {
+          m.appendRight(lastImport.end, "\n" + wrapperStatements);
+        } else {
+          m.prepend(wrapperStatements + "\n");
+        }
+        if (m.hasChanged()) {
+          return {
+            code: m.toString(),
+            map: m.generateMap({ hires: true })
+          };
+        }
+      }
+    }
+  };
+});
+function normalizePath(path) {
+  return path.replace(/\\/g, "/");
+}
+function resolveComponentName(imp, nuxtComponents) {
+  const component = nuxtComponents.find((c) => c.filePath === imp.source);
+  if (component) return component.pascalName;
+  return imp.name.startsWith("__nuxt") ? parse(imp.source).name : imp.name;
+}
+function injectUseLazyComponentTrackingInComponentSetup(node, magicString, directComponentImports, id, nuxtComponents) {
+  if (node.arguments.length === 1) {
+    const arg = node.arguments[0];
+    if (arg?.type === "ObjectExpression") {
+      const properties = arg.properties;
+      const setupProp = properties.find(
+        (prop) => prop.type === "Property" && prop.key.type === "Identifier" && prop.key.name === "setup"
+      );
+      if (setupProp && setupProp.type === "Property") {
+        const setupFunc = setupProp.value;
+        if (setupFunc.type === "FunctionExpression" || setupFunc.type === "ArrowFunctionExpression") {
+          const insertPos = (setupFunc.body?.start ?? 0) + 1;
+          const componentsArray = directComponentImports.map((imp) => {
+            const componentName = resolveComponentName(imp, nuxtComponents);
+            return `{ componentName: '${componentName}', importSource: '${imp.source}', importedBy: '${normalizePath(id)}', rendered: false }`;
+          }).join(", ");
+          const injectionCode = `
+const lazyHydrationState = useLazyComponentTracking([${componentsArray}]);
+`;
+          magicString.appendLeft(insertPos, injectionCode);
+        }
+      }
+    }
+  }
+}
+
+function isFeatureDevtoolsEnabled(options, feature) {
+  return typeof options.features[feature] === "object" ? options.features[feature].devtools : !!options.features[feature];
+}
+function isFeatureEnabled(options, feature) {
+  return !!options.features[feature];
+}
+
+const moduleName = "@nuxt/hints";
+const module$1 = defineNuxtModule({
+  meta: {
+    name: moduleName,
+    configKey: "hints"
+  },
+  defaults: {
+    devtools: true,
+    features: {
+      hydration: true,
+      lazyLoad: true,
+      webVitals: true,
+      thirdPartyScripts: true
+    }
+  },
+  setup(options, nuxt) {
+    if (!nuxt.options.dev) {
+      return;
+    }
+    nuxt.options.nitro.experimental = nuxt.options.nitro.experimental || {};
+    nuxt.options.nitro.experimental.websocket = true;
+    const resolver = createResolver(import.meta.url);
+    const hintsConfigContent = `export const features = ${JSON.stringify(options.features)}`;
+    const hintsConfig = addTemplate({
+      filename: "#hints-config",
+      getContents: () => hintsConfigContent
+    });
+    nuxt.options.alias["#hints-config"] = hintsConfig.dst;
+    addServerTemplate({
+      filename: "#hints-config",
+      getContents: () => hintsConfigContent
+    });
+    addPlugin(resolver.resolve("./runtime/core/plugins/features.client"));
+    addComponent({
+      name: "NuxtIsland",
+      filePath: resolver.resolve("./runtime/core/components/nuxt-island"),
+      priority: 1e3
+    });
+    addServerHandler({
+      route: HINTS_SSE_ROUTE,
+      handler: resolver.resolve("./runtime/core/server/sse")
+    });
+    if (isFeatureEnabled(options, "webVitals")) {
+      addPlugin(resolver.resolve("./runtime/web-vitals/plugin.client"));
+    }
+    if (isFeatureEnabled(options, "hydration")) {
+      addPlugin(resolver.resolve("./runtime/hydration/plugin.client"));
+      addBuildPlugin(InjectHydrationPlugin);
+      addServerPlugin(resolver.resolve("./runtime/hydration/nitro.plugin"));
+    }
+    if (isFeatureEnabled(options, "lazyLoad")) {
+      addPlugin(resolver.resolve("./runtime/lazy-load/plugin.client"));
+      if (isFeatureDevtoolsEnabled(options, "lazyLoad")) {
+        addServerPlugin(resolver.resolve("./runtime/lazy-load/nitro.plugin"));
+      }
+      nuxt.hook("modules:done", () => {
+        addBuildPlugin(LazyLoadHintPlugin, { client: false });
+        addBuildPlugin(LazyLoadHintPlugin, { server: false });
+      });
+    }
+    if (isFeatureEnabled(options, "thirdPartyScripts")) {
+      addPlugin(resolver.resolve("./runtime/third-party-scripts/plugin.client"));
+      if (isFeatureDevtoolsEnabled(options, "thirdPartyScripts")) {
+        addServerPlugin(resolver.resolve("./runtime/third-party-scripts/nitro.plugin"));
+      }
+    }
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({
+        types: resolver.resolve("./runtime/types.d.ts")
+      });
+    });
+    if (options.devtools) {
+      setupDevToolsUI(nuxt, resolver);
+      addPlugin(resolver.resolve("./runtime/core/plugins/vue-tracer-state.client"));
+    }
+    nuxt.options.build.transpile.push(moduleName);
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/core/components/nuxt-island.d.ts

@@ -0,0 +1,2 @@
+declare const HintsNuxtIsland: any;
+export default HintsNuxtIsland;

package/dist/runtime/core/components/nuxt-island.js

@@ -0,0 +1,15 @@
+import NuxtIsland from "#app/components/nuxt-island";
+import { useNuxtApp } from "#imports";
+import { logger } from "../../logger.js";
+const originalSetup = NuxtIsland.setup;
+const HintsNuxtIsland = Object.assign({}, NuxtIsland, {
+  setup(props, ctx) {
+    if (useNuxtApp().ssrContext?.islandContext) {
+      logger.warn(
+        `Nesting islands within islands is not recommanded for performance reasons. This leads to waterfall calls.`
+      );
+    }
+    return originalSetup(props, ctx);
+  }
+});
+export default HintsNuxtIsland;

package/dist/runtime/core/features.d.ts

@@ -0,0 +1,4 @@
+import type { FeaturesName } from './types.js';
+export declare function isFeatureDevtoolsEnabled(feature: FeaturesName): boolean;
+export declare function isFeatureLogsEnabled(feature: FeaturesName): boolean;
+export declare function isFeatureEnabled(feature: FeaturesName): boolean;

package/dist/runtime/core/features.js

@@ -0,0 +1,10 @@
+import { features } from "#hints-config";
+export function isFeatureDevtoolsEnabled(feature) {
+  return typeof features[feature] === "object" ? features[feature].devtools : !!features[feature];
+}
+export function isFeatureLogsEnabled(feature) {
+  return typeof features[feature] === "object" ? features[feature].logs : !!features[feature];
+}
+export function isFeatureEnabled(feature) {
+  return !!features[feature];
+}

package/dist/runtime/core/plugins/features.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/core/plugins/features.client.js

@@ -0,0 +1,16 @@
+import { defineNuxtPlugin } from "#imports";
+import { features } from "#hints-config";
+export default defineNuxtPlugin({
+  name: "hints:features",
+  setup(nuxtApp) {
+    Object.defineProperty(nuxtApp, "hints", {
+      get() {
+        return Object.freeze({
+          config: {
+            features
+          }
+        });
+      }
+    });
+  }
+});

package/dist/runtime/core/plugins/vue-tracer-state.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/core/plugins/vue-tracer-state.client.js

@@ -0,0 +1,7 @@
+import * as tracerOverlay from "vite-plugin-vue-tracer/client/overlay";
+import * as tracerRecord from "vite-plugin-vue-tracer/client/record";
+import { defineNuxtPlugin } from "#imports";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.__tracerOverlay = tracerOverlay;
+  nuxtApp.__tracerRecord = tracerRecord;
+});

package/dist/runtime/core/server/sse.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<void>>;
+export default _default;

package/dist/runtime/core/server/sse.js

@@ -0,0 +1,16 @@
+import { createEventStream, defineEventHandler } from "h3";
+import { useNitroApp } from "nitropack/runtime";
+export default defineEventHandler((event) => {
+  const nitro = useNitroApp();
+  const eventStream = createEventStream(event);
+  const context = {
+    eventStream,
+    unsubscribers: []
+  };
+  nitro.hooks.callHook("hints:sse:setup", context);
+  eventStream.onClosed(async () => {
+    context.unsubscribers.forEach((unsub) => unsub());
+    await eventStream.close();
+  });
+  return eventStream.send();
+});

package/dist/runtime/core/server/types.d.ts

@@ -0,0 +1,12 @@
+import type { EventHandler, EventStream, H3Event } from 'h3';
+export interface HintsApiContext {
+    event: H3Event;
+    path: string;
+    handler?: EventHandler;
+}
+export interface HintsSseContext {
+    eventStream: EventStream;
+    unsubscribers: (() => void)[];
+}
+export declare const HINTS_ROUTE = "/__nuxt_hints";
+export declare const HINTS_SSE_ROUTE = "/__nuxt_hints/sse";

package/dist/runtime/core/server/types.js

@@ -0,0 +1,2 @@
+export const HINTS_ROUTE = "/__nuxt_hints";
+export const HINTS_SSE_ROUTE = "/__nuxt_hints/sse";

package/dist/runtime/core/types.d.ts

@@ -0,0 +1,9 @@
+export type FeaturesName = 'hydration' | 'lazyLoad' | 'webVitals' | 'thirdPartyScripts';
+/**
+ * FF used by modules options and to expose in the payload for devtools
+ */
+export type FeatureFlags = {
+    logs: boolean;
+    devtools: boolean;
+};
+export type Features = Record<FeaturesName, FeatureFlags>;

package/dist/runtime/hydration/component.d.ts

@@ -0,0 +1,3 @@
+import { defineComponent as _defineComponent } from '#imports';
+export declare const defineNuxtComponent: typeof _defineComponent;
+export declare const defineComponent: typeof _defineComponent;

package/dist/runtime/hydration/component.js

@@ -0,0 +1,22 @@
+import { defineNuxtComponent as _defineNuxtComponent, defineComponent as _defineComponent } from "#imports";
+import { useHydrationCheck } from "./composables.js";
+export const defineNuxtComponent = function defineNuxtComponent2(...args) {
+  const [options, key] = args;
+  const { setup } = options;
+  options.setup = function(props, ctx) {
+    useHydrationCheck();
+    return setup ? setup(props, ctx) : void 0;
+  };
+  return _defineNuxtComponent(options, key);
+};
+export const defineComponent = function defineComponent2(...args) {
+  const [options] = args;
+  if (typeof options === "object" && options !== null) {
+    const { setup } = options;
+    options.setup = function(props, ctx) {
+      useHydrationCheck();
+      return setup ? setup(props, ctx) : void 0;
+    };
+  }
+  return _defineComponent(options);
+};

package/dist/runtime/hydration/composables.d.ts

@@ -0,0 +1,5 @@
+/**
+ * prefer implementing onMismatch hook after vue 3.6
+ * compare element
+ */
+export declare function useHydrationCheck(): void;

package/dist/runtime/hydration/composables.js

@@ -0,0 +1,45 @@
+import { getCurrentInstance, inject, onMounted } from "vue";
+import { useNuxtApp } from "#imports";
+import { HYDRATION_ROUTE, formatHTML, logger } from "./utils.js";
+import { clientOnlySymbol } from "#app/components/client-only";
+import { isFeatureDevtoolsEnabled } from "../core/features.js";
+export function useHydrationCheck() {
+  const isClientOnly = inject(clientOnlySymbol, false);
+  if (import.meta.server || isClientOnly) {
+    return;
+  }
+  const nuxtApp = useNuxtApp();
+  if (!nuxtApp.isHydrating || !nuxtApp.payload.serverRendered) {
+    return;
+  }
+  const instance = getCurrentInstance();
+  if (!instance) return;
+  const htmlPreHydration = formatHTML(instance.vnode.el?.outerHTML);
+  const vnodePrehydration = instance.vnode;
+  onMounted(() => {
+    const htmlPostHydration = formatHTML(instance.vnode.el?.outerHTML);
+    if (htmlPreHydration !== htmlPostHydration) {
+      const componentName = instance.type.name ?? instance.type.displayName ?? instance.type.__name;
+      const fileLocation = instance.type.__file ?? "unknown";
+      const body = {
+        htmlPreHydration,
+        htmlPostHydration,
+        componentName,
+        fileLocation
+      };
+      if (isFeatureDevtoolsEnabled("hydration")) {
+        $fetch(new URL(HYDRATION_ROUTE, window.location.origin).href, {
+          method: "POST",
+          body
+        }).then((payload) => {
+          nuxtApp.payload.__hints.hydration.push({
+            ...payload,
+            instance,
+            vnode: vnodePrehydration
+          });
+        });
+      }
+      logger.warn(`[hydration] Component ${componentName ?? instance.type.__file} seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.`);
+    }
+  });
+}

package/dist/runtime/hydration/nitro.plugin.d.ts

@@ -0,0 +1,2 @@
+import type { NitroApp } from 'nitropack/types';
+export default function (nitroApp: NitroApp): void;