jails.stdlib 1.0.0

package/lazyload-image/index.umd.js

@@ -0,0 +1 @@
+(function(b,i){typeof exports=="object"&&typeof module!="undefined"?i(exports):typeof define=="function"&&define.amd?define(["exports"],i):(b=typeof globalThis!="undefined"?globalThis:b||self,i(b["lazyload-image"]={}))})(this,(function(b){"use strict";const i=typeof window!="undefined",S=i&&!("onscroll"in window)||typeof navigator!="undefined"&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),H=i&&window.devicePixelRatio>1,fe={elements_selector:".lazy",container:S||i?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_bg_set:"bg-set",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},V=e=>Object.assign({},fe,e),B=function(e,t){let n;const s="LazyLoad::Initialized",a=new e(t);try{n=new CustomEvent(s,{detail:{instance:a}})}catch(o){n=document.createEvent("CustomEvent"),n.initCustomEvent(s,!1,!1,{instance:a})}window.dispatchEvent(n)},he=(e,t)=>{if(t)if(t.length)for(let n,s=0;n=t[s];s+=1)B(e,n);else B(e,t)},r="src",x="srcset",O="sizes",F="poster",m="llOriginalAttrs",J="data",w="loading",P="loaded",U="applied",me="entered",C="error",q="native",K="data-",Q="ll-status",l=(e,t)=>e.getAttribute(K+t),pe=(e,t,n)=>{const s=K+t;n!==null?e.setAttribute(s,n):e.removeAttribute(s)},p=e=>l(e,Q),g=(e,t)=>pe(e,Q,t),I=e=>g(e,null),M=e=>p(e)===null,ve=e=>p(e)===w,Ee=e=>p(e)===C,z=e=>p(e)===q,Ie=[w,P,U,C],ye=e=>Ie.indexOf(p(e))>=0,d=(e,t,n,s)=>{e&&typeof e=="function"&&(s===void 0?n===void 0?e(t):e(t,n):e(t,n,s))},f=(e,t)=>{i&&t!==""&&e.classList.add(t)},c=(e,t)=>{i&&t!==""&&e.classList.remove(t)},ke=e=>{e.llTempImage=document.createElement("IMG")},Ae=e=>{delete e.llTempImage},W=e=>e.llTempImage,y=(e,t)=>{if(!t)return;const n=t._observer;n&&n.unobserve(e)},Le=e=>{e.disconnect()},xe=(e,t,n)=>{t.unobserve_entered&&y(e,n)},N=(e,t)=>{e&&(e.loadingCount+=t)},Oe=e=>{e&&(e.toLoadCount-=1)},X=(e,t)=>{e&&(e.toLoadCount=t)},we=e=>e.loadingCount>0,Ce=e=>e.toLoadCount>0,Y=e=>{let t=[];for(let n,s=0;n=e.children[s];s+=1)n.tagName==="SOURCE"&&t.push(n);return t},T=(e,t)=>{const n=e.parentNode;n&&n.tagName==="PICTURE"&&Y(n).forEach(t)},Z=(e,t)=>{Y(e).forEach(t)},k=[r],ee=[r,F],v=[r,x,O],te=[J],A=e=>!!e[m],ne=e=>e[m],se=e=>delete e[m],h=(e,t)=>{if(A(e))return;const n={};t.forEach((s=>{n[s]=e.getAttribute(s)})),e[m]=n},Me=e=>{A(e)||(e[m]={backgroundImage:e.style.backgroundImage})},$=(e,t)=>{if(!A(e))return;const n=ne(e);t.forEach((s=>{((a,o,u)=>{u?a.setAttribute(o,u):a.removeAttribute(o)})(e,s,n[s])}))},ze=e=>{if(!A(e))return;const t=ne(e);e.style.backgroundImage=t.backgroundImage},ae=(e,t,n)=>{f(e,t.class_applied),g(e,U),n&&(t.unobserve_completed&&y(e,t),d(t.callback_applied,e,n))},oe=(e,t,n)=>{f(e,t.class_loading),g(e,w),n&&(N(n,1),d(t.callback_loading,e,n))},_=(e,t,n)=>{n&&e.setAttribute(t,n)},le=(e,t)=>{_(e,O,l(e,t.data_sizes)),_(e,x,l(e,t.data_srcset)),_(e,r,l(e,t.data_src))},Ne=(e,t)=>{T(e,(n=>{h(n,v),le(n,t)})),h(e,v),le(e,t)},Te=(e,t)=>{h(e,k),_(e,r,l(e,t.data_src))},Re=(e,t)=>{Z(e,(n=>{h(n,k),_(n,r,l(n,t.data_src))})),h(e,ee),_(e,F,l(e,t.data_poster)),_(e,r,l(e,t.data_src)),e.load()},De=(e,t)=>{h(e,te),_(e,J,l(e,t.data_src))},je=(e,t,n)=>{const s=l(e,t.data_bg),a=l(e,t.data_bg_hidpi),o=H&&a?a:s;o&&(e.style.backgroundImage=`url("${o}")`,W(e).setAttribute(r,o),oe(e,t,n))},Ge=(e,t,n)=>{const s=l(e,t.data_bg_multi),a=l(e,t.data_bg_multi_hidpi),o=H&&a?a:s;o&&(e.style.backgroundImage=o,ae(e,t,n))},Se=(e,t,n)=>{const s=l(e,t.data_bg_set);if(!s)return;let a=s.split("|").map((o=>`image-set(${o})`));e.style.backgroundImage=a.join(),ae(e,t,n)},ie={IMG:Ne,IFRAME:Te,VIDEO:Re,OBJECT:De},He=(e,t)=>{const n=ie[e.tagName];n&&n(e,t)},Ve=(e,t,n)=>{const s=ie[e.tagName];s&&(s(e,t),oe(e,t,n))},Be=["IMG","IFRAME","VIDEO","OBJECT"],Fe=e=>Be.indexOf(e.tagName)>-1,ce=(e,t)=>{!t||we(t)||Ce(t)||d(e.callback_finish,t)},re=(e,t,n)=>{e.addEventListener(t,n),e.llEvLisnrs[t]=n},Je=(e,t,n)=>{e.removeEventListener(t,n)},R=e=>!!e.llEvLisnrs,Pe=(e,t,n)=>{R(e)||(e.llEvLisnrs={});const s=e.tagName==="VIDEO"?"loadeddata":"load";re(e,s,t),re(e,"error",n)},D=e=>{if(!R(e))return;const t=e.llEvLisnrs;for(let n in t){const s=t[n];Je(e,n,s)}delete e.llEvLisnrs},de=(e,t,n)=>{Ae(e),N(n,-1),Oe(n),c(e,t.class_loading),t.unobserve_completed&&y(e,n)},Ue=(e,t,n,s)=>{const a=z(t);de(t,n,s),f(t,n.class_loaded),g(t,P),d(n.callback_loaded,t,s),a||ce(n,s)},qe=(e,t,n,s)=>{const a=z(t);de(t,n,s),f(t,n.class_error),g(t,C),d(n.callback_error,t,s),n.restore_on_error&&$(t,v),a||ce(n,s)},j=(e,t,n)=>{const s=W(e)||e;R(s)||Pe(s,(a=>{Ue(0,e,t,n),D(s)}),(a=>{qe(0,e,t,n),D(s)}))},G=(e,t,n)=>{Fe(e)?((s,a,o)=>{j(s,a,o),Ve(s,a,o)})(e,t,n):((s,a,o)=>{ke(s),j(s,a,o),Me(s),je(s,a,o),Ge(s,a,o),Se(s,a,o)})(e,t,n)},Ke=(e,t,n)=>{e.setAttribute("loading","lazy"),j(e,t,n),He(e,t),g(e,q)},_e=e=>{e.removeAttribute(r),e.removeAttribute(x),e.removeAttribute(O)},Qe=e=>{T(e,(t=>{_e(t)})),_e(e)},ue=e=>{T(e,(t=>{$(t,v)})),$(e,v)},We=e=>{Z(e,(t=>{$(t,k)})),$(e,ee),e.load()},Xe=e=>{$(e,k)},Ye=e=>{$(e,te)},Ze={IMG:ue,IFRAME:Xe,VIDEO:We,OBJECT:Ye},et=(e,t)=>{(n=>{const s=Ze[n.tagName];s?s(n):ze(n)})(e),((n,s)=>{M(n)||z(n)||(c(n,s.class_entered),c(n,s.class_exited),c(n,s.class_applied),c(n,s.class_loading),c(n,s.class_loaded),c(n,s.class_error))})(e,t),I(e),se(e)},tt=(e,t,n,s)=>{n.cancel_on_exit&&ve(e)&&e.tagName==="IMG"&&(D(e),Qe(e),ue(e),c(e,n.class_loading),N(s,-1),I(e),d(n.callback_cancel,e,t,s))},nt=(e,t,n,s)=>{const a=ye(e);g(e,me),f(e,n.class_entered),c(e,n.class_exited),xe(e,n,s),d(n.callback_enter,e,t,s),a||G(e,n,s)},st=(e,t,n,s)=>{M(e)||(f(e,n.class_exited),tt(e,t,n,s),d(n.callback_exit,e,t,s))},at=["IMG","IFRAME","VIDEO"],ge=e=>e.use_native&&"loading"in HTMLImageElement.prototype,ot=(e,t,n)=>{e.forEach((s=>{at.indexOf(s.tagName)!==-1&&Ke(s,t,n)})),X(n,0)},lt=e=>e.isIntersecting||e.intersectionRatio>0,it=(e,t)=>{t.forEach((n=>{e.observe(n)}))},ct=(e,t)=>{Le(e),it(e,t)},rt=(e,t)=>{ge(e)||(t._observer=new IntersectionObserver((n=>{((s,a,o)=>{s.forEach((u=>lt(u)?nt(u.target,u,a,o):st(u.target,u,a,o)))})(n,e,t)}),(n=>({root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))(e)))},$e=e=>Array.prototype.slice.call(e),L=e=>e.container.querySelectorAll(e.elements_selector),dt=e=>$e(e).filter(M),_t=e=>Ee(e),ut=e=>$e(e).filter(_t),be=(e,t)=>dt(e||L(t)),gt=(e,t)=>{ut(L(e)).forEach((n=>{c(n,e.class_error),I(n)})),t.update()},$t=(e,t)=>{i&&(t._onlineHandler=()=>{gt(e,t)},window.addEventListener("online",t._onlineHandler))},bt=e=>{i&&window.removeEventListener("online",e._onlineHandler)},E=function(e,t){const n=V(e);this._settings=n,this.loadingCount=0,rt(n,this),$t(n,this),this.update(t)};E.prototype={update:function(e){const t=this._settings,n=be(e,t);X(this,n.length),S?this.loadAll(n):ge(t)?ot(n,t,this):ct(this._observer,n)},destroy:function(){this._observer&&this._observer.disconnect(),bt(this),L(this._settings).forEach((e=>{se(e)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;be(e,t).forEach((n=>{y(n,this),G(n,t,this)}))},restoreAll:function(){const e=this._settings;L(e).forEach((t=>{et(t,e)}))}},E.load=(e,t)=>{const n=V(t);G(e,n)},E.resetStatus=e=>{I(e)},i&&he(E,window.lazyLoadOptions);const ft=E;b.Lazyload=ft,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/messenger/README.md

@@ -0,0 +1,109 @@
+# messenger
+
+```ts 
+messenger({
+  target?: Window | HTMLIFrameElement,
+  accept?: string[],
+  actions?: Record<string, (payload: any) => void>,
+  origin?: string
+}) 
+```
+# 📬 Messenger API Documentation
+
+The `messenger` utility provides a lightweight, secure interface for sending and receiving messages between windows or iframes using `postMessage`.
+
+---
+
+## ✅ Features
+
+* Easy dispatch and subscription to custom message actions.
+* Secure origin validation.
+* Works with iframes or separate window contexts.
+* Extensible via `subscribe`.
+
+---
+
+## 🧪 Usage
+
+### Parent Page
+
+```ts
+import { messenger } from 'jails.std/messenger'
+
+const msg = messenger({
+  target: document.getElementById('myIframe'), // <iframe id="myIframe" />
+  accept: ['https://child-app.com'],           // Allowed origins
+  actions: {
+    reply(data) {
+      console.log('Received from iframe:', data)
+    }
+  }
+})
+
+// Send message to iframe
+msg.dispatch('init', { user: 'Alice' })
+
+// Add more listeners later
+msg.subscribe({
+  status: (msg) => console.log('Status update:', msg)
+})
+```
+
+### Iframe Page
+
+```ts
+const msg = messenger({
+  target: window.parent,
+  accept: ['https://parent-app.com'],
+  actions: {
+    init(data){
+      console.log('Init from parent:', data)
+      msg.dispatch('reply', { received: true })
+    }
+  }
+})
+```
+
+---
+
+## 🧹 API
+
+### `messenger(options)`
+
+Creates a new Messenger instance.
+
+#### Options:
+
+| Option    | Type                          | Description                             |
+| --------- | ----------------------------- | --------------------------------------- |
+| `target`  | `Window \| HTMLIFrameElement` | Target to send messages to              |
+| `accept`  | `string[]`                    | Allowed origins (`['*']` to accept all) |
+| `actions` | `Record<string, Function>`    | Message handlers keyed by action name   |
+| `origin`  | `string`                      | The origin used when sending messages   |
+
+---
+
+### `.dispatch(action: string, payload?: any)`
+
+Sends a message to the target window.
+
+```ts
+msg.dispatch('sayHello', { name: 'Bob' })
+```
+
+---
+
+### `.subscribe(newActions: Record<string, Function>)`
+
+Adds more actions to the messenger at runtime.
+
+```ts
+msg.subscribe({ logout: () => console.log('Logging out...') })
+```
+
+---
+
+## 🔒 Security Notes
+
+* Always **specify allowed origins** in `accept` to avoid cross-site scripting risks.
+* Avoid using `'*'` unless absolutely necessary (e.g., during development).

package/messenger/index.d.ts

@@ -0,0 +1,9 @@
+export declare const messenger: ({ target, accept, actions, origin }?: {
+    target?: any;
+    accept?: any;
+    actions?: any;
+    origin?: string;
+}) => {
+    dispatch(action: string, payload?: any): void;
+    subscribe(actions_: any): void;
+};

package/messenger/index.js

@@ -0,0 +1,39 @@
+var w = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var a = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var r = (n, i, s) => i in n ? w(n, i, { enumerable: !0, configurable: !0, writable: !0, value: s }) : n[i] = s, d = (n, i) => {
+  for (var s in i || (i = {}))
+    a.call(i, s) && r(n, s, i[s]);
+  if (l)
+    for (var s of l(i))
+      p.call(i, s) && r(n, s, i[s]);
+  return n;
+};
+const f = ({
+  target: n = null,
+  accept: i = [],
+  actions: s = {},
+  origin: c = location.origin
+} = {}) => {
+  const m = (n == null ? void 0 : n.contentWindow) || n;
+  return window.addEventListener("message", (e) => {
+    if (i.includes("*") || i.includes(e.origin)) {
+      const { action: o, payload: u } = e.data;
+      o in s && s[o](u);
+    } else
+      throw {
+        type: "ACCESS DENIED",
+        message: "Cant receive message from: " + e.origin
+      };
+  }), {
+    dispatch(e, o) {
+      m.postMessage({ action: e, payload: o }, c);
+    },
+    subscribe(e) {
+      s = d(d({}, e), s);
+    }
+  };
+};
+export {
+  f as messenger
+};

package/messenger/index.ts

@@ -0,0 +1,38 @@
+
+export const messenger = ({ 
+	
+	target  = null as any,  
+	accept  = [] as any, 
+	actions = {} as any,
+	origin  = location.origin
+
+} = {}) => {
+
+	const win = target?.contentWindow || target
+
+	window.addEventListener('message', ( event ) => {
+
+		if( accept.includes('*') || accept.includes(event.origin) ) {
+			const { action, payload } = event.data 
+			if( action in actions ) {
+				actions[ action ]( payload as any )
+			}
+		} else {
+			throw {
+				type	: 'ACCESS DENIED', 
+				message	: 'Cant receive message from: ' + event.origin
+			}
+		}
+	})
+	
+	return {
+
+		dispatch( action: string, payload?: any ) {
+			win.postMessage({ action, payload }, origin)
+		},
+
+		subscribe( actions_: any ) {
+			actions = { ...actions_, ...actions }
+		}
+	}
+}

package/messenger/index.umd.js

@@ -0,0 +1 @@
+(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports):typeof define=="function"&&define.amd?define(["exports"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.messenger={}))})(this,(function(i){"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var l=(i,e,n)=>e in i?p(i,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):i[e]=n,f=(i,e)=>{for(var n in e||(e={}))g.call(e,n)&&l(i,n,e[n]);if(u)for(var n of u(e))y.call(e,n)&&l(i,n,e[n]);return i};const e=({target:n=null,accept:t=[],actions:o={},origin:r=location.origin}={})=>{const c=(n==null?void 0:n.contentWindow)||n;return window.addEventListener("message",s=>{if(t.includes("*")||t.includes(s.origin)){const{action:d,payload:m}=s.data;d in o&&o[d](m)}else throw{type:"ACCESS DENIED",message:"Cant receive message from: "+s.origin}}),{dispatch(s,d){c.postMessage({action:s,payload:d},r)},subscribe(s){o=f(f({},s),o)}}};i.messenger=e,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/mfe/README.md

@@ -0,0 +1,90 @@
+# mfe
+
+```ts 
+mfe ({ timeout?= 5000 } = {}): MFEInstance
+```
+
+A package to embed an external front-end application into the current application. 
+
+If resources failed to load, promise is rejected after **timeout** milisseconds.
+
+### Usage
+
+It can embed a full html, css, js from an external url.
+
+```ts 
+
+import { mfe } from 'jails.std/mfe'
+
+function main () {
+
+  const microfrontend = mfe()
+  const target = document.querySelector('#target')
+
+  microfrontend
+    .render( helloworld, 'http://localhost:4000' )
+    .then(( target ) => console.log(target, 'is ready'))
+    .catch( err => console.error(err) )
+}
+```
+
+**Important** : Loading html files externally means that you will face some issues with C.O.R.S, so be aware of that.
+
+It can also embed a single page app from a external `.js` file. 
+
+```ts 
+
+import { mfe } from 'jails.std/mfe'
+
+function main () {
+
+  const microfrontend = mfe()
+  const target = document.querySelector('#target')
+
+  microfrontend.renderJS({
+    target: test,
+    tag   : 'my-component', // <my-component></my-component> your external js should mount in this custom element.
+    src   : 'http://localhost:8000/test.js'
+  })
+    .then(( target ) => console.log(target, 'is ready'))
+    .catch( err => console.error(err) )
+}
+```
+
+### Shell()
+You might need to share data from your shell to your microfrontends.
+Instead of doing that manually by using a global variable, you can use `Shell()` function to create 
+a channel where you can communicate your shell with your MFE's.
+
+Example:
+
+#### On shell
+
+`main.ts`
+
+```ts
+import { Shell } from 'jails.std/mfe'
+
+export const shell = Shell({
+  somevariable,
+  someFunction, 
+  someInstance,
+  ...etc
+})
+
+```
+
+#### On MFE
+
+`main.ts`
+
+```ts 
+import { Shell } from 'jails.std/mfe'
+
+export const shell = Shell({
+  somevariable,
+  somefunction
+})
+```
+
+You have to guarantee that you'll provide the MFE dependencies on your Shell aswell.

package/mfe/index.d.ts

@@ -0,0 +1,11 @@
+export declare const mfe: ({ timeout }?: {
+    timeout?: number;
+}) => {
+    renderJS({ target, tag, src }: {
+        target: any;
+        tag: any;
+        src: any;
+    }): Promise<unknown>;
+    render(target: any, uri: string): Promise<unknown>;
+};
+export declare const Shell: (config?: {}) => any;

package/mfe/index.js

@@ -0,0 +1,99 @@
+var T = Object.defineProperty;
+var b = Object.getOwnPropertySymbols;
+var A = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
+var L = (n, e, t) => e in n ? T(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, p = (n, e) => {
+  for (var t in e || (e = {}))
+    A.call(e, t) && L(n, t, e[t]);
+  if (b)
+    for (var t of b(e))
+      E.call(e, t) && L(n, t, e[t]);
+  return n;
+};
+var w = (n, e, t) => new Promise((l, s) => {
+  var h = (r) => {
+    try {
+      a(t.next(r));
+    } catch (d) {
+      s(d);
+    }
+  }, u = (r) => {
+    try {
+      a(t.throw(r));
+    } catch (d) {
+      s(d);
+    }
+  }, a = (r) => r.done ? l(r.value) : Promise.resolve(r.value).then(h, u);
+  a((t = t.apply(n, e)).next());
+});
+const P = ({ timeout: n = 5e3 } = {}) => {
+  const e = {};
+  return {
+    renderJS({ target: l, tag: s, src: h }) {
+      return l.innerHTML = `<${s}></${s}>`, new Promise((u, a) => {
+        const r = document.createElement("script");
+        r.src = h, r.async = !0, r.onload = () => u(l), r.onerror = (d) => a({
+          type: "error",
+          message: `[mfe] - ${d.type} loading script`
+        }), document.head.appendChild(r);
+      });
+    },
+    render(l, s) {
+      return w(this, null, function* () {
+        if (!l)
+          return new Promise((h, u) => {
+            throw {
+              type: "not-found",
+              data: { target: l, path: s },
+              message: "[mfe] - Target not found"
+            };
+          });
+        if (e[s])
+          e[s].push({ target: l });
+        else {
+          e[s] = [];
+          const h = yield fetch(s).then((o) => o.text()), a = new DOMParser().parseFromString(h, "text/html"), r = a.querySelectorAll('link[rel="stylesheet"], style'), d = a.querySelectorAll("script"), f = new URL(s), y = [];
+          r.forEach((o) => {
+            switch (o.localName) {
+              case "link":
+                const c = document.createElement("link");
+                c.setAttribute("rel", "stylesheet"), c.setAttribute("href", new URL(o.getAttribute("href") || "", f).href), y.push(new Promise((i, m) => {
+                  c.onload = () => i(!0), c.onerror = () => m(new Error(`Failed to load ${c.href}`));
+                })), document.head.appendChild(c);
+                break;
+              case "style":
+                const _ = document.createElement("style");
+                _.innerHTML = o.innerHTML, document.head.appendChild(_);
+                break;
+            }
+          });
+          const S = [];
+          return d.forEach((o) => {
+            S.push(() => new Promise((c, _) => {
+              const i = document.createElement("script");
+              for (const m of o.attributes)
+                i.setAttribute(m.name, m.value);
+              if (o.text) {
+                i.text = o.text, document.head.appendChild(i), c(o);
+                return;
+              }
+              o.src && (i.setAttribute("src", new URL(o.getAttribute("src") || "", f).href), i.onload = c, i.onerror = _, document.head.appendChild(i));
+            }));
+          }), new Promise((o) => {
+            Promise.allSettled(y).then(() => l.innerHTML = a.body.innerHTML).then(() => M(S)).then(() => setTimeout(o, 1e3)).then(() => e[s].forEach(({ target: c }) => c.innerHTML = a.body.innerHTML));
+          });
+        }
+      });
+    }
+  };
+}, k = (n = {}) => window.___Shell___ ? (window.___Shell___ = p(p({}, n), window.___Shell___), window.___Shell___) : (window.___Shell___ = p({}, n), window.___Shell___), M = (n) => w(null, null, function* () {
+  const e = [];
+  for (const t of n) {
+    const l = yield t();
+    e.push(l);
+  }
+  return e;
+});
+export {
+  k as Shell,
+  P as mfe
+};

package/mfe/index.ts

@@ -0,0 +1,141 @@
+declare const window: any
+
+export const mfe = ({ timeout =  5000 } = {}) => {
+	
+	const cache = {}
+ 
+	return {
+
+		renderJS({ target, tag, src }) {
+	
+			target.innerHTML = `<${tag}></${tag}>`
+
+			return new Promise((resolve, reject) => {
+				const script = document.createElement('script')
+				script.src = src 
+				script.async = true 
+				script.onload = () => resolve( target )
+				script.onerror = (e:Event) => reject({
+					type: 'error',
+					message: `[mfe] - ${e.type} loading script`
+				})
+				document.head.appendChild(script)
+			})
+		},
+
+		async render( target: any, uri: string ) {
+
+			if( !target ) {
+				return new Promise((resolve, reject) => {
+					throw {
+						type: 'not-found',
+						data: { target, path: uri },
+						message: '[mfe] - Target not found'
+					}
+				})
+			}
+
+			if( !cache[uri] ) {
+				
+				cache[uri] 			= []
+				const html 	 		= await fetch( uri ).then( res => res.text() )
+				const parser	 	= new DOMParser()
+				const doc 	 		= parser.parseFromString( html, 'text/html' )
+				const assets 		= doc.querySelectorAll( 'link[rel="stylesheet"], style' )
+				const scripts 		= doc.querySelectorAll( 'script' )
+				const url 	 		= new URL( uri )
+				const promises: any = []
+		
+				assets.forEach((asset: any) => {
+					
+					switch( asset.localName ) {
+						
+						case 'link':
+		
+							const link = document.createElement( 'link' )
+							
+							link.setAttribute( 'rel', 'stylesheet' )
+							link.setAttribute( 'href',  new URL( asset.getAttribute( 'href' ) || '', url ).href )
+							
+							promises.push( new Promise((resolve, reject) => {
+								link.onload = () => resolve( true )
+								link.onerror = () => reject( new Error( `Failed to load ${link.href}` ))	
+							}))
+							
+							document.head.appendChild( link )
+		
+						break
+		
+						case 'style': 
+		
+							const style = document.createElement( 'style' )
+							style.innerHTML = asset.innerHTML
+							document.head.appendChild( style )
+		
+						break
+					}
+		
+				})
+		
+				const promiseScripts = []
+		
+				scripts.forEach( script => {
+					promiseScripts.push(() => {
+						return new Promise((resolve, reject) => {
+							const s = document.createElement('script')
+				
+							// Copy attributes
+							for (const attr of script.attributes) {
+								s.setAttribute(attr.name, attr.value)
+							}
+				
+							if( script.text ) {
+								s.text = script.text 
+								document.head.appendChild(s)
+								resolve(script)
+								return 
+							}
+							
+							if( script.src ) {
+								s.setAttribute( 'src',  new URL( script.getAttribute( 'src' ) || '', url ).href )
+								s.onload = resolve 
+								s.onerror = reject
+								document.head.appendChild(s)
+							}
+						})
+					})
+				})
+		
+				return new Promise((resolve) => {
+					Promise.allSettled( promises )
+						.then(() => target.innerHTML = doc.body.innerHTML )
+						.then(() => runSequentially(promiseScripts))
+						.then(() => setTimeout(resolve, 1000))
+						.then(() => cache[uri].forEach(({target}) => target.innerHTML = doc.body.innerHTML))
+				})
+			} else {
+				cache[uri].push({ target })
+			}
+		}
+	}
+}
+
+export const Shell = ( config = {} ) => {
+	
+	if( !window.___Shell___ ) {
+		window.___Shell___ = { ...config }
+		return window.___Shell___
+	} else {
+		window.___Shell___ = { ...config, ...window.___Shell___ }
+		return window.___Shell___
+	}
+}
+
+const runSequentially = async ( promiseFactories ) => {
+	const results = []
+	for (const factory of promiseFactories) {
+		const result = await factory()
+		results.push(result)
+	}
+	return results
+}

package/mfe/index.umd.js

@@ -0,0 +1 @@
+(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports):typeof define=="function"&&define.amd?define(["exports"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.mfe={}))})(this,(function(n){"use strict";var P=Object.defineProperty;var A=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var E=(n,e,r)=>e in n?P(n,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[e]=r,_=(n,e)=>{for(var r in e||(e={}))H.call(e,r)&&E(n,r,e[r]);if(A)for(var r of A(e))k.call(e,r)&&E(n,r,e[r]);return n};var b=(n,e,r)=>new Promise((p,d)=>{var c=t=>{try{s(r.next(t))}catch(a){d(a)}},w=t=>{try{s(r.throw(t))}catch(a){d(a)}},s=t=>t.done?p(t.value):Promise.resolve(t.value).then(c,w);s((r=r.apply(n,e)).next())});const e=({timeout:d=5e3}={})=>{const c={};return{renderJS({target:s,tag:t,src:a}){return s.innerHTML=`<${t}></${t}>`,new Promise((y,u)=>{const h=document.createElement("script");h.src=a,h.async=!0,h.onload=()=>y(s),h.onerror=S=>u({type:"error",message:`[mfe] - ${S.type} loading script`}),document.head.appendChild(h)})},render(s,t){return b(this,null,function*(){if(!s)return new Promise((a,y)=>{throw{type:"not-found",data:{target:s,path:t},message:"[mfe] - Target not found"}});if(c[t])c[t].push({target:s});else{c[t]=[];const a=yield fetch(t).then(o=>o.text()),u=new DOMParser().parseFromString(a,"text/html"),h=u.querySelectorAll('link[rel="stylesheet"], style'),S=u.querySelectorAll("script"),T=new URL(t),L=[];h.forEach(o=>{switch(o.localName){case"link":const l=document.createElement("link");l.setAttribute("rel","stylesheet"),l.setAttribute("href",new URL(o.getAttribute("href")||"",T).href),L.push(new Promise((i,f)=>{l.onload=()=>i(!0),l.onerror=()=>f(new Error(`Failed to load ${l.href}`))})),document.head.appendChild(l);break;case"style":const m=document.createElement("style");m.innerHTML=o.innerHTML,document.head.appendChild(m);break}});const M=[];return S.forEach(o=>{M.push(()=>new Promise((l,m)=>{const i=document.createElement("script");for(const f of o.attributes)i.setAttribute(f.name,f.value);if(o.text){i.text=o.text,document.head.appendChild(i),l(o);return}o.src&&(i.setAttribute("src",new URL(o.getAttribute("src")||"",T).href),i.onload=l,i.onerror=m,document.head.appendChild(i))}))}),new Promise(o=>{Promise.allSettled(L).then(()=>s.innerHTML=u.body.innerHTML).then(()=>p(M)).then(()=>setTimeout(o,1e3)).then(()=>c[t].forEach(({target:l})=>l.innerHTML=u.body.innerHTML))})}})}}},r=(d={})=>window.___Shell___?(window.___Shell___=_(_({},d),window.___Shell___),window.___Shell___):(window.___Shell___=_({},d),window.___Shell___),p=d=>b(null,null,function*(){const c=[];for(const w of d){const s=yield w();c.push(s)}return c});n.Shell=r,n.mfe=e,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/outlet/README.md

@@ -0,0 +1,46 @@
+# outlet
+```ts 
+outlet( target: string ) : OutletInstance
+```
+Outlet allows you to render external pages within your application as if it were a SPA. It loads the HTML, JavaScript, and CSS of the target page into a designated DOM element of your choice.
+
+---
+
+## Markup
+```html
+<main data-outlet></main>
+```
+
+## .render
+```ts 
+render( url: string ) : Promise<target: HTMLElement>
+```
+
+```ts
+import { Oultet } from 'jails.std/outlet'
+
+const target = document.querySelector('[data-outlet]')
+const outlet = Outlet({ target })
+
+outlet.render('http://localhost:3001/') // Renders html, css and javascript from a application running on localhost:3001
+outlet.render() // Renders the initial state from the page before rendering localhost:3001 and clear css, js and html loaded from the last 
+```
+
+## .renderJS
+```ts 
+renderJS( element: string, url: string ) : Promise<element: HTMLElement>
+```
+
+If you have a JavaScript-based SPA hosted at a URL—meaning the script is self-executing and handles rendering the HTML, CSS, and JavaScript functionalities—you can use the renderJS method.
+
+This method requires a custom element, provided as a string in the first argument, and the second argument should be the URL of the hosted JavaScript file.
+
+```ts
+renderJS('my-component', 'http://localhost:8000/test.js')
+```
+
+In the example above, make sure your JavaScript initializes the application targeting the my-component element. This ensures a contract between your shell application and the remote application.
+
+
+## Important
+For the render version, you need to ensure that the target application has CORS enabled, as Outlet makes a fetch request to the target application behind the scenes to render its HTML within your current application.

package/outlet/index.d.ts

@@ -0,0 +1,6 @@
+export declare const Outlet: ({ target: outlet }: {
+    target: any;
+}) => {
+    renderJS(name: any, path?: any): Promise<any>;
+    render(path?: any): Promise<any>;
+};