babel-plugin-jsx-dom-expressions 0.33.8 → 0.33.12

package/index.js

@@ -311,6 +311,9 @@ function isDynamic(path, { checkMember, checkTags, checkCallExpressions = true,
     OptionalMemberExpression(p) {
       checkMember && (dynamic = true) && p.stop();
     },
+    SpreadElement(p) {
+      checkMember && (dynamic = true) && p.stop();
+    },
     JSXElement(p) {
       checkTags ? (dynamic = true) && p.stop() : p.skip();
     },
@@ -592,26 +595,28 @@ function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
   }
 
   if (name === "style") {
-    return t__namespace.callExpression(registerImportMethod(path, "style", getRendererConfig(path, "dom").moduleName), prevId ? [elem, value, prevId] : [elem, value]);
+    return t__namespace.callExpression(
+      registerImportMethod(path, "style", getRendererConfig(path, "dom").moduleName),
+      prevId ? [elem, value, prevId] : [elem, value]
+    );
   }
 
   if (!isSVG && name === "class") {
-    return t__namespace.callExpression(registerImportMethod(path, "className", getRendererConfig(path, "dom").moduleName), [elem, value]);
+    return t__namespace.callExpression(
+      registerImportMethod(path, "className", getRendererConfig(path, "dom").moduleName),
+      [elem, value]
+    );
   }
 
   if (name === "classList") {
-    return t__namespace.callExpression(registerImportMethod(
-      path,
-      "classList",
-      getRendererConfig(path, "dom").moduleName
-    ), prevId ? [elem, value, prevId] : [elem, value]);
+    return t__namespace.callExpression(
+      registerImportMethod(path, "classList", getRendererConfig(path, "dom").moduleName),
+      prevId ? [elem, value, prevId] : [elem, value]
+    );
   }
 
   if (config.hydratable && name === "innerHTML") {
-    return t__namespace.callExpression(
-      registerImportMethod(path, "innerHTML"),
-      [elem, value]
-    );
+    return t__namespace.callExpression(registerImportMethod(path, "innerHTML"), [elem, value]);
   }
 
   if (dynamic && name === "textContent") {
@@ -635,22 +640,15 @@ function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
   !isSVG && (name = name.toLowerCase());
   const ns = isNameSpaced && SVGNamespace[name.split(":")[0]];
   if (ns) {
-    return t__namespace.callExpression(registerImportMethod(
-      path,
-      "setAttributeNS",
-      getRendererConfig(path, "dom").moduleName
-    ), [
-      elem,
-      t__namespace.stringLiteral(ns),
-      t__namespace.stringLiteral(name),
-      value
-    ]);
+    return t__namespace.callExpression(
+      registerImportMethod(path, "setAttributeNS", getRendererConfig(path, "dom").moduleName),
+      [elem, t__namespace.stringLiteral(ns), t__namespace.stringLiteral(name), value]
+    );
   } else {
-    return t__namespace.callExpression(registerImportMethod(
-      path,
-      "setAttribute",
-      getRendererConfig(path, "dom").moduleName
-    ), [elem, t__namespace.stringLiteral(name), value]);
+    return t__namespace.callExpression(
+      registerImportMethod(path, "setAttribute", getRendererConfig(path, "dom").moduleName),
+      [elem, t__namespace.stringLiteral(name), value]
+    );
   }
 }
 
@@ -810,22 +808,21 @@ function transformAttributes$2(path, results) {
       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)
-            ])
+            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
@@ -917,7 +914,7 @@ function transformAttributes$2(path, results) {
           }
         } else if (key.startsWith("use:")) {
           // Some trick to treat JSXIdentifier as Identifier
-          node.name.name.type = 'Identifier';
+          node.name.name.type = "Identifier";
           results.exprs.unshift(
             t__namespace.expressionStatement(
               t__namespace.callExpression(node.name.name, [
@@ -994,16 +991,14 @@ function transformAttributes$2(path, results) {
             } else {
               results.exprs.unshift(
                 t__namespace.expressionStatement(
-                  t__namespace.callExpression(registerImportMethod(
-                    path,
-                    "addEventListener",
-                    getRendererConfig(path, "dom").moduleName
-                  ), [
-                    elem,
-                    t__namespace.stringLiteral(ev),
-                    handler,
-                    t__namespace.booleanLiteral(true)
-                  ])
+                  t__namespace.callExpression(
+                    registerImportMethod(
+                      path,
+                      "addEventListener",
+                      getRendererConfig(path, "dom").moduleName
+                    ),
+                    [elem, t__namespace.stringLiteral(ev), handler, t__namespace.booleanLiteral(true)]
+                  )
                 )
               );
             }
@@ -1037,22 +1032,44 @@ function transformAttributes$2(path, results) {
             } else {
               results.exprs.unshift(
                 t__namespace.expressionStatement(
-                  t__namespace.callExpression(registerImportMethod(
-                    path,
-                    "addEventListener",
-                    getRendererConfig(path, "dom").moduleName
-                  ), [elem, t__namespace.stringLiteral(ev), handler])
+                  t__namespace.callExpression(
+                    registerImportMethod(
+                      path,
+                      "addEventListener",
+                      getRendererConfig(path, "dom").moduleName
+                    ),
+                    [elem, t__namespace.stringLiteral(ev), handler]
+                  )
                 )
               );
             }
           }
         } else if (
           config.effectWrapper &&
-          isDynamic(attribute.get("value").get("expression"), {
+          (isDynamic(attribute.get("value").get("expression"), {
             checkMember: true
-          })
+          }) ||
+            ((key === "classList" || key === "style") &&
+              !attribute.get("value").get("expression").evaluate().confident))
         ) {
           let nextElem = elem;
+          if (key === "value" || key === "checked") {
+            const effectWrapperId = registerImportMethod(path, config.effectWrapper);
+            results.postExprs.push(
+              t__namespace.expressionStatement(
+                t__namespace.callExpression(effectWrapperId, [
+                  t__namespace.arrowFunctionExpression(
+                    [],
+                    setAttr$2(path, elem, key, value.expression, {
+                      isSVG,
+                      isCE
+                    })
+                  )
+                ])
+              )
+            );
+            return;
+          }
           if (key === "textContent") {
             nextElem = attribute.scope.generateUidIdentifier("el$");
             children = t__namespace.JSXText(" ");
@@ -1081,7 +1098,7 @@ function transformAttributes$2(path, results) {
         } else {
           !isSVG && (key = key.toLowerCase());
           results.template += ` ${key}`;
-          results.template += value ? `="${escapeBackticks(value.value)}"` : "";
+          results.template += value ? `="${escapeBackticks(escapeHTML(value.value, true))}"` : "";
         }
       }
     });
@@ -1098,22 +1115,22 @@ function transformChildren$2(path, results, config) {
     nextPlaceholder,
     i = 0;
   const filteredChildren = filterChildren(path.get("children")),
-    childNodes = filteredChildren
-      .map(
-        (child, index) =>
-          transformNode(child, {
-            skipId: !results.id || !detectExpressions(filteredChildren, index, config)
-          })
-        // combine adjacent textNodes
-      )
-      .reduce((memo, child) => {
-        if (!child) return memo;
-        const i = memo.length;
-        if (child.text && i && memo[i - 1].text) {
-          memo[i - 1].template += child.template;
-        } else memo.push(child);
-        return memo;
-      }, []);
+    childNodes = filteredChildren.reduce((memo, child, index) => {
+      if (child.isJSXFragment()) {
+        throw new Error(
+          `Fragments can only be used top level in JSX. Not used under a <${tagName}>.`
+        );
+      }
+      const transformed = transformNode(child, {
+        skipId: !results.id || !detectExpressions(filteredChildren, index, config)
+      });
+      if (!transformed) return memo;
+      const i = memo.length;
+      if (transformed.text && i && memo[i - 1].text) {
+        memo[i - 1].template += transformed.template;
+      } else memo.push(transformed);
+      return memo;
+    }, []);
 
   childNodes.forEach((child, index) => {
     if (!child) return;
@@ -1149,6 +1166,7 @@ function transformChildren$2(path, results, config) {
       results.decl.push(...child.decl);
       results.exprs.push(...child.exprs);
       results.dynamics.push(...child.dynamics);
+      results.postExprs.push(...child.postExprs);
       results.hasHydratableEvent = results.hasHydratableEvent || child.hasHydratableEvent;
       results.hasCustomElement = results.hasCustomElement || child.hasCustomElement;
       tempPath = child.id.name;
@@ -1191,12 +1209,7 @@ function transformChildren$2(path, results, config) {
         );
       } else {
         results.exprs.push(
-          t__namespace.expressionStatement(
-            t__namespace.callExpression(
-              insert,
-              [results.id, child.exprs[0]]
-            )
-          )
+          t__namespace.expressionStatement(t__namespace.callExpression(insert, [results.id, child.exprs[0]]))
         );
       }
     } else nextPlaceholder = null;

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.8",
+  "version": "0.33.12",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -23,5 +23,8 @@
     "@babel/types": "^7.16.0",
     "html-entities": "2.3.2"
   },
-  "gitHead": "22e8d3ae8c8eb50596fce778c5b9116880cc55c2"
+  "peerDependencies": {
+    "@babel/core": "^7.0.0"
+  },
+  "gitHead": "3c593d43147a73ddd52c58ba8c49f4f1e0e7e560"
 }