translation-resilience 0.1.0

package/dist/simulator.cjs

@@ -0,0 +1,165 @@
+"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/simulator.ts
+var simulator_exports = {};
+__export(simulator_exports, {
+  pseudoTranslate: () => pseudoTranslate,
+  startTranslateObserver: () => startTranslateObserver,
+  translateSubtree: () => translateSubtree
+});
+module.exports = __toCommonJS(simulator_exports);
+function pseudoTranslate(text) {
+  return `[${text}]`;
+}
+var simulatorOwnedTextNodes = /* @__PURE__ */ new WeakSet();
+function isText(node) {
+  return node.nodeType === Node.TEXT_NODE;
+}
+function hasTranslatableContent(node) {
+  var _a;
+  return /\S/.test((_a = node.nodeValue) != null ? _a : "");
+}
+function isInsideFont(node) {
+  let current = node.parentNode;
+  while (current) {
+    if (current.nodeName === "FONT") return true;
+    current = current.parentNode;
+  }
+  return false;
+}
+function createFontWrapper(translatedText) {
+  const outer = document.createElement("font");
+  outer.setAttribute("style", "vertical-align: inherit;");
+  const inner = document.createElement("font");
+  inner.setAttribute("style", "vertical-align: inherit;");
+  const translatedNode = document.createTextNode(translatedText);
+  simulatorOwnedTextNodes.add(translatedNode);
+  inner.appendChild(translatedNode);
+  outer.appendChild(inner);
+  return outer;
+}
+function splitIntoSegments(text) {
+  return text.split(/(\d+)/).filter((segment) => segment !== "");
+}
+function translateTextNode(textNode, translate) {
+  var _a;
+  const parent = textNode.parentNode;
+  if (!parent) return;
+  for (const segment of splitIntoSegments((_a = textNode.nodeValue) != null ? _a : "")) {
+    parent.insertBefore(createFontWrapper(translate(segment)), textNode);
+  }
+  parent.removeChild(textNode);
+}
+function collectTranslatableTextNodes(root) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  const result = [];
+  let node = walker.nextNode();
+  while (node) {
+    if (isText(node) && hasTranslatableContent(node) && !isInsideFont(node) && !simulatorOwnedTextNodes.has(node)) {
+      result.push(node);
+    }
+    node = walker.nextNode();
+  }
+  return result;
+}
+function mergeAdjacentTextNodes(parent) {
+  var _a, _b;
+  let child = parent.firstChild;
+  while (child) {
+    if (isText(child)) {
+      let next = child.nextSibling;
+      while (next && isText(next)) {
+        const after = next.nextSibling;
+        child.nodeValue = ((_a = child.nodeValue) != null ? _a : "") + ((_b = next.nodeValue) != null ? _b : "");
+        parent.removeChild(next);
+        next = after;
+      }
+    }
+    child = child.nextSibling;
+  }
+}
+function normalizeSubtree(root) {
+  var _a;
+  const base = isText(root) ? (_a = root.parentNode) != null ? _a : root : root;
+  mergeAdjacentTextNodes(base);
+  const walker = document.createTreeWalker(base, NodeFilter.SHOW_ELEMENT);
+  let element = walker.nextNode();
+  while (element) {
+    mergeAdjacentTextNodes(element);
+    element = walker.nextNode();
+  }
+}
+function translateSubtree(root, translate = pseudoTranslate, options = {}) {
+  var _a, _b, _c, _d;
+  for (const textNode of (_a = options.deleteTextNodes) != null ? _a : []) {
+    (_b = textNode.parentNode) == null ? void 0 : _b.removeChild(textNode);
+  }
+  normalizeSubtree(root);
+  for (const textNode of collectTranslatableTextNodes(root)) {
+    translateTextNode(textNode, translate);
+  }
+  if (isText(root) && hasTranslatableContent(root) && !isInsideFont(root) && !simulatorOwnedTextNodes.has(root)) {
+    translateTextNode(root, translate);
+  }
+  for (const element of (_c = options.moveToParentEnd) != null ? _c : []) {
+    (_d = element.parentNode) == null ? void 0 : _d.appendChild(element);
+  }
+}
+function startTranslateObserver(root, translate = pseudoTranslate) {
+  const observer = new MutationObserver((records) => {
+    var _a, _b;
+    const parentsToTranslate = /* @__PURE__ */ new Set();
+    for (const record of records) {
+      if (record.type === "childList") {
+        for (const added of record.addedNodes) {
+          if (isText(added) && simulatorOwnedTextNodes.has(added)) continue;
+          if (isInsideFont(added)) {
+            if (isText(added) && hasTranslatableContent(added)) {
+              added.nodeValue = translate((_a = added.nodeValue) != null ? _a : "");
+              simulatorOwnedTextNodes.add(added);
+            }
+          } else if (isText(added)) {
+            if (hasTranslatableContent(added) && added.parentNode) parentsToTranslate.add(added.parentNode);
+          } else {
+            parentsToTranslate.add(added);
+          }
+        }
+      } else if (record.type === "characterData") {
+        const target = record.target;
+        if (isText(target) && !simulatorOwnedTextNodes.has(target) && isInsideFont(target) && hasTranslatableContent(target)) {
+          target.nodeValue = translate((_b = target.nodeValue) != null ? _b : "");
+          simulatorOwnedTextNodes.add(target);
+        }
+      }
+    }
+    for (const parent of parentsToTranslate) {
+      if (parent.isConnected) translateSubtree(parent, translate);
+    }
+  });
+  observer.observe(root, { childList: true, subtree: true, characterData: true });
+  return () => observer.disconnect();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pseudoTranslate,
+  startTranslateObserver,
+  translateSubtree
+});
+//# sourceMappingURL=simulator.cjs.map

