@micro-lc/preview 0.5.0-rc5 → 0.5.0-rc6

package/dist/index.d.ts

@@ -1,5 +1,12 @@
 import type { Manifest } from '@micro-lc/back-kit-engine/schemas';
 import type { Component, PluginConfiguration } from '@micro-lc/interfaces/schemas/v2';
+interface UrlMatchPair {
+    headers: Record<string, string>;
+    originalFrom: `${string}/`;
+    query: Record<string, string>;
+    to: `${string}/`;
+}
+type SourceMapItems = Record<`${string}/`, UrlMatchPair>;
 interface TagInfo {
     definitions?: Record<string, unknown>;
     description?: string;
@@ -63,16 +70,8 @@ interface UpdatedMessage {
 }
 type RegisteredConfigMessages = NewConfigurationMessage | UpdateConfigurationMessage;
 type ReducedMouseEvent = Pick<MouseEvent, 'bubbles' | 'cancelable' | 'clientX' | 'clientY'>;
-interface ServiceWorkerConfig {
-    dictionary: Record<`${string}/`, {
-        headers: Record<string, string>;
-        query: Record<string, string>;
-        to: `${string}/`;
-    }>;
-    scope?: string;
-}
 interface SourceMapMessage {
-    content: ServiceWorkerConfig;
+    content: SourceMapItems;
     type: 'set-source-map';
 }
 type RegisteredMessages = {
@@ -112,19 +111,6 @@ declare const MIA_PREVIEW_ID = "__mia_preview_id";
 declare const OVERLAY_Z_INDEX = 1000000;
 declare const DEFAULT_MODE = "select";
 declare function isRegisteredMessage(input: unknown): input is RegisteredMessages;
-declare class PostChannel {
-    private __instance;
-    private __handler;
-    private __window;
-    private __randomColor;
-    private postMessage;
-    constructor(handler: (this: PostChannel, message: RegisteredMessages) => void);
-    set instance(str: string);
-    get window(): Window;
-    set window(win: Window);
-    send(to: Window, message: RegisteredMessages, origin?: string): void;
-    recv(window: Window, from?: Window | null): () => void;
-}
-export type { NewConfiguration, UpdateConfiguration, OverlayMode, TagInfo, InfoEntry, ElementContent, StyledElementContent, NewConfigurationMessage, UpdateConfigurationMessage, RegisteredConfigMessages, RegisteredMessages, OptionMessage, NotifyProps, Reset, Update, RequestResource, ServiceWorkerConfig, };
-export { MIA_PREVIEW_ID, OVERLAY_Z_INDEX, DEFAULT_MODE, isRegisteredMessage, PostChannel, };
+export type { NewConfiguration, UpdateConfiguration, OverlayMode, TagInfo, InfoEntry, ElementContent, StyledElementContent, NewConfigurationMessage, UpdateConfigurationMessage, RegisteredConfigMessages, RegisteredMessages, OptionMessage, NotifyProps, Reset, Update, RequestResource, SourceMapItems, UrlMatchPair, };
+export { MIA_PREVIEW_ID, OVERLAY_Z_INDEX, DEFAULT_MODE, isRegisteredMessage, };
 export * from './handlebars';

package/dist/index.js

@@ -34,90 +34,5 @@ function isRegisteredMessage(input) {
     }
     return true;
 }
-function isInstanceMessage(input, signature) {
-    if (input === null) {
-        return false;
-    }
-    if (typeof input !== 'object') {
-        return false;
-    }
-    if (!('type' in input) || typeof input.type !== 'string') {
-        return false;
-    }
-    const { type: signedType } = input;
-    if (!signedType.startsWith(signature)) {
-        return false;
-    }
-    const type = signedType.substring(signature.length);
-    if (!isValidKey(type)) {
-        return false;
-    }
-    return true;
-}
-const sign = (signature, message) => ({ ...message, type: `${signature}${message.type}` });
-const unsign = (signature, message) => {
-    let { type } = message;
-    if (type.startsWith(signature)) {
-        type = type.substring(signature.length);
-    }
-    return { ...message, type };
-};
-const generateDarkColorHex = () => {
-    let color = '#';
-    for (let i = 0; i < 3; i++) {
-        color += (`0${Math.floor(Math.random() * Math.pow(16, 2) / 2).toString(16)}`).slice(-2);
-    }
-    return color;
-};
-class PostChannel {
-    __instance;
-    __handler;
-    __window;
-    __randomColor;
-    postMessage(to, message, origin) {
-        if (import.meta.env.MODE !== 'production' || this.__window.__BACKOFFICE_CONFIGURATOR_LOG_LEVEL__ === 'debug') {
-            console.assert(to !== this.__window);
-        }
-        if ((import.meta.env.MODE !== 'production' || this.__window.__BACKOFFICE_CONFIGURATOR_LOG_LEVEL__ === 'debug') && keys[message.type] !== DebugMessage.Skip) {
-            const color = this.__randomColor;
-            const background = `${color}22`;
-            const style = { background, color };
-            const hasTop = this.__window.top !== this.__window;
-            console.groupCollapsed(`%c Msg from ${this.__window.origin} ${hasTop ? '(inner)' : '(top)'} `, Object.entries(style).map(([key, val]) => `${key}: ${val}`).join('; '));
-            console.info(`window '${this.__window.origin}' is sending a message of type %c ${message.type} `, 'background: lightgreen; color: darkgreen');
-            console.log(message.content);
-            console.groupEnd();
-        }
-        to.postMessage(sign(this.__instance, message), origin);
-    }
-    constructor(handler) {
-        this.__instance = '';
-        this.__handler = handler;
-        this.__window = window;
-        this.__randomColor = generateDarkColorHex();
-    }
-    set instance(str) {
-        this.__instance = str;
-    }
-    get window() {
-        return this.__window;
-    }
-    set window(win) {
-        this.__window = win;
-    }
-    send(to, message, origin = '*') {
-        this.__window !== to && this.postMessage(to, message, origin);
-    }
-    recv(window, from = null) {
-        const listener = ({ data, source }) => {
-            if ((from === null || source === from) && isInstanceMessage(data, this.__instance)) {
-                const message = unsign(this.__instance, data);
-                this.__handler(message);
-            }
-        };
-        window.addEventListener('message', listener);
-        return () => window.removeEventListener('message', listener);
-    }
-}
-export { MIA_PREVIEW_ID, OVERLAY_Z_INDEX, DEFAULT_MODE, isRegisteredMessage, PostChannel, };
+export { MIA_PREVIEW_ID, OVERLAY_Z_INDEX, DEFAULT_MODE, isRegisteredMessage, };
 export * from './handlebars';

package/dist/service-worker.d.ts

@@ -0,0 +1,16 @@
+/// <reference lib="webworker" />
+interface UrlMatchPair {
+    headers: Record<string, string>;
+    originalFrom: `${string}/`;
+    query: Record<string, string>;
+    to: `${string}/`;
+}
+type SourceMapItems = Record<`${string}/`, UrlMatchPair>;
+type IncomingWorkerMessage = {
+    content: SourceMapItems;
+    type: 'set-source-map';
+} | {
+    content: Record<string, never>;
+    type: 'unload-client';
+};
+export type { IncomingWorkerMessage, SourceMapItems, UrlMatchPair, };

package/dist/service-worker.js

@@ -0,0 +1,146 @@
+import PostChannel, { fromServiceWorkerToReceiver } from '@micro-lc/post-channel';
+import { ReplaySubject } from 'rxjs';
+// every sw client opens a dedicated channel
+// this map collects, per client, a buffer and the communication channel itself
+const openChannels = new Map();
+// source maps can be stored by unique
+// key which is either the scope or the clientId
+const sourceMap = new Map();
+// reverse map
+const tosMap = new Map();
+const isAvailable = (key, map) => {
+    const iter = map.keys();
+    let matchingKey;
+    let { done = false, value } = iter.next();
+    while (!done && matchingKey === undefined) {
+        if (value !== undefined && key.startsWith(value)) {
+            matchingKey = value;
+            done = true;
+        }
+        const { value: nextValue, done: nextDone = false } = iter.next();
+        done = nextDone;
+        value = nextValue;
+    }
+    return matchingKey;
+};
+const isWindowClient = (source) => source !== null && 'id' in source;
+const errorCatcher = (clientId) => (error) => console.error(`[SW]: error on ${clientId} - ${String(error)}`);
+const getReceiver = fromServiceWorkerToReceiver(self, { errorCatcher });
+const makeListener = (clientId) => {
+    return function listener({ data }) {
+        // todo: missing validation
+        const workerMessageData = data;
+        switch (workerMessageData.type) {
+            case 'set-source-map': {
+                const { content } = workerMessageData;
+                const clientMaps = Object.entries(content).reduce((maps, [key, value]) => {
+                    const { clientSourceMap, clientTosMap } = maps;
+                    if (Object.keys(value.headers).length > 0) {
+                        clientTosMap.set(encodeURI(value.to), value.headers);
+                    }
+                    clientSourceMap.set(encodeURI(key), value);
+                    return maps;
+                }, { clientSourceMap: new Map(), clientTosMap: new Map() });
+                sourceMap.set(clientId, clientMaps.clientSourceMap);
+                tosMap.set(clientId, clientMaps.clientTosMap);
+                break;
+            }
+            case 'unload-client': {
+                openChannels.delete(clientId);
+                this.disconnect();
+                break;
+            }
+            default:
+                break;
+        }
+    };
+};
+const createChannel = (clientId) => {
+    const listenerToSubscription = new Map();
+    const buffer = new ReplaySubject();
+    const sender = {
+        addEventListener(_, listener) {
+            listenerToSubscription.set(listener, buffer.subscribe((msg) => listener(msg)));
+        },
+        removeEventListener(_, listener) {
+            listenerToSubscription.get(listener)?.unsubscribe();
+            listenerToSubscription.delete(listener);
+        },
+    };
+    return {
+        buffer,
+        channel: new PostChannel(makeListener(clientId), sender, getReceiver(clientId)),
+    };
+};
+const getCachedOpenChannel = (clientId) => {
+    let ch = openChannels.get(clientId);
+    if (!ch) {
+        ch = createChannel(clientId);
+        openChannels.set(clientId, ch);
+    }
+    return ch;
+};
+self.addEventListener('install', () => {
+    // on service-worker.js update => immediate kill switch and update
+    // https://whatwebcando.today/articles/handling-service-worker-updates/
+    // https://stackoverflow.com/questions/33986976/how-can-i-remove-a-buggy-service-worker-or-implement-a-kill-switch/38980776#38980776
+    self.skipWaiting()
+        .catch((err) => console.error(`[SW] error while skipWaiting - ${String(err)}`));
+});
+self.addEventListener('activate', (event) => {
+    // all fetch events should be handled by the
+    // service worker as soon as active
+    event.waitUntil(self.clients.claim());
+});
+self.addEventListener('message', (message) => {
+    // messages allowed are `set-source-map` which replies with an
+    // acknowledgment `source-map-ack` that informs the client
+    // all is set to reverse proxy their fetch calls
+    const { source } = message;
+    if (!isWindowClient(source)) {
+        return;
+    }
+    const { id: clientId } = source;
+    getCachedOpenChannel(clientId).buffer.next(message);
+});
+self.addEventListener('fetch', (event) => {
+    const clientId = event.clientId !== '' ? event.clientId : event.resultingClientId;
+    const clientSourceMap = sourceMap.get(clientId);
+    if (!clientSourceMap) {
+        return event.respondWith(self.fetch(event.request));
+    }
+    // there must be a tosMap is clientSourceMap ain't undefined
+    const clientTosMap = tosMap.get(clientId);
+    let { request: { url } } = event;
+    const key = isAvailable(url, clientSourceMap);
+    const to = isAvailable(url, clientTosMap);
+    const headers = new Headers(event.request.headers);
+    let extraQuery = {};
+    if (key !== undefined) {
+        const value = clientSourceMap.get(key)?.to;
+        const extraHeaders = clientSourceMap.get(key)?.headers;
+        const rest = url.substring(key.length);
+        extraQuery = clientSourceMap.get(key)?.query;
+        url = `${value}${rest}`;
+        Object.entries(extraHeaders).forEach(([headerKey, headerValue]) => headers.set(headerKey, headerValue));
+    }
+    if (to !== undefined) {
+        const extraHeaders = clientTosMap.get(to);
+        Object.entries(extraHeaders).forEach(([headerKey, headerValue]) => headers.set(headerKey, headerValue));
+    }
+    let finalUrl;
+    try {
+        const urlInstance = new URL(url);
+        Object.entries(extraQuery).forEach(([qk, qv]) => urlInstance.searchParams.set(qk, qv));
+        finalUrl = urlInstance.href;
+    }
+    catch {
+        finalUrl = url;
+    }
+    console.log({ clientId, clientSourceMap, finalUrl });
+    event.respondWith(self.fetch(finalUrl, { ...event.request, headers })
+        .catch((error) => {
+        console.error(error);
+        return Promise.reject(error);
+    }));
+});

package/dist/src/lib/handlebars.d.ts

@@ -0,0 +1,2 @@
+export declare function parse(input: string, context: Record<string, unknown>, preserveUnknown?: boolean): string;
+export declare const compileObject: <T extends Record<string, string>>(obj: T, context: Record<string, unknown>) => T;

package/dist/src/lib/handlebars.js

@@ -0,0 +1,130 @@
+var LexerState;
+(function (LexerState) {
+    LexerState[LexerState["Literal"] = 0] = "Literal";
+    LexerState[LexerState["Normal"] = 1] = "Normal";
+})(LexerState || (LexerState = {}));
+class Lexer {
+    _input;
+    _length;
+    _idx = 0;
+    _mode = LexerState.Literal;
+    _literals = [];
+    _variables = [];
+    _braketCount = 0;
+    _done = false;
+    constructor(input) {
+        this._input = input;
+        this._length = input.length;
+    }
+    concatToLastLiteral(concat) {
+        // SAFETY: _literals here is always at least long 1
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this._literals.push(this._literals.pop().concat(concat));
+    }
+    concatToLastVariable(concat) {
+        // SAFETY: _variables here is always at least long 1
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this._variables.push(this._variables.pop().concat(concat));
+    }
+    get() {
+        const rawLiterals = [...this._literals];
+        const literals = Object.assign([], rawLiterals);
+        Object.defineProperty(literals, 'raw', { value: rawLiterals, writable: false });
+        return {
+            literals: literals,
+            variables: this._variables,
+        };
+    }
+    run() {
+        if (this._length === 0) {
+            this._literals.push('');
+        }
+        while (this._idx < this._length) {
+            const char = this._input.charAt(this._idx);
+            switch (this._mode) {
+                case LexerState.Literal: {
+                    if (this._literals.length === 0) {
+                        this._literals.push('');
+                    }
+                    if (char === '{'
+                        && this._idx + 1 !== this._length
+                        && this._input.charAt(this._idx + 1) === '{') {
+                        this._literals.push('');
+                        this._variables.push('');
+                        this._mode = LexerState.Normal;
+                        this._idx += 1;
+                    }
+                    else {
+                        this.concatToLastLiteral(char);
+                    }
+                    break;
+                }
+                case LexerState.Normal:
+                    if (char === '}' && this._input.charAt(this._idx + 1) === '}') {
+                        this._mode = LexerState.Literal;
+                        this._idx += 1;
+                    }
+                    else {
+                        this.concatToLastVariable(char);
+                    }
+                    break;
+                default:
+                    break;
+            }
+            this._idx += 1;
+        }
+        if (this._mode === LexerState.Normal) {
+            this._literals.pop();
+            // SAFETY: _variables here is always at least long 1
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.concatToLastLiteral(`{{${this._variables.pop()}`);
+        }
+        this._done = true;
+    }
+}
+const isSquareBrakets = (field) => {
+    const trimmed = field.trim();
+    if (!(trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+        return false;
+    }
+    const inner = trimmed.slice(1).slice(0, -1).trim();
+    if (Number.parseInt(inner).toString(10) !== inner) {
+        return false;
+    }
+    return true;
+};
+const getNumber = (field) => {
+    return Number.parseInt(field.trim().slice(1).slice(0, -1)
+        .trim());
+};
+function interpolate(context, path, preserveUnknown) {
+    if (!path.trim()) {
+        return preserveUnknown ? `{{${path}}}` : '';
+    }
+    const result = path.trim().split('.').reduce((superctx, field) => {
+        if (Array.isArray(superctx) && isSquareBrakets(field)) {
+            return superctx[getNumber(field)];
+        }
+        if (typeof superctx === 'object' && superctx !== null && field in superctx) {
+            return superctx[field];
+        }
+        return undefined;
+    }, { ...context });
+    if (typeof result === 'string') {
+        return result;
+    }
+    return preserveUnknown ? `{{${path}}}` : '';
+}
+export function parse(input, context, preserveUnknown = false) {
+    const lexer = new Lexer(input);
+    lexer.run();
+    const template = lexer.get();
+    let [acc] = template.literals;
+    for (let i = 0; i < template.variables.length; i++) {
+        acc = acc
+            .concat(interpolate(context, template.variables[i], preserveUnknown))
+            .concat(template.literals[i + 1]);
+    }
+    return acc;
+}
+export const compileObject = (obj, context) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, parse(value, context)]));

