Minimal TypeScript support option added

meta.js

@@ -69,6 +69,12 @@ module.exports = {
         },
       ],
     },
+    typescript: {
+      when: 'isNotTest',
+      type: 'confirm',
+      message: 'Use TypeScript as default language?',
+      default: false
+    },
     router: {
       when: 'isNotTest',
       type: 'confirm',
@@ -170,6 +176,8 @@ module.exports = {
     'test/unit/setup.js': "unit && runner === 'jest'",
     'test/e2e/**/*': 'e2e',
     'src/router/**/*': 'router',
+    'tsconfig.json': 'typescript',
+    'vue-shims.d.ts': 'typescript'
   },
   complete: function(data, { chalk }) {
     const green = chalk.green
@@ -193,4 +201,20 @@ module.exports = {
       printMessage(data, chalk)
     }
   },
+  metalsmith: function (metalsmith, opts, helpers) {
+    function renameJsSourcesToTs(files, metalsmith, done) {
+      // If typescript is enabled rename any .js files in src/ folder to .ts extension
+      if (metalsmith.metadata().typescript) {
+        Object.keys(files).forEach(filename => {
+          if (/^(src|test\\unit\\specs).*\.js$/.test(filename)) {
+          const renamed = filename.replace(/\.js$/, '.ts');
+          files[renamed] = files[filename]
+          delete files[filename]
+        }
+      })
+      }
+      done(null, files)
+    }
+    metalsmith.use(renameJsSourcesToTs)
+  }
 }

scenarios/full-karma-airbnb.json

@@ -4,6 +4,7 @@
   "description": "A Vue.js project",
   "author": "CircleCI",
   "build": "standalone",
+  "typescript": false,
   "router": false,
   "lint": true,
   "lintConfig": "airbnb",

scenarios/full.json

@@ -4,6 +4,7 @@
   "description": "A Vue.js project",
   "author": "CircleCI",
   "build": "runtime",
+  "typescript": false,
   "router": false,
   "lint": true,
   "lintConfig": "standard",

scenarios/minimal.json

@@ -4,6 +4,7 @@
   "description": "Testing the minimal template setup",
   "author": "CircleCI",
   "build": "standalone",
+  "typescript": false,
   "router": false,
   "lint": false,
   "lintConfig": "standard",

template/build/vue-loader.conf.js

@@ -18,5 +18,6 @@ module.exports = {
     source: 'src',
     img: 'src',
     image: 'xlink:href'
-  }
+  }{{#typescript}},
+  esModule: true{{/typescript}}
 }

template/build/webpack.base.conf.js

@@ -22,7 +22,7 @@ function resolve (dir) {
 module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
-    app: './src/main.js'
+    app: './src/main.{{#typescript}}ts{{else}}js{{/typescript}}'
   },
   output: {
     path: config.build.assetsRoot,
@@ -32,7 +32,7 @@ module.exports = {
       : config.dev.assetsPublicPath
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: [{{#typescript}}'.ts', {{/typescript}}'.js', '.vue', '.json'],
     alias: {
       {{#if_eq build "standalone"}}
       'vue$': 'vue/dist/vue.esm.js',
@@ -50,6 +50,15 @@ module.exports = {
         loader: 'vue-loader',
         options: vueLoaderConfig
       },
+      {{#typescript}}
+      {
+        test: /\.ts$/,
+          loader: "ts-loader",
+          options: {
+          appendTsSuffixTo: [/\.vue$/]
+        }
+      },
+      {{/typescript}}
       {
         test: /\.js$/,
         loader: 'babel-loader',

template/package.json

@@ -29,6 +29,18 @@
     "vue-router": "^3.0.1"{{/router}}
   },
   "devDependencies": {
+    {{#typescript}}
+    "ts-loader": "^2.3.7",
+    "typescript": "^2.5.3",
+    {{#if_eq runner "karma"}}
+    "@types/mocha": "^2.2.43",
+    "@types/chai": "^4.0.4",
+    {{/if_eq}}
+    {{#if_eq runner "jest"}}
+    "ts-jest": "^21.2.3",
+    "@types/jest": "^21.1.6",
+    {{/if_eq}}
+    {{/typescript}}
     {{#lint}}
     "babel-eslint": "^7.2.3",
     "eslint": "^4.15.0",

template/src/App.vue

@@ -9,17 +9,18 @@
   </div>
 </template>
 
-<script>
+<script{{#typescript}} lang="ts"{{/typescript}}>
+{{#typescript}}import Vue from 'vue'{{/typescript}}
 {{#unless router}}
-import HelloWorld from './components/HelloWorld'
+import HelloWorld from './components/HelloWorld{{#typescript}}.vue{{/typescript}}'
 
 {{/unless}}
-export default {
+export default {{#typescript}}Vue.extend({{/typescript}}{
   name: 'App'{{#router}}{{else}},
   components: {
     HelloWorld
   }{{/router}}
-}
+}{{#typescript}}){{/typescript}}
 </script>
 
 <style>

template/src/components/HelloWorld.vue

@@ -83,15 +83,17 @@
   </div>
 </template>
 
-<script>
-export default {
+<script{{#typescript}} lang="ts"{{/typescript}}>
+{{#typescript}}import Vue from 'vue'
+
+{{/typescript}}export default {{#typescript}}Vue.extend({{/typescript}}{
   name: 'HelloWorld',
   data () {
     return {
       msg: 'Welcome to Your Vue.js App'
     }
   }
-}
+}{{#typescript}}){{/typescript}}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

template/src/main.js

@@ -3,7 +3,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 {{/if_eq}}
 import Vue from 'vue'
-import App from './App'
+import App from './App{{#typescript}}.vue{{/typescript}}'
 {{#router}}
 import router from './router'
 {{/router}}

template/src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import HelloWorld from '@/components/HelloWorld{{#typescript}}.vue{{/typescript}}'
 
 Vue.use(Router)
 

template/test/unit/jest.conf.js

@@ -3,15 +3,18 @@ const path = require('path')
 module.exports = {
   rootDir: path.resolve(__dirname, '../../'),
   moduleFileExtensions: [
-    'js',
+    'js',{{#typescript}}
+    'ts',{{/typescript}}
     'json',
     'vue'
-  ],
+  ],{{#typescript}}
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",{{/typescript}}
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1'
   },
   transform: {
-    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',{{#typescript}}
+    '^.+\\.ts$': 'ts-jest',{{/typescript}}
     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
   },{{#e2e}}
   testPathIgnorePatterns: [

template/test/unit/specs/HelloWorld.spec.js

@@ -1,7 +1,8 @@
 import Vue from 'vue'
 import HelloWorld from '@/components/HelloWorld'
+{{#typescript}}{{#if_eq runner "karma"}}import {expect} from 'chai'
 
-describe('HelloWorld.vue', () => {
+{{/if_eq}}{{/typescript}}describe('HelloWorld.vue', () => {
   it('should render correct contents', () => {
     const Constructor = Vue.extend(HelloWorld)
     const vm = new Constructor().$mount()

template/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,{{#if_eq runner "jest"}}
+    "sourceMap": true,{{/if_eq}}
+    "lib": [
+      "dom",
+      "es5",
+      "es6",
+      "es2015.promise"
+    ]
+  },
+  "include": [
+    "./src/**/*.ts"
+  ],
+  "files" : [
+    "vue-shims.d.ts"
+  ]
+}

template/vue-shims.d.ts

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