vue-frag - npm Package Compare versions

Comparing version 1.2.5 to 1.3.0

dist/frag.cjs.js

@@ -249,2 +249,17 @@ "use strict";
 
+var Fragment = {
+    directives: {
+        frag: frag
+    },
+    render: function render(h) {
+        return h("div", {
+            directives: [ {
+                name: "frag"
+            } ]
+        }, this.$slots["default"]);
+    }
+};
+
+frag.Fragment = Fragment;
+
 module.exports = frag;

dist/frag.cjs.min.js

@@ -1,1 +0,1 @@
-"use strict";var e,t=Symbol(),r=Symbol(),n=Symbol(),i=Symbol(),o=function(e){return"frag"in e};function a(e,t){r in e||(e[r]=t,Object.defineProperty(e,"parentNode",{get:function(){return this[r]||this.parentElement}}))}function f(e){n in e||(e[n]=!0,Object.defineProperty(e,"nextSibling",{get:function(){var e=this.parentNode.childNodes,t=e.indexOf(this);return t>-1&&e[t+1]||null}}))}function c(t){if(!e){var r=Object.getOwnPropertyDescriptor(Node.prototype,"childNodes");e=r.get}var n=e.apply(t),i=Array.from(n).map((function(e){return function(e,t){for(;e.parentNode!==t;){var r=e.parentNode;r&&(e=r)}return e}(e,t)}));return i.filter((function(e,t){return e!==i[t-1]}))}function s(e){i in e||(e[i]=!0,Object.defineProperties(e,{childNodes:{get:function(){return this.frag||c(this)}},firstChild:{get:function(){return this.childNodes[0]||null}}}),e.hasChildNodes=function(){return this.childNodes.length>0})}function h(){var e;(e=this.frag[0]).before.apply(e,arguments)}function u(){var e=this.frag;e.splice(0,e.length).forEach((function(e){e.remove()}))}var p=function e(t){var r;return(r=Array.prototype).concat.apply(r,t.map((function(t){return o(t)?e(t.frag):t})))};function l(e){if(o(this)){var r=this.frag.indexOf(e);if(r>-1){var n=this.frag.splice(r,1)[0];0===this.frag.length&&function(e,r){var n=e[t];r.before(n),a(n,e),e.frag.unshift(n)}(this,n),e.remove()}}else{c(this).indexOf(e)>-1&&e.remove()}return e}function d(e,t){var r=this,n=e.frag||[e];if(o(this)){var i=this.frag;if(t){var c=i.indexOf(t);c>-1&&(i.splice.apply(i,[c,0].concat(n)),t.before.apply(t,n))}else{var s=i[i.length-1];i.push.apply(i,n),s.after.apply(s,n)}v(this)}else t?this.childNodes.includes(t)&&t.before.apply(t,n):this.append.apply(this,n);return n.forEach((function(e){a(e,r)})),f(n[n.length-1]),e}function g(e){var t=this.frag;return t[t.length-1].after(e),a(e,this),v(this),t.push(e),e}function v(e){var r=e[t];e.frag[0]===r&&(e.frag.shift(),r.remove())}var m={inserted:function(e){var r=e.parentNode,n=e.nextSibling,i=e.previousSibling,o=Array.from(e.childNodes),c=document.createComment("");0===o.length&&o.push(c),e.frag=o,e[t]=c;var v=document.createDocumentFragment();v.append.apply(v,p(o)),e.replaceWith(v),o.forEach((function(t){a(t,e),f(t)})),s(e),Object.assign(e,{remove:u,appendChild:g,insertBefore:d,removeChild:l,before:h}),Object.defineProperty(e,"innerHTML",{set:function(e){var t=this,r=document.createElement("div");r.innerHTML=e;var n=this.frag.length;Array.from(r.childNodes).forEach((function(e){t.appendChild(e)})),r.append.apply(r,this.frag.splice(0,n))},get:function(){return""}}),r&&(Object.assign(r,{removeChild:l,insertBefore:d}),a(e,r),s(r)),n&&f(e),i&&f(i)},unbind:function(e){e.remove()}};module.exports=m;
+"use strict";var e,t=Symbol(),r=Symbol(),n=Symbol(),i=Symbol(),o=function(e){return"frag"in e};function a(e,t){r in e||(e[r]=t,Object.defineProperty(e,"parentNode",{get:function(){return this[r]||this.parentElement}}))}function f(e){n in e||(e[n]=!0,Object.defineProperty(e,"nextSibling",{get:function(){var e=this.parentNode.childNodes,t=e.indexOf(this);return t>-1&&e[t+1]||null}}))}function s(t){if(!e){var r=Object.getOwnPropertyDescriptor(Node.prototype,"childNodes");e=r.get}var n=e.apply(t),i=Array.from(n).map((function(e){return function(e,t){for(;e.parentNode!==t;){var r=e.parentNode;r&&(e=r)}return e}(e,t)}));return i.filter((function(e,t){return e!==i[t-1]}))}function c(e){i in e||(e[i]=!0,Object.defineProperties(e,{childNodes:{get:function(){return this.frag||s(this)}},firstChild:{get:function(){return this.childNodes[0]||null}}}),e.hasChildNodes=function(){return this.childNodes.length>0})}function u(){var e;(e=this.frag[0]).before.apply(e,arguments)}function h(){var e=this.frag;e.splice(0,e.length).forEach((function(e){e.remove()}))}var p=function e(t){var r;return(r=Array.prototype).concat.apply(r,t.map((function(t){return o(t)?e(t.frag):t})))};function l(e){if(o(this)){var r=this.frag.indexOf(e);if(r>-1){var n=this.frag.splice(r,1)[0];0===this.frag.length&&function(e,r){var n=e[t];r.before(n),a(n,e),e.frag.unshift(n)}(this,n),e.remove()}}else{s(this).indexOf(e)>-1&&e.remove()}return e}function d(e,t){var r=this,n=e.frag||[e];if(o(this)){var i=this.frag;if(t){var s=i.indexOf(t);s>-1&&(i.splice.apply(i,[s,0].concat(n)),t.before.apply(t,n))}else{var c=i[i.length-1];i.push.apply(i,n),c.after.apply(c,n)}v(this)}else t?this.childNodes.includes(t)&&t.before.apply(t,n):this.append.apply(this,n);return n.forEach((function(e){a(e,r)})),f(n[n.length-1]),e}function g(e){var t=this.frag;return t[t.length-1].after(e),a(e,this),v(this),t.push(e),e}function v(e){var r=e[t];e.frag[0]===r&&(e.frag.shift(),r.remove())}var m={inserted:function(e){var r=e.parentNode,n=e.nextSibling,i=e.previousSibling,o=Array.from(e.childNodes),s=document.createComment("");0===o.length&&o.push(s),e.frag=o,e[t]=s;var v=document.createDocumentFragment();v.append.apply(v,p(o)),e.replaceWith(v),o.forEach((function(t){a(t,e),f(t)})),c(e),Object.assign(e,{remove:h,appendChild:g,insertBefore:d,removeChild:l,before:u}),Object.defineProperty(e,"innerHTML",{set:function(e){var t=this,r=document.createElement("div");r.innerHTML=e;var n=this.frag.length;Array.from(r.childNodes).forEach((function(e){t.appendChild(e)})),r.append.apply(r,this.frag.splice(0,n))},get:function(){return""}}),r&&(Object.assign(r,{removeChild:l,insertBefore:d}),a(e,r),c(r)),n&&f(e),i&&f(i)},unbind:function(e){e.remove()}},y={directives:{frag:m},render:function(e){return e("div",{directives:[{name:"frag"}]},this.$slots.default)}};m.Fragment=y,module.exports=m;

