Add explicit .ts/.js extension to all imports in src

[nicolo-ribaudo]

Q	A
License	MIT

Native ESM (in Node.js, browsers, and pretty much everywhere else even if it's not required by ECMA-262) requires full relative URLs as import specifier.

So far, we avoided explicitly writing them in src files and instead we were adding them at build-time with our custom pluginAddImportExtension. This was mainly for two reasons:

• to minimize the diff when added support for compiling our repo to native ESM
• because TS required us to use .js extensions in imports (their reasoning is that the .ts files are going to be compiled to .js, and you want to import the compiled file.), and I hated it for various reasons:
  • the .js files don't always exist, for example when we bundle with rollup there is no intermediate .js file on disk
  • those relative paths would point to non-existent files, since the .js files are under lib and not src
  • intuitively, TS files import TS files and the compiled JS files import the compiled JS files

Now TypeScript provides an allowImportingTsExtensions option that allows us to write .ts in imports:

--allowImportingTsExtensions allows TypeScript files to import each other with a TypeScript-specific extension like .ts, .mts, or .tsx.

This flag is only allowed when --noEmit or --emitDeclarationOnly is enabled, since these import paths would not be resolvable at runtime in JavaScript output files. The expectation here is that your resolver (e.g. your bundler, a runtime, or some other tool) is going to make these imports between .ts files work.

This PR thus adds a very little plugin to our config to rewrite .ts to .js, as part of compiling TypeScript to JavaScript. I would eventually like to release this plugin and to add it (opt-in probably, behind an option, or at least disabled by default when caller is a bundler) to the TS preset.

Additionally, this PR has a performance benefit for Babel 7 because require() now uses the full relative path, and Node.js doesn't have to first resolve the file by trying three different alternatives (the require argument, then adding .js, then adding /index.js).

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/55313/

[JLHwung]

LGTM, @nicolo-ribaudo can you rebase?

[lmiller1990]

Random question - how come you opted for .ts as opposed to .js? My understanding is TypeScript and the language server will figure out what to do, either way. Is it just personal preference?

[nicolo-ribaudo]

Personal preference :) In the PR description I mentioned why I think .ts is better than .js.

EDIT: Actually, we bundle with Rollup and I don't think it can find imports to .ts files if the import ends with .js, at least not without a plugin.