Eslint support #1477

.eslintrc.js

@@ -1,25 +1,39 @@
 module.exports = {
   root: true,
-  env: { 'browser': true, 'jest': true },
+  env: { browser: true, jest: true },
   parser: 'vue-eslint-parser',
   parserOptions: {
-    parser: "babel-eslint",
+    parser: '@typescript-eslint/parser',
     ecmaVersion: 8,
-    sourceType: "module"
+    sourceType: 'module'
   },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
   extends: [
-    'plugin:vue/recommended', 'standard'
-  ],
-  plugins: [
-    'vue',
-    'vue-storefront'
+    'plugin:vue/recommended',
+    'standard',
+    'plugin:@typescript-eslint/recommended'
   ],
+  plugins: ['vue', 'vue-storefront', '@typescript-eslint'],
   // add your custom rules here
   rules: {
+    '@typescript-eslint/no-var-requires': 1,
+    '@typescript-eslint/indent': ['error', 2],
+    '@typescript-eslint/camelcase': 0,
+    semi: 'off',
+    '@typescript-eslint/semi': 0,
+    '@typescript-eslint/member-delimiter-style': ['error', { 'multiline': { 'delimiter': 'comma', 'requireLast': false }, 'singleline': { 'delimiter': 'comma' } }],
+    '@typescript-eslint/no-empty-interface': 1,
+    '@typescript-eslint/no-use-before-define': 1,
+    'handle-callback-err': 1,
+    '@typescript-eslint/class-name-casing': 1,
+    'prefer-promise-reject-errors': 1,
+    'import/no-duplicates': ['warning'],
+    'vue/return-in-computed-property': 1,
+    'vue/no-use-v-if-with-v-for': 1,
+    'vue/no-unused-components': 1,
     /* max attributes-per-line and order-in-components
-    ** we should use this later, when eslint-plugin-vue will support auto fixing this
-    */
+     ** we should use this later, when eslint-plugin-vue will support auto fixing this
+     */
     'vue/max-attributes-per-line': 0,
     'vue/order-in-components': 0,
     'vue/attributes-order': 0,
@@ -32,10 +46,20 @@ module.exports = {
     'generator-star-spacing': 0,
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'no-restricted-imports': [2, { 'paths': ['lodash-es'] }],
+    'no-restricted-imports': [2, { paths: ['lodash-es'] }],
     'vue-storefront/no-corecomponent-import': 'error',
     'vue-storefront/no-corecomponent': 'error',
     'vue-storefront/no-corepage-import': 'error',
     'vue-storefront/no-corepage': 'error'
-  }
-}
+  },
+  overrides: [
+    {
+      // @todo check if this is closed https://github.com/typescript-eslint/typescript-eslint/issues/342
+      // This is an issue with interfaces so we need to wait until it fixed.
+      files: ['core/**/*.ts'],
+      rules: {
+        'no-undef': 1
+      }
+    }
+  ]
+};

core/app.ts

@@ -61,21 +61,20 @@ once('__VUE_EXTEND_RR__', () => {
   Vue.use(VueRouter)
 })
 
