Feat: Generate typescript package types and tests

prompts.js

@@ -137,7 +137,7 @@ module.exports = [
     message: 'Choose development tools',
     type: 'checkbox',
     choices: [
-      { name: 'jsconfig.json (Recommended for VS Code)', value: 'jsconfig.json' },
+      { name: 'jsconfig.json (Recommended for VS Code if you\'re not using typescript)', value: 'jsconfig.json' },
       { name: 'Semantic Pull Requests', value: 'semantic-pull-requests' }
     ],
     default: []

saofile.js

@@ -7,9 +7,10 @@ const rootDir = __dirname
 
 module.exports = {
   prompts: require('./prompts'),
-  templateData () {
+  templateData() {
     const typescript = this.answers.language.includes('ts')
-    const tsRuntime = this.answers.runtime && this.answers.runtime.includes('ts-runtime')
+    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')
@@ -24,7 +25,18 @@ module.exports = {
     const { cliOptions = {} } = this.sao.opts
     const edge = cliOptions.edge ? '-edge' : ''
 
+    const ifTrue = (condition, content, elseContent) => condition ? content : elseContent || ''
+    const generateComponent = (imports, componentOptions) => {
+      return `
+<script ${ifTrue(typescript, `lang="ts"`)}>
+${ifTrue(typescript, `import Vue from 'vue'`)}
+${ifTrue(!!imports, imports)}
+export default ${ifTrue(typescript, 'Vue.extend(' + componentOptions + ')', componentOptions)}
+</script>`
+    }
+
     return {
+      generateComponent,
       typescript,
       tsRuntime,
       pwa,
@@ -40,24 +52,30 @@ module.exports = {
       dotenv
     }
   },
-  actions () {
+  actions() {
     const validation = validate(this.answers.name)
-    validation.warnings && validation.warnings.forEach((warn) => {
-      console.warn('Warning:', warn)
-    })
-    validation.errors && validation.errors.forEach((err) => {
-      console.error('Error:', err)
-    })
+    validation.warnings &&
+      validation.warnings.forEach((warn) => {
+        console.warn('Warning:', warn)
+      })
+    validation.errors &&
+      validation.errors.forEach((err) => {
+        console.error('Error:', err)
+      })
     validation.errors && validation.errors.length && process.exit(1)
 
-    const actions = [{
-      type: 'add',
-      files: '**',
-      templateDir: 'template/nuxt',
-      filters: {
-        'static/icon.png': 'features.includes("pwa")'
+    const actions = [
+      {
+        type: 'add',
+        files: '**',
+        templateDir: 'template/nuxt',
+        filters: {
+          'static/icon.png': 'features.includes("pwa")',
+          'nuxt.config.ts': 'runtime && runtime.includes("ts-runtime")',
+          'nuxt.config.js': '!runtime || !runtime.includes("ts-runtime")'
+        }
       }
-    }]
+    ]
 
     if (this.answers.ui !== 'none') {
       actions.push({
@@ -107,6 +125,7 @@ module.exports = {
         '_.prettierrc': 'linter.includes("prettier")',
         '_jsconfig.json': 'devTools.includes("jsconfig.json")',
         'tsconfig.json': 'language.includes("ts")',
+        'vue-shims.d.ts': 'language.includes("ts")',
         'semantic.yml': 'devTools.includes("semantic-pull-requests")',
         '.env': 'features.includes("dotenv")',
         '_stylelint.config.js': 'linter.includes("stylelint")'
@@ -129,7 +148,7 @@ module.exports = {
     actions.push({
       type: 'modify',
       files: 'package.json',
-      handler (data) {
+      handler(data) {
         delete data.scripts['']
         delete data.dependencies['']
         delete data.devDependencies['']
@@ -139,7 +158,7 @@ module.exports = {
 
     return actions
   },
-  async completed () {
+  async completed() {
     this.gitInit()
 
     await this.npmInstall({ npmClient: this.answers.pm })
@@ -161,7 +180,9 @@ module.exports = {
     const cdMsg = isNewFolder ? chalk`\t{cyan cd ${relativeOutFolder}}\n` : ''
     const pmRun = this.answers.pm === 'yarn' ? 'yarn' : 'npm run'
 
-    console.log(chalk`\n🎉  {bold Successfully created project} {cyan ${this.answers.name}}\n`)
+    console.log(
+      chalk`\n🎉  {bold Successfully created project} {cyan ${this.answers.name}}\n`
+    )
 
     console.log(chalk`  {bold To get started:}\n`)
     console.log(chalk`${cdMsg}\t{cyan ${pmRun} dev}\n`)
@@ -176,7 +197,9 @@ module.exports = {
     }
 
     if (this.answers.language.includes('ts')) {
-      console.log(chalk`\n  {bold For TypeScript users.} \n\n  See : https://typescript.nuxtjs.org/cookbook/components/`)
+      console.log(
+        chalk`\n  {bold For TypeScript users.} \n\n  See : https://typescript.nuxtjs.org/cookbook/components/`
+      )
     }
   }
 }

template/_package.json

@@ -33,7 +33,7 @@
     "prepublish": "<%= pmRun %> build:framevuerk",
     <%_ } _%>
     <%_ if (eslint) { _%>
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "lint": "eslint --ext .js,.vue<%= typescript ? ",ts" : "" %> --ignore-path .gitignore .",
     <%_ } _%>
     <%_ if (test === 'ava') { _%>
     "test": "<%= test %>",
@@ -47,7 +47,7 @@
   <%_ if (lintStaged) { _%>
   "lint-staged": {
     <%_ if (eslint) { _%>
-    "*.{js,vue}": "<%= pmRun %> lint"<%= stylelint ? "," : "" %>
+    "*.{js,vue<%= typescript ? ",ts" : "" %>}": "<%= pmRun %> lint"<%= stylelint ? "," : "" %>
     <%_ } _%>
     <%_ if (stylelint) { _%>
     "*.{css,vue}": "stylelint"
@@ -177,6 +177,7 @@
     "jest": "^24.1.0",
     "vue-jest": "^4.0.0-0",
     <%_ if (typescript) { _%>
+    "@types/jest": "^24.1.0",
     "ts-jest": "^25.0.0",
     <%_ } _%>
     <%_ } else if (test === 'ava') { _%>

template/frameworks/buefy/components/Card.vue

@@ -26,8 +26,7 @@
   </div>
 </template>
 
-<script>
-export default {
+<%- generateComponent('', `{
   props: {
     title: {
       type: String,
@@ -38,5 +37,4 @@ export default {
       required: true
     }
   }
-}
-</script>
+}`) %>

template/frameworks/buefy/layouts/default.vue

@@ -52,8 +52,7 @@
   </div>
 </template>
 
-<script>
-export default {
+<%- generateComponent('', `{
   data () {
     return {
       items: [
@@ -70,5 +69,4 @@ export default {
       ]
     }
   }
-}
-</script>
+}`) %>

template/frameworks/buefy/pages/index.vue

@@ -40,14 +40,11 @@
   </section>
 </template>
 
-<script>
-import Card from '~/components/Card'
-
-export default {
+<%- generateComponent(
+  `import Card from '~/components/Card'`, `{
   name: 'HomePage',
 
   components: {
     Card
   }
-}
-</script>
+}`) %>

template/frameworks/framevuerk/components/FramevuerkLogo.vue

@@ -26,8 +26,7 @@
   </div>
 </template>
 
-<script>
-export default {
+<%- generateComponent('',`{
   data () {
     return {
       isReady: false
@@ -38,8 +37,7 @@ export default {
       this.isReady = true
     }, 1000)
   }
-}
-</script>
+}`) %>
 
 <style scoped>
 .logo {

template/frameworks/framevuerk/pages/index.vue

@@ -133,11 +133,10 @@
   </fvMain>
 </template>
 
-<script>
-import Logo from '~/components/Logo.vue'
-import FramevuerkLogo from '~/components/FramevuerkLogo.vue'
 
-export default {
+<%- generateComponent(
+  `import Logo from '~/components/Logo.vue'
+import FramevuerkLogo from '~/components/FramevuerkLogo.vue'`, `{
   components: {
     Logo,
     FramevuerkLogo
@@ -169,9 +168,7 @@ export default {
       })
     }
   }
-}
-</script>
-
+}`) %>
 <style scoped>
 .content {
   margin: 0 auto;

template/frameworks/iview/pages/index.vue

@@ -23,14 +23,12 @@
   </div>
 </template>
 
-<script>
-import Logo from '~/components/Logo.vue'
-export default {
+<%- generateComponent(
+`import Logo from '~/components/Logo.vue'`,`{
   components: {
     Logo
   }
-}
-</script>
+}`) %>
 
 <style>
 .container {

template/frameworks/vuesax/pages/index.vue

@@ -61,6 +61,15 @@
   </div>
 </template>
 
+<%- generateComponent(`
+  import Logo from '~/components/Logo.vue'
+  import VuesaxLogo from '~/components/VuesaxLogo.vue'
+`,`{
+  components: {
+    Logo,
+    VuesaxLogo
+  }
+}`)%>
 <script>
 import Logo from '~/components/Logo.vue'
 import VuesaxLogo from '~/components/VuesaxLogo.vue'

template/frameworks/vuetify/layouts/default.vue

@@ -88,8 +88,7 @@
   </v-app>
 </template>
 
-<script>
-export default {
+<%- generateComponent(``,`{
   data () {
     return {
       clipped: false,
@@ -113,5 +112,4 @@ export default {
       title: 'Vuetify.js'
     }
   }
-}
-</script>
+}`) %>

template/frameworks/vuetify/layouts/error.vue

@@ -12,8 +12,7 @@
   </v-app>
 </template>
 
-<script>
-export default {
+<%- generateComponent(``,`{
   layout: 'empty',
   props: {
     error: {
@@ -34,8 +33,7 @@ export default {
       title
     }
   }
-}
-</script>
+}`) %>
 
 <style scoped>
 h1 {

template/frameworks/vuetify/pages/index.vue

@@ -79,14 +79,12 @@
   </v-layout>
 </template>
 
-<script>
-import Logo from '~/components/Logo.vue'
-import VuetifyLogo from '~/components/VuetifyLogo.vue'
-
-export default {
+<%- generateComponent(`
+  import Logo from '~/components/Logo.vue'
+  import VuetifyLogo from '~/components/VuetifyLogo.vue'
+`,`{
   components: {
     Logo,
     VuetifyLogo
   }
-}
-</script>
+}`) %>

template/nuxt/nuxt.config.js

@@ -86,6 +86,7 @@ module.exports = {
   /*
   ** Nuxt.js dev-modules
   */
+
   buildModules: [
     <%_ if (typescript) {_%>
     '@nuxt/typescript-build',
@@ -180,7 +181,7 @@ module.exports = {
     /*
     ** You can extend webpack config here
     */
-    extend (config, ctx) {
+    extend (_config, _ctx) {
     }
   }
 }