@web-applets/sdk 0.0.9 → 0.1.0

package/dist/client.js

@@ -1,197 +0,0 @@
-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_instances, _Applet_state, _Applet_dispatchEvent;
-import { AppletMessage, } from './types';
-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 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 {};
-    }
-}
-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;
-    applet.container = container;
-    container.src = applet.manifest.entrypoint;
-    return new Promise((resolve) => {
-        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);
-        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() {
-        return __classPrivateFieldGet(this, _Applet_state, "f");
-    }
-    set state(state) {
-        __classPrivateFieldSet(this, _Applet_state, state, "f");
-        this.send(new AppletMessage('state', { state }));
-    }
-    toJson() {
-        return Object.fromEntries(Object.entries(this).filter(([_, value]) => {
-            try {
-                JSON.stringify(value);
-                return true;
-            }
-            catch {
-                return false;
-            }
-        }));
-    }
-    resizeContainer(dimensions) {
-        this.container.style.height = `${dimensions.height + 2}px`;
-        // if (!this.#styleOverrides) {
-        //   this.#container.style.height = `${dimensions.height}px`;
-        // }
-    }
-    onstateupdated(event) { }
-    disconnect() {
-        this.onstateupdated = () => { };
-        this.container.src = 'about:blank';
-    }
-    async dispatchAction(actionId, params) {
-        const requestMessage = new AppletMessage('action', {
-            actionId,
-            params,
-        });
-        return await this.send(requestMessage);
-    }
-    async send(message) {
-        this.container.contentWindow?.postMessage(message.toJson(), '*');
-        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 !== 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_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 = 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`);
-    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;
-}
-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

@@ -1,27 +0,0 @@
-import { ActionHandlerDict, AppletMessage, AppletMessageType, AppletMessageCallback, ActionParams, ActionHandler } from './types';
-/**
- * Context
- */
-export declare class AppletContext<StateType = any> extends EventTarget {
-    #private;
-    client: AppletClient;
-    actionHandlers: ActionHandlerDict;
-    headless: boolean;
-    connect(): this;
-    setActionHandler<T extends ActionParams>(actionId: string, handler: ActionHandler<T>): 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;
-}
-/**
- * Client
- */
-declare class AppletClient {
-    on(messageType: AppletMessageType, callback: AppletMessageCallback): void;
-    send(message: AppletMessage): Promise<void>;
-}
-export declare const appletContext: AppletContext<any>;
-export {};

package/dist/context.js

@@ -1,136 +0,0 @@
-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
- */
-export class AppletContext extends EventTarget {
-    constructor() {
-        super(...arguments);
-        this.actionHandlers = {};
-        _AppletContext_state.set(this, void 0);
-        this.headless = false;
-    }
-    connect() {
-        this.client = new AppletClient();
-        const startup = async () => {
-            await this.onload();
-            this.client.send(new AppletMessage('ready'));
-            this.dispatchEvent(new CustomEvent('ready'));
-            await this.onready();
-        };
-        if (document.readyState === 'complete' ||
-            document.readyState === 'interactive') {
-            setTimeout(startup, 1);
-        }
-        else {
-            window.addEventListener('DOMContentLoaded', startup);
-        }
-        const resizeObserver = new ResizeObserver((entries) => {
-            for (let entry of entries) {
-                const message = new AppletMessage('resize', {
-                    dimensions: {
-                        width: entry.contentRect.width,
-                        height: entry.contentRect.height,
-                    },
-                });
-                this.client.send(message);
-            }
-        });
-        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");
-            }
-            // 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)) {
-                throw new TypeError("Message doesn't match type AppletMessage.");
-            }
-            if (Object.keys(this.actionHandlers).includes(message.actionId)) {
-                await this.actionHandlers[message.actionId](message.params);
-            }
-        });
-        return this;
-    }
-    setActionHandler(actionId, handler) {
-        this.actionHandlers[actionId] = handler;
-    }
-    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);
-        __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';
-}
-function isStateMessage(message) {
-    return message.type === 'state';
-}
-/**
- * Client
- */
-class AppletClient {
-    on(messageType, callback) {
-        window.addEventListener('message', async (messageEvent) => {
-            if (messageEvent.data.type !== messageType)
-                return;
-            const message = new AppletMessage(messageEvent.data.type, messageEvent.data);
-            await callback(message);
-            window.parent.postMessage(new AppletMessage('resolve', { id: message.id }), '*');
-        });
-    }
-    send(message) {
-        window.parent.postMessage(message.toJson(), '*');
-        return new Promise((resolve) => {
-            const listener = (messageEvent) => {
-                if (messageEvent.data.type === 'resolve' &&
-                    messageEvent.data.id === message.id) {
-                    window.removeEventListener('message', listener);
-                    resolve();
-                }
-            };
-            window.addEventListener('message', listener);
-        });
-    }
-}
-export const appletContext = new AppletContext();

package/dist/types.d.ts

@@ -1,74 +0,0 @@
-export interface AppletManifest {
-    type: 'applet';
-    name: string;
-    description?: string;
-    icon?: string;
-    unsafe?: boolean;
-    frameless?: boolean;
-    entrypoint?: string;
-    actions?: AppletAction[];
-}
-export interface AppletManifestDict {
-    [url: string]: AppletManifest;
-}
-export interface AppletAction {
-    id: string;
-    name?: string;
-    description?: string;
-    params?: ActionParamSchema;
-}
-export interface AppletHeader {
-    name: string;
-    description: string;
-    url: string;
-    actions: {
-        id: string;
-        description: string;
-        params: {
-            [key: string]: string;
-        };
-    }[];
-}
-export type AppletState = any;
-export type ActionParamSchema = Record<string, {
-    description: string;
-    type: 'string';
-}>;
-export type ActionParams<T = any> = Record<string, T>;
-export type ActionHandlerDict = {
-    [key: string]: ActionHandler<any>;
-};
-export type ActionHandler<T extends ActionParams> = (params: T) => void | Promise<void>;
-export type AnyAppletMessage = AppletMessage | AppletStateMessage | AppletActionMessage;
-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;
-    timeStamp: number;
-    constructor(type: AppletMessageType, values?: T);
-    toJson(): {
-        [k: string]: any;
-    };
-    resolve(): void;
-}
-export type AppletMessageType = 'action' | 'actions' | 'render' | 'state' | 'init' | 'ready' | 'resolve' | 'resize';
-export type AppletMessageCallback = (message: AnyAppletMessage) => Promise<void> | void;

package/dist/types.js

@@ -1,21 +0,0 @@
-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;
-            }
-        }));
-    }
-    resolve() { }
-}

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

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

package/dist/web-component/index.js

@@ -1,52 +0,0 @@
-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

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

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

@@ -1,52 +0,0 @@
-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);