@ifds/hydration-lens-react 0.1.0

package/README.md

@@ -0,0 +1,33 @@
+# @ifds/hydration-lens-react
+
+React and Next.js adapter for hydration-lens. It recognizes React hydration warnings and runtime errors, locates the affected DOM element when possible, and displays the shared hydration-lens overlay.
+
+## Install
+
+```bash
+npm install --save-dev @ifds/hydration-lens-react
+```
+
+## Usage
+
+Call `init()` from a client component rendered near the beginning of your root layout. Do not put it in `useEffect`: React 19 can report hydration errors during the initial synchronous hydrate pass.
+
+```tsx
+// app/hydration-lens-init.tsx
+"use client";
+
+import { init } from "@ifds/hydration-lens-react";
+
+export function HydrationLensInit() {
+  if (process.env.NODE_ENV !== "production") init();
+  return null;
+}
+```
+
+Render `<HydrationLensInit />` as the first child in your root layout. `init(options?)` is safe to call more than once and is a no-op outside the browser. Pass `{ suppressConsole: true }` to suppress recognized framework logging.
+
+Supports React 18 and 19 and Next.js applications. This is a diagnostic tool; it does not fix or change application output.
+
+## License
+
+MIT — see the repository [LICENSE](../../LICENSE).

package/dist/index.cjs

