@web-applets/sdk 0.2.4 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -12,8 +12,7 @@ Web Applets is a [Mozilla Builders](https://builders.mozilla.org/) project.
|
|
|
12
12
|
|
|
13
13
|
**Web Applets is an open specification for building software that both humans and AI can understand and use together.** Instead of forcing AI to operate traditional point-and-click apps built for humans, Web Applets creates a new kind of web software designed for human-AI collaboration. You can read more about it on our website.
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
- [Getting started with building an applet](https://unternet.co/docs/web-applets/creating-an-applet)
|
|
15
|
+
Read [the docs](https://unternet.co/docs/web-applets/introduction)!
|
|
17
16
|
|
|
18
17
|
|
|
19
18
|
|
|
@@ -195,19 +195,18 @@ _AppletScope_actionHandlers = new WeakMap(), _AppletScope_manifest = new WeakMap
|
|
|
195
195
|
console.warn('No manifest link found');
|
|
196
196
|
return;
|
|
197
197
|
}
|
|
198
|
-
// TODO: Add timeout
|
|
199
198
|
try {
|
|
200
199
|
const manifestRequest = await fetch(manifestLinkElem.href);
|
|
201
200
|
const manifest = (await manifestRequest.json());
|
|
202
201
|
for (const key in manifest.actions) {
|
|
203
202
|
const action = manifest.actions[key];
|
|
204
|
-
if (action.params_schema &&
|
|
203
|
+
if (action.params_schema && isEmpty(action.params_schema)) {
|
|
205
204
|
action.params_schema = undefined;
|
|
206
205
|
}
|
|
207
206
|
}
|
|
208
207
|
return manifest;
|
|
209
208
|
}
|
|
210
209
|
catch (e) {
|
|
211
|
-
|
|
210
|
+
console.warn('Failed to fetch manifest', e.message);
|
|
212
211
|
}
|
|
213
212
|
};
|
|
@@ -1,4 +1,69 @@
|
|
|
1
|
-
|
|
1
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
2
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
3
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
4
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
5
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
6
|
+
};
|
|
7
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
+
};
|
|
12
|
+
var _AppletFrameElement_instances, _AppletFrameElement_root, _AppletFrameElement_src, _AppletFrameElement_applet, _AppletFrameElement_dispatchEventAndHandler, _AppletFrameElement_iframe, _AppletFrameElement_loadApplet, _AppletFrameElement_resizeContainer;
|
|
13
|
+
import { applets } from '../index.js';
|
|
14
|
+
import { dispatchEventAndHandler } from '../utils.js';
|
|
15
|
+
export class AppletFrameElement extends HTMLElement {
|
|
16
|
+
constructor() {
|
|
17
|
+
super(...arguments);
|
|
18
|
+
_AppletFrameElement_instances.add(this);
|
|
19
|
+
_AppletFrameElement_root.set(this, void 0);
|
|
20
|
+
_AppletFrameElement_src.set(this, void 0);
|
|
21
|
+
_AppletFrameElement_applet.set(this, void 0);
|
|
22
|
+
_AppletFrameElement_dispatchEventAndHandler.set(this, dispatchEventAndHandler.bind(this));
|
|
23
|
+
_AppletFrameElement_iframe.set(this, document.createElement('iframe'));
|
|
24
|
+
}
|
|
25
|
+
connectedCallback() {
|
|
26
|
+
__classPrivateFieldSet(this, _AppletFrameElement_root, this.attachShadow({ mode: 'closed' }), "f");
|
|
27
|
+
__classPrivateFieldGet(this, _AppletFrameElement_root, "f").appendChild(__classPrivateFieldGet(this, _AppletFrameElement_iframe, "f"));
|
|
28
|
+
const styles = document.createElement('style');
|
|
29
|
+
styles.textContent = this.styles;
|
|
30
|
+
__classPrivateFieldGet(this, _AppletFrameElement_root, "f").appendChild(styles);
|
|
31
|
+
this.src = this.getAttribute('src');
|
|
32
|
+
}
|
|
33
|
+
get contentWindow() {
|
|
34
|
+
return __classPrivateFieldGet(this, _AppletFrameElement_iframe, "f").contentWindow;
|
|
35
|
+
}
|
|
36
|
+
set src(value) {
|
|
37
|
+
__classPrivateFieldSet(this, _AppletFrameElement_src, value, "f");
|
|
38
|
+
__classPrivateFieldSet(this, _AppletFrameElement_applet, undefined, "f");
|
|
39
|
+
__classPrivateFieldGet(this, _AppletFrameElement_instances, "m", _AppletFrameElement_loadApplet).call(this, value);
|
|
40
|
+
}
|
|
41
|
+
get src() {
|
|
42
|
+
return __classPrivateFieldGet(this, _AppletFrameElement_src, "f") || '';
|
|
43
|
+
}
|
|
44
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
45
|
+
if (name === 'src') {
|
|
46
|
+
this.src = newValue;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
get applet() {
|
|
50
|
+
return __classPrivateFieldGet(this, _AppletFrameElement_applet, "f");
|
|
51
|
+
}
|
|
52
|
+
set data(data) {
|
|
53
|
+
if (this.applet) {
|
|
54
|
+
this.applet.data = data;
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
const listener = () => {
|
|
58
|
+
if (this.applet)
|
|
59
|
+
this.applet.data = data;
|
|
60
|
+
this.removeEventListener('load', listener);
|
|
61
|
+
};
|
|
62
|
+
this.addEventListener('load', listener);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
get styles() {
|
|
66
|
+
return /*css*/ `
|
|
2
67
|
:host {
|
|
3
68
|
background: white;
|
|
4
69
|
display: flex;
|
|
@@ -11,4 +76,37 @@
|
|
|
11
76
|
height: 100%;
|
|
12
77
|
width: 100%;
|
|
13
78
|
}
|
|
14
|
-
|
|
79
|
+
`;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
_AppletFrameElement_root = new WeakMap(), _AppletFrameElement_src = new WeakMap(), _AppletFrameElement_applet = new WeakMap(), _AppletFrameElement_dispatchEventAndHandler = new WeakMap(), _AppletFrameElement_iframe = new WeakMap(), _AppletFrameElement_instances = new WeakSet(), _AppletFrameElement_loadApplet = async function _AppletFrameElement_loadApplet(url) {
|
|
83
|
+
__classPrivateFieldGet(this, _AppletFrameElement_iframe, "f").src = url;
|
|
84
|
+
const window = __classPrivateFieldGet(this, _AppletFrameElement_iframe, "f").contentWindow;
|
|
85
|
+
if (!window)
|
|
86
|
+
return;
|
|
87
|
+
__classPrivateFieldSet(this, _AppletFrameElement_applet, await applets.connect(window), "f");
|
|
88
|
+
// When data received, bubble the event up
|
|
89
|
+
__classPrivateFieldGet(this, _AppletFrameElement_applet, "f").ondata = (event) => {
|
|
90
|
+
__classPrivateFieldGet(this, _AppletFrameElement_dispatchEventAndHandler, "f").call(this, event);
|
|
91
|
+
};
|
|
92
|
+
// Resize
|
|
93
|
+
__classPrivateFieldGet(this, _AppletFrameElement_applet, "f").onresize = (event) => {
|
|
94
|
+
__classPrivateFieldGet(this, _AppletFrameElement_instances, "m", _AppletFrameElement_resizeContainer).call(this, {
|
|
95
|
+
width: __classPrivateFieldGet(this, _AppletFrameElement_applet, "f").width,
|
|
96
|
+
height: __classPrivateFieldGet(this, _AppletFrameElement_applet, "f").height,
|
|
97
|
+
});
|
|
98
|
+
};
|
|
99
|
+
__classPrivateFieldGet(this, _AppletFrameElement_applet, "f").onactions = (event) => {
|
|
100
|
+
__classPrivateFieldGet(this, _AppletFrameElement_dispatchEventAndHandler, "f").call(this, event);
|
|
101
|
+
};
|
|
102
|
+
// Emit load event when setup & connection complete
|
|
103
|
+
__classPrivateFieldGet(this, _AppletFrameElement_dispatchEventAndHandler, "f").call(this, new Event('load'));
|
|
104
|
+
if (this['load'] && typeof this['load'] === 'function') {
|
|
105
|
+
this.onload(new Event('load'));
|
|
106
|
+
}
|
|
107
|
+
}, _AppletFrameElement_resizeContainer = function _AppletFrameElement_resizeContainer(dimensions) {
|
|
108
|
+
this.style.height = `${dimensions.height}px`;
|
|
109
|
+
};
|
|
110
|
+
AppletFrameElement.observedAttributes = ['src'];
|
|
111
|
+
export const test = 'test';
|
|
112
|
+
customElements.define('applet-frame', AppletFrameElement);
|
package/dist/web-applets.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(()=>{var h=class extends Error{constructor(t){super(t),this.name="AppletExecutionError"}},A=class extends Error{constructor(t){super(t),this.name="AppletConnectionError"}};function c(o){typeof this[`on${o.type}`]=="function"&&this[`on${o.type}`](o),this.dispatchEvent(o)}function v(o){return Object.keys(o).length===0}var a=class extends Event{constructor(t,e){super(t,{bubbles:e?.bubbles,composed:e?.composed,cancelable:e?.cancelable}),this.data=e?.data,this.actions=e?.actions}};function T(o,...t){}var p={log:T};var f=class extends EventTarget{#s;#o={};#t;#i;#n;#e;#a;#p;#r;constructor(t){super(),p.log("Applet","Constructor called"),this.#s=t,this.#n=c.bind(this),this.#c();let e=s=>{s.source===this.#s&&"type"in s.data&&s.data.type==="appletconnect"&&(p.log("Applet","Recieved message",s.data),this.#c(),this.removeEventListener("message",e))};window.addEventListener("message",e)}#c(){this.#e&&this.#e.close();let t=new MessageChannel,e={type:"appletconnect"};p.log("Applet","Send message",e),this.#e=t.port1,this.#e.onmessage=this.#h.bind(this),this.#s.postMessage(e,"*",[t.port2]),this.#a=this.#e.postMessage.bind(this.#e)}#h(t){let e=t.data;switch(p.log("Applet","Recieved message",e),e.type){case"register":let s=e;this.#t=s.manifest;let n=new a("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=e;this.#i=i.data,this.#l(i.data);break;case"resize":let r=e;this.#p=r.width,this.#r=r.height;let g=new a("resize");this.#n(g);break;case"actions":let m=e;this.#o=m.actions,this.#d(m.actions);break}}#l(t){let e=new a("data",{data:t});this.#n(e)}#d(t){let e=new a("actions",{actions:t});this.#n(e)}async sendAction(t,e){let s={id:crypto.randomUUID(),type:"action",actionId:t,arguments:e};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 b=d;i(new h(b.message))}else n()};this.#e.addEventListener("message",g)})}get data(){return this.#i}set data(t){this.#i=t;let e={type:"data",data:t};this.#a(e)}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(t){super(),p.log("AppletScope","Constructor called"),this.#n=c.bind(this),t&&(this.#o=t);let e=n=>{if(n.source===window.parent&&n.data.type==="appletconnect"&&n.ports&&n.ports.length>0){p.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",e),this.#r()}};window.addEventListener("message",e);let s={type:"appletconnect"};window.parent.postMessage(s,"*"),p.log("AppletScope","Send message",s)}async#r(){let t=this.manifest??await this.#g();this.#o=t||{},this.#t=this.#t||t?.actions||{};let e={type:"register",manifest:this.#o,actions:this.#t,data:this.#i};this.#e(e),p.log("AppletScope","Send message",e);let s=new a("connect");this.#n(s),this.#l()}#c(t){let e=t.data;switch(p.log("AppletScope","Recieved message",e),e.type){case"data":"data"in e&&(this.data=e.data);break;case"action":"type"in e&&e.type==="action"&&"id"in e&&typeof e.id=="string"&&"actionId"in e&&typeof e.actionId=="string"&&"arguments"in e&&this.#h(e);break}}async#h(t){let{actionId:e,arguments:s,id:n}=t;if(Object.keys(this.#s).includes(e))try{await this.#s[e](s);let i={type:"actioncomplete",id:n};this.#e(i)}catch(i){let r={type:"actionerror",id:n,message:i.message};this.#e(r),console.error(i)}}#l(){new ResizeObserver(e=>{for(let s of e)this.#d({width:s.contentRect.width,height:s.contentRect.height})}).observe(document.querySelector("html"))}#d({width:t,height:e}){this.#a=t,this.#p=e;let s={type:"resize",width:t,height:e};p.log("AppletScope","Send message",s),this.#e(s)}async#g(){let t=document.querySelector('link[rel="manifest"]');if(!t){console.warn("No manifest link found");return}try{let s=await(await fetch(t.href)).json();for(let n in s.actions){let i=s.actions[n];i.params_schema
|
|
1
|
+
(()=>{var h=class extends Error{constructor(t){super(t),this.name="AppletExecutionError"}},A=class extends Error{constructor(t){super(t),this.name="AppletConnectionError"}};function c(o){typeof this[`on${o.type}`]=="function"&&this[`on${o.type}`](o),this.dispatchEvent(o)}function v(o){return Object.keys(o).length===0}var a=class extends Event{constructor(t,e){super(t,{bubbles:e?.bubbles,composed:e?.composed,cancelable:e?.cancelable}),this.data=e?.data,this.actions=e?.actions}};function T(o,...t){}var p={log:T};var f=class extends EventTarget{#s;#o={};#t;#i;#n;#e;#a;#p;#r;constructor(t){super(),p.log("Applet","Constructor called"),this.#s=t,this.#n=c.bind(this),this.#c();let e=s=>{s.source===this.#s&&"type"in s.data&&s.data.type==="appletconnect"&&(p.log("Applet","Recieved message",s.data),this.#c(),this.removeEventListener("message",e))};window.addEventListener("message",e)}#c(){this.#e&&this.#e.close();let t=new MessageChannel,e={type:"appletconnect"};p.log("Applet","Send message",e),this.#e=t.port1,this.#e.onmessage=this.#h.bind(this),this.#s.postMessage(e,"*",[t.port2]),this.#a=this.#e.postMessage.bind(this.#e)}#h(t){let e=t.data;switch(p.log("Applet","Recieved message",e),e.type){case"register":let s=e;this.#t=s.manifest;let n=new a("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=e;this.#i=i.data,this.#l(i.data);break;case"resize":let r=e;this.#p=r.width,this.#r=r.height;let g=new a("resize");this.#n(g);break;case"actions":let m=e;this.#o=m.actions,this.#d(m.actions);break}}#l(t){let e=new a("data",{data:t});this.#n(e)}#d(t){let e=new a("actions",{actions:t});this.#n(e)}async sendAction(t,e){let s={id:crypto.randomUUID(),type:"action",actionId:t,arguments:e};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 b=d;i(new h(b.message))}else n()};this.#e.addEventListener("message",g)})}get data(){return this.#i}set data(t){this.#i=t;let e={type:"data",data:t};this.#a(e)}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(t){super(),p.log("AppletScope","Constructor called"),this.#n=c.bind(this),t&&(this.#o=t);let e=n=>{if(n.source===window.parent&&n.data.type==="appletconnect"&&n.ports&&n.ports.length>0){p.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",e),this.#r()}};window.addEventListener("message",e);let s={type:"appletconnect"};window.parent.postMessage(s,"*"),p.log("AppletScope","Send message",s)}async#r(){let t=this.manifest??await this.#g();this.#o=t||{},this.#t=this.#t||t?.actions||{};let e={type:"register",manifest:this.#o,actions:this.#t,data:this.#i};this.#e(e),p.log("AppletScope","Send message",e);let s=new a("connect");this.#n(s),this.#l()}#c(t){let e=t.data;switch(p.log("AppletScope","Recieved message",e),e.type){case"data":"data"in e&&(this.data=e.data);break;case"action":"type"in e&&e.type==="action"&&"id"in e&&typeof e.id=="string"&&"actionId"in e&&typeof e.actionId=="string"&&"arguments"in e&&this.#h(e);break}}async#h(t){let{actionId:e,arguments:s,id:n}=t;if(Object.keys(this.#s).includes(e))try{await this.#s[e](s);let i={type:"actioncomplete",id:n};this.#e(i)}catch(i){let r={type:"actionerror",id:n,message:i.message};this.#e(r),console.error(i)}}#l(){new ResizeObserver(e=>{for(let s of e)this.#d({width:s.contentRect.width,height:s.contentRect.height})}).observe(document.querySelector("html"))}#d({width:t,height:e}){this.#a=t,this.#p=e;let s={type:"resize",width:t,height:e};p.log("AppletScope","Send message",s),this.#e(s)}async#g(){let t=document.querySelector('link[rel="manifest"]');if(!t){console.warn("No manifest link found");return}try{let s=await(await fetch(t.href)).json();for(let n in s.actions){let i=s.actions[n];i.params_schema&&v(i.params_schema)&&(i.params_schema=void 0)}return s}catch(e){console.warn("Failed to fetch manifest",e.message)}}setActionHandler(t,e){this.#s[t]=e}defineAction(t,e){let{handler:s,...n}=e;s&&(this.#s[t]=s),this.actions={...this.actions,[t]:n}}set actions(t){if(!t)return;this.#t=t;let e={type:"actions",actions:this.#t};p.log("AppletScope","Send message",e),this.#e&&this.#e(e);let s=new a("actions",{actions:t});setTimeout(()=>this.#n(s),1)}get actions(){return this.#t}get manifest(){return this.#o}get actionHandlers(){return this.#s}set actionHandlers(t){this.#s=t}set data(t){this.#i=t;let e={type:"data",data:t};p.log("AppletScope","Send message",e),this.#e&&this.#e(e);let s=new a("data",{data:t});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(t){return new Promise((e,s)=>{let n=new f(t),i=setTimeout(()=>{s(new A(`Applet failed to connect before the timeout was reached (${1e4}ms)`))},1e4),r=()=>{e(n),n.removeEventListener("connect",r),clearTimeout(i)};n.addEventListener("connect",r)})}register(t){return new E(t)}};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 t=document.createElement("style");t.textContent=this.styles,this.#s.appendChild(t),this.src=this.getAttribute("src")}get contentWindow(){return this.#n.contentWindow}set src(t){this.#o=t,this.#t=void 0,this.#e(t)}get src(){return this.#o||""}attributeChangedCallback(t,e,s){t==="src"&&(this.src=s)}async#e(t){this.#n.src=t;let e=this.#n.contentWindow;e&&(this.#t=await y.connect(e),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(t){if(this.applet)this.applet.data=t;else{let e=()=>{this.applet&&(this.applet.data=t),this.removeEventListener("load",e)};this.addEventListener("load",e)}}#a(t){this.style.height=`${t.height}px`}get styles(){return`
|
|
2
2
|
:host {
|
|
3
3
|
background: white;
|
|
4
4
|
display: flex;
|
package/package.json
CHANGED