babel-plugin-jsx-dom-expressions 0.36.4 → 0.36.6

package/index.js

@@ -600,15 +600,70 @@ function canNativeSpread(key, { checkNameSpaces } = {}) {
   return true;
 }
 
-const alwaysClose = ["a", "table", "button", "textarea", "select", "b", "strong", "small", "i", "em"];
+const InlineElements = [
+  "a",
+  "abbr",
+  "acronym",
+  "b",
+  "bdi",
+  "bdo",
+  "big",
+  "br",
+  "button",
+  "canvas",
+  "cite",
+  "code",
+  "data",
+  "datalist",
+  "del",
+  "dfn",
+  "em",
+  "embed",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "map",
+  "mark",
+  "meter",
+  "noscript",
+  "object",
+  "output",
+  "picture",
+  "progress",
+  "q",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "select",
+  "slot",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "svg",
+  "template",
+  "textarea",
+  "time",
+  "u",
+  "tt",
+  "var",
+  "video"
+];
 
 const BlockElements = [
   "address",
   "article",
   "aside",
   "blockquote",
-  "canvas",
   "dd",
+  "details",
+  "dialog",
   "div",
   "dl",
   "dt",
@@ -628,17 +683,36 @@ const BlockElements = [
   "hr",
   "li",
   "main",
+  "menu",
   "nav",
-  "noscript",
   "ol",
-  "output",
   "p",
   "pre",
   "section",
   "table",
-  "tfoot",
   "ul",
-  "video"
+];
+
+const alwaysClose = [
+  "title",
+  "style",
+  "a",
+  "strong",
+  "small",
+  "b",
+  "u",
+  "i",
+  "em",
+  "s",
+  "code",
+  "object",
+  "table",
+  "button",
+  "textarea",
+  "select",
+  "iframe",
+  "script",
+  "template"
 ];
 
 function transformElement$3(path, info) {
@@ -687,12 +761,12 @@ function transformElement$3(path, info) {
   }
   results.template += ">";
   if (!voidTag) {
-    // always close tags can still be skipped if they have no parents and are the last element
-    const toBeClosed = !info.lastElement || (info.toBeClosed && info.toBeClosed.includes(tagName));
+    // always close tags can still be skipped if they have no closing parents and are the last element
+    const toBeClosed = !info.lastElement || (info.toBeClosed && info.toBeClosed.has(tagName));
     if (toBeClosed) {
-      results.toBeClosed = info.toBeClosed || [...alwaysClose];
-      results.toBeClosed.push(tagName);
-      if (tagName === "a") results.toBeClosed.push(...BlockElements);
+      results.toBeClosed = new Set(info.toBeClosed || alwaysClose);
+      results.toBeClosed.add(tagName);
+      if (InlineElements.includes(tagName)) results.toBeClosed.add(...BlockElements);
     }
     transformChildren$2(path, results, config);
     if (toBeClosed) results.template += `</${tagName}>`;
@@ -718,13 +792,42 @@ function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE, tagN
     namespace = parts[0];
   }
 
+  // TODO: consider moving to a helper
   if (namespace === "style") {
-    return t__namespace.callExpression(
-      t__namespace.memberExpression(
-        t__namespace.memberExpression(elem, t__namespace.identifier("style")),
-        t__namespace.identifier("setProperty")
+    if (t__namespace.isStringLiteral(value)) {
+      return t__namespace.callExpression(
+        t__namespace.memberExpression(
+          t__namespace.memberExpression(elem, t__namespace.identifier("style")),
+          t__namespace.identifier("setProperty")
+        ),
+        [t__namespace.stringLiteral(name), value]
+      );
+    }
+    if (t__namespace.isNullLiteral(value) || t__namespace.isIdentifier(value, { name: "undefined" })) {
+      return t__namespace.callExpression(
+        t__namespace.memberExpression(
+          t__namespace.memberExpression(elem, t__namespace.identifier("style")),
+          t__namespace.identifier("removeProperty")
+        ),
+        [t__namespace.stringLiteral(name)]
+      );
+    }
+    return t__namespace.conditionalExpression(
+      t__namespace.binaryExpression("!=", value, t__namespace.nullLiteral()),
+      t__namespace.callExpression(
+        t__namespace.memberExpression(
+          t__namespace.memberExpression(elem, t__namespace.identifier("style")),
+          t__namespace.identifier("setProperty")
+        ),
+        [t__namespace.stringLiteral(name), prevId ? prevId : value]
       ),
-      [t__namespace.stringLiteral(name), value]
+      t__namespace.callExpression(
+        t__namespace.memberExpression(
+          t__namespace.memberExpression(elem, t__namespace.identifier("style")),
+          t__namespace.identifier("removeProperty")
+        ),
+        [t__namespace.stringLiteral(name)]
+      )
     );
   }
 
@@ -1283,10 +1386,16 @@ function transformAttributes$2(path, results) {
 }
 
 function findLastElement(children, hydratable) {
-  let lastElement = -1, tagName;
+  let lastElement = -1,
+    tagName;
   for (let i = children.length - 1; i >= 0; i--) {
     const node = children[i].node;
-    if (hydratable || t__namespace.isJSXText(node) || getStaticExpression(children[i]) || (t__namespace.isJSXElement(node) && (tagName = getTagName(node)) && !isComponent(tagName))) {
+    if (
+      hydratable ||
+      t__namespace.isJSXText(node) ||
+      getStaticExpression(children[i]) ||
+      (t__namespace.isJSXElement(node) && (tagName = getTagName(node)) && !isComponent(tagName))
+    ) {
       lastElement = i;
       break;
     }
@@ -1761,6 +1870,7 @@ function wrapDynamics$1(path, dynamics) {
         )
       );
     } else {
+      const prev = key.startsWith("style:") ? identifier : undefined;
       statements.push(
         t__namespace.expressionStatement(
           t__namespace.logicalExpression(
@@ -1771,7 +1881,7 @@ function wrapDynamics$1(path, dynamics) {
               elem,
               key,
               t__namespace.assignmentExpression("=", t__namespace.memberExpression(prevId, identifier), identifier),
-              { isSVG, isCE, tagName, dynamic: true }
+              { isSVG, isCE, tagName, dynamic: true, prevId: prev }
             )
           )
         )

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.36.4",
+  "version": "0.36.6",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -31,5 +31,5 @@
   "devDependencies": {
     "@babel/core": "^7.20.12"
   },
-  "gitHead": "44549c307893921bbcb393f9edb24363421f536c"
+  "gitHead": "35c4a68d712cb008adf5e37bc0fd79d7e941491b"
 }