From 7fe58438d88074c991579a452221aa377e29e056 Mon Sep 17 00:00:00 2001
From: Declan de Wet <declandewet@me.com>
Date: Thu, 3 Nov 2016 18:48:01 +0200
Subject: [PATCH] add change event

---
 README.md                          | 20 ++++++++++++++++++++
 src/client/updateClientMetaInfo.js | 20 ++++++++++++++------
 src/shared/getMetaInfo.js          |  2 +-
 test/basic.spec.js                 |  2 +-
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index f63a5a0..2fe19a0 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,7 @@
       - [`style` ([Object])](#style-object)
       - [`script` ([Object])](#script-object)
       - [`noscript` ([Object])](#noscript-object)
+      - [`changed` (Function)](#changed-function)
     - [How `metaInfo` is Resolved](#how-metainfo-is-resolved)
 - [Performance](#performance)
     - [How to prevent the update on the initial page render](#how-to-prevent-the-update-on-the-initial-page-render)
@@ -485,6 +486,25 @@ Each item in the array maps to a newly-created `<noscript>` element, where objec
 <noscript>This website requires JavaScript.</noscript>
 ```
 
+#### `changed` (Function)
+
+Will be called when the client `metaInfo` updates/changes. Receives the following parameters:
+- `newInfo` (Object) - The new state of the `metaInfo` object.
+- `addedTags` ([HTMLElement]) - a list of elements that were added.
+- `removedTags` ([HTMLElement]) - a list of elements that were removed.
+
+`this` context is the component instance `changed` is defined on.
+
+```js
+{
+  metaInfo: {
+    changed (newInfo, addedTags, removedTags) {
+      console.log('Meta info was updated!')
+    }
+  }
+}
+```
+
 ### How `metaInfo` is Resolved
 
 You can define a `metaInfo` property on any component in the tree. Child components that have `metaInfo` will recursively merge their `metaInfo` into the parent context, overwriting any duplicate properties. To better illustrate, consider this component heirarchy:
diff --git a/src/client/updateClientMetaInfo.js b/src/client/updateClientMetaInfo.js
index 5efe7cd..5c22ecf 100644
--- a/src/client/updateClientMetaInfo.js
+++ b/src/client/updateClientMetaInfo.js
@@ -28,6 +28,10 @@ if (typeof window !== 'undefined' && window !== null) {
 export default function updateClientMetaInfo (newInfo, $root) {
   // if this is not a server render, then update
   if (htmlTag.getAttribute(SERVER_RENDERED_ATTRIBUTE) === null) {
+    // initialize tracked changes
+    const addedTags = {}
+    const removedTags = {}
+
     // update the title
     updateTitle(newInfo.title)
 
@@ -40,14 +44,18 @@ export default function updateClientMetaInfo (newInfo, $root) {
     // update tags
     for (let i = 0, len = tags.length; i < len; i++) {
       const tag = tags[i]
-      updateTags(tag, newInfo[tag], headTag)
+      const { oldTags, newTags } = updateTags(tag, newInfo[tag], headTag)
+      if (newTags.length) {
+        addedTags[tag] = newTags
+        removedTags[tag] = oldTags
+      }
+    }
+
+    // emit event
+    if (typeof newInfo.changed === 'function') {
+      newInfo.changed(newInfo, addedTags, removedTags)
     }
   } else {
     htmlTag.removeAttribute(SERVER_RENDERED_ATTRIBUTE)
   }
-
-  // HACK: since we're performing DOM side effects, we can't rely on
-  // Vue.nextTick in our tests. This event helps keep the test suite
-  // free of setTimeout clutter
-  $root.$emit('vue-meta-update')
 }
diff --git a/src/shared/getMetaInfo.js b/src/shared/getMetaInfo.js
index 74ba49e..feb1e85 100644
--- a/src/shared/getMetaInfo.js
+++ b/src/shared/getMetaInfo.js
@@ -15,7 +15,7 @@ export default function getMetaInfo (component) {
   for (let key in info) {
     if (info.hasOwnProperty(key)) {
       const value = info[key]
-      if (typeof value === 'function') {
+      if (typeof value === 'function' && key !== 'changed') {
         info[key] = value()
       }
     }
diff --git a/test/basic.spec.js b/test/basic.spec.js
index d0d8fd2..c594615 100644
--- a/test/basic.spec.js
+++ b/test/basic.spec.js
@@ -11,8 +11,8 @@ describe('basic', () => {
 
   function setMetaInfo (metaInfo) {
     return new Promise((resolve) => {
+      metaInfo = Vue.util.extend(metaInfo, { changed: resolve })
       vm = new Vue({ el: container, metaInfo })
-      vm.$on('vue-meta-update', resolve)
     })
   }