feat(node-resolve): support .js imports in TypeScript (#480)

Author: tsugabloom

package.json

@@ -23,8 +23,8 @@
     "write-pkg": "^4.0.0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.14.0",
-    "@typescript-eslint/parser": "^2.14.0",
+    "@typescript-eslint/eslint-plugin": "^3.5.0",
+    "@typescript-eslint/parser": "^3.5.0",
     "ava": "^2.4.0",
     "chalk": "^2.4.2",
     "codecov-lite": "^0.3.1",
@@ -38,7 +38,6 @@
     "pnpm": "^4.13.0",
     "prettier": "^1.19.1",
     "prettier-plugin-package": "^0.3.1",
-    "rollup": "^2.0.0",
     "ts-node": "^8.5.4",
     "tsconfig-paths": "^3.9.0",
     "tslib": "^1.10.0",

packages/node-resolve/package.json

@@ -48,22 +48,23 @@
     "rollup": "^1.20.0||^2.0.0"
   },
   "dependencies": {
-    "@rollup/pluginutils": "^3.0.8",
-    "@types/resolve": "0.0.8",
+    "@rollup/pluginutils": "^3.1.0",
+    "@types/resolve": "1.17.1",
     "builtin-modules": "^3.1.0",
     "deep-freeze": "^0.0.1",
     "deepmerge": "^4.2.2",
     "is-module": "^1.0.0",
-    "resolve": "^1.14.2"
+    "resolve": "^1.17.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "@rollup/plugin-json": "^4.0.1",
+    "@babel/core": "^7.10.4",
+    "@babel/plugin-transform-typescript": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@rollup/plugin-babel": "^5.0.4",
+    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-json": "^4.1.0",
     "es5-ext": "^0.10.53",
     "rollup": "^2.12.0",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.1.0",
     "source-map": "^0.7.3",
     "string-capitalize": "^1.0.1"
   },

packages/node-resolve/src/index.js

@@ -191,6 +191,15 @@ export function nodeResolve(opts = {}) {
         importSpecifierList.push(`${importee}/`);
       }
 
+      // TypeScript files may import '.js' to refer to either '.ts' or '.tsx'
+      if (importer && importee.endsWith('.js')) {
+        for (const ext of ['.ts', '.tsx']) {
+          if (importer.endsWith(ext) && extensions.includes(ext)) {
+            importSpecifierList.push(importee.replace(/.js$/, ext));
+          }
+        }
+      }
+
       importSpecifierList.push(importee);
       resolveOptions = Object.assign(resolveOptions, customResolveOptions);
 

packages/node-resolve/test/browser.js

@@ -2,7 +2,7 @@ const { join } = require('path');
 
 const test = require('ava');
 const { rollup } = require('rollup');
-const commonjs = require('rollup-plugin-commonjs');
+const commonjs = require('@rollup/plugin-commonjs');
 
 const { testBundle } = require('../../../util/test');
 

packages/node-resolve/test/fixtures/ts-import-js-extension/import-ts-with-js-extension.ts

@@ -0,0 +1,4 @@
+import { main } from './main.js';
+// This resolves as main.ts and _not_ main.js, despite the extension
+const mainResult = main();
+export default mainResult;

packages/node-resolve/test/fixtures/ts-import-js-extension/main.ts

@@ -0,0 +1,11 @@
+// To make this very clearly TypeScript and not just JS with a TS extension
+type TestType = string | string[];
+interface Main {
+  (): string;
+  propertyCall(input?: TestType): TestType;
+}
+
+const main: Main = () => 'It works!';
+main.propertyCall = () => '';
+
+export { main };

packages/node-resolve/test/test.js

@@ -1,13 +1,13 @@
-const { join, resolve } = require('path');
+import { join, resolve } from 'path';
 
-const test = require('ava');
-const { rollup } = require('rollup');
-const babel = require('rollup-plugin-babel');
-const commonjs = require('rollup-plugin-commonjs');
+import test from 'ava';
+import { rollup } from 'rollup';
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
 
-const { getCode, getImports, testBundle } = require('../../../util/test');
+import { getCode, getImports, testBundle } from '../../../util/test';
 
-const { nodeResolve } = require('..');
+import { nodeResolve } from '..';
 
 process.chdir(join(__dirname, 'fixtures'));
 
@@ -51,6 +51,7 @@ test('finds a file inside a package directory', async (t) => {
     plugins: [
       nodeResolve(),
       babel({
+        babelHelpers: 'bundled',
         presets: [
           [
             '@babel/preset-env',
@@ -104,6 +105,25 @@ test('supports non-standard extensions', async (t) => {
   await testBundle(t, bundle);
 });
 
+test('supports JS extensions in TS when referring to TS imports', async (t) => {
+  const bundle = await rollup({
+    input: 'ts-import-js-extension/import-ts-with-js-extension.ts',
+    onwarn: () => t.fail('No warnings were expected'),
+    plugins: [
+      nodeResolve({
+        extensions: ['.js', '.ts']
+      }),
+      babel({
+        babelHelpers: 'bundled',
+        plugins: ['@babel/plugin-transform-typescript'],
+        extensions: ['.js', '.ts']
+      })
+    ]
+  });
+  const { module } = await testBundle(t, bundle);
+  t.is(module.exports, 'It works!');
+});
+
 test('ignores IDs with null character', async (t) => {
   const result = await nodeResolve().resolveId('\0someid', 'test.js');
   t.is(result, null);