refactor: minimize function calls / use of bind

Author: pimlie

examples/vue-router/app.js

@@ -13,7 +13,7 @@ const ChildComponent = {
   props: ['page'],
   template: `<div>
 <h3>You're looking at the <strong>{{ page }}</strong> page</h3>
-<p>Has metaInfo been updated? {{ metaUpdated }}</p>
+<p>Has metaInfo been updated due to navigation? {{ metaUpdated }}</p>
 </div>`,
   metaInfo () {
     return {
@@ -64,6 +64,13 @@ const router = new Router({
 
 const App = {
   router,
+  metaInfo () {
+    return {
+      meta: [
+        { charset: 'utf=8' }
+      ]
+    }
+  },
   template: `
     <div id="app">
       <h1>vue-router</h1>
@@ -80,3 +87,43 @@ const App = {
 const app = new Vue(App)
 
 app.$mount('#app')
+/*
+const waitFor = time => new Promise(r => setTimeout(r, time || 1000))
+const o = {
+  meta: [{ a: 1 }]
+}
+const ob = Vue.observable(o)
+
+const root = new Vue({
+  beforeCreate() {
+    this.meta = ob.meta
+
+    this.$options.computed = this.$options.computed || {}
+    this.$options.computed['$ob'] = () => {
+      return { meta: this.meta }
+    }
+  },
+  created() {
+    console.log('HERE')
+    this.$watch('$ob', (a, b) => {
+      console.log('WATCHER', this.$ob.meta[0].a, a.meta[0].a, b.meta[0].a, diff(a, b))
+    }, { deep: true })
+  },
+  render(h) {
+    return h('div', null, 'test')
+  }
+})
+
+async function main () {
+  root.$mount('#app')
+  console.log(root)
+  await waitFor(500)
+
+  root.meta[0].a = 2
+  await waitFor(100)
+
+  ob.meta[0].a = 3
+  await waitFor(100)
+}
+main()
+/**/

src/browser.js

@@ -17,7 +17,9 @@ function install (Vue, options = {}) {
 
   options = setOptions(options)
 
-  Vue.prototype.$meta = $meta(options)
+  Vue.prototype.$meta = function () {
+    return $meta.call(this, options)
+  }
 
   Vue.mixin(createMixin(Vue, options))
 }

src/client/$meta.js

@@ -3,32 +3,27 @@ import { getOptions } from '../shared/options'
 import { pause, resume } from '../shared/pausing'
 import refresh from './refresh'
 
-export default function _$meta (options = {}) {
-  const _refresh = refresh(options)
-  const inject = () => {}
-
+export default function $meta (options = {}) {
   /**
    * Returns an injector for server-side rendering.
    * @this {Object} - the Vue instance (a root component)
    * @return {Object} - injector
    */
-  return function $meta () {
-    if (!this.$root._vueMeta) {
-      return {
-        getOptions: showWarningNotSupported,
-        refresh: showWarningNotSupported,
-        inject: showWarningNotSupported,
-        pause: showWarningNotSupported,
-        resume: showWarningNotSupported
-      }
-    }
-
+  if (!this.$root._vueMeta) {
     return {
-      getOptions: () => getOptions(options),
-      refresh: _refresh.bind(this),
-      inject,
-      pause: pause.bind(this),
-      resume: resume.bind(this)
+      getOptions: showWarningNotSupported,
+      refresh: showWarningNotSupported,
+      inject: showWarningNotSupported,
+      pause: showWarningNotSupported,
+      resume: showWarningNotSupported
     }
   }
+
+  return {
+    getOptions: () => getOptions(options),
+    refresh: () => refresh.call(this, options),
+    inject: () => {},
+    pause: () => pause.call(this),
+    resume: () => resume.call(this)
+  }
 }

src/client/refresh.js

@@ -4,7 +4,7 @@ import getMetaInfo from '../shared/getMetaInfo'
 import { isFunction } from '../utils/is-type'
 import updateClientMetaInfo from './updateClientMetaInfo'
 
-export default function _refresh (options = {}) {
+export default function refresh (options = {}) {
   /**
    * When called, will update the current meta info with new meta info.
    * Useful when updating meta info as the result of an asynchronous
@@ -15,20 +15,18 @@ export default function _refresh (options = {}) {
    *
    * @return {Object} - new meta info
    */
-  return function refresh () {
-    // collect & aggregate all metaInfo $options
-    const rawInfo = getComponentMetaInfo(options, this.$root)
+  // collect & aggregate all metaInfo $options
+  const rawInfo = getComponentMetaInfo(options, this.$root)
 
-    const metaInfo = getMetaInfo(options, rawInfo, clientSequences, this.$root)
+  const metaInfo = getMetaInfo(options, rawInfo, clientSequences, this.$root)
 
-    const appId = this.$root._vueMeta.appId
-    const tags = updateClientMetaInfo(appId, options, metaInfo)
+  const appId = this.$root._vueMeta.appId
+  const tags = updateClientMetaInfo(appId, options, metaInfo)
 
-    // emit "event" with new info
-    if (tags && isFunction(metaInfo.changed)) {
-      metaInfo.changed(metaInfo, tags.addedTags, tags.removedTags)
-    }
-
-    return { vm: this, metaInfo, tags }
+  // emit "event" with new info
+  if (tags && isFunction(metaInfo.changed)) {
+    metaInfo.changed(metaInfo, tags.addedTags, tags.removedTags)
   }
+
+  return { vm: this, metaInfo, tags }
 }

src/index.js

@@ -17,7 +17,9 @@ function install (Vue, options = {}) {
 
   options = setOptions(options)
 
-  Vue.prototype.$meta = $meta(options)
+  Vue.prototype.$meta = function () {
+    return $meta.call(this, options)
+  }
 
   Vue.mixin(createMixin(Vue, options))
 }

src/server/$meta.js

@@ -3,22 +3,17 @@ import { pause, resume } from '../shared/pausing'
 import refresh from '../client/refresh'
 import inject from './inject'
 
-export default function _$meta (options = {}) {
-  const _refresh = refresh(options)
-  const _inject = inject(options)
-
+export default function $meta (options = {}) {
   /**
    * Returns an injector for server-side rendering.
    * @this {Object} - the Vue instance (a root component)
    * @return {Object} - injector
    */
-  return function $meta () {
-    return {
-      getOptions: () => getOptions(options),
-      refresh: _refresh.bind(this),
-      inject: _inject.bind(this),
-      pause: pause.bind(this),
-      resume: resume.bind(this)
-    }
+  return {
+    getOptions: () => getOptions(options),
+    refresh: () => refresh.call(this, options),
+    inject: () => inject.call(this, options),
+    pause: () => pause.call(this),
+    resume: () => resume.call(this)
   }
 }

src/server/inject.js

@@ -11,15 +11,14 @@ export default function _inject (options = {}) {
    * @this {Object} - Vue instance - ideally the root component
    * @return {Object} - server meta info with `toString` methods
    */
-  return function inject () {
-    // collect & aggregate all metaInfo $options
-    const rawInfo = getComponentMetaInfo(options, this.$root)
 
-    const metaInfo = getMetaInfo(options, rawInfo, serverSequences, this.$root)
+  // collect & aggregate all metaInfo $options
+  const rawInfo = getComponentMetaInfo(options, this.$root)
 
-    // generate server injectors
-    generateServerInjector(options, metaInfo)
+  const metaInfo = getMetaInfo(options, rawInfo, serverSequences, this.$root)
 
-    return metaInfo
-  }
+  // generate server injectors
+  generateServerInjector(options, metaInfo)
+
+  return metaInfo
 }