package/dist/simulator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/simulator.ts"],"sourcesContent":["/**\n * Simulates the DOM mutations Chrome / Google Translate performs when\n * translating a page, so tests can reproduce the well-known class of React\n * crashes and stale-text bugs without a real browser translation session.\n *\n * Mutation shape, cross-verified from facebook/react#11538 (incl. the verbatim\n * Chromium bug 872770 analysis in comment 59) and\n * https://martijnhols.nl/blog/everything-about-google-translate-crashing-react:\n *\n *  1. Adjacent Text nodes are merged first (`normalize()`), so several\n *     renderer-owned text nodes can collapse into one run.\n *  2. Each run is split into segments (numbers get isolated into their own\n *     segment), and every segment becomes a nested double\n *     `<font style=\"vertical-align: inherit;\">` wrapper around a NEW text\n *     node with the translated content.\n *  3. The wrappers are inserted before the original text node, then the\n *     original is REMOVED — it stays alive in memory (renderers still hold\n *     references) but has parentNode === null.\n *  4. Translation can also delete text nodes outright and move inline\n *     elements to match target-language word order (Chromium bug 872770).\n *  5. Comment nodes are never touched.\n *  6. A MutationObserver keeps watching the page and translates content that\n *     appears or changes later.\n */\n\nexport function pseudoTranslate(text: string): string {\n  return `[${text}]`;\n}\n\nexport type TranslateFn = (text: string) => string;\n\nexport interface TranslateOptions {\n  /** Text nodes the \"translation\" deletes outright (no replacement). */\n  deleteTextNodes?: Text[];\n  /** Inline elements moved to the end of their parent (word-order change). */\n  moveToParentEnd?: Element[];\n}\n\n/** Inner text nodes created by the simulator (already-translated content). */\nconst simulatorOwnedTextNodes = new WeakSet<Text>();\n\nfunction isText(node: Node): node is Text {\n  return node.nodeType === Node.TEXT_NODE;\n}\n\nfunction hasTranslatableContent(node: Text): boolean {\n  return /\\S/.test(node.nodeValue ?? '');\n}\n\nfunction isInsideFont(node: Node): boolean {\n  let current: Node | null = node.parentNode;\n  while (current) {\n    if (current.nodeName === 'FONT') return true;\n    current = current.parentNode;\n  }\n  return false;\n}\n\nfunction createFontWrapper(translatedText: string): HTMLElement {\n  const outer = document.createElement('font');\n  outer.setAttribute('style', 'vertical-align: inherit;');\n  const inner = document.createElement('font');\n  inner.setAttribute('style', 'vertical-align: inherit;');\n  const translatedNode = document.createTextNode(translatedText);\n  simulatorOwnedTextNodes.add(translatedNode);\n  inner.appendChild(translatedNode);\n  outer.appendChild(inner);\n  return outer;\n}\n\n/** Numbers are isolated into their own segment, like the real translator. */\nfunction splitIntoSegments(text: string): string[] {\n  return text.split(/(\\d+)/).filter((segment) => segment !== '');\n}\n\n/**\n * Replaces a single text node with translated <font> wrappers, exactly the\n * way Google Translate does: insert the wrappers, then detach the original.\n */\nfunction translateTextNode(textNode: Text, translate: TranslateFn): void {\n  const parent = textNode.parentNode;\n  if (!parent) return;\n  for (const segment of splitIntoSegments(textNode.nodeValue ?? '')) {\n    parent.insertBefore(createFontWrapper(translate(segment)), textNode);\n  }\n  parent.removeChild(textNode);\n}\n\nfunction collectTranslatableTextNodes(root: Node): Text[] {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);\n  const result: Text[] = [];\n  let node = walker.nextNode();\n  while (node) {\n    if (isText(node) && hasTranslatableContent(node) && !isInsideFont(node) && !simulatorOwnedTextNodes.has(node)) {\n      result.push(node);\n    }\n    node = walker.nextNode();\n  }\n  return result;\n}\n\n/**\n * Spec-equivalent Node.normalize(): merge each run of adjacent Text siblings\n * into the first node of the run and remove the rest. Done with explicit DOM\n * operations (rather than calling normalize()) so the MutationRecords emitted\n * are deterministic across DOM implementations.\n */\nfunction mergeAdjacentTextNodes(parent: Node): void {\n  let child = parent.firstChild;\n  while (child) {\n    if (isText(child)) {\n      let next = child.nextSibling;\n      while (next && isText(next)) {\n        const after = next.nextSibling;\n        child.nodeValue = (child.nodeValue ?? '') + (next.nodeValue ?? '');\n        parent.removeChild(next);\n        next = after;\n      }\n    }\n    child = child.nextSibling;\n  }\n}\n\nfunction normalizeSubtree(root: Node): void {\n  const base = isText(root) ? (root.parentNode ?? root) : root;\n  mergeAdjacentTextNodes(base);\n  const walker = document.createTreeWalker(base, NodeFilter.SHOW_ELEMENT);\n  let element = walker.nextNode();\n  while (element) {\n    mergeAdjacentTextNodes(element);\n    element = walker.nextNode();\n  }\n}\n\n/** One-shot translation pass over a subtree, like the initial page translate. */\nexport function translateSubtree(\n  root: Node,\n  translate: TranslateFn = pseudoTranslate,\n  options: TranslateOptions = {}\n): void {\n  for (const textNode of options.deleteTextNodes ?? []) {\n    textNode.parentNode?.removeChild(textNode);\n  }\n  normalizeSubtree(root);\n  for (const textNode of collectTranslatableTextNodes(root)) {\n    translateTextNode(textNode, translate);\n  }\n  if (isText(root) && hasTranslatableContent(root) && !isInsideFont(root) && !simulatorOwnedTextNodes.has(root)) {\n    translateTextNode(root, translate);\n  }\n  for (const element of options.moveToParentEnd ?? []) {\n    element.parentNode?.appendChild(element);\n  }\n}\n\n/**\n * Models Google Translate's ongoing observation of the page: newly inserted\n * text gets translated (including a fresh normalize pass over its parent,\n * merging adjacent restored text nodes); text that changes inside an existing\n * <font> wrapper is re-translated in place.\n *\n * Returns a stop function.\n */\nexport function startTranslateObserver(root: Node, translate: TranslateFn = pseudoTranslate): () => void {\n  const observer = new MutationObserver((records) => {\n    const parentsToTranslate = new Set<Node>();\n    for (const record of records) {\n      if (record.type === 'childList') {\n        for (const added of record.addedNodes) {\n          if (isText(added) && simulatorOwnedTextNodes.has(added)) continue;\n          if (isInsideFont(added)) {\n            if (isText(added) && hasTranslatableContent(added)) {\n              added.nodeValue = translate(added.nodeValue ?? '');\n              simulatorOwnedTextNodes.add(added);\n            }\n          } else if (isText(added)) {\n            if (hasTranslatableContent(added) && added.parentNode) parentsToTranslate.add(added.parentNode);\n          } else {\n            parentsToTranslate.add(added);\n          }\n        }\n      } else if (record.type === 'characterData') {\n        const target = record.target;\n        if (\n          isText(target) &&\n          !simulatorOwnedTextNodes.has(target) &&\n          isInsideFont(target) &&\n          hasTranslatableContent(target)\n        ) {\n          target.nodeValue = translate(target.nodeValue ?? '');\n          simulatorOwnedTextNodes.add(target);\n        }\n      }\n    }\n    for (const parent of parentsToTranslate) {\n      if (parent.isConnected) translateSubtree(parent, translate);\n    }\n  });\n  observer.observe(root, { childList: true, subtree: true, characterData: true });\n  return () => observer.disconnect();\n}\n"],"mappings":"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","names":[]}

