[babel 8] Better file ext handling for TS and Flow presets

packages/babel-core/package.json

@@ -68,6 +68,7 @@
     "@babel/plugin-transform-flow-strip-types": "workspace:^",
     "@babel/plugin-transform-modules-commonjs": "workspace:^",
     "@babel/preset-env": "workspace:^",
+    "@babel/preset-typescript": "workspace:^",
     "@jridgewell/trace-mapping": "^0.3.17",
     "@types/convert-source-map": "^1.5.1",
     "@types/debug": "^4.1.0",

packages/babel-core/src/config/files/module-types.ts

@@ -73,12 +73,11 @@ function loadCtsDefault(filepath: string) {
           getTSPreset(filepath),
           {
             disallowAmbiguousJSXLike: true,
-            allExtensions: true,
             onlyRemoveTypeImports: true,
             optimizeConstEnums: true,
-            ...(!process.env.BABEL_8_BREAKING && {
-              allowDeclareFields: true,
-            }),
+            ...(process.env.BABEL_8_BREAKING
+              ? { ignoreExtensions: true }
+              : { allExtensions: true, allowDeclareFields: true }),
           },
         ],
       ],

packages/babel-core/test/config-ts.js

@@ -1,19 +1,29 @@
 import { loadPartialConfigSync } from "../lib/index.js";
 import path from "path";
+import { readFileSync } from "fs";
 import { fileURLToPath } from "url";
 import { createRequire } from "module";
 import semver from "semver";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
 
+let USE_ESM = false;
+try {
+  const type = readFileSync(
+    new URL("../../../.module-type", import.meta.url),
+    "utf-8",
+  ).trim();
+  USE_ESM = type === "module";
+} catch {}
+
 // We skip older versions of node testing for two reasons.
 // 1. ts-node does not support the old version of node.
 // 2. In the old version of node, jest has been registered in `require.extensions`, which will cause babel to disable the transforming as expected.
+// TODO: Make it work with USE_ESM.
+const shouldSkip = semver.lt(process.version, "12.0.0") || USE_ESM;
 
