babel-plugin-jsx-dom-expressions 0.34.11 → 0.35.0-beta.0

package/index.js

@@ -219,6 +219,14 @@ const reservedNameSpaces = new Set([
   "attr"
 ]);
 
+const nonSpreadNameSpaces = new Set([
+  "class",
+  "style",
+  "use",
+  "prop",
+  "attr"
+]);
+
 function getConfig(path) {
   return path.hub.file.metadata.config;
 }
@@ -429,7 +437,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(memo, [t__namespace.arrowFunctionExpression([], cond), t__namespace.booleanLiteral(true)])
+        ? t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)])
         : path.scope.generateUidIdentifier("_c$");
       expr.test = t__namespace.callExpression(id, []);
       if (t__namespace.isConditionalExpression(expr.consequent) || t__namespace.isLogicalExpression(expr.consequent)) {
@@ -455,7 +463,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(memo, [t__namespace.arrowFunctionExpression([], cond), t__namespace.booleanLiteral(true)])
+        ? t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)])
         : path.scope.generateUidIdentifier("_c$");
       nextPath.node.left = t__namespace.callExpression(id, []);
     }
@@ -466,7 +474,7 @@ function transformCondition(path, inline, deep) {
         t__namespace.variableDeclarator(
           id,
           config.memoWrapper
-            ? t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond), t__namespace.booleanLiteral(true)])
+            ? t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)])
             : t__namespace.arrowFunctionExpression([], cond)
         )
       ]),
@@ -534,6 +542,13 @@ function escapeHTML(s, attr) {
   return left < s.length ? out + s.substring(left) : out;
 }
 
