Add support for <template>s

Author: wooorm

index.js

@@ -12,6 +12,8 @@ var own = {}.hasOwnProperty;
 var one = zwitch('type');
 var all = mapz(one, {key: 'children', indices: false});
 
+var customProps = ['__location', 'childNodes', 'content', 'parentNode', 'namespaceURI'];
+
 one.handlers.root = root;
 one.handlers.element = element;
 one.handlers.text = text;
@@ -63,6 +65,7 @@ function element(node) {
 
   return toH(function (name, attrs) {
     var values = [];
+    var content;
     var key;
 
     for (key in attrs) {
@@ -79,12 +82,18 @@ function element(node) {
       }
     }
 
+    if (name === 'template') {
+      content = transform(shallow.content);
+      delete content.mode;
+      content.nodeName = '#document-fragment';
+    }
+
     return wrap(node, {
       nodeName: node.tagName,
       tagName: node.tagName,
       attrs: values,
       childNodes: node.children ? all(node) : []
-    });
+    }, content);
   }, shallow);
 }
 
@@ -112,7 +121,7 @@ function comment(node) {
 }
 
 /* Patch position. */
-function wrap(node, ast) {
+function wrap(node, ast, content) {
   if (node.position && node.position.start && node.position.end) {
     ast.__location = {
       line: node.position.start.line,
@@ -122,6 +131,10 @@ function wrap(node, ast) {
     };
   }
 
+  if (content) {
+    ast.content = content;
+  }
+
   return ast;
 }
 
@@ -137,7 +150,7 @@ function patch(node, parent, ns) {
   var key;
 
   for (key in node) {
-    if (key !== '__location' && key !== 'childNodes') {
+    if (customProps.indexOf(key) === -1) {
       replacement[key] = node[key];
     }
   }
@@ -160,6 +173,10 @@ function patch(node, parent, ns) {
     }
   }
 
+  if (name === 'template') {
+    replacement.content = patch(node.content, null, ns);
+  }
+
   if (parent) {
     replacement.parentNode = parent;
   }

test/element.js

@@ -91,5 +91,59 @@ test('element', function (t) {
     'should transform foreign elements'
   );
 
+  node = parse5.parseFragment('<template id="a">Alpha</template>');
+
+  node = node.childNodes[0];
+  delete node.parentNode;
+
+  t.deepEqual(
+    inspect(toParse5({
+      type: 'element',
+      tagName: 'template',
+      properties: {id: 'a'},
+      children: [],
+      content: {
+        type: 'root',
+        children: [{type: 'text', value: 'Alpha'}]
+      }
+    }), {depth: null}),
+    inspect(node, {depth: null}),
+    'should transform templates with text'
+  );
+
+  node = parse5.parseFragment('<template id="b"><b>bold</b> and <i>italic</i></template>');
+
+  node = node.childNodes[0];
+  delete node.parentNode;
+
+  t.deepEqual(
+    inspect(toParse5({
+      type: 'element',
+      tagName: 'template',
+      properties: {id: 'b'},
+      children: [],
+      content: {
+        type: 'root',
+        children: [
+          {
+            type: 'element',
+            tagName: 'b',
+            properties: {},
+            children: [{type: 'text', value: 'bold'}]
+          },
+          {type: 'text', value: ' and '},
+          {
+            type: 'element',
+            tagName: 'i',
+            properties: {},
+            children: [{type: 'text', value: 'italic'}]
+          }
+        ]
+      }
+    }), {depth: null}),
+    inspect(node, {depth: null}),
+    'should transform templates with elements'
+  );
+
   t.end();
 });