@web-applets/sdk 0.2.0-alpha.8 → 0.2.0-alpha.9

package/dist/applets/applet-scope.js

@@ -72,8 +72,10 @@ export class AppletScope extends EventTarget {
         };
         debug.log('AppletScope', 'Send message', actionsMessage);
         __classPrivateFieldGet(this, _AppletScope_postMessage, "f") && __classPrivateFieldGet(this, _AppletScope_postMessage, "f").call(this, actionsMessage);
+        // Set a timeout, so if data is set and a listener attached immediately after
+        // the listener will still fire
         const dataEvent = new AppletEvent('actions', { actions });
-        __classPrivateFieldGet(this, _AppletScope_dispatchEventAndHandler, "f").call(this, dataEvent);
+        setTimeout(() => __classPrivateFieldGet(this, _AppletScope_dispatchEventAndHandler, "f").call(this, dataEvent), 1);
     }
     get actions() {
         return __classPrivateFieldGet(this, _AppletScope_actions, "f");
@@ -95,8 +97,10 @@ export class AppletScope extends EventTarget {
         };
         debug.log('AppletScope', 'Send message', dataMessage);
         __classPrivateFieldGet(this, _AppletScope_postMessage, "f") && __classPrivateFieldGet(this, _AppletScope_postMessage, "f").call(this, dataMessage);
+        // Set a timeout, so if data is set and a listener attached immediately after
+        // the listener will still fire
         const dataEvent = new AppletEvent('data', { data });
-        __classPrivateFieldGet(this, _AppletScope_dispatchEventAndHandler, "f").call(this, dataEvent);
+        setTimeout(() => __classPrivateFieldGet(this, _AppletScope_dispatchEventAndHandler, "f").call(this, dataEvent), 1);
     }
     get data() {
         return __classPrivateFieldGet(this, _AppletScope_data, "f");

package/dist/web-applets.min.js

@@ -1,4 +1,4 @@
-(()=>{var h=class extends Error{constructor(e){super(e),this.name="AppletExecutionError"}},A=class extends Error{constructor(e){super(e),this.name="AppletConnectionError"}};function c(p){typeof this[`on${p.type}`]=="function"&&this[`on${p.type}`](p),this.dispatchEvent(p)}var a=class extends Event{constructor(e,t){super(e,{bubbles:t?.bubbles,composed:t?.composed,cancelable:t?.cancelable}),this.data=t?.data,this.actions=t?.actions}};function b(p,...e){console.log(`[${p}]`,...e)}var o={log:b};var f=class extends EventTarget{#s;#a={};#t;#i;#n;#e;#o;#p;#r;constructor(e){super(),o.log("Applet","Constructor called"),this.#s=e,this.#n=c.bind(this),this.#c();let t=s=>{s.source===this.#s&&"type"in s.data&&s.data.type==="appletconnect"&&(o.log("Applet","Recieved message",s.data),this.#c(),this.removeEventListener("message",t))};window.addEventListener("message",t)}#c(){this.#e&&this.#e.close();let e=new MessageChannel,t={type:"appletconnect"};o.log("Applet","Send message",t),this.#e=e.port1,this.#e.onmessage=this.#h.bind(this),this.#s.postMessage(t,"*",[e.port2]),this.#o=this.#e.postMessage.bind(this.#e)}#h(e){let t=e.data;switch(o.log("Applet","Recieved message",t),t.type){case"register":let s=t;this.#t=s.manifest;let n=new a("connect");this.#n(n),this.#a=s.actions,this.#d(s.actions),this.#i=s.data,this.#l(s.data);break;case"data":let i=t;this.#i=i.data,this.#l(i.data);break;case"resize":let r=t;this.#p=r.width,this.#r=r.height;let g=new a("resize");this.#n(g);break;case"actions":let m=t;this.#a=m.actions,this.#d(m.actions);break}}#l(e){let t=new a("data",{data:e});this.#n(t)}#d(e){let t=new a("actions",{actions:e});this.#n(t)}async sendAction(e,t){let s={id:crypto.randomUUID(),type:"action",actionId:e,arguments:t};return new Promise((n,i)=>{this.#o(s);let r=setTimeout(()=>{i(new h(`Applet action handler failed to complete before timeout (${1e4}ms)`))},1e4),g=m=>{let d=m.data;if(["actioncomplete","actionerror"].includes(d.type)&&"id"in d&&d.id===s.id)if(this.#e.removeEventListener("message",g),clearTimeout(r),d.type==="actionerror"){let w=d;i(new h(w.message))}else n()};this.#e.addEventListener("message",g)})}get data(){return this.#i}set data(e){this.#i=e;let t={type:"data",data:e};this.#o(t)}get window(){return this.#s}get manifest(){return this.#t}get actions(){return this.#a}get width(){return this.#p}get height(){return this.#r}};var E=class extends EventTarget{#s={};#a;#t;#i;#n;#e;#o;#p;constructor(e){super(),o.log("AppletScope","Constructor called"),this.#n=c.bind(this),e&&(this.#a=e);let t=n=>{if(n.source===window.parent&&n.data.type==="appletconnect"&&n.ports&&n.ports.length>0){o.log("AppletScope","Recieved message",n.data);let i=n.ports[0];this.#e=i.postMessage.bind(i),i.onmessage=this.#c.bind(this),this.removeEventListener("message",t),this.#r()}};window.addEventListener("message",t);let s={type:"appletconnect"};window.parent.postMessage(s,"*"),o.log("AppletScope","Send message",s)}async#r(){let e=this.manifest??await this.#g();this.#a=e||{},this.#t=this.#t||e?.actions||{};let t={type:"register",manifest:this.#a,actions:this.#t,data:this.#i};this.#e(t),o.log("AppletScope","Send message",t);let s=new a("connect");this.#n(s),this.#l()}#c(e){let t=e.data;switch(o.log("AppletScope","Recieved message",t),t.type){case"data":"data"in t&&(this.data=t.data);break;case"action":"type"in t&&t.type==="action"&&"id"in t&&typeof t.id=="string"&&"actionId"in t&&typeof t.actionId=="string"&&"arguments"in t&&this.#h(t);break}}async#h(e){if(Object.keys(this.#s).includes(e.actionId))try{await this.#s[e.actionId](e.arguments);let t={type:"actioncomplete",id:e.id};this.#e(t)}catch(t){let s={type:"actionerror",id:e.id,message:t.message};this.#e(s),console.error(t)}}#l(){new ResizeObserver(t=>{for(let s of t)this.#d({width:s.contentRect.width,height:s.contentRect.height})}).observe(document.querySelector("html"))}#d({width:e,height:t}){this.#o=e,this.#p=t;let s={type:"resize",width:e,height:t};o.log("AppletScope","Send message",s),this.#e(s)}async#g(){let e=document.querySelector('link[rel="manifest"]');if(e)try{let s=await(await fetch(e.href)).json();for(let n in s.actions){let i=s.actions[n];i.params_schema&&!Object.keys(i.params_schema).length&&(i.params_schema=void 0)}return s}catch{return}}setActionHandler(e,t){this.#s[e]=t}defineAction(e,t){let{handler:s,...n}=t;s&&(this.#s[e]=s),this.actions={...this.actions,[e]:n}}set actions(e){if(!e)return;this.#t=e;let t={type:"actions",actions:this.#t};o.log("AppletScope","Send message",t),this.#e&&this.#e(t);let s=new a("actions",{actions:e});this.#n(s)}get actions(){return this.#t}get manifest(){return this.#a}get actionHandlers(){return this.#s}set actionHandlers(e){this.#s=e}set data(e){this.#i=e;let t={type:"data",data:e};o.log("AppletScope","Send message",t),this.#e&&this.#e(t);let s=new a("data",{data:e});this.#n(s)}get data(){return this.#i}get width(){return this.#o}get height(){return this.#p}};var u=class{async connect(e){return new Promise((t,s)=>{let n=new f(e),i=setTimeout(()=>{s(new A(`Applet failed to connect before the timeout was reached (${1e4}ms)`))},1e4),r=()=>{t(n),n.removeEventListener("connect",r),clearTimeout(i)};n.addEventListener("connect",r)})}register(e){return new E(e)}};var l=class extends HTMLElement{#s;#a;#t;#i=c.bind(this);#n=document.createElement("iframe");static{this.observedAttributes=["src"]}connectedCallback(){this.#s=this.attachShadow({mode:"closed"}),this.#s.appendChild(this.#n);let e=document.createElement("style");e.textContent=this.styles,this.#s.appendChild(e),this.src=this.getAttribute("src")}get contentWindow(){return this.#n.contentWindow}set src(e){this.#a=e,this.#t=void 0,this.#e(e)}get src(){return this.#a||""}attributeChangedCallback(e,t,s){e==="src"&&(this.src=s)}async#e(e){this.#n.src=e;let t=this.#n.contentWindow;t&&(this.#t=await y.connect(t),this.#t.ondata=s=>{this.#i(s)},this.#t.onresize=s=>{this.#o({width:this.#t.width,height:this.#t.height})},this.#t.onactions=s=>{this.#i(s)},this.#i(new Event("load")),this.load&&typeof this.load=="function"&&this.onload(new Event("load")))}get applet(){return this.#t}set data(e){if(this.applet)this.applet.data=e;else{let t=()=>{this.applet&&(this.applet.data=e),this.removeEventListener("load",t)};this.addEventListener("load",t)}}#o(e){this.style.height=`${e.height}px`}get styles(){return`
+(()=>{var h=class extends Error{constructor(e){super(e),this.name="AppletExecutionError"}},A=class extends Error{constructor(e){super(e),this.name="AppletConnectionError"}};function c(p){typeof this[`on${p.type}`]=="function"&&this[`on${p.type}`](p),this.dispatchEvent(p)}var o=class extends Event{constructor(e,t){super(e,{bubbles:t?.bubbles,composed:t?.composed,cancelable:t?.cancelable}),this.data=t?.data,this.actions=t?.actions}};function b(p,...e){console.log(`[${p}]`,...e)}var a={log:b};var f=class extends EventTarget{#s;#o={};#t;#i;#n;#e;#a;#p;#r;constructor(e){super(),a.log("Applet","Constructor called"),this.#s=e,this.#n=c.bind(this),this.#c();let t=s=>{s.source===this.#s&&"type"in s.data&&s.data.type==="appletconnect"&&(a.log("Applet","Recieved message",s.data),this.#c(),this.removeEventListener("message",t))};window.addEventListener("message",t)}#c(){this.#e&&this.#e.close();let e=new MessageChannel,t={type:"appletconnect"};a.log("Applet","Send message",t),this.#e=e.port1,this.#e.onmessage=this.#h.bind(this),this.#s.postMessage(t,"*",[e.port2]),this.#a=this.#e.postMessage.bind(this.#e)}#h(e){let t=e.data;switch(a.log("Applet","Recieved message",t),t.type){case"register":let s=t;this.#t=s.manifest;let n=new o("connect");this.#n(n),this.#o=s.actions,this.#d(s.actions),this.#i=s.data,this.#l(s.data);break;case"data":let i=t;this.#i=i.data,this.#l(i.data);break;case"resize":let r=t;this.#p=r.width,this.#r=r.height;let g=new o("resize");this.#n(g);break;case"actions":let m=t;this.#o=m.actions,this.#d(m.actions);break}}#l(e){let t=new o("data",{data:e});this.#n(t)}#d(e){let t=new o("actions",{actions:e});this.#n(t)}async sendAction(e,t){let s={id:crypto.randomUUID(),type:"action",actionId:e,arguments:t};return new Promise((n,i)=>{this.#a(s);let r=setTimeout(()=>{i(new h(`Applet action handler failed to complete before timeout (${1e4}ms)`))},1e4),g=m=>{let d=m.data;if(["actioncomplete","actionerror"].includes(d.type)&&"id"in d&&d.id===s.id)if(this.#e.removeEventListener("message",g),clearTimeout(r),d.type==="actionerror"){let w=d;i(new h(w.message))}else n()};this.#e.addEventListener("message",g)})}get data(){return this.#i}set data(e){this.#i=e;let t={type:"data",data:e};this.#a(t)}get window(){return this.#s}get manifest(){return this.#t}get actions(){return this.#o}get width(){return this.#p}get height(){return this.#r}};var E=class extends EventTarget{#s={};#o;#t;#i;#n;#e;#a;#p;constructor(e){super(),a.log("AppletScope","Constructor called"),this.#n=c.bind(this),e&&(this.#o=e);let t=n=>{if(n.source===window.parent&&n.data.type==="appletconnect"&&n.ports&&n.ports.length>0){a.log("AppletScope","Recieved message",n.data);let i=n.ports[0];this.#e=i.postMessage.bind(i),i.onmessage=this.#c.bind(this),this.removeEventListener("message",t),this.#r()}};window.addEventListener("message",t);let s={type:"appletconnect"};window.parent.postMessage(s,"*"),a.log("AppletScope","Send message",s)}async#r(){let e=this.manifest??await this.#g();this.#o=e||{},this.#t=this.#t||e?.actions||{};let t={type:"register",manifest:this.#o,actions:this.#t,data:this.#i};this.#e(t),a.log("AppletScope","Send message",t);let s=new o("connect");this.#n(s),this.#l()}#c(e){let t=e.data;switch(a.log("AppletScope","Recieved message",t),t.type){case"data":"data"in t&&(this.data=t.data);break;case"action":"type"in t&&t.type==="action"&&"id"in t&&typeof t.id=="string"&&"actionId"in t&&typeof t.actionId=="string"&&"arguments"in t&&this.#h(t);break}}async#h(e){if(Object.keys(this.#s).includes(e.actionId))try{await this.#s[e.actionId](e.arguments);let t={type:"actioncomplete",id:e.id};this.#e(t)}catch(t){let s={type:"actionerror",id:e.id,message:t.message};this.#e(s),console.error(t)}}#l(){new ResizeObserver(t=>{for(let s of t)this.#d({width:s.contentRect.width,height:s.contentRect.height})}).observe(document.querySelector("html"))}#d({width:e,height:t}){this.#a=e,this.#p=t;let s={type:"resize",width:e,height:t};a.log("AppletScope","Send message",s),this.#e(s)}async#g(){let e=document.querySelector('link[rel="manifest"]');if(e)try{let s=await(await fetch(e.href)).json();for(let n in s.actions){let i=s.actions[n];i.params_schema&&!Object.keys(i.params_schema).length&&(i.params_schema=void 0)}return s}catch{return}}setActionHandler(e,t){this.#s[e]=t}defineAction(e,t){let{handler:s,...n}=t;s&&(this.#s[e]=s),this.actions={...this.actions,[e]:n}}set actions(e){if(!e)return;this.#t=e;let t={type:"actions",actions:this.#t};a.log("AppletScope","Send message",t),this.#e&&this.#e(t);let s=new o("actions",{actions:e});setTimeout(()=>this.#n(s),1)}get actions(){return this.#t}get manifest(){return this.#o}get actionHandlers(){return this.#s}set actionHandlers(e){this.#s=e}set data(e){this.#i=e;let t={type:"data",data:e};a.log("AppletScope","Send message",t),this.#e&&this.#e(t);let s=new o("data",{data:e});setTimeout(()=>this.#n(s),1)}get data(){return this.#i}get width(){return this.#a}get height(){return this.#p}};var u=class{async connect(e){return new Promise((t,s)=>{let n=new f(e),i=setTimeout(()=>{s(new A(`Applet failed to connect before the timeout was reached (${1e4}ms)`))},1e4),r=()=>{t(n),n.removeEventListener("connect",r),clearTimeout(i)};n.addEventListener("connect",r)})}register(e){return new E(e)}};var l=class extends HTMLElement{#s;#o;#t;#i=c.bind(this);#n=document.createElement("iframe");static{this.observedAttributes=["src"]}connectedCallback(){this.#s=this.attachShadow({mode:"closed"}),this.#s.appendChild(this.#n);let e=document.createElement("style");e.textContent=this.styles,this.#s.appendChild(e),this.src=this.getAttribute("src")}get contentWindow(){return this.#n.contentWindow}set src(e){this.#o=e,this.#t=void 0,this.#e(e)}get src(){return this.#o||""}attributeChangedCallback(e,t,s){e==="src"&&(this.src=s)}async#e(e){this.#n.src=e;let t=this.#n.contentWindow;t&&(this.#t=await y.connect(t),this.#t.ondata=s=>{this.#i(s)},this.#t.onresize=s=>{this.#a({width:this.#t.width,height:this.#t.height})},this.#t.onactions=s=>{this.#i(s)},this.#i(new Event("load")),this.load&&typeof this.load=="function"&&this.onload(new Event("load")))}get applet(){return this.#t}set data(e){if(this.applet)this.applet.data=e;else{let t=()=>{this.applet&&(this.applet.data=e),this.removeEventListener("load",t)};this.addEventListener("load",t)}}#a(e){this.style.height=`${e.height}px`}get styles(){return`
       :host {
         display: flex;
         flex-direction: column;
@@ -10,4 +10,4 @@
         height: 100%;
         width: 100%;
       }
-    `}};customElements.define("applet-frame",l);var y=new u;window.applets=y;window.AppletEvent=a;window.AppletFrameElement=l;})();
+    `}};customElements.define("applet-frame",l);var y=new u;window.applets=y;window.AppletEvent=o;window.AppletFrameElement=l;})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-applets/sdk",
-  "version": "0.2.0-alpha.8",
+  "version": "0.2.0-alpha.9",
   "description": "The Web Applets SDK, for creating & hosting Web Applets.",
   "author": "Rupert Manfredi <rupert@unternet.co>",
   "license": "MIT",