-const lessThanNode12 = semver.lt(process.version, "12.0.0");
-
-(lessThanNode12 ? describe : describe.skip)(
+(shouldSkip ? describe : describe.skip)(
   "@babel/core config with ts [dummy]",
   () => {
     it("dummy", () => {
@@ -22,72 +32,69 @@ const lessThanNode12 = semver.lt(process.version, "12.0.0");
   },
 );
 
-(lessThanNode12 ? describe.skip : describe)(
-  "@babel/core config with ts",
-  () => {
-    it("should work with simple .cts", () => {
-      const config = loadPartialConfigSync({
-        configFile: path.join(
-          __dirname,
-          "fixtures/config-ts/simple-cts/babel.config.cts",
-        ),
-      });
+(shouldSkip ? describe.skip : describe)("@babel/core config with ts", () => {
+  it("should work with simple .cts", () => {
+    const config = loadPartialConfigSync({
+      configFile: path.join(
+        __dirname,
+        "fixtures/config-ts/simple-cts/babel.config.cts",
+      ),
+    });
 
-      expect(config.options.targets).toMatchInlineSnapshot(`
+    expect(config.options.targets).toMatchInlineSnapshot(`
           Object {
             "node": "12.0.0",
           }
         `);
-    });
+  });
+
+  it("should throw with invalid .ts register", () => {
+    require.extensions[".ts"] = () => {
+      throw new Error("Not support .ts.");
+    };
+    try {
+      expect(() => {
+        loadPartialConfigSync({
+          configFile: path.join(
+            __dirname,
+            "fixtures/config-ts/invalid-cts-register/babel.config.cts",
+          ),
+        });
+      }).toThrow(/Unexpected identifier.*/);
+    } finally {
+      delete require.extensions[".ts"];
+    }
+  });
 
-    it("should throw with invalid .ts register", () => {
-      require.extensions[".ts"] = () => {
-        throw new Error("Not support .ts.");
-      };
-      try {
-        expect(() => {
-          loadPartialConfigSync({
-            configFile: path.join(
-              __dirname,
-              "fixtures/config-ts/invalid-cts-register/babel.config.cts",
-            ),
-          });
-        }).toThrow(/Unexpected identifier.*/);
-      } finally {
-        delete require.extensions[".ts"];
-      }
+  it("should work with ts-node", async () => {
+    const service = require("ts-node").register({
+      experimentalResolver: true,
+      compilerOptions: {
+        module: "CommonJS",
+      },
     });
+    service.enabled(true);
 
-    it("should work with ts-node", async () => {
-      const service = require("ts-node").register({
-        experimentalResolver: true,
-        compilerOptions: {
-          module: "CommonJS",
-        },
-      });
-      service.enabled(true);
+    try {
+      require(path.join(
+        __dirname,
+        "fixtures/config-ts/simple-cts-with-ts-node/babel.config.cts",
+      ));
 
-      try {
-        require(path.join(
+      const config = loadPartialConfigSync({
+        configFile: path.join(
           __dirname,
           "fixtures/config-ts/simple-cts-with-ts-node/babel.config.cts",
-        ));
-
-        const config = loadPartialConfigSync({
-          configFile: path.join(
-            __dirname,
-            "fixtures/config-ts/simple-cts-with-ts-node/babel.config.cts",
-          ),
-        });
+        ),
+      });
 
-        expect(config.options.targets).toMatchInlineSnapshot(`
+      expect(config.options.targets).toMatchInlineSnapshot(`
             Object {
               "node": "12.0.0",
             }
           `);
-      } finally {
-        service.enabled(false);
-      }
-    });
-  },
-);
+    } finally {
+      service.enabled(false);
+    }
+  });
+});

packages/babel-plugin-syntax-flow/src/index.ts

@@ -20,14 +20,16 @@ export default declare((api, options: FlowPluginOptions) => {
     name: "syntax-flow",
 
     manipulateOptions(opts, parserOpts) {
-      // If the file has already enabled TS, assume that this is not a
-      // valid Flowtype file.
-      if (
-        parserOpts.plugins.some(
-          p => (Array.isArray(p) ? p[0] : p) === "typescript",
-        )
-      ) {
-        return;
+      if (!process.env.BABEL_8_BREAKING) {
+        // If the file has already enabled TS, assume that this is not a
+        // valid Flowtype file.
+        if (
+          parserOpts.plugins.some(
+            p => (Array.isArray(p) ? p[0] : p) === "typescript",
+          )
+        ) {
+          return;
+        }
       }
 
       parserOpts.plugins.push(["flow", { all, enums }]);

packages/babel-plugin-syntax-jsx/src/index.ts

@@ -7,14 +7,19 @@ export default declare(api => {
     name: "syntax-jsx",
 
     manipulateOptions(opts, parserOpts) {
-      const { plugins } = parserOpts;
-      // If the Typescript plugin already ran, it will have decided whether
-      // or not this is a TSX file.
-      if (plugins.some(p => (Array.isArray(p) ? p[0] : p) === "typescript")) {
-        return;
+      if (!process.env.BABEL_8_BREAKING) {
+        // If the Typescript plugin already ran, it will have decided whether
+        // or not this is a TSX file.
+        if (
+          parserOpts.plugins.some(
+            p => (Array.isArray(p) ? p[0] : p) === "typescript",
+          )
+        ) {
+          return;
+        }
       }
 
-      plugins.push("jsx");
+      parserOpts.plugins.push("jsx");
     },
   };
 });

packages/babel-plugin-syntax-typescript/src/index.ts

@@ -1,19 +1,21 @@
 import { declare } from "@babel/helper-plugin-utils";
-import type { ParserPlugin } from "@babel/parser";
 
-function removePlugin(plugins: ParserPlugin[], name: string) {
-  const indices: number[] = [];
-  plugins.forEach((plugin, i) => {
-    const n = Array.isArray(plugin) ? plugin[0] : plugin;
+if (!process.env.BABEL_8_BREAKING) {
+  // eslint-disable-next-line no-var
+  var removePlugin = function (plugins: any[], name: string) {
+    const indices: number[] = [];
+    plugins.forEach((plugin, i) => {
+      const n = Array.isArray(plugin) ? plugin[0] : plugin;
 
-    if (n === name) {
-      indices.unshift(i);
-    }
-  });
+      if (n === name) {
+        indices.unshift(i);
+      }
+    });
 
-  for (const i of indices) {
-    plugins.splice(i, 1);
-  }
+    for (const i of indices) {
+      plugins.splice(i, 1);
+    }
+  };
 }
 
 export interface Options {
@@ -22,14 +24,21 @@ export interface Options {
   isTSX?: boolean;
 }
 
-export default declare(
-  (api, { disallowAmbiguousJSXLike, dts, isTSX }: Options) => {
-    api.assertVersion(7);
+export default declare((api, opts: Options) => {
+  api.assertVersion(7);
 
-    return {
-      name: "syntax-typescript",
+  const { disallowAmbiguousJSXLike, dts } = opts;
+
+  if (!process.env.BABEL_8_BREAKING) {
+    // eslint-disable-next-line no-var
+    var { isTSX } = opts;
+  }
 
-      manipulateOptions(opts, parserOpts) {
+  return {
+    name: "syntax-typescript",
+
+    manipulateOptions(opts, parserOpts) {
+      if (!process.env.BABEL_8_BREAKING) {
         const { plugins } = parserOpts;
         // If the Flow syntax plugin already ran, remove it since Typescript
         // takes priority.
@@ -39,20 +48,19 @@ export default declare(
         // in TS depends on the extensions, and is purely dependent on 'isTSX'.
         removePlugin(plugins, "jsx");
 
-        plugins.push(
-          ["typescript", { disallowAmbiguousJSXLike, dts }],
-          "classProperties",
-        );
-
-        if (!process.env.BABEL_8_BREAKING) {
-          // This is enabled by default since @babel/parser 7.1.5
-          plugins.push("objectRestSpread");
-        }
+        // These are now enabled by default in @babel/parser, but we push
+        // them for compat with older versions.
+        plugins.push("objectRestSpread", "classProperties");
 
         if (isTSX) {
           plugins.push("jsx");
         }
-      },
-    };
-  },
-);
+      }
+
+      parserOpts.plugins.push([
+        "typescript",
+        { disallowAmbiguousJSXLike, dts },
+      ]);
+    },
+  };
+});

packages/babel-plugin-transform-parameters/test/fixtures/parameters/flow-this-param/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["transform-parameters", "syntax-flow"]
+}

packages/babel-plugin-transform-parameters/test/fixtures/parameters/options.json

@@ -1,8 +1,6 @@
 {
   "plugins": [
     "proposal-class-properties",
-    "syntax-typescript",
-    "syntax-flow",
     "transform-parameters",
     "transform-block-scoping",
     "transform-spread",

packages/babel-plugin-transform-parameters/test/fixtures/parameters/preserve-types/options.json

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "transform-parameters",
+    "syntax-typescript",
+    "transform-block-scoping",
+    "transform-destructuring"
+  ]
+}

packages/babel-plugin-transform-parameters/test/fixtures/parameters/rest-ts-this-parameter/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["transform-parameters", "syntax-typescript"]
+}

packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/within-ts-module-block-babel-7/input.ts

@@ -0,0 +1,5 @@
+export namespace Namespaced {
+	export const Component = () => (
+		<div>Hello, world!</div>
+	);
+}

packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/within-ts-module-block-babel-7/options.json

@@ -0,0 +1,9 @@
+{
+  "BABEL_8_BREAKING": false,
+  "plugins": [
+    "transform-react-jsx-development",
+    ["syntax-typescript", { "isTSX": true }]
+  ],
+  "sourceType": "module",
+  "os": ["linux", "darwin"]
+}

packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/within-ts-module-block-babel-7/output.mjs

@@ -0,0 +1,11 @@
+var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/within-ts-module-block-babel-7/input.ts";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+export namespace Namespaced {
+  export const Component = () => /*#__PURE__*/_jsxDEV("div", {
+    children: "Hello, world!"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 3,
+    columnNumber: 3
+  }, this);
+}

packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/within-ts-module-block/options.json

@@ -1,7 +1,9 @@
 {
+  "BABEL_8_BREAKING": true,
   "plugins": [
     "transform-react-jsx-development",
-    ["syntax-typescript", { "isTSX": true }]
+    "syntax-typescript",
+    "syntax-jsx"
   ],
   "sourceType": "module",
   "os": ["linux", "darwin"]

packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/within-ts-module-block-babel-7/input.ts

@@ -0,0 +1,5 @@
+export namespace Namespaced {
+	export const Component = () => (
+		<div>Hello, world!</div>
+	);
+}