babel-plugin-jsx-dom-expressions 0.33.14 → 0.34.0-beta.2

package/index.js

@@ -289,7 +289,11 @@ function isDynamic(path, { checkMember, checkTags, checkCallExpressions = true,
   }
   if (
     (checkCallExpressions && t__namespace.isCallExpression(expr)) ||
-    (checkMember && (t__namespace.isMemberExpression(expr) || t__namespace.isOptionalMemberExpression(expr))) ||
+    (checkMember &&
+      (t__namespace.isMemberExpression(expr) ||
+        t__namespace.isOptionalMemberExpression(expr) ||
+        t__namespace.isSpreadElement(expr) ||
+        (t__namespace.isBinaryExpression(expr) && expr.operator === "in"))) ||
     (checkTags && (t__namespace.isJSXElement(expr) || t__namespace.isJSXFragment(expr)))
   )
     return true;
@@ -314,6 +318,9 @@ function isDynamic(path, { checkMember, checkTags, checkCallExpressions = true,
     SpreadElement(p) {
       checkMember && (dynamic = true) && p.stop();
     },
+    BinaryExpression(p) {
+      checkMember && p.node.operator === "in" && (dynamic = true) && p.stop();
+    },
     JSXElement(p) {
       checkTags ? (dynamic = true) && p.stop() : p.skip();
     },
@@ -541,7 +548,8 @@ function transformElement$3(path, info) {
       tagName,
       renderer: "dom"
     };
-  if (tagName === "html" && config.hydratable) results.skipTemplate = true;
+  if (config.hydratable && (tagName === "html" || tagName === "head" || tagName === "body"))
+    results.skipTemplate = true;
   if (wrapSVG) results.template = "<svg>" + results.template;
   if (!info.skipId) results.id = path.scope.generateUidIdentifier("el$");
   transformAttributes$2(path, results);
@@ -884,14 +892,22 @@ function transformAttributes$2(path, results) {
                     t__namespace.unaryExpression("typeof", refIdentifier),
                     t__namespace.stringLiteral("function")
                   ),
-                  t__namespace.callExpression(refIdentifier, [elem]),
+                  t__namespace.callExpression(
+                    registerImportMethod(path, "use", getRendererConfig(path, "dom").moduleName),
+                    [refIdentifier, elem]
+                  ),
                   t__namespace.assignmentExpression("=", value.expression, elem)
                 )
               )
             );
           } else if (isFunction || t__namespace.isFunction(value.expression)) {
             results.exprs.unshift(
-              t__namespace.expressionStatement(t__namespace.callExpression(value.expression, [elem]))
+              t__namespace.expressionStatement(
+                t__namespace.callExpression(
+                  registerImportMethod(path, "use", getRendererConfig(path, "dom").moduleName),
+                  [value.expression, elem]
+                )
+              )
             );
           } else if (t__namespace.isCallExpression(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
@@ -907,7 +923,10 @@ function transformAttributes$2(path, results) {
                     t__namespace.unaryExpression("typeof", refIdentifier),
                     t__namespace.stringLiteral("function")
                   ),
-                  t__namespace.callExpression(refIdentifier, [elem])
+                  t__namespace.callExpression(
+                    registerImportMethod(path, "use", getRendererConfig(path, "dom").moduleName),
+                    [refIdentifier, elem]
+                  )
                 )
               )
             );
