feat: enable onload callbacks (#414)

* refactor(examples): run ssr example from server

* chore: switch to babel for build

buble complains too much

* feat: enable loaded callbacks

feat: add skip option

* examples: add async-callback browser example

* examples: fix server

* examples(ssr): add reactive script with callback

* fix: also skip on ssr

* chore: remove unused var

* feat: only add mutationobserver if DOM is still loading

feat: disconnect mutation observer once DOM has loaded

* examples: pass vmid to loadCallback instead of el

* feat: also support load callbacks for link/style tags

* test: add unit tests for load

* test: add load e2e test

* chore: fix lint

* chore: remove unused files

* test: fix e2e load callback test

* test: fix attempt

* examples: ie9 compatiblity

destructuring doesnt work in ie9

* fix: add onload attribute on ssr

dont rely on mutationobserver

* chore: lint ci conf

* refactor: remove loadCallbackAttribute config option

test: fix coverage for load

* test: improve coverage

* fix: only use console when it exists (for ie9)

* chore: fix coverage

.circleci/config.yml

@@ -134,5 +134,3 @@ workflows:
           requires:       [test-e2e-ssr]
           filters:
             branches:     { ignore: /^pull\/.*/ }
-
-

examples/index.html → examples/_static/index.html

@@ -11,9 +11,11 @@ <h1>Vue Meta Examples</h1>
     <li><a href="basic-render">Basic Render</a></li>
     <li><a href="keep-alive">Keep alive</a></li>
     <li><a href="multiple-apps">Usage with multiple apps</a></li>
+    <li><a href="ssr">SSR</a></li>
     <li><a href="vue-router">Usage with vue-router</a></li>
     <li><a href="vuex">Usage with vuex</a></li>
     <li><a href="vuex-async">Usage with vuex + async actions</a></li>
+    <li><a href="async-callback">Async Callback</a></li>
   </ul>
 </body>
 </html>

examples/_static/user-1.js

@@ -0,0 +1,23 @@
+window.users.push({
+  'id': 1,
+  'name': 'Leanne Graham',
+  'username': 'Bret',
+  'email': 'Sincere@april.biz',
+  'address': {
+    'street': 'Kulas Light',
+    'suite': 'Apt. 556',
+    'city': 'Gwenborough',
+    'zipcode': '92998-3874',
+    'geo': {
+      'lat': '-37.3159',
+      'lng': '81.1496'
+    }
+  },
+  'phone': '1-770-736-8031 x56442',
+  'website': 'hildegard.org',
+  'company': {
+    'name': 'Romaguera-Crona',
+    'catchPhrase': 'Multi-layered client-server neural-net',
+    'bs': 'harness real-time e-markets'
+  }
+})

examples/_static/user-2.js

@@ -0,0 +1,23 @@
+window.users.push({
+  'id': 2,
+  'name': 'Ervin Howell',
+  'username': 'Antonette',
+  'email': 'Shanna@melissa.tv',
+  'address': {
+    'street': 'Victor Plains',
+    'suite': 'Suite 879',
+    'city': 'Wisokyburgh',
+    'zipcode': '90566-7771',
+    'geo': {
+      'lat': '-43.9509',
+      'lng': '-34.4618'
+    }
+  },
+  'phone': '010-692-6593 x09125',
+  'website': 'anastasia.net',
+  'company': {
+    'name': 'Deckow-Crist',
+    'catchPhrase': 'Proactive didactic contingency',
+    'bs': 'synergize scalable supply-chains'
+  }
+})

examples/_static/user-3.js

@@ -0,0 +1,23 @@
+window.users.push({
+  'id': 3,
+  'name': 'Clementine Bauch',
+  'username': 'Samantha',
+  'email': 'Nathan@yesenia.net',
+  'address': {
+    'street': 'Douglas Extension',
+    'suite': 'Suite 847',
+    'city': 'McKenziehaven',
+    'zipcode': '59590-4157',
+    'geo': {
+      'lat': '-68.6102',
+      'lng': '-47.0653'
+    }
+  },
+  'phone': '1-463-123-4447',
+  'website': 'ramiro.info',
+  'company': {
+    'name': 'Romaguera-Jacobson',
+    'catchPhrase': 'Face to face bifurcated interface',
+    'bs': 'e-enable strategic applications'
+  }
+})

examples/_static/user-4.js

@@ -0,0 +1,23 @@
+window.users.push({
+  'id': 4,
+  'name': 'Patricia Lebsack',
+  'username': 'Karianne',
+  'email': 'Julianne.OConner@kory.org',
+  'address': {
+    'street': 'Hoeger Mall',
+    'suite': 'Apt. 692',
+    'city': 'South Elvis',
+    'zipcode': '53919-4257',
+    'geo': {
+      'lat': '29.4572',
+      'lng': '-164.2990'
+    }
+  },
+  'phone': '493-170-9623 x156',
+  'website': 'kale.biz',
+  'company': {
+    'name': 'Robel-Corkery',
+    'catchPhrase': 'Multi-tiered zero tolerance productivity',
+    'bs': 'transition cutting-edge web services'
+  }
+})

examples/async-callback/app.js

@@ -0,0 +1,88 @@
+import Vue from 'vue'
+import VueMeta from 'vue-meta'
+
+Vue.use(VueMeta)
+
+window.users = []
+
+new Vue({
+  metaInfo () {
+    return {
+      title: 'Async Callback',
+      titleTemplate: '%s | Vue Meta Examples',
+      script: [
+        {
+          skip: this.count < 2,
+          vmid: 'potatoes',
+          src: '/user-3.js',
+          async: true,
+          callback: this.updateCounter
+        },
+        {
+          skip: this.count < 1,
+          vmid: 'vegetables',
+          src: '/user-2.js',
+          async: true,
+          callback: this.updateCounter
+        },
+        {
+          vmid: 'meat',
+          src: '/user-1.js',
+          async: true,
+          callback: el => this.loadCallback(el.getAttribute('data-vmid'))
+        },
+        ...this.scripts
+      ]
+    }
+  },
+  data () {
+    return {
+      count: 0,
+      scripts: [],
+      users: window.users
+    }
+  },
+  watch: {
+    count (val) {
+      if (val === 3) {
+        this.addScript()
+      }
+    }
+  },
+  methods: {
+    updateCounter () {
+      this.count++
+    },
+    addScript () {
+      this.scripts.push({
+        src: '/user-4.js',
+        callback: () => {
+          this.updateCounter()
+        }
+      })
+    },
+    loadCallback (vmid) {
+      if (vmid === 'meat') {
+        this.updateCounter()
+      }
+    }
+  },
+  template: `
+    <div id="app">
+      <h1>Async Callback</h1>
+      <p>{{ count }} scripts loaded</p>
+
+      <div>
+        <h2>Users</h2>
+        <ul>
+          <li
+            v-for="user in users"
+            :key="user.id"
+          >
+          <strong>{{ user.id }}</strong>: {{ user.name }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  `
+}).$mount('#app')

examples/async-callback/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Async Callback Title</title>
+  <link rel="stylesheet" href="/global.css">
+</head>
+<body>
+  <a href="/">&larr; Examples index</a>
+  <div id="app"></div>
+
+  <script src="/__build__/async-callback.js"></script>
+</body>
+</html>

examples/basic-render/app.js

@@ -11,10 +11,10 @@ Vue.component('child', {
       default: ''
     }
   },
-  render(h) {
+  render (h) {
     return h('h3', null, this.page)
   },
-  metaInfo() {
+  metaInfo () {
     return {
       title: this.page
     }

examples/keep-alive/app.js

@@ -11,11 +11,11 @@ Vue.component('foo', {
 })
 
 new Vue({
-  data() {
+  data () {
     return { showFoo: false }
   },
   methods: {
-    show() {
+    show () {
       this.showFoo = !this.showFoo
     }
   },

examples/multiple-apps/app.js

@@ -6,23 +6,23 @@ Vue.use(VueMeta)
 // index.html contains a manual SSR render
 
 const app1 = new Vue({
-  metaInfo() {
+  metaInfo () {
     return {
       title: 'App 1 title',
       bodyAttrs: {
         class: 'app-1'
       },
       meta: [
         { name: 'description', content: 'Hello from app 1', vmid: 'test' },
-        { name: 'og:description', content:  this.ogContent }
+        { name: 'og:description', content: this.ogContent }
       ],
       script: [
         { innerHTML: 'var appId=1.1', body: true },
-        { innerHTML: 'var appId=1.2', vmid: 'app-id-body' },
+        { innerHTML: 'var appId=1.2', vmid: 'app-id-body' }
       ]
     }
   },
-  data() {
+  data () {
     return {
       ogContent: 'Hello from ssr app'
     }
@@ -44,7 +44,7 @@ const app2 = new Vue({
     ],
     script: [
       { innerHTML: 'var appId=2.1', body: true },
-      { innerHTML: 'var appId=2.2', vmid: 'app-id-body', body: true },
+      { innerHTML: 'var appId=2.2', vmid: 'app-id-body', body: true }
     ]
   }),
   template: `
@@ -60,7 +60,6 @@ const app3 = new Vue({
   `
 }).$mount('#app3')
 
-
 setTimeout(() => {
   console.log('trigger app 1')
   app1.$data.ogContent = 'Hello from app 1'
@@ -75,8 +74,9 @@ setTimeout(() => {
   console.log('trigger app 3')
   app3.$meta().refresh()
 }, 7500)
+
 setTimeout(() => {
   console.log('trigger app 4')
   const App = Vue.extend({ template: `<div>app 4</div>` })
-  const app4 = new App().$mount()
+  new App().$mount()
 }, 10000)

examples/server.js

@@ -6,11 +6,13 @@ import rewrite from 'express-urlrewrite'
 import webpack from 'webpack'
 import webpackDevMiddleware from 'webpack-dev-middleware'
 import WebpackConfig from './webpack.config'
+import { renderPage } from './ssr/server'
 
 const app = express()
 
 app.use(webpackDevMiddleware(webpack(WebpackConfig), {
   publicPath: '/__build__/',
+  writeToDisk: false,
   stats: {
     colors: true,
     chunks: false
@@ -21,12 +23,27 @@ fs.readdirSync(__dirname)
   .filter(file => file !== 'ssr')
   .forEach((file) => {
     if (fs.statSync(path.join(__dirname, file)).isDirectory()) {
-      app.use(rewrite('/' + file + '/*', '/' + file + '/index.html'))
+      app.use(rewrite(`/${file}/*`, `/${file}/index.html`))
     }
   })
 
+app.use(express.static(path.join(__dirname, '_static')))
 app.use(express.static(__dirname))
 
+app.use(async (req, res, next) => {
+  if (!req.url.startsWith('/ssr')) {
+    next()
+  }
+
+  try {
+    const html = await renderPage()
+    res.send(html)
+  } catch (e) {
+    consola.error('SSR Oops:', e)
+    next()
+  }
+})
+
 const host = process.env.HOST || 'localhost'
 const port = process.env.PORT || 3000