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

package/index.js

@@ -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 += ">";
@@ -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);

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