dist/frag.esm.js

@@ -247,2 +247,15 @@ var $placeholder = Symbol();
 
-export { frag as default };
+var fragment = {
+    directives: {
+        frag: frag
+    },
+    render: function render(h) {
+        return h("div", {
+            directives: [ {
+                name: "frag"
+            } ]
+        }, this.$slots["default"]);
+    }
+};
+
+export { fragment as Fragment, frag as default };

dist/frag.esm.min.js

@@ -1,1 +0,1 @@
-var e,t=Symbol(),r=Symbol(),n=Symbol(),i=Symbol(),o=function(e){return"frag"in e};function a(e,t){r in e||(e[r]=t,Object.defineProperty(e,"parentNode",{get:function(){return this[r]||this.parentElement}}))}function f(e){n in e||(e[n]=!0,Object.defineProperty(e,"nextSibling",{get:function(){var e=this.parentNode.childNodes,t=e.indexOf(this);return t>-1&&e[t+1]||null}}))}function c(t){if(!e){var r=Object.getOwnPropertyDescriptor(Node.prototype,"childNodes");e=r.get}var n=e.apply(t),i=Array.from(n).map((function(e){return function(e,t){for(;e.parentNode!==t;){var r=e.parentNode;r&&(e=r)}return e}(e,t)}));return i.filter((function(e,t){return e!==i[t-1]}))}function s(e){i in e||(e[i]=!0,Object.defineProperties(e,{childNodes:{get:function(){return this.frag||c(this)}},firstChild:{get:function(){return this.childNodes[0]||null}}}),e.hasChildNodes=function(){return this.childNodes.length>0})}function h(){var e;(e=this.frag[0]).before.apply(e,arguments)}function p(){var e=this.frag;e.splice(0,e.length).forEach((function(e){e.remove()}))}var u=function e(t){var r;return(r=Array.prototype).concat.apply(r,t.map((function(t){return o(t)?e(t.frag):t})))};function l(e){if(o(this)){var r=this.frag.indexOf(e);if(r>-1){var n=this.frag.splice(r,1)[0];0===this.frag.length&&function(e,r){var n=e[t];r.before(n),a(n,e),e.frag.unshift(n)}(this,n),e.remove()}}else{c(this).indexOf(e)>-1&&e.remove()}return e}function d(e,t){var r=this,n=e.frag||[e];if(o(this)){var i=this.frag;if(t){var c=i.indexOf(t);c>-1&&(i.splice.apply(i,[c,0].concat(n)),t.before.apply(t,n))}else{var s=i[i.length-1];i.push.apply(i,n),s.after.apply(s,n)}v(this)}else t?this.childNodes.includes(t)&&t.before.apply(t,n):this.append.apply(this,n);return n.forEach((function(e){a(e,r)})),f(n[n.length-1]),e}function g(e){var t=this.frag;return t[t.length-1].after(e),a(e,this),v(this),t.push(e),e}function v(e){var r=e[t];e.frag[0]===r&&(e.frag.shift(),r.remove())}var m={inserted:function(e){var r=e.parentNode,n=e.nextSibling,i=e.previousSibling,o=Array.from(e.childNodes),c=document.createComment("");0===o.length&&o.push(c),e.frag=o,e[t]=c;var v=document.createDocumentFragment();v.append.apply(v,u(o)),e.replaceWith(v),o.forEach((function(t){a(t,e),f(t)})),s(e),Object.assign(e,{remove:p,appendChild:g,insertBefore:d,removeChild:l,before:h}),Object.defineProperty(e,"innerHTML",{set:function(e){var t=this,r=document.createElement("div");r.innerHTML=e;var n=this.frag.length;Array.from(r.childNodes).forEach((function(e){t.appendChild(e)})),r.append.apply(r,this.frag.splice(0,n))},get:function(){return""}}),r&&(Object.assign(r,{removeChild:l,insertBefore:d}),a(e,r),s(r)),n&&f(e),i&&f(i)},unbind:function(e){e.remove()}};export{m as default};
+var e,t=Symbol(),r=Symbol(),n=Symbol(),i=Symbol(),o=function(e){return"frag"in e};function a(e,t){r in e||(e[r]=t,Object.defineProperty(e,"parentNode",{get:function(){return this[r]||this.parentElement}}))}function f(e){n in e||(e[n]=!0,Object.defineProperty(e,"nextSibling",{get:function(){var e=this.parentNode.childNodes,t=e.indexOf(this);return t>-1&&e[t+1]||null}}))}function s(t){if(!e){var r=Object.getOwnPropertyDescriptor(Node.prototype,"childNodes");e=r.get}var n=e.apply(t),i=Array.from(n).map((function(e){return function(e,t){for(;e.parentNode!==t;){var r=e.parentNode;r&&(e=r)}return e}(e,t)}));return i.filter((function(e,t){return e!==i[t-1]}))}function c(e){i in e||(e[i]=!0,Object.defineProperties(e,{childNodes:{get:function(){return this.frag||s(this)}},firstChild:{get:function(){return this.childNodes[0]||null}}}),e.hasChildNodes=function(){return this.childNodes.length>0})}function h(){var e;(e=this.frag[0]).before.apply(e,arguments)}function u(){var e=this.frag;e.splice(0,e.length).forEach((function(e){e.remove()}))}var p=function e(t){var r;return(r=Array.prototype).concat.apply(r,t.map((function(t){return o(t)?e(t.frag):t})))};function l(e){if(o(this)){var r=this.frag.indexOf(e);if(r>-1){var n=this.frag.splice(r,1)[0];0===this.frag.length&&function(e,r){var n=e[t];r.before(n),a(n,e),e.frag.unshift(n)}(this,n),e.remove()}}else{s(this).indexOf(e)>-1&&e.remove()}return e}function d(e,t){var r=this,n=e.frag||[e];if(o(this)){var i=this.frag;if(t){var s=i.indexOf(t);s>-1&&(i.splice.apply(i,[s,0].concat(n)),t.before.apply(t,n))}else{var c=i[i.length-1];i.push.apply(i,n),c.after.apply(c,n)}v(this)}else t?this.childNodes.includes(t)&&t.before.apply(t,n):this.append.apply(this,n);return n.forEach((function(e){a(e,r)})),f(n[n.length-1]),e}function g(e){var t=this.frag;return t[t.length-1].after(e),a(e,this),v(this),t.push(e),e}function v(e){var r=e[t];e.frag[0]===r&&(e.frag.shift(),r.remove())}var m={inserted:function(e){var r=e.parentNode,n=e.nextSibling,i=e.previousSibling,o=Array.from(e.childNodes),s=document.createComment("");0===o.length&&o.push(s),e.frag=o,e[t]=s;var v=document.createDocumentFragment();v.append.apply(v,p(o)),e.replaceWith(v),o.forEach((function(t){a(t,e),f(t)})),c(e),Object.assign(e,{remove:u,appendChild:g,insertBefore:d,removeChild:l,before:h}),Object.defineProperty(e,"innerHTML",{set:function(e){var t=this,r=document.createElement("div");r.innerHTML=e;var n=this.frag.length;Array.from(r.childNodes).forEach((function(e){t.appendChild(e)})),r.append.apply(r,this.frag.splice(0,n))},get:function(){return""}}),r&&(Object.assign(r,{removeChild:l,insertBefore:d}),a(e,r),c(r)),n&&f(e),i&&f(i)},unbind:function(e){e.remove()}},y={directives:{frag:m},render:function(e){return e("div",{directives:[{name:"frag"}]},this.$slots.default)}};export{y as Fragment,m as default};

