Feature/fix vue example e2e failing (#895)

* Update README * Upgrade vue-cli and eslint as vue-cli services requires eslint packages to work * Update create-ripple-app template * Update generator to modify eslint * Add requireConfigFile:false setting in consuming sites so it doesn't require babel config * Sync babel plugins to the same version * Update babel-node and babel-runtime plugin to 7.12.13 Co-authored-by: Ruby Lamadora <[email protected]>
dpc-sdp · Feb 15, 2021 · f177592 · f177592
1 parent f613739
commit f177592
Show file tree

Hide file tree

Showing 21 changed files with 1,772 additions and 974 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,7 +3,7 @@
 module.exports = {
   root: true,
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
     allowImportExportEverywhere: true
   },
   env: {
@@ -13,7 +13,7 @@ module.exports = {
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-    'plugin:vue/essential', 
+    'plugin:vue/essential',
     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
     'standard',
     "plugin:jest/recommended"
@@ -28,6 +28,28 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 'off',
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    // TODO enable the rules to achieve lint standard consistency towards projects
+    'array-bracket-spacing': 'off',
+    'array-callback-return': 'off',
+    'dot-notation': 'off',
+    'jest/expect-expect': 'off',
+    'jest/no-standalone-expect': 'off',
+    'jest/no-try-expect': 'off',
+    'jest/no-conditional-expect': 'off',
+    'lines-between-class-members': 'off',
+    'multiline-ternary': 'off',
+    'no-case-declarations': 'off',
+    'no-prototype-builtins': 'off',
+    'node/no-deprecated-api': 'off',
+    'prefer-const': 'off',
+    'prefer-regex-literals': 'off',
+    'quotes': ['off', 'single', { 'allowTemplateLiterals': true }],
+    'quote-props': 'off',
+    'vue/no-mutating-props': 'off',
+    'vue/no-unused-components': 'off',
+    'vue/no-use-v-if-with-v-for': 'off',
+    'vue/return-in-computed-property': 'off',
+    'no-var': 'off'
   }
 }
diff --git a/examples/basic-examples/.eslintrc.js b/examples/basic-examples/.eslintrc.js
@@ -3,7 +3,7 @@
 module.exports = {
   root: true,
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
     allowImportExportEverywhere: true
   },
   env: {
@@ -13,10 +13,10 @@ module.exports = {
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-    'plugin:vue/essential', 
+    'plugin:vue/essential',
     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
     'standard',
-    "plugin:jest/recommended"
+    'plugin:jest/recommended'
   ],
   // required to lint *.vue files
   plugins: [
@@ -28,6 +28,10 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 'off',
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'quotes': ['off', 'single', { 'allowTemplateLiterals': true }],
+    'quote-props': 'off',
+    'dot-notation': 'off',
+    'prefer-const': 'off'
   }
 }
diff --git a/examples/basic-examples/assets/ripple-icon/custom_icon_lock_open.js b/examples/basic-examples/assets/ripple-icon/custom_icon_lock_open.js
@@ -1,7 +1,7 @@
 import Icon from '@dpc-sdp/ripple-icon/Icon.vue'
 
 Icon.register({
-  'lock_open': {
+  lock_open: {
     width: 10,
     height: 10,
     paths: [

diff --git a/examples/basic-examples/assets/ripple-icon/custom_icon_search.js b/examples/basic-examples/assets/ripple-icon/custom_icon_search.js
@@ -1,7 +1,7 @@
 import Icon from '@dpc-sdp/ripple-icon/Icon.vue'
 
 Icon.register({
-  'search': {
+  search: {
     width: 10,
     height: 10,
     paths: [

diff --git a/examples/basic-examples/nuxt.config.js b/examples/basic-examples/nuxt.config.js
@@ -44,10 +44,10 @@ export default {
       const webpack = require('webpack')
       const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
       config.plugins.push(new LodashModuleReplacementPlugin({
-        'caching': true,
-        'collections': true,
-        'paths': true,
-        'shorthands': true
+        caching: true,
+        collections: true,
+        paths: true,
+        shorthands: true
       }))
       // Load moment 'en-au' locale only for performance.
       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack

diff --git a/examples/basic-examples/package.json b/examples/basic-examples/package.json
@@ -27,31 +27,32 @@
     "run-script-os": "^1.1.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.12.13",
+    "@babel/eslint-parser": "^7.12.13",
+    "@babel/eslint-plugin": "^7.12.13",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.7",
-    "@babel/runtime": "^7.12.5",
+    "@babel/plugin-transform-runtime": "^7.12.13",
+    "@babel/preset-env": "^7.12.13",
+    "@babel/runtime": "^7.12.13",
     "@dpc-sdp/ripple-test-tools": "1.19.8",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^24.8.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.2",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "core-js": "^3.8.1",
-    "cross-env": "^5.2.0",
-    "eslint": "^4.15.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.7.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.19.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^21.17.0",
-    "eslint-plugin-node": "^5.2.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "eslint-plugin-vue": "^4.0.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^7.5.0",
     "lodash-webpack-plugin": "^0.11.5",
     "node-sass": "^4.11.0",
     "sass-lint": "^1.12.1",

diff --git a/examples/basic-examples/tide/modules/example-override-mapping/mapping-filters.js b/examples/basic-examples/tide/modules/example-override-mapping/mapping-filters.js
@@ -26,7 +26,7 @@ module.exports = {
   // Use your own filter like above is the safer way.
   paragraphKeyJourneyLinks: function (fieldParagraphLinks) {
     if (typeof fieldParagraphLinks !== 'undefined' && fieldParagraphLinks !== null) {
-      let rtn = []
+      const rtn = []
       fieldParagraphLinks.forEach(item => {
         rtn.push({
           url: item.url || item.uri,

diff --git a/examples/basic-examples/tide/modules/example-search/components/Search.vue b/examples/basic-examples/tide/modules/example-search/components/Search.vue
@@ -31,7 +31,6 @@ import { RplDivider } from '@dpc-sdp/ripple-global'
 import { RplSearchForm, RplSearchResults } from '@dpc-sdp/ripple-search'
 
 // Layout.
-import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
 import { RplPageLayout } from '@dpc-sdp/ripple-layout'
 import formData from './formdata.js'
 import { searchMixin, getSearch } from '@dpc-sdp/ripple-nuxt-tide/modules/search'
@@ -44,9 +43,7 @@ export default {
     RplSearchResults,
 
     // Layout.
-    RplPageLayout,
-    RplRow,
-    RplCol
+    RplPageLayout
   },
   mixins: [searchMixin],
   async asyncData ({ app, route }) {

diff --git a/examples/basic-examples/tide/modules/example-search/components/SearchSimple.vue b/examples/basic-examples/tide/modules/example-search/components/SearchSimple.vue
@@ -30,7 +30,6 @@ import { RplDivider } from '@dpc-sdp/ripple-global'
 import { RplSearchForm, RplSearchResults } from '@dpc-sdp/ripple-search'
 
 // Layout.
-import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
 import { RplPageLayout } from '@dpc-sdp/ripple-layout'
 import formData from './formdata-simple.js'
 import { searchMixin, getSearch } from '@dpc-sdp/ripple-nuxt-tide/modules/search'
@@ -43,9 +42,7 @@ export default {
     RplSearchResults,
 
     // Layout.
-    RplPageLayout,
-    RplRow,
-    RplCol
+    RplPageLayout
   },
   mixins: [searchMixin],
   async asyncData ({ app, route }) {

diff --git a/examples/vic-gov-au/package.json b/examples/vic-gov-au/package.json
@@ -33,20 +33,21 @@
     "run-script-os": "^1.1.3"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.12.13",
+    "@babel/eslint-plugin": "^7.12.13",
     "@dpc-sdp/ripple-test-tools": "1.19.8",
-    "babel-eslint": "^10.1.0",
     "babel-plugin-lodash": "^3.3.2",
-    "cross-env": "^5.2.0",
-    "eslint": "^4.15.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.7.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.19.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^21.17.0",
-    "eslint-plugin-node": "^5.2.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "eslint-plugin-vue": "^4.0.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^7.5.0",
     "lodash-webpack-plugin": "^0.11.5",
     "mockttp": "^1.0.3",
     "node-sass": "^4.11.0",

diff --git a/examples/vue-example-app/README.md b/examples/vue-example-app/README.md
@@ -13,7 +13,7 @@ Two Ripple components installed just for demo how to install them.
 Install below dev dependencies in your Vue project to make icon work.
 
 ```
-npm install sass-resources-loader svgo svgo-loader svg-sprite-loader --save-dev
+npm install sass-resources-loader --save-dev
 ```
 
 ### Webpack configs
@@ -24,7 +24,7 @@ Check [/vue.config.js](/vue.config.js) for more details.
 
 ### Using Ripple components
 
-Chceck [/src/App.vue](/src/App.vue) and [/src/components/HelloRipple.vue](/src/components/HelloRipple.vue) for more details.
+Check [/src/App.vue](/src/App.vue) and [/src/components/HelloRipple.vue](/src/components/HelloRipple.vue) for more details.
 
 ### Install Ripple plugin
 

diff --git a/examples/vue-example-app/package.json b/examples/vue-example-app/package.json
@@ -20,21 +20,20 @@
     "vue": "^2.6.12"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.12.13",
+    "@babel/eslint-plugin": "^7.12.13",
     "@dpc-sdp/ripple-test-tools": "1.19.8",
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-eslint": "^3.8.0",
-    "@vue/cli-service": "^3.8.0",
-    "babel-eslint": "^10.1.0",
-    "cross-env": "^5.2.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "@vue/babel-preset-app": "^4.5.11",
+    "@vue/cli-plugin-babel": "^4.5.11",
+    "@vue/cli-plugin-eslint": "^4.5.11",
+    "@vue/cli-service": "^4.5.11",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.19.0",
+    "eslint-plugin-vue": "^7.5.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
     "sass-resources-loader": "^2.1.1",
     "start-server-and-test": "^1.11.6",
-    "svg-sprite-loader": "^4.1.6",
-    "svgo": "^1.2.2",
-    "svgo-loader": "^2.2.0",
     "vue-template-compiler": "^2.6.12"
   },
   "eslintConfig": {
@@ -48,7 +47,7 @@
     ],
     "rules": {},
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     }
   },
   "cypress-cucumber-preprocessor": {

diff --git a/package.json b/package.json
@@ -50,32 +50,32 @@
     "package-dependencies:storybook": "cd src/ && yarn run package-dependencies"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/helper-call-delegate": "^7.12.1",
+    "@babel/core": "^7.12.13",
+    "@babel/eslint-parser": "^7.12.13",
+    "@babel/eslint-plugin": "^7.12.13",
+    "@babel/helper-call-delegate": "^7.12.13",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/helper-call-delegate": "^7.12.1",
-    "@babel/preset-env": "^7.12.7",
+    "@babel/plugin-transform-runtime": "^7.12.13",
+    "@babel/preset-env": "^7.12.13",
     "@vue/test-utils": "^1.0.0-beta.29",
     "axe-core": "^3.2.2",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^24.8.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "core-js": "^3.8.1",
-    "cross-env": "^5.2.0",
-    "eslint": "^5.11.1",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-friendly-formatter": "^3.0.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.19.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-friendly-formatter": "^4.0.1",
     "eslint-junit": "^1.0.1",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^21.17.0",
-    "eslint-plugin-node": "^5.2.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "eslint-plugin-vue": "^4.0.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^7.5.0",
     "husky": "^3.0.0",
     "jest": "^24.8.0",
     "jest-canvas-mock": "^2.1.0",

diff --git a/packages/components/Molecules/Card/mixins/cardtrimfield.js b/packages/components/Molecules/Card/mixins/cardtrimfield.js
@@ -28,11 +28,11 @@ const cardtrimfield = {
       // Set the max height of a summary field.
       if (typeof window !== 'undefined' && this.$el && this.$el.querySelector && this.$breakpoint.m) {
         // Elements
-        let card = this.$el
-        let summary = card.querySelector(this.trimFieldSelector)
+        const card = this.$el
+        const summary = card.querySelector(this.trimFieldSelector)
         if (summary) {
           // Properties
-          let summaryLineHeight = parseFloat(window.getComputedStyle(summary, null).getPropertyValue('line-height'))
+          const summaryLineHeight = parseFloat(window.getComputedStyle(summary, null).getPropertyValue('line-height'))
           let summaryAllowedHeight = this.getTrimFieldMaxHeightOffset(card) - summary.offsetTop
           summaryAllowedHeight = summaryLineHeight * Math.floor(summaryAllowedHeight / summaryLineHeight)
           // Set Max Height
@@ -65,7 +65,7 @@ const cardtrimfield = {
       this.$nextTick(() => {
         if (typeof window !== 'undefined') {
           this.setTrimFieldMaxHeight()
-          window.addEventListener('resize', this.setTrimFieldMaxHeight, { 'passive': true })
+          window.addEventListener('resize', this.setTrimFieldMaxHeight, { passive: true })
         }
       })
     }

diff --git a/packages/create-ripple-app/__tests__/__mocks__/v18/package.json b/packages/create-ripple-app/__tests__/__mocks__/v18/package.json
@@ -28,9 +28,10 @@
     "run-script-os": "^1.0.7"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.12.13",
+    "@babel/eslint-plugin": "^7.12.13",
     "@dpc-sdp/ripple-test-tools": "^1.3.0",
     "axe-core": "^3.3.2",
-    "babel-eslint": "^10.0.1",
     "cross-env": "^5.2.0",
     "eslint": "^4.15.0",
     "eslint-config-standard": "^10.2.1",