Update to last Vue CLI v4 template

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.dockerignore

@@ -1,4 +1,6 @@
 app/
 dist/
 node_modules/
+test/unit/coverage/
+tests/unit/coverage/
 .git/

.editorconfig

@@ -1,9 +1,5 @@
-root = true
-
-[*]
-charset = utf-8
+[*.{js,jsx,ts,tsx,vue}]
 indent_style = space
 indent_size = 2
-end_of_line = lf
-insert_final_newline = true
 trim_trailing_whitespace = true
+insert_final_newline = true

.eslintignore

@@ -1,2 +1,3 @@
-build/*.js
-config/*.js
+/build/
+/config/
+/test/unit/coverage/

.eslintrc.js

@@ -1,28 +1,17 @@
-// http://eslint.org/docs/user-guide/configuring
-
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
-  parserOptions: {
-    sourceType: 'module'
-  },
   env: {
-    browser: true,
+    node: true,
   },
-  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
-  extends: 'standard',
-  // required to lint *.vue files
-  plugins: [
-    'html'
+  extends: [
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential',
+    '@vue/standard'
   ],
-  // add your custom rules here
-  'rules': {
-    // allow paren-less arrow functions
-    'arrow-parens': 'off',
-    // allow async-await
-    'generator-star-spacing': 'off',
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  rules: {
+    // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+
     // allow semicolons and the end of a statement
     'semi': 'off',
 
@@ -40,5 +29,19 @@ module.exports = {
     'padded-blocks': process.env.NODE_ENV  === 'development' ? 'warn' : 'error',
     'keyword-spacing': process.env.NODE_ENV  === 'development' ? 'warn' : 'error',
     'arrow-spacing': process.env.NODE_ENV  === 'development' ? 'warn' : 'error'
-  }
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        mocha: true
+      }
+    }
+  ]
 }

.gitignore

@@ -1,14 +1,27 @@
 .DS_Store
-node_modules/
-dist/
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-test/unit/coverage
+pnpm-debug.log*
+
+# Unit tests coverage reports
+test/unit/coverage/
+tests/unit/coverage/
 
 # Editor directories and files
 .idea
+.vscode
 *.suo
 *.ntvs*
 *.njsproj
-*.sln 
+*.sln
+*.sw?

.gitpod

@@ -4,7 +4,7 @@ ports:
     onOpen: open-preview
 tasks:
   - init: npm install && npm run init:app
-    command: npm run dev
+    command: npm run serve
 vscode:
   extensions:
     - dbaeumer.vscode-eslint

README.md

@@ -51,16 +51,16 @@ npm run init:app
 
 ``` bash
 # serve with hot reload at localhost:8081
-npm run dev
+npm run serve
 ```
 
 ### Unit tests
 
-To run all unit tests execute the following:
+To run all unit tests using Karma test runner execute the following:
 
 ``` bash
 # run all tests
-npm test
+npm run test
 ```
 
 NB the unit tests require Chrome or Chromium browser executable to be found.
@@ -83,7 +83,25 @@ Run the build script in order to create a production build, which can be copied
 npm run build
 ```
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+### Linting your files
+
+Run the lint script in order to lint all your files without fixing the errors. The problems will be reported in the console only.
+
+``` bash
+npm run lint
+```
+
+### Linting and fixing your files
+
+Run the lint script in order to lint all your files and fix the errors at the same time.
+
+``` bash
+npm run lint:fix
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ## Run with Docker
 
@@ -140,6 +158,6 @@ You need professional support or teachings for Wegue? Please contact a service p
 
 ## Credits
 
-The basic project setup was created by https://github.com/vuejs-templates/webpack.
+The basic project setup was created with [Vue CLI](https://cli.vuejs.org).
 
 Thanks for this great template! :+1:

app-starter/WguApp.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script>
-  import WguAppTemplate from './WguAppTemplate.vue';
-  export default {
-    name: 'my-wgu-app',
-    components: {
-      'wgu-app-tpl': WguAppTemplate
-    }
-    // add Vue methods and hooks here
+import WguAppTemplate from './WguAppTemplate.vue';
+export default {
+  name: 'my-wgu-app',
+  components: {
+    'wgu-app-tpl': WguAppTemplate
   }
+  // add Vue methods and hooks here
+}
 </script>

app-starter/WguAppTemplate.vue

@@ -21,15 +21,15 @@
             v-bind="moduleWin"
           />
       </template>
-    </wgu-app-sidebar>      
+    </wgu-app-sidebar>
 
     <slot name="wgu-before-content" />
     <v-content app>
       <v-container id="ol-map-container" fluid fill-height class="pa-0">
         <wgu-map />
         <!-- layer loading indicator -->
         <wgu-maploading-status />
-        <slot name="wgu-after-map"> 
+        <slot name="wgu-after-map">
         </slot>
         <!-- Portal to overlay the map content from an application module -->
         <portal-target name="map-overlay" />

app-starter/components/AppHeader.vue

@@ -43,7 +43,7 @@
       <v-list color="primary">
           <template v-for="(tbButton, index) in menuButtons">
             <v-list-item :key="index">
-              <component 
+              <component
                   :is="tbButton.type" :key="index"
                   v-bind="tbButton"
                />

app-starter/components/AppSidebar.vue

@@ -15,9 +15,9 @@
           absolute
           top
           color="secondary"
-          @click="sidebarOpen = !sidebarOpen"> 
-          <v-icon color="onsecondary" v-if="sidebarOpen">chevron_left</v-icon> 
-          <v-icon color="onsecondary" v-else>chevron_right</v-icon> 
+          @click="sidebarOpen = !sidebarOpen">
+          <v-icon color="onsecondary" v-if="sidebarOpen">chevron_left</v-icon>
+          <v-icon color="onsecondary" v-else>chevron_right</v-icon>
         </v-btn>
       </template>
   </v-navigation-drawer>
@@ -66,4 +66,4 @@ export default {
     }
   }
 }
-</script>
+</script>

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-optional-chaining'
+  ],
+  'env': {
+    'test': {
+      'plugins': ['istanbul']
+    }
+  }
+}