fix: ids now referenced properly

using replaceChild method for home memory

docs/en/index.html

@@ -202,7 +202,7 @@ <h1 class="search-results-title">No results matching "<span class='search-query'
     <script>
         var gitbook = gitbook || [];
         gitbook.push(function() {
-            gitbook.page.hasChanged({"page":{"title":"Introduction","level":"1.1","depth":1,"next":{"title":"Installation","level":"1.2","depth":1,"path":"installation.md","ref":"installation.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","theme-vuejs@git+https://github.com/pearofducks/gitbook-plugin-theme-vuejs.git","-fontsettings","github","[email protected]"],"root":"./","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"github":{"url":"https://github.com/calebroseland/vue-dom-portal/"},"search":{},"theme-vuejs":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"highlight":{},"advanced-emoji":{"embedEmojis":false},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit This Page","base":"https://github.com/calebroseland/vue-dom-portal/tree/dev/gitbook"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"language":"en","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"*"},"file":{"path":"README.md","mtime":"2017-01-18T06:39:22.167Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-18T19:03:28.306Z"},"basePath":".","book":{"language":"en"}});
+            gitbook.page.hasChanged({"page":{"title":"Introduction","level":"1.1","depth":1,"next":{"title":"Installation","level":"1.2","depth":1,"path":"installation.md","ref":"installation.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","theme-vuejs@git+https://github.com/pearofducks/gitbook-plugin-theme-vuejs.git","-fontsettings","github","[email protected]"],"root":"./","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"github":{"url":"https://github.com/calebroseland/vue-dom-portal/"},"search":{},"theme-vuejs":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"highlight":{},"advanced-emoji":{"embedEmojis":false},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit This Page","base":"https://github.com/calebroseland/vue-dom-portal/tree/dev/gitbook"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"language":"en","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"*"},"file":{"path":"README.md","mtime":"2017-01-18T06:39:22.167Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-18T20:55:18.259Z"},"basePath":".","book":{"language":"en"}});
         });
     </script>
 </div>

docs/en/installation.html

@@ -219,7 +219,7 @@ <h1 class="search-results-title">No results matching "<span class='search-query'
     <script>
         var gitbook = gitbook || [];
         gitbook.push(function() {
-            gitbook.page.hasChanged({"page":{"title":"Installation","level":"1.2","depth":1,"previous":{"title":"Introduction","level":"1.1","depth":1,"path":"README.md","ref":"README.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","theme-vuejs@git+https://github.com/pearofducks/gitbook-plugin-theme-vuejs.git","-fontsettings","github","[email protected]"],"root":"./","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"github":{"url":"https://github.com/calebroseland/vue-dom-portal/"},"search":{},"theme-vuejs":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"highlight":{},"advanced-emoji":{"embedEmojis":false},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit This Page","base":"https://github.com/calebroseland/vue-dom-portal/tree/dev/gitbook"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"language":"en","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"*"},"file":{"path":"installation.md","mtime":"2017-01-18T04:25:53.091Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-18T19:03:28.306Z"},"basePath":".","book":{"language":"en"}});
+            gitbook.page.hasChanged({"page":{"title":"Installation","level":"1.2","depth":1,"previous":{"title":"Introduction","level":"1.1","depth":1,"path":"README.md","ref":"README.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","theme-vuejs@git+https://github.com/pearofducks/gitbook-plugin-theme-vuejs.git","-fontsettings","github","[email protected]"],"root":"./","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"github":{"url":"https://github.com/calebroseland/vue-dom-portal/"},"search":{},"theme-vuejs":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"highlight":{},"advanced-emoji":{"embedEmojis":false},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit This Page","base":"https://github.com/calebroseland/vue-dom-portal/tree/dev/gitbook"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"language":"en","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"*"},"file":{"path":"installation.md","mtime":"2017-01-18T04:25:53.091Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-18T20:55:18.259Z"},"basePath":".","book":{"language":"en"}});
         });
     </script>
 </div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-dom-portal",
   "description": "An escape hatch directive for DOM Elements in Vue.js components.",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": {
     "name": "Caleb Roseland",
     "email": "[email protected]"

src/index.js

@@ -1,5 +1,7 @@
 /**
  * Get target DOM Node
+ * @param {(Node|string|Boolean)} [node=document.body] DOM Node, CSS selector, or Boolean
+ * @return {Node} The target that the el will be appended to
  */
 function getTarget (node = document.body) {
   if (node === true) return document.body
@@ -9,33 +11,39 @@ function getTarget (node = document.body) {
 const homes = new Map()
 
 const directive = {
-  inserted (el, { value }, { key }) {
-    // el is home
+  inserted (el, { value }, vnode) {
     const { parentNode } = el
-    const home = document.createComment()
-
-    parentNode.replaceChild(home, el) // moving out, el is no longer in the document
-
-    if (!homes.has(key)) homes.set(key, { parentNode, home }) // remember where home is
+    const home = document.createComment('')
+    let hasMovedOut = false
 
     if (value !== false) {
-      getTarget(value).appendChild(el) // moving out
+      parentNode.replaceChild(home, el) // moving out, el is no longer in the document
+      getTarget(value).appendChild(el) // moving into new place
+      hasMovedOut = true
     }
+
+    if (!homes.has(el)) homes.set(el, { parentNode, home, hasMovedOut }) // remember where home is or should be
   },
-  update (el, { value }, { key }) {
-    const { parentNode, home } = homes.get(key)
-
-    if (value === false) {
-      parentNode.replaceChild(el, home) // moving home
-      homes.delete(key) // no need to remember anymore
-    } else {
-      getTarget(value).appendChild(el) // moving somewhere else
+  componentUpdated (el, { value }) { // need to make sure children are done updating (vs. `update`)
+    const { parentNode, home, hasMovedOut } = homes.get(el) // recall where home is
+
+    if (!hasMovedOut && value) {
+      // never moved out on initial insert; value must have started out false
+      parentNode.replaceChild(home, el)
+      getTarget(value).appendChild(el) // moving into new place
+      homes.set(el, { ...homes.get(el), hasMovedOut: true }) // indicate that we've moved out
+    } else if (hasMovedOut && value === false) {
+      // already moved out, moving back home
+      parentNode.replaceChild(el, home)
+      homes.set(el, { ...homes.get(el), hasMovedOut: false }) // indicate that we've moved back home
+      // homes.delete(el)
+    } else if (value) {
+      // already moved out, moving somewhere else
+      getTarget(value).appendChild(el)
     }
   },
-  unbind (el, binding, { key }) {
-    const { parentNode, home } = homes.get(key)
-    parentNode.replaceChild(el, home) // moving home
-    homes.delete(key) // no need to remember anymore
+  unbind (el, binding) {
+    homes.delete(el) // no need to remember anymore
   }
 }