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

package/index.js

@@ -328,6 +328,7 @@ function getStaticExpression(path) {
     t__namespace.isJSXExpressionContainer(node) &&
     t__namespace.isJSXElement(path.parent) &&
     !isComponent(getTagName(path.parent)) &&
+    !t__namespace.isSequenceExpression(node.expression) &&
     (value = path.get("expression").evaluate().value) !== undefined &&
     ((type = typeof value) === "string" || type === "number") &&
     value
@@ -525,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: [],
@@ -532,6 +534,7 @@ function transformElement$3(path, info) {
       dynamics: [],
       postExprs: [],
       isSVG: wrapSVG,
+      hasCustomElement: isCustomElement,
       tagName,
       renderer: "dom"
     };
@@ -539,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 += ">";
@@ -593,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") {
@@ -1147,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++;
@@ -1375,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)
           ])
@@ -1395,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(
@@ -1416,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);
@@ -1556,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])) {
@@ -1564,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) {
@@ -1753,23 +1774,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") {
@@ -1828,13 +1841,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.16",
+  "version": "0.33.7",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -23,5 +23,5 @@
     "@babel/types": "^7.16.0",
     "html-entities": "2.3.2"
   },
-  "gitHead": "e8f40d02a9e46bf37be05662a7bcb19bd42126b1"
+  "gitHead": "adea58b5d73a28af4f95afcb4d05f2418433e696"
 }