Skip to content
This repository was archived by the owner on Apr 4, 2019. It is now read-only.

Commit 55d1809

Browse files
author
Godhuda
committed
WIP rehydration
1 parent 72a5663 commit 55d1809

File tree

3 files changed

+269
-10
lines changed

3 files changed

+269
-10
lines changed

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

Lines changed: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { compile } from "../htmlbars-compiler/compiler";
2-
import { manualElement } from "../htmlbars-runtime/render";
2+
import { RenderResult, manualElement } from "../htmlbars-runtime/render";
33
import { hostBlock } from "../htmlbars-runtime/hooks";
44
import render from "../htmlbars-runtime/render";
55
import { blockFor } from "../htmlbars-util/template-utils";
66
import defaultHooks from "../htmlbars-runtime/hooks";
77
import { merge } from "../htmlbars-util/object-utils";
88
import DOMHelper from "../dom-helper";
99
import { equalTokens } from "../htmlbars-test-helpers";
10+
import { rehydrateNode, serializeNode } from "../htmlbars-runtime/render";
1011

1112
var hooks, helpers, partials, env;
1213

@@ -730,3 +731,114 @@ test("The invoke helper hook can instruct the runtime to link the result", funct
730731
equalTokens(result.fragment, "24");
731732
equal(invokeCount, 1);
732733
});
734+
735+
test("it is possible to synthesize a simple fragment and render node and pass it to the rendering process", function() {
736+
let template = compile("<p>{{name}}</p>");
737+
738+
let p = env.dom.createElement('p');
739+
env.dom.appendText(p, 'Godfrey');
740+
741+
let rootMorph = env.dom.createMorph(null, p, p);
742+
let childMorph = env.dom.createMorphAt(p, 0, 0);
743+
744+
rootMorph.childNodes = [childMorph];
745+
746+
let scope = env.hooks.createFreshScope();
747+
let obj = { name: "Yehuda" };
748+
let result = RenderResult.rehydrate(env, scope, template.raw, { renderNode: rootMorph, self: obj });
749+
750+
let original = p.firstChild;
751+
result.render();
752+
753+
strictEqual(p.firstChild, original, "The text node remained stable");
754+
equalTokens(p, "<p>Yehuda</p>");
755+
});
756+
757+
test("it is possible to rehydrate a template with blocks", function() {
758+
let template = compile("<p>{{#if bool}}<span>{{name}}</span>{{/if}}</p>");
759+
760+
let p = env.dom.createElement('p');
761+
let span = env.dom.appendChild(p, env.dom.createElement('span'));
762+
env.dom.appendText(span, 'Godfrey');
763+
764+
let rootMorph = env.dom.createMorph(null, p, p);
765+
let childMorph1 = env.dom.createMorphAt(p, 0, 0);
766+
let childMorph2 = env.dom.createMorphAt(span, 0, 0);
767+
768+
let obj = { bool: true, name: "Yehuda" };
769+
childMorph1.lastYielded = { self: obj, template: template.raw.templates[0], shadowTemplate: null };
770+
771+
rootMorph.childNodes = [childMorph1];
772+
childMorph1.childNodes = [childMorph2];
773+
774+
let scope = env.hooks.createFreshScope();
775+
let result = RenderResult.rehydrate(env, scope, template.raw, { renderNode: rootMorph, self: obj });
776+
777+
let childResult = RenderResult.rehydrate(env, scope, template.raw.templates[0], { renderNode: childMorph1, self: obj });
778+
childMorph1.lastResult = childResult;
779+
780+
let original = p.firstChild;
781+
result.render();
782+
783+
strictEqual(p.firstChild, original, "The text node remained stable");
784+
equalTokens(p, "<p><span>Yehuda</span></p>");
785+
});
786+
787+
test("it is possible to serialize a render node tree", function() {
788+
let template = compile('<p title="{{title}}">{{name}}</p>');
789+
let obj = { title: 'chancancode', name: 'Godfrey' };
790+
let result = template.render(obj, env);
791+
792+
equalTokens(result.fragment, '<p title="chancancode">Godfrey</p>');
793+
794+
let original = result.fragment.firstChild;
795+
let newRoot = env.dom.createMorph(null, original, original);
796+
newRoot.ownerNode = newRoot;
797+
let node = rehydrateNode(serializeNode(result.root), newRoot);
798+
799+
let scope = env.hooks.createFreshScope();
800+
801+
result = RenderResult.rehydrate(env, scope, template.raw, { renderNode: node, self: obj });
802+
803+
result.render();
804+
805+
strictEqual(result.root.firstNode, original);
806+
equalTokens(result.root.firstNode, '<p title="chancancode">Godfrey</p>');
807+
});
808+
809+
test("it is possible to serialize a render node tree with recursive templates", function() {
810+
env.hooks.rehydrateLastYielded = function(env, morph) {
811+
morph.lastYielded.template = morph.lastYielded.templateId;
812+
};
813+
814+
env.hooks.serializeLastYielded = function(env, morph) {
815+
return morph.lastYielded.template;
816+
};
817+
818+
let template = compile('<p title="{{title}}">{{#if bool}}<span>{{name}}</span>{{/if}}</p>');
819+
let obj = { title: 'chancancode', name: 'Godfrey', bool: true };
820+
let result = template.render(obj, env);
821+
822+
equalTokens(result.fragment, '<p title="chancancode"><span>Godfrey</span></p>');
823+
824+
let original = result.fragment.firstChild;
825+
let span = original.firstChild;
826+
let godfrey = span.firstChild;
827+
828+
let newRoot = env.dom.createMorph(null, original, original);
829+
newRoot.ownerNode = newRoot;
830+
let node = rehydrateNode(serializeNode(env, result.root), newRoot);
831+
832+
let scope = env.hooks.createFreshScope();
833+
834+
result = RenderResult.rehydrate(env, scope, template.raw, { renderNode: node, self: obj });
835+
836+
result.render();
837+
838+
let newNode = result.root.firstNode;
839+
strictEqual(newNode, original, "the <p> is the same");
840+
strictEqual(newNode.firstChild, span, "the <span> is the same");
841+
strictEqual(newNode.firstChild.firstChild, godfrey, "the text node is the same");
842+
843+
equalTokens(newNode, '<p title="chancancode"><span>Godfrey</span></p>');
844+
});

