single-spa-vue - npm Package Compare versions

Comparing version 1.8.0 to 1.8.1

lib/single-spa-vue.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).singleSpaVue=n()}(this,(function(){"use strict";function e(n){return(e="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})(n)}function n(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function t(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function o(e){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{};o%2?t(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}var r="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};!function(e,n){e(n={exports:{}},n.exports)}((function(e,n){var t;t=r,e.exports=function(e){if(e.CSS&&e.CSS.escape)return e.CSS.escape;var n=function(e){if(0==arguments.length)throw new TypeError("`CSS.escape` requires an argument.");for(var n,t=String(e),o=t.length,r=-1,i="",a=t.charCodeAt(0);++r<o;)0!=(n=t.charCodeAt(r))?i+=n>=1&&n<=31||127==n||0==r&&n>=48&&n<=57||1==r&&n>=48&&n<=57&&45==a?"\\"+n.toString(16)+" ":0==r&&1==o&&45==n||!(n>=128||45==n||95==n||n>=48&&n<=57||n>=65&&n<=90||n>=97&&n<=122)?"\\"+t.charAt(r):t.charAt(r):i+="�";return i};return e.CSS||(e.CSS={}),e.CSS.escape=n,n}(t)}));var i={Vue:null,appOptions:null,template:null};function a(e){return e.loadRootComponent?e.loadRootComponent().then((function(n){return e.rootComponent=n})):Promise.resolve()}function l(e,n,t){return Promise.resolve().then((function(){var r,i=o({},e.appOptions);if(t.domElement&&!i.el&&(i.el=t.domElement),i.el)if("string"==typeof i.el){if(!(r=document.querySelector(i.el)))throw Error("If appOptions.el is provided to single-spa-vue, the dom element must exist in the dom. Was provided as ".concat(i.el))}else r=i.el;else{var a="single-spa-application:".concat(t.name);i.el="#".concat(CSS.escape(a)),(r=document.getElementById(a))||((r=document.createElement("div")).id=a,document.body.appendChild(r))}if(i.el=i.el+" .single-spa-container",!r.querySelector(".single-spa-container")){var l=document.createElement("div");l.className="single-spa-container",r.appendChild(l)}return n.domEl=r,i.render||i.template||!e.rootComponent||(i.render=function(n){return n(e.rootComponent)}),i.data||(i.data={}),i.data=o({},i.data,{},t),n.instance=new e.Vue(i),n.instance.bind&&(n.instance=n.instance.bind(n.instance)),n.instance}))}function p(e,n,t){return Promise.resolve().then((function(){var r=o({},e.appOptions.data||{},{},t);for(var i in r)n.instance[i]=r[i]}))}function s(e,n){return Promise.resolve().then((function(){n.instance.$destroy(),n.instance.$el.innerHTML="",delete n.instance,n.domEl&&(n.domEl.innerHTML="",delete n.domEl)}))}return function(n){if("object"!==e(n))throw new Error("single-spa-vue requires a configuration object");var t=o({},i,{},n);if(!t.Vue)throw Error("single-spa-vue must be passed opts.Vue");if(!t.appOptions)throw Error("single-spa-vue must be passed opts.appOptions");if(t.appOptions.el&&"string"!=typeof t.appOptions.el&&!(t.appOptions.el instanceof HTMLElement))throw Error("single-spa-vue: appOptions.el must be a string CSS selector, an HTMLElement, or not provided at all. Was given ".concat(e(t.appOptions.el)));var r={};return{bootstrap:a.bind(null,t,r),mount:l.bind(null,t,r),unmount:s.bind(null,t,r),update:p.bind(null,t,r)}}}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).singleSpaVue=n()}(this,(function(){"use strict";function e(n){return(e="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})(n)}function n(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function t(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function o(e){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{};o%2?t(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}var r="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};!function(e,n){e(n={exports:{}},n.exports)}((function(e,n){var t;t=r,e.exports=function(e){if(e.CSS&&e.CSS.escape)return e.CSS.escape;var n=function(e){if(0==arguments.length)throw new TypeError("`CSS.escape` requires an argument.");for(var n,t=String(e),o=t.length,r=-1,i="",a=t.charCodeAt(0);++r<o;)0!=(n=t.charCodeAt(r))?i+=n>=1&&n<=31||127==n||0==r&&n>=48&&n<=57||1==r&&n>=48&&n<=57&&45==a?"\\"+n.toString(16)+" ":0==r&&1==o&&45==n||!(n>=128||45==n||95==n||n>=48&&n<=57||n>=65&&n<=90||n>=97&&n<=122)?"\\"+t.charAt(r):t.charAt(r):i+="�";return i};return e.CSS||(e.CSS={}),e.CSS.escape=n,n}(t)}));var i={Vue:null,appOptions:null,template:null};function a(e){return e.loadRootComponent?e.loadRootComponent().then((function(n){return e.rootComponent=n})):Promise.resolve()}function l(e,n,t){var r={};return Promise.resolve().then((function(){var i,a=o({},e.appOptions);if(t.domElement&&!a.el&&(a.el=t.domElement),a.el)if("string"==typeof a.el){if(!(i=document.querySelector(a.el)))throw Error("If appOptions.el is provided to single-spa-vue, the dom element must exist in the dom. Was provided as ".concat(a.el))}else i=a.el;else{var l="single-spa-application:".concat(t.name);a.el="#".concat(CSS.escape(l)),(i=document.getElementById(l))||((i=document.createElement("div")).id=l,document.body.appendChild(i))}if(a.el=a.el+" .single-spa-container",!i.querySelector(".single-spa-container")){var p=document.createElement("div");p.className="single-spa-container",i.appendChild(p)}return r.domEl=i,a.render||a.template||!e.rootComponent||(a.render=function(n){return n(e.rootComponent)}),a.data||(a.data={}),a.data=o({},a.data,{},t),r.vueInstance=new e.Vue(a),r.vueInstance.bind&&(r.vueInstance=r.vueInstance.bind(r.vueInstance)),n[t.name]=r,r.vueInstance}))}function p(e,n,t){return Promise.resolve().then((function(){var r=n[t.name],i=o({},e.appOptions.data||{},{},t);for(var a in i)r.vueInstance[a]=i[a]}))}function s(e,n,t){return Promise.resolve().then((function(){var e=n[t.name];e.vueInstance.$destroy(),e.vueInstance.$el.innerHTML="",delete e.vueInstance,e.domEl&&(e.domEl.innerHTML="",delete e.domEl)}))}return function(n){if("object"!==e(n))throw new Error("single-spa-vue requires a configuration object");var t=o({},i,{},n);if(!t.Vue)throw Error("single-spa-vue must be passed opts.Vue");if(!t.appOptions)throw Error("single-spa-vue must be passed opts.appOptions");if(t.appOptions.el&&"string"!=typeof t.appOptions.el&&!(t.appOptions.el instanceof HTMLElement))throw Error("single-spa-vue: appOptions.el must be a string CSS selector, an HTMLElement, or not provided at all. Was given ".concat(e(t.appOptions.el)));var r={};return{bootstrap:a.bind(null,t,r),mount:l.bind(null,t,r),unmount:s.bind(null,t,r),update:p.bind(null,t,r)}}}));
 //# sourceMappingURL=single-spa-vue.js.map

package.json

 {
   "name": "single-spa-vue",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "a single-spa plugin for vue.js applications",
@@ -5,0 +5,0 @@ "main": "lib/single-spa-vue.js",

src/single-spa-vue.js

@@ -40,2 +40,3 @@ import "css.escape";
   // Just a shared object to store the mounted object state
+  // key - name of single-spa app, since it is unique
   let mountedInstances = {};
@@ -60,2 +61,3 @@
 function mount(opts, mountedInstances, props) {
+  const instance = {};
   return Promise.resolve().then(() => {
@@ -101,3 +103,3 @@ const appOptions = { ...opts.appOptions };
 
-    mountedInstances.domEl = domEl;
+    instance.domEl = domEl;
 
@@ -114,9 +116,10 @@ if (!appOptions.render && !appOptions.template && opts.rootComponent) {
 
-    mountedInstances.instance = new opts.Vue(appOptions);
-    if (mountedInstances.instance.bind) {
-      mountedInstances.instance = mountedInstances.instance.bind(
-        mountedInstances.instance
-      );
+    instance.vueInstance = new opts.Vue(appOptions);
+    if (instance.vueInstance.bind) {
+      instance.vueInstance = instance.vueInstance.bind(instance.vueInstance);
     }
-    return mountedInstances.instance;
+
+    mountedInstances[props.name] = instance;
+
+    return instance.vueInstance;
   });
@@ -127,2 +130,3 @@ }
   return Promise.resolve().then(() => {
+    const instance = mountedInstances[props.name];
     const data = {
@@ -133,3 +137,3 @@ ...(opts.appOptions.data || {}),
     for (let prop in data) {
-      mountedInstances.instance[prop] = data[prop];
+      instance.vueInstance[prop] = data[prop];
     }
@@ -139,13 +143,14 @@ });
 
-function unmount(opts, mountedInstances) {
+function unmount(opts, mountedInstances, props) {
   return Promise.resolve().then(() => {
-    mountedInstances.instance.$destroy();
-    mountedInstances.instance.$el.innerHTML = "";
-    delete mountedInstances.instance;
+    const instance = mountedInstances[props.name];
+    instance.vueInstance.$destroy();
+    instance.vueInstance.$el.innerHTML = "";
+    delete instance.vueInstance;
 
-    if (mountedInstances.domEl) {
-      mountedInstances.domEl.innerHTML = "";
-      delete mountedInstances.domEl;
+    if (instance.domEl) {
+      instance.domEl.innerHTML = "";
+      delete instance.domEl;
     }
   });
 }

src/single-spa-vue.test.js

@@ -284,2 +284,55 @@ import singleSpaVue from "./single-spa-vue";
   });
+
+  it(`mounts 2 instances and then unmounts them`, () => {
+    const lifecycles = new singleSpaVue({
+      Vue,
+      appOptions: {}
+    });
+
+    let obj1 = {
+      props: props,
+      spy: null
+    };
+    let obj2 = {
+      props: { name: "test-app-2" },
+      spy: null
+    };
+
+    function mount(obj) {
+      return lifecycles.mount(obj.props).then(instance => {
+        expect(instance instanceof Vue).toBeTruthy();
+
+        // since $destroy is always pointing to the same function (as it is defined it beforeEach()),
+        // it is needed to be overwritten
+        const oldDestroy = instance.$destroy;
+        instance.$destroy = (...args) => {
+          return oldDestroy.apply(instance, args);
+        };
+
+        obj.spy = jest.spyOn(instance, "$destroy");
+      });
+    }
+
+    function unmount(obj) {
+      expect(obj.spy).not.toBeCalled();
+      return lifecycles.unmount(obj.props).then(() => {
+        expect(obj.spy).toBeCalled();
+      });
+    }
+
+    return lifecycles
+      .bootstrap(props)
+      .then(() => {
+        return mount(obj1);
+      })
+      .then(() => {
+        return mount(obj2);
+      })
+      .then(() => {
+        return unmount(obj1);
+      })
+      .then(() => {
+        return unmount(obj2);
+      });
+  });
 });

No alert changes

Improved metrics

Total package byte prevSize

31746

increased by5.65%

Lines of code

450

increased by12.5%

No dependency changes