@babel/plugin-transform-react-jsx - npm Package Compare versions

Comparing version 7.19.0 to 7.20.7

lib/create-plugin.js

@@ -7,13 +7,7 @@ "use strict";
 exports.default = createPlugin;
-
 var _pluginSyntaxJsx = require("@babel/plugin-syntax-jsx");
-
 var _helperPluginUtils = require("@babel/helper-plugin-utils");
-
 var _core = require("@babel/core");
-
 var _helperModuleImports = require("@babel/helper-module-imports");
-
 var _helperAnnotateAsPure = require("@babel/helper-annotate-as-pure");
-
 const DEFAULT = {
@@ -29,7 +23,4 @@ importSource: "react",
 const JSX_FRAG_ANNOTATION_REGEX = /^\s*\*?\s*@jsxFrag\s+([^\s]+)\s*$/m;
-
 const get = (pass, name) => pass.get(`@babel/plugin-react-jsx/${name}`);
-
 const set = (pass, name, v) => pass.set(`@babel/plugin-react-jsx/${name}`, v);
-
 function hasProto(node) {
@@ -45,3 +36,2 @@ return node.properties.some(value => _core.types.isObjectProperty(value, {
 }
-
 function createPlugin({
@@ -55,3 +45,2 @@ name,
       throwIfNamespace = true,
-      filter,
       runtime: RUNTIME_DEFAULT = development ? "automatic" : "classic",
@@ -67,3 +56,2 @@ importSource: IMPORT_SOURCE_DEFAULT = DEFAULT.importSource,
       } = options;
-
       if (RUNTIME_DEFAULT === "classic") {
@@ -73,7 +61,5 @@ if (typeof useSpread !== "boolean") {
         }
-
         if (typeof useBuiltIns !== "boolean") {
           throw new Error("transform-react-jsx currently only accepts a boolean option for " + "useBuiltIns (defaults to false)");
         }
-
         if (useSpread && useBuiltIns) {
@@ -87,11 +73,8 @@ throw new Error("transform-react-jsx currently only accepts useBuiltIns or useSpread " + "but not both");
         const attributes = [];
-
         if (isThisAllowed(path.scope)) {
           attributes.push(_core.types.jsxAttribute(_core.types.jsxIdentifier("__self"), _core.types.jsxExpressionContainer(_core.types.thisExpression())));
         }
-
         attributes.push(_core.types.jsxAttribute(_core.types.jsxIdentifier("__source"), _core.types.jsxExpressionContainer(makeSource(path, state))));
         path.pushContainer("attributes", attributes);
       }
-
     };
@@ -108,7 +91,5 @@ return {
         },
-
         JSXSpreadChild(path) {
           throw path.buildCodeFrameError("Spread children are not supported in React.");
         },
-
         Program: {
@@ -126,7 +107,5 @@ enter(path, state) {
             let pragmaFragSet = !!options.pragmaFrag;
-
             if (file.ast.comments) {
               for (const comment of file.ast.comments) {
                 const sourceMatches = JSX_SOURCE_ANNOTATION_REGEX.exec(comment.value);
-
                 if (sourceMatches) {
@@ -136,11 +115,7 @@ source = sourceMatches[1];
                 }
-
                 const runtimeMatches = JSX_RUNTIME_ANNOTATION_REGEX.exec(comment.value);
-
                 if (runtimeMatches) {
                   runtime = runtimeMatches[1];
                 }
-
                 const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
-
                 if (jsxMatches) {
@@ -150,5 +125,3 @@ pragma = jsxMatches[1];
                 }
-
                 const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(comment.value);
-
                 if (jsxFragMatches) {
@@ -160,5 +133,3 @@ pragmaFrag = jsxFragMatches[1];
             }
-
             set(state, "runtime", runtime);
-
             if (runtime === "classic") {
@@ -168,3 +139,2 @@ if (sourceSet) {
               }
-
               const createElement = toMemberExpression(pragma);
@@ -179,5 +149,3 @@ const fragment = toMemberExpression(pragmaFrag);
               }
-
               const define = (name, id) => set(state, name, createImportLazily(state, path, id, source));
-
               define("id/jsx", development ? "jsxDEV" : "jsx");
@@ -191,3 +159,2 @@ define("id/jsxs", development ? "jsxDEV" : "jsxs");
             }
-
             if (development) {
@@ -199,6 +166,11 @@ path.traverse(injectMetaPropertiesVisitor, state);
         },
+
+        JSXFragment(path, file) {
+
+          const frag = memberExpressionToJSX(get(file, "id/fragment")());
+          path.replaceWith(_core.types.inherits(_core.types.jsxElement(_core.types.inherits(_core.types.jsxOpeningElement(frag, []), path.node.openingFragment), _core.types.jsxClosingElement(_core.types.cloneNode(frag)), path.node.children), path.node));
+        },
         JSXElement: {
           exit(path, file) {
             let callExpr;
-
             if (get(file, "runtime") === "classic" || shouldUseCreateElement(path)) {
@@ -209,22 +181,5 @@ callExpr = buildCreateElementCall(path, file);
             }
-
             path.replaceWith(_core.types.inherits(callExpr, path.node));
           }
-
         },
-        JSXFragment: {
-          exit(path, file) {
-            let callExpr;
-
-            if (get(file, "runtime") === "classic") {
-              callExpr = buildCreateElementFragmentCall(path, file);
-            } else {
-              callExpr = buildJSXFragmentCall(path, file);
-            }
-
-            path.replaceWith(_core.types.inherits(callExpr, path.node));
-          }
-
-        },
-
         JSXAttribute(path) {
@@ -235,3 +190,2 @@ if (_core.types.isJSXElement(path.node.value)) {
         }
-
       }
@@ -249,3 +203,2 @@ };
         } = scope;
-
         if (path.isFunctionParent() && !path.isArrowFunctionExpression()) {
@@ -255,10 +208,7 @@ if (!path.isMethod()) {
           }
-
           if (path.node.kind !== "constructor") {
             return true;
           }
-
           return !isDerivedClass(path.parentPath.parentPath);
         }
-
         if (path.isTSModuleBlock()) {
@@ -268,9 +218,6 @@ return false;
       } while (scope = scope.parent);
-
       return true;
     }
-
     function call(pass, name, args) {
       const node = _core.types.callExpression(get(pass, `id/${name}`)(), args);
-
       if (PURE_ANNOTATION != null ? PURE_ANNOTATION : get(pass, "defaultPure")) (0, _helperAnnotateAsPure.default)(node);
@@ -284,6 +231,4 @@ return node;
       let seenPropsSpread = false;
-
       for (let i = 0; i < attributes.length; i++) {
         const attr = attributes[i];
-
         if (seenPropsSpread && _core.types.isJSXAttribute(attr) && attr.name.name === "key") {
@@ -295,6 +240,4 @@ return true;
       }
-
       return false;
     }
-
     function convertJSXIdentifier(node, parent) {
@@ -318,3 +261,2 @@ if (_core.types.isJSXIdentifier(node)) {
     }
-
     function convertAttributeValue(node) {
@@ -327,7 +269,5 @@ if (_core.types.isJSXExpressionContainer(node)) {
     }
-
     function accumulateAttribute(array, attribute) {
       if (_core.types.isJSXSpreadAttribute(attribute.node)) {
         const arg = attribute.node.argument;
-
         if (_core.types.isObjectExpression(arg) && !hasProto(arg)) {
@@ -338,19 +278,14 @@ array.push(...arg.properties);
         }
-
         return array;
       }
-
       const value = convertAttributeValue(attribute.node.name.name !== "key" ? attribute.node.value || _core.types.booleanLiteral(true) : attribute.node.value);
-
       if (attribute.node.name.name === "key" && value === null) {
         throw attribute.buildCodeFrameError('Please provide an explicit key value. Using "key" as a shorthand for "key={true}" is not allowed.');
       }
-
       if (_core.types.isStringLiteral(value) && !_core.types.isJSXExpressionContainer(attribute.node.value)) {
         var _value$extra;
+        value.value = value.value.replace(/\n\s+/g, " ");
 
-        value.value = value.value.replace(/\n\s+/g, " ");
         (_value$extra = value.extra) == null ? true : delete _value$extra.raw;
       }
-
       if (_core.types.isJSXNamespacedName(attribute.node.name)) {
@@ -363,10 +298,8 @@ attribute.node.name = _core.types.stringLiteral(attribute.node.name.namespace.name + ":" + attribute.node.name.name.name);
       }
-
-      array.push(_core.types.inherits(_core.types.objectProperty(attribute.node.name, value), attribute.node));
+      array.push(_core.types.inherits(_core.types.objectProperty(
+      attribute.node.name, value), attribute.node));
       return array;
     }
-
     function buildChildrenProperty(children) {
       let childrenNode;
-
       if (children.length === 1) {
@@ -379,3 +312,2 @@ childrenNode = children[0];
       }
-
       return _core.types.objectProperty(_core.types.identifier("children"), childrenNode);
@@ -395,3 +327,2 @@ }
           } = attr.node.name;
-
           switch (name) {
@@ -401,15 +332,11 @@ case "__source":
               if (extracted[name]) throw sourceSelfError(path, name);
-
             case "key":
               {
                 const keyValue = convertAttributeValue(attr.node.value);
-
                 if (keyValue === null) {
                   throw attr.buildCodeFrameError('Please provide an explicit key value. Using "key" as a shorthand for "key={true}" is not allowed.');
                 }
-
                 extracted[name] = keyValue;
                 break;
               }
-
             default:
@@ -422,23 +349,23 @@ attribsArray.push(attr);
       }
-
       const children = _core.types.react.buildChildren(path.node);
-
       let attribs;
-
       if (attribsArray.length || children.length) {
-        attribs = buildJSXOpeningElementAttributes(attribsArray, children);
+        attribs = buildJSXOpeningElementAttributes(attribsArray,
+        children);
       } else {
         attribs = _core.types.objectExpression([]);
       }
-
       args.push(attribs);
-
       if (development) {
-        var _extracted$key, _extracted$__source, _extracted$__self;
-
-        args.push((_extracted$key = extracted.key) != null ? _extracted$key : path.scope.buildUndefinedNode(), _core.types.booleanLiteral(children.length > 1), (_extracted$__source = extracted.__source) != null ? _extracted$__source : path.scope.buildUndefinedNode(), (_extracted$__self = extracted.__self) != null ? _extracted$__self : path.scope.buildUndefinedNode());
+        var _extracted$key;
+        args.push((_extracted$key = extracted.key) != null ? _extracted$key : path.scope.buildUndefinedNode(), _core.types.booleanLiteral(children.length > 1));
+        if (extracted.__source) {
+          args.push(extracted.__source);
+          if (extracted.__self) args.push(extracted.__self);
+        } else if (extracted.__self) {
+          args.push(path.scope.buildUndefinedNode(), extracted.__self);
+        }
       } else if (extracted.key !== undefined) {
         args.push(extracted.key);
       }
-
       return call(file, children.length > 1 ? "jsxs" : "jsx", args);
@@ -453,34 +380,13 @@ }
       }
-
       return _core.types.objectExpression(props);
     }
 
-    function buildJSXFragmentCall(path, file) {
-      const args = [get(file, "id/fragment")()];
-
-      const children = _core.types.react.buildChildren(path.node);
-
-      args.push(_core.types.objectExpression(children.length > 0 ? [buildChildrenProperty(children)] : []));
-
-      if (development) {
-        args.push(path.scope.buildUndefinedNode(), _core.types.booleanLiteral(children.length > 1));
-      }
-
-      return call(file, children.length > 1 ? "jsxs" : "jsx", args);
-    }
-
-    function buildCreateElementFragmentCall(path, file) {
-      if (filter && !filter(path.node, file)) return;
-      return call(file, "createElement", [get(file, "id/fragment")(), _core.types.nullLiteral(), ..._core.types.react.buildChildren(path.node)]);
-    }
-
     function buildCreateElementCall(path, file) {
       const openingPath = path.get("openingElement");
-      return call(file, "createElement", [getTag(openingPath), buildCreateElementOpeningElementAttributes(file, path, openingPath.get("attributes")), ..._core.types.react.buildChildren(path.node)]);
+      return call(file, "createElement", [getTag(openingPath), buildCreateElementOpeningElementAttributes(file, path, openingPath.get("attributes")),
+      ..._core.types.react.buildChildren(path.node)]);
     }
-
     function getTag(openingPath) {
       const tagExpr = convertJSXIdentifier(openingPath.node.name, openingPath.node);
       let tagName;
-
       if (_core.types.isIdentifier(tagExpr)) {
@@ -491,3 +397,2 @@ tagName = tagExpr.name;
       }
-
       if (_core.types.react.isCompatTag(tagName)) {
@@ -506,3 +411,2 @@ return _core.types.stringLiteral(tagName);
           const props = attribs.reduce(accumulateAttribute, []);
-
           if (!useSpread) {
@@ -515,3 +419,2 @@ let start = 0;
                 }
-
                 objs.push(prop.argument);
@@ -521,3 +424,2 @@ start = i + 1;
             });
-
             if (props.length > start) {
@@ -529,9 +431,8 @@ objs.push(_core.types.objectExpression(props.slice(start)));
           }
-
           if (!objs.length) {
             return _core.types.nullLiteral();
           }
-
           if (objs.length === 1) {
-            if (!(_core.types.isSpreadElement(props[0]) && _core.types.isObjectExpression(props[0].argument))) {
+            if (!(_core.types.isSpreadElement(props[0]) &&
+            _core.types.isObjectExpression(props[0].argument))) {
               return objs[0];
@@ -544,4 +445,4 @@ }
           }
+          const helper = useBuiltIns ? _core.types.memberExpression(_core.types.identifier("Object"), _core.types.identifier("assign")) : file.addHelper("extends");
 
-          const helper = useBuiltIns ? _core.types.memberExpression(_core.types.identifier("Object"), _core.types.identifier("assign")) : file.addHelper("extends");
           return _core.types.callExpression(helper, objs);
@@ -552,6 +453,4 @@ }
       const found = Object.create(null);
-
       for (const attr of attribs) {
         const name = _core.types.isJSXAttribute(attr) && _core.types.isJSXIdentifier(attr.name) && attr.name.name;
-
         if (runtime === "automatic" && (name === "__source" || name === "__self")) {
@@ -561,10 +460,8 @@ if (found[name]) throw sourceSelfError(path, name);
         }
-
         accumulateAttribute(props, attr);
       }
-
-      return props.length === 1 && _core.types.isSpreadElement(props[0]) && !_core.types.isObjectExpression(props[0].argument) ? props[0].argument : props.length > 0 ? _core.types.objectExpression(props) : _core.types.nullLiteral();
+      return props.length === 1 && _core.types.isSpreadElement(props[0]) &&
+      !_core.types.isObjectExpression(props[0].argument) ? props[0].argument : props.length > 0 ? _core.types.objectExpression(props) : _core.types.nullLiteral();
     }
   });
-
   function getSource(source, importName) {
@@ -574,10 +471,7 @@ switch (importName) {
         return `${source}/${development ? "jsx-dev-runtime" : "jsx-runtime"}`;
-
       case "jsxDEV":
         return `${source}/jsx-dev-runtime`;
-
       case "jsx":
       case "jsxs":
         return `${source}/jsx-runtime`;
-
       case "createElement":
@@ -587,7 +481,5 @@ return source;
   }
-
   function createImportLazily(pass, path, importName, source) {
     return () => {
       const actualSource = getSource(source, importName);
-
       if ((0, _helperModuleImports.isModule)(path)) {
@@ -604,3 +496,2 @@ let reference = get(pass, `imports/${importName}`);
         let reference = get(pass, `requires/${actualSource}`);
-
         if (reference) {
@@ -614,3 +505,2 @@ reference = _core.types.cloneNode(reference);
         }
-
         return _core.types.memberExpression(reference, _core.types.identifier(importName));
@@ -621,10 +511,18 @@ }
 }
-
 function toMemberExpression(id) {
-  return id.split(".").map(name => _core.types.identifier(name)).reduce((object, property) => _core.types.memberExpression(object, property));
+  return id.split(".").map(name => _core.types.identifier(name))
+  .reduce((object, property) => _core.types.memberExpression(object, property));
 }
-
+function memberExpressionToJSX(expr) {
+  switch (expr.type) {
+    case "Identifier":
+      return _core.types.jsxIdentifier(expr.name);
+    case "MemberExpression":
+      return _core.types.jsxMemberExpression(memberExpressionToJSX(expr.object), memberExpressionToJSX(expr.property));
+    default:
+      throw new Error("Internal error: unknown member expression type");
+  }
+}
 function makeSource(path, state) {
   const location = path.node.loc;
-
   if (!location) {
@@ -639,30 +537,20 @@ return path.scope.buildUndefinedNode();
     const fileNameIdentifier = path.scope.generateUidIdentifier("_jsxFileName");
-    const scope = path.hub.getScope();
-
-    if (scope) {
-      scope.push({
-        id: fileNameIdentifier,
-        init: _core.types.stringLiteral(filename)
-      });
-    }
-
+    path.scope.getProgramParent().push({
+      id: fileNameIdentifier,
+      init: _core.types.stringLiteral(filename)
+    });
     state.fileNameIdentifier = fileNameIdentifier;
   }
-
-  return makeTrace(_core.types.cloneNode(state.fileNameIdentifier), location.start.line, location.start.column);
+  return makeTrace(_core.types.cloneNode(
+  state.fileNameIdentifier), location.start.line, location.start.column);
 }
-
 function makeTrace(fileNameIdentifier, lineNumber, column0Based) {
   const fileLineLiteral = lineNumber != null ? _core.types.numericLiteral(lineNumber) : _core.types.nullLiteral();
   const fileColumnLiteral = column0Based != null ? _core.types.numericLiteral(column0Based + 1) : _core.types.nullLiteral();
-
-  const fileNameProperty = _core.types.objectProperty(_core.types.identifier("fileName"), fileNameIdentifier);
-
-  const lineNumberProperty = _core.types.objectProperty(_core.types.identifier("lineNumber"), fileLineLiteral);
-
-  const columnNumberProperty = _core.types.objectProperty(_core.types.identifier("columnNumber"), fileColumnLiteral);
-
-  return _core.types.objectExpression([fileNameProperty, lineNumberProperty, columnNumberProperty]);
+  return _core.template.expression.ast`{
+    fileName: ${fileNameIdentifier},
+    lineNumber: ${fileLineLiteral},
+    columnNumber: ${fileColumnLiteral},
+  }`;
 }
-
 function sourceSelfError(path, name) {
@@ -669,0 +557,0 @@ const pluginName = `transform-react-jsx-${name.slice(2)}`;

lib/development.js

@@ -7,5 +7,3 @@ "use strict";
 exports.default = void 0;
-
 var _createPlugin = require("./create-plugin");
-
 var _default = (0, _createPlugin.default)({
@@ -15,5 +13,4 @@ name: "transform-react-jsx/development",
 });
-
 exports.default = _default;
 
 //# sourceMappingURL=development.js.map

lib/index.js

@@ -7,5 +7,3 @@ "use strict";
 exports.default = void 0;
-
 var _createPlugin = require("./create-plugin");
-
 var _default = (0, _createPlugin.default)({
@@ -15,5 +13,4 @@ name: "transform-react-jsx",
 });
-
 exports.default = _default;
 
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@babel/plugin-transform-react-jsx",
-  "version": "7.19.0",
+  "version": "7.20.7",
   "description": "Turn JSX into React function calls",
@@ -22,5 +22,5 @@ "repository": {
     "@babel/helper-module-imports": "^7.18.6",
-    "@babel/helper-plugin-utils": "^7.19.0",
+    "@babel/helper-plugin-utils": "^7.20.2",
     "@babel/plugin-syntax-jsx": "^7.18.6",
-    "@babel/types": "^7.19.0"
+    "@babel/types": "^7.20.7"
   },
@@ -31,5 +31,5 @@ "peerDependencies": {
   "devDependencies": {
-    "@babel/core": "^7.19.0",
+    "@babel/core": "^7.20.7",
     "@babel/helper-plugin-test-runner": "^7.18.6",
-    "@babel/traverse": "^7.19.0"
+    "@babel/traverse": "^7.20.7"
   },
@@ -36,0 +36,0 @@ "engines": {

No alert changes

Worsened metrics

Total package byte prevSize

77394

decreased by-3.34%

Lines of code

521

decreased by-0.19%

Dependency changes

• + Addedcaniuse-lite@1.0.30001620(transitive)

• + Addedelectron-to-chromium@1.4.774(transitive)

• + Addedpicocolors@1.0.1(transitive)

• + Addedupdate-browserslist-db@1.0.16(transitive)

• - Removedcaniuse-lite@1.0.30001616(transitive)

• - Removedelectron-to-chromium@1.4.763(transitive)

• - Removedpicocolors@1.0.0(transitive)

• - Removedupdate-browserslist-db@1.0.15(transitive)

• Updated@babel/helper-plugin-utils@^7.20.2

• Updated@babel/types@^7.20.7