babel-plugin-jsx-dom-expressions 0.31.0-beta.0 → 0.31.0

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);
 }
 
@@ -228,35 +226,26 @@ function registerImportMethod(path, name) {
   const imports =
     path.scope.getProgramParent().data.imports ||
     (path.scope.getProgramParent().data.imports = new Set());
+  const identifier = t__namespace.identifier(`_$${name}`);
   if (!imports.has(name)) {
     helperModuleImports.addNamed(path, name, getConfig(path).moduleName, {
       nameHint: `_$${name}`
     });
     imports.add(name);
   }
+  return identifier;
 }
 
 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);
@@ -396,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) &&
@@ -411,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)
           ])
@@ -440,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)
           ])
@@ -454,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)
               ])
@@ -476,6 +465,10 @@ function transformCondition(path, inline, deep) {
   return deep ? expr : t__namespace.arrowFunctionExpression([], expr);
 }
 
+function escapeBackticks(value) {
+  return value.replaceAll("`", "\\`");
+}
+
 function escapeHTML(s, attr) {
   if (typeof s !== "string") return s;
   const delim = attr ? '"' : "<";
@@ -548,9 +541,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>";
@@ -586,9 +578,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]
     );
   }
@@ -598,9 +589,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]
     );
   }
@@ -626,16 +616,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]);
   }
 }
 
@@ -658,8 +646,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,
@@ -794,10 +781,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
@@ -899,9 +885,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(
                   [],
@@ -973,10 +961,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,
@@ -1013,10 +1000,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
@@ -1060,7 +1046,7 @@ function transformAttributes$2(path, results) {
         } else {
           !isSVG && (key = key.toLowerCase());
           results.template += ` ${key}`;
-          results.template += value ? `="${value.value}"` : "";
+          results.template += value ? `="${escapeBackticks(value.value)}"` : "";
         }
       }
     });
@@ -1110,7 +1096,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)
               ])
@@ -1125,7 +1111,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
@@ -1141,7 +1127,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]
@@ -1152,7 +1138,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()
@@ -1163,7 +1149,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,
@@ -1198,12 +1184,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"))
         ])
       )
@@ -1269,13 +1254,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"), [])
       )
     )
   );
@@ -1308,8 +1292,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];
 }
@@ -1320,11 +1303,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)
@@ -1356,11 +1338,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)
           ])
@@ -1373,9 +1354,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 =
@@ -1384,7 +1364,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, {
@@ -1436,7 +1416,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([
@@ -1457,7 +1437,6 @@ function createTemplate$1(path, result) {
 
   let template, id;
 
-  registerImportMethod(path, "ssr");
   if (!Array.isArray(result.template)) {
     template = t__namespace.stringLiteral(result.template);
   } else if (result.template.length === 1) {
@@ -1484,7 +1463,7 @@ function createTemplate$1(path, result) {
   } else id = found[0];
 
   return t__namespace.callExpression(
-    t__namespace.identifier(`_$ssr`),
+    registerImportMethod(path, "ssr"),
     result.template.length > 1 ? [id, ...result.templateValues] : [id]
   );
 }
@@ -1518,9 +1497,8 @@ function transformElement$1(path, info) {
       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, ">");
@@ -1586,9 +1564,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)] : [])
   );
 }
@@ -1599,9 +1576,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
       )
     );
@@ -1669,8 +1649,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 ? "" : " " }));
@@ -1684,11 +1663,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
@@ -1745,9 +1723,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
           ]);
@@ -1760,7 +1737,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(
                 "+",
@@ -1773,7 +1749,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];
@@ -1782,8 +1758,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;
         }
@@ -1800,8 +1775,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;
@@ -1833,8 +1807,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) {
@@ -1914,11 +1887,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)])
     )
   );
 
@@ -1931,7 +1903,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);
 
@@ -1941,10 +1912,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
@@ -2023,9 +1993,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(
                   [],
@@ -2060,10 +2032,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]
   );
 }
@@ -2084,36 +2055,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()
@@ -2123,7 +2094,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]])
           )
         );
       }
@@ -2163,8 +2134,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];
 }
@@ -2172,15 +2142,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, {
@@ -2218,7 +2187,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([
@@ -2232,18 +2201,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
@@ -2267,10 +2269,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") {
@@ -2356,14 +2356,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));
       }
     });
 
@@ -2387,12 +2387,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) {
@@ -2547,7 +2545,7 @@ function transformNode(path, info = {}) {
         : trimWhitespace(node.extra.raw);
     if (!text.length) return null;
     const results = {
-      template: text,
+      template: config.generate === "dom" ? escapeBackticks(text) : text,
       decl: [],
       exprs: [],
       dynamics: [],
@@ -2617,10 +2615,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)))
         ])
       )
@@ -2664,7 +2661,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.31.0-beta.0",
+  "version": "0.31.0",
   "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": "bdb5b31867eb9002d0f87738a23d912ed025211b"
+  "gitHead": "f6597dac2273ec022b8859ce868f6138b0c2a180"
 }