@ticketlayer/backstage 0.2.0

package/dist/embed/helpers.d.ts

@@ -0,0 +1,62 @@
+export declare const EMBED_PROTOCOL_VERSION: 1;
+export type EmbedWidget = 'events' | 'event' | 'orders' | 'order';
+export interface EmbedWidgetParams {
+    events: {
+        action?: 'new';
+    };
+    event: {
+        id: string;
+        tab?: 'details' | 'tickets' | 'occurrences';
+    };
+    orders: Record<string, never>;
+    order: {
+        id: string;
+    };
+}
+export interface EmbedWidgetTarget<W extends EmbedWidget = EmbedWidget> {
+    widget: W;
+    params?: EmbedWidgetParams[W];
+}
+export type WidgetMessage = {
+    type: 'tl:ready';
+    version: 1;
+} | {
+    type: 'tl:height';
+    version: 1;
+    height: number;
+} | {
+    type: 'tl:navigate';
+    version: 1;
+    widget: EmbedWidget;
+    params: Record<string, string>;
+} | {
+    type: 'tl:event';
+    version: 1;
+    name: string;
+    payload: unknown;
+} | {
+    type: 'tl:session-expired';
+    version: 1;
+    reason?: string;
+} | {
+    type: 'tl:error';
+    version: 1;
+    code: string;
+    message: string;
+};
+export interface SessionMessage {
+    type: 'tl:session';
+    version: 1;
+    token: string;
+}
+export declare function widgetPath<W extends EmbedWidget>(widget: W, params?: EmbedWidgetParams[W]): string;
+export interface EmbedUrlInput<W extends EmbedWidget = EmbedWidget> extends EmbedWidgetTarget<W> {
+    baseUrl: string;
+    session: string;
+    parentOrigin: string;
+}
+export declare function buildEmbedUrl<W extends EmbedWidget>(input: EmbedUrlInput<W>): string;
+export declare function originOf(url: string): string | null;
+export declare function parseWidgetMessage(data: unknown, eventOrigin: string, widgetOrigin: string): WidgetMessage | null;
+export declare function buildSessionMessage(token: string): SessionMessage;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/embed/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/embed/helpers.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,sBAAsB,EAAG,CAAU,CAAC;AAEjD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,iBAAiB;IAEhC,MAAM,EAAE;QAAE,MAAM,CAAC,EAAE,KAAK,CAAA;KAAE,CAAC;IAE3B,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;KAAE,CAAC;IAEnE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAE9B,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACpE,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;CAC/B;AAGD,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,CAAC,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC;IAAC,MAAM,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,GACxF;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAChE;IAAE,IAAI,EAAE,oBAAoB,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAC3D;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAGpE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,CAAC,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAUD,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,MAAM,CAsBlG;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAE9F,OAAO,EAAE,MAAM,CAAC;IAEhB,OAAO,EAAE,MAAM,CAAC;IAEhB,YAAY,EAAE,MAAM,CAAC;CACtB;AAGD,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,MAAM,CAMpF;AAGD,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAQnD;AAOD,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,OAAO,EACb,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,aAAa,GAAG,IAAI,CAoCtB;AAGD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CAKjE"}