‎packages/htmlbars-runtime/lib/hooks.js‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import render from "./render";
22
import MorphList from "../morph-range/morph-list";
3-
import { createChildMorph } from "./render";
3+
import { createChildMorph, RenderResult, LastYielded } from "./render";
44
import { keyLength, shallowCopy } from "../htmlbars-util/object-utils";
55
import { validateChildMorphs } from "../htmlbars-util/morph-utils";
66
import { RenderState, clearMorph, clearMorphList, renderAndCleanup } from "../htmlbars-util/template-utils";
@@ -145,10 +145,11 @@ function yieldTemplate(template, env, parentScope, morph, renderState, visitor)
145145

146146
var scope = parentScope;
147147

148-
if (morph.lastYielded && isStableTemplate(template, morph.lastYielded)) {
148+
if (morph.lastYielded && morph.lastYielded.isStableTemplate(template)) {
149149
return morph.lastResult.revalidateWith(env, undefined, self, blockArguments, visitor);
150150
}
151151

152+
152153
// Check to make sure that we actually **need** a new scope, and can't
153154
// share the parent scope. Note that we need to move this check into
154155
// a host hook, because the host's notion of scope may require a new
@@ -157,7 +158,17 @@ function yieldTemplate(template, env, parentScope, morph, renderState, visitor)
157158
scope = env.hooks.createChildScope(parentScope);
158159
}
159160

160-
morph.lastYielded = { self: self, template: template, shadowTemplate: null };
161+
if (morph.lastYielded && morph.lastYielded.templateId) {
162+
env.hooks.rehydrateLastYielded(env, morph);
163+
164+
if (morph.lastYielded.isStableTemplate(template)) {
165+
let renderResult = RenderResult.rehydrate(env, scope, template, { renderNode: morph, self, blockArguments });
166+
renderResult.render();
167+
return;
168+
}
169+
}
170+
171+
morph.lastYielded = new LastYielded(self, template, null);
161172