package/dist/src/lib/index.d.ts

@@ -0,0 +1,110 @@
+import type { Manifest } from '@micro-lc/back-kit-engine/schemas';
+import type { Component, PluginConfiguration } from '@micro-lc/interfaces/schemas/v2';
+import type { SourceMapItems } from '../../service-worker';
+interface TagInfo {
+    definitions?: Record<string, unknown>;
+    description?: string;
+    docLink?: string;
+    label?: string;
+    properties?: Manifest['properties'];
+    type?: Manifest['type'];
+}
+type OverlayMode = 0 | 'interact' | 'select';
+interface InfoEntry {
+    info: TagInfo;
+    tag: string;
+}
+interface ElementContent {
+    ids: string[];
+    selectors: string[];
+}
+interface StyledElementContent extends ElementContent {
+    style: Partial<CSSStyleDeclaration>;
+}
+interface OptionMessage {
+    content: {
+        disableOverlay?: boolean;
+        redirectTo?: string;
+        run?: boolean;
+        timeout?: number;
+    };
+    type: 'options';
+}
+interface RequestResource {
+    content: Record<string, unknown>;
+    type: 'request-resource';
+}
+type RegisteredElementMessages = {
+    content: ElementContent | undefined;
+    type: 'click-element';
+} | {
+    content: StyledElementContent | undefined;
+    type: 'focus-element';
+};
+interface NewConfiguration {
+    configuration: PluginConfiguration;
+    contexts: Map<string, Component[]>;
+    tags: string[];
+}
+interface NewConfigurationMessage {
+    content: NewConfiguration;
+    type: 'new-configuration';
+}
+interface UpdateConfiguration {
+    configuration: PluginConfiguration;
+    context: Component;
+}
+interface UpdateConfigurationMessage {
+    content: UpdateConfiguration;
+    type: 'update';
+}
+interface UpdatedMessage {
+    content: Record<string, never>;
+    type: 'updated';
+}
+type RegisteredConfigMessages = NewConfigurationMessage | UpdateConfigurationMessage;
+type ReducedMouseEvent = Pick<MouseEvent, 'bubbles' | 'cancelable' | 'clientX' | 'clientY'>;
+interface SourceMapMessage {
+    content: SourceMapItems;
+    type: 'set-source-map';
+}
+type RegisteredMessages = {
+    content: ReducedMouseEvent;
+    type: 'mousedown' | 'mousemove';
+} | {
+    content: NotifyProps;
+    type: 'notification';
+} | {
+    content: {
+        mode: OverlayMode;
+    };
+    type: 'ctrl-space';
+} | {
+    content: InfoEntry[];
+    type: 'tag-info';
+} | RegisteredConfigMessages | UpdatedMessage | RegisteredElementMessages | OptionMessage | RequestResource | SourceMapMessage;
+interface NotifyProps extends Record<string, unknown> {
+    data?: Record<string, string>;
+    description: string;
+    message: string;
+    status: 'info' | 'error' | 'default' | 'success' | 'processing' | 'warning' | undefined;
+}
+interface Reset {
+    configuration: PluginConfiguration;
+    contexts: Map<string, Component[]>;
+    tags: string[];
+    type: 'reset';
+}
+interface SingleUpdate {
+    configuration: PluginConfiguration;
+    context: Component;
+    type: 'update';
+}
+type Update = Reset | SingleUpdate;
+declare const MIA_PREVIEW_ID = "__mia_preview_id";
+declare const OVERLAY_Z_INDEX = 1000000;
+declare const DEFAULT_MODE = "select";
+declare function isRegisteredMessage(input: unknown): input is RegisteredMessages;
+export type { NewConfiguration, UpdateConfiguration, OverlayMode, TagInfo, InfoEntry, ElementContent, StyledElementContent, NewConfigurationMessage, UpdateConfigurationMessage, RegisteredConfigMessages, RegisteredMessages, OptionMessage, NotifyProps, Reset, Update, RequestResource, SourceMapItems, };
+export { MIA_PREVIEW_ID, OVERLAY_Z_INDEX, DEFAULT_MODE, isRegisteredMessage, };
+export * from './handlebars';

