Merge pull request #28 from kingscode/KCI-136

KCI-136 > build and lint (and package.json lint)

Author: jvhellemondt

README.md

@@ -22,6 +22,7 @@ later in the `vue add vuetify` will be overwritten by vuetify, or the kings code
 ### Vue:
 We'd recommend you to choose
 - babel
+- eslint (only the essential)
 - pwa
 - router
 - vuex
@@ -30,7 +31,7 @@ We'd recommend you to choose
 And then:
 
 - history mode
-- dart sass (very important, vuetify wont work without it)
+- dart sass (very important, vuetify won't work without it)
 
 The rest doesn't matter.
 
@@ -42,7 +43,7 @@ This is our own scaffold, which you can use with our laravel API you can answer
 as you like in this plugins. The most important choices are:
 
 - Do you want to use a crud system?
-    - This installs our vuetify resource and creates an implementation for this so the vuetify
+    - This installs our vuetify resource and creates an implementation for this, so the vuetify
     resource works with the connected laravel API
     - a example user resource
 - Do you want to use authorisation?

generator/index.js

@@ -12,7 +12,9 @@ module.exports = (api, options) => {
       'qs': '^6.9.4',
       'vue-router': '3.3.4',
       'vue-i18n': '^8.21.0',
-
+    },
+    scripts: {
+      'lint': 'vue-cli-service lint',
     },
   });
   if (options.plugins.includes('fontawesomepro')) {
@@ -71,6 +73,22 @@ module.exports = (api, options) => {
     api.render('./templates/Plugins/analytics', options);
   }
 
+  if (options.useBuildAndLintAction) {
+    if (fs.existsSync('./.eslintrc.js')) {
+      fs.unlinkSync(api.resolve('./.eslintrc.js'));
+    }
+    api.extendPackage({
+      dependencies: {
+        '@vue/cli-plugin-eslint': '~4.4.0',
+        'babel-eslint': '^10.1.0',
+        'eslint': '^6.7.2',
+        'eslint-plugin-import': '^2.22.1',
+        'eslint-plugin-vue': '^6.2.2',
+      },
+    });
+    api.render('./templates/ESLint', options);
+  }
+
   api.onCreateComplete(() => {
     if (fs.existsSync('src/store.js')) {
       fs.unlinkSync(api.resolve('src/store.js'));

generator/templates/Crud/src/components/Resource.vue

@@ -132,7 +132,7 @@ export default {
                 total,
               });
             })
-            .catch(() => reject());
+            .catch((e) => reject(e));
 
       });
     },
@@ -161,10 +161,10 @@ export default {
                 })
                 .catch((error) => {
                   this.errors = error.response.data.errors;
-                  reject();
+                  reject(error);
                 });
           } else {
-            reject();
+            reject(new Error('(create)Form is invalid'));
           }
         });
 
@@ -181,10 +181,10 @@ export default {
                 .then(() => resolve())
                 .catch((error) => {
                   this.errors = error.response.data.errors;
-                  reject();
+                  reject(error);
                 });
           } else {
-            reject();
+            reject(new Error('(update)Form is invalid'));
           }
         });
       });
@@ -201,7 +201,7 @@ export default {
             .then(() => {
               resolve();
             })
-            .catch(() => reject());
+            .catch((e) => reject(e));
 
       });
     },
@@ -214,7 +214,8 @@ export default {
         this.beforeOpenCreate(selected);
       }
       if (this.modelType) {
-        this.createForm.values = new this.modelType();
+        const Model = this.modelType()
+        this.createForm.values = new Model;
       }
     },
     beforeOpenUpdateHandler(selected) {
@@ -227,7 +228,9 @@ export default {
         return;
       }
 
-      this.updateForm.values = new this.modelType().mapResponse(selected[0]);
+      const Model = this.modelType()
+      const instance = new Model
+      this.updateForm.values = instance.mapResponse(selected[0]);
     },
   },
 };

generator/templates/Default/src/components/crud/fields/KDateField.vue

@@ -78,10 +78,8 @@ export default {
     },
   },
   created() {
-    if (this.type === 'month') {
-      return this.date = this.value || dayjs().format('MMM YYYY');
-    }
-    this.date = this.value || dayjs().format('YYYY-MM-DD');
+    const format = this.type === 'month' ? 'MMM YYYY' : 'YYYY-MM-DD';
+    this.date = this.value || dayjs().format(format);
   },
   computed: {
     formattedDate() {

generator/templates/Default/src/newmain.js

@@ -1,4 +1,3 @@
-import '@babel/polyfill'
 import Vue from 'vue'
 import { i18n, vuetify } from './plugins';
 <%_ if (options.useCrud) { _%>

generator/templates/Deployment/_github/workflows/deploy.production.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@main
 
       - name: setup server connections
         env:

generator/templates/Deployment/_github/workflows/deploy.test.yml

@@ -3,14 +3,14 @@ name: Deploy [test]
 on:
   push:
     branches:
-      - 'master'
+      - 'main'
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@main
 
       - name: setup server connections
         env:

generator/templates/ESLint/.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+  ],
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};

generator/templates/ESLint/_github/workflows/build_and_lint.yml

@@ -0,0 +1,31 @@
+name: Build & Lint
+
+on: pull_request
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@main
+
+<%_ if (options.plugins.includes('fontawesomepro')) { _%>
+      - name: build .npmrc
+        env:
+          FONT_AWESOME_TOKEN: ${{ secrets.font_awesome_token  }}
+        run: |
+          echo "@fortawesome:registry=https://npm.fontawesome.com/" >> .npmrc
+          echo "//npm.fontawesome.com/:_authToken=$FONT_AWESOME_TOKEN" >> .npmrc
+<%_ } _%>
+
+      - name: install
+        run: |
+          npm ci
+
+      - name: lint
+        run: |
+          npm run lint
+
+      - name: build
+        run: |
+          npm run build

prompts.js

@@ -17,10 +17,16 @@ module.exports = [
         message: 'Do you want to use github actions for deployments?',
         default: true,
     },
+    {
+        name: 'useBuildAndLintAction',
+        type: 'confirm',
+        message: 'Do you want to add a github workflow action which "build and lint" on every pull request? It is a fail-safe that you only deploy code which can build.',
+        default: true,
+    },
     {
         name: 'addRobotsFile',
         type: 'confirm',
-        message: 'Do you want to disallow robots (SEO) to visit this applications (Y: robots.txt is placed in public folder, N: if you use github actions for deployment, in the test deployment a robots.txt is generated)',
+        message: 'Do you want to disallow robots (SEO) to visit this applications (Y: robots.txt is placed in public folder, N: if you use github actions for deployment, in the test deployment a robots.txt is generated)?',
         default: false,
     },
     {
@@ -31,12 +37,12 @@ module.exports = [
             {
                 value: 'Sentry',
                 name: 'error logging with Sentry',
-                checked: true,
+                checked: false,
             },
             {
                 value: 'analytics',
                 name: 'Google Analytics with vue-analytics',
-                checked: true,
+                checked: false,
             },
             {
                 value: 'fontawesomepro',