single-spa-vue - npm Package Compare versions

Comparing version 1.8.1 to 1.8.2

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){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)}}}));
+!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 p(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).id||(i.id="single-spa-application:".concat(t.name)),a.el="#".concat(CSS.escape(i.id));else{var p="single-spa-application:".concat(t.name);a.el="#".concat(CSS.escape(p)),(i=document.getElementById(p))||((i=document.createElement("div")).id=p,document.body.appendChild(i))}if(a.el=a.el+" .single-spa-container",!i.querySelector(".single-spa-container")){var l=document.createElement("div");l.className="single-spa-container",i.appendChild(l)}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 l(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:p.bind(null,t,r),unmount:s.bind(null,t,r),update:l.bind(null,t,r)}}}));
 //# sourceMappingURL=single-spa-vue.js.map

package.json

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

src/single-spa-vue.js

@@ -78,2 +78,6 @@ import "css.escape";
         domEl = appOptions.el;
+        if (!domEl.id) {
+          domEl.id = `single-spa-application:${props.name}`;
+        }
+        appOptions.el = `#${CSS.escape(domEl.id)}`;
       }
@@ -80,0 +84,0 @@ } else {

src/single-spa-vue.test.js

@@ -97,3 +97,3 @@ import singleSpaVue from "./single-spa-vue";
 
-  it(`uses the appOptions.el domElement if provided, and wraps the single-spa application in a container div`, () => {
+  it(`uses the appOptions.el domElement (with id) if provided, and wraps the single-spa application in a container div`, () => {
     const domEl = Object.assign(document.createElement("div"), {
@@ -120,2 +120,10 @@ id: "my-custom-el-2"
       .then(() => {
+        expect(Vue).toHaveBeenCalledWith({
+          data: {
+            name: "test-app"
+          },
+          el: `#my-custom-el-2 .single-spa-container`
+        });
+      })
+      .then(() => {
         expect(
@@ -128,2 +136,35 @@ document.querySelector(`#my-custom-el-2 .single-spa-container`)
 
+  it(`uses the appOptions.el domElement (without id) if provided, and wraps the single-spa application in a container div`, () => {
+    const domEl = document.createElement("div");
+
+    document.body.appendChild(domEl);
+
+    const lifecycles = new singleSpaVue({
+      Vue,
+      appOptions: {
+        el: domEl
+      }
+    });
+
+    const htmlId = CSS.escape("single-spa-application:test-app");
+
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() => {
+        expect(Vue).toHaveBeenCalledWith({
+          data: {
+            name: "test-app"
+          },
+          el: `#${htmlId} .single-spa-container`
+        });
+      })
+      .then(() => {
+        expect(
+          document.querySelector(`#${htmlId} .single-spa-container`)
+        ).toBeTruthy();
+        domEl.remove();
+      });
+  });
+
   it(`throws an error if appOptions.el is not passed in as a string or dom element`, () => {
@@ -130,0 +171,0 @@ expect(() => {

No alert changes

Improved metrics

Total package byte prevSize

33261

increased by4.77%

Lines of code

490

increased by8.89%

No dependency changes