really fixes google translate issue

package.json

@@ -29,6 +29,7 @@
     "dist": "tsc -p ./src/tsconfig.json && tsc -p ./examples/tsconfig.json && rollup -c --bundleConfigAsCjs && uglifyjs ./dist/maquette.umd.js -c unsafe=true,unsafe_comps=true,unsafe_math=true,passes=3 -m -o ./dist/maquette.umd.min.js",
     "start": "npm -s run dist && npx http-server . -p 8080 -o",
     "test": "tsa ci",
+    "test-raw": "npx mocha test/**/*-tests.ts -r ts-node/register",
     "ci": "tsa ci && npm -s run dist && ts-node ./tools/check-file-size",
     "publish-website": "cd website && npm install --no-optional --force && npm run deploy",
     "test-also-with-browser": "npm run dist && cd examples/todomvc && npm install --no-save bower && bower install && cd ../../browser-tests && npm install && npm test"

src/projection.ts

@@ -360,7 +360,8 @@ let updateDom: (
   previous: VNode,
   vnode: VNode,
   projectionOptions: ProjectionOptions,
-  parentNode: Node
+  parentNode: Node,
+  oldChildren: VNode[]
 ) => boolean;
 
 /**
@@ -512,7 +513,8 @@ let updateChildren = (
     let oldChild = oldIndex < oldChildrenLength ? oldChildren[oldIndex] : undefined;
     let newChild = newChildren[newIndex];
     if (oldChild !== undefined && same(oldChild, newChild)) {
-      textUpdated = updateDom(oldChild, newChild, projectionOptions, domNode) || textUpdated;
+      textUpdated =
+        updateDom(oldChild, newChild, projectionOptions, domNode, oldChildren) || textUpdated;
       oldIndex++;
     } else {
       let findOldIndex = findIndexOfChild(oldChildren, newChild, oldIndex + 1);
@@ -523,7 +525,8 @@ let updateChildren = (
           checkDistinguishable(oldChildren, i, vnode, "removed");
         }
         textUpdated =
-          updateDom(oldChildren[findOldIndex], newChild, projectionOptions, domNode) || textUpdated;
+          updateDom(oldChildren[findOldIndex], newChild, projectionOptions, domNode, oldChildren) ||
+          textUpdated;
         oldIndex = findOldIndex + 1;
       } else {
         // New child
@@ -549,7 +552,7 @@ let updateChildren = (
   return textUpdated;
 };
 
-updateDom = (previous, vnode, projectionOptions, parentNode) => {
+updateDom = (previous, vnode, projectionOptions, parentNode, oldChildren) => {
   let domNode = previous.domNode!;
   let textUpdated = false;
   if (previous === vnode) {
@@ -559,7 +562,12 @@ updateDom = (previous, vnode, projectionOptions, parentNode) => {
   if (vnode.vnodeSelector === "") {
     if (vnode.text !== previous.text) {
       let newTextNode = domNode.ownerDocument!.createTextNode(vnode.text!);
-      parentNode.replaceChild(newTextNode, domNode);
+      try {
+        parentNode.replaceChild(newTextNode, domNode);
+      } catch (e) {
+        // Text nodes can be substituted by google translate
+        parentNode.replaceChild(newTextNode, parentNode.childNodes[oldChildren.indexOf(previous)]);
+      }
       vnode.domNode = newTextNode;
       textUpdated = true;
       return textUpdated;
@@ -612,10 +620,15 @@ export let createProjection = (vnode: VNode, projectionOptions: ProjectionOption
           "The selector for the root VNode may not be changed. (consider using dom.merge and add one extra level to the virtual DOM)"
         );
       }
-      let parentNode = vnode.domNode!.parentNode!;
       let previousVNode = vnode;
       vnode = updatedVnode;
-      updateDom(previousVNode, updatedVnode, projectionOptions, parentNode);
+      updateDom(
+        previousVNode,
+        updatedVnode,
+        projectionOptions,
+        previousVNode.domNode!.parentNode!,
+        [previousVNode]
+      );
     },
     domNode: <Element>vnode.domNode,
   };

test/projection-tests.ts

@@ -1,7 +1,7 @@
 import { SinonStub } from "sinon";
 
-import { VNode, h } from "../src";
-import { createDom } from "../src/projection";
+import { VNode, dom, h } from "../src";
+import { createDom, createProjection } from "../src/projection";
 import { expect, sinon } from "./test-utilities";
 
 describe("Projection", () => {
@@ -55,4 +55,52 @@ describe("Projection", () => {
       expect(createElement.lastCall.args).to.deep.equal(["p", { is: "my-custom-element" }]);
     });
   });
+
+  describe("projection.update", () => {
+    it("handles DOM updates correctly when external scripts (like Google Translate) modify the DOM structure", () => {
+      const projectionOptions = {};
+
+      // Old VDOM ("Amerikaa[n]se Maagde[n] eilande[n]")
+      const oldVNode = h("span", { class: "ReferenceMenuItem-label" }, [
+        "Amerikaa",
+        h("mark", { class: "Highlight", key: "1" }, ["n"]),
+        "se Maagde",
+        h("mark", { class: "Highlight", key: "2" }, ["n"]),
+        " eilande",
+        h("mark", { class: "Highlight", key: "3" }, ["n"]),
+      ]);
+
+      dom.create(oldVNode, projectionOptions);
+      let projection = createProjection(oldVNode, projectionOptions);
+
+      let spanElement = projection.domNode as HTMLElement;
+      expect(spanElement.childNodes.length).to.equal(6);
+
+      spanElement.replaceChild(wrapInFont("America"), spanElement.childNodes[0]);
+      spanElement.replaceChild(wrapInFont("the Virgin"), spanElement.childNodes[2]);
+      spanElement.replaceChild(wrapInFont("island"), spanElement.childNodes[4]);
+
+      // New VDOM ("Amerikaanse Maagde[ne]ilande")
+      const newVNode = h("span", { class: "ReferenceMenuItem-label" }, [
+        "Amerikaanse Maagde",
+        h("mark", { class: "Highlight", key: "1" }, ["ne"]),
+        "ilanden",
+      ]);
+
+      projection.update(newVNode);
+      expect(spanElement.childNodes.length).to.equal(4); // the last translated child is unfortunately not removed
+
+      expect(spanElement.childNodes[0].nodeValue).to.equal("Amerikaanse Maagde");
+      expect(spanElement.childNodes[1].childNodes[0].nodeValue).to.equal("ne");
+      expect(spanElement.childNodes[2].nodeValue).to.equal("ilanden");
+
+      function wrapInFont(text: string) {
+        return dom.create(
+          h("font", { style: { verticalAlign: "inherit" } }, [
+            h("font", { style: { verticalAlign: "inherit" } }, [text]),
+          ])
+        ).domNode;
+      }
+    });
+  });
 });