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

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 += ">";
@@ -594,7 +596,7 @@ function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
   }
 
   if (!isSVG && name === "class") {
-    return t__namespace.assignmentExpression("=", t__namespace.memberExpression(elem, t__namespace.identifier("className")), value);
+    return t__namespace.callExpression(registerImportMethod(path, "className", getRendererConfig(path, "dom").moduleName), [elem, value]);
   }
 
   if (name === "classList") {
@@ -1148,6 +1150,7 @@ function transformChildren$2(path, results, config) {
       results.exprs.push(...child.exprs);
       results.dynamics.push(...child.dynamics);
       results.hasHydratableEvent = results.hasHydratableEvent || child.hasHydratableEvent;
+      results.hasCustomElement = results.hasCustomElement || child.hasCustomElement;
       tempPath = child.id.name;
       nextPlaceholder = null;
       i++;
@@ -1376,6 +1379,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 +1403,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 +1426,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);
@@ -1557,7 +1568,7 @@ function toAttribute(key, isSVG) {
   return key;
 }
 
-function setAttr$1(results, name, value, isSVG) {
+function setAttr$1(attribute, results, name, value, isSVG) {
   // strip out namespaces for now, everything at this point is an attribute
   let parts;
   if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
@@ -1565,9 +1576,18 @@ function setAttr$1(results, name, value, isSVG) {
   }
 
   name = toAttribute(name, isSVG);
-  appendToTemplate(results.template, ` ${name}="`);
-  results.template.push(`"`);
-  results.templateValues.push(value);
+  const attr = t__namespace.callExpression(registerImportMethod(attribute, "ssrAttribute"), [
+    t__namespace.stringLiteral(name),
+    value,
+    t__namespace.booleanLiteral(false)
+  ]);
+  if (results.template[results.template.length - 1].length) {
+    results.template.push("");
+    results.templateValues.push(attr);
+  } else {
+    const last = results.templateValues.length - 1;
+    results.templateValues[last] = t__namespace.binaryExpression("+", results.templateValues[last], attr);
+  }
 }
 
 function escapeExpression(path, expression, attr) {
@@ -1698,6 +1718,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);
@@ -1754,23 +1775,15 @@ function transformAttributes$1(path, results) {
         children = value;
         if (key === "innerHTML") path.doNotEscape = true;
       } else {
-        let dynamic = false,
-          doEscape = true;
-        if (
-          isDynamic(attribute.get("value").get("expression"), {
-            checkMember: true,
-            native: true
-          })
-        )
-          dynamic = true;
-
+        let doEscape = true;
         if (BooleanAttributes.has(key)) {
           results.template.push("");
-          const fn = t__namespace.callExpression(registerImportMethod(attribute, "ssrBoolean"), [
+          const fn = t__namespace.callExpression(registerImportMethod(attribute, "ssrAttribute"), [
             t__namespace.stringLiteral(key),
-            value.expression
+            value.expression,
+            t__namespace.booleanLiteral(true)
           ]);
-          results.templateValues.push(dynamic ? t__namespace.arrowFunctionExpression([], fn) : fn);
+          results.templateValues.push(fn);
           return;
         }
         if (key === "style") {
@@ -1829,13 +1842,15 @@ function transformAttributes$1(path, results) {
           key = "class";
           doEscape = false;
         }
-        if (dynamic)
-          value.expression = t__namespace.arrowFunctionExpression(
-            [],
-            doEscape ? escapeExpression(path, value.expression, true) : value.expression
-          );
-        else if (doEscape) value.expression = escapeExpression(path, value.expression, true);
-        setAttr$1(results, key, value.expression, isSVG);
+        if (doEscape)
+          value.expression = escapeExpression(path, value.expression, true);
+
+        if (!doEscape || t__namespace.isLiteral(value.expression) || t__namespace.isBinaryExpression(value.expression)) {
+          key = toAttribute(key, isSVG);
+          appendToTemplate(results.template, ` ${key}="`);
+          results.template.push(`"`);
+          results.templateValues.push(value.expression);
+        } else setAttr$1(attribute, results, key, value.expression, isSVG);
       }
     } else {
       if (key === "$ServerOnly") 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.32.17",
+  "version": "0.33.8",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -23,5 +23,5 @@
     "@babel/types": "^7.16.0",
     "html-entities": "2.3.2"
   },
-  "gitHead": "44833242fc589628431ee04aa8d319f424ba4845"
+  "gitHead": "22e8d3ae8c8eb50596fce778c5b9116880cc55c2"
 }