Add Typescript compilation (vercel#7110)

imekinox · Apr 23, 2019 · c795583 · c795583
1 parent 7878347
commit c795583
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 6 deletions.
diff --git a/packages/next-server/server/config.js b/packages/next-server/server/config.js
@@ -14,7 +14,7 @@ const defaultConfig = {
   useFileSystemPublicRoutes: true,
   generateBuildId: () => null,
   generateEtags: true,
-  pageExtensions: ['jsx', 'js'],
+  pageExtensions: ['tsx', 'ts', 'jsx', 'js'],
   target: 'server',
   poweredByHeader: true,
   onDemandEntries: {

diff --git a/packages/next/build/babel/preset.ts b/packages/next/build/babel/preset.ts
@@ -44,7 +44,8 @@ type NextBabelPresetOptions = {
 
 type BabelPreset = {
   presets?: PluginItem[] | null,
-  plugins?: PluginItem[] | null
+  plugins?: PluginItem[] | null,
+  overrides?: any[]
 }
 
 // Taken from https://github.com/babel/babel/commit/d60c5e1736543a6eac4b549553e107a9ba967051#diff-b4beead8ad9195361b4537601cc22532R158
@@ -91,6 +92,14 @@ module.exports = (api: any, options: NextBabelPresetOptions = {}): BabelPreset =
       isProduction && [require('babel-plugin-transform-react-remove-prop-types'), {
         removeImport: true
       }]
-    ].filter(Boolean)
+    ].filter(Boolean),
+    overrides: [
+      {
+        test: /\.(tsx|ts)$/,
+        presets: [
+          require('@babel/preset-typescript')
+        ]
+      }
+    ]
   }
 }
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -236,12 +236,12 @@ export default async function getBaseWebpackConfig (dir: string, {dev = false, d
           }
         },
         config.experimental.ampBindInitData && !isServer && {
-          test: /\.(js|mjs|jsx)$/,
+          test: /\.(tsx|ts|js|mjs|jsx)$/,
           include: [path.join(dir, 'data')],
           use: 'next-data-loader'
         },
         {
-          test: /\.(js|mjs|jsx)$/,
+          test: /\.(tsx|ts|js|mjs|jsx)$/,
           include: [dir, /next-server[\\/]dist[\\/]lib/],
           exclude: (path: string) => {
             if (/next-server[\\/]dist[\\/]lib/.test(path)) {

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -39,6 +39,7 @@
     ]
   },
   "dependencies": {
+    "@babel/preset-typescript": "7.3.3",
     "@babel/core": "7.1.2",
     "@babel/plugin-proposal-class-properties": "7.1.0",
     "@babel/plugin-proposal-object-rest-spread": "7.0.0",
@@ -90,7 +91,6 @@
   },
   "devDependencies": {
     "@babel/parser": "7.2.0",
-    "@babel/preset-typescript": "7.3.3",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@taskr/watch": "1.1.0",

diff --git a/test/integration/basic/pages/typescript/hello.tsx b/test/integration/basic/pages/typescript/hello.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Hello(): JSX.Element {
+  return <div>Hello World</div>
+}
diff --git a/test/integration/basic/test/hmr.js b/test/integration/basic/test/hmr.js
@@ -81,6 +81,42 @@ export default (context, renderViaHTTP) => {
         }
       })
 
+      it('should detect the changes to typescript pages and display it', async () => {
+        let browser
+        try {
+          browser = await webdriver(context.appPort, '/typescript/hello')
+          await check(
+            () => getBrowserBodyText(browser),
+            /Hello World/
+          )
+
+          const pagePath = join(__dirname, '../', 'pages', 'typescript', 'hello.tsx')
+
+          const originalContent = readFileSync(pagePath, 'utf8')
+          const editedContent = originalContent.replace('Hello World', 'COOL page')
+
+          // change the content
+          writeFileSync(pagePath, editedContent, 'utf8')
+
+          await check(
+            () => getBrowserBodyText(browser),
+            /COOL page/
+          )
+
+          // add the original content
+          writeFileSync(pagePath, originalContent, 'utf8')
+
+          await check(
+            () => getBrowserBodyText(browser),
+            /Hello World/
+          )
+        } finally {
+          if (browser) {
+            await browser.close()
+          }
+        }
+      })
+
       it('should not reload unrelated pages', async () => {
         let browser
         try {

diff --git a/test/integration/basic/test/index.test.js b/test/integration/basic/test/index.test.js
@@ -13,6 +13,7 @@ import hmr from './hmr'
 import errorRecovery from './error-recovery'
 import dynamic from './dynamic'
 import processEnv from './process-env'
+import typescript from './typescript'
 
 const context = {}
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
@@ -37,5 +38,6 @@ describe('Basic Features', () => {
   dynamic(context, (p, q) => renderViaHTTP(context.appPort, p, q))
   hmr(context, (p, q) => renderViaHTTP(context.appPort, p, q))
   errorRecovery(context, (p, q) => renderViaHTTP(context.appPort, p, q))
+  typescript(context, (p, q) => renderViaHTTP(context.appPort, p, q))
   processEnv(context)
 })
diff --git a/test/integration/basic/test/typescript.js b/test/integration/basic/test/typescript.js
@@ -0,0 +1,17 @@
+/* eslint-env jest */
+import cheerio from 'cheerio'
+
+export default (context, render) => {
+  async function get$ (path, query) {
+    const html = await render(path, query)
+    return cheerio.load(html)
+  }
+  describe('Typescript', () => {
+    describe('default behavior', () => {
+      it('should render the page', async () => {
+        const $ = await get$('/typescript/hello')
+        expect($('body').text()).toMatch(/Hello World/)
+      })
+    })
+  })
+}