@web-applets/sdk 0.0.8 → 0.1.0

package/dist/core/host.d.ts

@@ -0,0 +1,31 @@
+import { AppletAction, AppletMessage, ActionParams, AppletManifest, AppletDataEvent, AppletResizeEvent, AppletActionsEvent, AppletMessageRelay } from './shared';
+interface LoadOpts {
+    unsafe?: boolean;
+}
+declare function load(url: string, container?: HTMLIFrameElement, opts?: LoadOpts): Promise<Applet>;
+interface AppletOptions {
+    manifest: AppletManifest;
+    container: HTMLIFrameElement;
+}
+declare class Applet<T = any> extends EventTarget {
+    #private;
+    messageRelay: AppletMessageRelay;
+    url: string;
+    actions: AppletAction[];
+    container: HTMLIFrameElement;
+    type: string;
+    constructor(options: AppletOptions);
+    initializeListeners(): void;
+    get data(): T;
+    set data(data: T);
+    get manifest(): AppletManifest;
+    onresize(event: AppletResizeEvent): void;
+    onactions(event: AppletActionsEvent): void;
+    ondata(event: AppletDataEvent): void;
+    disconnect(): void;
+    dispatchAction(actionId: string, params: ActionParams): Promise<AppletMessage>;
+}
+export declare const applets: {
+    load: typeof load;
+};
+export { Applet };

package/dist/core/host.js

@@ -0,0 +1,134 @@
+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 __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 _Applet_manifest, _Applet_data;
+import { AppletMessage, AppletDataMessage, AppletInitMessage, AppletDataEvent, AppletResizeEvent, AppletActionsEvent, AppletMessageRelay, } from './shared';
+import { parseUrl } from '../lib/utils';
+// Container for initializing applets without an explicit container
+const hiddenContainer = document.createElement('iframe');
+hiddenContainer.style.display = 'none';
+document.body.appendChild(hiddenContainer);
+const defaultOpts = {
+    unsafe: false,
+};
+// Load an applet object from a URL
+async function load(url, container, opts) {
+    const _opts = Object.assign(defaultOpts, opts ?? {});
+    if (!container)
+        container = hiddenContainer;
+    url = parseUrl(url);
+    const manifest = await loadManifest(`${url}`);
+    // If unsafe enabled, allow same origin sandbox
+    // This is required for e.g. YouTube embeds
+    if (_opts.unsafe && manifest.unsafe) {
+        container.setAttribute('sandbox', 'allow-scripts allow-forms allow-same-origin');
+    }
+    else {
+        container.setAttribute('sandbox', 'allow-scripts allow-forms');
+    }
+    // Load the applet
+    const applet = new Applet({
+        manifest,
+        container,
+    });
+    return new Promise((resolve) => {
+        applet.messageRelay.on('ready', () => {
+            resolve(applet);
+        });
+    });
+}
+class Applet extends EventTarget {
+    constructor(options) {
+        super();
+        this.actions = [];
+        _Applet_manifest.set(this, void 0);
+        this.type = 'host';
+        _Applet_data.set(this, void 0);
+        this.container = options.container;
+        this.container.src = options.manifest.start_url;
+        this.messageRelay = new AppletMessageRelay(this.container.contentWindow);
+        __classPrivateFieldSet(this, _Applet_manifest, options.manifest, "f");
+        this.initializeListeners();
+        this.messageRelay.on('ready', () => {
+            this.messageRelay.send(new AppletInitMessage({ manifest: options.manifest }));
+        });
+    }
+    initializeListeners() {
+        this.messageRelay.on('data', (message) => {
+            __classPrivateFieldSet(this, _Applet_data, message.data, "f");
+            const dataEvent = new AppletDataEvent({ data: message.data });
+            if (typeof this.ondata === 'function')
+                this.ondata(dataEvent);
+            this.dispatchEvent(dataEvent);
+        });
+        this.messageRelay.on('resize', (message) => {
+            const resizeEvent = new AppletResizeEvent({
+                dimensions: message.dimensions,
+            });
+            if (typeof this.onresize === 'function')
+                this.onresize(resizeEvent);
+            this.dispatchEvent(resizeEvent);
+        });
+        this.messageRelay.on('actions', (message) => {
+            this.actions = message.actions;
+            const actionsEvent = new AppletActionsEvent({ actions: message.actions });
+            if (typeof this.onactions === 'function')
+                this.onactions(actionsEvent);
+            this.dispatchEvent(actionsEvent);
+        });
+    }
+    get data() {
+        return __classPrivateFieldGet(this, _Applet_data, "f");
+    }
+    set data(data) {
+        __classPrivateFieldSet(this, _Applet_data, data, "f");
+        this.messageRelay.send(new AppletDataMessage({ data }));
+    }
+    get manifest() {
+        return __classPrivateFieldGet(this, _Applet_manifest, "f");
+    }
+    onresize(event) { }
+    onactions(event) { }
+    ondata(event) { }
+    disconnect() {
+        this.container.src = 'about:blank';
+    }
+    async dispatchAction(actionId, params) {
+        const actionMessage = new AppletMessage('action', {
+            actionId,
+            params,
+        });
+        return await this.messageRelay.send(actionMessage);
+    }
+}
+_Applet_manifest = new WeakMap(), _Applet_data = new WeakMap();
+// Loads a manifest and parses the JSON
+async function loadManifest(baseUrl) {
+    baseUrl = parseUrl(baseUrl);
+    let manifest;
+    try {
+        const request = await fetch(`${baseUrl}/manifest.json`);
+        manifest = await request.json();
+        // TODO: Add verification this is a valid manifest
+    }
+    catch (e) {
+        console.error(e.message);
+    }
+    manifest.start_url = manifest.start_url
+        ? parseUrl(manifest.start_url, baseUrl)
+        : baseUrl;
+    return manifest;
+}
+// Exports
+export const applets = {
+    load,
+};
+export { Applet };