package/dist/simulator.d.cts

@@ -0,0 +1,45 @@
+/**
+ * Simulates the DOM mutations Chrome / Google Translate performs when
+ * translating a page, so tests can reproduce the well-known class of React
+ * crashes and stale-text bugs without a real browser translation session.
+ *
+ * Mutation shape, cross-verified from facebook/react#11538 (incl. the verbatim
+ * Chromium bug 872770 analysis in comment 59) and
+ * https://martijnhols.nl/blog/everything-about-google-translate-crashing-react:
+ *
+ *  1. Adjacent Text nodes are merged first (`normalize()`), so several
+ *     renderer-owned text nodes can collapse into one run.
+ *  2. Each run is split into segments (numbers get isolated into their own
+ *     segment), and every segment becomes a nested double
+ *     `<font style="vertical-align: inherit;">` wrapper around a NEW text
+ *     node with the translated content.
+ *  3. The wrappers are inserted before the original text node, then the
+ *     original is REMOVED — it stays alive in memory (renderers still hold
+ *     references) but has parentNode === null.
+ *  4. Translation can also delete text nodes outright and move inline
+ *     elements to match target-language word order (Chromium bug 872770).
+ *  5. Comment nodes are never touched.
+ *  6. A MutationObserver keeps watching the page and translates content that
+ *     appears or changes later.
+ */
+declare function pseudoTranslate(text: string): string;
+type TranslateFn = (text: string) => string;
+interface TranslateOptions {
+    /** Text nodes the "translation" deletes outright (no replacement). */
+    deleteTextNodes?: Text[];
+    /** Inline elements moved to the end of their parent (word-order change). */
+    moveToParentEnd?: Element[];
+}
+/** One-shot translation pass over a subtree, like the initial page translate. */
+declare function translateSubtree(root: Node, translate?: TranslateFn, options?: TranslateOptions): void;
+/**
+ * Models Google Translate's ongoing observation of the page: newly inserted
+ * text gets translated (including a fresh normalize pass over its parent,
+ * merging adjacent restored text nodes); text that changes inside an existing
+ * <font> wrapper is re-translated in place.
+ *
+ * Returns a stop function.
+ */
+declare function startTranslateObserver(root: Node, translate?: TranslateFn): () => void;
+
+export { type TranslateFn, type TranslateOptions, pseudoTranslate, startTranslateObserver, translateSubtree };

