Add fragments to lib/babel

choojs · Mar 20, 2018 · 52b25df · 52b25df
1 parent 8be9029
commit 52b25df
Showing 1 changed file with 22 additions and 7 deletions.
diff --git a/lib/babel.js b/lib/babel.js
@@ -76,6 +76,15 @@ module.exports = (babel) => {
       [t.stringLiteral(text)]
     )
 
+  /**
+   * Returns a node that creates a fragment.
+   */
+  const createFragment = (text) =>
+    t.callExpression(
+      t.memberExpression(t.identifier('document'), t.identifier('createDocumentFragment')),
+      []
+    )
+
   /**
    * Returns a node that sets a DOM property.
    */
@@ -154,8 +163,10 @@ module.exports = (babel) => {
     const expressions = path.node.expressions
     const expressionPlaceholders = expressions.map((expr, i) => getPlaceholder(i))
 
-    const root = hyperx(transform, { comments: true }).apply(null,
-      [quasis].concat(expressionPlaceholders))
+    const root = hyperx(transform, {
+      comments: true,
+      createFragment: children => transform('nanohtml-fragment', {}, children)
+    }).apply(null, [quasis].concat(expressionPlaceholders))
 
     /**
      * Convert placeholders used in the template string back to the AST nodes
@@ -188,12 +199,16 @@ module.exports = (babel) => {
 
       const result = []
 
-      // Use the SVG namespace for svg elements.
-      if (SVG_TAGS.includes(tag)) {
-        state.svgNamespaceId.used = true
-        result.push(t.assignmentExpression('=', id, createNsElement(state.svgNamespaceId, tag)))
+      if (tag === 'nanohtml-fragment') {
+        result.push(t.assignmentExpression('=', id, createFragment()))
       } else {
-        result.push(t.assignmentExpression('=', id, createElement(tag)))
+        // Use the SVG namespace for svg elements.
+        if (SVG_TAGS.includes(tag)) {
+          state.svgNamespaceId.used = true
+          result.push(t.assignmentExpression('=', id, createNsElement(state.svgNamespaceId, tag)))
+        } else {
+          result.push(t.assignmentExpression('=', id, createElement(tag)))
+        }
       }
 
       Object.keys(props).forEach((propName) => {