dist/frag.js

@@ -232,3 +232,16 @@ (function(global, factory) {
     };
+    var Fragment = {
+        directives: {
+            frag: frag
+        },
+        render: function render(h) {
+            return h("div", {
+                directives: [ {
+                    name: "frag"
+                } ]
+            }, this.$slots["default"]);
+        }
+    };
+    frag.Fragment = Fragment;
     return frag;
 }));

dist/frag.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Frag=t()}(this,(function(){"use strict";var e,t=Symbol(),n=Symbol(),r=Symbol(),i=Symbol(),o=function(e){return"frag"in e};function f(e,t){n in e||(e[n]=t,Object.defineProperty(e,"parentNode",{get:function(){return this[n]||this.parentElement}}))}function a(e){r in e||(e[r]=!0,Object.defineProperty(e,"nextSibling",{get:function(){var e=this.parentNode.childNodes,t=e.indexOf(this);return t>-1&&e[t+1]||null}}))}function c(t){if(!e){var n=Object.getOwnPropertyDescriptor(Node.prototype,"childNodes");e=n.get}var r=e.apply(t),i=Array.from(r).map((function(e){return function(e,t){for(;e.parentNode!==t;){var n=e.parentNode;n&&(e=n)}return e}(e,t)}));return i.filter((function(e,t){return e!==i[t-1]}))}function s(e){i in e||(e[i]=!0,Object.defineProperties(e,{childNodes:{get:function(){return this.frag||c(this)}},firstChild:{get:function(){return this.childNodes[0]||null}}}),e.hasChildNodes=function(){return this.childNodes.length>0})}function u(){var e;(e=this.frag[0]).before.apply(e,arguments)}function h(){var e=this.frag;e.splice(0,e.length).forEach((function(e){e.remove()}))}var p=function e(t){var n;return(n=Array.prototype).concat.apply(n,t.map((function(t){return o(t)?e(t.frag):t})))};function l(e){if(o(this)){var n=this.frag.indexOf(e);if(n>-1){var r=this.frag.splice(n,1)[0];0===this.frag.length&&function(e,n){var r=e[t];n.before(r),f(r,e),e.frag.unshift(r)}(this,r),e.remove()}}else{c(this).indexOf(e)>-1&&e.remove()}return e}function d(e,t){var n=this,r=e.frag||[e];if(o(this)){var i=this.frag;if(t){var c=i.indexOf(t);c>-1&&(i.splice.apply(i,[c,0].concat(r)),t.before.apply(t,r))}else{var s=i[i.length-1];i.push.apply(i,r),s.after.apply(s,r)}v(this)}else t?this.childNodes.includes(t)&&t.before.apply(t,r):this.append.apply(this,r);return r.forEach((function(e){f(e,n)})),a(r[r.length-1]),e}function g(e){var t=this.frag;return t[t.length-1].after(e),f(e,this),v(this),t.push(e),e}function v(e){var n=e[t];e.frag[0]===n&&(e.frag.shift(),n.remove())}return{inserted:function(e){var n=e.parentNode,r=e.nextSibling,i=e.previousSibling,o=Array.from(e.childNodes),c=document.createComment("");0===o.length&&o.push(c),e.frag=o,e[t]=c;var v=document.createDocumentFragment();v.append.apply(v,p(o)),e.replaceWith(v),o.forEach((function(t){f(t,e),a(t)})),s(e),Object.assign(e,{remove:h,appendChild:g,insertBefore:d,removeChild:l,before:u}),Object.defineProperty(e,"innerHTML",{set:function(e){var t=this,n=document.createElement("div");n.innerHTML=e;var r=this.frag.length;Array.from(n.childNodes).forEach((function(e){t.appendChild(e)})),n.append.apply(n,this.frag.splice(0,r))},get:function(){return""}}),n&&(Object.assign(n,{removeChild:l,insertBefore:d}),f(e,n),s(n)),r&&a(e),i&&a(i)},unbind:function(e){e.remove()}}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Frag=t()}(this,(function(){"use strict";var e,t=Symbol(),n=Symbol(),r=Symbol(),i=Symbol(),o=function(e){return"frag"in e};function f(e,t){n in e||(e[n]=t,Object.defineProperty(e,"parentNode",{get:function(){return this[n]||this.parentElement}}))}function a(e){r in e||(e[r]=!0,Object.defineProperty(e,"nextSibling",{get:function(){var e=this.parentNode.childNodes,t=e.indexOf(this);return t>-1&&e[t+1]||null}}))}function s(t){if(!e){var n=Object.getOwnPropertyDescriptor(Node.prototype,"childNodes");e=n.get}var r=e.apply(t),i=Array.from(r).map((function(e){return function(e,t){for(;e.parentNode!==t;){var n=e.parentNode;n&&(e=n)}return e}(e,t)}));return i.filter((function(e,t){return e!==i[t-1]}))}function c(e){i in e||(e[i]=!0,Object.defineProperties(e,{childNodes:{get:function(){return this.frag||s(this)}},firstChild:{get:function(){return this.childNodes[0]||null}}}),e.hasChildNodes=function(){return this.childNodes.length>0})}function u(){var e;(e=this.frag[0]).before.apply(e,arguments)}function h(){var e=this.frag;e.splice(0,e.length).forEach((function(e){e.remove()}))}var l=function e(t){var n;return(n=Array.prototype).concat.apply(n,t.map((function(t){return o(t)?e(t.frag):t})))};function p(e){if(o(this)){var n=this.frag.indexOf(e);if(n>-1){var r=this.frag.splice(n,1)[0];0===this.frag.length&&function(e,n){var r=e[t];n.before(r),f(r,e),e.frag.unshift(r)}(this,r),e.remove()}}else{s(this).indexOf(e)>-1&&e.remove()}return e}function d(e,t){var n=this,r=e.frag||[e];if(o(this)){var i=this.frag;if(t){var s=i.indexOf(t);s>-1&&(i.splice.apply(i,[s,0].concat(r)),t.before.apply(t,r))}else{var c=i[i.length-1];i.push.apply(i,r),c.after.apply(c,r)}v(this)}else t?this.childNodes.includes(t)&&t.before.apply(t,r):this.append.apply(this,r);return r.forEach((function(e){f(e,n)})),a(r[r.length-1]),e}function g(e){var t=this.frag;return t[t.length-1].after(e),f(e,this),v(this),t.push(e),e}function v(e){var n=e[t];e.frag[0]===n&&(e.frag.shift(),n.remove())}var m={inserted:function(e){var n=e.parentNode,r=e.nextSibling,i=e.previousSibling,o=Array.from(e.childNodes),s=document.createComment("");0===o.length&&o.push(s),e.frag=o,e[t]=s;var v=document.createDocumentFragment();v.append.apply(v,l(o)),e.replaceWith(v),o.forEach((function(t){f(t,e),a(t)})),c(e),Object.assign(e,{remove:h,appendChild:g,insertBefore:d,removeChild:p,before:u}),Object.defineProperty(e,"innerHTML",{set:function(e){var t=this,n=document.createElement("div");n.innerHTML=e;var r=this.frag.length;Array.from(n.childNodes).forEach((function(e){t.appendChild(e)})),n.append.apply(n,this.frag.splice(0,r))},get:function(){return""}}),n&&(Object.assign(n,{removeChild:p,insertBefore:d}),f(e,n),c(n)),r&&a(e),i&&a(i)},unbind:function(e){e.remove()}},y={directives:{frag:m},render:function(e){return e("div",{directives:[{name:"frag"}]},this.$slots.default)}};return m.Fragment=y,m}));

package.json

 {
 	"name": "vue-frag",
-	"version": "1.2.5",
+	"version": "1.3.0",
 	"description": "Vue 2 fragment directive to return multiple root elements",
@@ -35,3 +35,3 @@ "keywords": [
 		"hooks": {
-			"pre-commit": "lint-staged"
+			"pre-commit": "npm run build && lint-staged"
 		}
@@ -41,3 +41,3 @@ },
 		"*.{js,ts}": [
-			"eslint --fix",
+			"eslint",
 			"jest --bail --findRelatedTests"
@@ -44,0 +44,0 @@ ]

README.md

@@ -7,3 +7,3 @@ # vue-frag <a href="https://npm.im/vue-frag"><img src="https://badgen.net/npm/v/vue-frag"></a> <a href="https://npm.im/vue-frag"><img src="https://badgen.net/npm/dm/vue-frag"></a> <a href="https://bundlephobia.com/result?p=vue-frag"><img src="https://badgen.net/bundlephobia/minzip/vue-frag"></a>
 <template>
-    <div v-frag> ⬅ This root element is unwrapped and removed on render!
+    <fragment> ⬅ This root element will not exist in the DOM
 
@@ -13,7 +13,17 @@ <li>Element 1</li>
         <li>Element 3</li>
-    </div>
+    </fragment>
 </template>
+
+<script>
+import { Fragment } from 'vue-frag'
+
+export default {
+    components: {
+        Fragment
+    }
+}
+</script>
 ```
 
-👉 Try out a [demo in this CodePen](https://codepen.io/hirokiosame/pen/PoNVZbV)!
+👉 [Try it out on CodePen](https://codepen.io/hirokiosame/pen/PoNVZbV)!
 
@@ -34,37 +44,43 @@ <sub>Support this project by ⭐️ starring and sharing it. [Follow me](https://github.com/privatenumber) to see what other cool projects I'm working on! ❤️</sub>
 ## 🚦 Quick Setup
+You can either choose to use the _Component_ or _Directive_ API.
 
-#### Register globally
-Make it available anywhere in your Vue application.
+### Component API
+The Component API is designed to be used at the root of the template. It should feel intuitive to use and cover most use-cases.
 
-```js
-import frag from 'vue-frag';
-Vue.directive('frag', frag);
-```
-
-#### Register locally
-Explicitly register it to a component you want to use it in.
-
+Import `Fragment` and use it as the root element of your component:
 ```vue
-...
+<template>
+    <fragment>
+        Hello world!
+    </fragment>
+</template>
 
 <script>
-import frag from 'vue-frag';
+import { Fragment } from 'vue-frag'
 
 export default {
-    directives: {
-        frag
-    },
-
-    ...
-};
+    components: {
+        Fragment
+    }
+}
 </script>
 ```
 
-#### Prefer a component API?
-Create a `Fragment.vue` component:
+#### Register globally
+[Globally registering](https://vuejs.org/v2/guide/components-registration.html) the component lets you use it without needing to import it every time.
+```js
+import { Fragment } from 'vue-frag'
 
+Vue.component('Fragment', Fragment)
+```
+
+### Directive API
+Use the Directive API to have more nuanced control over placement. For example, if you want to unwrap the root node of a component on the usage-end.
+
+The Component API uses the Directive API under the hood.
+
 ```vue
 <template>
     <div v-frag>
-        <slot />
+        Hello world!
     </div>
@@ -74,3 +90,3 @@ </template>
 <script>
-import frag from 'vue-frag';
+import frag from 'vue-frag'
 
@@ -81,11 +97,26 @@ export default {
     }
-};
+}
 </script>
 ```
 
-And use it as a component:
+#### Register globally
+Make it available anywhere in your Vue application.
+
+```js
+import frag from 'vue-frag'
+
+Vue.directive('frag', frag)
+```
+
+## 👨🏻‍🏫 Examples
+
+#### Returning multiple root nodes <a href="https://codepen.io/hirokiosame/pen/PoNVZbV"><img src="https://img.shields.io/badge/codepen.io-demo-blue" valign="bottom"></a>
+Component API
 ```vue
 <template>