@@ -0,0 +1,159 @@
+"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,
+  parseReactRuntimeError: () => parseReactRuntimeError,
+  parseReactWarning: () => parseReactWarning,
+  reactAdapter: () => reactAdapter
+});
+module.exports = __toCommonJS(index_exports);
+var import_hydration_lens_core = require("@ifds-oss/hydration-lens-core");
+
+// src/adapter.ts
+var TEXT_MISMATCH = /Text content did not match\. Server: "?%s"? Client: "?%s"?/;
+var TAG_MISMATCH = /Expected server HTML to contain a matching <%s> in <%s>/;
+var HYDRATION_FAILED = /Hydration failed because/i;
+var SUSPENSE_HYDRATION = /error occurred during hydration/i;
+var HYDRATION_KEYWORD = /hydrat/i;
+var STACK_LINE = /^\s*(?:in|at)\s+([A-Za-z0-9_.$]+)/;
+var DIFF_LINE = /^([+-])\s+(.*)$/gm;
+var TREE_TAG_LINE = /^\s*<([A-Za-z][\w.$]*)/gm;
+var issueCounter = 0;
+function formatMessage(format, values) {
+  let i = 0;
+  return format.replace(/%s/g, () => i < values.length ? values[i++] ?? "%s" : "%s");
+}
+function parseComponentTrail(stack) {
+  const trail = [];
+  for (const rawLine of stack.split("\n")) {
+    const line = rawLine.trim();
+    if (!line) continue;
+    const match = STACK_LINE.exec(line);
+    if (match?.[1]) trail.push({ name: match[1], raw: line });
+  }
+  return trail;
+}
+function findComponentStack(args) {
+  for (let i = args.length - 1; i >= 0; i--) {
+    const arg = args[i];
+    if (arg !== void 0 && /\n\s*(?:in|at)\s+\S/.test(arg)) return arg;
+  }
+  return null;
+}
+function parseReactWarning(rawArgs) {
+  const format = typeof rawArgs[0] === "string" ? rawArgs[0] : "";
+  if (!format) return null;
+  let kind;
+  let expected = null;
+  let actual = null;
+  const stringArgs = rawArgs.map((arg) => typeof arg === "string" ? arg : String(arg));
+  const values = stringArgs.slice(1);
+  if (TEXT_MISMATCH.test(format)) {
+    kind = "text";
+    expected = values[0] ?? null;
+    actual = values[1] ?? null;
+  } else if (TAG_MISMATCH.test(format)) {
+    kind = "node";
+    actual = values[0] ?? null;
+  } else if (HYDRATION_FAILED.test(format) || SUSPENSE_HYDRATION.test(format)) {
+    kind = "unknown";
+  } else if (HYDRATION_KEYWORD.test(format)) {
+    kind = "unknown";
+  } else {
+    return null;
+  }
+  const stack = findComponentStack(stringArgs);
+  const componentTrail = stack ? parseComponentTrail(stack) : [];
+  const rawMessage = formatMessage(format, values);
+  return { kind, rawMessage, expected, actual, componentTrail, targetSelectorGuess: null };
+}
+function parseReactRuntimeError(error) {
+  const message = error.message;
+  if (!HYDRATION_KEYWORD.test(message)) return null;
+  let expected = null;
+  let actual = null;
+  for (const match of message.matchAll(DIFF_LINE)) {
+    const [, sign, value] = match;
+    if (sign === "+") actual = (value ?? "").trim();
+    else if (sign === "-") expected = (value ?? "").trim();
+  }
+  const kind = /text/i.test(message) ? "text" : "unknown";
+  const componentTrail = [];
+  for (const match of message.matchAll(TREE_TAG_LINE)) {
+    const name = match[1];
+    if (name) componentTrail.push({ name, raw: match[0].trim() });
+  }
+  return { kind, rawMessage: message, expected, actual, componentTrail, targetSelectorGuess: null };
+}
+var reactAdapter = {
+  name: "react",
+  install(bus, options) {
+    const original = console.error.bind(console);
+    console.error = (...args) => {
+      const parsed = parseReactWarning(args);
+      if (parsed) {
+        bus.emit({
+          id: `react-${++issueCounter}`,
+          timestamp: Date.now(),
+          framework: "react",
+          ...parsed
+        });
+        if (options?.suppressConsole) return;
+      }
+      original(...args);
+    };
+    const errorListener = (event) => {
+      if (!(event.error instanceof Error)) return;
+      const parsed = parseReactRuntimeError(event.error);
+      if (!parsed) return;
+      bus.emit({
+        id: `react-${++issueCounter}`,
+        timestamp: Date.now(),
+        framework: "react",
+        ...parsed
+      });
+      if (options?.suppressConsole) event.preventDefault();
+    };
+    if (typeof window !== "undefined") window.addEventListener("error", errorListener);
+    return () => {
+      console.error = original;
+      if (typeof window !== "undefined") window.removeEventListener("error", errorListener);
+    };
+  }
+};
+
+// src/index.ts
+var installed = false;
+function init(options) {
+  if (typeof window === "undefined" || installed) return;
+  installed = true;
+  reactAdapter.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,
+  parseReactRuntimeError,
+  parseReactWarning,
+  reactAdapter
+});
+//# 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 { reactAdapter } from \"./adapter.js\";\n\nlet installed = false;\n\n/** Call once in a root layout / _app. 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  reactAdapter.install(defaultBus, options);\n  mountOverlay(defaultBus);\n}\n\nexport { reactAdapter };\nexport { parseReactWarning, parseReactRuntimeError } from \"./adapter.js\";\n","import type { Adapter, AdapterOptions, ComponentTrailEntry, HydrationIssue, IssueBus, IssueKind } from \"@ifds-oss/hydration-lens-core\";\n\n/**\n * React's console.error hydration warnings are called with an un-interpolated format\n * string plus positional args (the browser substitutes %s only for display), so these\n * regexes match against the raw format string, not an already-substituted message.\n *\n * Exact wording has shifted across React 18/19 point releases (e.g. optional \"Warning: \"\n * prefix, quoted vs unquoted %s). These are intentionally tolerant of that drift; validate\n * against a live repro before adding new shapes.\n */\nconst TEXT_MISMATCH = /Text content did not match\\. Server: \"?%s\"? Client: \"?%s\"?/;\nconst TAG_MISMATCH = /Expected server HTML to contain a matching <%s> in <%s>/;\nconst HYDRATION_FAILED = /Hydration failed because/i;\nconst SUSPENSE_HYDRATION = /error occurred during hydration/i;\nconst HYDRATION_KEYWORD = /hydrat/i;\n\nconst STACK_LINE = /^\\s*(?:in|at)\\s+([A-Za-z0-9_.$]+)/;\n\n/**\n * React 19 reports most hydration mismatches as a genuinely *thrown* Error (surfaced to\n * the browser as an uncaught exception), not a console.error(...) call — so the regexes\n * above never see it at all. The message body is a JSX-tree-shaped diff instead of the\n * old \"Server: X Client: Y\" sentence, e.g.:\n *\n *   Hydration failed because the server rendered text didn't match the client. ...\n *     <Home>\n *       <Mismatch>\n *         <p id=\"mismatch\">\n *   +       client-value\n *   -       server-value\n *\n * `+` is the client-rendered value, `-` is the server-rendered one (standard diff convention).\n */\nconst DIFF_LINE = /^([+-])\\s+(.*)$/gm;\nconst TREE_TAG_LINE = /^\\s*<([A-Za-z][\\w.$]*)/gm;\n\nlet issueCounter = 0;\n\nfunction formatMessage(format: string, values: string[]): string {\n  let i = 0;\n  return format.replace(/%s/g, () => (i < values.length ? (values[i++] ?? \"%s\") : \"%s\"));\n}\n\nfunction parseComponentTrail(stack: string): ComponentTrailEntry[] {\n  const trail: ComponentTrailEntry[] = [];\n  for (const rawLine of stack.split(\"\\n\")) {\n    const line = rawLine.trim();\n    if (!line) continue;\n    const match = STACK_LINE.exec(line);\n    if (match?.[1]) trail.push({ name: match[1], raw: line });\n  }\n  return trail;\n}\n\nfunction findComponentStack(args: string[]): string | null {\n  for (let i = args.length - 1; i >= 0; i--) {\n    const arg = args[i];\n    if (arg !== undefined && /\\n\\s*(?:in|at)\\s+\\S/.test(arg)) return arg;\n  }\n  return null;\n}\n\nexport type ParsedReactIssue = Omit<HydrationIssue, \"id\" | \"timestamp\" | \"framework\">;\n\n/** Returns null when the console.error call isn't a hydration warning at all. */\nexport function parseReactWarning(rawArgs: unknown[]): ParsedReactIssue | null {\n  const format = typeof rawArgs[0] === \"string\" ? rawArgs[0] : \"\";\n  if (!format) return null;\n\n  let kind: IssueKind;\n  let expected: string | null = null;\n  let actual: string | null = null;\n  const stringArgs = rawArgs.map((arg) => (typeof arg === \"string\" ? arg : String(arg)));\n  const values = stringArgs.slice(1);\n\n  if (TEXT_MISMATCH.test(format)) {\n    kind = \"text\";\n    expected = values[0] ?? null;\n    actual = values[1] ?? null;\n  } else if (TAG_MISMATCH.test(format)) {\n    kind = \"node\";\n    actual = values[0] ?? null;\n  } else if (HYDRATION_FAILED.test(format) || SUSPENSE_HYDRATION.test(format)) {\n    kind = \"unknown\";\n  } else if (HYDRATION_KEYWORD.test(format)) {\n    kind = \"unknown\";\n  } else {\n    return null;\n  }\n\n  const stack = findComponentStack(stringArgs);\n  const componentTrail = stack ? parseComponentTrail(stack) : [];\n  const rawMessage = formatMessage(format, values);\n\n  return { kind, rawMessage, expected, actual, componentTrail, targetSelectorGuess: null };\n}\n\n/** Parses the thrown-Error shape described above. Returns null if it isn't hydration-related. */\nexport function parseReactRuntimeError(error: Error): ParsedReactIssue | null {\n  const message = error.message;\n  if (!HYDRATION_KEYWORD.test(message)) return null;\n\n  let expected: string | null = null;\n  let actual: string | null = null;\n  for (const match of message.matchAll(DIFF_LINE)) {\n    const [, sign, value] = match;\n    if (sign === \"+\") actual = (value ?? \"\").trim();\n    else if (sign === \"-\") expected = (value ?? \"\").trim();\n  }\n\n  const kind: IssueKind = /text/i.test(message) ? \"text\" : \"unknown\";\n\n  const componentTrail: ComponentTrailEntry[] = [];\n  for (const match of message.matchAll(TREE_TAG_LINE)) {\n    const name = match[1];\n    if (name) componentTrail.push({ name, raw: match[0].trim() });\n  }\n\n  return { kind, rawMessage: message, expected, actual, componentTrail, targetSelectorGuess: null };\n}\n\nexport const reactAdapter: Adapter = {\n  name: \"react\",\n  install(bus: IssueBus, options?: AdapterOptions) {\n    const original = console.error.bind(console);\n\n    console.error = (...args: unknown[]) => {\n      const parsed = parseReactWarning(args);\n      if (parsed) {\n        bus.emit({\n          id: `react-${++issueCounter}`,\n          timestamp: Date.now(),\n          framework: \"react\",\n          ...parsed,\n        });\n        if (options?.suppressConsole) return; // swallow only warnings we recognized as hydration issues\n      }\n      original(...args);\n    };\n\n    const errorListener = (event: ErrorEvent) => {\n      if (!(event.error instanceof Error)) return;\n      const parsed = parseReactRuntimeError(event.error);\n      if (!parsed) return;\n      bus.emit({\n        id: `react-${++issueCounter}`,\n        timestamp: Date.now(),\n        framework: \"react\",\n        ...parsed,\n      });\n      if (options?.suppressConsole) event.preventDefault(); // suppress only the default uncaught-error logging\n    };\n    if (typeof window !== \"undefined\") window.addEventListener(\"error\", errorListener);\n\n    return () => {\n      console.error = original;\n      if (typeof window !== \"undefined\") window.removeEventListener(\"error\", errorListener);\n    };\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,13 @@
+import { HydrationIssue, Adapter, AdapterOptions } from '@ifds-oss/hydration-lens-core';
+
+type ParsedReactIssue = Omit<HydrationIssue, "id" | "timestamp" | "framework">;
+/** Returns null when the console.error call isn't a hydration warning at all. */
+declare function parseReactWarning(rawArgs: unknown[]): ParsedReactIssue | null;
+/** Parses the thrown-Error shape described above. Returns null if it isn't hydration-related. */
+declare function parseReactRuntimeError(error: Error): ParsedReactIssue | null;
+declare const reactAdapter: Adapter;
+
+/** Call once in a root layout / _app. Dev-only, no-ops outside the browser and on double-init. */
+declare function init(options?: AdapterOptions): void;
+
+export { init, parseReactRuntimeError, parseReactWarning, reactAdapter };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { HydrationIssue, Adapter, AdapterOptions } from '@ifds-oss/hydration-lens-core';
+
+type ParsedReactIssue = Omit<HydrationIssue, "id" | "timestamp" | "framework">;
+/** Returns null when the console.error call isn't a hydration warning at all. */
+declare function parseReactWarning(rawArgs: unknown[]): ParsedReactIssue | null;
+/** Parses the thrown-Error shape described above. Returns null if it isn't hydration-related. */
+declare function parseReactRuntimeError(error: Error): ParsedReactIssue | null;
+declare const reactAdapter: Adapter;
+
+/** Call once in a root layout / _app. Dev-only, no-ops outside the browser and on double-init. */
+declare function init(options?: AdapterOptions): void;
+
+export { init, parseReactRuntimeError, parseReactWarning, reactAdapter };