package/dist/src/lib/index.js

@@ -0,0 +1,38 @@
+var DebugMessage;
+(function (DebugMessage) {
+    DebugMessage[DebugMessage["Default"] = 0] = "Default";
+    DebugMessage[DebugMessage["Skip"] = 1] = "Skip";
+})(DebugMessage || (DebugMessage = {}));
+const MIA_PREVIEW_ID = '__mia_preview_id';
+const OVERLAY_Z_INDEX = 1_000_000;
+const DEFAULT_MODE = 'select';
+const keys = {
+    'click-element': DebugMessage.Default,
+    'ctrl-space': DebugMessage.Default,
+    'focus-element': DebugMessage.Default,
+    mousedown: DebugMessage.Default,
+    mousemove: DebugMessage.Skip,
+    'new-configuration': DebugMessage.Default,
+    notification: DebugMessage.Default,
+    options: DebugMessage.Default,
+    'request-resource': DebugMessage.Default,
+    'set-source-map': DebugMessage.Default,
+    'tag-info': DebugMessage.Default,
+    update: DebugMessage.Default,
+    updated: DebugMessage.Default,
+};
+const isValidKey = (type) => Object.keys(keys).includes(type);
+function isRegisteredMessage(input) {
+    if (input === null) {
+        return false;
+    }
+    if (typeof input !== 'object') {
+        return false;
+    }
+    if (!('type' in input) || typeof input.type !== 'string' || !isValidKey(input.type)) {
+        return false;
+    }
+    return true;
+}
+export { MIA_PREVIEW_ID, OVERLAY_Z_INDEX, DEFAULT_MODE, isRegisteredMessage, };
+export * from './handlebars';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micro-lc/preview",
-  "version": "0.5.0-rc5",
+  "version": "0.5.0-rc6",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -24,7 +24,7 @@
   "dependencies": {
     "@micro-lc/composer": "^2.0.3",
     "@micro-lc/post-channel": "0.0.0",
-    "es-module-shims": "^1.7.2",
+    "es-module-shims": "^1.7.3",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {