babel-plugin-jsx-dom-expressions 0.34.0-beta.1 → 0.34.1

package/index.js

@@ -548,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);
@@ -891,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$");
@@ -914,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]
+                  )
                 )
               )
             );
@@ -924,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") {
@@ -1554,12 +1570,12 @@ function appendToTemplate(template, value) {
 }
 
 function transformElement$2(path, info) {
+  const config = getConfig(path);
   // contains spread attributes
   if (path.node.openingElement.attributes.some(a => t__namespace.isJSXSpreadAttribute(a)))
-    return createElement(path, info);
+    return createElement(path, { ...info, ...config });
 
   const tagName = getTagName(path.node),
-    config = getConfig(path),
     voidTag = VoidElements.indexOf(tagName) > -1,
     results = {
       template: [`<${tagName}`],
@@ -1910,6 +1926,8 @@ function transformClasslistObject(path, expr, values, quasis) {
 function transformChildren$1(path, results, { hydratable }) {
   const doNotEscape = path.doNotEscape;
   const filteredChildren = filterChildren(path.get("children"));
+  const multi = checkLength(filteredChildren),
+    markers = hydratable && multi;
   filteredChildren.forEach(node => {
     if (t__namespace.isJSXElement(node.node) && getTagName(node.node) === "head") {
       const child = transformNode(node, { doNotEscape, hydratable: false });
@@ -1934,9 +1952,6 @@ function transformChildren$1(path, results, { hydratable }) {
     appendToTemplate(results.template, child.template);
     results.templateValues.push.apply(results.templateValues, child.templateValues || []);
     if (child.exprs.length) {
-      const multi = checkLength(filteredChildren),
-        markers = hydratable && multi;
-
       if (!doNotEscape) child.exprs[0] = escapeExpression(path, child.exprs[0]);
 
       // boxed by textNodes
@@ -1953,19 +1968,24 @@ function transformChildren$1(path, results, { hydratable }) {
   });
 }
 
-function createElement(path, { topLevel }) {
+function createElement(path, { topLevel, hydratable }) {
   const tagName = getTagName(path.node),
     config = getConfig(path),
     attributes = normalizeAttributes(path);
 
   const filteredChildren = filterChildren(path.get("children")),
+    multi = checkLength(filteredChildren),
+    markers = hydratable && multi,
     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);
+        if (markers && child.exprs.length) memo.push(t__namespace.stringLiteral("<!--#-->"));
+        if (hydratable && child.exprs.length) child.exprs[0] = t__namespace.arrowFunctionExpression([], child.exprs[0]);
         memo.push(getCreateTemplate(config, path, child)(path, child, true));
+        if (markers && child.exprs.length) memo.push(t__namespace.stringLiteral("<!--/-->"));
       }
       return memo;
     }, []);
@@ -2139,14 +2159,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$");
@@ -2162,7 +2198,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]
+                  )
                 )
               )
             );
@@ -2172,15 +2215,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.34.0-beta.1",
+  "version": "0.34.1",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -27,5 +27,5 @@
   "peerDependencies": {
     "@babel/core": "^7.0.0"
   },
-  "gitHead": "c4c12e0791634ce5ca7131a12ac3888406f411b1"
+  "gitHead": "5e49406921a4fde147b9b64edbfa8fc8c096fbda"
 }