-const createApp  = async (ssrContext, config, storeCode = null): Promise<{app: Vue, router: VueRouter, store: Store<RootState>}> => {
+const createApp = async (ssrContext, config, storeCode = null): Promise<{app: Vue, router: VueRouter, store: Store<RootState>}> => {
   router = createRouter()
   // sync router with vuex 'router' store
   sync(store, router)
   // TODO: Don't mutate the state directly, use mutation instead
   store.state.version = process.env.APPVERSION
   store.state.config = config
-  store.state.__DEMO_MODE__ = (config.demomode === true) ? true : false
-  if(ssrContext) Vue.prototype.$ssrRequestContext = ssrContext
+  store.state.__DEMO_MODE__ = (config.demomode === true)
+  if (ssrContext) Vue.prototype.$ssrRequestContext = ssrContext
   if (!store.state.config) store.state.config = buildTimeConfig // if provided from SSR, don't replace it
   const storeView = prepareStoreView(storeCode) // prepare the default storeView
   store.state.storeView = storeView
   // store.state.shipping.methods = shippingMethods
 
-
   // to depreciate in near future
   once('__VUE_EXTEND__', () => {
     Vue.use(Vuelidate)

core/build/webpack.base.config.ts

@@ -14,9 +14,10 @@ fs.writeFileSync(
   JSON.stringify(config)
 )
 
-const themesRoot = '../../src/themes'
-
+// eslint-disable-next-line import/first
 import themeRoot from './theme-path';
+
+const themesRoot = '../../src/themes'
 const themeResources = themeRoot + '/resource'
 const themeCSS = themeRoot + '/css'
 const themeApp = themeRoot + '/App.vue'
@@ -31,15 +32,15 @@ translationPreprocessor([
   path.resolve(__dirname, themeResources + '/i18n/')
 ], config)
 
-const postcssConfig =  {
+const postcssConfig = {
   loader: 'postcss-loader',
   options: {
     ident: 'postcss',
     plugins: (loader) => [
       require('postcss-flexbugs-fixes'),
       require('autoprefixer')({
-        flexbox: 'no-2009',
-      }),
+        flexbox: 'no-2009'
+      })
     ]
   }
 };
@@ -58,25 +59,25 @@ export default {
       template: fs.existsSync(themedIndex) ? themedIndex : 'src/index.template.html',
       filename: 'index.html',
       chunksSortMode: 'none',
-      inject: isProd == false // in dev mode we're not using clientManifest therefore renderScripts() is returning empty string and we need to inject scripts using HTMLPlugin
+      inject: isProd === false // in dev mode we're not using clientManifest therefore renderScripts() is returning empty string and we need to inject scripts using HTMLPlugin
     }),
     new HTMLPlugin({
       template: fs.existsSync(themedIndexMinimal) ? themedIndexMinimal : 'src/index.minimal.template.html',
       filename: 'index.minimal.html',
       chunksSortMode: 'none',
-      inject: isProd == false
+      inject: isProd === false
     }),
     new HTMLPlugin({
-      template: fs.existsSync(themedIndexBasic) ? themedIndexBasic: 'src/index.basic.template.html',
+      template: fs.existsSync(themedIndexBasic) ? themedIndexBasic : 'src/index.basic.template.html',
       filename: 'index.basic.html',
       chunksSortMode: 'none',
-      inject: isProd == false
+      inject: isProd === false
     }),
     new HTMLPlugin({
-      template: fs.existsSync(themedIndexAmp) ? themedIndexAmp: 'src/index.amp.template.html',
+      template: fs.existsSync(themedIndexAmp) ? themedIndexAmp : 'src/index.amp.template.html',
       filename: 'index.amp.html',
       chunksSortMode: 'none',
-      inject: isProd == false
+      inject: isProd === false
     }),
     new webpack.DefinePlugin({
       'process.env.__APPVERSION__': JSON.stringify(require('../../package.json').version),
@@ -96,7 +97,7 @@ export default {
     modules: [
       'node_modules',
       path.resolve(__dirname, themesRoot)
-    ],
+    ]
   },
   resolve: {
     modules: [
@@ -116,14 +117,14 @@ export default {
       'theme/resource': themeResources,
 
       // Backward compatible
-      '@vue-storefront/core/store/lib/multistore' : path.resolve(__dirname, '../lib/multistore.ts'),
+      '@vue-storefront/core/store/lib/multistore': path.resolve(__dirname, '../lib/multistore.ts')
     }
   },
   module: {
     rules: [
       {
         enforce: 'pre',
-        test: /\.(js|vue)$/,
+        test: /\.(js|vue,ts)$/,
         loader: 'eslint-loader',
         exclude: [/node_modules/, /test/]
       },
@@ -132,7 +133,7 @@ export default {
         loader: 'vue-loader',
         options: {
           preserveWhitespace: false,
-          postcss: [autoprefixer()],
+          postcss: [autoprefixer()]
         }
       },
       {

core/build/webpack.client.config.ts

@@ -6,17 +6,17 @@ import VueSSRClientPlugin from 'vue-server-renderer/client-plugin'
 
 const config = merge(base, {
   optimization: {
-    splitChunks:  {
+    splitChunks: {
       cacheGroups: {
         commons: {
           test: /[\\/]node_modules[\\/](vue|vuex|vue-router|vue-meta|vue-i18n|vuex-router-sync|localforage)[\\/]/,
           name: 'vendor',
-          chunks: 'all',
-        },
-      },
+          chunks: 'all'
+        }
+      }
     },
-      runtimeChunk: {
-      name: "manifest",
+    runtimeChunk: {
+      name: 'manifest'
     }
   },
   mode: 'development',
@@ -32,7 +32,7 @@ const config = merge(base, {
       'process.env.VUE_ENV': '"client"'
     }),
     new VueSSRClientPlugin()
-  ],
+  ]
 })
 
 export default config;

core/build/webpack.prod.client.config.ts

@@ -1,7 +1,7 @@
 import path from 'path';
 import merge from 'webpack-merge';
 import baseClientConfig from './webpack.client.config';
-const themeRoot = require ('./theme-path');
+const themeRoot = require('./theme-path');
 
 const extendedConfig = require(path.join(themeRoot, '/webpack.config.js'))
 

core/build/webpack.prod.server.config.ts

@@ -8,7 +8,7 @@ const extendedConfig = require(path.join(themeRoot, '/webpack.config.js'))
 
 export default extendedConfig(baseServerConfig, {
   mode: 'production',
-  devtool: 'nosources-source-map',  
+  devtool: 'nosources-source-map',
   isClient: false,
   isDev: false
 })

core/build/webpack.prod.sw.config.ts

@@ -28,69 +28,72 @@ module.exports = merge(base, {
       ],
       runtimeCaching: [
         {
-          urlPattern: "^https://fonts\.googleapis\.com/", /** cache the html stub  */
-          handler: "cacheFirst"
+          // eslint-disable-next-line no-useless-escape
+          urlPattern: '^https://fonts\.googleapis\.com/', /** cache the html stub  */
+          handler: 'cacheFirst'
         },
         {
-          urlPattern: "^https://fonts\.gstatic\.com/", /** cache the html stub  */
-          handler: "cacheFirst"
+          // eslint-disable-next-line no-useless-escape
+          urlPattern: '^https://fonts\.gstatic\.com/', /** cache the html stub  */
+          handler: 'cacheFirst'
         },
         {
-          urlPattern: "^https://unpkg\.com/", /** cache the html stub  */
-          handler: "cacheFirst"
+          // eslint-disable-next-line no-useless-escape
+          urlPattern: '^https://unpkg\.com/', /** cache the html stub  */
+          handler: 'cacheFirst'
         },
         {
-        urlPattern: "/pwa.html", /** cache the html stub  */
-        handler: "networkFirst"
-      },{
-        urlPattern: "/", /** cache the html stub for homepage  */
-        handler: "networkFirst"
-      },
-      {
-        urlPattern: "/p/*", /** cache the html stub  */
-        handler: "networkFirst"
-      },
-      {
-        urlPattern: "/c/*", /** cache the html stub  */
-        handler: "networkFirst"
-      },
-      {
-        urlPattern: "/img/(.*)",
-        handler: "fastest"
-      },{
-        urlPattern: "/api/catalog/*",
-        handler: "networkFirst"
-      },{
-        urlPattern: "/api/*",
-        handler: "networkFirst"
-      },{
-        urlPattern: "/assets/logo.svg",
-        handler: "networkFirst"
-      },{
-        urlPattern: "/index.html",
-        handler: "networkFirst"
-      },{
-        urlPattern: "/assets/*",
-        handler: "fastest"
-      },{
-        urlPattern: "/assets/ig/(.*)",
-        handler: "fastest"
-      },{
-        urlPattern: "/dist/(.*)",
-        handler: "fastest"
-      },{
-        urlPattern: "/*/*", /** this is new product URL format  */
-        handler: "networkFirst"
-      },
-      {
-        urlPattern: "/*/*/*", /** this is new product URL format  */
-        handler: "networkFirst"
-      },
-      {
-        urlPattern: "/*", /** this is new category URL format  */
-        handler: "networkFirst"
-      }],
-      "importScripts": ['/dist/core-service-worker.js'] /* custom logic */
+          urlPattern: '/pwa.html', /** cache the html stub  */
+          handler: 'networkFirst'
+        }, {
+          urlPattern: '/', /** cache the html stub for homepage  */
+          handler: 'networkFirst'
+        },
+        {
+          urlPattern: '/p/*', /** cache the html stub  */
+          handler: 'networkFirst'
+        },
+        {
+          urlPattern: '/c/*', /** cache the html stub  */
+          handler: 'networkFirst'
+        },
+        {
+          urlPattern: '/img/(.*)',
+          handler: 'fastest'
+        }, {
+          urlPattern: '/api/catalog/*',
+          handler: 'networkFirst'
+        }, {
+          urlPattern: '/api/*',
+          handler: 'networkFirst'
+        }, {
+          urlPattern: '/assets/logo.svg',
+          handler: 'networkFirst'
+        }, {
+          urlPattern: '/index.html',
+          handler: 'networkFirst'
+        }, {
+          urlPattern: '/assets/*',
+          handler: 'fastest'
+        }, {
+          urlPattern: '/assets/ig/(.*)',
+          handler: 'fastest'
+        }, {
+          urlPattern: '/dist/(.*)',
+          handler: 'fastest'
+        }, {
+          urlPattern: '/*/*', /** this is new product URL format  */
+          handler: 'networkFirst'
+        },
+        {
+          urlPattern: '/*/*/*', /** this is new product URL format  */
+          handler: 'networkFirst'
+        },
+        {
+          urlPattern: '/*', /** this is new category URL format  */
+          handler: 'networkFirst'
+        }],
+      'importScripts': ['/dist/core-service-worker.js'] /* custom logic */
     })
   ]
 })

core/client-entry.ts

@@ -21,7 +21,7 @@ const invokeClientEntry = async () => {
   const config = Object.assign(buildTimeConfig, window.__INITIAL_STATE__.config ? window.__INITIAL_STATE__.config : buildTimeConfig)
 
   // Get storeCode from server (received either from cache header or env variable)
-  let storeCode =  window.__INITIAL_STATE__.user.current_storecode
+  let storeCode = window.__INITIAL_STATE__.user.current_storecode
   const { app, router, store } = await createApp(null, config, storeCode)
 
   if (window.__INITIAL_STATE__) {

core/filters/product-messages/typed.ts

@@ -1,7 +1,7 @@
 /**
  * Format message string for product validation messages object
  */
-export function formatProductMessages (messages: Object): string {
+export function formatProductMessages (messages: Record<string, any>): string {
   const msgs = []
   for (const infoKey in messages) {
     if (messages[infoKey]) {