feat: simple typescript support

src/node/server.ts

@@ -10,6 +10,7 @@ import { serveStaticPlugin } from './serverPluginServeStatic'
 import { jsonPlugin } from './serverPluginJson'
 import { cssPlugin } from './serverPluginCss'
 import { esbuildPlugin } from './serverPluginEsbuild'
+import { tsPlugin } from './serverPluginTypeScript'
 
 export { Resolver }
 
@@ -45,6 +46,7 @@ const internalPlugins: Plugin[] = [
   jsonPlugin,
   cssPlugin,
   hmrPlugin,
+  tsPlugin,
   serveStaticPlugin
 ]
 

src/node/serverPluginTypeScript.ts

@@ -0,0 +1,57 @@
+import { Plugin } from './server'
+import { readBody, isImportRequest } from './utils'
+import { parse as parseImports } from 'es-module-lexer'
+import MagicString from 'magic-string'
+import { transform } from './esbuildService'
+
+export const tsPlugin: Plugin = ({ root, app, watcher }) => {
+  app.use(async (ctx, next) => {
+    await next()
+    if (ctx.path.endsWith('.ts') && isImportRequest(ctx) && ctx.body) {
+      ctx.type = 'js'
+      ctx.body = await compileTs(
+        (await readBody(ctx.body)) as string,
+        ctx.path,
+        root
+      )
+    }
+  })
+
+  watcher.on('change', (file) => {
+    if (file.endsWith('.ts')) {
+      watcher.handleJSReload(file)
+    }
+  })
+}
+
+export async function compileTs(
+  source: string,
+  path: string,
+  root: string
+): Promise<string> {
+  const { code } = await transform(source, path, { loader: 'ts' })
+  return renameTsImport(code)
+}
+
+// import './a' => import './a.ts
+function renameTsImport(source: string) {
+  try {
+    const [imports] = parseImports(source)
+    const s = new MagicString(source)
+    let hasReplaced = false
+    imports.forEach(({ s: start, e: end, d: dynamicIndex }) => {
+      let id = source.substring(start, end)
+      if (!/\.(css|json|js|vue)$/.test(id)) {
+        s.overwrite(start, end, `${id}.ts`)
+        hasReplaced = true
+      }
+    })
+    return hasReplaced ? s.toString() : source
+  } catch (e) {
+    console.error(
+      `[vite] Error: typescript module imports rename failed for ${source}.\n`,
+      e
+    )
+    return source
+  }
+}

test/fixtures/Comp.vue

@@ -2,14 +2,16 @@
   <button @click="count++">{{ count }}</button>
   <Child/>
   <Json/>
+  <Ts/>
 </template>
 
 <script>
 import Child from './Child.vue'
 import Json from './Json.vue'
+import Ts from './Ts.vue'
 
 export default {
-  components: { Child, Json },
+  components: { Child, Json, Ts },
   setup() {
     return {
       count: 0

test/fixtures/Ts.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="ts">
+    {{data}}
+  </div>
+</template>
+
+<script lang="ts">
+  import {data} from './data'
+  export default {
+    setup() {
+      return {data}
+    }
+  }
+</script>

test/fixtures/data.ts

@@ -0,0 +1 @@
+export const data: number = 1

test/test.js

@@ -105,6 +105,20 @@ describe('vite', () => {
     })
   })
 
+  test('ts', async () => {
+    const Ts = await page.$('.ts')
+    expect(await Ts.evaluate((e) => e.textContent)).toBe('1')
+  })
+
+  test('ts hmr', async () => {
+    const TsPath = path.join(tempDir, 'data.ts')
+    const content = await fs.readFile(TsPath, 'utf-8')
+    await fs.writeFile(TsPath, content.replace('1', '2'))
+
+    const Ts = await page.$('.ts')
+    testByPolling('2', () => Ts.evaluate((e) => e.textContent))
+  })
+
   // TODO test node_modules resolution
 })