-    <fragment>
-        No root element!
+    <fragment> <!-- This element will be unwrapped -->
+
+        <div v-for="i in 10">
+            {{ i }}
+        </div>
     </fragment>
@@ -95,5 +126,4 @@ </template>
 
-## 👨🏻‍🏫 Examples
 
-#### Returning multiple root nodes <a href="https://codepen.io/hirokiosame/pen/PoNVZbV"><img src="https://img.shields.io/badge/codepen.io-demo-blue" valign="bottom"></a>
+Directive API
 ```vue
@@ -111,2 +141,4 @@ <template>
 #### Unwrapping the root node from a component
+Use the Directive API to unwrap the root node of a component.
+
 ```vue
@@ -125,3 +157,5 @@ <template>
     <div v-frag>
-        <template v-if />
+        <template v-if="isShown">
+            Hello world!
+        </template>
     </div>
@@ -161,11 +195,30 @@ </template>
 
-### How is this different from [vue-fragment](https://www.npmjs.com/package/vue-fragment)?
-They are both designed to do the same thing. However, [vue-fragment](https://github.com/Thunberg087/vue-fragment) is a component and vue-frag is a directive. I made vue-frag when I saw vue-fragment didn't have any tests to ensure correct behavior, had a lot of unattended issues, and didn't seem actively maintained. In terms of size, they are both small but vue-frag is slightly smaller (`993B` vs `798B`).
+### How does this work?
+vue-frag works by tricking Vue.js to think that the root element is still in the DOM, when it's actually not.
 
+When vue-frag is applied to an element, it uses the [`inserted` directive hook](https://vuejs.org/v2/guide/custom-directive.html#Hook-Functions) to swap the element out with its children to remove itself from the DOM. It then patches surrounding DOM nodes (eg. parent, sibling, children) to make them think that the element is still in the DOM.
 
-### How does this work?
-Vue associates vNodes with specific DOM references so once a component has mounted, the DOM nodes can be moved around and Vue will still be able to mutate them by reference. The Frag directive simply replaces the root element of a component in the DOM with it's children upon DOM insertion, and monkey-patches native properties like `parentNode` on the children to make Vue think they're still using the component root element.
+Here are all the DOM APIs Vue.js uses that are patched:
 
+- [`insertBefore()`](https://github.com/vuejs/vue/blob/531b7619b137aecd71441e1ea53dae3066d71bc8/dist/vue.js#L5748)
+
+- [`removeChild()`](https://github.com/vuejs/vue/blob/531b7619b137aecd71441e1ea53dae3066d71bc8/dist/vue.js#L5752)
+
+- [`appendChild()`](https://github.com/vuejs/vue/blob/531b7619b137aecd71441e1ea53dae3066d71bc8/dist/vue.js#L5756)
+
+- [`hasChildNodes()`](https://github.com/vuejs/vue/blob/531b7619b137aecd71441e1ea53dae3066d71bc8/dist/vue.js#L6427)
+
+- [`parentNode`](https://github.com/vuejs/vue/blob/531b7619b137aecd71441e1ea53dae3066d71bc8/dist/vue.js#L5760)
+
+- [`nextSibling`](https://github.com/vuejs/vue/blob/531b7619b137aecd71441e1ea53dae3066d71bc8/dist/vue.js#L5764)
+
+- [`firstChild`](https://github.com/vuejs/vue/blob/531b7619b137aecd71441e1ea53dae3066d71bc8/dist/vue.js#L6447)
+
+- [`childNodes`](https://github.com/vuejs/vue/blob/531b7619b137aecd71441e1ea53dae3066d71bc8/dist/vue.js#L7667)
+
+- [`innerHTML`](https://github.com/vuejs/vue/blob/531b7619b137aecd71441e1ea53dae3066d71bc8/dist/vue.js#L6431)
+
+
 ### Does `v-show` work?
-Unfortunately not. `v-show` works by setting `style="display: none"` on the root element of the target component, and with `vue-frag` unwrapping and removing the root element, there would be no grouping-element to apply the `display: none` to. If the fragment returned elements, it's possible to apply it to each child-node, but it's possible for them to be text-nodes which cannot be styled.
+[Like in Vue 3](https://jsfiddle.net/hirokiosame/pebL1cdx/), `v-show` does not work on components that return a fragment. `v-show` works by setting `style="display: none"` on the root element of the target component. With vue-frag removing the root element, there would be no grouping-element to apply the `display: none` to. If the fragment returned elements, it's possible to apply it to each child-node, but it's possible for them to be text-nodes which cannot be styled.
 
@@ -172,0 +225,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43646

increased by7.14%

Lines of code

765

increased by5.23%

Number of lines in readme file

223

increased by31.18%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes