@linusborg/vue-simple-portal - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/index.umd.js

 
 /**
  * vue-simple-portal
- * version: 0.1.4,
- * (c) Thorsten Lünborg, 2019
+ * version: 0.1.5,
+ * (c) Thorsten Lünborg, 2021 - present
  * LICENCE: Apache-2.0
@@ -13,7 +13,9 @@ * http://github.com/linusborg/vue-simple-portal
   (global = global || self, factory(global.VueSimplePortal = {}, global.Vue));
-}(this, function (exports, Vue) { 'use strict';
+}(this, (function (exports, Vue) { 'use strict';
 
-  Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
+  Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
 
   function _typeof(obj) {
+    "@babel/helpers - typeof";
+
     if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
@@ -32,27 +34,14 @@ _typeof = function (obj) {
 
-  var url = 'bjectSymhasOwnProp-0123456789ABCDEFGHIJKLMNQRTUVWXYZ_dfgiklquvxz';
+  // This alphabet uses `A-Za-z0-9_-` symbols. The genetic algorithm helped
+  // optimize the gzip compression for this alphabet.
+  let urlAlphabet =
+    'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW';
 
-  /**
-   * Generate URL-friendly unique ID. This method use non-secure predictable
-   * random generator.
-   *
-   * By default, ID will have 21 symbols to have a collision probability similar
-   * to UUID v4.
-   *
-   * @param {number} [size=21] The number of symbols in ID.
-   *
-   * @return {string} Random string.
-   *
-   * @example
-   * const nanoid = require('nanoid/non-secure')
-   * model.id = nanoid() //=> "Uakgb_J5m9g-0JDMbcJqL"
-   *
-   * @name nonSecure
-   * @function
-   */
-  var nonSecure = function (size) {
-    size = size || 21;
-    var id = '';
-    while (0 < size--) {
-      id += url[Math.random() * 64 | 0];
+  let nanoid = (size = 21) => {
+    let id = '';
+    // A compact alternative for `for (var i = 0; i < step; i++)`.
+    let i = size;
+    while (i--) {
+      // `| 0` is more compact and faster than `Math.floor()`.
+      id += urlAlphabet[(Math.random() * 64) | 0];
     }
@@ -63,3 +52,3 @@ return id
   var config = {
-    selector: "vue-portal-target-".concat(nonSecure())
+    selector: "vue-portal-target-".concat(nanoid())
   };
@@ -75,3 +64,4 @@ var setSelector = function setSelector(selector) {
     // which means the next parent of any component rendered inside of this oen
-    // will be the parent from which is was portal'd
+    // will be the parent from which is was sent
+    // @ts-expect-error
     abstract: true,
@@ -88,7 +78,7 @@ name: 'PortalOutlet',
       if (!nodes) return h();
-      return nodes.length < 2 && !nodes[0].text ? nodes : h(this.tag || 'DIV', nodes);
+      return nodes.length === 1 && !nodes[0].text ? nodes : h(this.tag || 'DIV', nodes);
     },
     destroyed: function destroyed() {
       var el = this.$el;
-      el.parentNode.removeChild(el);
+      el && el.parentNode.removeChild(el);
     }
@@ -171,2 +161,3 @@ });
       mount: function mount() {
+        if (!isBrowser) return;
         var targetEl = this.getTargetEl();
@@ -221,2 +212,2 @@ var el = document.createElement('DIV');
 
-}));
+})));