162173
// Render the template that was selected by the helper
163174
render(template, env, scope, { renderNode: morph, self: self, blockArguments: blockArguments });
@@ -275,10 +286,6 @@ function yieldItem(template, env, parentScope, morph, renderState, visitor) {
275286
};
276287
}
277288

278-
function isStableTemplate(template, lastYielded) {
279-
return !lastYielded.shadowTemplate && template === lastYielded.template;
280-
}
281-
282289
function yieldInShadowTemplate(template, env, parentScope, morph, renderState, visitor) {
283290
var hostYield = hostYieldWithShadowTemplate(template, env, parentScope, morph, renderState, visitor);
284291

@@ -300,7 +307,7 @@ export function hostYieldWithShadowTemplate(template, env, parentScope, morph, r
300307
blockToYield.arity = template.arity;
301308
env.hooks.bindBlock(env, shadowScope, blockToYield);
302309

303-
morph.lastYielded = { self: self, template: template, shadowTemplate: shadowTemplate };
310+
morph.lastYielded = new LastYielded(self, template, shadowTemplate);
304311

305312
// Render the shadow template with the block available
306313
render(shadowTemplate.raw, env, shadowScope, { renderNode: morph, self: self, blockArguments: blockArguments });
@@ -1094,6 +1101,8 @@ export default {
10941101
linkRenderNode: linkRenderNode,
10951102
partial: partial,
10961103
subexpr: subexpr,
1104+
rehydrateLastYielded: null,
1105+
serializeLastYielded: null,
10971106

10981107
// fundamental hooks with good default behavior
10991108
bindBlock: bindBlock,

‎packages/htmlbars-runtime/lib/render.js‎

Lines changed: 139 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function render(template, env, scope, options) {
2828
return renderResult;
2929
}
3030

31-
function RenderResult(env, scope, options, rootNode, ownerNode, nodes, fragment, template, shouldSetContent) {
31+
export function RenderResult(env, scope, options, rootNode, ownerNode, nodes, fragment, template, shouldSetContent) {
3232
this.root = rootNode;
3333
this.fragment = fragment;
3434

@@ -64,6 +64,7 @@ RenderResult.build = function(env, scope, template, options, contextualElement)
6464
ownerNode = rootNode.ownerNode;
6565
shouldSetContent = true;
6666
} else {
67+
// creating the root render node
6768
rootNode = dom.createMorph(null, fragment.firstChild, fragment.lastChild, contextualElement);
6869
ownerNode = rootNode;
6970
initializeNode(rootNode, ownerNode);
@@ -80,6 +81,14 @@ RenderResult.build = function(env, scope, template, options, contextualElement)
8081
return new RenderResult(env, scope, options, rootNode, ownerNode, nodes, fragment, template, shouldSetContent);
8182
};
8283

84+
RenderResult.rehydrate = function(env, scope, template, options) {
85+
let rootNode = options.renderNode;
86+
let ownerNode = rootNode.ownerNode;
87+
let shouldSetContent = false;
88+
89+
return new RenderResult(env, scope, options, rootNode, ownerNode, rootNode.childNodes, null, template, shouldSetContent);
90+
};
91+
8392
export function manualElement(tagName, attributes, _isEmpty) {
8493
var statements = [];
8594

@@ -324,3 +333,132 @@ export function getCachedFragment(template, env) {
324333

325334
return fragment;
326335
}
336+
337+
export function rehydrateNode(serializedNodes, renderNode) {
338+
let dom = renderNode.domHelper;
339+
let context = renderNode.firstNode.parentNode;
340+
let cache = Object.create(null);
341+
342+
renderNode.childNodes = serializedNodes.map(childNode => _rehydrateNode(renderNode, childNode, dom, context, cache));
343+
return renderNode;
344+
}
345+
346+
function _rehydrateNode(owner, renderNode, dom, context, cache) {
347+
let element, node;
348+
349+
switch (renderNode.type) {
350+
case 'attr':
351+
element = elementFromId(dom, context, renderNode.element, cache);
352+
node = dom.createAttrMorph(element, renderNode.attrName);
353+
break;
354+
case 'range':
355+
element = elementFromId(dom, context, renderNode.parentNode, cache);
356+
node = dom.createMorphAt(element, renderNode.firstNode, renderNode.lastNode);
357+
node.lastYielded = LastYielded.fromTemplateId(renderNode.templateId);
358+
node.childNodes = renderNode.childNodes && renderNode.childNodes.map(childNode => _rehydrateNode(node, childNode, dom, context, cache));
359+
break;
360+
}
361+
362+
initializeNode(node, owner);
363+
return node;
364+
}
365+
366+
function elementFromId(dom, context, id, cache) {
367+
if (id in cache) {
368+
return cache[id];
369+
}
370+
371+
let element = context.querySelector(`[data-hbs-node="${id}"]`);
372+
dom.removeAttribute(element, 'data-hbs-node');
373+
cache[id] = element;
374+
return element;
375+
}
376+
377+
export function serializeNode(env, renderNode) {
378+
let serializationContext = { id: 0 };
379+
380+
return renderNode.childNodes.map(childNode => _serializeNode(env, childNode, serializationContext));
381+
382+
//return [{
383+
//type: 'attr',
384+
//element: "0",
385+
//attrName: 'title'
386+
//}, {
387+
//type: 'range',
388+
//parentNode: "0",
389+
//firstNode: 0,
390+
//lastNode: 0
391+
//}];
392+
}
393+
394+
function _serializeNode(env, renderNode, serializationContext) {
395+
let dom = env.dom;
396+
if (renderNode instanceof dom.MorphClass) {
397+
let parent = renderNode.firstNode.parentNode;
398+
let { firstNode, lastNode } = parentOffsets(dom, parent, renderNode);
399+
400+
return {
401+
type: 'range',
402+
childNodes: renderNode.childNodes && renderNode.childNodes.map(childNode => _serializeNode(env, childNode, serializationContext)),
403+
parentNode: idFromElement(dom, parent, serializationContext),
404+
templateId: renderNode.lastYielded && env.hooks.serializeLastYielded(env, renderNode),
405+
firstNode,
406+
lastNode
407+
};
408+
} else if (renderNode instanceof dom.AttrMorphClass) {
409+
return {
410+
type: 'attr',
411+
element: idFromElement(dom, renderNode.element, serializationContext),
412+
attrName: renderNode.attrName
413+
};
414+
}
415+
}
416+
417+
function parentOffsets(dom, parent, renderNode) {
418+
let current = parent.firstChild;
419+
let firstNeedle = renderNode.firstNode;
420+
let lastNeedle = renderNode.lastNode;
421+
let firstNode, lastNode;
422+
423+
while (current !== firstNeedle) {
424+
current = current.nextSibling;
425+
}
426+
427+
firstNode = current;
428+
429+
while (current !== lastNeedle) {
430+
current = current.nextSibling;
431+
}
432+
433+
lastNode = current;
434+
435+
return { firstNode, lastNode };
436+
}
437+
438+
function idFromElement(dom, element, serializationContext) {
439+
let id = dom.getAttribute(element, 'data-hbs-node');
440+
441+
if (id) {
442+
return id;
443+
}
444+
445+
id = (serializationContext.id++) + '';
446+
dom.setAttribute(element, 'data-hbs-node', id);
447+
return id;
448+
}
449+
450+
export function LastYielded(self, template, shadowTemplate, templateId) {
451+
this.self = self;
452+
this.template = template;
453+
this.shadowTemplate = shadowTemplate;
454+
this.templateId = templateId;
455+
}
456+
457+
LastYielded.fromTemplateId = function(templateId) {
458+
return new LastYielded(null, null, null, templateId);
459+
};
460+
461+
LastYielded.prototype.isStableTemplate = function(nextTemplate) {
462+
return !this.shadowTemplate && nextTemplate === this.template;
463+
};
464+

0 commit comments

Comments
 (0)