package/dist/core/shared.d.ts

@@ -0,0 +1,121 @@
+export interface AppletManifest {
+    name?: string;
+    short_name?: string;
+    icons: AppletIcons;
+    description?: string;
+    icon?: string;
+    display?: string;
+    start_url?: string;
+    unsafe?: boolean;
+    actions?: AppletAction[];
+}
+export interface AppletIcons {
+    src: string;
+    purpose?: string;
+    sizes?: string;
+    type?: string;
+}
+export interface AppletAction {
+    id: string;
+    name?: string;
+    description?: string;
+    params?: JSONSchemaProperties;
+}
+export type JSONSchemaProperties = Record<string, {
+    type: string;
+    description?: string;
+    properties?: JSONSchemaProperties;
+}>;
+export type ActionParams = Record<string, any>;
+export declare function loadManifest(pageUrl: string): Promise<AppletManifest>;
+interface SendMessageOptions {
+    resolves: boolean;
+}
+export declare class AppletMessageRelay {
+    target: Window;
+    constructor(target: Window);
+    send(message: AppletMessage, options?: SendMessageOptions): Promise<AppletMessage>;
+    on(messageType: AppletMessageType, callback: AppletMessageCallback): Promise<void>;
+}
+export declare class AppletMessage {
+    type: AppletMessageType;
+    id: string;
+    timeStamp: number;
+    [key: string]: any;
+    constructor(type: AppletMessageType, values?: {
+        [key: string]: any;
+    });
+    toJson(): {
+        [k: string]: any;
+    };
+}
+export declare class AppletResolveMessage extends AppletMessage {
+    messageId: string;
+    constructor({ id }: {
+        id: string;
+    });
+}
+export declare class AppletActionsMessage extends AppletMessage {
+    actions: AppletAction[];
+    constructor({ actions }: {
+        actions: AppletAction[];
+    });
+}
+export declare class AppletDataMessage<T = any> extends AppletMessage {
+    data: T;
+    constructor({ data }: {
+        data: T;
+    });
+}
+export declare class AppletReadyMessage extends AppletMessage {
+    constructor();
+}
+export declare class AppletResizeMessage extends AppletMessage {
+    dimensions: {
+        height: number;
+        width: number;
+    };
+    constructor({ dimensions, }: {
+        dimensions: AppletResizeMessage['dimensions'];
+    });
+}
+interface AppletActionMessageOptions {
+    actionId: string;
+    params: any;
+}
+export declare class AppletActionMessage extends AppletMessage {
+    actionId: string;
+    params: any;
+    constructor({ actionId, params }: AppletActionMessageOptions);
+}
+export declare class AppletInitMessage extends AppletMessage {
+    constructor();
+}
+export type AppletMessageType = 'action' | 'actions' | 'data' | 'init' | 'ready' | 'resolve' | 'resize';
+export type AppletMessageCallback = (message: AppletMessage) => Promise<void> | void;
+export declare class AppletDataEvent extends Event {
+    data: any;
+    constructor({ data }: {
+        data: any;
+    });
+}
+export declare class AppletReadyEvent extends Event {
+    constructor();
+}
+export declare class AppletLoadEvent extends Event {
+    constructor();
+}
+export declare class AppletActionsEvent extends Event {
+    actions: AppletAction[];
+    constructor({ actions }: {
+        actions: AppletAction[];
+    });
+}
+export interface AppletResizeEventOpts {
+    dimensions: AppletResizeMessage['dimensions'];
+}
+export declare class AppletResizeEvent extends Event {
+    dimensions: AppletResizeMessage['dimensions'];
+    constructor({ dimensions }: AppletResizeEventOpts);
+}
+export {};