dist/index.umd.min.js

 
 /**
  * vue-simple-portal
- * version: 0.1.4,
- * (c) Thorsten Lünborg, 2019
+ * version: 0.1.5,
+ * (c) Thorsten Lünborg, 2021 - present
  * LICENCE: Apache-2.0
  * http://github.com/linusborg/vue-simple-portal
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e=e||self).VueSimplePortal={},e.Vue)}(this,function(e,t){"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}t=t&&t.hasOwnProperty("default")?t.default:t;var o={selector:"vue-portal-target-".concat(function(e){e=e||21;for(var t="";0<e--;)t+="bjectSymhasOwnProp-0123456789ABCDEFGHIJKLMNQRTUVWXYZ_dfgiklquvxz"[64*Math.random()|0];return t}())},r=function(e){return o.selector=e},i="undefined"!=typeof window&&void 0!==("undefined"==typeof document?"undefined":n(document)),d=t.extend({abstract:!0,name:"PortalOutlet",props:["nodes","tag"],data:function(e){return{updatedNodes:e.nodes}},render:function(e){var t=this.updatedNodes&&this.updatedNodes();return t?t.length<2&&!t[0].text?t:e(this.tag||"DIV",t):e()},destroyed:function(){var e=this.$el;e.parentNode.removeChild(e)}}),u=t.extend({name:"VueSimplePortal",props:{disabled:{type:Boolean},prepend:{type:Boolean},selector:{type:String,default:function(){return"#".concat(o.selector)}},tag:{type:String,default:"DIV"}},render:function(e){if(this.disabled){var t=this.$scopedSlots&&this.$scopedSlots.default();return t?t.length<2&&!t[0].text?t:e(this.tag,t):e()}return e()},created:function(){this.getTargetEl()||this.insertTargetEl()},updated:function(){var e=this;this.$nextTick(function(){e.disabled||e.slotFn===e.$scopedSlots.default||(e.container.updatedNodes=e.$scopedSlots.default),e.slotFn=e.$scopedSlots.default})},beforeDestroy:function(){this.unmount()},watch:{disabled:{immediate:!0,handler:function(e){e?this.unmount():this.$nextTick(this.mount)}}},methods:{getTargetEl:function(){if(i)return document.querySelector(this.selector)},insertTargetEl:function(){if(i){var e=document.querySelector("body"),t=document.createElement(this.tag);t.id=this.selector.substring(1),e.appendChild(t)}},mount:function(){var e=this.getTargetEl(),t=document.createElement("DIV");this.prepend&&e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t),this.container=new d({el:t,parent:this,propsData:{tag:this.tag,nodes:this.$scopedSlots.default}})},unmount:function(){this.container&&(this.container.$destroy(),delete this.container)}}});function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.component(t.name||"portal",u),t.defaultSelector&&r(t.defaultSelector)}"undefined"!=typeof window&&window.Vue&&window.Vue===t&&t.use(s),e.Portal=u,e.config=o,e.default=s,e.setSelector=r,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e=e||self).VueSimplePortal={},e.Vue)}(this,(function(e,t){"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var o={selector:"vue-portal-target-".concat(((e=21)=>{let t="",n=e;for(;n--;)t+="ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW"[64*Math.random()|0];return t})())},r=function(e){return o.selector=e},i="undefined"!=typeof window&&void 0!==("undefined"==typeof document?"undefined":n(document)),d=t.extend({abstract:!0,name:"PortalOutlet",props:["nodes","tag"],data:function(e){return{updatedNodes:e.nodes}},render:function(e){var t=this.updatedNodes&&this.updatedNodes();return t?1!==t.length||t[0].text?e(this.tag||"DIV",t):t:e()},destroyed:function(){var e=this.$el;e&&e.parentNode.removeChild(e)}}),u=t.extend({name:"VueSimplePortal",props:{disabled:{type:Boolean},prepend:{type:Boolean},selector:{type:String,default:function(){return"#".concat(o.selector)}},tag:{type:String,default:"DIV"}},render:function(e){if(this.disabled){var t=this.$scopedSlots&&this.$scopedSlots.default();return t?t.length<2&&!t[0].text?t:e(this.tag,t):e()}return e()},created:function(){this.getTargetEl()||this.insertTargetEl()},updated:function(){var e=this;this.$nextTick((function(){e.disabled||e.slotFn===e.$scopedSlots.default||(e.container.updatedNodes=e.$scopedSlots.default),e.slotFn=e.$scopedSlots.default}))},beforeDestroy:function(){this.unmount()},watch:{disabled:{immediate:!0,handler:function(e){e?this.unmount():this.$nextTick(this.mount)}}},methods:{getTargetEl:function(){if(i)return document.querySelector(this.selector)},insertTargetEl:function(){if(i){var e=document.querySelector("body"),t=document.createElement(this.tag);t.id=this.selector.substring(1),e.appendChild(t)}},mount:function(){if(i){var e=this.getTargetEl(),t=document.createElement("DIV");this.prepend&&e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t),this.container=new d({el:t,parent:this,propsData:{tag:this.tag,nodes:this.$scopedSlots.default}})}},unmount:function(){this.container&&(this.container.$destroy(),delete this.container)}}});function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.component(t.name||"portal",u),t.defaultSelector&&r(t.defaultSelector)}"undefined"!=typeof window&&window.Vue&&window.Vue===t&&t.use(s),e.Portal=u,e.config=o,e.default=s,e.setSelector=r,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "@linusborg/vue-simple-portal",
-  "licence": "Apache-2.0",
+  "license": "Apache-2.0",
   "description": "A simple Portal implementation for Vue, to mount slot content to another element",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "author": {
@@ -16,3 +16,3 @@ "name": "Thorsten Lünborg",
   "main": "./dist/index.umd.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.esm.js",
   "unpkg": "./dist/index.umd.min.js",
@@ -25,3 +25,3 @@ "jsDelivr": "./dist/index.umd.min.js",
   "dependencies": {
-    "nanoid": "^2.0.1"
+    "nanoid": "^3.1.20"
   },
@@ -28,0 +28,0 @@ "peerDependencies": {

README.md

@@ -39,3 +39,3 @@ # vue-simple-portal
           <p>This will be mounted as a child element
-          of <div id="portal-parget"> instead of
+          of <div id="portal-target"> instead of
           somewhere inside the child tree of <div id="app">
@@ -84,3 +84,3 @@ </portal>
 * Use `vue-simple-portal` when you want to move stuff to the end of the document only.
-* Use `portal-vue` when you want to do more edge-case things, i.e. move stuff around to anywhere *within* our existing app, like the header component area, dynamically move the same content to different places by changing the destination prop etc.
+* Use `portal-vue` when you want to do more edge-case things, i.e. move stuff around to anywhere *within* your existing app, like the header component area, dynamically move the same content to different places by changing the destination prop etc.
 
@@ -147,3 +147,3 @@ </details>
 
-Which means the content is not an almost direct decendant of `<body>`, and can safely and reliably be positioned absolutely etc.
+Which means the content is now an almost direct decendant of `<body>`, and can safely and reliably be positioned absolutely etc.
 
@@ -150,0 +150,0 @@ So it's even easier than in the Usage Example from above:

src/components/Portal.js

@@ -78,2 +78,3 @@ import Vue from 'vue';
     mount: function mount() {
+      if (!isBrowser) return;
       var targetEl = this.getTargetEl();
@@ -80,0 +81,0 @@ var el = document.createElement('DIV');

src/components/TargetContainer.js

@@ -6,3 +6,4 @@ import Vue from 'vue';
   // which means the next parent of any component rendered inside of this oen
-  // will be the parent from which is was portal'd
+  // will be the parent from which is was sent
+  // @ts-expect-error
   abstract: true,
@@ -19,8 +20,8 @@ name: 'PortalOutlet',
     if (!nodes) return h();
-    return nodes.length < 2 && !nodes[0].text ? nodes : h(this.tag || 'DIV', nodes);
+    return nodes.length === 1 && !nodes[0].text ? nodes : h(this.tag || 'DIV', nodes);
   },
   destroyed: function destroyed() {
     var el = this.$el;
-    el.parentNode.removeChild(el);
+    el && el.parentNode.removeChild(el);
   }
 });

src/config.js

@@ -1,6 +0,6 @@
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-import id from 'nanoid/non-secure';
+import { nanoid } from 'nanoid/non-secure';
 var config = {
-  selector: "vue-portal-target-".concat(id())
+  selector: "vue-portal-target-".concat(nanoid())
 };
@@ -7,0 +7,0 @@ export default config;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38933

increased by1.09%

Worsened metrics

Lines of code

512

decreased by-0.97%

Dependency changes

• - Removednanoid@2.1.11(transitive)

• Updatednanoid@^3.1.20