babel-plugin-jsx-dom-expressions 0.29.16 → 0.30.3

package/README.md

@@ -20,7 +20,7 @@ This library uses a heuristic whether to dynamic wrap expressions based on if th
 ```jsx
 const view = ({ item }) => {
   const itemId = item.id;
-  <tr class={itemId === selected() ? "danger" : ""}>
+  return <tr class={itemId === selected() ? "danger" : ""}>
     <td class="col-md-1">{itemId}</td>
     <td class="col-md-4">
       <a onclick={e => select(item, e)}>{item.label}</a>

package/index.js

@@ -3,6 +3,7 @@
 var SyntaxJSX = require('@babel/plugin-syntax-jsx');
 var t = require('@babel/types');
 var helperModuleImports = require('@babel/helper-module-imports');
+var htmlEntities = require('html-entities');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,24 +30,8 @@ function _interopNamespace(e) {
 var SyntaxJSX__default = /*#__PURE__*/_interopDefaultLegacy(SyntaxJSX);
 var t__namespace = /*#__PURE__*/_interopNamespace(t);
 
-var config = {
-  moduleName: "dom",
-  generate: "dom",
-  hydratable: false,
-  delegateEvents: true,
-  delegatedEvents: [],
-  builtIns: [],
-  requireImportSource: false,
-  wrapConditionals: true,
-  contextToCustomElements: false,
-  staticMarker: "@once",
-  effectWrapper: "effect",
-  memoWrapper: "memo"
-};
-
 const booleans = [
   "allowfullscreen",
-  "allowpaymentrequest",
   "async",
   "autofocus",
   "autoplay",
@@ -56,8 +41,8 @@ const booleans = [
   "disabled",
   "formnovalidate",
   "hidden",
+  "indeterminate",
   "ismap",
-  "itemscope",
   "loop",
   "multiple",
   "muted",
@@ -69,13 +54,12 @@ const booleans = [
   "required",
   "reversed",
   "seamless",
-  "selected",
-  "truespeed"
+  "selected"
 ];
 
 const BooleanAttributes = new Set(booleans);
 
-const Properties = new Set(["className", "indeterminate", "value", "readOnly", ...booleans]);
+const Properties = new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 
 const ChildProperties = new Set(["innerHTML", "textContent", "innerText", "children"]);
 
@@ -87,6 +71,10 @@ const Aliases = {
 
 const PropAliases = {
   class: "className",
+  formnovalidate: "formNoValidate",
+  ismap: "isMap",
+  nomodule: "noModule",
+  playsinline: "playsInline",
   readonly: "readOnly"
 };
 
@@ -232,12 +220,16 @@ const reservedNameSpaces = new Set([
   "attr"
 ]);
 
+function getConfig(path) {
+  return path.hub.file.metadata.config;
+}
+
 function registerImportMethod(path, name) {
   const imports =
     path.scope.getProgramParent().data.imports ||
     (path.scope.getProgramParent().data.imports = new Set());
   if (!imports.has(name)) {
-    helperModuleImports.addNamed(path, name, config.moduleName, {
+    helperModuleImports.addNamed(path, name, getConfig(path).moduleName, {
       nameHint: `_$${name}`
     });
     imports.add(name);
@@ -279,6 +271,7 @@ function isComponent(tagName) {
 }
 
 function isDynamic(path, { checkMember, checkTags, checkCallExpressions = true, native }) {
+  const config = getConfig(path);
   if (config.generate === "ssr" && native) {
     checkMember = false;
     checkCallExpressions = false;
@@ -337,12 +330,11 @@ function getStaticExpression(path) {
 }
 
 // remove unnecessary JSX Text nodes
-function filterChildren(children, loose) {
+function filterChildren(children) {
   return children.filter(
     ({ node: child }) =>
       !(t__namespace.isJSXExpressionContainer(child) && t__namespace.isJSXEmptyExpression(child.expression)) &&
-      (!t__namespace.isJSXText(child) ||
-        (loose ? !/^[\r\n]\s*$/.test(child.extra.raw) : !/^\s*$/.test(child.extra.raw)))
+      (!t__namespace.isJSXText(child) || !/^[\r\n]\s*$/.test(child.extra.raw))
   );
 }
 
@@ -377,7 +369,31 @@ function toPropertyName(name) {
   return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
 }
 
+function wrappedByText(list, startIndex) {
+  let index = startIndex,
+    wrapped;
+  while (--index >= 0) {
+    const node = list[index];
+    if (!node) continue;
+    if (node.text) {
+      wrapped = true;
+      break;
+    }
+    if (node.id) return false;
+  }
+  if (!wrapped) return false;
+  index = startIndex;
+  while (++index < list.length) {
+    const node = list[index];
+    if (!node) continue;
+    if (node.text) return true;
+    if (node.id) return false;
+  }
+  return false;
+}
+
 function transformCondition(path, deep) {
+  const config = getConfig(path);
   const expr = path.node;
   if (config.memoWrapper) {
     registerImportMethod(path, config.memoWrapper);
@@ -496,8 +512,9 @@ function escapeHTML(s, attr) {
   return left < s.length ? out + s.substring(left) : out;
 }
 
-function transformElement$1(path, info) {
+function transformElement$2(path, info) {
   let tagName = getTagName(path.node),
+    config = getConfig(path),
     wrapSVG = info.topLevel && tagName != "svg" && SVGElements.has(tagName),
     voidTag = VoidElements.indexOf(tagName) > -1,
     results = {
@@ -512,13 +529,13 @@ function transformElement$1(path, info) {
   if (tagName === "html" && config.hydratable) results.skipTemplate = true;
   if (wrapSVG) results.template = "<svg>" + results.template;
   if (!info.skipId) results.id = path.scope.generateUidIdentifier("el$");
-  transformAttributes$1(path, results);
+  transformAttributes$2(path, results);
   if (config.contextToCustomElements && (tagName === "slot" || tagName.indexOf("-") > -1)) {
     contextToCustomElement(path, results);
   }
   results.template += ">";
   if (!voidTag) {
-    transformChildren$1(path, results);
+    transformChildren$2(path, results, config);
     results.template += `</${tagName}>`;
   }
   if (info.topLevel && config.hydratable && results.hasHydratableEvent) {
@@ -531,7 +548,7 @@ function transformElement$1(path, info) {
   return results;
 }
 
-function setAttr$1(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
+function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
   // pull out namespace
   let parts, namespace;
   if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
@@ -627,7 +644,7 @@ function detectResolvableEventHandler(attribute, handler) {
   return t__namespace.isFunction(handler);
 }
 
-function transformAttributes$1(path, results) {
+function transformAttributes$2(path, results) {
   let elem = results.id,
     hasHydratableEvent = false,
     children,
@@ -636,7 +653,8 @@ function transformAttributes$1(path, results) {
     tagName = getTagName(path.node),
     isSVG = SVGElements.has(tagName),
     isCE = tagName.includes("-"),
-    hasChildren = path.node.children.length > 0;
+    hasChildren = path.node.children.length > 0,
+    config = getConfig(path);
 
   // preprocess styles
   const styleAttribute = attributes.find(
@@ -775,7 +793,9 @@ function transformAttributes$1(path, results) {
               isDynamic(attribute.get("argument"), {
                 checkMember: true
               })
-                ? t__namespace.arrowFunctionExpression([], node.argument)
+                ? t__namespace.isCallExpression(node.argument) && !node.argument.arguments.length
+                  ? node.argument.callee
+                  : t__namespace.arrowFunctionExpression([], node.argument)
                 : node.argument,
               t__namespace.booleanLiteral(isSVG),
               t__namespace.booleanLiteral(hasChildren)
@@ -806,7 +826,19 @@ function transformAttributes$1(path, results) {
           !(t__namespace.isStringLiteral(value.expression) || t__namespace.isNumericLiteral(value.expression)))
       ) {
         if (key === "ref") {
-          if (t__namespace.isLVal(value.expression)) {
+          // Normalize expressions for non-null and type-as
+          while (
+            t__namespace.isTSNonNullExpression(value.expression) ||
+            t__namespace.isTSAsExpression(value.expression)
+          ) {
+            value.expression = value.expression.expression;
+          }
+          let binding,
+            isFunction =
+              t__namespace.isIdentifier(value.expression) &&
+              (binding = path.scope.getBinding(value.expression.name)) &&
+              binding.kind === "const";
+          if (!isFunction && t__namespace.isLVal(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
             results.exprs.unshift(
               t__namespace.variableDeclaration("const", [
@@ -824,7 +856,7 @@ function transformAttributes$1(path, results) {
                 )
               )
             );
-          } else if (t__namespace.isFunction(value.expression)) {
+          } else if (isFunction || t__namespace.isFunction(value.expression)) {
             results.exprs.unshift(
               t__namespace.expressionStatement(t__namespace.callExpression(value.expression, [elem]))
             );
@@ -992,7 +1024,7 @@ function transformAttributes$1(path, results) {
           results.dynamics.push({ elem: nextElem, key, value: value.expression, isSVG, isCE });
         } else {
           results.exprs.push(
-            t__namespace.expressionStatement(setAttr$1(attribute, elem, key, value.expression, { isSVG, isCE }))
+            t__namespace.expressionStatement(setAttr$2(attribute, elem, key, value.expression, { isSVG, isCE }))
           );
         }
       } else {
@@ -1004,7 +1036,7 @@ function transformAttributes$1(path, results) {
         key = Aliases[key] || key;
         if (value && ChildProperties.has(key)) {
           results.exprs.push(
-            t__namespace.expressionStatement(setAttr$1(attribute, elem, key, value, { isSVG, isCE }))
+            t__namespace.expressionStatement(setAttr$2(attribute, elem, key, value, { isSVG, isCE }))
           );
         } else {
           !isSVG && (key = key.toLowerCase());
@@ -1020,41 +1052,17 @@ function transformAttributes$1(path, results) {
   results.hasHydratableEvent = results.hasHydratableEvent || hasHydratableEvent;
 }
 
-function wrappedByText(list, startIndex) {
-  let index = startIndex,
-    wrapped;
-  while (--index >= 0) {
-    const node = list[index];
-    if (!node) continue;
-    if (node.text) {
-      wrapped = true;
-      break;
-    }
-    if (node.id) return false;
-  }
-  if (!wrapped) return false;
-  index = startIndex;
-  while (++index < list.length) {
-    const node = list[index];
-    if (!node) continue;
-    if (node.text) return true;
-    if (node.id) return false;
-  }
-  return false;
-}
-
-function transformChildren$1(path, results) {
-  const { hydratable } = config;
+function transformChildren$2(path, results, config) {
   let tempPath = results.id && results.id.name,
     tagName = getTagName(path.node),
     nextPlaceholder,
     i = 0;
-  const filteredChildren = filterChildren(path.get("children"), true),
+  const filteredChildren = filterChildren(path.get("children")),
     childNodes = filteredChildren
       .map(
         (child, index) =>
           transformNode(child, {
-            skipId: !results.id || !detectExpressions(filteredChildren, index)
+            skipId: !results.id || !detectExpressions(filteredChildren, index, config)
           })
         // combine adjacent textNodes
       )
@@ -1071,7 +1079,7 @@ function transformChildren$1(path, results) {
     if (!child) return;
     results.template += child.template;
     if (child.id) {
-      if (hydratable && tagName === "html") {
+      if (config.hydratable && tagName === "html") {
         registerImportMethod(path, "getNextMatch");
       }
       const walk = t__namespace.memberExpression(
@@ -1081,7 +1089,7 @@ function transformChildren$1(path, results) {
       results.decl.push(
         t__namespace.variableDeclarator(
           child.id,
-          hydratable && tagName === "html"
+          config.hydratable && tagName === "html"
             ? t__namespace.callExpression(t__namespace.identifier("_$getNextMatch"), [
                 walk,
                 t__namespace.stringLiteral(child.tagName)
@@ -1099,7 +1107,7 @@ function transformChildren$1(path, results) {
     } else if (child.exprs.length) {
       registerImportMethod(path, "insert");
       const multi = checkLength(filteredChildren),
-        markers = hydratable && multi;
+        markers = config.hydratable && multi;
       // boxed by textNodes
       if (markers || wrappedByText(childNodes, index)) {
         let exprId, contentId;
@@ -1127,7 +1135,7 @@ function transformChildren$1(path, results) {
             t__namespace.callExpression(t__namespace.identifier("_$insert"), [
               results.id,
               child.exprs[0],
-              nextChild(childNodes, index) || t__namespace.nullLiteral()
+              nextChild$1(childNodes, index) || t__namespace.nullLiteral()
             ])
           )
         );
@@ -1136,7 +1144,7 @@ function transformChildren$1(path, results) {
           t__namespace.expressionStatement(
             t__namespace.callExpression(
               t__namespace.identifier("_$insert"),
-              hydratable
+              config.hydratable
                 ? [
                     results.id,
                     child.exprs[0],
@@ -1165,7 +1173,8 @@ function transformChildren$1(path, results) {
 }
 
 function createPlaceholder(path, results, tempPath, i, char) {
-  const exprId = path.scope.generateUidIdentifier("el$");
+  const exprId = path.scope.generateUidIdentifier("el$"),
+    config = getConfig(path);
   let contentId;
   results.template += `<!${char}>`;
   if (config.hydratable && char === "/") {
@@ -1192,12 +1201,12 @@ function createPlaceholder(path, results, tempPath, i, char) {
   return [exprId, contentId];
 }
 
-function nextChild(children, index) {
-  return children[index + 1] && (children[index + 1].id || nextChild(children, index + 1));
+function nextChild$1(children, index) {
+  return children[index + 1] && (children[index + 1].id || nextChild$1(children, index + 1));
 }
 
 // reduce unnecessary refs
-function detectExpressions(children, index) {
+function detectExpressions(children, index, config) {
   if (children[index - 1]) {
     const node = children[index - 1].node;
     if (
@@ -1233,8 +1242,8 @@ function detectExpressions(children, index) {
         )
       )
         return true;
-      const nextChildren = filterChildren(children[i].get("children"), true);
-      if (nextChildren.length) if (detectExpressions(nextChildren, 0)) return true;
+      const nextChildren = filterChildren(children[i].get("children"));
+      if (nextChildren.length) if (detectExpressions(nextChildren, 0, config)) return true;
     }
   }
 }
@@ -1252,7 +1261,8 @@ function contextToCustomElement(path, results) {
   );
 }
 
-function createTemplate$1(path, result, wrap) {
+function createTemplate$2(path, result, wrap) {
+  const config = getConfig(path);
   if (result.id) {
     registerTemplate(path, result);
     if (
@@ -1267,7 +1277,7 @@ function createTemplate$1(path, result, wrap) {
           t__namespace.blockStatement([
             result.decl,
             ...result.exprs.concat(
-              wrapDynamics(path, result.dynamics) || [],
+              wrapDynamics$1(path, result.dynamics) || [],
               result.postExprs || []
             ),
             t__namespace.returnStatement(result.id)
@@ -1306,7 +1316,7 @@ function appendTemplates$1(path, templates) {
 }
 
 function registerTemplate(path, results) {
-  const { hydratable } = config;
+  const { hydratable } = getConfig(path);
   let decl;
   if (results.template.length) {
     let templateDef, templateId;
@@ -1340,8 +1350,9 @@ function registerTemplate(path, results) {
   results.decl = t__namespace.variableDeclaration("const", results.decl);
 }
 
-function wrapDynamics(path, dynamics) {
+function wrapDynamics$1(path, dynamics) {
   if (!dynamics.length) return;
+  const config = getConfig(path);
   registerImportMethod(path, config.effectWrapper);
 
   const effectWrapperId = `_$${config.effectWrapper}`;
@@ -1356,7 +1367,7 @@ function wrapDynamics(path, dynamics) {
       t__namespace.callExpression(t__namespace.identifier(effectWrapperId), [
         t__namespace.arrowFunctionExpression(
           prevValue ? [prevValue] : [],
-          setAttr$1(path, dynamics[0].elem, dynamics[0].key, dynamics[0].value, {
+          setAttr$2(path, dynamics[0].elem, dynamics[0].key, dynamics[0].value, {
             isSVG: dynamics[0].isSVG,
             isCE: dynamics[0].isCE,
             dynamic: true,
@@ -1381,7 +1392,7 @@ function wrapDynamics(path, dynamics) {
           t__namespace.assignmentExpression(
             "=",
             prev,
-            setAttr$1(path, elem, key, identifier, { isSVG, isCE, dynamic: true, prevId: prev })
+            setAttr$2(path, elem, key, identifier, { isSVG, isCE, dynamic: true, prevId: prev })
           )
         )
       );
@@ -1391,7 +1402,7 @@ function wrapDynamics(path, dynamics) {
           t__namespace.logicalExpression(
             "&&",
             t__namespace.binaryExpression("!==", identifier, t__namespace.memberExpression(prevId, identifier)),
-            setAttr$1(
+            setAttr$2(
               path,
               elem,
               key,
@@ -1428,8 +1439,9 @@ function appendToTemplate(template, value) {
   if (array && array.length) template.push.apply(template, array);
 }
 
-function transformElement(path, info) {
+function transformElement$1(path, info) {
   let tagName = getTagName(path.node),
+    config = getConfig(path),
     voidTag = VoidElements.indexOf(tagName) > -1,
     results = {
       template: [`<${tagName}`],
@@ -1443,10 +1455,10 @@ function transformElement(path, info) {
     results.template.push("");
     results.templateValues.push(t__namespace.callExpression(t__namespace.identifier("_$ssrHydrationKey"), []));
   }
-  transformAttributes(path, results);
+  transformAttributes$1(path, results);
   appendToTemplate(results.template, ">");
   if (!voidTag) {
-    transformChildren(path, results);
+    transformChildren$1(path, results, config);
     appendToTemplate(results.template, `</${tagName}>`);
   }
   return results;
@@ -1458,12 +1470,11 @@ function toAttribute(key, isSVG) {
   return key;
 }
 
-function setAttr(results, name, value, isSVG) {
+function setAttr$1(results, name, value, isSVG) {
   // strip out namespaces for now, everything at this point is an attribute
   let parts;
   if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
     name = parts[1];
-    parts[0];
   }
 
   name = toAttribute(name, isSVG);
@@ -1543,7 +1554,7 @@ function transformToObject(attrName, attributes, selectedAttributes) {
   }
 }
 
-function transformAttributes(path, results) {
+function transformAttributes$1(path, results) {
   let children;
   const tagName = getTagName(path.node),
     isSVG = SVGElements.has(tagName),
@@ -1615,7 +1626,9 @@ function transformAttributes(path, results) {
             checkMember: true,
             native: true
           })
-            ? t__namespace.arrowFunctionExpression([], node.argument)
+            ? t__namespace.isCallExpression(node.argument) && !node.argument.arguments.length
+              ? node.argument.callee
+              : t__namespace.arrowFunctionExpression([], node.argument)
             : node.argument,
           t__namespace.booleanLiteral(isSVG),
           t__namespace.booleanLiteral(hasChildren)
@@ -1732,7 +1745,7 @@ function transformAttributes(path, results) {
             doEscape ? escapeExpression(path, value.expression, true) : value.expression
           );
         else if (doEscape) value.expression = escapeExpression(path, value.expression, true);
-        setAttr(results, key, value.expression, isSVG);
+        setAttr$1(results, key, value.expression, isSVG);
       }
     } else {
       if (key === "$ServerOnly") return;
@@ -1778,10 +1791,9 @@ function transformClasslistObject(path, expr, values, quasis) {
   });
 }
 
-function transformChildren(path, results) {
-  const { hydratable } = config,
-    doNotEscape = path.doNotEscape;
-  const filteredChildren = filterChildren(path.get("children"), true);
+function transformChildren$1(path, results, { hydratable }) {
+  const doNotEscape = path.doNotEscape;
+  const filteredChildren = filterChildren(path.get("children"));
   filteredChildren.forEach(node => {
     const child = transformNode(node, { doNotEscape });
     appendToTemplate(results.template, child.template);
@@ -1806,7 +1818,7 @@ function transformChildren(path, results) {
   });
 }
 
-function createTemplate(path, result) {
+function createTemplate$1(path, result) {
   if (!result.template) {
     return result.exprs[0];
   }
@@ -1852,11 +1864,342 @@ function appendTemplates(path, templates) {
   path.node.body.unshift(t__namespace.variableDeclaration("const", declarators));
 }
 
+function transformElement(path, info) {
+  let tagName = getTagName(path.node),
+    results = {
+      id: path.scope.generateUidIdentifier("el$"),
+      decl: [],
+      exprs: [],
+      dynamics: [],
+      postExprs: [],
+      tagName
+    };
+
+  registerImportMethod(path, "createElement");
+  results.decl.push(
+    t__namespace.variableDeclarator(
+      results.id,
+      t__namespace.callExpression(t__namespace.identifier("_$createElement"), [t__namespace.stringLiteral(tagName)])
+    )
+  );
+
+  transformAttributes(path, results);
+  transformChildren(path, results);
+
+  return results;
+}
+
+function transformAttributes(path, results) {
+  let children;
+  const elem = results.id,
+    spread = t__namespace.identifier("_$spread"),
+    hasChildren = path.node.children.length > 0,
+    config = getConfig(path);
+
+  path
+    .get("openingElement")
+    .get("attributes")
+    .forEach(attribute => {
+      const node = attribute.node;
+      if (t__namespace.isJSXSpreadAttribute(node)) {
+        registerImportMethod(attribute, "spread");
+        results.exprs.push(
+          t__namespace.expressionStatement(
+            t__namespace.callExpression(spread, [
+              elem,
+              isDynamic(attribute.get("argument"), {
+                checkMember: true
+              })
+                ? t__namespace.isCallExpression(node.argument) && !node.argument.arguments.length
+                  ? node.argument.callee
+                  : t__namespace.arrowFunctionExpression([], node.argument)
+                : node.argument,
+              t__namespace.booleanLiteral(hasChildren)
+            ])
+          )
+        );
+        return;
+      }
+
+      let value = node.value,
+        key = t__namespace.isJSXNamespacedName(node.name)
+          ? `${node.name.namespace.name}:${node.name.name.name}`
+          : node.name.name,
+        reservedNameSpace = t__namespace.isJSXNamespacedName(node.name) && node.name.namespace.name === "use";
+      if (
+        t__namespace.isJSXNamespacedName(node.name) &&
+        reservedNameSpace &&
+        !t__namespace.isJSXExpressionContainer(value)
+      ) {
+        node.value = value = t__namespace.JSXExpressionContainer(value || t__namespace.JSXEmptyExpression());
+      }
+      if (t__namespace.isJSXExpressionContainer(value)) {
+        if (key === "ref") {
+          // Normalize expressions for non-null and type-as
+          while (
+            t__namespace.isTSNonNullExpression(value.expression) ||
+            t__namespace.isTSAsExpression(value.expression)
+          ) {
+            value.expression = value.expression.expression;
+          }
+          if (t__namespace.isLVal(value.expression)) {
+            const refIdentifier = path.scope.generateUidIdentifier("_ref$");
+            results.exprs.unshift(
+              t__namespace.variableDeclaration("const", [
+                t__namespace.variableDeclarator(refIdentifier, value.expression)
+              ]),
+              t__namespace.expressionStatement(
+                t__namespace.conditionalExpression(
+                  t__namespace.binaryExpression(
+                    "===",
+                    t__namespace.unaryExpression("typeof", refIdentifier),
+                    t__namespace.stringLiteral("function")
+                  ),
+                  t__namespace.callExpression(refIdentifier, [elem]),
+                  t__namespace.assignmentExpression("=", value.expression, elem)
+                )
+              )
+            );
+          } else if (t__namespace.isFunction(value.expression)) {
+            results.exprs.unshift(
+              t__namespace.expressionStatement(t__namespace.callExpression(value.expression, [elem]))
+            );
+          } else if (t__namespace.isCallExpression(value.expression)) {
+            const refIdentifier = path.scope.generateUidIdentifier("_ref$");
+            results.exprs.unshift(
+              t__namespace.variableDeclaration("const", [
+                t__namespace.variableDeclarator(refIdentifier, value.expression)
+              ]),
+              t__namespace.expressionStatement(
+                t__namespace.logicalExpression(
+                  "&&",
+                  t__namespace.binaryExpression(
+                    "===",
+                    t__namespace.unaryExpression("typeof", refIdentifier),
+                    t__namespace.stringLiteral("function")
+                  ),
+                  t__namespace.callExpression(refIdentifier, [elem])
+                )
+              )
+            );
+          }
+        } else if (key.startsWith("use:")) {
+          results.exprs.unshift(
+            t__namespace.expressionStatement(
+              t__namespace.callExpression(t__namespace.identifier(node.name.name.name), [
+                elem,
+                t__namespace.arrowFunctionExpression(
+                  [],
+                  t__namespace.isJSXEmptyExpression(value.expression)
+                    ? t__namespace.booleanLiteral(true)
+                    : value.expression
+                )
+              ])
+            )
+          );
+        } else if (key === "children") {
+          children = value;
+        } else if (
+          config.effectWrapper &&
+          isDynamic(attribute.get("value").get("expression"), {
+            checkMember: true
+          })
+        ) {
+          results.dynamics.push({ elem, key, value: value.expression });
+        } else {
+          results.exprs.push(
+            t__namespace.expressionStatement(setAttr(attribute, elem, key, value.expression))
+          );
+        }
+      } else {
+        results.exprs.push(t__namespace.expressionStatement(setAttr(attribute, elem, key, value)));
+      }
+    });
+  if (!hasChildren && children) {
+    path.node.children.push(children);
+  }
+}
+
+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"),
+    prevId ? [elem, t__namespace.stringLiteral(name), value, prevId] : [elem, t__namespace.stringLiteral(name), value]
+  );
+}
+
+function transformChildren(path, results) {
+  const filteredChildren = filterChildren(path.get("children")),
+    multi = checkLength(filteredChildren),
+    childNodes = filteredChildren.map(transformNode).reduce((memo, child) => {
+      if (!child) return memo;
+      const i = memo.length;
+      if (child.text && i && memo[i - 1].text) {
+        memo[i - 1].template += child.template;
+      } else memo.push(child);
+      return memo;
+    }, []);
+
+  const appends = [];
+  childNodes.forEach((child, index) => {
+    if (!child) return;
+    if (child.id) {
+      registerImportMethod(path, "insertNode");
+      let insert = child.id;
+      if (child.text) {
+        registerImportMethod(path, "createTextNode");
+        if (multi) {
+          results.decl.push(
+            t__namespace.variableDeclarator(
+              child.id,
+              t__namespace.callExpression(t__namespace.identifier("_$createTextNode"), [
+                t__namespace.stringLiteral(htmlEntities.decode(child.template))
+              ])
+            )
+          );
+        } else
+          insert = t__namespace.callExpression(t__namespace.identifier("_$createTextNode"), [
+            t__namespace.stringLiteral(htmlEntities.decode(child.template))
+          ]);
+      }
+      appends.push(
+        t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.identifier("_$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");
+      if (multi) {
+        results.exprs.push(
+          t__namespace.expressionStatement(
+            t__namespace.callExpression(t__namespace.identifier("_$insert"), [
+              results.id,
+              child.exprs[0],
+              nextChild(childNodes, index) || t__namespace.nullLiteral()
+            ])
+          )
+        );
+      } else {
+        results.exprs.push(
+          t__namespace.expressionStatement(
+            t__namespace.callExpression(t__namespace.identifier("_$insert"), [results.id, child.exprs[0]])
+          )
+        );
+      }
+    }
+  });
+  results.exprs.unshift(...appends);
+}
+
+function nextChild(children, index) {
+  return children[index + 1] && (children[index + 1].id || nextChild(children, index + 1));
+}
+
+function createTemplate(path, result, wrap) {
+  const config = getConfig(path);
+  if (result.id) {
+    result.decl = t__namespace.variableDeclaration("const", result.decl);
+    if (
+      !(result.exprs.length || result.dynamics.length || result.postExprs.length) &&
+      result.decl.declarations.length === 1
+    ) {
+      return result.decl.declarations[0].init;
+    } else {
+      return t__namespace.callExpression(
+        t__namespace.arrowFunctionExpression(
+          [],
+          t__namespace.blockStatement([
+            result.decl,
+            ...result.exprs.concat(
+              wrapDynamics(path, result.dynamics) || [],
+              result.postExprs || []
+            ),
+            t__namespace.returnStatement(result.id)
+          ])
+        ),
+        []
+      );
+    }
+  }
+  if (wrap && result.dynamic && config.memoWrapper) {
+    registerImportMethod(path, config.memoWrapper);
+    return t__namespace.callExpression(t__namespace.identifier(`_$${config.memoWrapper}`), [result.exprs[0]]);
+  }
+  return result.exprs[0];
+}
+
+function wrapDynamics(path, dynamics) {
+  if (!dynamics.length) return;
+  const config = getConfig(path);
+  registerImportMethod(path, config.effectWrapper);
+
+  const effectWrapperId = `_$${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.arrowFunctionExpression(
+          [prevValue],
+          setAttr(path, dynamics[0].elem, dynamics[0].key, dynamics[0].value, {
+            dynamic: true,
+            prevId: prevValue
+          })
+        )
+      ])
+    );
+  }
+  const decls = [],
+    statements = [],
+    identifiers = [],
+    prevId = t__namespace.identifier("_p$");
+  dynamics.forEach(({ elem, key, value }) => {
+    const identifier = path.scope.generateUidIdentifier("v$");
+    identifiers.push(identifier);
+    decls.push(t__namespace.variableDeclarator(identifier, value));
+    const prev = t__namespace.memberExpression(prevId, identifier);
+    statements.push(
+      t__namespace.expressionStatement(
+        t__namespace.logicalExpression(
+          "&&",
+          t__namespace.binaryExpression("!==", identifier, t__namespace.memberExpression(prevId, identifier)),
+          t__namespace.assignmentExpression("=", t__namespace.memberExpression(prevId, identifier), setAttr(
+            path,
+            elem,
+            key,
+            identifier,
+            { dynamic: true, prevId: prev }
+          ))
+        )
+      )
+    );
+  });
+
+  return t__namespace.expressionStatement(
+    t__namespace.callExpression(t__namespace.identifier(effectWrapperId), [
+      t__namespace.arrowFunctionExpression(
+        [prevId],
+        t__namespace.blockStatement([
+          t__namespace.variableDeclaration("const", decls),
+          ...statements,
+          t__namespace.returnStatement(prevId)
+        ])
+      ),
+      t__namespace.objectExpression(identifiers.map(id => t__namespace.objectProperty(id, t__namespace.identifier("undefined"))))
+    ])
+  );
+}
+
 function transformComponent(path) {
-  let props = [],
+  let exprs = [],
+    config = getConfig(path),
+    tagName = getTagName(path.node),
+    props = [],
     runningObject = [],
-    exprs = [],
-    tagName = getTagName(path.node);
+    hasChildren = path.node.children.length > 0;
 
   if (config.builtIns.indexOf(tagName) > -1 && !path.scope.hasBinding(tagName)) {
     registerImportMethod(path, tagName);
@@ -1873,17 +2216,38 @@ function transformComponent(path) {
           props.push(t__namespace.objectExpression(runningObject));
           runningObject = [];
         }
-        props.push(node.argument);
+        props.push(
+          isDynamic(attribute.get("argument"), {
+            checkMember: true
+          })
+            ? t__namespace.isCallExpression(node.argument) && !node.argument.arguments.length
+              ? node.argument.callee
+              : t__namespace.arrowFunctionExpression([], node.argument)
+            : node.argument
+        );
       } 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;
+        if (hasChildren && key === "children") return;
         if (t__namespace.isJSXExpressionContainer(value))
           if (key === "ref") {
             if (config.generate === "ssr") return;
-            if (t__namespace.isLVal(value.expression)) {
+            // Normalize expressions for non-null and type-as
+            while (
+              t__namespace.isTSNonNullExpression(value.expression) ||
+              t__namespace.isTSAsExpression(value.expression)
+            ) {
+              value.expression = value.expression.expression;
+            }
+            let binding,
+              isFunction =
+                t__namespace.isIdentifier(value.expression) &&
+                (binding = path.scope.getBinding(value.expression.name)) &&
+                binding.kind === "const";
+            if (!isFunction && t__namespace.isLVal(value.expression)) {
               const refIdentifier = path.scope.generateUidIdentifier("_ref$");
               runningObject.push(
                 t__namespace.objectMethod(
@@ -1908,7 +2272,7 @@ function transformComponent(path) {
                   ])
                 )
               );
-            } else if (t__namespace.isFunction(value.expression)) {
+            } else if (isFunction || t__namespace.isFunction(value.expression)) {
               runningObject.push(t__namespace.objectProperty(t__namespace.identifier("ref"), value.expression));
             } else if (t__namespace.isCallExpression(value.expression)) {
               const refIdentifier = path.scope.generateUidIdentifier("_ref$");
@@ -1967,7 +2331,7 @@ function transformComponent(path) {
       }
     });
 
-  const childResult = transformComponentChildren(path.get("children"));
+  const childResult = transformComponentChildren(path.get("children"), config);
   if (childResult && childResult[0]) {
     if (childResult[1]) {
       const body =
@@ -2007,24 +2371,31 @@ function transformComponent(path) {
   return { exprs, template: "", component: true };
 }
 
-function transformComponentChildren(children) {
-  const createTemplate$2 = config.generate === "ssr" ? createTemplate : createTemplate$1,
+function transformComponentChildren(children, config) {
+  const createTemplate$3 =
+      config.generate === "universal"
+        ? createTemplate
+        : config.generate === "ssr"
+        ? createTemplate$1
+        : createTemplate$2,
     filteredChildren = filterChildren(children);
   if (!filteredChildren.length) return;
   let dynamic = false;
 
-  let transformedChildren = filteredChildren.map(path => {
+  let transformedChildren = filteredChildren.reduce((memo, path) => {
     if (t__namespace.isJSXText(path.node)) {
-      return t__namespace.stringLiteral(trimWhitespace(path.node.extra.rawValue));
+      const v = htmlEntities.decode(trimWhitespace(path.node.extra.raw));
+      if (v.length) memo.push(t__namespace.stringLiteral(v));
     } else {
       const child = transformNode(path, {
         topLevel: true,
         componentChild: true
       });
       dynamic = dynamic || child.dynamic;
-      return createTemplate$2(path, child, filteredChildren.length > 1);
+      memo.push(createTemplate$3(path, child, filteredChildren.length > 1));
     }
-  });
+    return memo;
+  }, []);
 
   if (filteredChildren.length === 1) {
     transformedChildren = transformedChildren[0];
@@ -2048,20 +2419,30 @@ function transformComponentChildren(children) {
   return [transformedChildren, dynamic];
 }
 
-function transformFragmentChildren(children, results) {
-  const createTemplate$2 = config.generate === "ssr" ? createTemplate : createTemplate$1,
+function transformFragmentChildren(children, results, config) {
+  const createTemplate$3 =
+      config.generate === "universal"
+        ? createTemplate
+        : config.generate === "ssr"
+        ? createTemplate$1
+        : createTemplate$2,
     filteredChildren = filterChildren(children),
     singleChild = filteredChildren.length === 1,
-    childNodes = filteredChildren.map(path => {
-      if (t__namespace.isJSXText(path.node)) return t__namespace.stringLiteral(trimWhitespace(path.node.extra.raw));
-      const child = transformNode(path, { topLevel: true, fragmentChild: true });
-      return createTemplate$2(path, child, !singleChild);
-    });
+    childNodes = filteredChildren.reduce((memo, path) => {
+      if (t__namespace.isJSXText(path.node)) {
+        const v =  htmlEntities.decode(trimWhitespace(path.node.extra.raw));
+        if (v.length) memo.push(t__namespace.stringLiteral(v));
+      } else {
+        const child = transformNode(path, { topLevel: true, fragmentChild: true });
+        memo.push(createTemplate$3(path, child, !singleChild));
+      }
+      return memo;
+    }, []);
   results.exprs.push(singleChild ? childNodes[0] : t__namespace.arrayExpression(childNodes));
 }
 
-function transformJSX(path, { opts }) {
-  Object.assign(config, opts);
+function transformJSX(path) {
+  const config = getConfig(path);
   const replace = transformThis(path);
   const result = transformNode(
     path,
@@ -2071,7 +2452,12 @@ function transformJSX(path, { opts }) {
           topLevel: true
         }
   );
-  const template = config.generate === "ssr" ? createTemplate : createTemplate$1;
+  const template =
+    config.generate === "universal"
+      ? createTemplate
+      : config.generate === "ssr"
+      ? createTemplate$1
+      : createTemplate$2;
   path.replaceWith(replace(template(path, result, false)));
 }
 
@@ -2099,16 +2485,22 @@ function transformThis(path) {
 }
 
 function transformNode(path, info = {}) {
+  const config = getConfig(path);
   const node = path.node;
   let staticValue;
   if (t__namespace.isJSXElement(node)) {
     let tagName = getTagName(node);
     if (isComponent(tagName)) return transformComponent(path);
-    const element = config.generate === "ssr" ? transformElement : transformElement$1;
+    const element =
+      config.generate === "universal"
+        ? transformElement
+        : config.generate === "ssr"
+        ? transformElement$1
+        : transformElement$2;
     return element(path, info);
   } else if (t__namespace.isJSXFragment(node)) {
     let results = { template: "", decl: [], exprs: [], dynamics: [] };
-    transformFragmentChildren(path.get("children"), results);
+    transformFragmentChildren(path.get("children"), results, config);
     return results;
   } else if (t__namespace.isJSXText(node) || (staticValue = getStaticExpression(path))) {
     const text =
@@ -2187,6 +2579,7 @@ function transformNode(path, info = {}) {
 
 // add to the top/bottom of the module.
 var postprocess = path => {
+  const config = getConfig(path);
   if (path.scope.data.events) {
     registerImportMethod(path, "delegateEvents");
     path.node.body.push(
@@ -2203,7 +2596,23 @@ var postprocess = path => {
   }
 };
 
-var preprocess = path => {
+var config = {
+  moduleName: "dom",
+  generate: "dom",
+  hydratable: false,
+  delegateEvents: true,
+  delegatedEvents: [],
+  builtIns: [],
+  requireImportSource: false,
+  wrapConditionals: true,
+  contextToCustomElements: false,
+  staticMarker: "@once",
+  effectWrapper: "effect",
+  memoWrapper: "memo"
+};
+
+var preprocess = (path, { opts })  => {
+  path.hub.file.metadata.config = Object.assign({}, config, opts);
   const lib = config.requireImportSource;
   if (lib) {
     const comments = path.hub.file.ast.comments;

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.29.16",
+  "version": "0.30.3",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -20,7 +20,8 @@
   "dependencies": {
     "@babel/helper-module-imports": "^7.10.4",
     "@babel/plugin-syntax-jsx": "^7.10.4",
-    "@babel/types": "^7.11.5"
+    "@babel/types": "^7.11.5",
+    "html-entities": "2.3.2"
   },
-  "gitHead": "394e9b0081d5c6221a406ed18b4cd22329a32cc3"
+  "gitHead": "4eb94a2d860cb1b1fa09cce9b47c52e72f2e6648"
 }