@lynx-js/web-mainthread-apis 0.7.0

package/dist/elementAPI/ElementThreadElement.js

@@ -0,0 +1,272 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { componentIdAttribute, cssIdAttribute, OperationType, } from '@lynx-js/web-constants';
+function getParentIdx(element, parent) {
+    parent = parent ?? element.parent;
+    const idx = parent.children.findIndex((e) => e === element);
+    if (idx === -1) {
+        console.error(`[lynx-web]`, element, ` is not a child of`, parent);
+        throw new Error(`[lynx-web] ${element} is not a child of ${parent}`);
+    }
+    return idx;
+}
+export var RefCountType;
+(function (RefCountType) {
+    RefCountType[RefCountType["Element"] = 0] = "Element";
+})(RefCountType || (RefCountType = {}));
+export class ElementThreadElement {
+    tag;
+    uniqueId;
+    parentComponentUniqueId;
+    pageConfig;
+    operationsRef;
+    styleInfo;
+    static uniqueIdToElement = [];
+    static receiveEvent(event) {
+        const currentTargetUniqueId = event.currentTarget.uniqueId;
+        const target = this.uniqueIdToElement[currentTargetUniqueId]?.deref();
+        if (target) {
+            const handler = target.eventHandlerMap[event.type]?.handler;
+            if (typeof handler === 'function') {
+                queueMicrotask(() => {
+                    handler(event);
+                });
+            }
+        }
+        else {
+            this.uniqueIdToElement[currentTargetUniqueId] = undefined;
+        }
+    }
+    static getElementByUniqueId(uniqueId) {
+        return ElementThreadElement.uniqueIdToElement[uniqueId]?.deref();
+    }
+    type = RefCountType.Element;
+    eventHandlerMap = {};
+    attributes;
+    property = {
+        componentConfig: {},
+        dataset: {},
+    };
+    children = [];
+    parent;
+    constructor(tag, uniqueId, parentComponentUniqueId, pageConfig, operationsRef, styleInfo) {
+        this.tag = tag;
+        this.uniqueId = uniqueId;
+        this.parentComponentUniqueId = parentComponentUniqueId;
+        this.pageConfig = pageConfig;
+        this.operationsRef = operationsRef;
+        this.styleInfo = styleInfo;
+        this.attributes = {
+            style: null,
+            class: '',
+            [cssIdAttribute]: null,
+        };
+        ElementThreadElement.uniqueIdToElement[this.uniqueId] = new WeakRef(this);
+        operationsRef.operations.push({
+            type: OperationType.Create,
+            uid: uniqueId,
+            tag: tag,
+            puid: parentComponentUniqueId.toString(),
+        });
+    }
+    setProperty(key, value) {
+        this.property[key] = value;
+        if (key === 'dataset') {
+            this.operationsRef.operations.push({
+                uid: this.uniqueId,
+                type: OperationType.SetProperty,
+                key: key,
+                value: value,
+            });
+        }
+    }
+    setDatasetProperty(key, value) {
+        this.property.dataset[key] = value;
+        this.operationsRef.operations.push({
+            uid: this.uniqueId,
+            type: OperationType.SetDatasetProperty,
+            key,
+            value,
+        });
+    }
+    setAttribute(key, value) {
+        this.attributes[key] = value;
+        this.operationsRef.operations.push({
+            uid: this.uniqueId,
+            type: OperationType.SetAttribute,
+            key,
+            value,
+        });
+    }
+    getAttribute(key) {
+        return this.attributes[key];
+    }
+    appendChild(children) {
+        this.children.push(...children);
+        for (const kid of children) {
+            if (kid.parent) {
+                // note that Node.appendChild() will do `move node` Implicitly.
+                const idx = getParentIdx(kid);
+                kid.parent.children.splice(idx, 1);
+            }
+            kid.parent = this;
+        }
+        this.operationsRef.operations.push({
+            uid: this.uniqueId,
+            type: OperationType.Append,
+            cid: children.map(e => e.uniqueId),
+        });
+    }
+    removeChild(child) {
+        const idx = getParentIdx(child, this);
+        this.children.splice(idx, 1);
+        child.parent = undefined;
+        this.operationsRef.operations.push({
+            type: OperationType.Remove,
+            uid: this.uniqueId,
+            cid: [child.uniqueId],
+        });
+        return child;
+    }
+    replaceWithElements(newElements) {
+        for (const kid of newElements) {
+            if (this.parent === kid) {
+                console.error(`[lynx-web] cannot replace the element`, this, `by its parent`, kid);
+                throw new Error(`[lynx-web] cannot replace `);
+            }
+        }
+        const parent = this.parent;
+        if (parent) {
+            const currentPosition = getParentIdx(this);
+            parent.children.splice(currentPosition, 1);
+            this.parent = undefined;
+            for (const kid of newElements) {
+                if (kid.parent) {
+                    const idx = getParentIdx(kid);
+                    kid.parent.children.splice(idx, 1);
+                }
+                kid.parent = parent;
+            }
+            parent.children.splice(currentPosition, 0, ...newElements);
+            this.operationsRef.operations.push({
+                type: OperationType.Replace,
+                uid: this.uniqueId,
+                nid: newElements.map(e => e.uniqueId),
+            });
+        }
+    }
+    swapWith(elementB) {
+        const parentA = this.parent;
+        const parentB = elementB.parent;
+        const idxA = getParentIdx(this);
+        const idxB = getParentIdx(elementB);
+        parentA.children[idxA] = elementB;
+        elementB.parent = parentA;
+        parentB.children[idxB] = this;
+        this.parent = parentB;
+        this.operationsRef.operations.push({
+            type: OperationType.SwapElement,
+            uid: this.uniqueId,
+            tid: elementB.uniqueId,
+        });
+    }
+    insertBefore(child, ref) {
+        if (ref) {
+            const idx = getParentIdx(ref, this);
+            this.children.splice(idx, 0, child);
+            child.parent = this;
+            this.operationsRef.operations.push({
+                type: OperationType.InsertBefore,
+                uid: this.uniqueId,
+                cid: child.uniqueId,
+                ref: ref.uniqueId,
+            });
+        }
+        else {
+            this.children.push(child);
+            child.parent = this;
+            this.operationsRef.operations.push({
+                type: OperationType.Append,
+                uid: this.uniqueId,
+                cid: [child.uniqueId],
+            });
+        }
+        return child;
+    }
+    updateCssInJsGeneratedStyle(classStyleStr) {
+        this.operationsRef.operations.push({
+            type: OperationType.UpdateCssInJs,
+            uid: this.uniqueId,
+            classStyleStr,
+        });
+    }
+    setStyleProperty(key, value, important) {
+        this.attributes.style = (this.attributes.style ?? '')
+            + `${key}:${value ?? ''}${important ? '!important' : ''};`;
+        this.operationsRef.operations.push({
+            type: OperationType.SetStyleProperty,
+            uid: this.uniqueId,
+            key,
+            value,
+            im: important,
+        });
+    }
+    setEventHandler(ename, handler, eventType) {
+        let hname;
+        if (handler) {
+            this.eventHandlerMap[ename] = { type: eventType, handler };
+            if (typeof handler === 'function') {
+                hname = null;
+            }
+            else {
+                hname = handler;
+            }
+        }
+        else {
+            this.eventHandlerMap[ename] = undefined;
+        }
+        this.operationsRef.operations.push({
+            type: OperationType.RegisterEventHandler,
+            uid: this.uniqueId,
+            eventType,
+            hname,
+            ename,
+        });
+    }
+    get firstElementChild() {
+        return this.children[0];
+    }
+    get lastElementChild() {
+        const childLength = this.children.length;
+        return childLength > 0 ? this.children[childLength - 1] : undefined;
+    }
+    get nextElementSibling() {
+        if (this.parent) {
+            const idx = getParentIdx(this);
+            return this.parent.children[idx + 1];
+        }
+        return;
+    }
+}
+export class ListElement extends ElementThreadElement {
+    componentAtIndex;
+    enqueueComponent;
+    setAttribute(key, value) {
+        if (key === 'update-list-info' && value) {
+            const listInfo = value;
+            const { insertAction, removeAction } = listInfo;
+            queueMicrotask(() => {
+                for (const action of insertAction) {
+                    this.componentAtIndex(this, this.uniqueId, action.position, 0, false);
+                }
+                for (const action of removeAction) {
+                    this.enqueueComponent(this, this.uniqueId, action.position);
+                }
+            });
+            value = value.toString();
+        }
+        super.setAttribute(key, value);
+    }
+}
+//# sourceMappingURL=ElementThreadElement.js.map