package/dist/index.js

@@ -0,0 +1,131 @@
+// src/index.ts
+import { defaultBus, mountOverlay } from "@ifds-oss/hydration-lens-core";
+
+// src/adapter.ts
+var TEXT_MISMATCH = /Text content did not match\. Server: "?%s"? Client: "?%s"?/;
+var TAG_MISMATCH = /Expected server HTML to contain a matching <%s> in <%s>/;
+var HYDRATION_FAILED = /Hydration failed because/i;
+var SUSPENSE_HYDRATION = /error occurred during hydration/i;
+var HYDRATION_KEYWORD = /hydrat/i;
+var STACK_LINE = /^\s*(?:in|at)\s+([A-Za-z0-9_.$]+)/;
+var DIFF_LINE = /^([+-])\s+(.*)$/gm;
+var TREE_TAG_LINE = /^\s*<([A-Za-z][\w.$]*)/gm;
+var issueCounter = 0;
+function formatMessage(format, values) {
+  let i = 0;
+  return format.replace(/%s/g, () => i < values.length ? values[i++] ?? "%s" : "%s");
+}
+function parseComponentTrail(stack) {
+  const trail = [];
+  for (const rawLine of stack.split("\n")) {
+    const line = rawLine.trim();
+    if (!line) continue;
+    const match = STACK_LINE.exec(line);
+    if (match?.[1]) trail.push({ name: match[1], raw: line });
+  }
+  return trail;
+}
+function findComponentStack(args) {
+  for (let i = args.length - 1; i >= 0; i--) {
+    const arg = args[i];
+    if (arg !== void 0 && /\n\s*(?:in|at)\s+\S/.test(arg)) return arg;
+  }
+  return null;
+}
+function parseReactWarning(rawArgs) {
+  const format = typeof rawArgs[0] === "string" ? rawArgs[0] : "";
+  if (!format) return null;
+  let kind;
+  let expected = null;
+  let actual = null;
+  const stringArgs = rawArgs.map((arg) => typeof arg === "string" ? arg : String(arg));
+  const values = stringArgs.slice(1);
+  if (TEXT_MISMATCH.test(format)) {
+    kind = "text";
+    expected = values[0] ?? null;
+    actual = values[1] ?? null;
+  } else if (TAG_MISMATCH.test(format)) {
+    kind = "node";
+    actual = values[0] ?? null;
+  } else if (HYDRATION_FAILED.test(format) || SUSPENSE_HYDRATION.test(format)) {
+    kind = "unknown";
+  } else if (HYDRATION_KEYWORD.test(format)) {
+    kind = "unknown";
+  } else {
+    return null;
+  }
+  const stack = findComponentStack(stringArgs);
+  const componentTrail = stack ? parseComponentTrail(stack) : [];
+  const rawMessage = formatMessage(format, values);
+  return { kind, rawMessage, expected, actual, componentTrail, targetSelectorGuess: null };
+}
+function parseReactRuntimeError(error) {
+  const message = error.message;
+  if (!HYDRATION_KEYWORD.test(message)) return null;
+  let expected = null;
+  let actual = null;
+  for (const match of message.matchAll(DIFF_LINE)) {
+    const [, sign, value] = match;
+    if (sign === "+") actual = (value ?? "").trim();
+    else if (sign === "-") expected = (value ?? "").trim();
+  }
+  const kind = /text/i.test(message) ? "text" : "unknown";
+  const componentTrail = [];
+  for (const match of message.matchAll(TREE_TAG_LINE)) {
+    const name = match[1];
+    if (name) componentTrail.push({ name, raw: match[0].trim() });
+  }
+  return { kind, rawMessage: message, expected, actual, componentTrail, targetSelectorGuess: null };
+}
+var reactAdapter = {
+  name: "react",
+  install(bus, options) {
+    const original = console.error.bind(console);
+    console.error = (...args) => {
+      const parsed = parseReactWarning(args);
+      if (parsed) {
+        bus.emit({
+          id: `react-${++issueCounter}`,
+          timestamp: Date.now(),
+          framework: "react",
+          ...parsed
+        });
+        if (options?.suppressConsole) return;
+      }
+      original(...args);
+    };
+    const errorListener = (event) => {
+      if (!(event.error instanceof Error)) return;
+      const parsed = parseReactRuntimeError(event.error);
+      if (!parsed) return;
+      bus.emit({
+        id: `react-${++issueCounter}`,
+        timestamp: Date.now(),
+        framework: "react",
+        ...parsed
+      });
+      if (options?.suppressConsole) event.preventDefault();
+    };
+    if (typeof window !== "undefined") window.addEventListener("error", errorListener);
+    return () => {
+      console.error = original;
+      if (typeof window !== "undefined") window.removeEventListener("error", errorListener);
+    };
+  }
+};
+
+// src/index.ts
+var installed = false;
+function init(options) {
+  if (typeof window === "undefined" || installed) return;
+  installed = true;
+  reactAdapter.install(defaultBus, options);
+  mountOverlay(defaultBus);
+}
+export {
+  init,
+  parseReactRuntimeError,
+  parseReactWarning,
+  reactAdapter
+};
+//# 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 { reactAdapter } from \"./adapter.js\";\n\nlet installed = false;\n\n/** Call once in a root layout / _app. 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  reactAdapter.install(defaultBus, options);\n  mountOverlay(defaultBus);\n}\n\nexport { reactAdapter };\nexport { parseReactWarning, parseReactRuntimeError } from \"./adapter.js\";\n","import type { Adapter, AdapterOptions, ComponentTrailEntry, HydrationIssue, IssueBus, IssueKind } from \"@ifds-oss/hydration-lens-core\";\n\n/**\n * React's console.error hydration warnings are called with an un-interpolated format\n * string plus positional args (the browser substitutes %s only for display), so these\n * regexes match against the raw format string, not an already-substituted message.\n *\n * Exact wording has shifted across React 18/19 point releases (e.g. optional \"Warning: \"\n * prefix, quoted vs unquoted %s). These are intentionally tolerant of that drift; validate\n * against a live repro before adding new shapes.\n */\nconst TEXT_MISMATCH = /Text content did not match\\. Server: \"?%s\"? Client: \"?%s\"?/;\nconst TAG_MISMATCH = /Expected server HTML to contain a matching <%s> in <%s>/;\nconst HYDRATION_FAILED = /Hydration failed because/i;\nconst SUSPENSE_HYDRATION = /error occurred during hydration/i;\nconst HYDRATION_KEYWORD = /hydrat/i;\n\nconst STACK_LINE = /^\\s*(?:in|at)\\s+([A-Za-z0-9_.$]+)/;\n\n/**\n * React 19 reports most hydration mismatches as a genuinely *thrown* Error (surfaced to\n * the browser as an uncaught exception), not a console.error(...) call — so the regexes\n * above never see it at all. The message body is a JSX-tree-shaped diff instead of the\n * old \"Server: X Client: Y\" sentence, e.g.:\n *\n *   Hydration failed because the server rendered text didn't match the client. ...\n *     <Home>\n *       <Mismatch>\n *         <p id=\"mismatch\">\n *   +       client-value\n *   -       server-value\n *\n * `+` is the client-rendered value, `-` is the server-rendered one (standard diff convention).\n */\nconst DIFF_LINE = /^([+-])\\s+(.*)$/gm;\nconst TREE_TAG_LINE = /^\\s*<([A-Za-z][\\w.$]*)/gm;\n\nlet issueCounter = 0;\n\nfunction formatMessage(format: string, values: string[]): string {\n  let i = 0;\n  return format.replace(/%s/g, () => (i < values.length ? (values[i++] ?? \"%s\") : \"%s\"));\n}\n\nfunction parseComponentTrail(stack: string): ComponentTrailEntry[] {\n  const trail: ComponentTrailEntry[] = [];\n  for (const rawLine of stack.split(\"\\n\")) {\n    const line = rawLine.trim();\n    if (!line) continue;\n    const match = STACK_LINE.exec(line);\n    if (match?.[1]) trail.push({ name: match[1], raw: line });\n  }\n  return trail;\n}\n\nfunction findComponentStack(args: string[]): string | null {\n  for (let i = args.length - 1; i >= 0; i--) {\n    const arg = args[i];\n    if (arg !== undefined && /\\n\\s*(?:in|at)\\s+\\S/.test(arg)) return arg;\n  }\n  return null;\n}\n\nexport type ParsedReactIssue = Omit<HydrationIssue, \"id\" | \"timestamp\" | \"framework\">;\n\n/** Returns null when the console.error call isn't a hydration warning at all. */\nexport function parseReactWarning(rawArgs: unknown[]): ParsedReactIssue | null {\n  const format = typeof rawArgs[0] === \"string\" ? rawArgs[0] : \"\";\n  if (!format) return null;\n\n  let kind: IssueKind;\n  let expected: string | null = null;\n  let actual: string | null = null;\n  const stringArgs = rawArgs.map((arg) => (typeof arg === \"string\" ? arg : String(arg)));\n  const values = stringArgs.slice(1);\n\n  if (TEXT_MISMATCH.test(format)) {\n    kind = \"text\";\n    expected = values[0] ?? null;\n    actual = values[1] ?? null;\n  } else if (TAG_MISMATCH.test(format)) {\n    kind = \"node\";\n    actual = values[0] ?? null;\n  } else if (HYDRATION_FAILED.test(format) || SUSPENSE_HYDRATION.test(format)) {\n    kind = \"unknown\";\n  } else if (HYDRATION_KEYWORD.test(format)) {\n    kind = \"unknown\";\n  } else {\n    return null;\n  }\n\n  const stack = findComponentStack(stringArgs);\n  const componentTrail = stack ? parseComponentTrail(stack) : [];\n  const rawMessage = formatMessage(format, values);\n\n  return { kind, rawMessage, expected, actual, componentTrail, targetSelectorGuess: null };\n}\n\n/** Parses the thrown-Error shape described above. Returns null if it isn't hydration-related. */\nexport function parseReactRuntimeError(error: Error): ParsedReactIssue | null {\n  const message = error.message;\n  if (!HYDRATION_KEYWORD.test(message)) return null;\n\n  let expected: string | null = null;\n  let actual: string | null = null;\n  for (const match of message.matchAll(DIFF_LINE)) {\n    const [, sign, value] = match;\n    if (sign === \"+\") actual = (value ?? \"\").trim();\n    else if (sign === \"-\") expected = (value ?? \"\").trim();\n  }\n\n  const kind: IssueKind = /text/i.test(message) ? \"text\" : \"unknown\";\n\n  const componentTrail: ComponentTrailEntry[] = [];\n  for (const match of message.matchAll(TREE_TAG_LINE)) {\n    const name = match[1];\n    if (name) componentTrail.push({ name, raw: match[0].trim() });\n  }\n\n  return { kind, rawMessage: message, expected, actual, componentTrail, targetSelectorGuess: null };\n}\n\nexport const reactAdapter: Adapter = {\n  name: \"react\",\n  install(bus: IssueBus, options?: AdapterOptions) {\n    const original = console.error.bind(console);\n\n    console.error = (...args: unknown[]) => {\n      const parsed = parseReactWarning(args);\n      if (parsed) {\n        bus.emit({\n          id: `react-${++issueCounter}`,\n          timestamp: Date.now(),\n          framework: \"react\",\n          ...parsed,\n        });\n        if (options?.suppressConsole) return; // swallow only warnings we recognized as hydration issues\n      }\n      original(...args);\n    };\n\n    const errorListener = (event: ErrorEvent) => {\n      if (!(event.error instanceof Error)) return;\n      const parsed = parseReactRuntimeError(event.error);\n      if (!parsed) return;\n      bus.emit({\n        id: `react-${++issueCounter}`,\n        timestamp: Date.now(),\n        framework: \"react\",\n        ...parsed,\n      });\n      if (options?.suppressConsole) event.preventDefault(); // suppress only the default uncaught-error logging\n    };\n    if (typeof window !== \"undefined\") window.addEventListener(\"error\", errorListener);\n\n    return () => {\n      console.error = original;\n      if (typeof window !== \"undefined\") window.removeEventListener(\"error\", errorListener);\n    };\n  },\n};\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ifds/hydration-lens-react",
+  "version": "0.1.0",
+  "description": "React/Next.js adapter for hydration-lens: patches console.error and parses React hydration warnings.",
+  "keywords": ["react", "nextjs", "hydration", "hydration-mismatch", "ssr", "developer-tools"],
+  "license": "MIT",
+  "repository": { "type": "git", "url": "git+https://github.com/IFDS-OSS/hydration-lens.git", "directory": "packages/react" },
+  "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": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true }
+  },
+  "dependencies": {
+    "@ifds/hydration-lens-core": "workspace:*"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}