diff --git a/examples/vue-router/app.js b/examples/vue-router/app.js
index c3c1439..1e2a5f2 100644
--- a/examples/vue-router/app.js
+++ b/examples/vue-router/app.js
@@ -13,7 +13,7 @@ const ChildComponent = {
props: ['page'],
template: `
You're looking at the {{ page }} page
-
Has metaInfo been updated? {{ metaUpdated }}
+
Has metaInfo been updated due to navigation? {{ metaUpdated }}
`,
metaInfo () {
return {
@@ -64,6 +64,13 @@ const router = new Router({
const App = {
router,
+ metaInfo () {
+ return {
+ meta: [
+ { charset: 'utf=8' }
+ ]
+ }
+ },
template: `
vue-router
@@ -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()
+/**/
diff --git a/src/browser.js b/src/browser.js
index 4b1b237..87f2c1f 100644
--- a/src/browser.js
+++ b/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))
}
diff --git a/src/client/$meta.js b/src/client/$meta.js
index 8d2a121..f5d38c5 100644
--- a/src/client/$meta.js
+++ b/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)
+ }
}
diff --git a/src/client/refresh.js b/src/client/refresh.js
index 06384d9..8f1ce0b 100644
--- a/src/client/refresh.js
+++ b/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 }
}
diff --git a/src/index.js b/src/index.js
index 9dabb38..7cc601f 100644
--- a/src/index.js
+++ b/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))
}
diff --git a/src/server/$meta.js b/src/server/$meta.js
index d731ac9..76e040a 100644
--- a/src/server/$meta.js
+++ b/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)
}
}
diff --git a/src/server/inject.js b/src/server/inject.js
index 041d8c1..4ee5ad0 100644
--- a/src/server/inject.js
+++ b/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
}