babel-plugin-jsx-dom-expressions 0.33.0 → 0.33.10

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",
@@ -526,6 +526,7 @@ function transformElement$3(path, info) {
     config = getConfig(path),
     wrapSVG = info.topLevel && tagName != "svg" && SVGElements.has(tagName),
     voidTag = VoidElements.indexOf(tagName) > -1,
+    isCustomElement = tagName.indexOf("-") > -1,
     results = {
       template: `<${tagName}`,
       decl: [],
@@ -533,6 +534,7 @@ function transformElement$3(path, info) {
       dynamics: [],
       postExprs: [],
       isSVG: wrapSVG,
+      hasCustomElement: isCustomElement,
       tagName,
       renderer: "dom"
     };
@@ -540,7 +542,7 @@ function transformElement$3(path, info) {
   if (wrapSVG) results.template = "<svg>" + results.template;
   if (!info.skipId) results.id = path.scope.generateUidIdentifier("el$");
   transformAttributes$2(path, results);
-  if (config.contextToCustomElements && (tagName === "slot" || tagName.indexOf("-") > -1)) {
+  if (config.contextToCustomElements && (tagName === "slot" || isCustomElement)) {
     contextToCustomElement(path, results);
   }
   results.template += ">";
@@ -590,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") {
@@ -633,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]
+    );
   }
 }
 
@@ -808,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
@@ -915,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, [
@@ -992,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)]
+                  )
                 )
               );
             }
@@ -1035,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]
+                  )
                 )
               );
             }
@@ -1051,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(" ");
@@ -1147,7 +1161,9 @@ 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;
       nextPlaceholder = null;
       i++;
@@ -1188,12 +1204,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;
@@ -1376,6 +1387,10 @@ function registerTemplate(path, results) {
             registerImportMethod(path, "getNextElement", getRendererConfig(path, "dom").moduleName),
             templateId ? [templateId] : []
           )
+        : results.hasCustomElement
+        ? t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier("document"), t__namespace.identifier("importNode")), [
+            templateId, t__namespace.booleanLiteral(true)
+          ])
         : t__namespace.callExpression(t__namespace.memberExpression(templateId, t__namespace.identifier("cloneNode")), [
             t__namespace.booleanLiteral(true)
           ])
@@ -1396,7 +1411,9 @@ function wrapDynamics$1(path, dynamics) {
       dynamics[0].key === "classList" || dynamics[0].key === "style"
         ? t__namespace.identifier("_$p")
         : undefined;
-
+    if (dynamics[0].key.startsWith("class:") && !t__namespace.isBooleanLiteral(dynamics[0].value) && !t__namespace.isUnaryExpression(dynamics[0].value)) {
+      dynamics[0].value = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", dynamics[0].value));
+    }
     return t__namespace.expressionStatement(
       t__namespace.callExpression(effectWrapperId, [
         t__namespace.arrowFunctionExpression(
@@ -1417,7 +1434,9 @@ function wrapDynamics$1(path, dynamics) {
     prevId = t__namespace.identifier("_p$");
   dynamics.forEach(({ elem, key, value, isSVG, isCE }) => {
     const identifier = path.scope.generateUidIdentifier("v$");
-    identifiers.push(identifier);
+    if (key.startsWith("class:") && !t__namespace.isBooleanLiteral(value) && !t__namespace.isUnaryExpression(value)) {
+      value = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", value));
+    }    identifiers.push(identifier);
     decls.push(t__namespace.variableDeclarator(identifier, value));
     if (key === "classList" || key === "style") {
       const prev = t__namespace.memberExpression(prevId, identifier);
@@ -1707,6 +1726,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.0",
+  "version": "0.33.10",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -23,5 +23,5 @@
     "@babel/types": "^7.16.0",
     "html-entities": "2.3.2"
   },
-  "gitHead": "1f388eacd1601e06e84689837a5363f13ae5ffe7"
+  "gitHead": "56d368d4a63606844811008c5a2e3b1d2dc0a4de"
 }