From 0602017c38f75256353b2146b93f9752713cd235 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 22 Jul 2022 17:09:03 +0800
Subject: [PATCH] feat: supports cts and mts files (#9268)

---
 packages/vite/src/node/constants.ts          |  3 ++-
 packages/vite/src/node/optimizer/index.ts    |  4 ++--
 packages/vite/src/node/plugins/esbuild.ts    |  4 +++-
 packages/vite/src/node/utils.ts              |  2 +-
 playground/resolve/index.html                | 18 ++++++++++++++++++
 playground/resolve/ts-extension/hellocjs.cts |  1 +
 playground/resolve/ts-extension/hellomjs.mts |  1 +
 playground/resolve/ts-extension/index.ts     |  4 +++-
 8 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 playground/resolve/ts-extension/hellocjs.cts
 create mode 100644 playground/resolve/ts-extension/hellomjs.mts

diff --git a/packages/vite/src/node/constants.ts b/packages/vite/src/node/constants.ts
index 5a108652ef7ce6..b5fb126e97beaa 100644
--- a/packages/vite/src/node/constants.ts
+++ b/packages/vite/src/node/constants.ts
@@ -24,6 +24,7 @@ export const ESBUILD_MODULES_TARGET = [
 export const DEFAULT_EXTENSIONS = [
   '.mjs',
   '.js',
+  '.mts',
   '.ts',
   '.jsx',
   '.tsx',
@@ -41,7 +42,7 @@ export const DEFAULT_CONFIG_FILES = [
 
 export const JS_TYPES_RE = /\.(?:j|t)sx?$|\.mjs$/
 
-export const OPTIMIZABLE_ENTRY_RE = /\.(?:(m|c)?js|ts)$/
+export const OPTIMIZABLE_ENTRY_RE = /\.(?:[cm]?[jt]s)$/
 
 export const SPECIAL_QUERY_RE = /[\?&](?:worker|sharedworker|raw|url)\b/
 
diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts
index 2954accf1fc909..b544bc9f060d20 100644
--- a/packages/vite/src/node/optimizer/index.ts
+++ b/packages/vite/src/node/optimizer/index.ts
@@ -113,7 +113,7 @@ export interface DepOptimizationConfig {
    * List of file extensions that can be optimized. A corresponding esbuild
    * plugin must exist to handle the specific extension.
    *
-   * By default, Vite can optimize `.mjs`, `.js`, and `.ts` files. This option
+   * By default, Vite can optimize `.mjs`, `.js`, `.ts`, and `.mts` files. This option
    * allows specifying additional extensions.
    *
    * @experimental
@@ -1009,7 +1009,7 @@ function needsInterop(
   }
 
   if (output) {
-    // if a peer dependency used require() on a ESM dependency, esbuild turns the
+    // if a peer dependency used require() on an ESM dependency, esbuild turns the
     // ESM dependency's entry chunk into a single default export... detect
     // such cases by checking exports mismatch, and force interop.
     const generatedExports: string[] = output.exports
diff --git a/packages/vite/src/node/plugins/esbuild.ts b/packages/vite/src/node/plugins/esbuild.ts
index 6ed963a5d5981c..9a95c1be816580 100644
--- a/packages/vite/src/node/plugins/esbuild.ts
+++ b/packages/vite/src/node/plugins/esbuild.ts
@@ -78,6 +78,8 @@ export async function transformWithEsbuild(
 
     if (ext === 'cjs' || ext === 'mjs') {
       loader = 'js'
+    } else if (ext === 'cts' || ext === 'mts') {
+      loader = 'ts'
     } else {
       loader = ext as Loader
     }
@@ -170,7 +172,7 @@ export async function transformWithEsbuild(
 
 export function esbuildPlugin(options: ESBuildOptions = {}): Plugin {
   const filter = createFilter(
-    options.include || /\.(tsx?|jsx)$/,
+    options.include || /\.(m?ts|[jt]sx)$/,
     options.exclude || /\.js$/
   )
 
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 331f9ba0ceb667..4398ec70f56121 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -261,7 +261,7 @@ export const isDataUrl = (url: string): boolean => dataUrlRE.test(url)
 export const virtualModuleRE = /^virtual-module:.*/
 export const virtualModulePrefix = 'virtual-module:'
 
-const knownJsSrcRE = /\.((j|t)sx?|mjs|vue|marko|svelte|astro)($|\?)/
+const knownJsSrcRE = /\.((j|t)sx?|m[jt]s|vue|marko|svelte|astro)($|\?)/
 export const isJSRequest = (url: string): boolean => {
   url = cleanUrl(url)
   if (knownJsSrcRE.test(url)) {
diff --git a/playground/resolve/index.html b/playground/resolve/index.html
index bca49d55388e27..674819fc0195a6 100644
--- a/playground/resolve/index.html
+++ b/playground/resolve/index.html
@@ -52,6 +52,18 @@ <h2>
 </h2>
 <p class="tsx-extension">fail</p>
 
+<h2>
+  A ts module can import another ESM module using its corresponding mjs file
+  name
+</h2>
+<p class="mjs-extension">fail</p>
+
+<h2>
+  A ts module can import another CommonJS module using its corresponding cjs
+  file name
+</h2>
+<p class="cjs-extension">fail</p>
+
 <h2>Resolve file name containing dot</h2>
 <p class="dot">fail</p>
 
@@ -167,6 +179,12 @@ <h2>resolve package that contains # in path</h2>
   import { msgTsx as tsTsxExtensionMsg } from './ts-extension'
   text('.tsx-extension', tsTsxExtensionMsg)
 
+  import { msgCjs as tsCjsExtensionMsg } from './ts-extension'
+  text('.cjs-extension', tsCjsExtensionMsg)
+
+  import { msgMjs as tsMjsExtensionMsg } from './ts-extension'
+  text('.mjs-extension', tsMjsExtensionMsg)
+
   // filename with dot
   import { bar } from './util/bar.util'
   text('.dot', bar())
diff --git a/playground/resolve/ts-extension/hellocjs.cts b/playground/resolve/ts-extension/hellocjs.cts
new file mode 100644
index 00000000000000..8bfd9caa7407ca
--- /dev/null
+++ b/playground/resolve/ts-extension/hellocjs.cts
@@ -0,0 +1 @@
+export const msgCjs = '[success] use .cjs extension to import a CommonJS module'
diff --git a/playground/resolve/ts-extension/hellomjs.mts b/playground/resolve/ts-extension/hellomjs.mts
new file mode 100644
index 00000000000000..501637c83f1257
--- /dev/null
+++ b/playground/resolve/ts-extension/hellomjs.mts
@@ -0,0 +1 @@
+export const msgMjs = '[success] use .mjs extension to import an ESM module'
diff --git a/playground/resolve/ts-extension/index.ts b/playground/resolve/ts-extension/index.ts
index bdb326f8778e64..60612037e02fbe 100644
--- a/playground/resolve/ts-extension/index.ts
+++ b/playground/resolve/ts-extension/index.ts
@@ -1,5 +1,7 @@
 import { msg } from './hello.js'
 import { msgJsx } from './hellojsx.jsx'
 import { msgTsx } from './hellotsx.js'
+import { msgCjs } from './hellocjs.cjs'
+import { msgMjs } from './hellomjs.mjs'
 
-export { msg, msgJsx, msgTsx }
+export { msg, msgJsx, msgTsx, msgCjs, msgMjs }