npm - @web-applets/sdk - Versions diffs - 0.0.7 → 0.0.9 - Mend

@web-applets/sdk 0.0.7 → 0.0.9

Files changed (11) hide show

package/README.md +100 -17
package/dist/client.d.ts +12 -4
package/dist/client.js +103 -57
package/dist/context.d.ts +5 -2
package/dist/context.js +44 -11
package/dist/types.d.ts +25 -12
package/dist/web-component/index.d.ts +1 -0
package/dist/web-component/index.js +52 -0
package/dist/web-components/applet-frame.d.ts +1 -0
package/dist/web-components/applet-frame.js +52 -0
package/package.json +2 -1

package/README.md CHANGED Viewed

@@ -1,14 +1,96 @@
 # Web Applets
-> An open SDK to create interoperable actions & views for agents – _a web of capabilities!_
+> An open spec & SDK for creating apps that agents can use.
-🔗 [Community Applets Repo](https://github.com/unternet-co/community-applets)
+🔗 [Applets Repo](https://github.com/unternet-co/community-applets) | 🔗 [Mailing List](https://groups.google.com/a/unternet.co/g/community) | 🔗 [Applets Chat Demo](https://github.com/unternet-co/applets-chat)
 ## What is it?
-Web Applets is a specification for modular, local web software that can be read and used by both humans and machines. Web Applets aims to be an interoperabe application layer for agents – instead of chatbots that can only interact in plain text, Web Applets allow them to actuate real software, read the results, and render rich, graphical views in response.
+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 software designed for human-AI collaboration. Think of them a bit like artifacts, but they do stuff!
-Did we mention it's _interoperable_? We think the future of software should be open & collaborative, not locked down to a single platform.
+![Demo of a web applets chatbot](./docs/assets/applets-chat-demo.gif)
+Web Applets are modular pieces of web software that:
+- **Can be used directly by humans with rich, graphical interfaces**
+- **Can be understood and operated by AI through a clear protocol**
+- **Run locally in your environment, not on distant servers**
+- **Share context and state with their environment**
+- **Can be freely combined and composed**
+Think of any web software you use today - maps, documents, shopping, calendars - and imagine if instead of visiting these as separate websites, you could pull them into your own environment where both you and AI could use them together seamlessly.
+## Key Features
+- **Built on Web Standards:** Create applets using familiar web technologies (HTML, CSS, JavaScript)
+- **AI-Native Protocol:** Applets expose their state and actions in a way AI can understand and use
+- **Rich Interfaces:** Full support for complex graphical UIs, not just text
+- **Local-First:** Runs in your environment, keeping your data under your control
+- **Composable:** Applets can work together, sharing context and state
+- **Open Standard:** Designed for interoperability, not platform lock-in
+Web Applets aims to do for AI-enabled software what the web did for documents - create an open platform where anyone can build, share, and connect applications. We believe the future of software should be built on open collaboration, not tight integration with closed platforms.
+## Example
+This is a simple applet that prints "Hello, [your name]" when given the `set_name` action.
+`index.html`:
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <script src="./main.js" type="module"></script>
+  <body>
+    Hello! <span id="name">whoever you are</span>.
+  </body>
+</html>
+```
+`main.js`:
+```js
+import { appletContext } from '@web-applets/sdk';
+// Get view element we want to manipulate
+const nameElem = document.getElementById('name');
+// Connect to the applet context
+const applet = appletContext.connect();
+// When the set_name action is called, change the state
+applet.setActionHandler('set_name', ({ name }) => {
+  applet.setState({ name });
+});
+// Whenever we get a request to render the view, update the name
+applet.onrender = () => {
+  nameElem.innerText = applet.state?.name;
+};
+```
+`manifest.json`:
+```json
+{
+  "type": "applet",
+  "name": "Hello World",
+  "description": "Displays a greeting to the user.",
+  "entrypoint": "index.html",
+  "actions": [
+    {
+      "id": "set_name",
+      "description": "Sets the name of the user to be greeted",
+      "params": {
+        "name": {
+          "type": "string",
+          "description": "The name of the user"
+        }
+      }
+    }
+  ]
+}
+```
 ## Getting started
@@ -131,29 +213,30 @@ applet.state = { name: 'Ada Lovelace' };
 It may also be helpful to check available applets at a domain, or in your public folder. For that you can extract the applet headers from the App Manifest at the public root (`/manifest.json`), and see the available applets and a shorthand for the actions you can take in them. This is automatically created when you build your applets.
 ```js
-const headers = await applets.getHeaders('/');
+const applets = await applets.list('/');
 ```
-This headers object looks like:
+This applets object looks like:
 ```js
-[
-  {
+{
+  '/helloworld.applet': {
     name: 'Hello World',
     description: 'Displays a greeting to the user.',
     url: '/applets/helloworld.applet',
-    actions: [
-      {
-        id: 'set_name',
-        description: 'Sets the name of the user to be greeted',
-        params: {
-          name: 'The name of the user',
-        },
+    actions: {
+      set_name: {
+      description: 'Sets the name of the user to be greeted',
+      params: {
+        name: {
+          type: 'string',
+          description: 'The name of the user'
+        }
       },
-    ],
+    },
   },
   // ...
-];
+};
 ```
 You can use it to present a quick summary of available tools to your model, and then decide on an applet and action to use.

package/dist/client.d.ts CHANGED Viewed

@@ -1,7 +1,10 @@
-import { AppletAction, AppletHeader, AppletMessage, ActionParams, AppletManifest } from './types';
-export declare function getHeaders(url: string): Promise<AppletHeader[]>;
-export declare function getManifests(url: string): Promise<any[]>;
-export declare function load(url: string, container: HTMLIFrameElement): Promise<Applet>;
+import { AppletAction, AppletHeader, AppletMessage, ActionParams, AppletManifest, AppletMessageType, AppletMessageCallback, AppletManifestDict } from './types';
+export declare function list(url: string): Promise<AppletManifestDict>;
+interface AppletOpts {
+    headless?: boolean;
+    unsafe?: boolean;
+}
+export declare function load(url: string, container?: HTMLIFrameElement, opts?: AppletOpts): Promise<Applet>;
 export declare class Applet<T = unknown> extends EventTarget {
     #private;
     actions: AppletAction[];
@@ -20,5 +23,10 @@ export declare class Applet<T = unknown> extends EventTarget {
     onstateupdated(event: CustomEvent): void;
     disconnect(): void;
     dispatchAction(actionId: string, params: ActionParams): Promise<AppletMessage<any>>;
+    send(message: AppletMessage): Promise<AppletMessage<any>>;
+    on(messageType: AppletMessageType, callback: AppletMessageCallback): Promise<void>;
 }
 export declare function loadManifest(url: string): Promise<AppletManifest>;
+export declare function getHeaders(url: string): Promise<AppletHeader[]>;
+export declare function getManifests(url: string): Promise<any[]>;
+export {};

package/dist/client.js CHANGED Viewed

@@ -9,73 +9,76 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _Applet_state;
+var _Applet_instances, _Applet_state, _Applet_dispatchEvent;
 import { AppletMessage, } from './types';
-const hiddenRoot = document.createElement('div');
-hiddenRoot.style.display = 'none';
-document.body.appendChild(hiddenRoot);
-export async function getHeaders(url) {
+const hiddenContainer = document.createElement('iframe');
+hiddenContainer.style.display = 'none';
+document.body.appendChild(hiddenContainer);
+export async function list(url) {
     url = parseUrl(url);
     try {
         const request = await fetch(`${url}/manifest.json`);
         const appManifest = await request.json();
-        const appletHeaders = appManifest.applets;
-        return appletHeaders ?? [];
+        const appletUrls = appManifest.applets;
+        const manifests = {};
+        const manifestRequests = appletUrls.map(async (appletUrl) => {
+            appletUrl = parseUrl(appletUrl, url);
+            const request = await fetch(`${appletUrl}/manifest.json`);
+            const manifest = await request.json();
+            manifests[appletUrl] = manifest;
+        });
+        await Promise.all(manifestRequests);
+        return manifests;
     }
     catch {
-        return [];
+        return {};
     }
 }
-export async function getManifests(url) {
-    url = parseUrl(url);
-    const request = await fetch(`${url}/manifest.json`);
-    const headers = (await request.json()).applets;
-    const manifests = await Promise.all(headers.map(async (header) => {
-        const appletUrl = parseUrl(header.url);
-        const request = await fetch(`${appletUrl}/manifest.json`);
-        return await request.json();
-    }));
-    return manifests ?? [];
-}
-export async function load(url, container) {
+const defaultOpts = {
+    headless: false,
+    unsafe: false,
+};
+export async function load(url, container, opts) {
+    const _opts = Object.assign(defaultOpts, opts ?? {});
     url = parseUrl(url);
     const manifest = await loadManifest(`${url}`);
+    if (!container) {
+        container = hiddenContainer;
+        _opts.headless = true;
+    }
+    if (_opts.unsafe || manifest.unsafe) {
+        container.setAttribute('sandbox', 'allow-scripts allow-forms allow-same-origin');
+    }
+    else {
+        container.setAttribute('sandbox', 'allow-scripts allow-forms');
+    }
     const applet = new Applet();
     applet.manifest = manifest;
-    applet.actions = manifest.actions; // let the events set this later
+    applet.actions = manifest.actions;
     applet.container = container;
     container.src = applet.manifest.entrypoint;
-    if (!container.isConnected)
-        hiddenRoot.appendChild(container);
     return new Promise((resolve) => {
-        window.addEventListener('message', (message) => {
-            if (message.source !== container.contentWindow)
-                return;
-            if (message.data.type === 'ready')
-                resolve(applet);
+        applet.on('ready', () => {
+            const initMessage = new AppletMessage('init', {
+                headless: _opts.headless,
+            });
+            applet.send(initMessage);
+            resolve(applet);
         });
     });
 }
 export class Applet extends EventTarget {
     constructor() {
         super();
+        _Applet_instances.add(this);
         this.actions = [];
         _Applet_state.set(this, void 0);
-        window.addEventListener('message', (message) => {
-            if (message.source !== this.container.contentWindow)
-                return;
-            if (message.data.type === 'state') {
-                __classPrivateFieldSet(this, _Applet_state, message.data.state, "f");
-                this.dispatchEvent(new CustomEvent('stateupdated', { detail: message.data.detail }));
-                this.onstateupdated(message.data.state);
-            }
-            if (message.data.type === 'resize') {
-                this.resizeContainer(message.data.dimensions);
-            }
-            this.container.contentWindow?.postMessage({
-                type: 'resolve',
-                id: message.data.id,
-            }, '*');
+        this.on('state', (message) => {
+            __classPrivateFieldSet(this, _Applet_state, message.state, "f");
+            __classPrivateFieldGet(this, _Applet_instances, "m", _Applet_dispatchEvent).call(this, 'stateupdated', message.state);
+        });
+        this.on('resize', (message) => {
+            this.resizeContainer(message.dimensions);
         });
     }
     get state() {
@@ -83,8 +86,7 @@ export class Applet extends EventTarget {
     }
     set state(state) {
         __classPrivateFieldSet(this, _Applet_state, state, "f");
-        const stateMessage = new AppletMessage('state', { state });
-        this.container.contentWindow?.postMessage(stateMessage.toJson(), '*');
+        this.send(new AppletMessage('state', { state }));
     }
     toJson() {
         return Object.fromEntries(Object.entries(this).filter(([_, value]) => {
@@ -98,26 +100,30 @@ export class Applet extends EventTarget {
         }));
     }
     resizeContainer(dimensions) {
-        this.container.style.height = `${dimensions.height}px`;
+        this.container.style.height = `${dimensions.height + 2}px`;
         // if (!this.#styleOverrides) {
         //   this.#container.style.height = `${dimensions.height}px`;
         // }
     }
     onstateupdated(event) { }
-    disconnect() { }
+    disconnect() {
+        this.onstateupdated = () => { };
+        this.container.src = 'about:blank';
+    }
     async dispatchAction(actionId, params) {
         const requestMessage = new AppletMessage('action', {
             actionId,
             params,
         });
-        this.container.contentWindow?.postMessage(requestMessage.toJson(), '*');
+        return await this.send(requestMessage);
+    }
+    async send(message) {
+        this.container.contentWindow?.postMessage(message.toJson(), '*');
         return new Promise((resolve) => {
             const listener = (messageEvent) => {
-                if (messageEvent.source !== this.container.contentWindow)
-                    return;
                 const responseMessage = new AppletMessage(messageEvent.data.type, messageEvent.data);
                 if (responseMessage.type === 'resolve' &&
-                    responseMessage.id === requestMessage.id) {
+                    responseMessage.id === message.id) {
                     window.removeEventListener('message', listener);
                     resolve(responseMessage);
                 }
@@ -125,20 +131,37 @@ export class Applet extends EventTarget {
             window.addEventListener('message', listener);
         });
     }
+    async on(messageType, callback) {
+        const listener = async (messageEvent) => {
+            if (messageEvent.source !== this.container.contentWindow)
+                return;
+            if (messageEvent.data.type !== messageType)
+                return;
+            const message = new AppletMessage(messageEvent.data.type, messageEvent.data);
+            await callback(message);
+            this.container.contentWindow?.postMessage(new AppletMessage('resolve', { id: message.id }), '*');
+        };
+        window.addEventListener('message', listener);
+    }
 }
-_Applet_state = new WeakMap();
+_Applet_state = new WeakMap(), _Applet_instances = new WeakSet(), _Applet_dispatchEvent = function _Applet_dispatchEvent(id, detail) {
+    if (typeof this[`on${id}`] === 'function') {
+        this[`on${id}`](detail);
+    }
+    this.dispatchEvent(new CustomEvent(id, { detail }));
+};
+/* Helpers */
 function parseUrl(url, base) {
     if (['http', 'https'].includes(url.split('://')[0])) {
         return url;
     }
-    let path = url;
-    if (path.startsWith('/'))
-        path = path.slice(1);
-    if (path.endsWith('/'))
-        path = path.slice(0, -1);
+    let path = trimSlashes(url);
     url = `${base || window.location.origin}/${path}`;
     return url;
 }
+function trimSlashes(str) {
+    return str.replace(/^\/+|\/+$/g, '');
+}
 export async function loadManifest(url) {
     url = parseUrl(url);
     const request = await fetch(`${url}/manifest.json`);
@@ -149,3 +172,26 @@ export async function loadManifest(url) {
     appletManifest.entrypoint = parseUrl(appletManifest.entrypoint, url);
     return appletManifest;
 }
+export async function getHeaders(url) {
+    url = parseUrl(url);
+    try {
+        const request = await fetch(`${url}/manifest.json`);
+        const appManifest = await request.json();
+        const appletHeaders = appManifest.applets;
+        return appletHeaders ?? [];
+    }
+    catch {
+        return [];
+    }
+}
+export async function getManifests(url) {
+    url = parseUrl(url);
+    const request = await fetch(`${url}/manifest.json`);
+    const headers = (await request.json()).applets;
+    const manifests = await Promise.all(headers.map(async (header) => {
+        const appletUrl = parseUrl(header.url);
+        const request = await fetch(`${appletUrl}/manifest.json`);
+        return await request.json();
+    }));
+    return manifests ?? [];
+}

package/dist/context.d.ts CHANGED Viewed

@@ -3,12 +3,15 @@ import { ActionHandlerDict, AppletMessage, AppletMessageType, AppletMessageCallb
  * Context
  */
 export declare class AppletContext<StateType = any> extends EventTarget {
+    #private;
     client: AppletClient;
     actionHandlers: ActionHandlerDict;
-    state: StateType;
+    headless: boolean;
     connect(): this;
     setActionHandler<T extends ActionParams>(actionId: string, handler: ActionHandler<T>): void;
-    setState(state: StateType): Promise<void>;
+    set state(state: StateType);
+    get state(): StateType;
+    setState(state: StateType, shouldRender?: boolean): Promise<void>;
     onload(): Promise<void> | void;
     onready(): Promise<void> | void;
     onrender(): void;

package/dist/context.js CHANGED Viewed

@@ -1,3 +1,15 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    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");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _AppletContext_state;
 import { AppletMessage, } from './types';
 /**
  * Context
@@ -6,6 +18,8 @@ export class AppletContext extends EventTarget {
     constructor() {
         super(...arguments);
         this.actionHandlers = {};
+        _AppletContext_state.set(this, void 0);
+        this.headless = false;
     }
     connect() {
         this.client = new AppletClient();
@@ -34,11 +48,24 @@ export class AppletContext extends EventTarget {
             }
         });
         resizeObserver.observe(document.querySelector('html'));
+        this.client.on('init', (message) => {
+            const initMessage = message;
+            this.headless = initMessage.headless;
+        });
         this.client.on('state', (message) => {
             if (!isStateMessage(message)) {
                 throw new TypeError("Message doesn't match type StateMessage");
             }
-            this.setState(message.state);
+            // Don't render when state updates match the current state
+            // this retains cursor positions in text fields, for example
+            if (JSON.stringify(message.state) === JSON.stringify(__classPrivateFieldGet(this, _AppletContext_state, "f")))
+                return;
+            __classPrivateFieldSet(this, _AppletContext_state, message.state, "f");
+            // BUG: For some reason regular applets were loading headless, when instantiated not on a page reload
+            // if (!this.headless) {
+            this.onrender();
+            this.dispatchEvent(new CustomEvent('render'));
+            // }
         });
         this.client.on('action', async (message) => {
             if (!isActionMessage(message)) {
@@ -47,24 +74,32 @@ export class AppletContext extends EventTarget {
             if (Object.keys(this.actionHandlers).includes(message.actionId)) {
                 await this.actionHandlers[message.actionId](message.params);
             }
-            message.resolve();
         });
         return this;
     }
     setActionHandler(actionId, handler) {
         this.actionHandlers[actionId] = handler;
     }
-    async setState(state) {
+    set state(state) {
+        this.setState(state);
+    }
+    get state() {
+        return __classPrivateFieldGet(this, _AppletContext_state, "f");
+    }
+    async setState(state, shouldRender) {
         const message = new AppletMessage('state', { state });
         await this.client.send(message);
-        this.state = state;
-        this.dispatchEvent(new CustomEvent('render'));
-        this.onrender(); // TODO: Should come from client? Or stay here, and only activate if mounted? Need a control for mounting.
+        __classPrivateFieldSet(this, _AppletContext_state, state, "f");
+        if (shouldRender !== false && !this.headless) {
+            this.onrender();
+            this.dispatchEvent(new CustomEvent('render'));
+        }
     }
     onload() { }
     onready() { }
     onrender() { }
 }
+_AppletContext_state = new WeakMap();
 function isActionMessage(message) {
     return message.type === 'action';
 }
@@ -76,14 +111,12 @@ function isStateMessage(message) {
  */
 class AppletClient {
     on(messageType, callback) {
-        window.addEventListener('message', (messageEvent) => {
+        window.addEventListener('message', async (messageEvent) => {
             if (messageEvent.data.type !== messageType)
                 return;
             const message = new AppletMessage(messageEvent.data.type, messageEvent.data);
-            message.resolve = () => {
-                window.parent.postMessage(new AppletMessage('resolve', { id: message.id }), '*');
-            };
-            callback(message);
+            await callback(message);
+            window.parent.postMessage(new AppletMessage('resolve', { id: message.id }), '*');
         });
     }
     send(message) {

package/dist/types.d.ts CHANGED Viewed

@@ -1,14 +1,20 @@
 export interface AppletManifest {
     type: 'applet';
     name: string;
-    description: string;
+    description?: string;
     icon?: string;
-    entrypoint: string;
-    actions: AppletAction[];
+    unsafe?: boolean;
+    frameless?: boolean;
+    entrypoint?: string;
+    actions?: AppletAction[];
+}
+export interface AppletManifestDict {
+    [url: string]: AppletManifest;
 }
 export interface AppletAction {
     id: string;
-    description: string;
+    name?: string;
+    description?: string;
     params?: ActionParamSchema;
 }
 export interface AppletHeader {
@@ -23,12 +29,12 @@ export interface AppletHeader {
         };
     }[];
 }
-export type AppletState = Record<string, Serializable>;
+export type AppletState = any;
 export type ActionParamSchema = Record<string, {
     description: string;
     type: 'string';
 }>;
-export type ActionParams = Record<string, unknown>;
+export type ActionParams<T = any> = Record<string, T>;
 export type ActionHandlerDict = {
     [key: string]: ActionHandler<any>;
 };
@@ -38,11 +44,22 @@ export interface AppletStateMessage<T = any> extends AppletMessage {
     type: 'state';
     state: T;
 }
+export interface AppletResizeMessage extends AppletMessage {
+    type: 'resize';
+    dimensions: {
+        height: number;
+        width: number;
+    };
+}
 export interface AppletActionMessage<T = any> extends AppletMessage {
     type: 'action';
     actionId: string;
     params: T;
 }
+export interface AppletInitMessage extends AppletMessage {
+    type: 'init';
+    headless: boolean;
+}
 export declare class AppletMessage<T = any> {
     type: AppletMessageType;
     id: string;
@@ -53,9 +70,5 @@ export declare class AppletMessage<T = any> {
     };
     resolve(): void;
 }
-export type AppletMessageType = 'action' | 'render' | 'state' | 'ready' | 'resolve' | 'resize';
-export type AppletMessageCallback = (message: AnyAppletMessage) => void;
-type Serializable = string | number | boolean | null | Serializable[] | {
-    [key: string]: Serializable;
-};
-export {};
+export type AppletMessageType = 'action' | 'actions' | 'render' | 'state' | 'init' | 'ready' | 'resolve' | 'resize';
+export type AppletMessageCallback = (message: AnyAppletMessage) => Promise<void> | void;

package/dist/web-component/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/web-component/index.js ADDED Viewed

@@ -0,0 +1,52 @@
+import { applets } from '../index';
+class AppletView extends HTMLElement {
+    connectedCallback() {
+        const styles = document.createElement('style');
+        styles.textContent = this.styles;
+        this.appendChild(styles);
+        this.container = document.createElement('iframe');
+        this.appendChild(this.container);
+    }
+    get styles() {
+        return /*css*/ `
+    applet-frame {
+      display: flex;
+      flex-direction: column;
+    }
+    applet-frame iframe {
+      border: none;
+    }
+    applet-frame:not(.frameless) {
+      border: 1px solid #ddd;
+    }
+    applet-frame.frameless {
+      padding: 0 7px;
+    }
+    `;
+    }
+    set url(url) {
+        setTimeout(() => this.loadApplet(url), 1);
+    }
+    async loadApplet(url) {
+        if (!this.container)
+            return;
+        this.applet = await applets.load(url, this.container);
+        if (this.applet.manifest.frameless)
+            this.classList.add('frameless');
+        this.applet.onstateupdated = () => {
+            this.dispatchEvent(new CustomEvent('stateupdated', { detail: this.applet.state }));
+        };
+        this.dispatchEvent(new CustomEvent('load'));
+    }
+    set state(state) {
+        if (this.applet)
+            this.applet.state = state;
+        this.addEventListener('load', () => {
+            this.applet.state = state;
+        });
+    }
+}
+customElements.define('applet-frame', AppletView);

package/dist/web-components/applet-frame.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/web-components/applet-frame.js ADDED Viewed

@@ -0,0 +1,52 @@
+import { applets } from '../index.js';
+class AppletFrame extends HTMLElement {
+    connectedCallback() {
+        const styles = document.createElement('style');
+        styles.textContent = this.styles;
+        this.appendChild(styles);
+        this.container = document.createElement('iframe');
+        this.appendChild(this.container);
+    }
+    get styles() {
+        return /*css*/ `
+    applet-frame {
+      display: flex;
+      flex-direction: column;
+    }
+    applet-frame iframe {
+      border: none;
+    }
+    applet-frame:not(.frameless) {
+      border: 1px solid #ddd;
+    }
+    applet-frame.frameless {
+      padding: 0 7px;
+    }
+    `;
+    }
+    set url(url) {
+        setTimeout(() => this.loadApplet(url), 1);
+    }
+    async loadApplet(url) {
+        if (!this.container)
+            return;
+        this.applet = await applets.load(url, this.container);
+        if (this.applet.manifest.frameless)
+            this.classList.add('frameless');
+        this.applet.onstateupdated = () => {
+            this.dispatchEvent(new CustomEvent('stateupdated', { detail: this.applet.state }));
+        };
+        this.dispatchEvent(new CustomEvent('load'));
+    }
+    set state(state) {
+        if (this.applet)
+            this.applet.state = state;
+        this.addEventListener('load', () => {
+            this.applet.state = state;
+        });
+    }
+}
+customElements.define('applet-frame', AppletFrame);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@web-applets/sdk",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "The Web Applets SDK, for creating & hosting Web Applets.",
   "author": "Rupert Manfredi <rupert@unternet.co>",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "typescript": "^5.6.2"
   },
   "dependencies": {
+    "marked": "^14.1.3",
     "vite": "^5.4.7"
   }
 }