babel-plugin-jsx-dom-expressions 0.35.0-beta.1 → 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([
@@ -585,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);
@@ -1197,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") {
@@ -1408,7 +1458,8 @@ function processSpreads$1(path, attributes, { elem, isSVG, hasChildren, wrapCond
         const id = convertJSXIdentifier(node.name);
         let expr =
           wrapConditionals &&
-          (t__namespace.isLogicalExpression(node.value.expression) || t__namespace.isConditionalExpression(node.value.expression))
+          (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(
@@ -1724,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"), [])
@@ -2070,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;

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