features selection

sao.js

@@ -42,6 +42,29 @@ module.exports = {
       ],
       default: 'none'
     },
+    modules: {
+      message: 'Choose modules to install',
+      type: 'checkbox',
+      choices: [
+        {
+          name: 'TypeScript',
+          value: "typescript"
+        },
+        {
+          name: 'Progressive Web App (PWA) Support',
+          value: 'pwa'
+        },
+        {
+          name: 'Linter / Formatter',
+          value: 'linter'
+        },
+        {
+          name: 'Prettier',
+          value: 'prettier'
+        }
+      ],
+      default: [],
+    },
     ui: {
       message: 'Use a custom UI framework',
       type: 'list',
@@ -73,18 +96,6 @@ module.exports = {
       choices: ['no', 'yes'],
       default: 'no'
     },
-    eslint: {
-      message: 'Use eslint',
-      type: 'list',
-      choices: ['no', 'yes'],
-      default: 'no'
-    },
-    prettier: {
-      message: 'Use prettier',
-      type: 'list',
-      choices: ['no', 'yes'],
-      default: 'no'
-    },
     author: {
       type: 'string',
       message: 'Author name',
@@ -98,8 +109,18 @@ module.exports = {
       default: 'npm'
     }
   },
-  data: {
-    edge: process.argv.includes('--edge')
+  data(answers) {
+    const typescript = answers.modules.includes('typescript')
+    const linter = answers.modules.includes('linter')
+    return {
+      nuxtDir: (answers.server === 'adonis') ? 'resources' : '',
+      typescript,
+      pwa: answers.modules.includes('pwa'),
+      eslint: !typescript && linter,
+      tslint: typescript && linter,
+      prettier: answers.modules.includes('prettier'),
+      edge: process.argv.includes('--edge')
+    }
   },
   filters: {
     'server/index-express.js': 'server === "express"',
@@ -116,25 +137,28 @@ module.exports = {
     'frameworks/tailwind/**': 'ui === "tailwind"',
     'frameworks/buefy/**': 'ui === "buefy"',
     'frameworks/iview/**': 'ui === "iview"',
-    '_.eslintrc.js': 'eslint === "yes"',
-    '.prettierrc': 'prettier === "yes"'
+    '_.eslintrc.js': 'eslint',
+    '_tslint.json': 'tslint',
+    '.prettierrc': 'prettier',
+    '_tsconfig.json': 'typescript',
+    'vue-shims.d.ts': 'typescript',
+    'nuxt/static/icon.png': 'pwa'
   },
   move(answers) {
     const moveable = {
       gitignore: '.gitignore',
       '_package.json': 'package.json',
       '_.eslintrc.js': '.eslintrc.js',
-      'server/index-*.js': 'server/index.js'
-    }
-    let nuxtDir
-    if (answers.server === 'adonis') {
-      nuxtDir = 'resources'
+      '_tslint.json': 'tslint.json',
+      '_tsconfig.json': 'tsconfig.json',
+      'server/index-*.js': 'server/index.js',
+      'vue-shims.d.ts': join(answers.nuxtDir, 'vue-shims.d.ts')
     }
     return Object.assign(
       moveable,
-      move('nuxt', nuxtDir),
+      move('nuxt', answers.nuxtDir),
       moveFramework(answers.server),
-      moveFramework(answers.ui, nuxtDir),
+      moveFramework(answers.ui, answers.nuxtDir),
       answers.server === 'adonis'
         ? {
             'server/index-*.js': 'server.js',

template/_.eslintrc.js

@@ -8,12 +8,12 @@ module.exports = {
     parser: 'babel-eslint'
   },
   extends: [
-    'plugin:vue/recommended'<% if (prettier === 'yes'){ %>,
+    'plugin:vue/recommended'<% if (prettier){ %>,
     'plugin:prettier/recommended'<% } %>
   ],
   // required to lint *.vue files
   plugins: [
-    'vue'<% if (prettier === 'yes'){ %>,
+    'vue'<% if (prettier){ %>,
     'prettier'<% } %>
   ],
   // add your custom rules here

template/_package.json

@@ -12,8 +12,9 @@
     "dev": "<% if (server === 'none') { %>nuxt<% } else { %>cross-env NODE_ENV=development nodemon server/index.js --watch server<% } %>",
     "build": "nuxt build",
     "start": "<% if (server === 'none') { %>nuxt start<% } else { %>cross-env NODE_ENV=production node server/index.js<% } %>",
-    "generate": "nuxt generate"<% } %><% if (eslint === 'yes') { %>,
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "generate": "nuxt generate"<% } %><% if (eslint) { %>,
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."<% } %><% if (tslint) { %>,
+    "lint": "tslint --format stylish -p ."<% } %><% if (eslint || tslint) { %>,
     "precommit": "npm run lint"<% } %>
   },
   "dependencies": {
@@ -46,20 +47,28 @@
     "ant-design-vue": "^1.1.4"<% } else if (ui === 'buefy') { %>,
     "nuxt-buefy": "^0.2.1"<% } else if (ui === 'iview') { %>,
     "iview": "3.1.2"<% } %><% if (axios === 'yes') { %>,
-    "@nuxtjs/axios": "^5.0.0"<% } %>
+    "@nuxtjs/axios": "^5.0.0"<% } %><% if (typescript) { %>,
+    "nuxt-property-decorator": "^1.2.0"<% } %><% if (pwa) { %>,
+    "@nuxtjs/pwa": "^2.6.0"<% } %>
   },
   "devDependencies": {
-    "nodemon": "^1.18.7"<% if (eslint === 'yes') { %>,
+    "nodemon": "^1.18.7"<% if (eslint) { %>,
     "babel-eslint": "^8.2.1",
     "eslint": "^5.0.1",
     "eslint-loader": "^2.0.0",
-    "eslint-plugin-vue": "^5.0.0-beta.3"<% } %><% if (prettier === 'yes') { %>,
+    "eslint-plugin-vue": "^5.0.0-beta.3"<% } %><% if (tslint) { %>,
+    "nuxt-tslint": "^1.1.0",
+    "tslint": "^5.11.0"<% } %><% if (prettier) { %>,
+    "prettier": "1.14.3"<% } %><% if (eslint && prettier) { %>,
     "eslint-config-prettier": "^3.1.0",
-    "eslint-plugin-prettier": "2.6.2",
-    "prettier": "1.14.3"<% } %><% if (ui === 'tailwind') { %>,
+    "eslint-plugin-prettier": "2.6.2"<% } %><% if (tslint && prettier) { %>,
+    "tslint-config-prettier": "^1.15.0"<% } %><% if (ui === 'tailwind') { %>,
     "autoprefixer": "^8.6.4",
     "tailwindcss": "^0.7.0"<% } else if (ui === 'vuetify') { %>,
     "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.2"<% } %>
+    "stylus-loader": "^3.0.2"<% } %><% if (typescript) { %>,
+    "nuxt-ts": "^0.1.0",
+    "ts-loader": "^5.3.1",
+    "typescript": "^3.2.2"<% } %>
   }
 }

template/_tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"]
+    },
+    "sourceMap": true,
+    "noUnusedLocals": true,
+    "experimentalDecorators": true
+  },
+  "include": [
+    "<% if (nuxtDir) { %><%= nuxtDir %>/<% } %>**/*.ts",
+    "<% if (nuxtDir) { %><%= nuxtDir %>/<% } %>**/*.vue"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

template/_tslint.json

@@ -0,0 +1,16 @@
+{
+  "extends": ["tslint:latest"<% if (tslint && prettier) { %>, "tslint-config-prettier"<% } %>],
+  "defaultSeverity": "warn",
+  "linterOptions": {
+    "exclude": ["node_modules/**"]
+  },
+  "rules": {
+    "no-submodule-imports": [true, "@", "~"],
+    "no-implicit-dependencies": [true, ["@", "~"]],
+    "interface-name": [true, "never-prefix"],
+    "variable-name": false,
+    "ban-types": false,
+    "member-ordering": false,
+    "curly": false
+  }
+}

template/gitignore

@@ -79,3 +79,6 @@ dist
 
 # IDE
 .idea
+
+# Service worker
+sw.*

template/nuxt/nuxt.config.js

@@ -2,6 +2,7 @@
 const resolve = require('path').resolve
 <% } else { %>const pkg = require('./package')
 <% } %>
+
 <% if (ui === 'vuetify') { %>
 const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
 <% } %>
@@ -67,7 +68,10 @@ module.exports = {
     // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
     '@nuxtjs/bulma'<% } %><% if (ui === 'buefy') { %>,
     // Doc: https://buefy.github.io/#/documentation
-    'nuxt-buefy'<% } %>
+    'nuxt-buefy'<% } %><% if (typescript) { %>,
+    'nuxt-ts'<% } %><% if (tslint) { %>,
+    'nuxt-tslint'<% } %><% if (pwa) { %>,
+    '@nuxtjs/pwa'<% } %>
   ],<% if (axios === 'yes') { %>
   /*
   ** Axios module configuration
@@ -99,7 +103,7 @@ module.exports = {
     ** You can extend webpack config here
     */
     extend(config, ctx) {
-      <% if (eslint === 'yes') { %>// Run ESLint on save
+      <% if (eslint) { %>// Run ESLint on save
       if (ctx.isDev && ctx.isClient) {
         config.module.rules.push({
           enforce: 'pre',

template/nuxt/pages/index.vue

@@ -24,14 +24,21 @@
   </section>
 </template>
 
-<script>
+<script <% if (typescript) { %>lang="ts"<% } %>>
+<% if (typescript) { %>import { Component, Vue } from 'nuxt-property-decorator'<% } %>
 import Logo from '~/components/Logo.vue'
 
+<% if (typescript) { %>@Component({
+  components: {
+    Logo
+  }
+})
+export default class Index extends Vue {}<% } else { %>
 export default {
   components: {
     Logo
   }
-}
+}<% } %>
 </script>
 
 <style>

template/vue-shims.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

test/index.test.js

@@ -63,7 +63,7 @@ test('use axios', async t => {
 
 test('use eslint', async t => {
   await verifyPkg(t, {
-    eslint: 'yes'
+    modules: ['linter']
   })
 })
 
@@ -75,6 +75,36 @@ test('use yarn', async t => {
 
 test('use prettier', async t => {
   await verifyPkg(t, {
-    prettier: 'yes'
+    modules: ['prettier']
+  })
+})
+
+test('use eslint prettier', async t => {
+  await verifyPkg(t, {
+    modules: ['linter', 'prettier']
+  })
+})
+
+test('use typescript', async t => {
+  await verifyPkg(t, {
+    modules: ['typescript']
+  })
+})
+
+test('use tslint', async t => {
+  await verifyPkg(t, {
+    modules: ['typescript', 'linter']
+  })
+})
+
+test('use tslint prettier', async t => {
+  await verifyPkg(t, {
+    modules: ['typescript', 'linter', 'prettier']
+  })
+})
+
+test('use pwa', async t => {
+  await verifyPkg(t, {
+    modules: ['pwa']
   })
 })