@ifds/hydration-lens-vue 0.1.0

package/README.md

@@ -0,0 +1,27 @@
+# @ifds/hydration-lens-vue
+
+Vue 3 adapter for hydration-lens. It recognizes Vue hydration warnings, extracts the mismatch details, locates the affected DOM element when possible, and displays the shared overlay.
+
+## Install
+
+```bash
+npm install --save-dev @ifds/hydration-lens-vue
+```
+
+## Usage
+
+Call `init()` on the client during app startup:
+
+```ts
+import { init } from "@ifds/hydration-lens-vue";
+
+if (import.meta.env.DEV) init();
+```
+
+`init(options?)` is safe to call more than once and is a no-op outside the browser. Pass `{ suppressConsole: true }` to suppress recognized Vue warning output.
+
+Supports Vue 3. For Nuxt, use [`@ifds/hydration-lens-nuxt`](../nuxt) for zero-config setup.
+
+## License
+
+MIT — see the repository [LICENSE](../../LICENSE).

package/dist/index.cjs

@@ -0,0 +1,111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  init: () => init,
+  parseVueWarning: () => parseVueWarning,
+  vueAdapter: () => vueAdapter
+});
+module.exports = __toCommonJS(index_exports);
+var import_hydration_lens_core = require("@ifds-oss/hydration-lens-core");
+
+// src/adapter.ts
+var VUE_PREFIX = /^\[Vue warn\]:\s*/;
+var TEXT_MISMATCH = /Hydration text (?:content )?mismatch/i;
+var NODE_MISMATCH = /Hydration node mismatch/i;
+var CHILDREN_MISMATCH = /Hydration children mismatch/i;
+var COMPLETED_WITH_MISMATCHES = /Hydration completed but contains mismatches/i;
+var HYDRATION_KEYWORD = /hydrat/i;
+var SERVER_CLIENT_CURRENT = /rendered on server:\s*([\s\S]*?)\s*\n\s*-\s*expected on client:\s*([\s\S]*?)(?:\n|$)/i;
+var SERVER_CLIENT_LEGACY = /Client:\s*"?([\s\S]*?)"?\s*\n?\s*-\s*Server:\s*"?([\s\S]*?)"?(?:\n|$)/i;
+var TRAIL_TAG = /at <([A-Za-z0-9_.$]+)/g;
+var issueCounter = 0;
+function joinStringArgs(rawArgs) {
+  return rawArgs.filter((arg) => typeof arg === "string").join(" ");
+}
+function extractExpectedActual(message) {
+  const current = SERVER_CLIENT_CURRENT.exec(message);
+  if (current) return { expected: current[1]?.trim() ?? null, actual: current[2]?.trim() ?? null };
+  const legacy = SERVER_CLIENT_LEGACY.exec(message);
+  if (legacy) return { actual: legacy[1]?.trim() ?? null, expected: legacy[2]?.trim() ?? null };
+  return { expected: null, actual: null };
+}
+function parseComponentTrail(message) {
+  const trail = [];
+  for (const match of message.matchAll(TRAIL_TAG)) {
+    const name = match[1];
+    if (name) trail.push({ name, raw: match[0].trim() });
+  }
+  return trail;
+}
+function parseVueWarning(rawArgs) {
+  if (typeof rawArgs[0] !== "string") return null;
+  const message = joinStringArgs(rawArgs).replace(VUE_PREFIX, "");
+  if (COMPLETED_WITH_MISMATCHES.test(message)) return null;
+  let kind;
+  if (TEXT_MISMATCH.test(message)) kind = "text";
+  else if (NODE_MISMATCH.test(message)) kind = "node";
+  else if (CHILDREN_MISMATCH.test(message)) kind = "children";
+  else if (HYDRATION_KEYWORD.test(message)) kind = "unknown";
+  else return null;
+  const { expected, actual } = extractExpectedActual(message);
+  const componentTrail = parseComponentTrail(message);
+  const liveNode = rawArgs.slice(1).find((arg) => typeof Node !== "undefined" && arg instanceof Node) ?? null;
+  return { kind, rawMessage: message, expected, actual, componentTrail, targetSelectorGuess: null, liveNode };
+}
+var vueAdapter = {
+  name: "vue",
+  install(bus, options) {
+    const original = console.warn.bind(console);
+    console.warn = (...args) => {
+      const parsed = parseVueWarning(args);
+      if (parsed) {
+        bus.emit({
+          id: `vue-${++issueCounter}`,
+          timestamp: Date.now(),
+          framework: "vue",
+          ...parsed
+        });
+        if (options?.suppressConsole) return;
+      }
+      original(...args);
+    };
+    return () => {
+      console.warn = original;
+    };
+  }
+};
+
+// src/index.ts
+var installed = false;
+function init(options) {
+  if (typeof window === "undefined" || installed) return;
+  installed = true;
+  vueAdapter.install(import_hydration_lens_core.defaultBus, options);
+  (0, import_hydration_lens_core.mountOverlay)(import_hydration_lens_core.defaultBus);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  init,
+  parseVueWarning,
+  vueAdapter
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/adapter.ts"],"sourcesContent":["import type { AdapterOptions } from \"@ifds-oss/hydration-lens-core\";\nimport { defaultBus, mountOverlay } from \"@ifds-oss/hydration-lens-core\";\nimport { vueAdapter } from \"./adapter.js\";\n\nlet installed = false;\n\n/** Call once on app mount. Dev-only, no-ops outside the browser and on double-init. */\nexport function init(options?: AdapterOptions): void {\n  if (typeof window === \"undefined\" || installed) return;\n  installed = true;\n  vueAdapter.install(defaultBus, options);\n  mountOverlay(defaultBus);\n}\n\nexport { vueAdapter };\nexport { parseVueWarning } from \"./adapter.js\";\n","import type { Adapter, AdapterOptions, ComponentTrailEntry, HydrationIssue, IssueBus, IssueKind } from \"@ifds-oss/hydration-lens-core\";\n\n/**\n * Vue's warn() does NOT hand console.warn a single pre-interpolated string — a real\n * capture from Vue 3.5 / Nuxt 3 shows a call like:\n *\n *   console.warn(\n *     \"[Vue warn]: Hydration text content mismatch on\",\n *     pElement,                                    // the live DOM node\n *     \"\\n  - rendered on server: abc\\n  - expected on client: xyz\",\n *     \"\\n\", \" at <Index\", \"onVnodeUnmounted=fn<...>\", ..., \" at <RouteProvider\", ...\n *   )\n *\n * i.e. the message, the live node, and the component trace are all separate positional\n * args (mixing strings with the live vnode/DOM node), similar in spirit to how React\n * spreads its console.error args — just split differently. We join every *string* arg\n * (skipping the live node / object args) to reconstruct one message to pattern-match\n * and to extract the component trace from.\n */\nconst VUE_PREFIX = /^\\[Vue warn\\]:\\s*/;\nconst TEXT_MISMATCH = /Hydration text (?:content )?mismatch/i;\nconst NODE_MISMATCH = /Hydration node mismatch/i;\nconst CHILDREN_MISMATCH = /Hydration children mismatch/i;\nconst COMPLETED_WITH_MISMATCHES = /Hydration completed but contains mismatches/i;\nconst HYDRATION_KEYWORD = /hydrat/i;\n\n// Real (Vue 3.5) wording: \"- rendered on server: X\" / \"- expected on client: Y\".\nconst SERVER_CLIENT_CURRENT = /rendered on server:\\s*([\\s\\S]*?)\\s*\\n\\s*-\\s*expected on client:\\s*([\\s\\S]*?)(?:\\n|$)/i;\n// Older/documented wording, kept as a fallback in case another Vue version uses it:\n// \"- Client: \"X\" - Server: \"Y\"\".\nconst SERVER_CLIENT_LEGACY = /Client:\\s*\"?([\\s\\S]*?)\"?\\s*\\n?\\s*-\\s*Server:\\s*\"?([\\s\\S]*?)\"?(?:\\n|$)/i;\n\nconst TRAIL_TAG = /at <([A-Za-z0-9_.$]+)/g;\n\nlet issueCounter = 0;\n\nfunction joinStringArgs(rawArgs: unknown[]): string {\n  return rawArgs.filter((arg): arg is string => typeof arg === \"string\").join(\" \");\n}\n\nfunction extractExpectedActual(message: string): { expected: string | null; actual: string | null } {\n  const current = SERVER_CLIENT_CURRENT.exec(message);\n  if (current) return { expected: current[1]?.trim() ?? null, actual: current[2]?.trim() ?? null };\n\n  const legacy = SERVER_CLIENT_LEGACY.exec(message);\n  if (legacy) return { actual: legacy[1]?.trim() ?? null, expected: legacy[2]?.trim() ?? null };\n\n  return { expected: null, actual: null };\n}\n\nfunction parseComponentTrail(message: string): ComponentTrailEntry[] {\n  const trail: ComponentTrailEntry[] = [];\n  for (const match of message.matchAll(TRAIL_TAG)) {\n    const name = match[1];\n    if (name) trail.push({ name, raw: match[0].trim() });\n  }\n  return trail;\n}\n\nexport type ParsedVueIssue = Omit<HydrationIssue, \"id\" | \"timestamp\" | \"framework\">;\n\n/**\n * Returns null both for non-hydration console.warn calls AND for the follow-up\n * \"Hydration completed but contains mismatches.\" message — the latter just confirms\n * a mismatch already reported via one of the three shapes above, so it must not\n * be double-counted as a second issue. (In some Vue versions this follow-up is logged\n * via console.error instead, in which case this adapter — which only patches\n * console.warn — never sees it at all, which is equally safe: no double-count risk.)\n */\nexport function parseVueWarning(rawArgs: unknown[]): ParsedVueIssue | null {\n  if (typeof rawArgs[0] !== \"string\") return null;\n\n  const message = joinStringArgs(rawArgs).replace(VUE_PREFIX, \"\");\n  if (COMPLETED_WITH_MISMATCHES.test(message)) return null;\n\n  let kind: IssueKind;\n  if (TEXT_MISMATCH.test(message)) kind = \"text\";\n  else if (NODE_MISMATCH.test(message)) kind = \"node\";\n  else if (CHILDREN_MISMATCH.test(message)) kind = \"children\";\n  else if (HYDRATION_KEYWORD.test(message)) kind = \"unknown\";\n  else return null;\n\n  const { expected, actual } = extractExpectedActual(message);\n  const componentTrail = parseComponentTrail(message);\n\n  // Vue hands the live client vnode / server DOM node as a separate object argument\n  // (not string-interpolated) — capture it for a free 'exact' locate, bypassing the\n  // TreeWalker heuristic entirely for this issue.\n  const liveNode = rawArgs.slice(1).find((arg): arg is Node => typeof Node !== \"undefined\" && arg instanceof Node) ?? null;\n\n  return { kind, rawMessage: message, expected, actual, componentTrail, targetSelectorGuess: null, liveNode };\n}\n\nexport const vueAdapter: Adapter = {\n  name: \"vue\",\n  install(bus: IssueBus, options?: AdapterOptions) {\n    const original = console.warn.bind(console);\n\n    console.warn = (...args: unknown[]) => {\n      const parsed = parseVueWarning(args);\n      if (parsed) {\n        bus.emit({\n          id: `vue-${++issueCounter}`,\n          timestamp: Date.now(),\n          framework: \"vue\",\n          ...parsed,\n        });\n        if (options?.suppressConsole) return; // swallow only warnings we recognized as hydration issues\n      }\n      original(...args);\n    };\n\n    return () => {\n      console.warn = original;\n    };\n  },\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iCAAyC;;;ACkBzC,IAAM,aAAa;AACnB,IAAM,gBAAgB;AACtB,IAAM,gBAAgB;AACtB,IAAM,oBAAoB;AAC1B,IAAM,4BAA4B;AAClC,IAAM,oBAAoB;AAG1B,IAAM,wBAAwB;AAG9B,IAAM,uBAAuB;AAE7B,IAAM,YAAY;AAElB,IAAI,eAAe;AAEnB,SAAS,eAAe,SAA4B;AAClD,SAAO,QAAQ,OAAO,CAAC,QAAuB,OAAO,QAAQ,QAAQ,EAAE,KAAK,GAAG;AACjF;AAEA,SAAS,sBAAsB,SAAqE;AAClG,QAAM,UAAU,sBAAsB,KAAK,OAAO;AAClD,MAAI,QAAS,QAAO,EAAE,UAAU,QAAQ,CAAC,GAAG,KAAK,KAAK,MAAM,QAAQ,QAAQ,CAAC,GAAG,KAAK,KAAK,KAAK;AAE/F,QAAM,SAAS,qBAAqB,KAAK,OAAO;AAChD,MAAI,OAAQ,QAAO,EAAE,QAAQ,OAAO,CAAC,GAAG,KAAK,KAAK,MAAM,UAAU,OAAO,CAAC,GAAG,KAAK,KAAK,KAAK;AAE5F,SAAO,EAAE,UAAU,MAAM,QAAQ,KAAK;AACxC;AAEA,SAAS,oBAAoB,SAAwC;AACnE,QAAM,QAA+B,CAAC;AACtC,aAAW,SAAS,QAAQ,SAAS,SAAS,GAAG;AAC/C,UAAM,OAAO,MAAM,CAAC;AACpB,QAAI,KAAM,OAAM,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;AAAA,EACrD;AACA,SAAO;AACT;AAYO,SAAS,gBAAgB,SAA2C;AACzE,MAAI,OAAO,QAAQ,CAAC,MAAM,SAAU,QAAO;AAE3C,QAAM,UAAU,eAAe,OAAO,EAAE,QAAQ,YAAY,EAAE;AAC9D,MAAI,0BAA0B,KAAK,OAAO,EAAG,QAAO;AAEpD,MAAI;AACJ,MAAI,cAAc,KAAK,OAAO,EAAG,QAAO;AAAA,WAC/B,cAAc,KAAK,OAAO,EAAG,QAAO;AAAA,WACpC,kBAAkB,KAAK,OAAO,EAAG,QAAO;AAAA,WACxC,kBAAkB,KAAK,OAAO,EAAG,QAAO;AAAA,MAC5C,QAAO;AAEZ,QAAM,EAAE,UAAU,OAAO,IAAI,sBAAsB,OAAO;AAC1D,QAAM,iBAAiB,oBAAoB,OAAO;AAKlD,QAAM,WAAW,QAAQ,MAAM,CAAC,EAAE,KAAK,CAAC,QAAqB,OAAO,SAAS,eAAe,eAAe,IAAI,KAAK;AAEpH,SAAO,EAAE,MAAM,YAAY,SAAS,UAAU,QAAQ,gBAAgB,qBAAqB,MAAM,SAAS;AAC5G;AAEO,IAAM,aAAsB;AAAA,EACjC,MAAM;AAAA,EACN,QAAQ,KAAe,SAA0B;AAC/C,UAAM,WAAW,QAAQ,KAAK,KAAK,OAAO;AAE1C,YAAQ,OAAO,IAAI,SAAoB;AACrC,YAAM,SAAS,gBAAgB,IAAI;AACnC,UAAI,QAAQ;AACV,YAAI,KAAK;AAAA,UACP,IAAI,OAAO,EAAE,YAAY;AAAA,UACzB,WAAW,KAAK,IAAI;AAAA,UACpB,WAAW;AAAA,UACX,GAAG;AAAA,QACL,CAAC;AACD,YAAI,SAAS,gBAAiB;AAAA,MAChC;AACA,eAAS,GAAG,IAAI;AAAA,IAClB;AAEA,WAAO,MAAM;AACX,cAAQ,OAAO;AAAA,IACjB;AAAA,EACF;AACF;;;ADhHA,IAAI,YAAY;AAGT,SAAS,KAAK,SAAgC;AACnD,MAAI,OAAO,WAAW,eAAe,UAAW;AAChD,cAAY;AACZ,aAAW,QAAQ,uCAAY,OAAO;AACtC,+CAAa,qCAAU;AACzB;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,18 @@
+import { HydrationIssue, Adapter, AdapterOptions } from '@ifds-oss/hydration-lens-core';
+
+type ParsedVueIssue = Omit<HydrationIssue, "id" | "timestamp" | "framework">;
+/**
+ * Returns null both for non-hydration console.warn calls AND for the follow-up
+ * "Hydration completed but contains mismatches." message — the latter just confirms
+ * a mismatch already reported via one of the three shapes above, so it must not
+ * be double-counted as a second issue. (In some Vue versions this follow-up is logged
+ * via console.error instead, in which case this adapter — which only patches
+ * console.warn — never sees it at all, which is equally safe: no double-count risk.)
+ */
+declare function parseVueWarning(rawArgs: unknown[]): ParsedVueIssue | null;
+declare const vueAdapter: Adapter;
+
+/** Call once on app mount. Dev-only, no-ops outside the browser and on double-init. */
+declare function init(options?: AdapterOptions): void;
+
+export { init, parseVueWarning, vueAdapter };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { HydrationIssue, Adapter, AdapterOptions } from '@ifds-oss/hydration-lens-core';
+
+type ParsedVueIssue = Omit<HydrationIssue, "id" | "timestamp" | "framework">;
+/**
+ * Returns null both for non-hydration console.warn calls AND for the follow-up
+ * "Hydration completed but contains mismatches." message — the latter just confirms
+ * a mismatch already reported via one of the three shapes above, so it must not
+ * be double-counted as a second issue. (In some Vue versions this follow-up is logged
+ * via console.error instead, in which case this adapter — which only patches
+ * console.warn — never sees it at all, which is equally safe: no double-count risk.)
+ */
+declare function parseVueWarning(rawArgs: unknown[]): ParsedVueIssue | null;
+declare const vueAdapter: Adapter;
+
+/** Call once on app mount. Dev-only, no-ops outside the browser and on double-init. */
+declare function init(options?: AdapterOptions): void;
+
+export { init, parseVueWarning, vueAdapter };

package/dist/index.js

@@ -0,0 +1,84 @@
+// src/index.ts
+import { defaultBus, mountOverlay } from "@ifds-oss/hydration-lens-core";
+
+// src/adapter.ts
+var VUE_PREFIX = /^\[Vue warn\]:\s*/;
+var TEXT_MISMATCH = /Hydration text (?:content )?mismatch/i;
+var NODE_MISMATCH = /Hydration node mismatch/i;
+var CHILDREN_MISMATCH = /Hydration children mismatch/i;
+var COMPLETED_WITH_MISMATCHES = /Hydration completed but contains mismatches/i;
+var HYDRATION_KEYWORD = /hydrat/i;
+var SERVER_CLIENT_CURRENT = /rendered on server:\s*([\s\S]*?)\s*\n\s*-\s*expected on client:\s*([\s\S]*?)(?:\n|$)/i;
+var SERVER_CLIENT_LEGACY = /Client:\s*"?([\s\S]*?)"?\s*\n?\s*-\s*Server:\s*"?([\s\S]*?)"?(?:\n|$)/i;
+var TRAIL_TAG = /at <([A-Za-z0-9_.$]+)/g;
+var issueCounter = 0;
+function joinStringArgs(rawArgs) {
+  return rawArgs.filter((arg) => typeof arg === "string").join(" ");
+}
+function extractExpectedActual(message) {
+  const current = SERVER_CLIENT_CURRENT.exec(message);
+  if (current) return { expected: current[1]?.trim() ?? null, actual: current[2]?.trim() ?? null };
+  const legacy = SERVER_CLIENT_LEGACY.exec(message);
+  if (legacy) return { actual: legacy[1]?.trim() ?? null, expected: legacy[2]?.trim() ?? null };
+  return { expected: null, actual: null };
+}
+function parseComponentTrail(message) {
+  const trail = [];
+  for (const match of message.matchAll(TRAIL_TAG)) {
+    const name = match[1];
+    if (name) trail.push({ name, raw: match[0].trim() });
+  }
+  return trail;
+}
+function parseVueWarning(rawArgs) {
+  if (typeof rawArgs[0] !== "string") return null;
+  const message = joinStringArgs(rawArgs).replace(VUE_PREFIX, "");
+  if (COMPLETED_WITH_MISMATCHES.test(message)) return null;
+  let kind;
+  if (TEXT_MISMATCH.test(message)) kind = "text";
+  else if (NODE_MISMATCH.test(message)) kind = "node";
+  else if (CHILDREN_MISMATCH.test(message)) kind = "children";
+  else if (HYDRATION_KEYWORD.test(message)) kind = "unknown";
+  else return null;
+  const { expected, actual } = extractExpectedActual(message);
+  const componentTrail = parseComponentTrail(message);
+  const liveNode = rawArgs.slice(1).find((arg) => typeof Node !== "undefined" && arg instanceof Node) ?? null;
+  return { kind, rawMessage: message, expected, actual, componentTrail, targetSelectorGuess: null, liveNode };
+}
+var vueAdapter = {
+  name: "vue",
+  install(bus, options) {
+    const original = console.warn.bind(console);
+    console.warn = (...args) => {
+      const parsed = parseVueWarning(args);
+      if (parsed) {
+        bus.emit({
+          id: `vue-${++issueCounter}`,
+          timestamp: Date.now(),
+          framework: "vue",
+          ...parsed
+        });
+        if (options?.suppressConsole) return;
+      }
+      original(...args);
+    };
+    return () => {
+      console.warn = original;
+    };
+  }
+};
+
+// src/index.ts
+var installed = false;
+function init(options) {
+  if (typeof window === "undefined" || installed) return;
+  installed = true;
+  vueAdapter.install(defaultBus, options);
+  mountOverlay(defaultBus);
+}
+export {
+  init,
+  parseVueWarning,
+  vueAdapter
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/adapter.ts"],"sourcesContent":["import type { AdapterOptions } from \"@ifds-oss/hydration-lens-core\";\nimport { defaultBus, mountOverlay } from \"@ifds-oss/hydration-lens-core\";\nimport { vueAdapter } from \"./adapter.js\";\n\nlet installed = false;\n\n/** Call once on app mount. Dev-only, no-ops outside the browser and on double-init. */\nexport function init(options?: AdapterOptions): void {\n  if (typeof window === \"undefined\" || installed) return;\n  installed = true;\n  vueAdapter.install(defaultBus, options);\n  mountOverlay(defaultBus);\n}\n\nexport { vueAdapter };\nexport { parseVueWarning } from \"./adapter.js\";\n","import type { Adapter, AdapterOptions, ComponentTrailEntry, HydrationIssue, IssueBus, IssueKind } from \"@ifds-oss/hydration-lens-core\";\n\n/**\n * Vue's warn() does NOT hand console.warn a single pre-interpolated string — a real\n * capture from Vue 3.5 / Nuxt 3 shows a call like:\n *\n *   console.warn(\n *     \"[Vue warn]: Hydration text content mismatch on\",\n *     pElement,                                    // the live DOM node\n *     \"\\n  - rendered on server: abc\\n  - expected on client: xyz\",\n *     \"\\n\", \" at <Index\", \"onVnodeUnmounted=fn<...>\", ..., \" at <RouteProvider\", ...\n *   )\n *\n * i.e. the message, the live node, and the component trace are all separate positional\n * args (mixing strings with the live vnode/DOM node), similar in spirit to how React\n * spreads its console.error args — just split differently. We join every *string* arg\n * (skipping the live node / object args) to reconstruct one message to pattern-match\n * and to extract the component trace from.\n */\nconst VUE_PREFIX = /^\\[Vue warn\\]:\\s*/;\nconst TEXT_MISMATCH = /Hydration text (?:content )?mismatch/i;\nconst NODE_MISMATCH = /Hydration node mismatch/i;\nconst CHILDREN_MISMATCH = /Hydration children mismatch/i;\nconst COMPLETED_WITH_MISMATCHES = /Hydration completed but contains mismatches/i;\nconst HYDRATION_KEYWORD = /hydrat/i;\n\n// Real (Vue 3.5) wording: \"- rendered on server: X\" / \"- expected on client: Y\".\nconst SERVER_CLIENT_CURRENT = /rendered on server:\\s*([\\s\\S]*?)\\s*\\n\\s*-\\s*expected on client:\\s*([\\s\\S]*?)(?:\\n|$)/i;\n// Older/documented wording, kept as a fallback in case another Vue version uses it:\n// \"- Client: \"X\" - Server: \"Y\"\".\nconst SERVER_CLIENT_LEGACY = /Client:\\s*\"?([\\s\\S]*?)\"?\\s*\\n?\\s*-\\s*Server:\\s*\"?([\\s\\S]*?)\"?(?:\\n|$)/i;\n\nconst TRAIL_TAG = /at <([A-Za-z0-9_.$]+)/g;\n\nlet issueCounter = 0;\n\nfunction joinStringArgs(rawArgs: unknown[]): string {\n  return rawArgs.filter((arg): arg is string => typeof arg === \"string\").join(\" \");\n}\n\nfunction extractExpectedActual(message: string): { expected: string | null; actual: string | null } {\n  const current = SERVER_CLIENT_CURRENT.exec(message);\n  if (current) return { expected: current[1]?.trim() ?? null, actual: current[2]?.trim() ?? null };\n\n  const legacy = SERVER_CLIENT_LEGACY.exec(message);\n  if (legacy) return { actual: legacy[1]?.trim() ?? null, expected: legacy[2]?.trim() ?? null };\n\n  return { expected: null, actual: null };\n}\n\nfunction parseComponentTrail(message: string): ComponentTrailEntry[] {\n  const trail: ComponentTrailEntry[] = [];\n  for (const match of message.matchAll(TRAIL_TAG)) {\n    const name = match[1];\n    if (name) trail.push({ name, raw: match[0].trim() });\n  }\n  return trail;\n}\n\nexport type ParsedVueIssue = Omit<HydrationIssue, \"id\" | \"timestamp\" | \"framework\">;\n\n/**\n * Returns null both for non-hydration console.warn calls AND for the follow-up\n * \"Hydration completed but contains mismatches.\" message — the latter just confirms\n * a mismatch already reported via one of the three shapes above, so it must not\n * be double-counted as a second issue. (In some Vue versions this follow-up is logged\n * via console.error instead, in which case this adapter — which only patches\n * console.warn — never sees it at all, which is equally safe: no double-count risk.)\n */\nexport function parseVueWarning(rawArgs: unknown[]): ParsedVueIssue | null {\n  if (typeof rawArgs[0] !== \"string\") return null;\n\n  const message = joinStringArgs(rawArgs).replace(VUE_PREFIX, \"\");\n  if (COMPLETED_WITH_MISMATCHES.test(message)) return null;\n\n  let kind: IssueKind;\n  if (TEXT_MISMATCH.test(message)) kind = \"text\";\n  else if (NODE_MISMATCH.test(message)) kind = \"node\";\n  else if (CHILDREN_MISMATCH.test(message)) kind = \"children\";\n  else if (HYDRATION_KEYWORD.test(message)) kind = \"unknown\";\n  else return null;\n\n  const { expected, actual } = extractExpectedActual(message);\n  const componentTrail = parseComponentTrail(message);\n\n  // Vue hands the live client vnode / server DOM node as a separate object argument\n  // (not string-interpolated) — capture it for a free 'exact' locate, bypassing the\n  // TreeWalker heuristic entirely for this issue.\n  const liveNode = rawArgs.slice(1).find((arg): arg is Node => typeof Node !== \"undefined\" && arg instanceof Node) ?? null;\n\n  return { kind, rawMessage: message, expected, actual, componentTrail, targetSelectorGuess: null, liveNode };\n}\n\nexport const vueAdapter: Adapter = {\n  name: \"vue\",\n  install(bus: IssueBus, options?: AdapterOptions) {\n    const original = console.warn.bind(console);\n\n    console.warn = (...args: unknown[]) => {\n      const parsed = parseVueWarning(args);\n      if (parsed) {\n        bus.emit({\n          id: `vue-${++issueCounter}`,\n          timestamp: Date.now(),\n          framework: \"vue\",\n          ...parsed,\n        });\n        if (options?.suppressConsole) return; // swallow only warnings we recognized as hydration issues\n      }\n      original(...args);\n    };\n\n    return () => {\n      console.warn = original;\n    };\n  },\n};\n"],"mappings":";AACA,SAAS,YAAY,oBAAoB;;;ACkBzC,IAAM,aAAa;AACnB,IAAM,gBAAgB;AACtB,IAAM,gBAAgB;AACtB,IAAM,oBAAoB;AAC1B,IAAM,4BAA4B;AAClC,IAAM,oBAAoB;AAG1B,IAAM,wBAAwB;AAG9B,IAAM,uBAAuB;AAE7B,IAAM,YAAY;AAElB,IAAI,eAAe;AAEnB,SAAS,eAAe,SAA4B;AAClD,SAAO,QAAQ,OAAO,CAAC,QAAuB,OAAO,QAAQ,QAAQ,EAAE,KAAK,GAAG;AACjF;AAEA,SAAS,sBAAsB,SAAqE;AAClG,QAAM,UAAU,sBAAsB,KAAK,OAAO;AAClD,MAAI,QAAS,QAAO,EAAE,UAAU,QAAQ,CAAC,GAAG,KAAK,KAAK,MAAM,QAAQ,QAAQ,CAAC,GAAG,KAAK,KAAK,KAAK;AAE/F,QAAM,SAAS,qBAAqB,KAAK,OAAO;AAChD,MAAI,OAAQ,QAAO,EAAE,QAAQ,OAAO,CAAC,GAAG,KAAK,KAAK,MAAM,UAAU,OAAO,CAAC,GAAG,KAAK,KAAK,KAAK;AAE5F,SAAO,EAAE,UAAU,MAAM,QAAQ,KAAK;AACxC;AAEA,SAAS,oBAAoB,SAAwC;AACnE,QAAM,QAA+B,CAAC;AACtC,aAAW,SAAS,QAAQ,SAAS,SAAS,GAAG;AAC/C,UAAM,OAAO,MAAM,CAAC;AACpB,QAAI,KAAM,OAAM,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;AAAA,EACrD;AACA,SAAO;AACT;AAYO,SAAS,gBAAgB,SAA2C;AACzE,MAAI,OAAO,QAAQ,CAAC,MAAM,SAAU,QAAO;AAE3C,QAAM,UAAU,eAAe,OAAO,EAAE,QAAQ,YAAY,EAAE;AAC9D,MAAI,0BAA0B,KAAK,OAAO,EAAG,QAAO;AAEpD,MAAI;AACJ,MAAI,cAAc,KAAK,OAAO,EAAG,QAAO;AAAA,WAC/B,cAAc,KAAK,OAAO,EAAG,QAAO;AAAA,WACpC,kBAAkB,KAAK,OAAO,EAAG,QAAO;AAAA,WACxC,kBAAkB,KAAK,OAAO,EAAG,QAAO;AAAA,MAC5C,QAAO;AAEZ,QAAM,EAAE,UAAU,OAAO,IAAI,sBAAsB,OAAO;AAC1D,QAAM,iBAAiB,oBAAoB,OAAO;AAKlD,QAAM,WAAW,QAAQ,MAAM,CAAC,EAAE,KAAK,CAAC,QAAqB,OAAO,SAAS,eAAe,eAAe,IAAI,KAAK;AAEpH,SAAO,EAAE,MAAM,YAAY,SAAS,UAAU,QAAQ,gBAAgB,qBAAqB,MAAM,SAAS;AAC5G;AAEO,IAAM,aAAsB;AAAA,EACjC,MAAM;AAAA,EACN,QAAQ,KAAe,SAA0B;AAC/C,UAAM,WAAW,QAAQ,KAAK,KAAK,OAAO;AAE1C,YAAQ,OAAO,IAAI,SAAoB;AACrC,YAAM,SAAS,gBAAgB,IAAI;AACnC,UAAI,QAAQ;AACV,YAAI,KAAK;AAAA,UACP,IAAI,OAAO,EAAE,YAAY;AAAA,UACzB,WAAW,KAAK,IAAI;AAAA,UACpB,WAAW;AAAA,UACX,GAAG;AAAA,QACL,CAAC;AACD,YAAI,SAAS,gBAAiB;AAAA,MAChC;AACA,eAAS,GAAG,IAAI;AAAA,IAClB;AAEA,WAAO,MAAM;AACX,cAAQ,OAAO;AAAA,IACjB;AAAA,EACF;AACF;;;ADhHA,IAAI,YAAY;AAGT,SAAS,KAAK,SAAgC;AACnD,MAAI,OAAO,WAAW,eAAe,UAAW;AAChD,cAAY;AACZ,aAAW,QAAQ,YAAY,OAAO;AACtC,eAAa,UAAU;AACzB;","names":[]}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ifds/hydration-lens-vue",
+  "version": "0.1.0",
+  "description": "Vue/Nuxt adapter for hydration-lens: patches console.warn and parses Vue hydration warnings.",
+  "keywords": ["vue", "nuxt", "hydration", "hydration-mismatch", "ssr", "developer-tools"],
+  "license": "MIT",
+  "repository": { "type": "git", "url": "git+https://github.com/IFDS-OSS/hydration-lens.git", "directory": "packages/vue" },
+  "homepage": "https://github.com/IFDS-OSS/hydration-lens#readme",
+  "bugs": { "url": "https://github.com/IFDS-OSS/hydration-lens/issues" },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": { "types": "./dist/index.d.ts", "default": "./dist/index.js" },
+      "require": { "types": "./dist/index.d.cts", "default": "./dist/index.cjs" }
+    }
+  },
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": { "optional": true }
+  },
+  "dependencies": {
+    "@ifds/hydration-lens-core": "workspace:*"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}