chore(eslint): update config and fix errors

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  root: true,
   extends: [
     'plugin:node/recommended',
     'plugin:vue-libs/recommended'

gridsome/__tests__/build.spec.js

@@ -74,12 +74,15 @@ test('build basic project', async () => {
   expect(indexHTML).toMatch(' src="https://www.example.com/assets/image.png"')
   expect(indexHTML).toMatch('alt="Test image"')
   expect(indexHTML).toMatch('alt="SVG logo"')
+  expect(indexHTML).toMatch('alt="Immediate image"')
   expect(indexHTML).toMatch('alt="External image"')
   expect(indexHTML).toMatch('alt="Static image"')
   expect(indexHTML).toMatch('class="g-image-1 g-image')
   expect(indexHTML).toMatch('class="g-image-2 g-image')
   expect(indexHTML).toMatch('class="g-image-3 g-image')
   expect(indexHTML).not.toMatch('g-image-3-false')
+  expect(indexHTML).not.toMatch('[object Object]')
+  expect(indexHTML).not.toMatch('width=""')
 
   // #163 - remove duplicate style links
   expect(indexHTML.match(/styles\.css/g)).toHaveLength(2)

gridsome/app/.eslintrc.js

@@ -1,10 +1,22 @@
 module.exports = {
+  root: true,
   extends: [
-    'plugin:vue/essential'
+    'eslint:recommended',
+    'plugin:vue/recommended'
   ],
   parserOptions: {
     parser: 'babel-eslint',
     sourceType: 'module',
     allowImportExportEverywhere: true
+  },
+  globals: {
+    global: true,
+    process: true,
+    require: true
+  },
+  rules: {
+    'quotes': ['error', 'single', { allowTemplateLiterals: true }],
+    'comma-dangle': ['error', 'never'],
+    'semi': ['error', 'never']
   }
 }

gridsome/app/components/ClientOnly.js

@@ -1,3 +1,4 @@
+// @vue/component
 export default {
   functional: true,
 

gridsome/app/components/Image.js

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import caniuse from '../utils/caniuse'
 import { stringifyClass } from '../utils/class'
 import { createObserver } from '../utils/intersectionObserver'
@@ -7,23 +6,22 @@ const observer = caniuse.IntersectionObserver
   ? createObserver(intersectionHandler)
   : null
 
+// @vue/component
 export default {
   functional: true,
 
   props: {
     src: { type: [Object, String], required: true },
-    width: { type: String },
-    height: { type: String },
-    fit: { type: String },
-    position: { type: String },
-    background: { type: String },
-    immediate: { type: true },
-    quality: { type: String },
-    blur: { type: String }
+    height: { type: String, default: '' },
+    fit: { type: String, default: '' },
+    position: { type: String, default: '' },
+    background: { type: String, default: '' },
+    immediate: { type: true, default: undefined },
+    quality: { type: String, default: '' },
+    blur: { type: String, default: '' }
   },
 
   render: (h, { data, props, parent }) => {
-    const isLazy = typeof props.immediate === 'undefined'
     const classNames = [data.class, 'g-image']
     const isImmediate = props.immediate || props.immediate !== undefined
     const noscriptClassNames = classNames.slice()
@@ -34,11 +32,10 @@ export default {
     switch (typeof props.src) {
       case 'string':
         attrs.src = props.src
-        attrs.width = props.width
 
         break
 
-      case 'object':
+      case 'object': {
         const { src, srcset, sizes, size, dataUri } = props.src
         const isLazy = !isImmediate && dataUri
 
@@ -48,9 +45,9 @@ export default {
         if (isLazy) attrs['data-src'] = src
         if (srcset.length) attrs[`${isLazy ? 'data-' : ''}srcset`] = srcset.join(', ')
         if (sizes) attrs[`${isLazy ? 'data-' : ''}sizes`] = sizes
-        if (size) attrs[`${isLazy ? 'data-' : ''}size`] = size
 
         break
+      }
     }
 
     res.push(h('img', {
@@ -83,7 +80,7 @@ export default {
       res.push(h('noscript', {
         domProps: {
           innerHTML: `` + 
-            `<img src="${attrs.src}" class="${stringifyClass(noscriptClassNames)}"` +
+            `<img src="${props.src.src}" class="${stringifyClass(noscriptClassNames)}"` +
             (attrs.width ? ` width="${attrs.width}"`: '') +
             (props.alt ? ` alt="${props.alt}"` : '') +
             `>`

gridsome/app/components/Link.js

@@ -12,32 +12,28 @@ const observer = caniuse.IntersectionObserver
 
 let uid = 0
 
+// @vue/component
 export default {
   functional: true,
 
   props: {
-    to: { type: [Object, String] },
-    page: { type: Number },
+    to: { type: [Object, String], default: null },
+    page: { type: Number, default: 0 },
     activeClass: { type: String, default: 'active' },
-    exactActiveClass: { type: String, default: 'active--exact' },
+    exactActiveClass: { type: String, default: 'active--exact' }
   },
 
-  render: (h, { data, props, parent, children, ...res }) => {
+  render: (h, { data, props, parent, children }) => {
     if (props.to && props.to.type === 'file') {
       data.attrs.href = props.to.src
+
       return h('a', data, children)
     }
-
-    const isExternalLinks = string => {
-      if (String(string).startsWith(config.siteUrl)) return false
-      const regex = RegExp('^(http:|https:|\/\/)');
-      return regex.test(string)
-    }
-
-
-    if(isExternalLinks(data.attrs.href)){
-      data.attrs.target = "_blank"
-      data.attrs.rel = "noopener"
+
+    if (isExternalLink(data.attrs.href)){
+      data.attrs.target = '_blank'
+      data.attrs.rel = 'noopener'
+
       return h('a', data, children)
     }
 
@@ -82,6 +78,12 @@ export default {
 }
 
 const isPreloaded = {}
+const externalRE = new RegExp('^(https?:|//)')
+
+function isExternalLink (string) {
+  if (String(string).startsWith(config.siteUrl)) return false
+  return externalRE.test(string)
+}
 
 function intersectionHandler ({ intersectionRatio, target }) {
   if (process.isClient) {

gridsome/app/components/Pager.js

@@ -13,8 +13,8 @@ export default {
     nextLabel: { type: String, default: '›' },
     lastLabel: { type: String, default: '»' },
     linkClass: { type: String, default: '' },
-    activeLinkClass: { type: String },
-    exactActiveLinkClass: { type: String },
+    activeLinkClass: { type: String, default: undefined },
+    exactActiveLinkClass: { type: String, default: undefined },
 
     // accessibility
     ariaLabel: { type: String, default: 'Pagination Navigation' },
@@ -33,14 +33,19 @@ export default {
     const renderLink = (page, text = page, ariaLabel = text) => {
       if (page === current) ariaLabel = props.ariaCurrentLabel
 
-      // Build props for Link component
-      const navigationLinkProps = { page }
-      if (props.activeLinkClass != undefined) navigationLinkProps.activeClass = props.activeLinkClass
-      if (props.exactActiveLinkClass != undefined) navigationLinkProps.exactActiveClass = props.exactActiveLinkClass
+      const linkProps = { page }
+
+      if (props.activeLinkClass) {
+        linkProps.activeClass = props.activeLinkClass
+      }
+
+      if (props.exactActiveLinkClass) {
+        linkProps.exactActiveClass = props.exactActiveLinkClass
+      }
 
       return h(Link, {
         staticClass: props.linkClass,
-        props: navigationLinkProps,
+        props: linkProps,
         attrs: {
           'aria-label': ariaLabel.replace('%n', page),
           'aria-current': current === page

gridsome/app/directives/observe-html.js

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { observe, unobserve } from '../components/Image'
 
 export default {

gridsome/app/page-query/dev.js

@@ -1,5 +1,3 @@
-/* global SOCKJS_ENDPOINT */
-
 import Vue from 'vue'
 import fetch from './fetch'
 import SockJS from 'sockjs-client'

gridsome/app/page-query/fetch.js

@@ -1,4 +1,4 @@
-/* global GRAPHQL_ENDPOINT, GRIDSOME_MODE, GRIDSOME_DATA_DIR */
+/* global GRIDSOME_MODE, GRIDSOME_DATA_DIR */
 
 import cache from './cache'
 import config from '~/.temp/config.js'

gridsome/app/router.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import config from '~/.temp/config.js'
 import routes from '~/.temp/routes.js'
 
 Vue.use(Router)

gridsome/lib/app/loadConfig.js

@@ -34,7 +34,6 @@ module.exports = (context, options = {}, pkg = {}) => {
     }
   }
 
-
   const localConfig = options.localConfig
     ? options.localConfig
     : fs.existsSync(configPath)