package/dist/embed/helpers.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EMBED_PROTOCOL_VERSION = void 0;
+exports.widgetPath = widgetPath;
+exports.buildEmbedUrl = buildEmbedUrl;
+exports.originOf = originOf;
+exports.parseWidgetMessage = parseWidgetMessage;
+exports.buildSessionMessage = buildSessionMessage;
+exports.EMBED_PROTOCOL_VERSION = 1;
+const WIDGET_TYPES = new Set(['tl:ready', 'tl:height', 'tl:navigate', 'tl:event', 'tl:session-expired', 'tl:error']);
+const WIDGETS = new Set(['events', 'event', 'orders', 'order']);
+function segment(value) {
+    return encodeURIComponent(value);
+}
+function widgetPath(widget, params) {
+    switch (widget) {
+        case 'events': {
+            const p = (params ?? {});
+            return p.action === 'new' ? '/embed/events/new' : '/embed/events';
+        }
+        case 'event': {
+            const p = params;
+            if (!p || !p.id)
+                throw new Error('The event widget needs params.id');
+            const base = `/embed/events/${segment(p.id)}`;
+            return p.tab && p.tab !== 'details' ? `${base}/${p.tab}` : base;
+        }
+        case 'orders':
+            return '/embed/orders';
+        case 'order': {
+            const p = params;
+            if (!p || !p.id)
+                throw new Error('The order widget needs params.id');
+            return `/embed/orders/${segment(p.id)}`;
+        }
+        default:
+            throw new Error(`Unknown widget: ${String(widget)}`);
+    }
+}
+function buildEmbedUrl(input) {
+    const base = input.baseUrl.replace(/\/+$/, '');
+    const query = `session=${encodeURIComponent(input.session)}` +
+        `&parent_origin=${encodeURIComponent(input.parentOrigin)}`;
+    return `${base}${widgetPath(input.widget, input.params)}?${query}`;
+}
+function originOf(url) {
+    try {
+        const parsed = new URL(url);
+        if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:')
+            return null;
+        return parsed.origin;
+    }
+    catch {
+        return null;
+    }
+}
+function parseWidgetMessage(data, eventOrigin, widgetOrigin) {
+    if (eventOrigin !== widgetOrigin)
+        return null;
+    if (!data || typeof data !== 'object')
+        return null;
+    const m = data;
+    if (m.version !== exports.EMBED_PROTOCOL_VERSION)
+        return null;
+    if (typeof m.type !== 'string' || !WIDGET_TYPES.has(m.type))
+        return null;
+    switch (m.type) {
+        case 'tl:height':
+            return typeof m.height === 'number' && Number.isFinite(m.height) && m.height >= 0
+                ? { type: 'tl:height', version: 1, height: m.height }
+                : null;
+        case 'tl:navigate': {
+            if (typeof m.widget !== 'string' || !WIDGETS.has(m.widget))
+                return null;
+            const params = {};
+            if (m.params && typeof m.params === 'object') {
+                for (const [key, value] of Object.entries(m.params)) {
+                    if (typeof value === 'string')
+                        params[key] = value;
+                }
+            }
+            return { type: 'tl:navigate', version: 1, widget: m.widget, params };
+        }
+        case 'tl:event':
+            return typeof m.name === 'string' && m.name.length > 0
+                ? { type: 'tl:event', version: 1, name: m.name, payload: m.payload }
+                : null;
+        case 'tl:error':
+            return typeof m.code === 'string' && typeof m.message === 'string'
+                ? { type: 'tl:error', version: 1, code: m.code, message: m.message }
+                : null;
+        case 'tl:session-expired':
+            return { type: 'tl:session-expired', version: 1, ...(typeof m.reason === 'string' ? { reason: m.reason } : {}) };
+        case 'tl:ready':
+            return { type: 'tl:ready', version: 1 };
+        default:
+            return null;
+    }
+}
+function buildSessionMessage(token) {
+    if (typeof token !== 'string' || token.length === 0) {
+        throw new Error('A session token is required');
+    }
+    return { type: 'tl:session', version: exports.EMBED_PROTOCOL_VERSION, token };
+}

package/dist/embed/index.d.ts

@@ -0,0 +1,27 @@
+import { type EmbedWidget, type EmbedWidgetParams, type EmbedWidgetTarget } from './helpers';
+export { EMBED_PROTOCOL_VERSION, buildEmbedUrl, buildSessionMessage, originOf, parseWidgetMessage, widgetPath, } from './helpers';
+export type { EmbedWidget, EmbedWidgetParams, EmbedWidgetTarget, EmbedUrlInput, SessionMessage, WidgetMessage, } from './helpers';
+export interface BackstageEmbedError {
+    code: string;
+    message: string;
+}
+export interface BackstageEmbedOptions {
+    baseUrl: string;
+    session: string;
+    sessionProvider?: () => Promise<string> | string;
+    onSessionExpired?: () => void;
+    onEvent?: (name: string, payload: unknown) => void;
+    onNavigate?: (widget: EmbedWidget, params: Record<string, string>) => void;
+    onError?: (error: BackstageEmbedError) => void;
+    onReady?: () => void;
+    initialHeight?: number;
+}
+export interface BackstageEmbed {
+    mount<W extends EmbedWidget>(el: HTMLElement, target: EmbedWidgetTarget<W>): HTMLIFrameElement;
+    navigate<W extends EmbedWidget>(widget: W, params?: EmbedWidgetParams[W]): void;
+    setSession(token: string): void;
+    unmount(): void;
+    readonly iframe: HTMLIFrameElement | null;
+}
+export declare function createBackstageEmbed(options: BackstageEmbedOptions): BackstageEmbed;
+//# sourceMappingURL=index.d.ts.map

package/dist/embed/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/embed/index.ts"],"names":[],"mappings":"AAcA,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EAEvB,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,sBAAsB,EACtB,aAAa,EACb,mBAAmB,EACnB,QAAQ,EACR,kBAAkB,EAClB,UAAU,GACX,MAAM,WAAW,CAAC;AACnB,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IAEpC,OAAO,EAAE,MAAM,CAAC;IAEhB,OAAO,EAAE,MAAM,CAAC;IAOhB,eAAe,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAEjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAE/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAE7B,KAAK,CAAC,CAAC,SAAS,WAAW,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC;IAE/F,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAEhF,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC,OAAO,IAAI,IAAI,CAAC;IAEhB,QAAQ,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;CAC3C;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,qBAAqB,GAAG,cAAc,CAiHnF"}