package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.d.ts

@@ -0,0 +1,25 @@
+import { type ElementThreadElement, type ComponentAtIndexCallback, type EnqueueComponentCallback, type ListElement } from '../ElementThreadElement.js';
+export declare function __AddConfig(element: ElementThreadElement, type: string, value: any): void;
+export declare function __AddDataset(element: ElementThreadElement, key: string, value: string | number | Record<string, any>): void;
+export declare function __GetAttributes(element: ElementThreadElement): {
+    [key: string]: string | null | undefined;
+    id?: string;
+    style: string | null;
+    class: string | null;
+    "lynx-component-id"?: string;
+    "lynx-css-id": string | null;
+};
+export declare function __GetComponentID(element: ElementThreadElement): string | undefined;
+export declare function __GetDataByKey(element: ElementThreadElement, key: string): unknown;
+export declare function __GetDataset(element: ElementThreadElement): Record<string, any>;
+export declare function __GetElementConfig(element: ElementThreadElement): Record<string, unknown>;
+export declare function __GetElementUniqueID(element: ElementThreadElement | unknown): number;
+export declare function __GetID(element: ElementThreadElement): string;
+export declare function __GetTag(element: ElementThreadElement): string;
+export declare function __SetAttribute(element: ElementThreadElement, key: string, value: string | null | undefined): void;
+export declare function __SetConfig(element: ElementThreadElement, config: Record<string, any>): void;
+export declare function __SetDataset(element: ElementThreadElement, dataset: Record<string, any>): void;
+export declare function __SetID(element: ElementThreadElement, id: string): void;
+export declare function __UpdateComponentID(element: ElementThreadElement, componentID: string): void;
+export declare function __GetConfig(element: ElementThreadElement): Record<string, unknown>;
+export declare function __UpdateListCallbacks(list: ListElement, componentAtIndex: ComponentAtIndexCallback, enqueueComponent: EnqueueComponentCallback): void;

package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.js

@@ -0,0 +1,62 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { componentIdAttribute } from '@lynx-js/web-constants';
+import { RefCountType, } from '../ElementThreadElement.js';
+export function __AddConfig(element, type, value) {
+    element.property.componentConfig[type] = value;
+}
+export function __AddDataset(element, key, value) {
+    element.setDatasetProperty(key, value);
+}
+export function __GetAttributes(element) {
+    return element.attributes;
+}
+export function __GetComponentID(element) {
+    return element.attributes[componentIdAttribute];
+}
+export function __GetDataByKey(element, key) {
+    return element.property.dataset[key];
+}
+export function __GetDataset(element) {
+    return element.property.dataset;
+}
+export function __GetElementConfig(element) {
+    return element.property.componentConfig;
+}
+export function __GetElementUniqueID(element) {
+    if (element && typeof element === 'object'
+        && element.type === RefCountType.Element) {
+        return element.uniqueId;
+    }
+    return -1;
+}
+export function __GetID(element) {
+    return element.attributes.id ?? '';
+}
+export function __GetTag(element) {
+    return element.tag;
+}
+export function __SetAttribute(element, key, value) {
+    element.setAttribute(key, value ?? null);
+}
+export function __SetConfig(element, config) {
+    element.property.componentConfig = config;
+}
+export function __SetDataset(element, dataset) {
+    element.setProperty('dataset', dataset);
+}
+export function __SetID(element, id) {
+    element.setAttribute('id', id);
+}
+export function __UpdateComponentID(element, componentID) {
+    __SetAttribute(element, componentIdAttribute, componentID);
+}
+export function __GetConfig(element) {
+    return element.property.componentConfig;
+}
+export function __UpdateListCallbacks(list, componentAtIndex, enqueueComponent) {
+    list.componentAtIndex = componentAtIndex;
+    list.enqueueComponent = enqueueComponent;
+}
+//# sourceMappingURL=attributeAndPropertyFunctions.js.map