+function canNativeSpread(key, { checkNameSpaces } = {}) {
+  if (checkNameSpaces && key.includes(":") && nonSpreadNameSpaces.has(key.split(":")[0])) return false;
+  // TODO: figure out how to detect definitely function ref
+  if (key === "ref") return false;
+  return true;
+}
+
 function transformElement$3(path, info) {
   let tagName = getTagName(path.node),
     config = getConfig(path),
@@ -681,6 +696,7 @@ function transformAttributes$2(path, results) {
   let elem = results.id,
     hasHydratableEvent = false,
     children,
+    spreadExpr,
     attributes = path.get("openingElement").get("attributes");
   const tagName = getTagName(path.node),
     isSVG = SVGElements.has(tagName),
@@ -688,15 +704,29 @@ function transformAttributes$2(path, results) {
     hasChildren = path.node.children.length > 0,
     config = getConfig(path);
 
+  // preprocess spreads
+  if (attributes.some(attribute => t__namespace.isJSXSpreadAttribute(attribute.node))) {
+    [attributes, spreadExpr] = processSpreads$1(path, attributes, { elem, isSVG, hasChildren });
+    path.get("openingElement").set(
+      "attributes",
+      attributes.map(a => a.node)
+    );
+    //NOTE: can't be checked at compile time so add to compiled output
+    hasHydratableEvent = true;
+  }
+
   // preprocess styles
-  const styleAttribute = attributes.find(
-    a =>
-      a.node.name &&
-      a.node.name.name === "style" &&
-      t__namespace.isJSXExpressionContainer(a.node.value) &&
-      t__namespace.isObjectExpression(a.node.value.expression) &&
-      !a.node.value.expression.properties.some(p => t__namespace.isSpreadElement(p))
-  );
+  const styleAttribute = path
+    .get("openingElement")
+    .get("attributes")
+    .find(
+      a =>
+        a.node.name &&
+        a.node.name.name === "style" &&
+        t__namespace.isJSXExpressionContainer(a.node.value) &&
+        t__namespace.isObjectExpression(a.node.value.expression) &&
+        !a.node.value.expression.properties.some(p => t__namespace.isSpreadElement(p))
+    );
   if (styleAttribute) {
     let i = 0,
       leading = styleAttribute.node.value.expression.leadingComments;
@@ -816,31 +846,6 @@ function transformAttributes$2(path, results) {
     .get("attributes")
     .forEach(attribute => {
       const node = attribute.node;
-      if (t__namespace.isJSXSpreadAttribute(node)) {
-        results.exprs.push(
-          t__namespace.expressionStatement(
-            t__namespace.callExpression(
-              registerImportMethod(attribute, "spread", getRendererConfig(path, "dom").moduleName),
-              [
-                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(isSVG),
-                t__namespace.booleanLiteral(hasChildren)
-              ]
-            )
-          )
-        );
-        //NOTE: can't be checked at compile time so add to compiled output
-        hasHydratableEvent = true;
-        return;
-      }
-
       let value = node.value,
         key = t__namespace.isJSXNamespacedName(node.name)
           ? `${node.name.namespace.name}:${node.name.name.name}`
@@ -1131,6 +1136,7 @@ function transformAttributes$2(path, results) {
   if (!hasChildren && children) {
     path.node.children.push(children);
   }
+  if (spreadExpr) results.exprs.push(spreadExpr);
 
   results.hasHydratableEvent = results.hasHydratableEvent || hasHydratableEvent;
 }
@@ -1333,6 +1339,87 @@ function contextToCustomElement(path, results) {
   );
 }
 
+function processSpreads$1(path, attributes, { elem, isSVG, hasChildren }) {
+  // TODO: skip but collect the names of any properties after the last spread to not overwrite them
+  const filteredAttributes = [];
+  const spreadArgs = [];
+  let runningObject = [];
+  let runningDynamic = false;
+  let dynamicSpread = false;
+  let firstSpread = false;
+  attributes.forEach(attribute => {
+    const node = attribute.node;
+    const key =
+      !t__namespace.isJSXSpreadAttribute(node) &&
+      (t__namespace.isJSXNamespacedName(node.name)
+        ? `${node.name.namespace.name}:${node.name.name.name}`
+        : node.name.name);
+    if (t__namespace.isJSXSpreadAttribute(node)) {
+      firstSpread = true;
+      if (runningObject.length) {
+        spreadArgs.push(
+          runningDynamic
+            ? t__namespace.arrowFunctionExpression([], t__namespace.objectExpression(runningObject))
+            : t__namespace.objectExpression(runningObject)
+        );
+        runningDynamic = false;
+        runningObject = [];
+      }
+      spreadArgs.push(
+        isDynamic(attribute.get("argument"), {
+          checkMember: true
+        }) && (dynamicSpread = true)
+          ? t__namespace.isCallExpression(node.argument) &&
+            !node.argument.arguments.length &&
+            !t__namespace.isCallExpression(node.argument.callee) &&
+            !t__namespace.isMemberExpression(node.argument.callee)
+            ? node.argument.callee
+            : t__namespace.arrowFunctionExpression([], node.argument)
+          : node.argument
+      );
+    } else if (
+      (firstSpread ||
+        (t__namespace.isJSXExpressionContainer(node.value) &&
+          isDynamic(attribute.get("value").get("expression"), { checkMember: true }))) &&
+      canNativeSpread(key, { checkNameSpaces: true })
+    ) {
+      const isContainer = t__namespace.isJSXExpressionContainer(node.value);
+      runningDynamic =
+        runningDynamic ||
+        (isContainer && isDynamic(attribute.get("value").get("expression"), { checkMember: true }));
+      runningObject.push(
+        t__namespace.objectProperty(
+          t__namespace.stringLiteral(key),
+          isContainer ? node.value.expression : node.value || t__namespace.stringLiteral("")
+        )
+      );
+    } else filteredAttributes.push(attribute);
+  });
+
+  if (runningObject.length) {
+    spreadArgs.push(
+      runningDynamic
+        ? t__namespace.arrowFunctionExpression([], t__namespace.objectExpression(runningObject))
+        : t__namespace.objectExpression(runningObject)
+    );
+  }
+
+  const props =
+    spreadArgs.length === 1 && !dynamicSpread
+      ? spreadArgs[0]
+      : t__namespace.callExpression(registerImportMethod(path, "mergeProps"), spreadArgs);
+
+  return [
+    filteredAttributes,
+    t__namespace.expressionStatement(
+      t__namespace.callExpression(
+        registerImportMethod(path, "spread", getRendererConfig(path, "dom").moduleName),
+        [elem, props, t__namespace.booleanLiteral(isSVG), t__namespace.booleanLiteral(hasChildren)]
+      )
+    )
+  ];
+}
+
 function createTemplate$2(path, result, wrap) {
   const config = getConfig(path);
   if (result.id) {
@@ -1952,18 +2039,12 @@ function transformChildren$1(path, results, { hydratable }) {
   filteredChildren.forEach(node => {
     if (t__namespace.isJSXElement(node.node) && getTagName(node.node) === "head") {
       const child = transformNode(node, { doNotEscape, hydratable: false });
-      registerImportMethod(path, "NoHydration");
+      registerImportMethod(path, "setHydratable");
       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))])
-            )
-          ])
+        t__namespace.callExpression(t__namespace.identifier("_$setHydratable"), [
+          t__namespace.arrowFunctionExpression([], createTemplate$1(path, child)),
+          t__namespace.booleanLiteral(false)
         ])
       );
       return;
@@ -1973,7 +2054,8 @@ function transformChildren$1(path, results, { hydratable }) {
     appendToTemplate(results.template, child.template);
     results.templateValues.push.apply(results.templateValues, child.templateValues || []);
     if (child.exprs.length) {
-      if (!doNotEscape && !child.spreadElement) child.exprs[0] = escapeExpression(path, child.exprs[0]);
+      if (!doNotEscape && !child.spreadElement)
+        child.exprs[0] = escapeExpression(path, child.exprs[0]);
 
       // boxed by textNodes
       if (markers && !child.spreadElement) {
@@ -2014,51 +2096,56 @@ function createElement(path, { topLevel, hydratable }) {
   if (attributes.length === 1) {
     transformed = attributes[0].node.argument;
   } else {
-    transformed = t__namespace.arrowFunctionExpression([], 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());
-        }
+    transformed = t__namespace.arrowFunctionExpression(
+      [],
+      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;
+            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;
-      }, [])
-    ));
+            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 = [
@@ -2114,41 +2201,26 @@ function transformElement$1(path, info) {
 }
 
 function transformAttributes(path, results) {
-  let children;
+  let children, spreadExpr;
+  let attributes = path.get("openingElement").get("attributes");
   const elem = results.id,
     hasChildren = path.node.children.length > 0,
     config = getConfig(path);
 
+  // preprocess spreads
+  if (attributes.some(attribute => t__namespace.isJSXSpreadAttribute(attribute.node))) {
+    [attributes, spreadExpr] = processSpreads(path, attributes, { elem, hasChildren });
+    path.get("openingElement").set(
+      "attributes",
+      attributes.map(a => a.node)
+    );
+  }
+
   path
     .get("openingElement")
     .get("attributes")
     .forEach(attribute => {
       const node = attribute.node;
-      if (t__namespace.isJSXSpreadAttribute(node)) {
-        results.exprs.push(
-          t__namespace.expressionStatement(
-            t__namespace.callExpression(
-              registerImportMethod(
-                attribute,
-                "spread",
-                getRendererConfig(path, "universal").moduleName
-              ),
-              [
-                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)
@@ -2273,6 +2345,7 @@ function transformAttributes(path, results) {
         results.exprs.push(t__namespace.expressionStatement(setAttr(attribute, elem, key, value)));
       }
     });
+  if (spreadExpr) results.exprs.push(spreadExpr);
   if (!hasChildren && children) {
     path.node.children.push(children);
   }
@@ -2366,6 +2439,87 @@ function nextChild(children, index) {
   return children[index + 1] && (children[index + 1].id || nextChild(children, index + 1));
 }
 
+function processSpreads(path, attributes, { elem, hasChildren }) {
+  // TODO: skip but collect the names of any properties after the last spread to not overwrite them
+  const filteredAttributes = [];
+  const spreadArgs = [];
+  let runningObject = [];
+  let runningDynamic = false;
+  let dynamicSpread = false;
+  let firstSpread = false;
+  attributes.forEach(attribute => {
+    const node = attribute.node;
+    const key =
+      !t__namespace.isJSXSpreadAttribute(node) &&
+      (t__namespace.isJSXNamespacedName(node.name)
+        ? `${node.name.namespace.name}:${node.name.name.name}`
+        : node.name.name);
+    if (t__namespace.isJSXSpreadAttribute(node)) {
+      firstSpread = true;
+      if (runningObject.length) {
+        spreadArgs.push(
+          runningDynamic
+            ? t__namespace.arrowFunctionExpression([], t__namespace.objectExpression(runningObject))
+            : t__namespace.objectExpression(runningObject)
+        );
+        runningDynamic = false;
+        runningObject = [];
+      }
+      spreadArgs.push(
+        isDynamic(attribute.get("argument"), {
+          checkMember: true
+        }) && (dynamicSpread = true)
+          ? t__namespace.isCallExpression(node.argument) &&
+            !node.argument.arguments.length &&
+            !t__namespace.isCallExpression(node.argument.callee) &&
+            !t__namespace.isMemberExpression(node.argument.callee)
+            ? node.argument.callee
+            : t__namespace.arrowFunctionExpression([], node.argument)
+          : node.argument
+      );
+    } else if (
+      (firstSpread ||
+        (t__namespace.isJSXExpressionContainer(node.value) &&
+          isDynamic(attribute.get("value").get("expression"), { checkMember: true }))) &&
+      canNativeSpread(key)
+    ) {
+      const isContainer = t__namespace.isJSXExpressionContainer(node.value);
+      runningDynamic =
+        runningDynamic ||
+        (isContainer && isDynamic(attribute.get("value").get("expression"), { checkMember: true }));
+      runningObject.push(
+        t__namespace.objectProperty(
+          t__namespace.stringLiteral(key),
+          isContainer ? node.value.expression : node.value || t__namespace.stringLiteral("")
+        )
+      );
+    } else filteredAttributes.push(attribute);
+  });
+
+  if (runningObject.length) {
+    spreadArgs.push(
+      runningDynamic
+        ? t__namespace.arrowFunctionExpression([], t__namespace.objectExpression(runningObject))
+        : t__namespace.objectExpression(runningObject)
+    );
+  }
+
+  const props =
+    spreadArgs.length === 1 && !dynamicSpread
+      ? spreadArgs[0]
+      : t__namespace.callExpression(registerImportMethod(path, "mergeProps"), spreadArgs);
+
+  return [
+    filteredAttributes,
+    t__namespace.expressionStatement(
+      t__namespace.callExpression(
+        registerImportMethod(path, "spread", getRendererConfig(path, "universal").moduleName),
+        [elem, props, t__namespace.booleanLiteral(hasChildren)]
+      )
+    )
+  ];
+}
+
 function createTemplate(path, result, wrap) {
   const config = getConfig(path);
   if (result.id) {

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.34.11",
+  "version": "0.35.0-beta.0",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -27,5 +27,5 @@
   "peerDependencies": {
     "@babel/core": "^7.0.0"
   },
-  "gitHead": "ed99d8856de6b9f993d3ec94afa24f288b09a37b"
+  "gitHead": "a4e7a727b92834f6f2550ff7314fe2e57715cadb"
 }