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

package/index.js

@@ -57,24 +57,36 @@ const booleans = [
 
 const BooleanAttributes = /*#__PURE__*/ new Set(booleans);
 
-const Properties = /*#__PURE__*/ new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const Properties = /*#__PURE__*/ new Set([
+  "className",
+  "value",
+  "readOnly",
+  "formNoValidate",
+  "isMap",
+  "noModule",
+  "playsInline",
+  ...booleans
+]);
 
-const ChildProperties = /*#__PURE__*/ new Set(["innerHTML", "textContent", "innerText", "children"]);
+const ChildProperties = /*#__PURE__*/ new Set([
+  "innerHTML",
+  "textContent",
+  "innerText",
+  "children"
+]);
 
 // React Compat
-const Aliases = {
-  className: "class",
-  htmlFor: "for"
-};
-
-const PropAliases = {
-  class: "className",
-  formnovalidate: "formNoValidate",
-  ismap: "isMap",
-  nomodule: "noModule",
-  playsinline: "playsInline",
-  readonly: "readOnly"
-};
+const Aliases = Object.create(null);
+Aliases.className = "class";
+Aliases.htmlFor = "for";
+
+const PropAliases = Object.create(null);
+PropAliases.class = "className";
+PropAliases.formnovalidate = "formNoValidate";
+PropAliases.ismap = "isMap";
+PropAliases.nomodule = "noModule";
+PropAliases.playsinline = "playsInline";
+PropAliases.readonly = "readOnly";
 
 // list of Element events that will be delegated
 const DelegatedEvents = /*#__PURE__*/ new Set([
@@ -419,7 +431,7 @@ function wrappedByText(list, startIndex) {
   return false;
 }
 
-function transformCondition(path, inline, deep) {
+function transformCondition$1(path, inline, deep) {
   const config = getConfig(path);
   const expr = path.node;
   const memo = registerImportMethod(path, config.memoWrapper);
@@ -441,10 +453,10 @@ function transformCondition(path, inline, deep) {
         : path.scope.generateUidIdentifier("_c$");
       expr.test = t__namespace.callExpression(id, []);
       if (t__namespace.isConditionalExpression(expr.consequent) || t__namespace.isLogicalExpression(expr.consequent)) {
-        expr.consequent = transformCondition(path.get("consequent"), inline, true);
+        expr.consequent = transformCondition$1(path.get("consequent"), inline, true);
       }
       if (t__namespace.isConditionalExpression(expr.alternate) || t__namespace.isLogicalExpression(expr.alternate)) {
-        expr.alternate = transformCondition(path.get("alternate"), inline, true);
+        expr.alternate = transformCondition$1(path.get("alternate"), inline, true);
       }
     }
   } else if (t__namespace.isLogicalExpression(expr)) {
@@ -542,6 +554,25 @@ function escapeHTML(s, attr) {
   return left < s.length ? out + s.substring(left) : out;
 }
 
+function convertJSXIdentifier(node) {
+  if (t__namespace.isJSXIdentifier(node)) {
+    if (t__namespace.isValidIdentifier(node.name)) {
+      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 canNativeSpread(key, { checkNameSpaces } = {}) {
   if (checkNameSpaces && key.includes(":") && nonSpreadNameSpaces.has(key.split(":")[0])) return false;
   // TODO: figure out how to detect definitely function ref
@@ -566,8 +597,27 @@ function transformElement$3(path, info) {
       tagName,
       renderer: "dom"
     };
-  if (config.hydratable && (tagName === "html" || tagName === "head" || tagName === "body"))
+  if (config.hydratable && (tagName === "html" || tagName === "head" || tagName === "body")) {
     results.skipTemplate = true;
+    if (tagName === "head" && info.topLevel) {
+      const createComponent = registerImportMethod(
+        path,
+        "createComponent",
+        getRendererConfig(path, "dom").moduleName
+      );
+      const NoHydration = registerImportMethod(
+        path,
+        "NoHydration",
+        getRendererConfig(path, "dom").moduleName
+      );
+      results.exprs.push(
+        t__namespace.expressionStatement(
+          t__namespace.callExpression(createComponent, [NoHydration, t__namespace.objectExpression([])])
+        )
+      );
+      return results;
+    }
+  }
   if (wrapSVG) results.template = "<svg>" + results.template;
   if (!info.skipId) results.id = path.scope.generateUidIdentifier("el$");
   transformAttributes$2(path, results);
@@ -706,7 +756,12 @@ function transformAttributes$2(path, results) {
 
   // preprocess spreads
   if (attributes.some(attribute => t__namespace.isJSXSpreadAttribute(attribute.node))) {
-    [attributes, spreadExpr] = processSpreads$1(path, attributes, { elem, isSVG, hasChildren });
+    [attributes, spreadExpr] = processSpreads$1(path, attributes, {
+      elem,
+      isSVG,
+      hasChildren,
+      wrapConditionals: config.wrapConditionals
+    });
     path.get("openingElement").set(
       "attributes",
       attributes.map(a => a.node)
@@ -1173,7 +1228,26 @@ function transformChildren$2(path, results, config) {
 
     results.template += child.template;
     if (child.id) {
-      if (child.tagName === "head") return;
+      if (child.tagName === "head") {
+        if (config.hydratable) {
+          const createComponent = registerImportMethod(
+            path,
+            "createComponent",
+            getRendererConfig(path, "dom").moduleName
+          );
+          const NoHydration = registerImportMethod(
+            path,
+            "NoHydration",
+            getRendererConfig(path, "dom").moduleName
+          );
+          results.exprs.push(
+            t__namespace.expressionStatement(
+              t__namespace.callExpression(createComponent, [NoHydration, t__namespace.objectExpression([])])
+            )
+          );
+        }
+        return;
+      }
 
       let getNextMatch;
       if (config.hydratable && tagName === "html") {
@@ -1339,12 +1413,11 @@ function contextToCustomElement(path, results) {
   );
 }
 
-function processSpreads$1(path, attributes, { elem, isSVG, hasChildren }) {
+function processSpreads$1(path, attributes, { elem, isSVG, hasChildren, wrapConditionals }) {
   // 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 => {
@@ -1357,12 +1430,7 @@ function processSpreads$1(path, attributes, { elem, isSVG, hasChildren }) {
     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;
+        spreadArgs.push(t__namespace.objectExpression(runningObject));
         runningObject = [];
       }
       spreadArgs.push(
@@ -1384,24 +1452,38 @@ function processSpreads$1(path, attributes, { elem, isSVG, hasChildren }) {
       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("")
-        )
-      );
+      const dynamic =
+        isContainer && isDynamic(attribute.get("value").get("expression"), { checkMember: true });
+      if (dynamic) {
+        const id = convertJSXIdentifier(node.name);
+        let expr =
+          wrapConditionals &&
+          (t__namespace.isLogicalExpression(node.value.expression) ||
+            t__namespace.isConditionalExpression(node.value.expression))
+            ? transformCondition(attribute.get("value").get("expression"), true)
+            : t__namespace.arrowFunctionExpression([], node.value.expression);
+        runningObject.push(
+          t__namespace.objectMethod(
+            "get",
+            id,
+            [],
+            t__namespace.blockStatement([t__namespace.returnStatement(expr.body)]),
+            !t__namespace.isValidIdentifier(key)
+          )
+        );
+      } else {
+        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)
-    );
+    spreadArgs.push(t__namespace.objectExpression(runningObject));
   }
 
   const props =
@@ -1654,7 +1736,7 @@ function createTemplate$1(path, result) {
 
   return t__namespace.callExpression(
     registerImportMethod(path, "ssr"),
-    result.template.length > 1 ? [id, ...result.templateValues] : [id]
+    Array.isArray(result.template) && result.template.length > 1 ? [id, ...result.templateValues] : [id]
   );
 }
 
@@ -1693,6 +1775,26 @@ function transformElement$2(path, info) {
     };
 
   if (info.topLevel && config.hydratable) {
+    if (tagName === "head") {
+      registerImportMethod(path, "NoHydration");
+      registerImportMethod(path, "createComponent");
+      const child = transformElement$2(path, { ...info, topLevel: false });
+      results.template = "";
+      results.exprs.push(
+        t__namespace.callExpression(t__namespace.identifier("_$createComponent"), [
+          t__namespace.identifier("_$NoHydration"),
+          t__namespace.objectExpression([
+            t__namespace.objectMethod(
+              "get",
+              t__namespace.identifier("children"),
+              [],
+              t__namespace.blockStatement([t__namespace.returnStatement(createTemplate$1(path, child))])
+            )
+          ])
+        ])
+      );
+      return results;
+    }
     results.template.push("");
     results.templateValues.push(
       t__namespace.callExpression(registerImportMethod(path, "ssrHydrationKey"), [])
@@ -2039,12 +2141,20 @@ 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, "setHydratable");
+      registerImportMethod(path, "NoHydration");
+      registerImportMethod(path, "createComponent");
       results.template.push("");
       results.templateValues.push(
-        t__namespace.callExpression(t__namespace.identifier("_$setHydratable"), [
-          t__namespace.arrowFunctionExpression([], createTemplate$1(path, child)),
-          t__namespace.booleanLiteral(false)
+        t__namespace.callExpression(t__namespace.identifier("_$createComponent"), [
+          t__namespace.identifier("_$NoHydration"),
+          t__namespace.objectExpression([
+            t__namespace.objectMethod(
+              "get",
+              t__namespace.identifier("children"),
+              [],
+              t__namespace.blockStatement([t__namespace.returnStatement(createTemplate$1(path, child))])
+            )
+          ])
         ])
       );
       return;
@@ -2086,6 +2196,7 @@ function createElement(path, { topLevel, hydratable }) {
       } else {
         const child = transformNode(path);
         if (markers && child.exprs.length) memo.push(t__namespace.stringLiteral("<!--#-->"));
+        if (child.exprs.length && !child.spreadElement) child.exprs[0] = escapeExpression(path, child.exprs[0]);
         memo.push(getCreateTemplate(config, path, child)(path, child, true));
         if (markers && child.exprs.length) memo.push(t__namespace.stringLiteral("<!--/-->"));
       }
@@ -2209,7 +2320,11 @@ function transformAttributes(path, results) {
 
   // preprocess spreads
   if (attributes.some(attribute => t__namespace.isJSXSpreadAttribute(attribute.node))) {
-    [attributes, spreadExpr] = processSpreads(path, attributes, { elem, hasChildren });
+    [attributes, spreadExpr] = processSpreads(path, attributes, {
+      elem,
+      hasChildren,
+      wrapConditionals: config.wrapConditionals
+    });
     path.get("openingElement").set(
       "attributes",
       attributes.map(a => a.node)
@@ -2439,12 +2554,11 @@ function nextChild(children, index) {
   return children[index + 1] && (children[index + 1].id || nextChild(children, index + 1));
 }
 
-function processSpreads(path, attributes, { elem, hasChildren }) {
+function processSpreads(path, attributes, { elem, hasChildren, wrapConditionals }) {
   // 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 => {
@@ -2457,12 +2571,7 @@ function processSpreads(path, attributes, { elem, hasChildren }) {
     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;
+        spreadArgs.push(t__namespace.objectExpression(runningObject));
         runningObject = [];
       }
       spreadArgs.push(
@@ -2484,24 +2593,37 @@ function processSpreads(path, attributes, { elem, hasChildren }) {
       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("")
-        )
-      );
+      const dynamic =
+        isContainer && isDynamic(attribute.get("value").get("expression"), { checkMember: true });
+      if (dynamic) {
+        const id = convertJSXIdentifier(node.name);
+        let expr =
+          wrapConditionals &&
+          (t__namespace.isLogicalExpression(node.value.expression) || t__namespace.isConditionalExpression(node.value.expression))
+            ? transformCondition(attribute.get("value").get("expression"), true)
+            : t__namespace.arrowFunctionExpression([], node.value.expression);
+        runningObject.push(
+          t__namespace.objectMethod(
+            "get",
+            id,
+            [],
+            t__namespace.blockStatement([t__namespace.returnStatement(expr.body)]),
+            !t__namespace.isValidIdentifier(key)
+          )
+        );
+      } else {
+        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)
-    );
+    spreadArgs.push(t__namespace.objectExpression(runningObject));
   }
 
   const props =
@@ -2627,25 +2749,6 @@ function convertComponentIdentifier(node) {
   return node;
 }
 
-function convertJSXIdentifier(node) {
-  if (t__namespace.isJSXIdentifier(node)) {
-    if (t__namespace.isValidIdentifier(node.name)) {
-      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),
@@ -2766,7 +2869,7 @@ function transformComponent(path) {
               config.generate !== "ssr" &&
               (t__namespace.isLogicalExpression(value.expression) ||
                 t__namespace.isConditionalExpression(value.expression))
-                ? transformCondition(attribute.get("value").get("expression"), true)
+                ? transformCondition$1(attribute.get("value").get("expression"), true)
                 : t__namespace.arrowFunctionExpression([], value.expression);
             runningObject.push(
               t__namespace.objectMethod(
@@ -2967,7 +3070,7 @@ function transformNode(path, info = {}) {
       config.wrapConditionals &&
       config.generate !== "ssr" &&
       (t__namespace.isLogicalExpression(node.expression) || t__namespace.isConditionalExpression(node.expression))
-        ? transformCondition(path.get("expression"), info.componentChild)
+        ? transformCondition$1(path.get("expression"), info.componentChild)
         : !info.componentChild &&
           (config.generate !== "ssr" || info.fragmentChild) &&
           t__namespace.isCallExpression(node.expression) &&

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