babel-plugin-jsx-dom-expressions 0.33.7 → 0.33.11

package/index.js

@@ -55,11 +55,11 @@ const booleans = [
   "selected"
 ];
 
-const BooleanAttributes = new Set(booleans);
+const BooleanAttributes = /*#__PURE__*/ new Set(booleans);
 
-const Properties = 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 = new Set(["innerHTML", "textContent", "innerText", "children"]);
+const ChildProperties = /*#__PURE__*/ new Set(["innerHTML", "textContent", "innerText", "children"]);
 
 // React Compat
 const Aliases = {
@@ -77,7 +77,7 @@ const PropAliases = {
 };
 
 // list of Element events that will be delegated
-const DelegatedEvents = new Set([
+const DelegatedEvents = /*#__PURE__*/ new Set([
   "beforeinput",
   "click",
   "dblclick",
@@ -102,7 +102,7 @@ const DelegatedEvents = new Set([
   "touchstart"
 ]);
 
-const SVGElements = new Set([
+const SVGElements = /*#__PURE__*/ new Set([
   // "a",
   "altGlyph",
   "altGlyphDef",
@@ -592,26 +592,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 +637,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 +805,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 +911,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 +988,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,11 +1029,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.callExpression(
+                    registerImportMethod(
+                      path,
+                      "addEventListener",
+                      getRendererConfig(path, "dom").moduleName
+                    ),
+                    [elem, t__namespace.stringLiteral(ev), handler]
+                  )
                 )
               );
             }
@@ -1053,6 +1048,23 @@ function transformAttributes$2(path, results) {
           })
         ) {
           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(" ");
@@ -1099,19 +1111,18 @@ function transformChildren$2(path, results, config) {
     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;
+      .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 (child.text && i && memo[i - 1].text) {
-          memo[i - 1].template += child.template;
-        } else memo.push(child);
+        if (transformed.text && i && memo[i - 1].text) {
+          memo[i - 1].template += transformed.template;
+        } else memo.push(transformed);
         return memo;
       }, []);
 
@@ -1149,6 +1160,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 +1203,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;
@@ -1718,6 +1725,7 @@ function transformAttributes$1(path, results) {
       }
       i && attributes.splice(attributes.indexOf(classAttributes[i]), 1);
     }
+    first.name = t__namespace.JSXIdentifier("class");
     first.value = t__namespace.JSXExpressionContainer(t__namespace.TemplateLiteral(quasis, values));
   }
   if (styleAttributes.length) transformToObject("style", attributes, styleAttributes);

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.7",
+  "version": "0.33.11",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -23,5 +23,5 @@
     "@babel/types": "^7.16.0",
     "html-entities": "2.3.2"
   },
-  "gitHead": "adea58b5d73a28af4f95afcb4d05f2418433e696"
+  "gitHead": "c7153ffa28924ecdf687501f5edb18712c8f64c1"
 }