babel-plugin-jsx-dom-expressions 0.37.8 → 0.37.11

package/index.js

@@ -36,6 +36,7 @@ const booleans = [
   "formnovalidate",
   "hidden",
   "indeterminate",
+  "inert",
   "ismap",
   "loop",
   "multiple",
@@ -321,16 +322,50 @@ function isDynamic(path, { checkMember, checkTags, checkCallExpressions = true,
     expr.leadingComments.shift();
     return false;
   }
+
   if (
-    (checkCallExpressions && (t__namespace.isCallExpression(expr) || t__namespace.isOptionalCallExpression(expr))) ||
-    (checkMember &&
-      (t__namespace.isMemberExpression(expr) ||
-        t__namespace.isOptionalMemberExpression(expr) ||
-        t__namespace.isSpreadElement(expr) ||
-        (t__namespace.isBinaryExpression(expr) && expr.operator === "in"))) ||
-    (checkTags && (t__namespace.isJSXElement(expr) || t__namespace.isJSXFragment(expr)))
-  )
+    checkCallExpressions &&
+    (t__namespace.isCallExpression(expr) || t__namespace.isOptionalCallExpression(expr))
+  ) {
     return true;
+  }
+
+  if (checkMember && t__namespace.isMemberExpression(expr)) {
+    // Do not assume property access on namespaced imports as dynamic.
+    const object = path.get("object").node;
+
+    if (
+      t__namespace.isIdentifier(object) &&
+      (!expr.computed ||
+        !isDynamic(path.get("property"), {
+          checkMember,
+          checkTags,
+          checkCallExpressions,
+          native,
+        }))
+    ) {
+      const binding = path.scope.getBinding(object.name);
+
+      if (binding && binding.path.isImportNamespaceSpecifier()) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  if (
+    checkMember &&
+    (t__namespace.isOptionalMemberExpression(expr) ||
+      t__namespace.isSpreadElement(expr) ||
+      (t__namespace.isBinaryExpression(expr) && expr.operator === "in"))
+  ) {
+    return true;
+  }
+
+  if (checkTags && (t__namespace.isJSXElement(expr) || t__namespace.isJSXFragment(expr))) {
+    return true;
+  }
 
   let dynamic;
   path.traverse({
@@ -595,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",
@@ -726,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;
@@ -967,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);
@@ -1011,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) {
@@ -1025,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)
             )
           );
@@ -1045,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(
@@ -1098,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) &&
@@ -1335,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")))
@@ -1884,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 },
+            ),
+          ),
+        ),
       );
     }
   });
@@ -1939,11 +2006,13 @@ function wrapDynamics$1(path, dynamics) {
         t__namespace.blockStatement([
           t__namespace.variableDeclaration("const", 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"))),
+      ),
+    ]),
   );
 }
 
@@ -2226,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 ? "" : " ")
           })
@@ -2246,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;
@@ -2283,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 (
@@ -2350,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) {
@@ -2412,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 ? "" : " " }));
     }
   });
 }
@@ -2662,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") {
@@ -3011,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 }),
+          ),
+        ),
+      ),
     );
   });
 
@@ -3044,16 +3121,19 @@ function wrapDynamics(path, dynamics) {
         t__namespace.blockStatement([
           t__namespace.variableDeclaration("const", 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"))),
+      ),
+    ]),
   );
 }
 
 function convertComponentIdentifier(node) {
   if (t__namespace.isJSXIdentifier(node)) {
+    if (node.name === 'this') return t__namespace.thisExpression();
     if (t__namespace.isValidIdentifier(node.name)) node.type = "Identifier";
     else return t__namespace.stringLiteral(node.name);
   } else if (t__namespace.isJSXMemberExpression(node)) {
@@ -3352,21 +3432,50 @@ function transformJSX(path) {
   path.replaceWith(replace(template(path, result, false)));
 }
 
+function getTargetFunctionParent(path, parent) {
+  let current = path.scope.getFunctionParent();
+  while (current !== parent && current.path.isArrowFunctionExpression()) {
+    current = current.path.parentPath.scope.getFunctionParent();
+  }
+  return current;
+}
+
 function transformThis(path) {
+  const parent = path.scope.getFunctionParent();
   let thisId;
   path.traverse({
     ThisExpression(path) {
-      thisId || (thisId = path.scope.generateUidIdentifier("self$"));
-      path.replaceWith(thisId);
-    }
+      const current = getTargetFunctionParent(path, parent);
+      if (current === parent) {
+        thisId || (thisId = path.scope.generateUidIdentifier("self$"));
+        path.replaceWith(thisId);
+      }
+    },
+    JSXElement(path) {
+      let source = path.get('openingElement').get('name');
+      while (source.isJSXMemberExpression()) {
+        source = source.get('object');
+      }
+      if (source.isJSXIdentifier() && source.node.name === 'this') {
+        const current = getTargetFunctionParent(path, parent);
+        if (current === parent) {
+          thisId || (thisId = path.scope.generateUidIdentifier("self$"));
+          source.replaceWith(t__namespace.jsxIdentifier(thisId.name));
+
+          if (path.node.closingElement) {
+            path.node.closingElement.name = path.node.openingElement.name;
+          }
+        }
+      } 
+    },
   });
   return node => {
     if (thisId) {
-      let parent = path.getStatementParent();
-      const decl = t__namespace.variableDeclaration("const", [
-        t__namespace.variableDeclarator(thisId, t__namespace.thisExpression())
-      ]);
-      parent.insertBefore(decl);
+      parent.push({
+        id: thisId,
+        init: t__namespace.thisExpression(),
+        kind: 'const',
+      });
     }
     return node;
   };

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.8",
+  "version": "0.37.11",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -31,5 +31,5 @@
   "devDependencies": {
     "@babel/core": "^7.20.12"
   },
-  "gitHead": "51b297d6ed45d1a3dbbe7a45f2f58b8b524427ab"
+  "gitHead": "74d433381256e4355adc644124026fe0a2ef9875"
 }