Support adjacent text nodes

Author: Godhuda

packages/dom-helper/lib/main.js

@@ -550,6 +550,32 @@ prototype.parseHTML = function(html, contextualElement) {
   return fragment;
 };
 
+const SHOW_TEXT = 4;
+
+prototype.preserveAdjacentTextNodes = function(root) {
+  let iterator = this.document.createNodeIterator(root, SHOW_TEXT, function(node) {
+    return node.previousSibling && node.previousSibling.nodeType === 3;
+  });
+
+  let node;
+
+  /*jshint boss:true*/
+  while (node = iterator.nextNode()) {
+    let element = this.createElement('script');
+    this.setAttribute(element, 'data-hbs-split', '');
+    node.parentNode.insertBefore(element, node);
+  }
+};
+
+prototype.restoreAdjacentTextNodes = function(root) {
+  let elements = root.querySelectorAll('script[data-hbs-split]');
+
+  for (let i=0, l=elements.length; i<l; i++) {
+    let element = elements[i];
+    element.parentNode.removeChild(element);
+  }
+};
+
 var parsingNode;
 
 // Used to determine whether a URL needs to be sanitized.

packages/htmlbars-compiler/tests/dirtying-test.js

@@ -7,7 +7,7 @@ import defaultHooks from "../htmlbars-runtime/hooks";
 import { merge } from "../htmlbars-util/object-utils";
 import DOMHelper from "../dom-helper";
 import { equalTokens } from "../htmlbars-test-helpers";
-import { rehydrateNode, serializeNode } from "../htmlbars-runtime/render";
+import { rehydrateNode, prepareAndSerializeNode } from "../htmlbars-runtime/render";
 
 var hooks, helpers, partials, env;
 
@@ -678,7 +678,7 @@ test("it is possible to serialize a render node tree", function() {
   let original = result.fragment.firstChild;
   let newRoot = env.dom.createMorph(null, original, original);
   newRoot.ownerNode = newRoot;
-  let node = rehydrateNode(serializeNode(env, result.root), newRoot);
+  let node = rehydrateNode(prepareAndSerializeNode(env, result.root), newRoot);
 
   let scope = env.hooks.createFreshScope();
 
@@ -703,7 +703,7 @@ test("it is possible to serialize a render node tree with recursive templates",
 
   let newRoot = env.dom.createMorph(null, original, original);
   newRoot.ownerNode = newRoot;
-  let node = rehydrateNode(serializeNode(env, result.root), newRoot);
+  let node = rehydrateNode(prepareAndSerializeNode(env, result.root), newRoot);
 
   let scope = env.hooks.createFreshScope();
 
@@ -718,3 +718,32 @@ test("it is possible to serialize a render node tree with recursive templates",
 
   equalTokens(newNode, '<p title="chancancode"><span>Godfrey</span></p>');
 });
+
+test("it is possible to serialize a template with adjacent text nodes", function() {
+  let template = compile("<p>{{salutation}} {{name}}</p>");
+  let obj = { salutation: 'Mr.', name: 'Godfrey Chan' };
+  let result = template.render(obj, env);
+
+  equalTokens(result.fragment, '<p>Mr. Godfrey Chan</p>');
+
+  let serializedChildNodes = prepareAndSerializeNode(env, result.root);
+  let serialized = result.fragment.cloneNode(true).firstChild;
+
+  // TODO: actually serialize and parse this, so it works with SimpleDOM and is more accurate
+  // at the moment, this is a sanity check that we didn't leave any adjacent text nodes
+  // around.
+  serialized.normalize();
+
+  let newRoot = env.dom.createMorph(null, serialized, serialized);
+
+  let newNode = rehydrateNode(serializedChildNodes, newRoot);
+
+  let scope = env.hooks.createFreshScope();
+
+  obj.name = "Yehuda Katz";
+  result = RenderResult.rehydrate(env, scope, template.raw, { renderNode: newNode, self: obj });
+  newRoot.ownerNode = newRoot;
+  result.render();
+
+  equalTokens(result.root.firstNode, '<p>Mr. Yehuda Katz</p>');
+});

packages/htmlbars-runtime/lib/render.js

@@ -331,6 +331,7 @@ export function getCachedFragment(template, env) {
 export function rehydrateNode(serializedNodes, renderNode) {
   let dom = renderNode.domHelper;
   let context = renderNode.firstNode.parentNode;
+  dom.restoreAdjacentTextNodes(context);
   let cache = Object.create(null);
 
   renderNode.childNodes = serializedNodes.map(childNode => _rehydrateNode(renderNode, childNode, dom, context, cache));
@@ -368,10 +369,12 @@ function elementFromId(dom, context, id, cache) {
   return element;
 }
 
-export function serializeNode(env, renderNode) {
+export function prepareAndSerializeNode(env, renderNode) {
   let serializationContext = { id: 0 };
 
-  return renderNode.childNodes.map(childNode => _serializeNode(env, childNode, serializationContext));
+  let serialized = renderNode.childNodes.map(childNode => _serializeNode(env, childNode, serializationContext));
+  env.dom.preserveAdjacentTextNodes(renderNode.firstNode.parentNode);
+  return serialized;
 
   //return [{
     //type: 'attr',
@@ -413,18 +416,21 @@ function parentOffsets(dom, parent, renderNode) {
   let firstNeedle = renderNode.firstNode;
   let lastNeedle = renderNode.lastNode;
   let firstNode, lastNode;
+  let offset = 0;
 
   while (current !== firstNeedle) {
+    offset++;
     current = current.nextSibling;
   }
 
-  firstNode = current;
+  firstNode = offset;
 
   while (current !== lastNeedle) {
+    offset++;
     current = current.nextSibling;
   }
 
-  lastNode = current;
+  lastNode = offset;
 
   return { firstNode, lastNode };
 }