package/dist/simulator.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Simulates the DOM mutations Chrome / Google Translate performs when
+ * translating a page, so tests can reproduce the well-known class of React
+ * crashes and stale-text bugs without a real browser translation session.
+ *
+ * Mutation shape, cross-verified from facebook/react#11538 (incl. the verbatim
+ * Chromium bug 872770 analysis in comment 59) and
+ * https://martijnhols.nl/blog/everything-about-google-translate-crashing-react:
+ *
+ *  1. Adjacent Text nodes are merged first (`normalize()`), so several
+ *     renderer-owned text nodes can collapse into one run.
+ *  2. Each run is split into segments (numbers get isolated into their own
+ *     segment), and every segment becomes a nested double
+ *     `<font style="vertical-align: inherit;">` wrapper around a NEW text
+ *     node with the translated content.
+ *  3. The wrappers are inserted before the original text node, then the
+ *     original is REMOVED — it stays alive in memory (renderers still hold
+ *     references) but has parentNode === null.
+ *  4. Translation can also delete text nodes outright and move inline
+ *     elements to match target-language word order (Chromium bug 872770).
+ *  5. Comment nodes are never touched.
+ *  6. A MutationObserver keeps watching the page and translates content that
+ *     appears or changes later.
+ */
+declare function pseudoTranslate(text: string): string;
+type TranslateFn = (text: string) => string;
+interface TranslateOptions {
+    /** Text nodes the "translation" deletes outright (no replacement). */
+    deleteTextNodes?: Text[];
+    /** Inline elements moved to the end of their parent (word-order change). */
+    moveToParentEnd?: Element[];
+}
+/** One-shot translation pass over a subtree, like the initial page translate. */
+declare function translateSubtree(root: Node, translate?: TranslateFn, options?: TranslateOptions): void;
+/**
+ * Models Google Translate's ongoing observation of the page: newly inserted
+ * text gets translated (including a fresh normalize pass over its parent,
+ * merging adjacent restored text nodes); text that changes inside an existing
+ * <font> wrapper is re-translated in place.
+ *
+ * Returns a stop function.
+ */
+declare function startTranslateObserver(root: Node, translate?: TranslateFn): () => void;
+
+export { type TranslateFn, type TranslateOptions, pseudoTranslate, startTranslateObserver, translateSubtree };

