refactor: migrate codebase to typescript

jest.config.js

@@ -1,9 +1,19 @@
 module.exports = {
   testEnvironment: 'node',
+  transform: {
+    '^.+\\.ts$': 'ts-jest'
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: 'tsconfig.test.json',
+      diagnostics: {
+        ignoreCodes: [2345]
+      }
+    }
+  },
   collectCoverage: true,
-  coverageDirectory: './coverage',
   collectCoverageFrom: [
-    'packages/*/lib/**/*.js'
+    'packages/*/src/**/*.ts'
   ],
   coverageThreshold: {
     global: {
@@ -12,8 +22,5 @@ module.exports = {
       lines: 100,
       statements: 100
     }
-  },
-  transform: {
-    '^.+\\.js$': 'babel-jest'
   }
 }

package.json

@@ -5,6 +5,7 @@
   ],
   "scripts": {
     "dev": "nuxt-ts",
+    "build": "lerna run build",
     "lint": "eslint --ext .ts,.tsx,.js,.vue .",
     "lint:fix": "yarn lint --fix",
     "test": "yarn lint && yarn test:unit && yarn test:types",
@@ -23,6 +24,7 @@
     "jest": "latest",
     "lerna": "latest",
     "nuxt-edge": "latest",
+    "ts-jest": "latest",
     "typescript": "~3.6",
     "vue-property-decorator": "latest"
   }

packages/types/cli/index.d.ts

@@ -0,0 +1,8 @@
+import { Configuration } from '../config'
+
+type Command = any // TBD
+
+export interface Hooks {
+  config?(config: Configuration): void
+  'run:before'?(params: { argv: string [], command: Command, rootDir: string }): void
+}

packages/types/config/build.d.ts

@@ -30,6 +30,11 @@ interface NuxtBabelOptions extends Pick<TransformOptions, Exclude<keyof Transfor
   presets?: ((env: NuxtBabelPresetEnv, defaultPreset: [string, object]) => PluginItem[] | void) | PluginItem[] | null
 }
 
+interface Warning {
+  message: string
+  name: string
+}
+
 export interface NuxtConfigurationBuild {
   additionalExtensions?: string[]
   analyze?: BundleAnalyzerPlugin.Options | boolean
@@ -74,5 +79,6 @@ export interface NuxtConfigurationBuild {
   templates?: any
   terser?: TerserPluginOptions | boolean
   transpile?: (string | RegExp)[]
+  warningIgnoreFilters?: Array<(warn: Warning) => boolean>
   watch?: string[]
 }

packages/types/config/module.d.ts

@@ -5,10 +5,22 @@
  */
 
 import { Configuration as WebpackConfiguration } from 'webpack'
+import { NuxtConfigurationLoaders } from './build'
 import { Configuration as NuxtConfiguration } from '.'
 
+interface ExtendFunctionContext {
+  isClient: boolean
+  isDev: boolean
+  isLegacy: boolean
+  isModern: boolean
+  isServer: boolean
+  loaders: NuxtConfigurationLoaders
+}
+
+type ExtendFunction = (config: WebpackConfiguration, ctx: ExtendFunctionContext) => void
+
 interface ModuleThis {
-  extendBuild(fn: (config: WebpackConfiguration) => void): void
+  extendBuild(fn: ExtendFunction): void
   options: NuxtConfiguration
   nuxt: any // TBD
   [key: string]: any // TBD

packages/typescript-build/package.json

@@ -5,9 +5,15 @@
   "repository": "nuxt/typescript",
   "license": "MIT",
   "files": [
-    "lib"
+    "dist"
   ],
-  "main": "lib/module.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "yarn run clean && yarn compile",
+    "clean": "rm -rf dist",
+    "compile": "tsc"
+  },
   "dependencies": {
     "@nuxt/types": "0.2.15",
     "consola": "^2.10.1",

packages/typescript-build/src/index.ts

@@ -0,0 +1,81 @@
+import path from 'path'
+import consola from 'consola'
+import { Module } from '@nuxt/types'
+import { Options as TsLoaderOptions } from 'ts-loader'
+import { Options as TsCheckerOptions } from 'fork-ts-checker-webpack-plugin'
+import { RuleSetUseItem } from 'webpack'
+
+declare module '@nuxt/types' {
+  interface Configuration {
+    typescript?: Options
+  }
+}
+
+export interface Options {
+  ignoreNotFoundWarnings?: boolean
+  loaders?: {
+    ts?: TsLoaderOptions
+    tsx?: TsLoaderOptions
+  }
+  typeCheck?: TsCheckerOptions | boolean
+}
+
+const defaults: Options = {
+  ignoreNotFoundWarnings: false,
+  typeCheck: true
+}
+
+const tsModule: Module<Options> = function (moduleOptions) {
+  // Combine options
+  const options = Object.assign(
+    defaults,
+    this.options.typescript,
+    moduleOptions
+  )
+
+  // Extend Builder to handle .ts/.tsx files as routes and watch them
+  this.options.build!.additionalExtensions = ['ts', 'tsx']
+
+  if (options.ignoreNotFoundWarnings) {
+    this.options.build!.warningIgnoreFilters!.push(warn =>
+      warn.name === 'ModuleDependencyWarning' && /export .* was not found in /.test(warn.message)
+    )
+  }
+
+  this.extendBuild((config, { isClient, isModern }) => {
+    config.resolve!.extensions!.push('.ts', '.tsx')
+
+    const jsxRuleLoaders = config.module!.rules.find(r => (r.test as RegExp).test('.jsx'))!.use as RuleSetUseItem[]
+    const babelLoader = jsxRuleLoaders[jsxRuleLoaders.length - 1]
+
+    config.module!.rules.push(...(['ts', 'tsx'] as const).map(ext =>
+      ({
+        test: new RegExp(`\\.${ext}$`, 'i'),
+        use: [
+          babelLoader,
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              [`append${ext.charAt(0).toUpperCase() + ext.slice(1)}SuffixTo`]: [/\.vue$/],
+              ...(options.loaders && options.loaders[ext])
+            }
+          }
+        ]
+      })
+    ))
+
+    if (options.typeCheck && isClient && !isModern) {
+      const ForkTsCheckerWebpackPlugin = require(this.nuxt.resolver.resolveModule('fork-ts-checker-webpack-plugin'))
+      config.plugins!.push(new ForkTsCheckerWebpackPlugin(Object.assign({
+        vue: true,
+        tsconfig: path.resolve(this.options.rootDir!, 'tsconfig.json'),
+        tslint: false, // We recommend using ESLint so we set this option to `false` by default
+        formatter: 'codeframe',
+        logger: consola.withScope('nuxt:typescript')
+      }, options.typeCheck)))
+    }
+  })
+}
+
+export default tsModule