@@ -917,15 +936,19 @@ function transformAttributes$2(path, results) {
           node.name.name.type = "Identifier";
           results.exprs.unshift(
             t__namespace.expressionStatement(
-              t__namespace.callExpression(node.name.name, [
-                elem,
-                t__namespace.arrowFunctionExpression(
-                  [],
-                  t__namespace.isJSXEmptyExpression(value.expression)
-                    ? t__namespace.booleanLiteral(true)
-                    : value.expression
-                )
-              ])
+              t__namespace.callExpression(
+                registerImportMethod(path, "use", getRendererConfig(path, "dom").moduleName),
+                [
+                  node.name.name,
+                  elem,
+                  t__namespace.arrowFunctionExpression(
+                    [],
+                    t__namespace.isJSXEmptyExpression(value.expression)
+                      ? t__namespace.booleanLiteral(true)
+                      : value.expression
+                  )
+                ]
+              )
             )
           );
         } else if (key === "children") {
@@ -1547,7 +1570,11 @@ function appendToTemplate(template, value) {
 }
 
 function transformElement$2(path, info) {
-  let tagName = getTagName(path.node),
+  // contains spread attributes
+  if (path.node.openingElement.attributes.some(a => t__namespace.isJSXSpreadAttribute(a)))
+    return createElement(path, info);
+
+  const tagName = getTagName(path.node),
     config = getConfig(path),
     voidTag = VoidElements.indexOf(tagName) > -1,
     results = {
@@ -1676,12 +1703,8 @@ function transformToObject(attrName, attributes, selectedAttributes) {
   }
 }
 
-function transformAttributes$1(path, results) {
-  let children;
-  const tagName = getTagName(path.node),
-    isSVG = SVGElements.has(tagName),
-    hasChildren = path.node.children.length > 0,
-    attributes = path.get("openingElement").get("attributes"),
+function normalizeAttributes(path) {
+  const attributes = path.get("openingElement").get("attributes"),
     styleAttributes = attributes.filter(
       a => t__namespace.isJSXNamespacedName(a.node.name) && a.node.name.namespace.name === "style"
     ),
@@ -1735,28 +1758,18 @@ function transformAttributes$1(path, results) {
     first.value = t__namespace.JSXExpressionContainer(t__namespace.TemplateLiteral(quasis, values));
   }
   if (styleAttributes.length) transformToObject("style", attributes, styleAttributes);
+  return attributes;
+}
+
+function transformAttributes$1(path, results) {
+  const tagName = getTagName(path.node),
+    isSVG = SVGElements.has(tagName),
+    hasChildren = path.node.children.length > 0,
+    attributes = normalizeAttributes(path);
+  let children;
 
   attributes.forEach(attribute => {
     const node = attribute.node;
-    if (t__namespace.isJSXSpreadAttribute(node)) {
-      appendToTemplate(results.template, " ");
-      results.template.push("");
-      results.templateValues.push(
-        t__namespace.callExpression(registerImportMethod(attribute, "ssrSpread"), [
-          isDynamic(attribute.get("argument"), {
-            checkMember: true,
-            native: true
-          })
-            ? 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)
-        ])
-      );
-      return;
-    }
 
     let value = node.value,
       key = t__namespace.isJSXNamespacedName(node.name)
@@ -1855,8 +1868,7 @@ function transformAttributes$1(path, results) {
           key = "class";
           doEscape = false;
         }
-        if (doEscape)
-          value.expression = escapeExpression(path, value.expression, true);
+        if (doEscape) value.expression = escapeExpression(path, value.expression, true);
 
         if (!doEscape || t__namespace.isLiteral(value.expression) || t__namespace.isBinaryExpression(value.expression)) {
           key = toAttribute(key, isSVG);
@@ -1957,6 +1969,89 @@ function transformChildren$1(path, results, { hydratable }) {
   });
 }
 
+function createElement(path, { topLevel }) {
+  const tagName = getTagName(path.node),
+    config = getConfig(path),
+    attributes = normalizeAttributes(path);
+
+  const filteredChildren = filterChildren(path.get("children")),
+    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);
+        memo.push(getCreateTemplate(config, path, child)(path, child, true));
+      }
+      return memo;
+    }, []);
+
+  let transformed;
+  if (attributes.length === 1) {
+    transformed = attributes[0].node.argument;
+  } else {
+    transformed = t__namespace.objectExpression(
+      attributes.reduce((memo, attribute) => {
+        const node = attribute.node;
+
+        if (t__namespace.isJSXSpreadAttribute(node)) {
+          const expr = node.argument;
+          memo.push(t__namespace.spreadElement(expr));
+          return memo;
+        }
+        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) && reservedNameSpaces.has(node.name.namespace.name);
+        if (
+          ((t__namespace.isJSXNamespacedName(node.name) && reservedNameSpace) || ChildProperties.has(key)) &&
+          !t__namespace.isJSXExpressionContainer(value)
+        ) {
+          node.value = value = t__namespace.JSXExpressionContainer(value || t__namespace.JSXEmptyExpression());
+        }
+
+        if (
+          t__namespace.isJSXExpressionContainer(value) &&
+          (reservedNameSpace ||
+            ChildProperties.has(key) ||
+            !(t__namespace.isStringLiteral(value.expression) || t__namespace.isNumericLiteral(value.expression)))
+        ) {
+          if (
+            key === "ref" ||
+            key.startsWith("use:") ||
+            key.startsWith("prop:") ||
+            key.startsWith("on")
+          )
+            return memo;
+
+          memo.push(t__namespace.objectProperty(t__namespace.stringLiteral(key), value.expression));
+        } else {
+          if (key === "$ServerOnly") return memo;
+          if (t__namespace.isJSXExpressionContainer(value)) value = value.expression;
+          memo.push(t__namespace.objectProperty(t__namespace.stringLiteral(key), value ? value : t__namespace.booleanLiteral(true)));
+        }
+        return memo;
+      }, [])
+    );
+  }
+
+  const exprs = [
+    t__namespace.callExpression(registerImportMethod(path, "ssrElement"), [
+      t__namespace.stringLiteral(tagName),
+      transformed,
+      childNodes.length
+        ? childNodes.length === 1
+          ? childNodes[0]
+          : t__namespace.arrayExpression(childNodes)
+        : t__namespace.identifier("undefined"),
+      t__namespace.booleanLiteral(Boolean(topLevel && config.hydratable))
+    ])
+  ];
+  return { exprs, template: "" };
+}
+
 function transformElement$1(path, info) {
   let tagName = getTagName(path.node),
     results = {
@@ -2060,14 +2155,30 @@ function transformAttributes(path, results) {
                     t__namespace.unaryExpression("typeof", refIdentifier),
                     t__namespace.stringLiteral("function")
                   ),
-                  t__namespace.callExpression(refIdentifier, [elem]),
+                  t__namespace.callExpression(
+                    registerImportMethod(
+                      path,
+                      "use",
+                      getRendererConfig(path, "universal").moduleName
+                    ),
+                    [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]))
+              t__namespace.expressionStatement(
+                t__namespace.callExpression(
+                  registerImportMethod(
+                    path,
+                    "use",
+                    getRendererConfig(path, "universal").moduleName
+                  ),
+                  [value.expression, elem]
+                )
+              )
             );
           } else if (t__namespace.isCallExpression(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
@@ -2083,7 +2194,14 @@ function transformAttributes(path, results) {
                     t__namespace.unaryExpression("typeof", refIdentifier),
                     t__namespace.stringLiteral("function")
                   ),
-                  t__namespace.callExpression(refIdentifier, [elem])
+                  t__namespace.callExpression(
+                    registerImportMethod(
+                      path,
+                      "use",
+                      getRendererConfig(path, "universal").moduleName
+                    ),
+                    [refIdentifier, elem]
+                  )
                 )
               )
             );
