chore: lint examples

examples/.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["@babel/preset-env"]
+  "presets": [["@babel/preset-env", { targets: { node: "current" } }]],
+  "plugins": ["dynamic-import-node"]
 }

examples/basic-render/app.js

@@ -5,11 +5,16 @@ Vue.use(VueMeta)
 
 Vue.component('child', {
   name: 'Child',
-  props: ['page'],
-  render (h) {
+  props: {
+    page: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h) {
     return h('h3', null, this.page)
   },
-  metaInfo () {
+  metaInfo() {
     return {
       title: this.page
     }

examples/keep-alive/app.js

@@ -11,6 +11,14 @@ Vue.component('foo', {
 })
 
 new Vue({
+  data() {
+    return { showFoo: false }
+  },
+  methods: {
+    show() {
+      this.showFoo = !this.showFoo
+    }
+  },
   template: `
     <div id="app">
       <h1>Kept alive foo</h1>
@@ -20,14 +28,6 @@ new Vue({
       </keep-alive>
     </div>
   `,
-  data () {
-    return { showFoo: false }
-  },
-  methods: {
-    show () {
-      this.showFoo = !this.showFoo
-    }
-  },
   metaInfo: () => ({
     title: 'Keep-alive'
   })

examples/package.json

@@ -6,7 +6,8 @@
   "private": true,
   "scripts": {
     "dev": "cross-env NODE_ENV=development babel-node server.js",
-    "start": "babel-node server.js"
+    "start": "babel-node server.js",
+    "ssr": "babel-node ssr"
   },
   "repository": {
     "type": "git",
@@ -23,9 +24,13 @@
     "@babel/node": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
     "babel-loader": "^8.0.5",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "consola": "^2.5.6",
     "cross-env": "^5.2.0",
     "express": "^4.16.4",
     "express-urlrewrite": "^1.2.0",
+    "fs-extra": "^7.0.1",
+    "lodash": "^4.17.11",
     "vue": "^2.6.6",
     "vue-loader": "^15.6.4",
     "vue-meta": "^1.5.8",

examples/server.js

@@ -1,5 +1,6 @@
 import fs from 'fs'
 import path from 'path'
+import consola from 'consola'
 import express from 'express'
 import rewrite from 'express-urlrewrite'
 import webpack from 'webpack'
@@ -16,7 +17,7 @@ app.use(webpackDevMiddleware(webpack(WebpackConfig), {
   }
 }))
 
-fs.readdirSync(__dirname).forEach(file => {
+fs.readdirSync(__dirname).forEach((file) => {
   if (fs.statSync(path.join(__dirname, file)).isDirectory()) {
     app.use(rewrite('/' + file + '/*', '/' + file + '/index.html'))
   }
@@ -28,5 +29,5 @@ const host = process.env.HOST || 'localhost'
 const port = process.env.PORT || 3000
 
 module.exports = app.listen(port, host, () => {
-  console.log(`Server listening on http://${host}:${port}, Ctrl+C to stop`)
+  consola.info(`Server listening on http://${host}:${port}, Ctrl+C to stop`)
 })

examples/ssr.tagid.js

@@ -1,44 +0,0 @@
-const Vue = require('vue')
-const renderer = require('vue-server-renderer').createRenderer()
-const VueMeta = require(process.env.NODE_ENV === 'development' ? '../' : 'vue-meta')
-
-Vue.use(VueMeta, {
-  tagIDKeyName: 'hid'
-})
-
-const vm = new Vue({
-  template: '<hello/>',
-  metaInfo: {
-    title: 'Hello',
-    htmlAttrs: { amp: undefined },
-    meta: [
-      { hid: 'description', name: 'description', content: 'Hello World' }
-    ],
-    script: [
-      { hid: 'schema', innerHTML: '{ "@context": "http://www.schema.org", "@type": "Organization" }', type: 'application/ld+json' },
-      { innerHTML: '{ "body": "yes" }', body: true, type: 'application/ld+json' }
-    ],
-    __dangerouslyDisableSanitizersByTagID: { schema: ['innerHTML'] }
-  },
-  components: {
-    Hello: {
-      template: '<p>Hello</p>',
-      metaInfo: {
-        title: 'Coucou',
-        meta: [
-          { hid: 'description', name: 'description', content: 'Coucou' }
-        ]
-      }
-    }
-  }
-})
-
-renderer.renderToString(vm, function (err, html) {
-  if (err) throw err
-  const $meta = vm.$meta().inject()
-  console.log('Title:\n' + $meta.title.text())
-  console.log('\nHTML attrs:\n' + $meta.htmlAttrs.text())
-  console.log('\nMeta:\n' + $meta.meta.text())
-  console.log('\nHead Script:\n' + $meta.script.text())
-  console.log('\nBody Script:\n' + $meta.script.text({ body: true }))
-})

examples/vue-router/app.js

@@ -15,7 +15,7 @@ const ChildComponent = {
 <h3>You're looking at the <strong>{{ page }}</strong> page</h3>
 <p>Has metaInfo been updated? {{ metaUpdated }}</p>
 </div>`,
-  metaInfo () {
+  metaInfo() {
     return {
       title: `${this.page} - ${this.date && this.date.toTimeString()}`,
       afterNavigation() {
@@ -27,22 +27,22 @@ const ChildComponent = {
     return {
       date: null,
       metaUpdated
-    };
+    }
   },
   mounted() {
     setInterval(() => {
-      this.date = new Date();
-    }, 1000);
+      this.date = new Date()
+    }, 1000)
   }
 }
 
 // this wrapper function is not a requirement for vue-router,
 // just a demonstration that render-function style components also work.
 // See https://github.com/nuxt/vue-meta/issues/9 for more info.
-function view (page) {
+function view(page) {
   return {
     name: `section-${page}`,
-    render (h) {
+    render(h) {
       return h(ChildComponent, {
         props: { page }
       })

examples/vuex-async/store.js

@@ -35,33 +35,33 @@ export default new Vuex.Store({
 
   // GETTERS
   getters: {
-    isLoading (state) {
+    isLoading(state) {
       return state.isLoading
     },
-    post (state) {
+    post(state) {
       return state.post
     },
-    publishedPosts (state) {
-      return state.posts.filter((post) => post.published)
+    publishedPosts(state) {
+      return state.posts.filter(post => post.published)
     },
-    publishedPostsCount (state, getters) {
+    publishedPostsCount(state, getters) {
       return getters.publishedPosts.length
     }
   },
 
   // MUTATIONS
   mutations: {
-    loadingState (state, { isLoading }) {
+    loadingState(state, { isLoading }) {
       state.isLoading = isLoading
     },
-    getPost (state, { slug }) {
-      state.post = state.posts.find((post) => post.slug === slug)
+    getPost(state, { slug }) {
+      state.post = state.posts.find(post => post.slug === slug)
     }
   },
 
   // ACTIONS
   actions: {
-    getPost ({ commit }, payload) {
+    getPost({ commit }, payload) {
       commit('loadingState', { isLoading: true })
       setTimeout(() => {
         commit('getPost', payload)

examples/vuex/store.js

@@ -35,27 +35,27 @@ export default new Vuex.Store({
 
   // GETTERS
   getters: {
-    post (state) {
+    post(state) {
       return state.post
     },
-    publishedPosts (state) {
-      return state.posts.filter((post) => post.published)
+    publishedPosts(state) {
+      return state.posts.filter(post => post.published)
     },
-    publishedPostsCount (state, getters) {
+    publishedPostsCount(state, getters) {
       return getters.publishedPosts.length
     }
   },
 
   // MUTATIONS
   mutations: {
-    getPost (state, { slug }) {
-      state.post = state.posts.find((post) => post.slug === slug)
+    getPost(state, { slug }) {
+      state.post = state.posts.find(post => post.slug === slug)
     }
   },
 
   // ACTIONS
   actions: {
-    getPost ({ commit }, payload) {
+    getPost({ commit }, payload) {
       commit('getPost', payload)
     }
   }