single-spa-layout
Version:
Layout engine for single-spa applications
3 lines (2 loc) • 11.9 kB
JavaScript
/* single-spa-layout@1.0.0-beta.2 - system */
System.register(["single-spa"],(function(e){"use strict";var t,n;return{setters:[function(e){t=e.pathToActiveWhen,n=e.mountRootParcel}],execute:function(){function o(e){return(o="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)}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e){return function(e){if(Array.isArray(e))return u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return u(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(e,void 0):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}e({constructApplications:function(e){var t=e.routes,o=e.loadApp,r={};return function e(t,n,o,r){r.forEach((function(r){"application"===r.type?(t[r.name]||(t[r.name]=[]),t[r.name].push({activeWhen:n,props:E(o,r.props),loader:r.loader})):"route"===r.type?e(t,r.activeWhen,E(o,r.props),r.routes):r.routes&&e(t,n,o,r.routes)}))}(r,N,{},t.routes),Object.keys(r).map((function(e){var t=r[e];return{name:e,customProps:function(e,n){var o=v(t,(function(e){return e.activeWhen(n)}));return o?o.props:{}},activeWhen:t.map((function(e){return e.activeWhen})),app:function(){var r;s&&(r=v(t,(function(e){return e.activeWhen(window.location)})));var a=o({name:e});return r&&r.loader?function(e,t,o){return Promise.resolve().then((function(){var r,a=w(e),i=document.getElementById(a);i||((i=document.createElement("div")).id=a,i.style.display="none",r=!0,document.body.appendChild(i));var c,u,s,l="string"==typeof t.loader?(c=t.loader,u=(new DOMParser).parseFromString(c,"text/html").body.childNodes,s=[],{bootstrap:function(){return Promise.resolve()},mount:function(e){return Promise.resolve().then((function(){u.forEach((function(t){s.push(e.domElement.appendChild(t.cloneNode()))}))}))},unmount:function(e){return Promise.resolve().then((function(){s.forEach((function(t){e.domElement.removeChild(t)}))}))}}):t.loader,d=n(l,{name:"application-loader:".concat(e),domElement:i});return Promise.all([d.mountPromise,o]).then((function(e){return d.unmount().then((function(){return r&&(i.style.removeProperty("display"),""===i.getAttribute("style")&&i.removeAttribute("style")),e}))}))}))}(e,r,a):a}}}))},constructLayoutEngine:function(e){var t=e.routes,n=(e.applications,e.active),o=void 0===n||n,r=!1,a=[],i=t.base.slice(0,t.base.length-1),c={isActive:function(){return r},activate:function(){r||(r=!0,s&&(window.addEventListener("single-spa:before-mount-routing-event",u),window.addEventListener("single-spa:routing-event",l),u()))},deactivate:function(){r&&(r=!1,s&&(window.removeEventListener("single-spa:before-mount-routing-event",u),window.removeEventListener("single-spa:routing-event",l)))}};return o&&c.activate(),c;function u(){if(0===location["hash"===t.mode?"hash":"pathname"].indexOf(i)){var e="string"==typeof t.containerEl?document.querySelector(t.containerEl):t.containerEl;!function e(t){var n=t.location,o=t.routes,r=t.parentContainer,a=t.previousSibling,i=t.shouldMount,c=t.pendingRemovals;return o.forEach((function(t,o){if("application"===t.type){var u=w(t.name),s=document.getElementById(u);i&&(s||((s=document.createElement("div")).id=u),g(s,r,a),a=s)}else if("route"===t.type)a=e({location:n,routes:t.routes,parentContainer:r,previousSibling:a,shouldMount:i&&t.activeWhen(n),pendingRemovals:c});else if(t instanceof Node)if(i){if(!t.connectedNode){var l=t.cloneNode(!1);t.connectedNode=l}g(t.connectedNode,r,a),t.routes&&e({location:n,routes:t.routes,parentContainer:t.connectedNode,previousSibling:null,shouldMount:i,pendingRemovals:c}),a=t.connectedNode}else c.push((function(){var e;(e=t.connectedNode)&&(e.remove?e.remove():e.parentNode.removeChild(e)),delete t.connectedNode}))})),a}({location:window.location,routes:t.routes,parentContainer:e,shouldMount:!0,pendingRemovals:a})}}function l(e){var t=e.detail.appsByNewStatus;a.forEach((function(e){return e()})),a=[],t.NOT_MOUNTED.concat(t.NOT_LOADED).forEach((function(e){var t=document.getElementById(w(e));t&&t.isConnected&&t.parentNode.removeChild(t)}))}},constructRoutes:function(e,n){if(e&&e.nodeName)e=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if("template"===e.nodeName.toLowerCase()&&(e=(e.content||e).querySelector("single-spa-router")),"single-spa-router"!==e.nodeName.toLowerCase())throw Error("single-spa-layout: The HTMLElement passed to constructRoutes must be <single-spa-router> or a <template> containing the router. Received ".concat(e.nodeName));s&&e.isConnected&&e.parentNode.removeChild(e);var n={routes:[]};m(e,"mode")&&(n.mode=m(e,"mode")),m(e,"base")&&(n.base=m(e,"base"));for(var o=0;o<e.childNodes.length;o++){var r;(r=n.routes).push.apply(r,c(y(e.childNodes[o],t)))}return n}(e,n);else if(n)throw Error("constructRoutes should be called either with an HTMLElement and layoutData, or a single json object.");return function(e){l("routesConfig",e);var n=e.disableWarnings;d("routesConfig",e,["mode","base","containerEl","routes","disableWarnings"],n),e.hasOwnProperty("containerEl")?function(e,t){if("string"==typeof t?""===t.trim():!(s&&t instanceof HTMLElement))throw Error("Invalid ".concat("routesConfig.containerEl",": received ").concat(t," but expected either non-blank string or HTMLElement"))}(0,e.containerEl):e.containerEl="body",e.hasOwnProperty("mode")||(e.mode="history"),function(e,t,n){if(n.indexOf(t)<0)throw Error("Invalid ".concat("routesConfig.mode",": received '").concat(t,"' but expected ").concat(n.join(", ")))}(0,e.mode,["history","hash"]),e.hasOwnProperty("base")?(p("routesConfig.base",e.base),e.base=(r=e.base,0!==r.indexOf("/")&&(r="/"+r),"/"!==r[r.length-1]&&(r+="/"),r)):e.base="/";var r;var a=s?window.location.pathname:"/",i="hash"===e.mode?a+"#":"";f("routesConfig.routes",e.routes,(function e(r,a,i){var c,u=i.parentPath,s=i.siblingActiveWhens;if(l(a,r),"application"===r.type)d(a,r,["type","name","props","loader"],n),r.props&&l("".concat(a,".props"),r.props),p("".concat(a,".name"),r.name);else if("route"===r.type){d(a,r,["type","path","routes","props","default"],n);var v,m=r.hasOwnProperty("path"),y=r.hasOwnProperty("default");if(m)p("".concat(a,".path"),r.path),v=h(u,r.path),r.activeWhen=t(v),s.push(r.activeWhen);else{if(!y)throw Error("Invalid ".concat(a,": routes must have either a path or default property."));!function(e,t){if("boolean"!=typeof t)throw Error("Invalid ".concat(e,": received ").concat(o(t),", but expected a boolean"))}("".concat(a,".default"),r.default),v=u,r.activeWhen=(c=s,function(e){return!c.some((function(t){return t(e)}))})}if(m&&y&&r.default)throw Error("Invalid ".concat(a,": cannot have both path and set default to true."));r.routes&&f("".concat(a,".routes"),r.routes,e,{parentPath:v,siblingActiveWhens:[]})}else{if("undefined"!=typeof Node&&r instanceof Node);else for(var b in r)"routes"!==b&&p("".concat(a,"['").concat(b,"']"),r[b]);r.routes&&f("".concat(a,".routes"),r.routes,e,{parentPath:u,siblingActiveWhens:s})}}),{parentPath:i+e.base,siblingActiveWhens:[]}),delete e.disableWarnings}(e),e},matchRoute:function(e,t){p("path",t);var n=i({},e),o=e.base.slice(0,e.base.length-1);if(0===t.indexOf(o)){var r=s?window.location.origin:"http://localhost",a=new URL(h(r,t));n.routes=function e(t,n){var o=[];return n.forEach((function(n){"application"===n.type?o.push(n):"route"===n.type?n.activeWhen(t)&&o.push(i(i({},n),{},{routes:e(t,n.routes)})):Array.isArray(n.routes)&&o.push(i(i({},n),{},{routes:e(t,n.routes)}))})),o}(a,e.routes)}else n.routes=[];return n}});var s="undefined"!=typeof window;function l(e,t){if("object"!==o(t)||Array.isArray(t)||null===t)throw Error("Invalid ".concat(e,": received ").concat(Array.isArray(t)?"array":t," but expected a plain object"))}function d(e,t,n,o){if(!o){var r=Object.keys(t),a=[];r.forEach((function(e){n.indexOf(e)<0&&a.push(e)})),a.length>0&&console.warn(Error("Invalid ".concat(e,": received invalid properties '").concat(a.join(", "),"', but valid properties are ").concat(n.join(", "))))}}function p(e,t){if("string"!=typeof t||""===t.trim())throw Error("Invalid ".concat(e,": received '").concat(t,"', but expected a non-blank string"))}function f(e,t,n){if(!Array.isArray(t)&&("object"!==o(o(t))||"number"!==t.length))throw Error("Invalid ".concat(e,": received '").concat(t,"', but expected an array"));for(var r=arguments.length,a=new Array(r>3?r-3:0),i=3;i<r;i++)a[i-3]=arguments[i];for(var c=0;c<t.length;c++)n.apply(void 0,[t[c],"".concat(e,"[").concat(c,"]")].concat(a))}function h(e,t){return"/"===e.substr(-1)?"/"===t[0]?e+t.slice(1):e+t:"/"===t[0]?e+t:e+"/"+t}function v(e,t){for(var n=0;n<e.length;n++)if(t(e[n]))return e[n];return null}function m(e,t){if(s)return e.getAttribute(t);var n=v(e.attrs,(function(e){return e.name===t}));return n?n.value:null}function y(e,t){if("application"===e.nodeName.toLowerCase()){if(e.childNodes.length>0)throw Error("<application> elements must not have childNodes. You must put in a closing </application> - self closing is not allowed");var n={type:"application",name:m(e,"name")},o=m(e,"loader");if(o){if(!t.loaders||!t.loaders.hasOwnProperty(o))throw Error("Application loader '".concat(o,"' was not defined in the htmlLayoutData"));n.loader=t.loaders[o]}return b(e,n,["name","loader"],t),[n]}if("route"===e.nodeName.toLowerCase()){var r={type:"route",routes:[]},a=m(e,"path");a&&(r.path=a),function(e,t){return s?e.hasAttribute("default"):e.attrs.some((function(e){return"default"===e.name}))}(e)&&(r.default=!0),b(e,r,["path","default"],t);for(var i=0;i<e.childNodes.length;i++){var u;(u=r.routes).push.apply(u,c(y(e.childNodes[i],t)))}return[r]}if("undefined"!=typeof Node&&e instanceof Node){if(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim())return[];if(e.childNodes&&e.childNodes.length>0){e.routes=[];for(var l=0;l<e.childNodes.length;l++){var d;(d=e.routes).push.apply(d,c(y(e.childNodes[l],t)))}}return[e]}if(e.childNodes){for(var p={type:e.nodeName.toLowerCase(),routes:[]},f=0;f<e.childNodes.length;f++){var h;(h=p.routes).push.apply(h,c(y(e.childNodes[f],t)))}return[p]}return[]}function b(e,t,n,o){for(var r=e.attributes||e.attrs,a=0;a<r.length;a++){var i=r[a],c=i.name,u=i.value;if(!(n.indexOf(c)>=0)){t.props||(t.props={});var s=""!==u.trim()?u:c;if(!o.props||!o.props.hasOwnProperty(s))throw Error("Prop '".concat(c,"' was not defined in the htmlLayoutData. Either remove this attribute from the HTML element or provide the prop's value"));t.props[c]=o.props[s]}}}function g(e,t,n){n&&n.nextSibling?n.parentNode.insertBefore(e,n.nextSibling):t.appendChild(e)}function w(e){return"single-spa-application:".concat(e)}function E(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return i(i({},e),t)}function N(){return!0}}}}));