package/dist/core/shared.js

@@ -0,0 +1,171 @@
+/* Manifest & action definitions */
+import { parseUrl } from '../utils';
+export async function loadManifest(pageUrl) {
+    pageUrl = parseUrl(pageUrl);
+    let manifest;
+    try {
+        const pageRequest = await fetch(pageUrl);
+        const html = await pageRequest.text();
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const linkElem = doc.querySelector('link[rel="manifest"]');
+        const manifestUrl = parseUrl(linkElem.href);
+        const manifestRequest = await fetch(manifestUrl);
+        manifest = await manifestRequest.json();
+        // TODO: Add verification this is a valid manifest
+    }
+    catch (e) {
+        return;
+    }
+    return manifest;
+}
+export class AppletMessageRelay {
+    constructor(target) {
+        this.target = target;
+    }
+    async send(message, options) {
+        this.target.postMessage(message.toJson(), '*');
+        if (options && options.resolves === false)
+            return;
+        // Wait for a resolve message to be sent back before completing await
+        return new Promise((resolve) => {
+            const listener = (messageEvent) => {
+                const responseMessage = new AppletMessage(messageEvent.data.type, messageEvent.data);
+                if (responseMessage.type === 'resolve' &&
+                    responseMessage.id === message.id) {
+                    window.removeEventListener('message', listener);
+                    resolve(responseMessage);
+                }
+            };
+            window.addEventListener('message', listener);
+        });
+    }
+    async on(messageType, callback) {
+        const listener = async (messageEvent) => {
+            if (messageEvent.source === window.self)
+                return;
+            if (messageEvent.data.type !== messageType)
+                return;
+            const message = new AppletMessage(messageEvent.data.type, messageEvent.data);
+            // Wait for the callback to complete, then send a 'resolve' event
+            // with the message ID.
+            await callback(message);
+            const resolveMessage = new AppletResolveMessage({ id: message.id });
+            this.send(resolveMessage, { resolves: false });
+        };
+        window.addEventListener('message', listener);
+        // TODO: Return something that I can then call .off or .removeListener, implement the
+        // rest of that event class
+    }
+}
+/* Messages */
+export class AppletMessage {
+    constructor(type, values) {
+        this.timeStamp = Date.now();
+        this.type = type;
+        this.id = crypto.randomUUID();
+        if (values)
+            Object.assign(this, values);
+    }
+    toJson() {
+        return Object.fromEntries(Object.entries(this).filter(([_, value]) => {
+            try {
+                JSON.stringify(value);
+                return true;
+            }
+            catch {
+                return false;
+            }
+        }));
+    }
+}
+export class AppletResolveMessage extends AppletMessage {
+    constructor({ id }) {
+        super('resolve');
+        this.id = id;
+    }
+}
+export class AppletActionsMessage extends AppletMessage {
+    constructor({ actions }) {
+        super('actions');
+        this.actions = actions;
+    }
+}
+export class AppletDataMessage extends AppletMessage {
+    constructor({ data }) {
+        super('data');
+        this.data = data;
+    }
+}
+export class AppletReadyMessage extends AppletMessage {
+    constructor() {
+        super('ready');
+    }
+}
+export class AppletResizeMessage extends AppletMessage {
+    constructor({ dimensions, }) {
+        super('resize');
+        this.dimensions = dimensions;
+    }
+}
+export class AppletActionMessage extends AppletMessage {
+    constructor({ actionId, params }) {
+        super('action');
+        this.actionId = actionId;
+        this.params = params;
+    }
+}
+export class AppletInitMessage extends AppletMessage {
+    constructor() {
+        super('init');
+    }
+}
+/* Events */
+export class AppletDataEvent extends Event {
+    constructor({ data }) {
+        super('data', {
+            bubbles: false,
+            cancelable: false,
+            composed: false,
+        });
+        this.data = data;
+    }
+}
+export class AppletReadyEvent extends Event {
+    constructor() {
+        super('ready', {
+            bubbles: false,
+            cancelable: false,
+            composed: false,
+        });
+    }
+}
+export class AppletLoadEvent extends Event {
+    constructor() {
+        super('load', {
+            bubbles: false,
+            cancelable: false,
+            composed: false,
+        });
+    }
+}
+export class AppletActionsEvent extends Event {
+    constructor({ actions }) {
+        super('actions', {
+            bubbles: false,
+            cancelable: false,
+            composed: false,
+        });
+        this.actions = actions;
+    }
+}
+export class AppletResizeEvent extends Event {
+    constructor({ dimensions }) {
+        super('resize', {
+            bubbles: false,
+            cancelable: false,
+            composed: false,
+        });
+        this.dimensions = dimensions;
+    }
+}

