feat: add typescript support using typescript-build (#328)

* typescript support using typescript-build

* Remove trailing comma

* remove @types/node

* Add default / ts-runtime for none server + ts

* set lang="ts" when using typescript

* Remove ts-node

* @nuxt/typescript-build version to 0.1.11

* Update ts script tag

* Add typescript nuxt cookbook when completed

* Using tsconfig.json using always when selected ts

* only suggestion jsconfig.json when js users

* fix typo

* using js by default

* tsconfig / jsconfig settings

* add closing tag for ts

* Delete package-lock.json

* Update template/nuxt/pages/index.vue

Co-Authored-By: Kevin Marrec <[email protected]>

* support eslint when TypeScript.

* set false  tsRuntime when select TypeScript

* support jest with typescript

* Update saofile.js

* Update template/tsconfig.json

Co-Authored-By: Louis-Marie Michelin <[email protected]>

* Add language and runtime to prompts.js

* Update TypeScript relative package versions

* @nuxt/core needs eslint-module

* Update tsconfig.json

* Update README for TypeScript

* Install eslint-module when eslint && !typesciprt

* Update template/_package.json

Co-Authored-By: Kevin Marrec <[email protected]>

* Update template/_package.json

Co-Authored-By: Kevin Marrec <[email protected]>

* Update template/_package.json

Co-Authored-By: Kevin Marrec <[email protected]>

* Update template/_package.json

Co-Authored-By: Kevin Marrec <[email protected]>

* Update template/tsconfig.json

Co-Authored-By: Kevin Marrec <[email protected]>

* Update template/_package.json

Co-Authored-By: Kevin Marrec <[email protected]>

* Update template/_package.json

Co-Authored-By: Kevin Marrec <[email protected]>

* Update template/_package.json

Co-Authored-By: Kevin Marrec <[email protected]>

* Update .eslintignore

Add jest.config.js

* Update template/nuxt/nuxt.config.js

* Update template/nuxt/nuxt.config.js

* bump some packages versions

Co-authored-by: Kevin Marrec <[email protected]>
Co-authored-by: Louis-Marie Michelin <[email protected]>

Author: 3 people

.eslintignore

@@ -1,3 +1,4 @@
 _*.js
 template/nuxt/pages/index.vue
 template/frameworks/iview/pages/index.vue
+template/frameworks/jest/jest.config.js

README.md

@@ -36,6 +36,9 @@ yarn create nuxt-app <my-project>
 1. Choose the package manager
     - Yarn
     - Npm
+1. Choose programming language
+    - JavaScript
+    - TypeScript
 1. Choose your favorite UI framework:
     - None (feel free to add one later)
     - [Ant Design Vue](https://github.com/vueComponent/ant-design-vue)
@@ -58,6 +61,9 @@ yarn create nuxt-app <my-project>
     - [Hapi](https://github.com/hapijs/hapi)
     - [Koa](https://github.com/koajs/koa)
     - [Micro](https://github.com/zeit/micro)
+1. Choose the runtime for TypeScript (if you choose TypeScript)
+    - Default
+    - [@nuxt/typescript-runtime](https://github.com/nuxt/typescript)
 1. Choose Nuxt.js modules:
     - [Axios](https://github.com/nuxt-community/axios-module)
     - [Progressive Web App (PWA) Support](https://github.com/nuxt-community/pwa-module)

prompts.js

@@ -18,6 +18,16 @@ module.exports = [
     default: '{gitUser.name}',
     store: true
   },
+  {
+    name: 'language',
+    message: 'Choose programming language',
+    choices: [
+      { name: 'JavaScript', value: 'js' },
+      { name: 'TypeScript', value: 'ts' }
+    ],
+    type: 'list',
+    default: 'js'
+  },
   {
     name: 'pm',
     message: 'Choose the package manager',
@@ -66,6 +76,16 @@ module.exports = [
     ],
     default: 'none'
   },
+  {
+    name: 'runtime',
+    message: 'Choose the runtime for TypeScript',
+    type: 'list',
+    choices: [
+      { name: 'Default', value: 'none' },
+      { name: '@nuxt/typescript-runtime', value: 'ts-runtime' }
+    ],
+    when: answers => answers.language === 'ts' && answers.server === 'none'
+  },
   {
     name: 'features',
     message: 'Choose Nuxt.js modules',

saofile.js

@@ -8,6 +8,8 @@ const rootDir = __dirname
 module.exports = {
   prompts: require('./prompts'),
   templateData () {
+    const typescript = this.answers.language.includes('ts')
+    const tsRuntime = this.answers.runtime && this.answers.runtime.includes('ts-runtime')
     const pwa = this.answers.features.includes('pwa')
     const eslint = this.answers.linter.includes('eslint')
     const prettier = this.answers.linter.includes('prettier')
@@ -23,6 +25,8 @@ module.exports = {
     const edge = cliOptions.edge ? '-edge' : ''
 
     return {
+      typescript,
+      tsRuntime,
       pwa,
       eslint,
       prettier,
@@ -87,6 +91,7 @@ module.exports = {
           patterns: files
         })
       }
+
       actions.push({
         type: 'add',
         files: '**',
@@ -101,6 +106,7 @@ module.exports = {
         '_.eslintrc.js': 'linter.includes("eslint")',
         '_.prettierrc': 'linter.includes("prettier")',
         '_jsconfig.json': 'devTools.includes("jsconfig.json")',
+        'tsconfig.json': 'language.includes("ts")',
         'semantic.yml': 'devTools.includes("semantic-pull-requests")',
         '.env': 'features.includes("dotenv")',
         '_stylelint.config.js': 'linter.includes("stylelint")'
@@ -168,5 +174,9 @@ module.exports = {
       console.log(chalk`  {bold To test:}\n`)
       console.log(chalk`${cdMsg}\t{cyan ${pmRun} test}\n`)
     }
+
+    if (this.answers.language.includes('ts')) {
+      console.log(chalk`\n  {bold For TypeScript users.} \n\n  See : https://typescript.nuxtjs.org/cookbook/components/`)
+    }
   }
 }

template/_.eslintrc.js

@@ -9,11 +9,17 @@ module.exports = {
     use: true
   },
   <%_ } _%>
+  <%_ if (!typescript) { _%>
   parserOptions: {
     parser: 'babel-eslint'
   },
+  <%_ } _%>
   extends: [
+    <%_ if (typescript) { _%>
+    '@nuxtjs/eslint-config-typescript',
+    <%_ } else {_%>
     '@nuxtjs',
+    <%_ } _%>
     <%_ if (prettier) { _%>
     'prettier',
     'prettier/vue',

template/_package.json

@@ -6,10 +6,17 @@
   "private": true,
   "scripts": {
     <%_ if (server === 'none') { _%>
+      <%_ if (tsRuntime) { _%>
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "generate": "nuxt-ts generate",
+    "start": "nuxt-ts start",
+      <%_ } else { _%>
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
+      <%_ } _%>
     <%_ } else if (server === 'adonis') { _%>
     "serve:dev": "<%= pmRun %> dev",
     "dev": "nodemon --watch app --watch bootstrap --watch config --watch .env -x node server.js",
@@ -58,6 +65,9 @@
     <%_ } else { _%>
     "nuxt": "^2.0.0",
     <%_ } _%>
+    <%_ if (tsRuntime) { _%>
+    "@nuxt/typescript-runtime": "^0.4.0",
+    <%_ } _%>
     <%_ if (server !== 'none') { _%>
     "cross-env": "^5.2.0",
     <%_ } _%>
@@ -125,6 +135,9 @@
     <%_ if (server !== 'none') { _%>
     "nodemon": "^1.18.9",
     <%_ } _%>
+    <%_ if (typescript) { _%>
+    "@nuxt/typescript-build": "^0.6.0",
+    <%_ } _%>
     <%_ if (ui === 'tailwind') { _%>
     "@nuxtjs/tailwindcss": "^1.0.0",
     <%_ } else if (ui === 'vuetify') { _%>
@@ -133,7 +146,11 @@
     "framevuerk-builder": "^2.0.2",
     <%_ } _%>
     <%_ if (eslint) { _%>
+      <%_ if (typescript) { _%>
+    "@nuxtjs/eslint-config-typescript": "^1.0.0",
+      <%_ } else { _%>
     "@nuxtjs/eslint-config": "^2.0.0",
+    <%_ } _%>
     "@nuxtjs/eslint-module": "^1.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^6.1.0",
@@ -159,6 +176,9 @@
     "babel-jest": "^24.1.0",
     "jest": "^24.1.0",
     "vue-jest": "^4.0.0-0",
+    <%_ if (typescript) { _%>
+    "ts-jest": "^25.0.0",
+    <%_ } _%>
     <%_ } else if (test === 'ava') { _%>
     "ava": "^3.0.0",
     "@ava/babel": "^1.0.0",

template/frameworks/jest/jest.config.js

@@ -4,8 +4,18 @@ module.exports = {
     '^~/(.*)$': '<rootDir>/$1',
     '^vue$': 'vue/dist/vue.common.js'
   },
-  moduleFileExtensions: ['js', 'vue', 'json'],
+  moduleFileExtensions: [
+    <%_ if (typescript) { _%>
+    'ts',
+    <%_ } _%>
+    'js',
+    'vue',
+    'json'
+  ],
   transform: {
+    <%_ if (typescript) { _%>
+    "^.+\\.ts$": "ts-jest",
+    <%_ } _%>
     '^.+\\.js$': 'babel-jest',
     '.*\\.(vue)$': 'vue-jest'
   },

template/nuxt/nuxt.config.js

@@ -87,7 +87,10 @@ module.exports = {
   ** Nuxt.js dev-modules
   */
   buildModules: [
-    <%_ if (eslint) { _%>
+    <%_ if (typescript) {_%>
+    '@nuxt/typescript-build',
+    <%_ } _%>
+    <%_ if (eslint && !typescript) { _%>
     // Doc: https://github.com/nuxt-community/eslint-module
     '@nuxtjs/eslint-module',
     <%_ } _%>

template/nuxt/pages/index.vue

@@ -28,6 +28,18 @@
   </div>
 </template>
 
+<%_ if (typescript) { _%>
+<script lang="ts">
+import Vue from 'vue'
+import Logo from '~/components/Logo.vue'
+
+export default Vue.extend({
+  components: {
+    Logo
+  }
+})
+</script>
+<%_ } else { _%>
 <script>
 import Logo from '~/components/Logo.vue'
 
@@ -37,6 +49,7 @@ export default {
   }
 }
 </script>
+<%_ } _%>
 
 <style>
 <%_ if (ui === 'tailwind') { _%>

template/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": [
+      "esnext",
+      "esnext.asynciterable",
+      "dom"
+    ],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/types"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    ".nuxt",
+    "dist"
+  ]
+}