why-hydration 0.1.4 → 0.2.0

package/dist/next/index.cjs

@@ -1,19 +1,19 @@
 'use client';
 'use strict';
 
-var chunk5CBGYE7A_cjs = require('../chunk-5CBGYE7A.cjs');
-require('../chunk-DSO337ME.cjs');
-require('../chunk-OGQEPU7G.cjs');
+var chunkR7IWOK5M_cjs = require('../chunk-R7IWOK5M.cjs');
+require('../chunk-KX6G7I4Y.cjs');
+require('../chunk-DXPTZB3Z.cjs');
 
 
 
 Object.defineProperty(exports, "HydrationInspector", {
   enumerable: true,
-  get: function () { return chunk5CBGYE7A_cjs.HydrationInspector; }
+  get: function () { return chunkR7IWOK5M_cjs.HydrationInspector; }
 });
 Object.defineProperty(exports, "createHydrationInspector", {
   enumerable: true,
-  get: function () { return chunk5CBGYE7A_cjs.createHydrationInspector; }
+  get: function () { return chunkR7IWOK5M_cjs.createHydrationInspector; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/next/index.d.cts

@@ -1,3 +1,3 @@
 export { HydrationInspector, HydrationInspectorHandle, HydrationInspectorProps, InspectorOptions, OverlayOptions, createHydrationInspector } from '../react.cjs';
-export { d as HydrationCauseCategory, H as HydrationReport } from '../types-6wTih14e.cjs';
+export { d as HydrationCauseCategory, H as HydrationReport } from '../types-C14vcpBO.cjs';
 import 'react';

package/dist/next/index.d.ts

@@ -1,3 +1,3 @@
 export { HydrationInspector, HydrationInspectorHandle, HydrationInspectorProps, InspectorOptions, OverlayOptions, createHydrationInspector } from '../react.js';
-export { d as HydrationCauseCategory, H as HydrationReport } from '../types-6wTih14e.js';
+export { d as HydrationCauseCategory, H as HydrationReport } from '../types-C14vcpBO.js';
 import 'react';

package/dist/next/index.js

@@ -1,6 +1,6 @@
 'use client';
-export { HydrationInspector, createHydrationInspector } from '../chunk-3KULWJ7A.js';
-import '../chunk-WQLUD25W.js';
-import '../chunk-FV3PEJQE.js';
+export { HydrationInspector, createHydrationInspector } from '../chunk-MK3TYHKM.js';
+import '../chunk-3OAI2ZHY.js';
+import '../chunk-XIM33ZGB.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/next/script.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkOGQEPU7G_cjs = require('../chunk-OGQEPU7G.cjs');
+var chunkDXPTZB3Z_cjs = require('../chunk-DXPTZB3Z.cjs');
 var React = require('react');
 
 function _interopNamespace(e) {
@@ -25,7 +25,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function HydrationSnapshotScript(props = {}) {
   if (process.env.NODE_ENV === "production") return null;
-  const source = chunkOGQEPU7G_cjs.getSnapshotScriptSource(props.selectors);
+  const source = chunkDXPTZB3Z_cjs.getSnapshotScriptSource(props.selectors);
   return React__namespace.createElement("script", {
     nonce: props.nonce,
     suppressHydrationWarning: true,

package/dist/next/script.js

@@ -1,4 +1,4 @@
-import { getSnapshotScriptSource } from '../chunk-FV3PEJQE.js';
+import { getSnapshotScriptSource } from '../chunk-XIM33ZGB.js';
 import * as React from 'react';
 
 function HydrationSnapshotScript(props = {}) {

package/dist/react.cjs

@@ -1,19 +1,19 @@
 'use client';
 'use strict';
 
-var chunk5CBGYE7A_cjs = require('./chunk-5CBGYE7A.cjs');
-require('./chunk-DSO337ME.cjs');
-require('./chunk-OGQEPU7G.cjs');
+var chunkR7IWOK5M_cjs = require('./chunk-R7IWOK5M.cjs');
+require('./chunk-KX6G7I4Y.cjs');
+require('./chunk-DXPTZB3Z.cjs');
 
 
 
 Object.defineProperty(exports, "HydrationInspector", {
   enumerable: true,
-  get: function () { return chunk5CBGYE7A_cjs.HydrationInspector; }
+  get: function () { return chunkR7IWOK5M_cjs.HydrationInspector; }
 });
 Object.defineProperty(exports, "createHydrationInspector", {
   enumerable: true,
-  get: function () { return chunk5CBGYE7A_cjs.createHydrationInspector; }
+  get: function () { return chunkR7IWOK5M_cjs.createHydrationInspector; }
 });
 //# sourceMappingURL=react.cjs.map
 //# sourceMappingURL=react.cjs.map

package/dist/react.d.cts

@@ -1,9 +1,29 @@
 import * as React from 'react';
-import { H as HydrationReport, C as Classifier } from './types-6wTih14e.cjs';
-export { a as Cause, b as DetectionContext, D as Divergence, d as HydrationCauseCategory } from './types-6wTih14e.cjs';
+import { H as HydrationReport, C as Classifier } from './types-C14vcpBO.cjs';
+export { a as Cause, b as DetectionContext, D as Divergence, d as HydrationCauseCategory } from './types-C14vcpBO.cjs';
+
+/**
+ * Overlay languages.
+ *
+ * The overlay speaks the page's language where it can: an Arabic page gets an
+ * Arabic, right-to-left panel, and everything else gets English. The engine's
+ * own output (`cause.explanation`, the console, `onReport`) is always English;
+ * only this view is translated, by looking causes up by `messageId`.
+ *
+ * Only the overlay imports this module, so it is tree-shaken out of production
+ * builds together with the rest of the dev implementation.
+ */
+
+type OverlayLocale = 'en' | 'ar';
 
 interface OverlayOptions {
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /**
+     * Language of the panel. `'auto'` (the default) follows the page's
+     * `<html lang>`: an Arabic page gets an Arabic, right-to-left panel and
+     * every other page gets English. Pass `'en'` or `'ar'` to pin it.
+     */
+    locale?: 'auto' | OverlayLocale;
 }
 
 interface InspectorOptions {
@@ -35,4 +55,4 @@ interface HydrationInspectorHandle {
 }
 declare function createHydrationInspector(options?: InspectorOptions): HydrationInspectorHandle;
 
-export { Classifier, HydrationInspector, type HydrationInspectorHandle, type HydrationInspectorProps, HydrationReport, type InspectorOptions, type OverlayOptions, createHydrationInspector };
+export { Classifier, HydrationInspector, type HydrationInspectorHandle, type HydrationInspectorProps, HydrationReport, type InspectorOptions, type OverlayLocale, type OverlayOptions, createHydrationInspector };

package/dist/react.d.ts

@@ -1,9 +1,29 @@
 import * as React from 'react';
-import { H as HydrationReport, C as Classifier } from './types-6wTih14e.js';
-export { a as Cause, b as DetectionContext, D as Divergence, d as HydrationCauseCategory } from './types-6wTih14e.js';
+import { H as HydrationReport, C as Classifier } from './types-C14vcpBO.js';
+export { a as Cause, b as DetectionContext, D as Divergence, d as HydrationCauseCategory } from './types-C14vcpBO.js';
+
+/**
+ * Overlay languages.
+ *
+ * The overlay speaks the page's language where it can: an Arabic page gets an
+ * Arabic, right-to-left panel, and everything else gets English. The engine's
+ * own output (`cause.explanation`, the console, `onReport`) is always English;
+ * only this view is translated, by looking causes up by `messageId`.
+ *
+ * Only the overlay imports this module, so it is tree-shaken out of production
+ * builds together with the rest of the dev implementation.
+ */
+
+type OverlayLocale = 'en' | 'ar';
 
 interface OverlayOptions {
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /**
+     * Language of the panel. `'auto'` (the default) follows the page's
+     * `<html lang>`: an Arabic page gets an Arabic, right-to-left panel and
+     * every other page gets English. Pass `'en'` or `'ar'` to pin it.
+     */
+    locale?: 'auto' | OverlayLocale;
 }
 
 interface InspectorOptions {
@@ -35,4 +55,4 @@ interface HydrationInspectorHandle {
 }
 declare function createHydrationInspector(options?: InspectorOptions): HydrationInspectorHandle;
 
-export { Classifier, HydrationInspector, type HydrationInspectorHandle, type HydrationInspectorProps, HydrationReport, type InspectorOptions, type OverlayOptions, createHydrationInspector };
+export { Classifier, HydrationInspector, type HydrationInspectorHandle, type HydrationInspectorProps, HydrationReport, type InspectorOptions, type OverlayLocale, type OverlayOptions, createHydrationInspector };

package/dist/react.js

@@ -1,6 +1,6 @@
 'use client';
-export { HydrationInspector, createHydrationInspector } from './chunk-3KULWJ7A.js';
-import './chunk-WQLUD25W.js';
-import './chunk-FV3PEJQE.js';
+export { HydrationInspector, createHydrationInspector } from './chunk-MK3TYHKM.js';
+import './chunk-3OAI2ZHY.js';
+import './chunk-XIM33ZGB.js';
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map

package/dist/{types-6wTih14e.d.cts → types-C14vcpBO.d.cts}

@@ -14,9 +14,18 @@ interface Divergence {
 interface Cause {
     category: HydrationCauseCategory;
     confidence: number;
+    /** Always English — this is what the console prints and `onReport` gets. */
     explanation: string;
     suggestion: string;
     docsUrl?: string;
+    /**
+     * Which message produced `explanation`/`suggestion`, so a renderer can show
+     * the same cause in another language. Set by every built-in rule; custom
+     * classifiers may leave it out, and renderers then fall back to the English.
+     */
+    messageId?: string;
+    /** The values interpolated into that message (attribute names, tokens…). */
+    params?: Readonly<Record<string, string | readonly string[]>>;
 }
 type Classifier = (divergence: Divergence) => Cause | null;
 interface SourceLocation {

package/dist/{types-6wTih14e.d.ts → types-C14vcpBO.d.ts}

@@ -14,9 +14,18 @@ interface Divergence {
 interface Cause {
     category: HydrationCauseCategory;
     confidence: number;
+    /** Always English — this is what the console prints and `onReport` gets. */
     explanation: string;
     suggestion: string;
     docsUrl?: string;
+    /**
+     * Which message produced `explanation`/`suggestion`, so a renderer can show
+     * the same cause in another language. Set by every built-in rule; custom
+     * classifiers may leave it out, and renderers then fall back to the English.
+     */
+    messageId?: string;
+    /** The values interpolated into that message (attribute names, tokens…). */
+    params?: Readonly<Record<string, string | readonly string[]>>;
 }
 type Classifier = (divergence: Divergence) => Cause | null;
 interface SourceLocation {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "why-hydration",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Tells you which component broke hydration, what differed, and how to fix it — in dev, with zero production cost.",
   "license": "MIT",
   "author": "Razan Aboushi (https://www.linkedin.com/in/razan-aboushi/)",