package/dist/simulator.js

@@ -0,0 +1,138 @@
+// src/simulator.ts
+function pseudoTranslate(text) {
+  return `[${text}]`;
+}
+var simulatorOwnedTextNodes = /* @__PURE__ */ new WeakSet();
+function isText(node) {
+  return node.nodeType === Node.TEXT_NODE;
+}
+function hasTranslatableContent(node) {
+  var _a;
+  return /\S/.test((_a = node.nodeValue) != null ? _a : "");
+}
+function isInsideFont(node) {
+  let current = node.parentNode;
+  while (current) {
+    if (current.nodeName === "FONT") return true;
+    current = current.parentNode;
+  }
+  return false;
+}
+function createFontWrapper(translatedText) {
+  const outer = document.createElement("font");
+  outer.setAttribute("style", "vertical-align: inherit;");
+  const inner = document.createElement("font");
+  inner.setAttribute("style", "vertical-align: inherit;");
+  const translatedNode = document.createTextNode(translatedText);
+  simulatorOwnedTextNodes.add(translatedNode);
+  inner.appendChild(translatedNode);
+  outer.appendChild(inner);
+  return outer;
+}
+function splitIntoSegments(text) {
+  return text.split(/(\d+)/).filter((segment) => segment !== "");
+}
+function translateTextNode(textNode, translate) {
+  var _a;
+  const parent = textNode.parentNode;
+  if (!parent) return;
+  for (const segment of splitIntoSegments((_a = textNode.nodeValue) != null ? _a : "")) {
+    parent.insertBefore(createFontWrapper(translate(segment)), textNode);
+  }
+  parent.removeChild(textNode);
+}
+function collectTranslatableTextNodes(root) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  const result = [];
+  let node = walker.nextNode();
+  while (node) {
+    if (isText(node) && hasTranslatableContent(node) && !isInsideFont(node) && !simulatorOwnedTextNodes.has(node)) {
+      result.push(node);
+    }
+    node = walker.nextNode();
+  }
+  return result;
+}
+function mergeAdjacentTextNodes(parent) {
+  var _a, _b;
+  let child = parent.firstChild;
+  while (child) {
+    if (isText(child)) {
+      let next = child.nextSibling;
+      while (next && isText(next)) {
+        const after = next.nextSibling;
+        child.nodeValue = ((_a = child.nodeValue) != null ? _a : "") + ((_b = next.nodeValue) != null ? _b : "");
+        parent.removeChild(next);
+        next = after;
+      }
+    }
+    child = child.nextSibling;
+  }
+}
+function normalizeSubtree(root) {
+  var _a;
+  const base = isText(root) ? (_a = root.parentNode) != null ? _a : root : root;
+  mergeAdjacentTextNodes(base);
+  const walker = document.createTreeWalker(base, NodeFilter.SHOW_ELEMENT);
+  let element = walker.nextNode();
+  while (element) {
+    mergeAdjacentTextNodes(element);
+    element = walker.nextNode();
+  }
+}
+function translateSubtree(root, translate = pseudoTranslate, options = {}) {
+  var _a, _b, _c, _d;
+  for (const textNode of (_a = options.deleteTextNodes) != null ? _a : []) {
+    (_b = textNode.parentNode) == null ? void 0 : _b.removeChild(textNode);
+  }
+  normalizeSubtree(root);
+  for (const textNode of collectTranslatableTextNodes(root)) {
+    translateTextNode(textNode, translate);
+  }
+  if (isText(root) && hasTranslatableContent(root) && !isInsideFont(root) && !simulatorOwnedTextNodes.has(root)) {
+    translateTextNode(root, translate);
+  }
+  for (const element of (_c = options.moveToParentEnd) != null ? _c : []) {
+    (_d = element.parentNode) == null ? void 0 : _d.appendChild(element);
+  }
+}
+function startTranslateObserver(root, translate = pseudoTranslate) {
+  const observer = new MutationObserver((records) => {
+    var _a, _b;
+    const parentsToTranslate = /* @__PURE__ */ new Set();
+    for (const record of records) {
+      if (record.type === "childList") {
+        for (const added of record.addedNodes) {
+          if (isText(added) && simulatorOwnedTextNodes.has(added)) continue;
+          if (isInsideFont(added)) {
+            if (isText(added) && hasTranslatableContent(added)) {
+              added.nodeValue = translate((_a = added.nodeValue) != null ? _a : "");
+              simulatorOwnedTextNodes.add(added);
+            }
+          } else if (isText(added)) {
+            if (hasTranslatableContent(added) && added.parentNode) parentsToTranslate.add(added.parentNode);
+          } else {
+            parentsToTranslate.add(added);
+          }
+        }
+      } else if (record.type === "characterData") {
+        const target = record.target;
+        if (isText(target) && !simulatorOwnedTextNodes.has(target) && isInsideFont(target) && hasTranslatableContent(target)) {
+          target.nodeValue = translate((_b = target.nodeValue) != null ? _b : "");
+          simulatorOwnedTextNodes.add(target);
+        }
+      }
+    }
+    for (const parent of parentsToTranslate) {
+      if (parent.isConnected) translateSubtree(parent, translate);
+    }
+  });
+  observer.observe(root, { childList: true, subtree: true, characterData: true });
+  return () => observer.disconnect();
+}
+export {
+  pseudoTranslate,
+  startTranslateObserver,
+  translateSubtree
+};
+//# sourceMappingURL=simulator.js.map

