add support for rendering partials (#29)

samouri · web-flow · commit 1b17192a611c · 2021-10-14T15:57:36.000-04:00
diff --git a/scripts/benchmark.js b/scripts/benchmark.js
@@ -1,4 +1,4 @@
-import {renderAst} from '../dist/src/index.js';
+import {renderAstDocument, renderAstNodes} from '../dist/src/index.js';
 import {parse} from '../dist/test/html-utils.js';
 import Benchmark from 'benchmark';
 
@@ -8,32 +8,59 @@ function getDoc(n) {
   return parse(`<html><head></head><body>${nodes}</body></html>`);
 }
 
+// Returns N-lenth array where each element is a NodeProto
+function getNodes(n) {
+  return new Array(n).fill({
+    tagid: 0,
+    value: 'bento-component',
+    children: [],
+    attributes: [],
+  });
+}
+
 const doc1 = getDoc(1);
 const doc10 = getDoc(10);
 const doc100 = getDoc(100);
 const doc1000 = getDoc(1000);
 const doc10000 = getDoc(10000);
 const doc100000 = getDoc(100000);
 
+const nodes1 = getNodes(1);
+const nodes10 = getNodes(10);
+const nodes100 = getNodes(100);
+const nodes1000 = getNodes(1000);
+
 var suite = new Benchmark.Suite();
 suite
   .add('Document: 1 node', function () {
-    renderAst(doc1, {});
+    renderAstDocument(doc1, {});
   })
   .add('Document: 10 nodes', function () {
-    renderAst(doc10, {});
+    renderAstDocument(doc10, {});
   })
   .add('Document: 100 nodes', function () {
-    renderAst(doc100, {});
+    renderAstDocument(doc100, {});
   })
   .add('Document: 1000 nodes', function () {
-    renderAst(doc1000, {});
+    renderAstDocument(doc1000, {});
   })
   .add('Document: 10000 nodes', function () {
-    renderAst(doc10000, {});
+    renderAstDocument(doc10000, {});
   })
   .add('Document: 100000 nodes', function () {
-    renderAst(doc100000, {});
+    renderAstDocument(doc100000, {});
+  })
+  .add('Nodes: 1', function () {
+    renderAstNodes(nodes1, {});
+  })
+  .add('Nodes: 10', function () {
+    renderAstNodes(nodes10, {});
+  })
+  .add('Nodes: 100', function () {
+    renderAstNodes(nodes100, {});
+  })
+  .add('Nodes: 1000', function () {
+    renderAstNodes(nodes1000, {});
   })
   .on('complete', function () {
     const results = Array.from(this);
diff --git a/src/ast.ts b/src/ast.ts
@@ -21,7 +21,7 @@ export function isElementNode(node: NodeProto): node is ElementNodeProto {
 }
 
 export function fromDocument(doc: Document): TreeProto {
-  const children = Array.from(doc.childNodes).map(mapDomNodeToNodeProto);
+  const children = Array.from(doc.childNodes).map(fromNode);
   return {
     quirks_mode: doc.compatMode === 'BackCompat',
     tree: [{tagid: 92, children}],
@@ -34,7 +34,7 @@ enum NodeType {
   Text = 3,
 }
 
-function mapDomNodeToNodeProto(node: Node): NodeProto {
+export function fromNode(node: Node): NodeProto {
   if (node.nodeType !== NodeType.Element && node.nodeType !== NodeType.Text) {
     throw new Error(`Unsupported nodeType: ${node.nodeType}`);
   }
@@ -52,7 +52,7 @@ function mapDomNodeToNodeProto(node: Node): NodeProto {
     tagid: getTagId(elementNode.tagName),
     value: elementNode.tagName.toLowerCase(),
     attributes,
-    children: Array.from(node.childNodes).map(mapDomNodeToNodeProto),
+    children: Array.from(node.childNodes).map(fromNode),
   };
 }
 
diff --git a/src/dom.ts b/src/dom.ts
@@ -47,11 +47,14 @@ export function fromTreeProto(ast: TreeProto) {
   return doc;
 }
 
-export function fromTreeProtoHelper(
-  nodes: NodeProto[],
-  doc: Document,
-  parent: Node
-) {
+// TODO: research optimization opportunity to reuse the same doc.
+export function fromNodeProto(node: NodeProto): Element {
+  const doc: Document = createDocument();
+  fromTreeProtoHelper([node], doc, doc);
+  return doc.children[0];
+}
+
+function fromTreeProtoHelper(nodes: NodeProto[], doc: Document, parent: Node) {
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
     if (!isElementNode(node)) {
diff --git a/src/index.ts b/src/index.ts
@@ -15,7 +15,7 @@
  */
 import * as ast from './ast.js';
 import * as dom from './dom.js';
-import {TreeProto} from './protos.js';
+import {TreeProto, NodeProto} from './protos.js';
 
 export * from './protos.js';
 
@@ -27,16 +27,49 @@ function defaultHandleError(tagName, e: Error) {
   throw new Error(`[${tagName}]: ${e.stack}`);
 }
 
-export function renderAst(
+export function renderAstDocument(
   tree: TreeProto,
   instructions: InstructionMap,
   {handleError = defaultHandleError} = {}
 ): TreeProto {
   const doc = dom.fromTreeProto(tree);
+  renderNodeDeep(doc, instructions, {handleError});
+  return {
+    ...ast.fromDocument(doc),
+    // these two don't have clear equivalents in worker-dom,
+    // so we retain them here.
+    root: tree.root,
+    quirks_mode: tree.quirks_mode,
+  };
+}
+
+export function renderAstNodes(
+  nodes: NodeProto[],
+  instructions: InstructionMap,
+  {handleError = defaultHandleError} = {}
+): NodeProto[] {
+  return nodes.map((astNode: NodeProto) => {
+    const domNode = dom.fromNodeProto(astNode);
+    renderNodeDeep(domNode, instructions, {handleError});
+    return ast.fromNode(domNode);
+  });
+}
 
+function renderNodeDeep(
+  node: Element,
+  instructions: InstructionMap,
+  {handleError = defaultHandleError} = {}
+): void {
+  // First render given node if applicable
+  if (node.tagName.toLowerCase() in instructions) {
+    const buildDom = instructions[node.tagName.toLowerCase()];
+    buildDom(node);
+  }
+
+  // Then deeply render all children.
   // TODO: Optimization opportunity by writing a custom walk instead of N querySelectorAll.
   for (let [tagName, buildDom] of Object.entries(instructions)) {
-    const elements = doc.querySelectorAll(tagName);
+    const elements = Array.from(node.querySelectorAll(tagName));
     for (const element of elements) {
       // Do not render anything inside of templates.
       if (isInTemplate(element)) {
@@ -50,12 +83,6 @@ export function renderAst(
       }
     }
   }
-
-  const transformedAst = ast.fromDocument(doc);
-  transformedAst.root = tree.root;
-  transformedAst.quirks_mode = tree.quirks_mode;
-
-  return transformedAst;
 }
 
 function isInTemplate(node: Node) {
diff --git a/test/html-utils.ts b/test/html-utils.ts
@@ -17,11 +17,11 @@ import * as parse5 from 'parse5';
 import {getNumTerms, isElementNode} from '../src/ast.js';
 import {DocumentNodeProto, NodeProto, TreeProto} from '../src/protos.js';
 import {getTagId} from '../src/htmltagenum.js';
-import {renderAst, InstructionMap} from '../src/index.js';
+import {renderAstDocument, InstructionMap} from '../src/index.js';
 
 export function renderHtml(html: string, instructions: InstructionMap): string {
   const tree = parse(html);
-  const renderedAst = renderAst(tree, instructions);
+  const renderedAst = renderAstDocument(tree, instructions);
   return print(renderedAst);
 }
 
diff --git a/test/test-index.ts b/test/test-index.ts
@@ -16,7 +16,7 @@
 import test from 'ava';
 import {DocumentNodeProto, NodeProto, TreeProto} from '../src/protos.js';
 import {getTagId} from '../src/htmltagenum.js';
-import {renderAst} from '../src/index.js';
+import {renderAstDocument, renderAstNodes} from '../src/index.js';
 
 /**
  * Helper for generating NodeProtos.
@@ -54,7 +54,7 @@ function treeProto(
 
 test('should have no effect with empty instructions', (t) => {
   const ast = treeProto();
-  t.deepEqual(renderAst(ast, {}), ast);
+  t.deepEqual(renderAstDocument(ast, {}), ast);
 });
 
 test('should render provided instruction', (t) => {
@@ -70,7 +70,7 @@ test('should render provided instruction', (t) => {
   const expected = treeProto([
     h('amp-element', {rendered: ''}, ['answer: 42']),
   ]);
-  t.deepEqual(renderAst(ast, instructions), expected);
+  t.deepEqual(renderAstDocument(ast, instructions), expected);
 });
 
 test('should return the error if a single instruction throws', (t) => {
@@ -81,7 +81,7 @@ test('should return the error if a single instruction throws', (t) => {
   };
 
   const ast = treeProto(h('amp-fail'));
-  t.throws(() => renderAst(ast, instructions), {message: /amp-fail/});
+  t.throws(() => renderAstDocument(ast, instructions), {message: /amp-fail/});
 });
 
 test('should only throw the first error even if multiple would throw', (t) => {
@@ -97,10 +97,10 @@ test('should only throw the first error even if multiple would throw', (t) => {
     },
   };
 
-  const ast = treeProto(
-    h('amp-success', {}, [h('amp-fail1'), h('amp-fail2'), h('amp-fail2')])
-  );
-  t.throws(() => renderAst(ast, instructions), {message: /amp-fail1/});
+  const nodes = h('amp-success', {}, [h('amp-fail1'), h('amp-fail2')]);
+  const ast = treeProto(nodes);
+  t.throws(() => renderAstNodes([nodes], instructions), {message: /amp-fail1/});
+  t.throws(() => renderAstDocument(ast, instructions), {message: /amp-fail1/});
 });
 
 test('should allow a custom error handler', (t) => {
@@ -122,7 +122,7 @@ test('should allow a custom error handler', (t) => {
 
   const errors = [];
   const handleError = (tagName) => errors.push(tagName);
-  renderAst(ast, instructions, {handleError});
+  renderAstDocument(ast, instructions, {handleError});
   t.deepEqual(errors, ['amp-fail1', 'amp-fail1', 'amp-fail2']);
 });
 
@@ -136,7 +136,7 @@ test('should be unaffected by async modifications', async (t) => {
   };
 
   const ast = treeProto([h('amp-element')]);
-  const rendered = renderAst(ast, instructions);
+  const rendered = renderAstDocument(ast, instructions);
   await new Promise((r) => setTimeout(r)); // Waits a macrotask.
 
   t.deepEqual(rendered, ast);
@@ -150,18 +150,18 @@ test('should not render elements within templates', (t) => {
   };
 
   const ast = treeProto(h('template', {}, [h('amp-element')]));
-  const rendered = renderAst(ast, instructions);
+  const rendered = renderAstDocument(ast, instructions);
 
   t.deepEqual(rendered, ast);
 });
 
 test('should conserve quirks_mode and root', (t) => {
   const tree: [DocumentNodeProto] = [{tagid: 92, children: []}];
   let ast: TreeProto = {root: 42, quirks_mode: true, tree};
-  t.deepEqual(renderAst(ast, {}), ast);
+  t.deepEqual(renderAstDocument(ast, {}), ast);
 
   ast = {root: 7, quirks_mode: false, tree};
-  t.deepEqual(renderAst(ast, {}), ast);
+  t.deepEqual(renderAstDocument(ast, {}), ast);
 });
 
 test('should set tagids of element nodes', (t) => {
@@ -172,7 +172,7 @@ test('should set tagids of element nodes', (t) => {
   }
 
   const inputAst: TreeProto = treeProto(h('amp-list'));
-  let renderedAst = renderAst(inputAst, {'amp-list': buildAmpList});
+  let renderedAst = renderAstDocument(inputAst, {'amp-list': buildAmpList});
 
   t.deepEqual(
     renderedAst,
@@ -191,7 +191,7 @@ test('should set num_terms of text nodes', (t) => {
   }
 
   const inputAst: TreeProto = treeProto([h('amp-list')]);
-  let result = renderAst(inputAst, {'amp-list': buildAmpList});
+  let result = renderAstDocument(inputAst, {'amp-list': buildAmpList});
 
   t.deepEqual(
     result,
@@ -200,3 +200,33 @@ test('should set num_terms of text nodes', (t) => {
   t.is(result.tree[0].children[0]?.['children']?.[0]?.num_terms, 2);
   t.is(result.tree[0].children[0]?.['children']?.[1]?.num_terms, 3);
 });
+
+test('should render node partials', (t) => {
+  function buildAmpList(element) {
+    const doc = element.ownerDocument;
+    element.appendChild(doc.createTextNode('element text'));
+  }
+
+  const inputNode: NodeProto = h('amp-list');
+  const renderedNode: NodeProto = h('amp-list', {}, ['element text']);
+
+  let resultSingle = renderAstNodes([inputNode], {'amp-list': buildAmpList});
+  t.deepEqual(resultSingle, [renderedNode]);
+
+  let resultDouble = renderAstNodes([inputNode, inputNode], {
+    'amp-list': buildAmpList,
+  });
+  t.deepEqual(resultDouble, [renderedNode, renderedNode]);
+});
+
+test('should deeply render node partials', (t) => {
+  function buildAmpEl(element: Element) {
+    element.setAttribute('rendered', '');
+  }
+
+  const inputAst: NodeProto = h('amp-el', {}, [h('amp-el')]);
+  let result = renderAstNodes([inputAst], {'amp-el': buildAmpEl});
+  t.deepEqual(result, [
+    h('amp-el', {rendered: ''}, [h('amp-el', {rendered: ''})]),
+  ]);
+});

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ export function isElementNode(node: NodeProto): node is ElementNodeProto {`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`export function fromDocument(doc: Document): TreeProto {`
`24`		`- const children = Array.from(doc.childNodes).map(mapDomNodeToNodeProto);`
	`24`	`+ const children = Array.from(doc.childNodes).map(fromNode);`
`25`	`25`	`return {`
`26`	`26`	`quirks_mode: doc.compatMode === 'BackCompat',`
`27`	`27`	`tree: [{tagid: 92, children}],`
`@@ -34,7 +34,7 @@ enum NodeType {`
`34`	`34`	`Text = 3,`
`35`	`35`	`}`
`36`	`36`
`37`		`-function mapDomNodeToNodeProto(node: Node): NodeProto {`
	`37`	`+export function fromNode(node: Node): NodeProto {`
`38`	`38`	`if (node.nodeType !== NodeType.Element && node.nodeType !== NodeType.Text) {`
`39`	`39`	throw new Error(`Unsupported nodeType: ${node.nodeType}`);
`40`	`40`	`}`
`@@ -52,7 +52,7 @@ function mapDomNodeToNodeProto(node: Node): NodeProto {`
`52`	`52`	`tagid: getTagId(elementNode.tagName),`
`53`	`53`	`value: elementNode.tagName.toLowerCase(),`
`54`	`54`	`attributes,`
`55`		`- children: Array.from(node.childNodes).map(mapDomNodeToNodeProto),`
	`55`	`+ children: Array.from(node.childNodes).map(fromNode),`
`56`	`56`	`};`
`57`	`57`	`}`
`58`	`58`