babel-plugin-jsx-dom-expressions 0.37.9 → 0.37.13

package/index.js

@@ -531,7 +531,7 @@ function transformCondition(path, inline, deep) {
   }
   if (dTest && !inline) {
     const statements = [
-      t__namespace.variableDeclaration("const", [
+      t__namespace.variableDeclaration("var", [
         t__namespace.variableDeclarator(
           id,
           config.memoWrapper
@@ -630,6 +630,22 @@ function canNativeSpread(key, { checkNameSpaces } = {}) {
   return true;
 }
 
+const chars = "etaoinshrdlucwmfygpbTAOISWCBvkxjqzPHFMDRELNGUKVYJQZX_$";
+const base = chars.length;
+
+function getNumberedId(num) {
+  let out = "";
+
+  do {
+    const digit = num % base;
+
+    num = Math.floor(num / base);
+    out = chars[digit] + out;
+  } while (num !== 0);
+
+  return out;
+}
+
 const InlineElements = [
   "a",
   "abbr",
@@ -761,7 +777,8 @@ function transformElement$3(path, info) {
       isSVG: wrapSVG,
       hasCustomElement: isCustomElement,
       tagName,
-      renderer: "dom"
+      renderer: "dom",
+      skipTemplate: false
     };
   if (config.hydratable && (tagName === "html" || tagName === "head" || tagName === "body")) {
     results.skipTemplate = true;
@@ -1002,12 +1019,12 @@ function transformAttributes$2(path, results) {
           .node.attributes.splice(
             styleAttribute.key + ++i,
             0,
-            t__namespace.JSXAttribute(
-              t__namespace.JSXNamespacedName(
-                t__namespace.JSXIdentifier("style"),
-                t__namespace.JSXIdentifier(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)
+            t__namespace.jsxAttribute(
+              t__namespace.jsxNamespacedName(
+                t__namespace.jsxIdentifier("style"),
+                t__namespace.jsxIdentifier(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)
               ),
-              t__namespace.JSXExpressionContainer(p.value)
+              t__namespace.jsxExpressionContainer(p.value)
             )
           );
         styleAttribute.node.value.expression.properties.splice(index - i - 1, 1);
@@ -1046,12 +1063,12 @@ function transformAttributes$2(path, results) {
           .node.attributes.splice(
             classListAttribute.key + ++i,
             0,
-            t__namespace.JSXAttribute(
-              t__namespace.JSXNamespacedName(
-                t__namespace.JSXIdentifier("class"),
-                t__namespace.JSXIdentifier(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)
+            t__namespace.jsxAttribute(
+              t__namespace.jsxNamespacedName(
+                t__namespace.jsxIdentifier("class"),
+                t__namespace.jsxIdentifier(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)
               ),
-              t__namespace.JSXExpressionContainer(p.value)
+              t__namespace.jsxExpressionContainer(p.value)
             )
           );
       } else if (computed) {
@@ -1060,8 +1077,8 @@ function transformAttributes$2(path, results) {
           .node.attributes.splice(
             classListAttribute.key + ++i,
             0,
-            t__namespace.JSXAttribute(
-              t__namespace.JSXIdentifier("class"),
+            t__namespace.jsxAttribute(
+              t__namespace.jsxIdentifier("class"),
               t__namespace.stringLiteral(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)
             )
           );
@@ -1080,24 +1097,24 @@ function transformAttributes$2(path, results) {
   if (classAttributes.length > 1) {
     const first = classAttributes[0].node,
       values = [],
-      quasis = [t__namespace.TemplateElement({ raw: "" })];
+      quasis = [t__namespace.templateElement({ raw: "" })];
     for (let i = 0; i < classAttributes.length; i++) {
       const attr = classAttributes[i].node,
         isLast = i === classAttributes.length - 1;
       if (!t__namespace.isJSXExpressionContainer(attr.value)) {
         const prev = quasis.pop();
         quasis.push(
-          t__namespace.TemplateElement({
+          t__namespace.templateElement({
             raw: (prev ? prev.value.raw : "") + `${attr.value.value}` + (isLast ? "" : " ")
           })
         );
       } else {
         values.push(t__namespace.logicalExpression("||", attr.value.expression, t__namespace.stringLiteral("")));
-        quasis.push(t__namespace.TemplateElement({ raw: isLast ? "" : " " }));
+        quasis.push(t__namespace.templateElement({ raw: isLast ? "" : " " }));
       }
       i && attributes.splice(attributes.indexOf(classAttributes[i]), 1);
     }
-    if (values.length) first.value = t__namespace.JSXExpressionContainer(t__namespace.TemplateLiteral(quasis, values));
+    if (values.length) first.value = t__namespace.jsxExpressionContainer(t__namespace.templateLiteral(quasis, values));
     else first.value = t__namespace.stringLiteral(quasis[0].value.raw);
   }
   path.get("openingElement").set(
@@ -1133,7 +1150,7 @@ function transformAttributes$2(path, results) {
         reservedNameSpace &&
         !t__namespace.isJSXExpressionContainer(value)
       ) {
-        node.value = value = t__namespace.JSXExpressionContainer(value || t__namespace.JSXEmptyExpression());
+        node.value = value = t__namespace.jsxExpressionContainer(value || t__namespace.jsxEmptyExpression());
       }
       if (
         t__namespace.isJSXExpressionContainer(value) &&
@@ -1156,7 +1173,7 @@ function transformAttributes$2(path, results) {
           if (!isFunction && t__namespace.isLVal(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
             results.exprs.unshift(
-              t__namespace.variableDeclaration("const", [
+              t__namespace.variableDeclaration("var", [
                 t__namespace.variableDeclarator(refIdentifier, value.expression)
               ]),
               t__namespace.expressionStatement(
@@ -1186,7 +1203,7 @@ function transformAttributes$2(path, results) {
           } else if (t__namespace.isCallExpression(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
             results.exprs.unshift(
-              t__namespace.variableDeclaration("const", [
+              t__namespace.variableDeclaration("var", [
                 t__namespace.variableDeclarator(refIdentifier, value.expression)
               ]),
               t__namespace.expressionStatement(
@@ -1370,7 +1387,7 @@ function transformAttributes$2(path, results) {
           }
           if (key === "textContent") {
             nextElem = attribute.scope.generateUidIdentifier("el$");
-            children = t__namespace.JSXText(" ");
+            children = t__namespace.jsxText(" ");
             children.extra = { raw: " ", rawValue: " " };
             results.declarations.push(
               t__namespace.variableDeclarator(nextElem, t__namespace.memberExpression(elem, t__namespace.identifier("firstChild")))
@@ -1846,7 +1863,7 @@ function appendTemplates$1(path, templates) {
       )
     );
   });
-  path.node.body.unshift(t__namespace.variableDeclaration("const", declarators));
+  path.node.body.unshift(t__namespace.variableDeclaration("var", declarators));
 }
 
 function registerTemplate(path, results) {
@@ -1882,7 +1899,7 @@ function registerTemplate(path, results) {
     );
   }
   results.declarations.unshift(decl);
-  results.decl = t__namespace.variableDeclaration("const", results.declarations);
+  results.decl = t__namespace.variableDeclaration("var", results.declarations);
 }
 
 function wrapDynamics$1(path, dynamics) {
@@ -1919,50 +1936,65 @@ function wrapDynamics$1(path, dynamics) {
       ])
     );
   }
-  const declarations = [],
-    statements = [],
-    identifiers = [],
-    prevId = t__namespace.identifier("_p$");
-  dynamics.forEach(({ elem, key, value, isSVG, isCE, tagName }) => {
-    const identifier = path.scope.generateUidIdentifier("v$");
-    if (key.startsWith("class:") && !t__namespace.isBooleanLiteral(value) && !t__namespace.isUnaryExpression(value)) {
+
+  const prevId = t__namespace.identifier("_p$");
+
+  /** @type {t.VariableDeclarator[]} */
+  const declarations = [];
+  /** @type {t.ExpressionStatement[]} */
+  const statements = [];
+  /** @type {t.Identifier[]} */
+  const properties = [];
+
+  dynamics.forEach(({ elem, key, value, isSVG, isCE, tagName }, index) => {
+    const varIdent = path.scope.generateUidIdentifier("v$");
+
+    const propIdent = t__namespace.identifier(getNumberedId(index));
+    const propMember = t__namespace.memberExpression(prevId, propIdent);
+
+    if (
+      key.startsWith("class:") &&
+      !t__namespace.isBooleanLiteral(value) &&
+      !t__namespace.isUnaryExpression(value)
+    ) {
       value = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", value));
     }
-    identifiers.push(identifier);
-    declarations.push(t__namespace.variableDeclarator(identifier, value));
+
+    properties.push(propIdent);
+    declarations.push(t__namespace.variableDeclarator(varIdent, value));
+
     if (key === "classList" || key === "style") {
-      const prev = t__namespace.memberExpression(prevId, identifier);
       statements.push(
         t__namespace.expressionStatement(
           t__namespace.assignmentExpression(
             "=",
-            prev,
-            setAttr$2(path, elem, key, identifier, {
+            propMember,
+            setAttr$2(path, elem, key, varIdent, {
               isSVG,
               isCE,
               tagName,
               dynamic: true,
-              prevId: prev
-            })
-          )
-        )
+              prevId: propMember,
+            }),
+          ),
+        ),
       );
     } else {
-      const prev = key.startsWith("style:") ? identifier : undefined;
+      const prev = key.startsWith("style:") ? varIdent : undefined;
       statements.push(
         t__namespace.expressionStatement(
           t__namespace.logicalExpression(
             "&&",
-            t__namespace.binaryExpression("!==", identifier, t__namespace.memberExpression(prevId, identifier)),
+            t__namespace.binaryExpression("!==", varIdent, propMember),
             setAttr$2(
               path,
               elem,
               key,
-              t__namespace.assignmentExpression("=", t__namespace.memberExpression(prevId, identifier), identifier),
-              { isSVG, isCE, tagName, dynamic: true, prevId: prev }
-            )
-          )
-        )
+              t__namespace.assignmentExpression("=", propMember, varIdent),
+              { isSVG, isCE, tagName, dynamic: true, prevId: prev },
+            ),
+          ),
+        ),
       );
     }
   });
@@ -1972,13 +2004,15 @@ function wrapDynamics$1(path, dynamics) {
       t__namespace.arrowFunctionExpression(
         [prevId],
         t__namespace.blockStatement([
-          t__namespace.variableDeclaration("const", declarations),
+          t__namespace.variableDeclaration("var", declarations),
           ...statements,
-          t__namespace.returnStatement(prevId)
-        ])
+          t__namespace.returnStatement(prevId),
+        ]),
       ),
-      t__namespace.objectExpression(identifiers.map(id => t__namespace.objectProperty(id, t__namespace.identifier("undefined"))))
-    ])
+      t__namespace.objectExpression(
+        properties.map((id) => t__namespace.objectProperty(id, t__namespace.identifier("undefined"))),
+      ),
+    ]),
   );
 }
 
@@ -2050,7 +2084,7 @@ function appendTemplates(path, templates) {
   const declarators = templates.map(template => {
     return t__namespace.variableDeclarator(template.id, template.template);
   });
-  path.node.body.unshift(t__namespace.variableDeclaration("const", declarators));
+  path.node.body.unshift(t__namespace.variableDeclaration("var", declarators));
 }
 
 function appendToTemplate(template, value) {
@@ -2261,17 +2295,16 @@ function normalizeAttributes(path) {
   if (classAttributes.length > 1) {
     const first = classAttributes[0].node,
       values = [],
-      quasis = [t__namespace.TemplateElement({ raw: "" })];
+      quasis = [t__namespace.templateElement({ raw: "" })];
     for (let i = 0; i < classAttributes.length; i++) {
       const attr = classAttributes[i].node,
         isLast = i === classAttributes.length - 1;
       if (!t__namespace.isJSXExpressionContainer(attr.value)) {
         const prev = quasis.pop();
         quasis.push(
-          t__namespace.TemplateElement({
+          t__namespace.templateElement({
             raw:
               (prev ? prev.value.raw : "") +
-              (i ? " " : "") +
               `${attr.value.value}` +
               (isLast ? "" : " ")
           })
@@ -2281,18 +2314,19 @@ function normalizeAttributes(path) {
         if (attr.name.name === "classList") {
           if (t__namespace.isObjectExpression(expr) && !expr.properties.some(p => t__namespace.isSpreadElement(p))) {
             transformClasslistObject(path, expr, values, quasis);
+            if (!isLast) quasis[quasis.length - 1].value.raw += " ";
             i && attributes.splice(attributes.indexOf(classAttributes[i]), 1);
             continue;
           }
           expr = t__namespace.callExpression(registerImportMethod(path, "ssrClassList"), [expr]);
         }
         values.push(t__namespace.logicalExpression("||", expr, t__namespace.stringLiteral("")));
-        quasis.push(t__namespace.TemplateElement({ raw: isLast ? "" : " " }));
+        quasis.push(t__namespace.templateElement({ raw: isLast ? "" : " " }));
       }
       i && attributes.splice(attributes.indexOf(classAttributes[i]), 1);
     }
-    first.name = t__namespace.JSXIdentifier("class");
-    first.value = t__namespace.JSXExpressionContainer(t__namespace.TemplateLiteral(quasis, values));
+    first.name = t__namespace.jsxIdentifier("class");
+    first.value = t__namespace.jsxExpressionContainer(t__namespace.templateLiteral(quasis, values));
   }
   if (styleAttributes.length) transformToObject("style", attributes, styleAttributes);
   return attributes;
@@ -2318,7 +2352,7 @@ function transformAttributes$1(path, results, info) {
       ((t__namespace.isJSXNamespacedName(node.name) && reservedNameSpace) || ChildProperties.has(key)) &&
       !t__namespace.isJSXExpressionContainer(value)
     ) {
-      node.value = value = t__namespace.JSXExpressionContainer(value || t__namespace.JSXEmptyExpression());
+      node.value = value = t__namespace.jsxExpressionContainer(value || t__namespace.jsxEmptyExpression());
     }
 
     if (
@@ -2385,7 +2419,7 @@ function transformAttributes$1(path, results, info) {
             !value.expression.properties.some(p => t__namespace.isSpreadElement(p))
           ) {
             const values = [],
-              quasis = [t__namespace.TemplateElement({ raw: "" })];
+              quasis = [t__namespace.templateElement({ raw: "" })];
             transformClasslistObject(path, value.expression, values, quasis);
             if (!values.length) value.expression = t__namespace.stringLiteral(quasis[0].value.raw);
             else if (values.length === 1 && !quasis[0].value.raw && !quasis[1].value.raw) {
@@ -2447,19 +2481,19 @@ function transformClasslistObject(path, expr, values, quasis) {
         if (!prop.computed) {
           const prev = quasis.pop();
           quasis.push(
-            t__namespace.TemplateElement({
+            t__namespace.templateElement({
               raw:
                 (prev ? prev.value.raw : "") + (i ? " " : "") + `${key.value}` + (isLast ? "" : " ")
             })
           );
         } else {
           values.push(key);
-          quasis.push(t__namespace.TemplateElement({ raw: isLast ? "" : " " }));
+          quasis.push(t__namespace.templateElement({ raw: isLast ? "" : " " }));
         }
       }
     } else {
       values.push(t__namespace.conditionalExpression(prop.value, key, t__namespace.stringLiteral("")));
-      quasis.push(t__namespace.TemplateElement({ raw: isLast ? "" : " " }));
+      quasis.push(t__namespace.templateElement({ raw: isLast ? "" : " " }));
     }
   });
 }
@@ -2697,7 +2731,7 @@ function transformAttributes(path, results) {
         reservedNameSpace &&
         !t__namespace.isJSXExpressionContainer(value)
       ) {
-        node.value = value = t__namespace.JSXExpressionContainer(value || t__namespace.JSXEmptyExpression());
+        node.value = value = t__namespace.jsxExpressionContainer(value || t__namespace.jsxEmptyExpression());
       }
       if (t__namespace.isJSXExpressionContainer(value)) {
         if (key === "ref") {
@@ -2711,7 +2745,7 @@ function transformAttributes(path, results) {
           if (t__namespace.isLVal(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
             results.exprs.unshift(
-              t__namespace.variableDeclaration("const", [
+              t__namespace.variableDeclaration("var", [
                 t__namespace.variableDeclarator(refIdentifier, value.expression)
               ]),
               t__namespace.expressionStatement(
@@ -2749,7 +2783,7 @@ function transformAttributes(path, results) {
           } else if (t__namespace.isCallExpression(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
             results.exprs.unshift(
-              t__namespace.variableDeclaration("const", [
+              t__namespace.variableDeclaration("var", [
                 t__namespace.variableDeclarator(refIdentifier, value.expression)
               ]),
               t__namespace.expressionStatement(
@@ -2996,7 +3030,7 @@ function processSpreads(path, attributes, { elem, hasChildren, wrapConditionals
 function createTemplate(path, result, wrap) {
   const config = getConfig(path);
   if (result.id) {
-    result.decl = t__namespace.variableDeclaration("const", result.declarations);
+    result.decl = t__namespace.variableDeclaration("var", result.declarations);
     if (
       !(result.exprs.length || result.dynamics.length || result.postExprs.length) &&
       result.decl.declarations.length === 1
@@ -3046,29 +3080,37 @@ function wrapDynamics(path, dynamics) {
       ])
     );
   }
-  const declarations = [],
-    statements = [],
-    identifiers = [],
-    prevId = t__namespace.identifier("_p$");
-  dynamics.forEach(({ elem, key, value }) => {
-    const identifier = path.scope.generateUidIdentifier("v$");
-    identifiers.push(identifier);
-    declarations.push(t__namespace.variableDeclarator(identifier, value));
-    const prev = t__namespace.memberExpression(prevId, identifier);
+
+  const prevId = t__namespace.identifier("_p$");
+
+  /** @type {t.VariableDeclarator[]} */
+  const declarations = [];
+  /** @type {t.ExpressionStatement[]} */
+  const statements = [];
+  /** @type {t.Identifier[]} */
+  const properties = [];
+
+  dynamics.forEach(({ elem, key, value }, index) => {
+    const varIdent = path.scope.generateUidIdentifier("v$");
+
+    const propIdent = t__namespace.identifier(getNumberedId(index));
+    const propMember = t__namespace.memberExpression(prevId, propIdent);
+
+    properties.push(propIdent);
+    declarations.push(t__namespace.variableDeclarator(varIdent, value));
+
     statements.push(
       t__namespace.expressionStatement(
         t__namespace.logicalExpression(
           "&&",
-          t__namespace.binaryExpression("!==", identifier, t__namespace.memberExpression(prevId, identifier)),
-          t__namespace.assignmentExpression("=", t__namespace.memberExpression(prevId, identifier), setAttr(
-            path,
-            elem,
-            key,
-            identifier,
-            { dynamic: true, prevId: prev }
-          ))
-        )
-      )
+          t__namespace.binaryExpression("!==", varIdent, propMember),
+          t__namespace.assignmentExpression(
+            "=",
+            propMember,
+            setAttr(path, elem, key, varIdent, { dynamic: true, prevId: propMember }),
+          ),
+        ),
+      ),
     );
   });
 
@@ -3077,13 +3119,15 @@ function wrapDynamics(path, dynamics) {
       t__namespace.arrowFunctionExpression(
         [prevId],
         t__namespace.blockStatement([
-          t__namespace.variableDeclaration("const", declarations),
+          t__namespace.variableDeclaration("var", declarations),
           ...statements,
-          t__namespace.returnStatement(prevId)
-        ])
+          t__namespace.returnStatement(prevId),
+        ]),
       ),
-      t__namespace.objectExpression(identifiers.map(id => t__namespace.objectProperty(id, t__namespace.identifier("undefined"))))
-    ])
+      t__namespace.objectExpression(
+        properties.map((id) => t__namespace.objectProperty(id, t__namespace.identifier("undefined"))),
+      ),
+    ]),
   );
 }
 
@@ -3167,7 +3211,7 @@ function transformComponent(path) {
                   t__namespace.identifier("ref"),
                   [t__namespace.identifier("r$")],
                   t__namespace.blockStatement([
-                    t__namespace.variableDeclaration("const", [
+                    t__namespace.variableDeclaration("var", [
                       t__namespace.variableDeclarator(refIdentifier, value.expression)
                     ]),
                     t__namespace.expressionStatement(
@@ -3194,7 +3238,7 @@ function transformComponent(path) {
                   t__namespace.identifier("ref"),
                   [t__namespace.identifier("r$")],
                   t__namespace.blockStatement([
-                    t__namespace.variableDeclaration("const", [
+                    t__namespace.variableDeclaration("var", [
                       t__namespace.variableDeclarator(refIdentifier, value.expression)
                     ]),
                     t__namespace.expressionStatement(

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.37.9",
+  "version": "0.37.13",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -31,5 +31,5 @@
   "devDependencies": {
     "@babel/core": "^7.20.12"
   },
-  "gitHead": "2079bbeb5908166253370dd02ba1ce99afb2a2d4"
+  "gitHead": "ae2bc5ecd4f8dd61df0b2eb5c4ed0ae7589b6a6b"
 }