package/dist/simulator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/simulator.ts"],"sourcesContent":["/**\n * Simulates the DOM mutations Chrome / Google Translate performs when\n * translating a page, so tests can reproduce the well-known class of React\n * crashes and stale-text bugs without a real browser translation session.\n *\n * Mutation shape, cross-verified from facebook/react#11538 (incl. the verbatim\n * Chromium bug 872770 analysis in comment 59) and\n * https://martijnhols.nl/blog/everything-about-google-translate-crashing-react:\n *\n *  1. Adjacent Text nodes are merged first (`normalize()`), so several\n *     renderer-owned text nodes can collapse into one run.\n *  2. Each run is split into segments (numbers get isolated into their own\n *     segment), and every segment becomes a nested double\n *     `<font style=\"vertical-align: inherit;\">` wrapper around a NEW text\n *     node with the translated content.\n *  3. The wrappers are inserted before the original text node, then the\n *     original is REMOVED — it stays alive in memory (renderers still hold\n *     references) but has parentNode === null.\n *  4. Translation can also delete text nodes outright and move inline\n *     elements to match target-language word order (Chromium bug 872770).\n *  5. Comment nodes are never touched.\n *  6. A MutationObserver keeps watching the page and translates content that\n *     appears or changes later.\n */\n\nexport function pseudoTranslate(text: string): string {\n  return `[${text}]`;\n}\n\nexport type TranslateFn = (text: string) => string;\n\nexport interface TranslateOptions {\n  /** Text nodes the \"translation\" deletes outright (no replacement). */\n  deleteTextNodes?: Text[];\n  /** Inline elements moved to the end of their parent (word-order change). */\n  moveToParentEnd?: Element[];\n}\n\n/** Inner text nodes created by the simulator (already-translated content). */\nconst simulatorOwnedTextNodes = new WeakSet<Text>();\n\nfunction isText(node: Node): node is Text {\n  return node.nodeType === Node.TEXT_NODE;\n}\n\nfunction hasTranslatableContent(node: Text): boolean {\n  return /\\S/.test(node.nodeValue ?? '');\n}\n\nfunction isInsideFont(node: Node): boolean {\n  let current: Node | null = node.parentNode;\n  while (current) {\n    if (current.nodeName === 'FONT') return true;\n    current = current.parentNode;\n  }\n  return false;\n}\n\nfunction createFontWrapper(translatedText: string): HTMLElement {\n  const outer = document.createElement('font');\n  outer.setAttribute('style', 'vertical-align: inherit;');\n  const inner = document.createElement('font');\n  inner.setAttribute('style', 'vertical-align: inherit;');\n  const translatedNode = document.createTextNode(translatedText);\n  simulatorOwnedTextNodes.add(translatedNode);\n  inner.appendChild(translatedNode);\n  outer.appendChild(inner);\n  return outer;\n}\n\n/** Numbers are isolated into their own segment, like the real translator. */\nfunction splitIntoSegments(text: string): string[] {\n  return text.split(/(\\d+)/).filter((segment) => segment !== '');\n}\n\n/**\n * Replaces a single text node with translated <font> wrappers, exactly the\n * way Google Translate does: insert the wrappers, then detach the original.\n */\nfunction translateTextNode(textNode: Text, translate: TranslateFn): void {\n  const parent = textNode.parentNode;\n  if (!parent) return;\n  for (const segment of splitIntoSegments(textNode.nodeValue ?? '')) {\n    parent.insertBefore(createFontWrapper(translate(segment)), textNode);\n  }\n  parent.removeChild(textNode);\n}\n\nfunction collectTranslatableTextNodes(root: Node): Text[] {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);\n  const result: Text[] = [];\n  let node = walker.nextNode();\n  while (node) {\n    if (isText(node) && hasTranslatableContent(node) && !isInsideFont(node) && !simulatorOwnedTextNodes.has(node)) {\n      result.push(node);\n    }\n    node = walker.nextNode();\n  }\n  return result;\n}\n\n/**\n * Spec-equivalent Node.normalize(): merge each run of adjacent Text siblings\n * into the first node of the run and remove the rest. Done with explicit DOM\n * operations (rather than calling normalize()) so the MutationRecords emitted\n * are deterministic across DOM implementations.\n */\nfunction mergeAdjacentTextNodes(parent: Node): void {\n  let child = parent.firstChild;\n  while (child) {\n    if (isText(child)) {\n      let next = child.nextSibling;\n      while (next && isText(next)) {\n        const after = next.nextSibling;\n        child.nodeValue = (child.nodeValue ?? '') + (next.nodeValue ?? '');\n        parent.removeChild(next);\n        next = after;\n      }\n    }\n    child = child.nextSibling;\n  }\n}\n\nfunction normalizeSubtree(root: Node): void {\n  const base = isText(root) ? (root.parentNode ?? root) : root;\n  mergeAdjacentTextNodes(base);\n  const walker = document.createTreeWalker(base, NodeFilter.SHOW_ELEMENT);\n  let element = walker.nextNode();\n  while (element) {\n    mergeAdjacentTextNodes(element);\n    element = walker.nextNode();\n  }\n}\n\n/** One-shot translation pass over a subtree, like the initial page translate. */\nexport function translateSubtree(\n  root: Node,\n  translate: TranslateFn = pseudoTranslate,\n  options: TranslateOptions = {}\n): void {\n  for (const textNode of options.deleteTextNodes ?? []) {\n    textNode.parentNode?.removeChild(textNode);\n  }\n  normalizeSubtree(root);\n  for (const textNode of collectTranslatableTextNodes(root)) {\n    translateTextNode(textNode, translate);\n  }\n  if (isText(root) && hasTranslatableContent(root) && !isInsideFont(root) && !simulatorOwnedTextNodes.has(root)) {\n    translateTextNode(root, translate);\n  }\n  for (const element of options.moveToParentEnd ?? []) {\n    element.parentNode?.appendChild(element);\n  }\n}\n\n/**\n * Models Google Translate's ongoing observation of the page: newly inserted\n * text gets translated (including a fresh normalize pass over its parent,\n * merging adjacent restored text nodes); text that changes inside an existing\n * <font> wrapper is re-translated in place.\n *\n * Returns a stop function.\n */\nexport function startTranslateObserver(root: Node, translate: TranslateFn = pseudoTranslate): () => void {\n  const observer = new MutationObserver((records) => {\n    const parentsToTranslate = new Set<Node>();\n    for (const record of records) {\n      if (record.type === 'childList') {\n        for (const added of record.addedNodes) {\n          if (isText(added) && simulatorOwnedTextNodes.has(added)) continue;\n          if (isInsideFont(added)) {\n            if (isText(added) && hasTranslatableContent(added)) {\n              added.nodeValue = translate(added.nodeValue ?? '');\n              simulatorOwnedTextNodes.add(added);\n            }\n          } else if (isText(added)) {\n            if (hasTranslatableContent(added) && added.parentNode) parentsToTranslate.add(added.parentNode);\n          } else {\n            parentsToTranslate.add(added);\n          }\n        }\n      } else if (record.type === 'characterData') {\n        const target = record.target;\n        if (\n          isText(target) &&\n          !simulatorOwnedTextNodes.has(target) &&\n          isInsideFont(target) &&\n          hasTranslatableContent(target)\n        ) {\n          target.nodeValue = translate(target.nodeValue ?? '');\n          simulatorOwnedTextNodes.add(target);\n        }\n      }\n    }\n    for (const parent of parentsToTranslate) {\n      if (parent.isConnected) translateSubtree(parent, translate);\n    }\n  });\n  observer.observe(root, { childList: true, subtree: true, characterData: true });\n  return () => observer.disconnect();\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "translation-resilience",
+  "version": "0.1.0",
+  "description": "Stops browser page translation (Google Translate) from crashing React and silently freezing translated text, by re-adopting displaced text nodes instead of swallowing errors.",
+  "keywords": [
+    "google-translate",
+    "page-translation",
+    "react",
+    "notfounderror",
+    "removechild",
+    "insertbefore",
+    "mutationobserver",
+    "chrome",
+    "i18n",
+    "dom"
+  ],
+  "author": "Alex Speller <alex@alexspeller.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alexspeller/translation-resilience.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alexspeller/translation-resilience/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./simulator": {
+      "types": "./dist/simulator.d.ts",
+      "import": "./dist/simulator.js",
+      "require": "./dist/simulator.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check .",
+    "prepublishOnly": "npm run lint && npm run typecheck && npm run test && npm run build"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
+    "jsdom": "^29.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.10"
+  },
+  "allowScripts": {
+    "esbuild": true,
+    "fsevents": true
+  }
+}