refactor(ts): only generate tsconfig.json if missing (#5356) (#5367)

Co-authored-by: SAWADA Takayoshi <sawadasuiren@gmail.com>

examples/pm2-typescript/tsconfig.json

@@ -1 +1,32 @@
-{}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": [
+      "esnext",
+      "esnext.asynciterable",
+      "dom"
+    ],
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/vue-app"
+    ]
+  }
+}

examples/typescript-eslint/tsconfig.json

@@ -1 +1,32 @@
-{}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": [
+      "esnext",
+      "esnext.asynciterable",
+      "dom"
+    ],
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/vue-app"
+    ]
+  }
+}

examples/typescript-tsx/tsconfig.json

@@ -1,6 +1,34 @@
 {
   "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": [
+      "esnext",
+      "esnext.asynciterable",
+      "dom"
+    ],
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "allowJs": true,
     "jsx": "preserve",
-    "noImplicitThis": true
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/vue-app"
+    ]
   }
 }

examples/typescript-vuex/tsconfig.json

@@ -1 +1,32 @@
-{}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": [
+      "esnext",
+      "esnext.asynciterable",
+      "dom"
+    ],
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/vue-app"
+    ]
+  }
+}

examples/typescript/tsconfig.json

@@ -1 +1,32 @@
-{}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": [
+      "esnext",
+      "esnext.asynciterable",
+      "dom"
+    ],
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/vue-app"
+    ]
+  }
+}

packages/cli/src/utils/index.js

@@ -101,6 +101,10 @@ export function showBanner(nuxt) {
   // Running mode
   titleLines.push(`Running in ${nuxt.options.dev ? chalk.bold.blue('development') : chalk.bold.green('production')} mode (${chalk.bold(nuxt.options.mode)})`)
 
+  if (nuxt.options._typescript) {
+    titleLines.push(`TypeScript support is ${chalk.green.bold('enabled')}`)
+  }
+
   // https://nodejs.org/api/process.html#process_process_memoryusage
   const { heapUsed, rss } = process.memoryUsage()
   titleLines.push(`Memory usage: ${chalk.bold(prettyBytes(heapUsed))} (RSS: ${prettyBytes(rss)})`)

packages/cli/src/utils/typescript.js

@@ -1,34 +1,16 @@
 import path from 'path'
-import { existsSync } from 'fs'
-import chalk from 'chalk'
 import consola from 'consola'
-import { warningBox } from './formatting'
-
-const dependencyNotFoundMessage =
-`Please install @nuxt/typescript and rerun the command
-
-${chalk.bold('Using yarn')}
-yarn add -D @nuxt/typescript
-
-${chalk.bold('Using npm')}
-npm install -D @nuxt/typescript`
 
 export async function detectAndSetupTypeScriptSupport(rootDir, options = {}) {
-  const tsConfigPath = path.resolve(rootDir, 'tsconfig.json')
-
-  if (!existsSync(tsConfigPath)) {
-    return false
-  }
-
-  consola.info(`${chalk.bold.blue('tsconfig.json')} found, enabling TypeScript runtime support`)
-
   try {
     const { setup } = require('@nuxt/typescript')
-    await setup(tsConfigPath, options)
+
+    consola.info('Initializing typeScript support')
+    await setup(path.resolve(rootDir, 'tsconfig.json'), options)
+    consola.success('TypeScript support enabled')
   } catch (e) {
     if (e.code === 'MODULE_NOT_FOUND') {
-      process.stdout.write(warningBox(dependencyNotFoundMessage, chalk.yellow('An external official dependency is needed to enable TS support')))
+      return false
-      process.exit(1)
     } else {
       throw (e)
     }

packages/typescript/package.json

@@ -21,9 +21,9 @@
     "@types/webpack-bundle-analyzer": "^2.13.1",
     "@types/webpack-dev-middleware": "^2.0.2",
     "@types/webpack-hot-middleware": "^2.16.5",
+    "consola": "^2.5.7",
     "fork-ts-checker-webpack-plugin": "^1.0.0",
     "fs-extra": "^7.0.1",
-    "lodash": "^4.17.11",
     "ts-loader": "^5.3.3",
     "ts-node": "^8.0.3",
     "typescript": "^3.3.4000"

packages/typescript/src/index.js

@@ -1,6 +1,6 @@
-import { readJSON, writeJSON } from 'fs-extra'
+import { existsSync, writeJSON } from 'fs-extra'
 import { register } from 'ts-node'
-import defaultsDeep from 'lodash/defaultsDeep'
+import consola from 'consola'
 
 export const defaultTsJsonConfig = {
   compilerOptions: {
@@ -43,8 +43,11 @@ export async function setup(tsConfigPath, options = {}) {
   }
   _setup = true
 
-  const config = await readJSON(tsConfigPath)
+  // Only create a default `tsconfig.json` if it doesn't exist
-  await writeJSON(tsConfigPath, defaultsDeep(config, defaultTsJsonConfig), { spaces: 2 })
+  if (!existsSync(tsConfigPath)) {
+    consola.info(`Generating tsconfig.json (${tsConfigPath})`)
+    await writeJSON(tsConfigPath, defaultTsJsonConfig, { spaces: 2 })
+  }
 
   // https://github.com/TypeStrong/ts-node
   register({

packages/typescript/test/setup.test.js

@@ -1,5 +1,5 @@
 import { resolve } from 'path'
-import { mkdirp, readJSON, remove, writeJSON } from 'fs-extra'
+import { mkdirp, readJSON, remove } from 'fs-extra'
 import { register } from 'ts-node'
 import { defaultTsJsonConfig, setup as setupTypeScript } from '@nuxt/typescript'
 
@@ -12,11 +12,10 @@ describe('typescript setup', () => {
   beforeAll(async () => {
     // We're assuming that rootDir provided to setupTypeScript is existing so we create the tested one
     await mkdirp(rootDir)
-    await writeJSON(tsConfigPath, {})
     await setupTypeScript(tsConfigPath)
   })
 
-  test('tsconfig.json has been updated with defaults', async () => {
+  test('tsconfig.json has been created with defaults', async () => {
     expect(await readJSON(tsConfigPath)).toEqual(defaultTsJsonConfig)
   })
 

test/fixtures/basic/pages/jsx-link.js

@@ -1,4 +1,4 @@
-import renderLink from './jsx-link.jsx'
+import renderLink from './jsx-link2.jsx'
 
 export default {
   render: renderLink