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 }