package/dist/embed/index.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.widgetPath = exports.parseWidgetMessage = exports.originOf = exports.buildSessionMessage = exports.buildEmbedUrl = exports.EMBED_PROTOCOL_VERSION = void 0;
+exports.createBackstageEmbed = createBackstageEmbed;
+const helpers_1 = require("./helpers");
+var helpers_2 = require("./helpers");
+Object.defineProperty(exports, "EMBED_PROTOCOL_VERSION", { enumerable: true, get: function () { return helpers_2.EMBED_PROTOCOL_VERSION; } });
+Object.defineProperty(exports, "buildEmbedUrl", { enumerable: true, get: function () { return helpers_2.buildEmbedUrl; } });
+Object.defineProperty(exports, "buildSessionMessage", { enumerable: true, get: function () { return helpers_2.buildSessionMessage; } });
+Object.defineProperty(exports, "originOf", { enumerable: true, get: function () { return helpers_2.originOf; } });
+Object.defineProperty(exports, "parseWidgetMessage", { enumerable: true, get: function () { return helpers_2.parseWidgetMessage; } });
+Object.defineProperty(exports, "widgetPath", { enumerable: true, get: function () { return helpers_2.widgetPath; } });
+function createBackstageEmbed(options) {
+    const widgetOrigin = (0, helpers_1.originOf)(options.baseUrl);
+    if (!widgetOrigin) {
+        throw new Error(`createBackstageEmbed: baseUrl must be an http(s) URL, got "${options.baseUrl}"`);
+    }
+    let session = options.session;
+    let iframe = null;
+    let listener = null;
+    let refreshing = null;
+    const parentOrigin = () => window.location.origin;
+    const post = (message) => {
+        iframe?.contentWindow?.postMessage(message, widgetOrigin);
+    };
+    const setSession = (token) => {
+        session = token;
+        post((0, helpers_1.buildSessionMessage)(token));
+    };
+    const refresh = () => {
+        if (refreshing)
+            return refreshing;
+        refreshing = (async () => {
+            if (!options.sessionProvider) {
+                options.onSessionExpired?.();
+                return;
+            }
+            try {
+                const token = await options.sessionProvider();
+                setSession(token);
+            }
+            catch (err) {
+                options.onError?.({ code: 'session-refresh-failed', message: err instanceof Error ? err.message : String(err) });
+                options.onSessionExpired?.();
+            }
+        })().finally(() => {
+            refreshing = null;
+        });
+        return refreshing;
+    };
+    const handle = (message) => {
+        switch (message.type) {
+            case 'tl:ready':
+                options.onReady?.();
+                break;
+            case 'tl:height':
+                if (iframe)
+                    iframe.style.height = `${Math.ceil(message.height)}px`;
+                break;
+            case 'tl:navigate':
+                options.onNavigate?.(message.widget, message.params);
+                break;
+            case 'tl:event':
+                options.onEvent?.(message.name, message.payload);
+                break;
+            case 'tl:session-expired':
+                void refresh();
+                break;
+            case 'tl:error':
+                options.onError?.({ code: message.code, message: message.message });
+                break;
+        }
+    };
+    const unmount = () => {
+        if (listener) {
+            window.removeEventListener('message', listener);
+            listener = null;
+        }
+        iframe?.remove();
+        iframe = null;
+    };
+    const mount = (el, target) => {
+        unmount();
+        const frame = document.createElement('iframe');
+        frame.src = (0, helpers_1.buildEmbedUrl)({ baseUrl: options.baseUrl, session, parentOrigin: parentOrigin(), ...target });
+        frame.title = 'Backstage';
+        frame.style.width = '100%';
+        frame.style.border = '0';
+        frame.style.display = 'block';
+        frame.style.height = `${options.initialHeight ?? 480}px`;
+        frame.setAttribute('allow', 'clipboard-write');
+        el.appendChild(frame);
+        iframe = frame;
+        listener = (event) => {
+            if (!iframe || event.source !== iframe.contentWindow)
+                return;
+            const message = (0, helpers_1.parseWidgetMessage)(event.data, event.origin, widgetOrigin);
+            if (message)
+                handle(message);
+        };
+        window.addEventListener('message', listener);
+        return frame;
+    };
+    const navigate = (widget, params) => {
+        if (!iframe)
+            throw new Error('navigate() called before mount()');
+        iframe.src = (0, helpers_1.buildEmbedUrl)({ baseUrl: options.baseUrl, session, parentOrigin: parentOrigin(), widget, params });
+    };
+    return {
+        mount,
+        navigate,
+        setSession,
+        unmount,
+        get iframe() {
+            return iframe;
+        },
+    };
+}