@@ -2093,15 +2211,19 @@ function transformAttributes(path, results) {
           node.name.name.type = "Identifier";
           results.exprs.unshift(
             t__namespace.expressionStatement(
-              t__namespace.callExpression(node.name.name, [
-                elem,
-                t__namespace.arrowFunctionExpression(
-                  [],
-                  t__namespace.isJSXEmptyExpression(value.expression)
-                    ? t__namespace.booleanLiteral(true)
-                    : value.expression
-                )
-              ])
+              t__namespace.callExpression(
+                registerImportMethod(path, "use", getRendererConfig(path, "universal").moduleName),
+                [
+                  node.name.name,
+                  elem,
+                  t__namespace.arrowFunctionExpression(
+                    [],
+                    t__namespace.isJSXEmptyExpression(value.expression)
+                      ? t__namespace.booleanLiteral(true)
+                      : value.expression
+                  )
+                ]
+              )
             )
           );
         } else if (key === "children") {

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.33.14",
+  "version": "0.34.0-beta.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -27,5 +27,5 @@
   "peerDependencies": {
     "@babel/core": "^7.0.0"
   },
-  "gitHead": "22cfcec0f4a6ab639fc37997bcb8e0ff8563397d"
+  "gitHead": "80b54ffb1029d3fc735fd0604ead837758071fec"
 }