package/dist/index.d.ts

@@ -1,5 +1,9 @@
-export * from './utils';
-export * from './types';
-export * as applets from './client';
-export { Applet } from './client';
-export * from './context';
+export * from './core/shared';
+export * from './core/applet';
+export * from './core/context';
+import { load } from './core/applet';
+import { getContext } from './core/context';
+export declare const applets: {
+    load: typeof load;
+    getContext: typeof getContext;
+};

package/dist/index.js

@@ -1,6 +1,9 @@
-export * from './utils';
-export * from './types';
-import * as applets_1 from './client';
-export { applets_1 as applets };
-export { Applet } from './client';
-export * from './context';
+export * from './core/shared';
+export * from './core/applet';
+export * from './core/context';
+import { load } from './core/applet';
+import { getContext } from './core/context';
+export const applets = {
+    load,
+    getContext,
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,17 @@
+import { AppletAction } from '../core/shared';
+export declare function parseUrl(url: string, base?: string): string;
+export declare function createOpenAISchemaForAction(action: AppletAction): {
+    strict: boolean;
+    name: string;
+    schema: {
+        type: string;
+        required: string[];
+        properties: {
+            id: {
+                type: string;
+            };
+            params: import("../core/shared").JSONSchemaProperties;
+        };
+        additionalProperties: boolean;
+    };
+};

package/dist/lib/utils.js

@@ -0,0 +1,37 @@
+// Adds http/https to URLs, and prepends with window location if relative
+export function parseUrl(url, base) {
+    if (['http', 'https'].includes(url.split('://')[0])) {
+        return url;
+    }
+    let path = trimSlashes(url);
+    url = `${base || window.location.origin}/${path}`;
+    return url;
+}
+function trimSlashes(str) {
+    return str.replace(/^\/+|\/+$/g, '');
+}
+export function createOpenAISchemaForAction(action) {
+    return {
+        strict: true,
+        name: 'action_schema',
+        schema: {
+            type: 'object',
+            required: Object.keys(action),
+            properties: {
+                id: { type: 'string' },
+                params: action.params,
+            },
+            additionalProperties: false,
+        },
+    };
+}
+// export async function loadAppletManifest(url: string): Promise<AppletManifest> {
+//   url = parseUrl(url);
+//   const request = await fetch(`${url}/manifest.json`);
+//   const appletManifest = await request.json();
+//   if (appletManifest.type !== 'applet') {
+//     throw new Error("URL doesn't point to a valid applet manifest.");
+//   }
+//   appletManifest.entrypoint = parseUrl(appletManifest.entrypoint, url);
+//   return appletManifest;
+// }

package/dist/utils.d.ts

@@ -1,6 +1,5 @@
-import { AppletAction, type AppletManifest } from './types';
-export declare function getAppletsList(url: string): Promise<any>;
-export declare function loadAppletManifest(url: string): Promise<AppletManifest>;
+import { AppletAction } from './core/shared';
+export declare function parseUrl(url: string, base?: string): string;
 export declare function createOpenAISchemaForAction(action: AppletAction): {
     strict: boolean;
     name: string;
@@ -11,7 +10,7 @@ export declare function createOpenAISchemaForAction(action: AppletAction): {
             id: {
                 type: string;
             };
-            params: import("./types").ActionParamSchema;
+            params: import("./core/shared").JSONSchemaProperties;
         };
         additionalProperties: boolean;
     };

package/dist/utils.js

@@ -1,36 +1,16 @@
-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);
-    url = `${base || window.location.origin}/${path}`;
-    return url;
-}
-export async function getAppletsList(url) {
-    url = parseUrl(url);
-    try {
-        const request = await fetch(`${url}/manifest.json`);
-        const appManifest = await request.json();
-        return appManifest.applets ? appManifest.applets : [];
-    }
-    catch {
-        return [];
-    }
+// Adds http/https to URLs, and prepends with window location if relative
+export function parseUrl(url, base) {
+    if (url)
+        url = URL.parse(url, base ?? window.location.href).href;
+    return trimTrailingSlash(url);
 }
-export async function loadAppletManifest(url) {
-    url = parseUrl(url);
-    const request = await fetch(`${url}/manifest.json`);
-    const appletManifest = await request.json();
-    if (appletManifest.type !== 'applet') {
-        throw new Error("URL doesn't point to a valid applet manifest.");
+function trimTrailingSlash(url) {
+    if (url.endsWith('/')) {
+        return url.slice(0, -1);
     }
-    appletManifest.entrypoint = parseUrl(appletManifest.entrypoint, url);
-    return appletManifest;
+    return url;
 }
+// Creates an OpenAI-compatible schema declaration for an action
 export function createOpenAISchemaForAction(action) {
     return {
         strict: true,

package/package.json

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

package/dist/client.d.ts

@@ -1,32 +0,0 @@
-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[];
-    manifest: AppletManifest;
-    container: HTMLIFrameElement;
-    constructor();
-    get state(): T;
-    set state(state: T);
-    toJson(): {
-        [k: string]: any;
-    };
-    resizeContainer(dimensions: {
-        height: number;
-        width: number;
-    }): void;
-    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 {};