package/dist/elementAPI/domTree/domTreeFunctions.d.ts

@@ -0,0 +1,13 @@
+import type { ElementThreadElement } from '../ElementThreadElement.js';
+export declare function __AppendElement(parent: ElementThreadElement, child: ElementThreadElement): void;
+export declare function __ElementIsEqual(left: ElementThreadElement, right: ElementThreadElement): boolean;
+export declare function __FirstElement(element: ElementThreadElement): ElementThreadElement | undefined;
+export declare function __GetChildren(element: ElementThreadElement): ElementThreadElement[];
+export declare function __GetParent(element: ElementThreadElement): ElementThreadElement | undefined;
+export declare function __InsertElementBefore(parent: ElementThreadElement, child: ElementThreadElement, ref: ElementThreadElement | null): ElementThreadElement;
+export declare function __LastElement(element: ElementThreadElement): ElementThreadElement | undefined;
+export declare function __NextElement(element: ElementThreadElement): ElementThreadElement | undefined;
+export declare function __RemoveElement(parent: ElementThreadElement, child: ElementThreadElement): ElementThreadElement;
+export declare function __ReplaceElement(newElement: ElementThreadElement, oldElement: ElementThreadElement): void;
+export declare function __ReplaceElements(parent: ElementThreadElement, newChildren: ElementThreadElement[] | ElementThreadElement, oldChildren: ElementThreadElement[] | ElementThreadElement | null | undefined): void;
+export declare function __SwapElement(childA: ElementThreadElement, childB: ElementThreadElement): void;

package/dist/elementAPI/domTree/domTreeFunctions.js

@@ -0,0 +1,52 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export function __AppendElement(parent, child) {
+    parent.appendChild([child]);
+}
+export function __ElementIsEqual(left, right) {
+    return left === right;
+}
+export function __FirstElement(element) {
+    return element.firstElementChild;
+}
+export function __GetChildren(element) {
+    return element.children;
+}
+export function __GetParent(element) {
+    return element.parent;
+}
+export function __InsertElementBefore(parent, child, ref) {
+    return parent.insertBefore(child, ref);
+}
+export function __LastElement(element) {
+    return element.lastElementChild;
+}
+export function __NextElement(element) {
+    return element.nextElementSibling;
+}
+export function __RemoveElement(parent, child) {
+    parent.removeChild(child);
+    return child;
+}
+export function __ReplaceElement(newElement, oldElement) {
+    oldElement.replaceWithElements([newElement]);
+}
+export function __ReplaceElements(parent, newChildren, oldChildren) {
+    newChildren = Array.isArray(newChildren) ? newChildren : [newChildren];
+    if (!oldChildren || (Array.isArray(oldChildren) && oldChildren?.length === 0)) {
+        parent.appendChild(newChildren);
+    }
+    else {
+        oldChildren = Array.isArray(oldChildren) ? oldChildren : [oldChildren];
+        for (let ii = 1; ii < oldChildren.length; ii++) {
+            __RemoveElement(parent, oldChildren[ii]);
+        }
+        const firstOldChildren = oldChildren[0];
+        firstOldChildren.replaceWithElements(newChildren);
+    }
+}
+export function __SwapElement(childA, childB) {
+    childA.swapWith(childB);
+}
+//# sourceMappingURL=domTreeFunctions.js.map

package/dist/elementAPI/elementCreating/elementCreatingFunctions.d.ts

