sucrase - npm Package Compare versions

Comparing version 3.30.0 to 3.31.0

dist/esm/index.js

@@ -34,3 +34,3 @@ import CJSImportProcessor from "./CJSImportProcessor";
   /* istanbul ignore next */
-  return "3.30.0";
+  return "3.31.0";
 }
@@ -37,0 +37,0 @@

dist/esm/Options-gen-types.js

@@ -23,3 +23,3 @@ /**
   disableESTransforms: t.opt("boolean"),
-  jsxRuntime: t.opt(t.union(t.lit("classic"), t.lit("automatic"))),
+  jsxRuntime: t.opt(t.union(t.lit("classic"), t.lit("automatic"), t.lit("preserve"))),
   production: t.opt("boolean"),
@@ -26,0 +26,0 @@ jsxImportSource: t.opt("string"),

dist/esm/Options.js

@@ -94,4 +94,5 @@ import {createCheckers} from "ts-interface-checker";
 
+
 export function validateOptions(options) {
   OptionsChecker.strictCheck(options);
 }

dist/esm/parser/plugins/jsx/index.js

@@ -132,7 +132,21 @@ import {
 function jsxParseElementName() {
+  const firstTokenIndex = state.tokens.length;
   jsxParseNamespacedName(IdentifierRole.Access);
+  let hadDot = false;
   while (match(tt.dot)) {
+    hadDot = true;
     nextJSXTagToken();
     jsxParseIdentifier();
   }
+  // For tags like <div> with a lowercase letter and no dots, the name is
+  // actually *not* an identifier access, since it's referring to a built-in
+  // tag name. Remove the identifier role in this case so that it's not
+  // accidentally transformed by the imports transform when preserving JSX.
+  if (!hadDot) {
+    const firstToken = state.tokens[firstTokenIndex];
+    const firstChar = input.charCodeAt(firstToken.start);
+    if (firstChar >= charCodes.lowercaseA && firstChar <= charCodes.lowercaseZ) {
+      firstToken.identifierRole = null;
+    }
+  }
 }
@@ -139,0 +153,0 @@

dist/esm/transformers/CJSImportTransformer.js

 
 
+
 import {IdentifierRole, isDeclaration, isObjectShorthandDeclaration} from "../parser/tokenizer";
@@ -33,8 +34,10 @@ import {ContextualKeyword} from "../parser/tokenizer/keywords";
      nameManager,
+     helperManager,
      reactHotLoaderTransformer,
      enableLegacyBabel5ModuleInterop,
+     enableLegacyTypeScriptModuleInterop,
      isTypeScriptTransformEnabled,
      preserveDynamicImport,
   ) {
-    super();this.rootTransformer = rootTransformer;this.tokens = tokens;this.importProcessor = importProcessor;this.nameManager = nameManager;this.reactHotLoaderTransformer = reactHotLoaderTransformer;this.enableLegacyBabel5ModuleInterop = enableLegacyBabel5ModuleInterop;this.isTypeScriptTransformEnabled = isTypeScriptTransformEnabled;this.preserveDynamicImport = preserveDynamicImport;CJSImportTransformer.prototype.__init.call(this);CJSImportTransformer.prototype.__init2.call(this);CJSImportTransformer.prototype.__init3.call(this);;
+    super();this.rootTransformer = rootTransformer;this.tokens = tokens;this.importProcessor = importProcessor;this.nameManager = nameManager;this.helperManager = helperManager;this.reactHotLoaderTransformer = reactHotLoaderTransformer;this.enableLegacyBabel5ModuleInterop = enableLegacyBabel5ModuleInterop;this.enableLegacyTypeScriptModuleInterop = enableLegacyTypeScriptModuleInterop;this.isTypeScriptTransformEnabled = isTypeScriptTransformEnabled;this.preserveDynamicImport = preserveDynamicImport;CJSImportTransformer.prototype.__init.call(this);CJSImportTransformer.prototype.__init2.call(this);CJSImportTransformer.prototype.__init3.call(this);;
     this.declarationInfo = isTypeScriptTransformEnabled
@@ -126,3 +129,6 @@ ? getDeclarationInfo(tokens)
       }
-      this.tokens.replaceToken("Promise.resolve().then(() => require");
+      const requireWrapper = this.enableLegacyTypeScriptModuleInterop
+        ? ""
+        : `${this.helperManager.getHelperName("interopRequireWildcard")}(`;
+      this.tokens.replaceToken(`Promise.resolve().then(() => ${requireWrapper}require`);
       const contextId = this.tokens.currentToken().contextId;
@@ -136,3 +142,3 @@ if (contextId == null) {
       }
-      this.tokens.replaceToken("))");
+      this.tokens.replaceToken(requireWrapper ? ")))" : "))");
       return;
@@ -139,0 +145,0 @@ }

dist/esm/transformers/JSXTransformer.js

@@ -566,3 +566,3 @@
  * Really only treat anything starting with a-z as tag names.  `_`, `$`, `é`
- * should be treated as copmonent names
+ * should be treated as component names
  */
@@ -569,0 +569,0 @@ export function startsWithLowerCase(s) {

dist/esm/transformers/RootTransformer.js

@@ -54,6 +54,8 @@
     if (transforms.includes("jsx")) {
+      if (options.jsxRuntime !== "preserve") {
+        this.transformers.push(
+          new JSXTransformer(this, tokenProcessor, importProcessor, this.nameManager, options),
+        );
+      }
       this.transformers.push(
-        new JSXTransformer(this, tokenProcessor, importProcessor, this.nameManager, options),
-      );
-      this.transformers.push(
         new ReactDisplayNameTransformer(this, tokenProcessor, importProcessor, options),
@@ -85,4 +87,6 @@ );
           this.nameManager,
+          this.helperManager,
           reactHotLoaderTransformer,
           enableLegacyBabel5ModuleInterop,
+          Boolean(options.enableLegacyTypeScriptModuleInterop),
           transforms.includes("typescript"),
@@ -89,0 +93,0 @@ Boolean(options.preserveDynamicImport),

dist/index.js

@@ -34,3 +34,3 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _CJSImportProcessor = require('./CJSImportProcessor'); var _CJSImportProcessor2 = _interopRequireDefault(_CJSImportProcessor);
   /* istanbul ignore next */
-  return "3.30.0";
+  return "3.31.0";
 } exports.getVersion = getVersion;
@@ -37,0 +37,0 @@

dist/Options-gen-types.js

@@ -23,3 +23,3 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }/**
   disableESTransforms: t.opt("boolean"),
-  jsxRuntime: t.opt(t.union(t.lit("classic"), t.lit("automatic"))),
+  jsxRuntime: t.opt(t.union(t.lit("classic"), t.lit("automatic"), t.lit("preserve"))),
   production: t.opt("boolean"),
@@ -26,0 +26,0 @@ jsxImportSource: t.opt("string"),

dist/Options.js

@@ -94,4 +94,5 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _tsinterfacechecker = require('ts-interface-checker');
 
+
  function validateOptions(options) {
   OptionsChecker.strictCheck(options);
 } exports.validateOptions = validateOptions;

dist/parser/plugins/jsx/index.js

@@ -132,7 +132,21 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 function jsxParseElementName() {
+  const firstTokenIndex = _base.state.tokens.length;
   jsxParseNamespacedName(_index.IdentifierRole.Access);
+  let hadDot = false;
   while (_index.match.call(void 0, _types.TokenType.dot)) {
+    hadDot = true;
     nextJSXTagToken();
     jsxParseIdentifier();
   }
+  // For tags like <div> with a lowercase letter and no dots, the name is
+  // actually *not* an identifier access, since it's referring to a built-in
+  // tag name. Remove the identifier role in this case so that it's not
+  // accidentally transformed by the imports transform when preserving JSX.
+  if (!hadDot) {
+    const firstToken = _base.state.tokens[firstTokenIndex];
+    const firstChar = _base.input.charCodeAt(firstToken.start);
+    if (firstChar >= _charcodes.charCodes.lowercaseA && firstChar <= _charcodes.charCodes.lowercaseZ) {
+      firstToken.identifierRole = null;
+    }
+  }
 }
@@ -139,0 +153,0 @@

dist/transformers/CJSImportTransformer.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+
 var _tokenizer = require('../parser/tokenizer');
@@ -33,8 +34,10 @@ var _keywords = require('../parser/tokenizer/keywords');
      nameManager,
+     helperManager,
      reactHotLoaderTransformer,
      enableLegacyBabel5ModuleInterop,
+     enableLegacyTypeScriptModuleInterop,
      isTypeScriptTransformEnabled,
      preserveDynamicImport,
   ) {
-    super();this.rootTransformer = rootTransformer;this.tokens = tokens;this.importProcessor = importProcessor;this.nameManager = nameManager;this.reactHotLoaderTransformer = reactHotLoaderTransformer;this.enableLegacyBabel5ModuleInterop = enableLegacyBabel5ModuleInterop;this.isTypeScriptTransformEnabled = isTypeScriptTransformEnabled;this.preserveDynamicImport = preserveDynamicImport;CJSImportTransformer.prototype.__init.call(this);CJSImportTransformer.prototype.__init2.call(this);CJSImportTransformer.prototype.__init3.call(this);;
+    super();this.rootTransformer = rootTransformer;this.tokens = tokens;this.importProcessor = importProcessor;this.nameManager = nameManager;this.helperManager = helperManager;this.reactHotLoaderTransformer = reactHotLoaderTransformer;this.enableLegacyBabel5ModuleInterop = enableLegacyBabel5ModuleInterop;this.enableLegacyTypeScriptModuleInterop = enableLegacyTypeScriptModuleInterop;this.isTypeScriptTransformEnabled = isTypeScriptTransformEnabled;this.preserveDynamicImport = preserveDynamicImport;CJSImportTransformer.prototype.__init.call(this);CJSImportTransformer.prototype.__init2.call(this);CJSImportTransformer.prototype.__init3.call(this);;
     this.declarationInfo = isTypeScriptTransformEnabled
@@ -126,3 +129,6 @@ ? _getDeclarationInfo2.default.call(void 0, tokens)
       }
-      this.tokens.replaceToken("Promise.resolve().then(() => require");
+      const requireWrapper = this.enableLegacyTypeScriptModuleInterop
+        ? ""
+        : `${this.helperManager.getHelperName("interopRequireWildcard")}(`;
+      this.tokens.replaceToken(`Promise.resolve().then(() => ${requireWrapper}require`);
       const contextId = this.tokens.currentToken().contextId;
@@ -136,3 +142,3 @@ if (contextId == null) {
       }
-      this.tokens.replaceToken("))");
+      this.tokens.replaceToken(requireWrapper ? ")))" : "))");
       return;
@@ -139,0 +145,0 @@ }

dist/transformers/JSXTransformer.js

@@ -566,3 +566,3 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  * Really only treat anything starting with a-z as tag names.  `_`, `$`, `é`
- * should be treated as copmonent names
+ * should be treated as component names
  */
@@ -569,0 +569,0 @@ function startsWithLowerCase(s) {

dist/transformers/RootTransformer.js

@@ -54,6 +54,8 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
     if (transforms.includes("jsx")) {
+      if (options.jsxRuntime !== "preserve") {
+        this.transformers.push(
+          new (0, _JSXTransformer2.default)(this, tokenProcessor, importProcessor, this.nameManager, options),
+        );
+      }
       this.transformers.push(
-        new (0, _JSXTransformer2.default)(this, tokenProcessor, importProcessor, this.nameManager, options),
-      );
-      this.transformers.push(
         new (0, _ReactDisplayNameTransformer2.default)(this, tokenProcessor, importProcessor, options),
@@ -85,4 +87,6 @@ );
           this.nameManager,
+          this.helperManager,
           reactHotLoaderTransformer,
           enableLegacyBabel5ModuleInterop,
+          Boolean(options.enableLegacyTypeScriptModuleInterop),
           transforms.includes("typescript"),
@@ -89,0 +93,0 @@ Boolean(options.preserveDynamicImport),

dist/types/Options.d.ts

@@ -21,10 +21,11 @@ export declare type Transform = "jsx" | "typescript" | "flow" | "imports" | "react-hot-loader" | "jest";
     /**
-     * Transformation mode for the JSX transform. The automatic transform refers
-     * to the transform behavior released with React 17, where the `jsx` function
-     * (or a variation) is automatically imported. The classic transform refers to
-     * the previous behavior using `React.createElement`.
+     * Transformation mode for the JSX transform.
+     * - "classic" refers to the original behavior using `React.createElement`.
+     * - "automatic" refers to the transform behavior released with React 17,
+     *   where the `jsx` function (or a variation) is automatically imported.
+     * - "preserve" leaves the JSX as-is.
      *
-     * Default value: "classic"
+     * Default value: "classic".
      */
-    jsxRuntime?: "classic" | "automatic";
+    jsxRuntime?: "classic" | "automatic" | "preserve";
     /**
@@ -31,0 +32,0 @@ * Compile code for production use. Currently only applies to the JSX

dist/types/transformers/CJSImportTransformer.d.ts

 import type CJSImportProcessor from "../CJSImportProcessor";
+import type { HelperManager } from "../HelperManager";
 import type NameManager from "../NameManager";
@@ -15,4 +16,6 @@ import type TokenProcessor from "../TokenProcessor";
     readonly nameManager: NameManager;
+    readonly helperManager: HelperManager;
     readonly reactHotLoaderTransformer: ReactHotLoaderTransformer | null;
     readonly enableLegacyBabel5ModuleInterop: boolean;
+    readonly enableLegacyTypeScriptModuleInterop: boolean;
     readonly isTypeScriptTransformEnabled: boolean;
@@ -24,3 +27,3 @@ readonly preserveDynamicImport: boolean;
     private declarationInfo;
-    constructor(rootTransformer: RootTransformer, tokens: TokenProcessor, importProcessor: CJSImportProcessor, nameManager: NameManager, reactHotLoaderTransformer: ReactHotLoaderTransformer | null, enableLegacyBabel5ModuleInterop: boolean, isTypeScriptTransformEnabled: boolean, preserveDynamicImport: boolean);
+    constructor(rootTransformer: RootTransformer, tokens: TokenProcessor, importProcessor: CJSImportProcessor, nameManager: NameManager, helperManager: HelperManager, reactHotLoaderTransformer: ReactHotLoaderTransformer | null, enableLegacyBabel5ModuleInterop: boolean, enableLegacyTypeScriptModuleInterop: boolean, isTypeScriptTransformEnabled: boolean, preserveDynamicImport: boolean);
     getPrefixCode(): string;
@@ -27,0 +30,0 @@ getSuffixCode(): string;

dist/types/transformers/JSXTransformer.d.ts

@@ -142,4 +142,4 @@ import type CJSImportProcessor from "../CJSImportProcessor";
  * Really only treat anything starting with a-z as tag names.  `_`, `$`, `é`
- * should be treated as copmonent names
+ * should be treated as component names
  */
 export declare function startsWithLowerCase(s: string): boolean;

package.json

 {
   "name": "sucrase",
-  "version": "3.30.0",
+  "version": "3.31.0",
   "description": "Super-fast alternative to Babel for when you can target modern JS runtimes",
@@ -67,3 +67,3 @@ "author": "Alan Pierce <[e-mail]>",
     "prettier": "^2.6.2",
-    "sucrase": "^3.29.0",
+    "sucrase": "^3.30.0",
     "test262-harness": "^10.0.0",
@@ -70,0 +70,0 @@ "ts-interface-builder": "^0.3.3",

README.md

@@ -69,6 +69,5 @@ # Sucrase
 
-* **jsx**: Transforms JSX syntax to `React.createElement`, e.g. `<div a={b} />`
-  becomes `React.createElement('div', {a: b})`. Behaves like Babel 7's
-  [React preset](https://github.com/babel/babel/tree/main/packages/babel-preset-react),
-  including adding `createReactClass` display names and JSX context information.
+* **jsx**: Enables JSX syntax. By default, JSX is transformed to `React.createClass`,
+  but may be preserved or transformed to `_jsx()` by setting the `jsxRuntime` option.
+  Also adds `createReactClass` display names and JSX context information.
 * **typescript**: Compiles TypeScript code to JavaScript, removing type
@@ -138,3 +137,3 @@ annotations and handling features like enums. Does not check types. Sucrase
 
-* **jsxRuntime**: A string specifying the transform mode, which can be one of two values:
+* **jsxRuntime**: A string specifying the transform mode, which can be one of three values:
   * `"classic"` (default): The original JSX transform that calls `React.createElement` by default.
@@ -148,2 +147,3 @@ To configure for non-React use cases, specify:
     * **jsxImportSource**: Package name for auto-generated import statements, defaults to `react`.
+  * `"preserve"`: Don't transform JSX, and instead emit it as-is in the output code.
 * **production**: If `true`, use production version of functions and don't include debugging
@@ -150,0 +150,0 @@ information. When using React in production mode with the automatic transform, this *must* be

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1108307

increased by0.25%

Lines of code

27932

increased by0.18%

No dependency changes