packages/typescript-build/test/module.test.js → packages/typescript-build/test/module.test.ts

@@ -4,12 +4,12 @@ import { Nuxt } from '@nuxt/core-edge'
 import { Builder } from '@nuxt/builder-edge'
 import { BundleBuilder } from '@nuxt/webpack-edge'
 
-import tsModule from '..'
+import tsModule from '../src'
 
 jest.setTimeout(60000)
 jest.mock('fork-ts-checker-webpack-plugin')
 
-const buildWithTsModule = async (config) => {
+const buildWithTsModule = async (config = {}) => {
   const nuxt = new Nuxt({
     build: {
       warningIgnoreFilters: []
@@ -28,6 +28,7 @@ describe('module', () => {
   let builder
 
   beforeEach(() => {
+    // @ts-ignore
     ForkTsCheckerWebpackPlugin.mockClear()
   })
 

packages/typescript-build/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "sourceMap": true
+  },
+  "include": [
+    "src/**/*"
+  ]
+}

packages/typescript-runtime/package.json

@@ -6,13 +6,18 @@
   "license": "MIT",
   "files": [
     "bin",
-    "lib"
+    "dist"
   ],
   "bin": {
     "nuxt-ts": "bin/nuxt-ts.js",
     "nuxts": "bin/nuxt-ts.js"
   },
-  "main": "lib/index.js",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "yarn run clean && yarn compile",
+    "clean": "rm -rf dist",
+    "compile": "tsc"
+  },
   "dependencies": {
     "@nuxt/types": "0.2.15",
     "ts-node": "^8.4.1",

packages/typescript-runtime/lib/index.js → packages/typescript-runtime/src/index.ts

@@ -1,10 +1,11 @@
-const path = require('path')
-const { register } = require('ts-node')
+import { resolve } from 'path'
+import { register } from 'ts-node'
+import { Hooks } from '@nuxt/types/cli'
 
-const hooks = {
+const hooks: Hooks = {
   'run:before' ({ argv, rootDir }) {
     const customPath = argv.find((_arg, index) => index > 0 && argv[index - 1] === '--tsconfig')
-    const tsConfigPath = path.resolve(customPath || rootDir, customPath && customPath.endsWith('.json') ? '' : 'tsconfig.json')
+    const tsConfigPath = resolve(customPath || rootDir, customPath && customPath.endsWith('.json') ? '' : 'tsconfig.json')
 
     register({
       project: tsConfigPath,
@@ -19,6 +20,6 @@ const hooks = {
   }
 }
 
-module.exports = {
+export {
   hooks
 }