@@ -0,0 +1,22 @@
+import { type PageConfig, type ElementOperation, type CssInJsInfo } from '@lynx-js/web-constants';
+import { type ComponentAtIndexCallback, type EnqueueComponentCallback, ListElement, ElementThreadElement } from '../ElementThreadElement.js';
+export interface initializeElementCreatingFunctionConfig {
+    operationsRef: {
+        operations: ElementOperation[];
+    };
+    pageConfig: PageConfig;
+    onNewTag: (tag: string) => void;
+    styleInfo: CssInJsInfo;
+}
+export declare function initializeElementCreatingFunction(config: initializeElementCreatingFunctionConfig): {
+    __CreateView: (parentComponentUniqueId: number) => ElementThreadElement;
+    __CreateText: (parentComponentUniqueId: number) => ElementThreadElement;
+    __CreateComponent: (componentParentUniqueID: number, componentID: string, cssID: number, entryName: string, name: string, path: string, config: Record<string, any> | null | undefined, info: Record<string, any> | null | undefined) => ElementThreadElement;
+    __CreatePage: (componentID: string, cssID: number, info: Record<string, any> | null | undefined) => ElementThreadElement;
+    __CreateRawText: (text: string) => ElementThreadElement;
+    __CreateImage: (parentComponentUniqueId: number) => ElementThreadElement;
+    __CreateScrollView: (parentComponentUniqueId: number) => ElementThreadElement;
+    __CreateElement: (tagName: string, parentComponentUniqueId: number, info?: object) => ElementThreadElement;
+    __CreateWrapperElement: (parentComponentUniqueId: number) => ElementThreadElement;
+    __CreateList: (parentComponentUniqueId: number, componentAtIndex: ComponentAtIndexCallback, enqueueComponent: EnqueueComponentCallback, info?: any) => ListElement;
+};

package/dist/elementAPI/elementCreating/elementCreatingFunctions.js

@@ -0,0 +1,98 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { cssIdAttribute, } from '@lynx-js/web-constants';
+import { __UpdateComponentID } from '../attributeAndProperty/attributeAndPropertyFunctions.js';
+import { ListElement, ElementThreadElement, } from '../ElementThreadElement.js';
+import { __SetCSSId } from '../style/styleFunctions.js';
+export function initializeElementCreatingFunction(config) {
+    let incrementalUniqueId = 0;
+    const tagSet = new Set();
+    const { operationsRef, pageConfig, styleInfo } = config;
+    function createLynxElement(tag, parentComponentUniqueId, cssId, componentId, 
+    // @ts-expect-error
+    info) {
+        if (!tagSet.has(tag)) {
+            config.onNewTag(tag);
+            tagSet.add(tag);
+        }
+        const uniqueId = incrementalUniqueId++;
+        const element = new (tag === 'list' ? ListElement : ElementThreadElement)(tag, uniqueId, parentComponentUniqueId, pageConfig, operationsRef, styleInfo);
+        if (cssId !== undefined)
+            __SetCSSId([element], cssId);
+        else if (parentComponentUniqueId >= 0) { // don't infer for uniqueid === -1
+            const parentComponent = ElementThreadElement.getElementByUniqueId(parentComponentUniqueId);
+            const parentCssId = parentComponent?.getAttribute(cssIdAttribute);
+            if (parentCssId && parentCssId !== '0') {
+                __SetCSSId([element], parentCssId);
+            }
+        }
+        if (componentId !== undefined) {
+            __UpdateComponentID(element, componentId);
+        }
+        return element;
+    }
+    function __CreateComponent(componentParentUniqueID, componentID, cssID, 
+    // @ts-expect-error
+    entryName, name, 
+    // @ts-expect-error
+    path, config, 
+    // @ts-expect-error
+    info) {
+        const element = createLynxElement('view', componentParentUniqueID, cssID, componentID, config);
+        element.setAttribute('name', name);
+        return element;
+    }
+    function __CreateElement(tagName, parentComponentUniqueId, info) {
+        return createLynxElement(tagName, parentComponentUniqueId, undefined, undefined, info);
+    }
+    function __CreatePage(componentID, cssID, info) {
+        const page = createLynxElement('page', 0, cssID, componentID, info);
+        page.parentComponentUniqueId = page.uniqueId;
+        return page;
+    }
+    function __CreateView(parentComponentUniqueId) {
+        const element = createLynxElement('view', parentComponentUniqueId);
+        return element;
+    }
+    function __CreateText(parentComponentUniqueId) {
+        const element = createLynxElement('text', parentComponentUniqueId);
+        return element;
+    }
+    function __CreateRawText(text) {
+        const element = createLynxElement('raw-text', -1);
+        element.setAttribute('text', text);
+        return element;
+    }
+    function __CreateImage(parentComponentUniqueId) {
+        const element = createLynxElement('image', parentComponentUniqueId);
+        return element;
+    }
+    function __CreateScrollView(parentComponentUniqueId) {
+        const element = createLynxElement('scroll-view', parentComponentUniqueId);
+        return element;
+    }
+    function __CreateWrapperElement(parentComponentUniqueId) {
+        const element = createLynxElement('lynx-wrapper', parentComponentUniqueId);
+        return element;
+    }
+    function __CreateList(parentComponentUniqueId, componentAtIndex, enqueueComponent, info) {
+        const element = createLynxElement('list', parentComponentUniqueId, undefined, undefined, info);
+        element.componentAtIndex = componentAtIndex;
+        element.enqueueComponent = enqueueComponent;
+        return element;
+    }
+    return {
+        __CreateView,
+        __CreateText,
+        __CreateComponent,
+        __CreatePage,
+        __CreateRawText,
+        __CreateImage,
+        __CreateScrollView,
+        __CreateElement,
+        __CreateWrapperElement,
+        __CreateList,
+    };
+}
+//# sourceMappingURL=elementCreatingFunctions.js.map

