babel-plugin-jsx-dom-expressions 0.30.8 → 0.31.0-beta.9

package/index.js

@@ -16,14 +16,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -227,36 +225,27 @@ function getConfig(path) {
 function registerImportMethod(path, name) {
   const imports =
     path.scope.getProgramParent().data.imports ||
-    (path.scope.getProgramParent().data.imports = new Set());
+    (path.scope.getProgramParent().data.imports = new Map());
   if (!imports.has(name)) {
-    helperModuleImports.addNamed(path, name, getConfig(path).moduleName, {
+    const identifier = helperModuleImports.addNamed(path, name, getConfig(path).moduleName, {
       nameHint: `_$${name}`
     });
-    imports.add(name);
+    imports.set(name, identifier);
+    return identifier;
   }
+  return imports.get(name);
 }
 
 function jsxElementNameToString(node) {
   if (t__namespace.isJSXMemberExpression(node)) {
     return `${jsxElementNameToString(node.object)}.${node.property.name}`;
   }
-  if (t__namespace.isJSXIdentifier(node)) {
+  if (t__namespace.isJSXIdentifier(node) || t__namespace.isIdentifier(node)) {
     return node.name;
   }
   return `${node.namespace.name}:${node.name.name}`;
 }
 
-function tagNameToIdentifier(name) {
-  const parts = name.split(".");
-  if (parts.length === 1) return t__namespace.identifier(name);
-  let part;
-  let base = t__namespace.identifier(parts.shift());
-  while ((part = parts.shift())) {
-    base = t__namespace.memberExpression(base, t__namespace.identifier(part));
-  }
-  return base;
-}
-
 function getTagName(tag) {
   const jsxName = tag.openingElement.name;
   return jsxElementNameToString(jsxName);
@@ -319,12 +308,13 @@ function isDynamic(path, { checkMember, checkTags, checkCallExpressions = true,
 
 function getStaticExpression(path) {
   const node = path.node;
-  let value;
+  let value, type;
   return (
     t__namespace.isJSXExpressionContainer(node) &&
     t__namespace.isJSXElement(path.parent) &&
     !isComponent(getTagName(path.parent)) &&
     (value = path.get("expression").evaluate().value) !== undefined &&
+    ((type = typeof value) === "string" || type === "number") &&
     value
   );
 }
@@ -395,7 +385,7 @@ function wrappedByText(list, startIndex) {
 function transformCondition(path, inline, deep) {
   const config = getConfig(path);
   const expr = path.node;
-  registerImportMethod(path, config.memoWrapper);
+  const memo = registerImportMethod(path, config.memoWrapper);
   let dTest, cond, id;
   if (
     t__namespace.isConditionalExpression(expr) &&
@@ -410,7 +400,7 @@ function transformCondition(path, inline, deep) {
       if (!t__namespace.isBinaryExpression(cond))
         cond = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", cond, true), true);
       id = inline
-        ? t__namespace.callExpression(t__namespace.identifier(`_$${config.memoWrapper}`), [
+        ? t__namespace.callExpression(memo, [
             t__namespace.arrowFunctionExpression([], cond),
             t__namespace.booleanLiteral(true)
           ])
@@ -439,7 +429,7 @@ function transformCondition(path, inline, deep) {
       if (!t__namespace.isBinaryExpression(cond))
         cond = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", cond, true), true);
       id = inline
-        ? t__namespace.callExpression(t__namespace.identifier(`_$${config.memoWrapper}`), [
+        ? t__namespace.callExpression(memo, [
             t__namespace.arrowFunctionExpression([], cond),
             t__namespace.booleanLiteral(true)
           ])
@@ -453,7 +443,7 @@ function transformCondition(path, inline, deep) {
         t__namespace.variableDeclarator(
           id,
           config.memoWrapper
-            ? t__namespace.callExpression(t__namespace.identifier(`_$${config.memoWrapper}`), [
+            ? t__namespace.callExpression(memo, [
                 t__namespace.arrowFunctionExpression([], cond),
                 t__namespace.booleanLiteral(true)
               ])
@@ -547,9 +537,8 @@ function transformElement$2(path, info) {
     results.template += `</${tagName}>`;
   }
   if (info.topLevel && config.hydratable && results.hasHydratableEvent) {
-    registerImportMethod(path, "runHydrationEvents");
     results.postExprs.push(
-      t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.identifier("_$runHydrationEvents"), []))
+      t__namespace.expressionStatement(t__namespace.callExpression(registerImportMethod(path, "runHydrationEvents"), []))
     );
   }
   if (wrapSVG) results.template += "</svg>";
@@ -585,9 +574,8 @@ function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
   }
 
   if (name === "style") {
-    registerImportMethod(path, "style");
     return t__namespace.callExpression(
-      t__namespace.identifier("_$style"),
+      registerImportMethod(path, "style"),
       prevId ? [elem, value, prevId] : [elem, value]
     );
   }
@@ -597,9 +585,8 @@ function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
   }
 
   if (name === "classList") {
-    registerImportMethod(path, "classList");
     return t__namespace.callExpression(
-      t__namespace.identifier("_$classList"),
+      registerImportMethod(path, "classList"),
       prevId ? [elem, value, prevId] : [elem, value]
     );
   }
@@ -625,16 +612,14 @@ function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
   !isSVG && (name = name.toLowerCase());
   const ns = isNameSpaced && SVGNamespace[name.split(":")[0]];
   if (ns) {
-    registerImportMethod(path, "setAttributeNS");
-    return t__namespace.callExpression(t__namespace.identifier("_$setAttributeNS"), [
+    return t__namespace.callExpression(registerImportMethod(path, "setAttributeNS"), [
       elem,
       t__namespace.stringLiteral(ns),
       t__namespace.stringLiteral(name),
       value
     ]);
   } else {
-    registerImportMethod(path, "setAttribute");
-    return t__namespace.callExpression(t__namespace.identifier("_$setAttribute"), [elem, t__namespace.stringLiteral(name), value]);
+    return t__namespace.callExpression(registerImportMethod(path, "setAttribute"), [elem, t__namespace.stringLiteral(name), value]);
   }
 }
 
@@ -657,8 +642,7 @@ function transformAttributes$2(path, results) {
     hasHydratableEvent = false,
     children,
     attributes = path.get("openingElement").get("attributes");
-  const spread = t__namespace.identifier("_$spread"),
-    tagName = getTagName(path.node),
+  const tagName = getTagName(path.node),
     isSVG = SVGElements.has(tagName),
     isCE = tagName.includes("-"),
     hasChildren = path.node.children.length > 0,
@@ -793,10 +777,9 @@ function transformAttributes$2(path, results) {
     .forEach(attribute => {
       const node = attribute.node;
       if (t__namespace.isJSXSpreadAttribute(node)) {
-        registerImportMethod(attribute, "spread");
         results.exprs.push(
           t__namespace.expressionStatement(
-            t__namespace.callExpression(spread, [
+            t__namespace.callExpression(registerImportMethod(attribute, "spread"), [
               elem,
               isDynamic(attribute.get("argument"), {
                 checkMember: true
@@ -898,9 +881,11 @@ function transformAttributes$2(path, results) {
             );
           }
         } else if (key.startsWith("use:")) {
+          // Some trick to treat JSXIdentifier as Identifier
+          node.name.name.type = 'Identifier';
           results.exprs.unshift(
             t__namespace.expressionStatement(
-              t__namespace.callExpression(t__namespace.identifier(node.name.name.name), [
+              t__namespace.callExpression(node.name.name, [
                 elem,
                 t__namespace.arrowFunctionExpression(
                   [],
@@ -972,10 +957,9 @@ function transformAttributes$2(path, results) {
                 )
               );
             } else {
-              registerImportMethod(path, "addEventListener");
               results.exprs.unshift(
                 t__namespace.expressionStatement(
-                  t__namespace.callExpression(t__namespace.identifier("_$addEventListener"), [
+                  t__namespace.callExpression(registerImportMethod(path, "addEventListener"), [
                     elem,
                     t__namespace.stringLiteral(ev),
                     handler,
@@ -1012,10 +996,9 @@ function transformAttributes$2(path, results) {
                 )
               );
             } else {
-              registerImportMethod(path, "addEventListener");
               results.exprs.unshift(
                 t__namespace.expressionStatement(
-                  t__namespace.callExpression(t__namespace.identifier("_$addEventListener"), [
+                  t__namespace.callExpression(registerImportMethod(path, "addEventListener"), [
                     elem,
                     t__namespace.stringLiteral(ev),
                     handler
@@ -1097,6 +1080,7 @@ function transformChildren$2(path, results, config) {
     if (!child) return;
     results.template += child.template;
     if (child.id) {
+      if (child.tagName === "head") return;
       if (config.hydratable && tagName === "html") {
         registerImportMethod(path, "getNextMatch");
       }
@@ -1108,7 +1092,7 @@ function transformChildren$2(path, results, config) {
         t__namespace.variableDeclarator(
           child.id,
           config.hydratable && tagName === "html"
-            ? t__namespace.callExpression(t__namespace.identifier("_$getNextMatch"), [
+            ? t__namespace.callExpression(registerImportMethod(path, "getNextMatch"), [
                 walk,
                 t__namespace.stringLiteral(child.tagName)
               ])
@@ -1123,7 +1107,7 @@ function transformChildren$2(path, results, config) {
       nextPlaceholder = null;
       i++;
     } else if (child.exprs.length) {
-      registerImportMethod(path, "insert");
+      const insert = registerImportMethod(path, "insert");
       const multi = checkLength(filteredChildren),
         markers = config.hydratable && multi;
       // boxed by textNodes
@@ -1139,7 +1123,7 @@ function transformChildren$2(path, results, config) {
         results.exprs.push(
           t__namespace.expressionStatement(
             t__namespace.callExpression(
-              t__namespace.identifier("_$insert"),
+              insert,
               contentId
                 ? [results.id, child.exprs[0], exprId, contentId]
                 : [results.id, child.exprs[0], exprId]
@@ -1150,7 +1134,7 @@ function transformChildren$2(path, results, config) {
       } else if (multi) {
         results.exprs.push(
           t__namespace.expressionStatement(
-            t__namespace.callExpression(t__namespace.identifier("_$insert"), [
+            t__namespace.callExpression(insert, [
               results.id,
               child.exprs[0],
               nextChild$1(childNodes, index) || t__namespace.nullLiteral()
@@ -1161,7 +1145,7 @@ function transformChildren$2(path, results, config) {
         results.exprs.push(
           t__namespace.expressionStatement(
             t__namespace.callExpression(
-              t__namespace.identifier("_$insert"),
+              insert,
               config.hydratable
                 ? [
                     results.id,
@@ -1196,12 +1180,11 @@ function createPlaceholder(path, results, tempPath, i, char) {
   let contentId;
   results.template += `<!${char}>`;
   if (config.hydratable && char === "/") {
-    registerImportMethod(path, "getNextMarker");
     contentId = path.scope.generateUidIdentifier("co$");
     results.decl.push(
       t__namespace.variableDeclarator(
         t__namespace.arrayPattern([exprId, contentId]),
-        t__namespace.callExpression(t__namespace.identifier("_$getNextMarker"), [
+        t__namespace.callExpression(registerImportMethod(path, "getNextMarker"), [
           t__namespace.memberExpression(t__namespace.identifier(tempPath), t__namespace.identifier("nextSibling"))
         ])
       )
@@ -1267,13 +1250,12 @@ function detectExpressions(children, index, config) {
 }
 
 function contextToCustomElement(path, results) {
-  registerImportMethod(path, "getOwner");
   results.exprs.push(
     t__namespace.expressionStatement(
       t__namespace.assignmentExpression(
         "=",
         t__namespace.memberExpression(results.id, t__namespace.identifier("_$owner")),
-        t__namespace.callExpression(t__namespace.identifier("_$getOwner"), [])
+        t__namespace.callExpression(registerImportMethod(path, "getOwner"), [])
       )
     )
   );
@@ -1306,8 +1288,7 @@ function createTemplate$2(path, result, wrap) {
     }
   }
   if (wrap && result.dynamic && config.memoWrapper) {
-    registerImportMethod(path, config.memoWrapper);
-    return t__namespace.callExpression(t__namespace.identifier(`_$${config.memoWrapper}`), [result.exprs[0]]);
+    return t__namespace.callExpression(registerImportMethod(path, config.memoWrapper), [result.exprs[0]]);
   }
   return result.exprs[0];
 }
@@ -1318,11 +1299,10 @@ function appendTemplates$1(path, templates) {
       cooked: template.template,
       raw: template.template
     };
-    registerImportMethod(path, "template");
     return t__namespace.variableDeclarator(
       template.id,
       t__namespace.callExpression(
-        t__namespace.identifier("_$template"),
+        registerImportMethod(path, "template"),
         [
           t__namespace.templateLiteral([t__namespace.templateElement(tmpl, true)], []),
           t__namespace.numericLiteral(template.elementCount)
@@ -1354,11 +1334,10 @@ function registerTemplate(path, results) {
         });
       }
     }
-    hydratable && registerImportMethod(path, "getNextElement");
     decl = t__namespace.variableDeclarator(
       results.id,
       hydratable
-        ? t__namespace.callExpression(t__namespace.identifier("_$getNextElement"), templateId ? [templateId] : [])
+        ? t__namespace.callExpression(registerImportMethod(path, "getNextElement"), templateId ? [templateId] : [])
         : t__namespace.callExpression(t__namespace.memberExpression(templateId, t__namespace.identifier("cloneNode")), [
             t__namespace.booleanLiteral(true)
           ])
@@ -1371,9 +1350,8 @@ function registerTemplate(path, results) {
 function wrapDynamics$1(path, dynamics) {
   if (!dynamics.length) return;
   const config = getConfig(path);
-  registerImportMethod(path, config.effectWrapper);
 
-  const effectWrapperId = `_$${config.effectWrapper}`;
+  const effectWrapperId = registerImportMethod(path, config.effectWrapper);
 
   if (dynamics.length === 1) {
     const prevValue =
@@ -1382,7 +1360,7 @@ function wrapDynamics$1(path, dynamics) {
         : undefined;
 
     return t__namespace.expressionStatement(
-      t__namespace.callExpression(t__namespace.identifier(effectWrapperId), [
+      t__namespace.callExpression(effectWrapperId, [
         t__namespace.arrowFunctionExpression(
           prevValue ? [prevValue] : [],
           setAttr$2(path, dynamics[0].elem, dynamics[0].key, dynamics[0].value, {
@@ -1434,7 +1412,7 @@ function wrapDynamics$1(path, dynamics) {
   });
 
   return t__namespace.expressionStatement(
-    t__namespace.callExpression(t__namespace.identifier(effectWrapperId), [
+    t__namespace.callExpression(effectWrapperId, [
       t__namespace.arrowFunctionExpression(
         [prevId],
         t__namespace.blockStatement([
@@ -1448,6 +1426,51 @@ function wrapDynamics$1(path, dynamics) {
   );
 }
 
+function createTemplate$1(path, result) {
+  if (!result.template) {
+    return result.exprs[0];
+  }
+
+  let template, id;
+
+  if (!Array.isArray(result.template)) {
+    template = t__namespace.stringLiteral(result.template);
+  } else if (result.template.length === 1) {
+    template = t__namespace.stringLiteral(result.template[0]);
+  } else {
+    const strings = result.template.map(tmpl => t__namespace.stringLiteral(tmpl));
+    template = t__namespace.arrayExpression(strings);
+  }
+
+  const templates =
+      path.scope.getProgramParent().data.templates ||
+      (path.scope.getProgramParent().data.templates = []);
+  const found = templates.find(tmp => {
+    if (t__namespace.isArrayExpression(tmp[1]) && t__namespace.isArrayExpression(template)) {
+      return tmp[1].elements.every(
+        (el, i) => template.elements[i] && el.value === template.elements[i].value
+      );
+    }
+    return tmp[1].value === template.value;
+  });
+  if (!found) {
+    id = path.scope.generateUidIdentifier("tmpl$");
+    templates.push([id, template]);
+  } else id = found[0];
+
+  return t__namespace.callExpression(
+    registerImportMethod(path, "ssr"),
+    result.template.length > 1 ? [id, ...result.templateValues] : [id]
+  );
+}
+
+function appendTemplates(path, templates) {
+  const declarators = templates.map(template => {
+    return t__namespace.variableDeclarator(template[0], template[1]);
+  });
+  path.node.body.unshift(t__namespace.variableDeclaration("const", declarators));
+}
+
 function appendToTemplate(template, value) {
   let array;
   if (Array.isArray(value)) {
@@ -1466,17 +1489,17 @@ function transformElement$1(path, info) {
       templateValues: [],
       decl: [],
       exprs: [],
-      dynamics: []
+      dynamics: [],
+      tagName
     };
   if (info.topLevel && config.hydratable) {
-    registerImportMethod(path, "ssrHydrationKey");
     results.template.push("");
-    results.templateValues.push(t__namespace.callExpression(t__namespace.identifier("_$ssrHydrationKey"), []));
+    results.templateValues.push(t__namespace.callExpression(registerImportMethod(path, "ssrHydrationKey"), []));
   }
   transformAttributes$1(path, results);
   appendToTemplate(results.template, ">");
   if (!voidTag) {
-    transformChildren$1(path, results, config);
+    transformChildren$1(path, results, {...config, ...info});
     appendToTemplate(results.template, `</${tagName}>`);
   }
   return results;
@@ -1537,9 +1560,8 @@ function escapeExpression(path, expression, attr) {
     return expression;
   }
 
-  registerImportMethod(path, "escape");
   return t__namespace.callExpression(
-    t__namespace.identifier("_$escape"),
+    registerImportMethod(path, "escape"),
     [expression].concat(attr ? [t__namespace.booleanLiteral(true)] : [])
   );
 }
@@ -1550,9 +1572,12 @@ function transformToObject(attrName, attributes, selectedAttributes) {
   for (let i = 0; i < selectedAttributes.length; i++) {
     const attr = selectedAttributes[i].node;
     const computed = !t__namespace.isValidIdentifier(attr.name.name.name);
+    if (!computed) {
+      attr.name.name.type = 'Identifier';
+    }
     properties.push(
       t__namespace.objectProperty(
-        computed ? t__namespace.stringLiteral(attr.name.name.name) : t__namespace.identifier(attr.name.name.name),
+        computed ? t__namespace.stringLiteral(attr.name.name.name) : attr.name.name,
         t__namespace.isJSXExpressionContainer(attr.value) ? attr.value.expression : attr.value
       )
     );
@@ -1620,8 +1645,7 @@ function transformAttributes$1(path, results) {
             i && attributes.splice(attributes.indexOf(classAttributes[i].node), 1);
             continue;
           }
-          registerImportMethod(path, "ssrClassList");
-          expr = t__namespace.callExpression(t__namespace.identifier("_$ssrClassList"), [expr]);
+          expr = t__namespace.callExpression(registerImportMethod(path, "ssrClassList"), [expr]);
         }
         values.push(t__namespace.logicalExpression("||", expr, t__namespace.stringLiteral("")));
         quasis.push(t__namespace.TemplateElement({ raw: isLast ? "" : " " }));
@@ -1635,11 +1659,10 @@ function transformAttributes$1(path, results) {
   attributes.forEach(attribute => {
     const node = attribute.node;
     if (t__namespace.isJSXSpreadAttribute(node)) {
-      registerImportMethod(attribute, "ssrSpread");
       appendToTemplate(results.template, " ");
       results.template.push("");
       results.templateValues.push(
-        t__namespace.callExpression(t__namespace.identifier("_$ssrSpread"), [
+        t__namespace.callExpression(registerImportMethod(attribute, "ssrSpread"), [
           isDynamic(attribute.get("argument"), {
             checkMember: true,
             native: true
@@ -1696,9 +1719,8 @@ function transformAttributes$1(path, results) {
           dynamic = true;
 
         if (BooleanAttributes.has(key)) {
-          registerImportMethod(attribute, "ssrBoolean");
           results.template.push("");
-          const fn = t__namespace.callExpression(t__namespace.identifier("_$ssrBoolean"), [
+          const fn = t__namespace.callExpression(registerImportMethod(attribute, "ssrBoolean"), [
             t__namespace.stringLiteral(key),
             value.expression
           ]);
@@ -1711,7 +1733,6 @@ function transformAttributes$1(path, results) {
             t__namespace.isObjectExpression(value.expression) &&
             !value.expression.properties.some(p => t__namespace.isSpreadElement(p))
           ) {
-            registerImportMethod(path, "escape");
             const props = value.expression.properties.map((p, i) =>
               t__namespace.binaryExpression(
                 "+",
@@ -1724,7 +1745,7 @@ function transformAttributes$1(path, results) {
                   ? p.value
                   : t__namespace.isTemplateLiteral(p.value) && p.value.expressions.length === 0
                   ? t__namespace.stringLiteral(escapeHTML(p.value.quasis[0].value.raw))
-                  : t__namespace.callExpression(t__namespace.identifier("_$escape"), [p.value, t__namespace.booleanLiteral(true)])
+                  : t__namespace.callExpression(registerImportMethod(path, "escape"), [p.value, t__namespace.booleanLiteral(true)])
               )
             );
             let res = props[0];
@@ -1733,8 +1754,7 @@ function transformAttributes$1(path, results) {
             }
             value.expression = res;
           } else {
-            registerImportMethod(path, "ssrStyle");
-            value.expression = t__namespace.callExpression(t__namespace.identifier("_$ssrStyle"), [value.expression]);
+            value.expression = t__namespace.callExpression(registerImportMethod(path, "ssrStyle"), [value.expression]);
           }
           doEscape = false;
         }
@@ -1751,8 +1771,7 @@ function transformAttributes$1(path, results) {
               value.expression = values[0];
             } else value.expression = t__namespace.templateLiteral(quasis, values);
           } else {
-            registerImportMethod(path, "ssrClassList");
-            value.expression = t__namespace.callExpression(t__namespace.identifier("_$ssrClassList"), [value.expression]);
+            value.expression = t__namespace.callExpression(registerImportMethod(path, "ssrClassList"), [value.expression]);
           }
           key = "class";
           doEscape = false;
@@ -1784,8 +1803,7 @@ function transformClasslistObject(path, expr, values, quasis) {
     let key = prop.key;
     if (t__namespace.isIdentifier(prop.key) && !prop.computed) key = t__namespace.stringLiteral(key.name);
     else if (prop.computed) {
-      registerImportMethod(path, "escape");
-      key = t__namespace.callExpression(t__namespace.identifier("_$escape"), [prop.key, t__namespace.booleanLiteral(true)]);
+      key = t__namespace.callExpression(registerImportMethod(path, "escape"), [prop.key, t__namespace.booleanLiteral(true)]);
     } else key = t__namespace.stringLiteral(escapeHTML(prop.key.value));
     if (t__namespace.isBooleanLiteral(prop.value)) {
       if (prop.value.value === true) {
@@ -1813,6 +1831,24 @@ function transformChildren$1(path, results, { hydratable }) {
   const doNotEscape = path.doNotEscape;
   const filteredChildren = filterChildren(path.get("children"));
   filteredChildren.forEach(node => {
+    if (t__namespace.isJSXElement(node.node) && (getTagName(node.node) === "head")) {
+      const child = transformNode(node, { doNotEscape, hydratable: false });
+      registerImportMethod(path, "NoHydration");
+      results.template.push("");
+      results.templateValues.push(
+        t__namespace.callExpression(t__namespace.identifier("_$NoHydration"), [
+          t__namespace.objectExpression([
+            t__namespace.objectMethod(
+              "get",
+              t__namespace.identifier("children"),
+              [],
+              t__namespace.blockStatement([t__namespace.returnStatement(createTemplate$1(path, child))])
+            )
+          ])
+        ])
+      );
+      return;
+    }
     const child = transformNode(node, { doNotEscape });
     appendToTemplate(results.template, child.template);
     results.templateValues.push.apply(results.templateValues, child.templateValues || []);
@@ -1836,52 +1872,6 @@ function transformChildren$1(path, results, { hydratable }) {
   });
 }
 
-function createTemplate$1(path, result) {
-  if (!result.template) {
-    return result.exprs[0];
-  }
-
-  let template, id;
-
-  registerImportMethod(path, "ssr");
-  if (!Array.isArray(result.template)) {
-    template = t__namespace.stringLiteral(result.template);
-  } else if (result.template.length === 1) {
-    template = t__namespace.stringLiteral(result.template[0]);
-  } else {
-    const strings = result.template.map(tmpl => t__namespace.stringLiteral(tmpl));
-    template = t__namespace.arrayExpression(strings);
-  }
-
-  const templates =
-      path.scope.getProgramParent().data.templates ||
-      (path.scope.getProgramParent().data.templates = []);
-  const found = templates.find(tmp => {
-    if (t__namespace.isArrayExpression(tmp[1]) && t__namespace.isArrayExpression(template)) {
-      return tmp[1].elements.every(
-        (el, i) => template.elements[i] && el.value === template.elements[i].value
-      );
-    }
-    return tmp[1].value === template.value;
-  });
-  if (!found) {
-    id = path.scope.generateUidIdentifier("tmpl$");
-    templates.push([id, template]);
-  } else id = found[0];
-
-  return t__namespace.callExpression(
-    t__namespace.identifier(`_$ssr`),
-    result.template.length > 1 ? [id, ...result.templateValues] : [id]
-  );
-}
-
-function appendTemplates(path, templates) {
-  const declarators = templates.map(template => {
-    return t__namespace.variableDeclarator(template[0], template[1]);
-  });
-  path.node.body.unshift(t__namespace.variableDeclaration("const", declarators));
-}
-
 function transformElement(path, info) {
   let tagName = getTagName(path.node),
     results = {
@@ -1893,11 +1883,10 @@ function transformElement(path, info) {
       tagName
     };
 
-  registerImportMethod(path, "createElement");
   results.decl.push(
     t__namespace.variableDeclarator(
       results.id,
-      t__namespace.callExpression(t__namespace.identifier("_$createElement"), [t__namespace.stringLiteral(tagName)])
+      t__namespace.callExpression(registerImportMethod(path, "createElement"), [t__namespace.stringLiteral(tagName)])
     )
   );
 
@@ -1910,7 +1899,6 @@ function transformElement(path, info) {
 function transformAttributes(path, results) {
   let children;
   const elem = results.id,
-    spread = t__namespace.identifier("_$spread"),
     hasChildren = path.node.children.length > 0,
     config = getConfig(path);
 
@@ -1920,10 +1908,9 @@ function transformAttributes(path, results) {
     .forEach(attribute => {
       const node = attribute.node;
       if (t__namespace.isJSXSpreadAttribute(node)) {
-        registerImportMethod(attribute, "spread");
         results.exprs.push(
           t__namespace.expressionStatement(
-            t__namespace.callExpression(spread, [
+            t__namespace.callExpression(registerImportMethod(attribute, "spread"), [
               elem,
               isDynamic(attribute.get("argument"), {
                 checkMember: true
@@ -2002,9 +1989,11 @@ function transformAttributes(path, results) {
             );
           }
         } else if (key.startsWith("use:")) {
+          // Some trick to treat JSXIdentifier as Identifier
+          node.name.name.type = 'Identifier';
           results.exprs.unshift(
             t__namespace.expressionStatement(
-              t__namespace.callExpression(t__namespace.identifier(node.name.name.name), [
+              t__namespace.callExpression(node.name.name, [
                 elem,
                 t__namespace.arrowFunctionExpression(
                   [],
@@ -2039,10 +2028,9 @@ function transformAttributes(path, results) {
 }
 
 function setAttr(path, elem, name, value, { prevId } = {}) {
-  registerImportMethod(path, "setProp");
   if (!value) value = t__namespace.booleanLiteral(true);
   return t__namespace.callExpression(
-    t__namespace.identifier("_$setProp"),
+    registerImportMethod(path, "setProp"),
     prevId ? [elem, t__namespace.stringLiteral(name), value, prevId] : [elem, t__namespace.stringLiteral(name), value]
   );
 }
@@ -2063,36 +2051,36 @@ function transformChildren(path, results) {
   childNodes.forEach((child, index) => {
     if (!child) return;
     if (child.id) {
-      registerImportMethod(path, "insertNode");
+      const insertNode = registerImportMethod(path, "insertNode");
       let insert = child.id;
       if (child.text) {
-        registerImportMethod(path, "createTextNode");
+        const createTextNode = registerImportMethod(path, "createTextNode");
         if (multi) {
           results.decl.push(
             t__namespace.variableDeclarator(
               child.id,
-              t__namespace.callExpression(t__namespace.identifier("_$createTextNode"), [
+              t__namespace.callExpression(createTextNode, [
                 t__namespace.stringLiteral(htmlEntities.decode(child.template))
               ])
             )
           );
         } else
-          insert = t__namespace.callExpression(t__namespace.identifier("_$createTextNode"), [
+          insert = t__namespace.callExpression(createTextNode, [
             t__namespace.stringLiteral(htmlEntities.decode(child.template))
           ]);
       }
       appends.push(
-        t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.identifier("_$insertNode"), [results.id, insert]))
+        t__namespace.expressionStatement(t__namespace.callExpression(insertNode, [results.id, insert]))
       );
       results.decl.push(...child.decl);
       results.exprs.push(...child.exprs);
       results.dynamics.push(...child.dynamics);
     } else if (child.exprs.length) {
-      registerImportMethod(path, "insert");
+      const insert = registerImportMethod(path, "insert");
       if (multi) {
         results.exprs.push(
           t__namespace.expressionStatement(
-            t__namespace.callExpression(t__namespace.identifier("_$insert"), [
+            t__namespace.callExpression(insert, [
               results.id,
               child.exprs[0],
               nextChild(childNodes, index) || t__namespace.nullLiteral()
@@ -2102,7 +2090,7 @@ function transformChildren(path, results) {
       } else {
         results.exprs.push(
           t__namespace.expressionStatement(
-            t__namespace.callExpression(t__namespace.identifier("_$insert"), [results.id, child.exprs[0]])
+            t__namespace.callExpression(insert, [results.id, child.exprs[0]])
           )
         );
       }
@@ -2142,8 +2130,7 @@ function createTemplate(path, result, wrap) {
     }
   }
   if (wrap && result.dynamic && config.memoWrapper) {
-    registerImportMethod(path, config.memoWrapper);
-    return t__namespace.callExpression(t__namespace.identifier(`_$${config.memoWrapper}`), [result.exprs[0]]);
+    return t__namespace.callExpression(registerImportMethod(path, config.memoWrapper), [result.exprs[0]]);
   }
   return result.exprs[0];
 }
@@ -2151,15 +2138,14 @@ function createTemplate(path, result, wrap) {
 function wrapDynamics(path, dynamics) {
   if (!dynamics.length) return;
   const config = getConfig(path);
-  registerImportMethod(path, config.effectWrapper);
 
-  const effectWrapperId = `_$${config.effectWrapper}`;
+  const effectWrapperId = registerImportMethod(path, config.effectWrapper);
 
   if (dynamics.length === 1) {
     const prevValue = t__namespace.identifier("_$p");
 
     return t__namespace.expressionStatement(
-      t__namespace.callExpression(t__namespace.identifier(effectWrapperId), [
+      t__namespace.callExpression(effectWrapperId, [
         t__namespace.arrowFunctionExpression(
           [prevValue],
           setAttr(path, dynamics[0].elem, dynamics[0].key, dynamics[0].value, {
@@ -2197,7 +2183,7 @@ function wrapDynamics(path, dynamics) {
   });
 
   return t__namespace.expressionStatement(
-    t__namespace.callExpression(t__namespace.identifier(effectWrapperId), [
+    t__namespace.callExpression(effectWrapperId, [
       t__namespace.arrowFunctionExpression(
         [prevId],
         t__namespace.blockStatement([
@@ -2211,18 +2197,51 @@ function wrapDynamics(path, dynamics) {
   );
 }
 
+function convertComponentIdentifier(node) {
+  if (t__namespace.isJSXIdentifier(node)) {
+    node.type = "Identifier";
+  } else if (t__namespace.isJSXMemberExpression(node)) {
+    return t__namespace.memberExpression(
+      convertComponentIdentifier(node.object),
+      convertComponentIdentifier(node.property),
+    );
+  }
+
+  return node;
+}
+
+
+function convertJSXIdentifier(node) {
+  if (t__namespace.isJSXIdentifier(node)) {
+    if (t__namespace.isValidIdentifier(node.name, false)) {
+      node.type = "Identifier";
+    } else {
+      return t__namespace.stringLiteral(node.name);
+    }
+  } else if (t__namespace.isJSXMemberExpression(node)) {
+    return t__namespace.memberExpression(
+      convertJSXIdentifier(node.object),
+      convertJSXIdentifier(node.property),
+    );
+  } else if (t__namespace.isJSXNamespacedName(node)) {
+    return t__namespace.stringLiteral(`${node.namespace.name}:${node.name.name}`);
+  }
+
+  return node;
+}
+
 function transformComponent(path) {
   let exprs = [],
     config = getConfig(path),
-    tagName = getTagName(path.node),
+    tagId = convertComponentIdentifier(path.node.openingElement.name),
     props = [],
     runningObject = [],
     dynamicSpread = false,
     hasChildren = path.node.children.length > 0;
 
-  if (config.builtIns.indexOf(tagName) > -1 && !path.scope.hasBinding(tagName)) {
-    registerImportMethod(path, tagName);
-    tagName = `_$${tagName}`;
+  if (config.builtIns.indexOf(tagId.name) > -1 && !path.scope.hasBinding(tagId.name)) {
+    const newTagId = registerImportMethod(path, tagId.name);
+    tagId.name = newTagId.name;
   }
 
   path
@@ -2246,10 +2265,8 @@ function transformComponent(path) {
         );
       } else {
         const value = node.value || t__namespace.booleanLiteral(true),
-          key = t__namespace.isJSXNamespacedName(node.name)
-            ? `${node.name.namespace.name}:${node.name.name.name}`
-            : node.name.name,
-          wrapName = t__namespace.isValidIdentifier(key) ? t__namespace.identifier : t__namespace.stringLiteral;
+          id = convertJSXIdentifier(node.name),
+          key = id.name;
         if (hasChildren && key === "children") return;
         if (t__namespace.isJSXExpressionContainer(value))
           if (key === "ref") {
@@ -2335,14 +2352,14 @@ function transformComponent(path) {
             runningObject.push(
               t__namespace.objectMethod(
                 "get",
-                wrapName(key),
+                id,
                 [],
                 t__namespace.blockStatement([t__namespace.returnStatement(expr.body)]),
                 !t__namespace.isValidIdentifier(key)
               )
             );
-          } else runningObject.push(t__namespace.objectProperty(wrapName(key), value.expression));
-        else runningObject.push(t__namespace.objectProperty(wrapName(key), value));
+          } else runningObject.push(t__namespace.objectProperty(id, value.expression));
+        else runningObject.push(t__namespace.objectProperty(id, value));
       }
     });
 
@@ -2366,12 +2383,10 @@ function transformComponent(path) {
   if (runningObject.length || !props.length) props.push(t__namespace.objectExpression(runningObject));
 
   if (props.length > 1 || dynamicSpread) {
-    registerImportMethod(path, "mergeProps");
-    props = [t__namespace.callExpression(t__namespace.identifier("_$mergeProps"), props)];
+    props = [t__namespace.callExpression(registerImportMethod(path, "mergeProps"), props)];
   }
-  registerImportMethod(path, "createComponent");
-  const componentArgs = [tagNameToIdentifier(tagName), props[0]];
-  exprs.push(t__namespace.callExpression(t__namespace.identifier("_$createComponent"), componentArgs));
+  const componentArgs = [tagId, props[0]];
+  exprs.push(t__namespace.callExpression(registerImportMethod(path, "createComponent"), componentArgs));
 
   // handle hoisting conditionals
   if (exprs.length > 1) {
@@ -2596,10 +2611,9 @@ function transformNode(path, info = {}) {
 var postprocess = path => {
   const config = getConfig(path);
   if (path.scope.data.events) {
-    registerImportMethod(path, "delegateEvents");
     path.node.body.push(
       t__namespace.expressionStatement(
-        t__namespace.callExpression(t__namespace.identifier("_$delegateEvents"), [
+        t__namespace.callExpression(registerImportMethod(path, "delegateEvents"), [
           t__namespace.arrayExpression(Array.from(path.scope.data.events).map(e => t__namespace.stringLiteral(e)))
         ])
       )
@@ -2643,7 +2657,7 @@ var preprocess = (path, { opts })  => {
 var index = () => {
   return {
     name: "JSX DOM Expressions",
-    inherits: SyntaxJSX__default['default'],
+    inherits: SyntaxJSX__default["default"],
     visitor: {
       JSXElement: transformJSX,
       JSXFragment: transformJSX,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "babel-plugin-jsx-dom-expressions",
   "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection",
-  "version": "0.30.8",
+  "version": "0.31.0-beta.9",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -18,10 +18,10 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@babel/helper-module-imports": "^7.10.4",
-    "@babel/plugin-syntax-jsx": "^7.10.4",
-    "@babel/types": "^7.11.5",
+    "@babel/helper-module-imports": "7.16.0",
+    "@babel/plugin-syntax-jsx": "^7.16.5",
+    "@babel/types": "^7.16.0",
     "html-entities": "2.3.2"
   },
-  "gitHead": "b8381ac126158615afb3438a31c8c35204a0cfaf"
+  "gitHead": "2c421965e1f194d4ff7fae88ae278c0a50baa161"
 }