package/dist/elementAPI/event/eventFunctions.d.ts

@@ -0,0 +1,14 @@
+import type { LynxCrossThreadEvent, LynxEventType } from '@lynx-js/web-constants';
+import type { ElementThreadElement } from '../ElementThreadElement.js';
+export declare function __AddEvent(element: ElementThreadElement, eventType: LynxEventType, eventName: string, eventHandler: string | ((ev: LynxCrossThreadEvent) => void) | undefined): void;
+export declare function __GetEvent(element: ElementThreadElement, eventName: string, eventType: string): string | ((ev: LynxCrossThreadEvent) => void) | undefined;
+export declare function __GetEvents(element: ElementThreadElement): {
+    type: LynxEventType;
+    name: string;
+    function: string | ((ev: Event) => void) | undefined;
+}[];
+export declare function __SetEvents(element: ElementThreadElement, listeners: {
+    type: LynxEventType;
+    name: string;
+    function: string | ((ev: LynxCrossThreadEvent) => void) | undefined;
+}[]): void;

package/dist/elementAPI/event/eventFunctions.js

@@ -0,0 +1,31 @@
+export function __AddEvent(element, eventType, eventName, eventHandler) {
+    element.setEventHandler(eventName, eventHandler, eventType);
+}
+export function __GetEvent(element, eventName, eventType) {
+    const lynxEventName = eventName.toLowerCase();
+    const eventHandlerMap = element.eventHandlerMap;
+    const currentHandlerInfo = eventHandlerMap[lynxEventName];
+    if (currentHandlerInfo?.type === eventType) {
+        return currentHandlerInfo.handler;
+    }
+    return;
+}
+export function __GetEvents(element) {
+    const eventHandlerMap = element.eventHandlerMap;
+    return Object.entries(eventHandlerMap).map(([lynxEventName, info]) => {
+        if (info) {
+            return {
+                type: info.type,
+                function: info.handler,
+                name: lynxEventName,
+            };
+        }
+        return;
+    }).filter(e => e);
+}
+export function __SetEvents(element, listeners) {
+    for (const { type: eventType, name: lynxEventName, function: eventHandler } of listeners) {
+        __AddEvent(element, eventType, lynxEventName, eventHandler);
+    }
+}
+//# sourceMappingURL=eventFunctions.js.map

package/dist/elementAPI/style/cssPropertyMap.d.ts

@@ -0,0 +1,13 @@
+export declare function camelize(str: string): string;
+declare const cssPropertyMap: Record<number, {
+    name: string;
+    dashName: string;
+    defaultValue: string;
+}>;
+export declare function queryCSSProperty(index: number): {
+    name: string;
+    defaultValue: string;
+    dashName: string;
+};
+export declare function queryCSSPropertyNumber(name: string): number;
+export { cssPropertyMap };