@lynx-js/web-core 0.7.0

package/dist/uiThread/crossThreadHandlers/createUpdateData.js

@@ -0,0 +1,14 @@
+// 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 { updateDataEndpoint, } from '@lynx-js/web-constants';
+export function createUpdateData(mainThreadRpc, backgroundRpc) {
+    return (data, _updateDataType, callback) => {
+        Promise.all([
+            // There is no need to process options for now, as they have default values.
+            mainThreadRpc.invoke(updateDataEndpoint, [data, {}]),
+            backgroundRpc.invoke(updateDataEndpoint, [data, {}]),
+        ]).then(() => callback?.());
+    };
+}
+//# sourceMappingURL=createUpdateData.js.map

package/dist/uiThread/crossThreadHandlers/queryNodes.d.ts

@@ -0,0 +1,2 @@
+import { ErrorCode, IdentifierType } from '@lynx-js/web-constants';
+export declare function queryNodes(rootDom: Element, type: IdentifierType, identifier: string, component_id: string, first_only: boolean, root_unique_id: number | undefined, callback: (dom: Element) => void, error?: (code: ErrorCode) => void): void;

package/dist/uiThread/crossThreadHandlers/queryNodes.js

@@ -0,0 +1,65 @@
+// 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, ErrorCode, IdentifierType, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
+export function queryNodes(rootDom, type, identifier, component_id, first_only, root_unique_id, callback, error) {
+    let queryRoot = rootDom;
+    if (root_unique_id) {
+        const root = rootDom.querySelector(`[${lynxUniqueIdAttribute}="${root_unique_id}"]`);
+        if (root) {
+            queryRoot = root;
+        }
+        else {
+            console.error(`[lynx-web] cannot find dom for root_unique_id: ${root_unique_id}`);
+            error?.(ErrorCode.NODE_NOT_FOUND);
+            return;
+        }
+    }
+    else if (component_id) {
+        const root = rootDom.querySelector(`[${componentIdAttribute}="${component_id}"]`);
+        if (root) {
+            queryRoot = root;
+        }
+        else {
+            console.error(`[lynx-web] cannot find dom for component_id: ${component_id}`);
+            error?.(ErrorCode.NODE_NOT_FOUND);
+            return;
+        }
+    }
+    let selector;
+    if (type === IdentifierType.ID_SELECTOR) {
+        selector = identifier;
+    }
+    else if (type === IdentifierType.UNIQUE_ID) {
+        selector = `[${lynxUniqueIdAttribute}="${identifier}"]`;
+    }
+    else {
+        console.error(`[lynx-web] NYI: setnativeprops type ${type}`);
+        error?.(ErrorCode.UNKNOWN);
+        return;
+    }
+    if (first_only) {
+        let targetElement = null;
+        try {
+            targetElement = queryRoot.querySelector(selector);
+        }
+        catch (e) {
+            console.error(`[lynx-web] cannot use selector: ${selector}`);
+            error?.(ErrorCode.SELECTOR_NOT_SUPPORTED);
+            return;
+        }
+        if (targetElement) {
+            callback(targetElement);
+        }
+        else {
+            console.error(`[lynx-web] cannot find from for selector ${identifier} under`, queryRoot);
+            error?.(ErrorCode.NODE_NOT_FOUND);
+        }
+    }
+    else {
+        queryRoot.querySelectorAll(selector).forEach((element) => {
+            callback(element);
+        });
+    }
+}
+//# sourceMappingURL=queryNodes.js.map

package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.d.ts

@@ -0,0 +1,18 @@
+import { type PageConfig, type flushElementTreeEndpoint } from '@lynx-js/web-constants';
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+import type { RuntimePropertyOnElement } from '../../types/RuntimePropertyOnElement.js';
+export declare function registerFlushElementTreeHandler(mainThreadRpc: Rpc, endpoint: typeof flushElementTreeEndpoint, options: {
+    pageConfig: PageConfig;
+    overrideTagMap: Record<string, string>;
+    backgroundRpc: Rpc;
+    rootDom: HTMLElement;
+    entryId: string;
+    currentLoadingTags: Promise<void>[];
+}, onCommit: (info: {
+    pipelineId: string | undefined;
+    timingFlags: string[];
+    isFP: boolean;
+}) => void, markTimingInternal: (timingKey: string, pipelineId?: string, timeStamp?: number) => void): {
+    uniqueIdToElement: WeakRef<HTMLElement & RuntimePropertyOnElement>[];
+    uniqueIdToCssInJsRule: WeakRef<CSSStyleRule>[];
+};

package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.js

@@ -0,0 +1,116 @@
+// 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 { cardIdAttribute, componentIdAttribute, lynxDefaultDisplayLinearAttribute, lynxRuntimeValue, lynxTagAttribute, lynxUniqueIdAttribute, parentComponentUniqueIdAttribute, postMainThreadEvent, publicComponentEventEndpoint, publishEventEndpoint, } from '@lynx-js/web-constants';
+import { decodeElementOperation } from '../decodeElementOperation.js';
+import { getElementTag } from '../getElementTag.js';
+import { createCrossThreadEvent } from '../../utils/createCrossThreadEvent.js';
+import { isWebkit, supportAtScope } from '../../utils/browser.js';
+function applyPageAttributes(page, pageConfig, entryId) {
+    page.setAttribute(cardIdAttribute, entryId);
+    if (pageConfig.defaultDisplayLinear === false) {
+        page.setAttribute(lynxDefaultDisplayLinearAttribute, 'false');
+    }
+}
+export function registerFlushElementTreeHandler(mainThreadRpc, endpoint, options, onCommit, markTimingInternal) {
+    const { pageConfig, overrideTagMap, backgroundRpc, rootDom, entryId, currentLoadingTags, } = options;
+    const uniqueIdToElement = [];
+    const uniqueIdToCssInJsRule = [];
+    const rootStyleElementForCssInJs = document.createElement('style');
+    if (!pageConfig.enableCSSSelector) {
+        rootStyleElementForCssInJs.innerHTML = `/* enableCSSSelector: false */ ${supportAtScope && !isWebkit ? '@scope { :scope{} }' : ''}`;
+        // safari testing needs this :scope{} see: https://github.com/microsoft/playwright/issues/33647
+        // for 18.2 the :scope{} placeholder dose not work neither. we fired an issue for this https://bugs.webkit.org/show_bug.cgi?id=285130
+        rootDom.append(rootStyleElementForCssInJs);
+    }
+    // dom must connected to get the sheet property
+    const rootScopeRule = rootStyleElementForCssInJs?.sheet?.cssRules[0];
+    const createElementImpl = (tag) => {
+        const htmlTag = getElementTag(tag, overrideTagMap);
+        const element = document.createElement(htmlTag);
+        element[lynxRuntimeValue] = {
+            dataset: {},
+            eventHandler: {},
+        };
+        return element;
+    };
+    const createStyleRuleImpl = (uniqueId, initialStyle) => {
+        const commonStyleSheetText = `[${lynxUniqueIdAttribute}="${uniqueId.toString()}"]{${initialStyle}}`;
+        if (rootScopeRule) {
+            const idx = rootScopeRule.insertRule(commonStyleSheetText);
+            return rootScopeRule.cssRules[idx];
+        }
+        else {
+            const idx = rootStyleElementForCssInJs.sheet.insertRule(`[${cardIdAttribute}="${entryId}"] ${commonStyleSheetText}`);
+            return rootStyleElementForCssInJs.sheet.cssRules[idx];
+        }
+    };
+    const mtsHandler = (event) => {
+        const crossThreadEvent = createCrossThreadEvent(event);
+        mainThreadRpc.invoke(postMainThreadEvent, [crossThreadEvent]);
+    };
+    const btsHandler = (event) => {
+        const crossThreadEvent = createCrossThreadEvent(event);
+        const currentTarget = event.currentTarget;
+        const parentComponentUniqueId = currentTarget.getAttribute(parentComponentUniqueIdAttribute) ?? '0';
+        const componentTargetDom = rootDom.querySelector(`[${lynxUniqueIdAttribute}="${parentComponentUniqueId}"]`);
+        const componentId = componentTargetDom?.getAttribute(lynxTagAttribute) !== 'page'
+            ? componentTargetDom?.getAttribute(componentIdAttribute) ?? undefined
+            : undefined;
+        const hname = currentTarget[lynxRuntimeValue]
+            .eventHandler[crossThreadEvent.type].hname;
+        if (componentId) {
+            backgroundRpc.invoke(publicComponentEventEndpoint, [
+                componentId,
+                hname,
+                crossThreadEvent,
+            ]);
+        }
+        else {
+            backgroundRpc.invoke(publishEventEndpoint, [
+                hname,
+                crossThreadEvent,
+            ]);
+        }
+    };
+    mainThreadRpc.registerHandler(endpoint, (operations, options, cardCss) => {
+        const { pipelineOptions } = options;
+        const pipelineId = pipelineOptions?.pipelineID;
+        const timingFlags = [];
+        markTimingInternal('dispatch_start', pipelineId);
+        Promise.all(currentLoadingTags).then(() => {
+            markTimingInternal('layout_start', pipelineId);
+            markTimingInternal('ui_operation_flush_start', pipelineId);
+            const page = decodeElementOperation(operations, {
+                timingFlags,
+                uniqueIdToElement,
+                uniqueIdToCssInJsRule,
+                createElementImpl,
+                createStyleRuleImpl,
+                eventHandler: {
+                    mtsHandler,
+                    btsHandler,
+                },
+            });
+            markTimingInternal('ui_operation_flush_end', pipelineId);
+            const isFP = !!page;
+            if (isFP) {
+                // on FP
+                const styleElement = document.createElement('style');
+                styleElement.innerHTML = cardCss;
+                rootDom.append(styleElement);
+                rootDom.append(page);
+                applyPageAttributes(page, pageConfig, entryId);
+            }
+            markTimingInternal('layout_end', pipelineId);
+            markTimingInternal('dispatch_end', pipelineId);
+            onCommit({
+                pipelineId,
+                timingFlags,
+                isFP,
+            });
+        });
+    });
+    return { uniqueIdToElement, uniqueIdToCssInJsRule };
+}
+//# sourceMappingURL=registerFlushElementTreeHandler.js.map

package/dist/uiThread/crossThreadHandlers/registerInvokeUIMethodHandler.d.ts

@@ -0,0 +1,2 @@
+import { Rpc } from '@lynx-js/web-worker-rpc';
+export declare function registerInvokeUIMethodHandler(rpc: Rpc, rootDom: Element): void;

package/dist/uiThread/crossThreadHandlers/registerInvokeUIMethodHandler.js

@@ -0,0 +1,51 @@
+import { Rpc } from '@lynx-js/web-worker-rpc';
+import { queryNodes } from './queryNodes.js';
+import { ErrorCode, lynxRuntimeValue, invokeUIMethodEndpoint, } from '@lynx-js/web-constants';
+const methodAlias = {
+    'boundingClientRect': (element) => {
+        const rect = element.getBoundingClientRect();
+        return {
+            id: element.id,
+            dataset: element[lynxRuntimeValue]
+                .dataset,
+            width: rect.width,
+            height: rect.height,
+            left: rect.left,
+            right: rect.right,
+            top: rect.top,
+            bottom: rect.bottom,
+        };
+    },
+};
+export function registerInvokeUIMethodHandler(rpc, rootDom) {
+    let code = ErrorCode.UNKNOWN;
+    let data = undefined;
+    rpc.registerHandler(invokeUIMethodEndpoint, (type, identifier, component_id, method, params, root_unique_id) => {
+        queryNodes(rootDom, type, identifier, component_id, true, root_unique_id, (element) => {
+            try {
+                const aliasMethod = methodAlias[method];
+                const hasDomMethod = typeof element[method] === 'function';
+                if (!aliasMethod && !hasDomMethod) {
+                    code = ErrorCode.METHOD_NOT_FOUND;
+                }
+                else {
+                    if (aliasMethod) {
+                        data = aliasMethod(element, params);
+                    }
+                    else {
+                        data = element[method](params);
+                    }
+                    code = ErrorCode.SUCCESS;
+                }
+            }
+            catch (e) {
+                console.error(`[lynx-web] invokeUIMethod: apply method faild with`, e, element);
+                code = ErrorCode.PARAM_INVALID;
+            }
+        }, (error) => {
+            code = error;
+        });
+        return { code, data };
+    });
+}
+//# sourceMappingURL=registerInvokeUIMethodHandler.js.map

package/dist/uiThread/crossThreadHandlers/registerLoadNewTagHandler.d.ts

@@ -0,0 +1,3 @@
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+import type { loadNewTagEndpoint } from '@lynx-js/web-constants';
+export declare function registerLoadNewTagHandler(rpc: Rpc, endpoint: typeof loadNewTagEndpoint, loadTag: (tag: string) => void, tagMap: Record<string, string>, currentLoadingTags: Promise<any>[]): void;

package/dist/uiThread/crossThreadHandlers/registerLoadNewTagHandler.js

@@ -0,0 +1,7 @@
+import { getElementTag } from '../getElementTag.js';
+export function registerLoadNewTagHandler(rpc, endpoint, loadTag, tagMap, currentLoadingTags) {
+    rpc.registerHandler(endpoint, (tag) => {
+        loadTag(getElementTag(tag, tagMap, currentLoadingTags));
+    });
+}
+//# sourceMappingURL=registerLoadNewTagHandler.js.map

package/dist/uiThread/crossThreadHandlers/registerNativeModulesCallHandler.d.ts

@@ -0,0 +1,3 @@
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+import { type NativeModulesCall } from '@lynx-js/web-constants';
+export declare function registerNativeModulesCallHandler(rpc: Rpc, nativeModulesCall: NativeModulesCall): void;

package/dist/uiThread/crossThreadHandlers/registerNativeModulesCallHandler.js

@@ -0,0 +1,5 @@
+import { nativeModulesCallEndpoint, } from '@lynx-js/web-constants';
+export function registerNativeModulesCallHandler(rpc, nativeModulesCall) {
+    rpc.registerHandler(nativeModulesCallEndpoint, nativeModulesCall);
+}
+//# sourceMappingURL=registerNativeModulesCallHandler.js.map

package/dist/uiThread/crossThreadHandlers/registerReportErrorHandler.d.ts

@@ -0,0 +1,2 @@
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+export declare function registerReportErrorHandler(rpc: Rpc, onError?: (e: string) => void): void;

package/dist/uiThread/crossThreadHandlers/registerReportErrorHandler.js

@@ -0,0 +1,10 @@
+// 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 { reportErrorEndpoint } from '@lynx-js/web-constants';
+export function registerReportErrorHandler(rpc, onError) {
+    rpc.registerHandler(reportErrorEndpoint, (e) => {
+        onError?.(e);
+    });
+}
+//# sourceMappingURL=registerReportErrorHandler.js.map

package/dist/uiThread/crossThreadHandlers/registerSelectComponentHandler.d.ts

@@ -0,0 +1,2 @@
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+export declare function registerSelectComponentHandler(rpc: Rpc, rootDom: Element): void;

package/dist/uiThread/crossThreadHandlers/registerSelectComponentHandler.js

@@ -0,0 +1,15 @@
+// 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, IdentifierType, selectComponentEndpoint, } from '@lynx-js/web-constants';
+import { queryNodes } from './queryNodes.js';
+export function registerSelectComponentHandler(rpc, rootDom) {
+    let element;
+    rpc.registerHandler(selectComponentEndpoint, (componentId, idSelector, single) => {
+        queryNodes(rootDom, IdentifierType.ID_SELECTOR, idSelector, componentId === 'card' ? '0' : componentId, single, undefined, (ele) => {
+            element = ele;
+        });
+        return [element?.getAttribute(componentIdAttribute) ?? undefined];
+    });
+}
+//# sourceMappingURL=registerSelectComponentHandler.js.map

package/dist/uiThread/crossThreadHandlers/registerSetNativePropsHandler.d.ts

@@ -0,0 +1,2 @@
+import { Rpc } from '@lynx-js/web-worker-rpc';
+export declare function registerNativePropsHandler(rpc: Rpc, rootDom: Element): void;

package/dist/uiThread/crossThreadHandlers/registerSetNativePropsHandler.js

@@ -0,0 +1,32 @@
+// 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 { Rpc } from '@lynx-js/web-worker-rpc';
+import { queryNodes } from './queryNodes.js';
+import { setNativePropsEndpoint } from '@lynx-js/web-constants';
+function applyNativeProps(element, nativeProps) {
+    for (const key in nativeProps) {
+        const value = nativeProps[key];
+        if (key === 'text' && element?.tagName === 'X-TEXT') {
+            if (element.firstElementChild
+                && element.firstElementChild.tagName == 'RAW-TEXT') {
+                element = element.firstElementChild;
+            }
+        }
+        if (CSS.supports(key, value)
+            && element.style) {
+            element.style.setProperty(key, value);
+        }
+        else {
+            element.setAttribute(key, value);
+        }
+    }
+}
+export function registerNativePropsHandler(rpc, rootDom) {
+    rpc.registerHandler(setNativePropsEndpoint, (type, identifier, component_id, first_only, native_props, root_unique_id) => {
+        queryNodes(rootDom, type, identifier, component_id, first_only, root_unique_id, (element) => {
+            applyNativeProps(element, native_props);
+        });
+    });
+}
+//# sourceMappingURL=registerSetNativePropsHandler.js.map

package/dist/uiThread/crossThreadHandlers/registerTriggerComponentEventHandler.d.ts

@@ -0,0 +1,2 @@
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+export declare function registerTriggerComponentEventHandler(rpc: Rpc, rootDom: Element): void;

package/dist/uiThread/crossThreadHandlers/registerTriggerComponentEventHandler.js

@@ -0,0 +1,14 @@
+// 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, triggerComponentEventEndpoint, } from '@lynx-js/web-constants';
+export function registerTriggerComponentEventHandler(rpc, rootDom) {
+    rpc.registerHandler(triggerComponentEventEndpoint, (id, params) => {
+        const componentDom = rootDom.querySelector(`[${componentIdAttribute}="${params.componentId}"]`);
+        componentDom?.dispatchEvent(new CustomEvent(id, {
+            ...params.eventOption,
+            detail: params.eventDetail,
+        }));
+    });
+}
+//# sourceMappingURL=registerTriggerComponentEventHandler.js.map

package/dist/uiThread/decodeElementOperation.d.ts

@@ -0,0 +1,13 @@
+import type { ElementOperation } from '@lynx-js/web-constants';
+import type { RuntimePropertyOnElement } from '../types/RuntimePropertyOnElement.js';
+export declare function decodeElementOperation<T extends HTMLElement & RuntimePropertyOnElement>(operations: ElementOperation[], options: {
+    timingFlags: string[];
+    uniqueIdToElement: (WeakRef<T> | undefined)[];
+    uniqueIdToCssInJsRule: (WeakRef<CSSStyleRule> | undefined)[];
+    createElementImpl: (tag: string) => T;
+    createStyleRuleImpl: (uniqueId: number, initialStyle: string) => CSSStyleRule;
+    eventHandler: {
+        mtsHandler: (event: Event) => void;
+        btsHandler: (event: Event) => void;
+    };
+}): T | undefined;

package/dist/uiThread/decodeElementOperation.js

@@ -0,0 +1,183 @@
+// 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, lynxTagAttribute, lynxUniqueIdAttribute, OperationType, lynxRuntimeValue, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, W3cEventNameToLynx, parentComponentUniqueIdAttribute, __lynx_timing_flag, } from '@lynx-js/web-constants';
+function getElement(uniqueId, uniqueIdToElement) {
+    const element = uniqueIdToElement[uniqueId]?.deref();
+    if (element) {
+        return element;
+    }
+    else {
+        throw new Error(`[lynx-web] cannot find element with uniqueId: ${uniqueId}`);
+    }
+}
+function createElement(tag, uniqueId, uniqueIdToElement, createElementImpl) {
+    const current = uniqueIdToElement[uniqueId]?.deref();
+    if (current) {
+        throw new Error(`[lynx-web] uniqueid is occupied: cannot create new element ${tag} with uniqueId: ${uniqueId}`);
+    }
+    const element = createElementImpl(tag);
+    element.setAttribute(lynxUniqueIdAttribute, uniqueId.toString());
+    element.setAttribute(lynxTagAttribute, tag);
+    uniqueIdToElement[uniqueId] = new WeakRef(element);
+    return element;
+}
+function handleHtmlEvent(event) {
+    const currentTarget = event.currentTarget;
+    if (!currentTarget)
+        return;
+    const { eventHandler, } = currentTarget[lynxRuntimeValue];
+    const lynxEventName = W3cEventNameToLynx[event.type] ?? event.type;
+    const eventHandlerInfo = eventHandler[lynxEventName];
+    if (eventHandlerInfo) {
+        const { type: eventType, handler } = eventHandlerInfo;
+        const isCatch = eventType === 'catchEvent' || eventType === 'capture-catch';
+        handler(event);
+        if (isCatch) {
+            event.stopPropagation();
+        }
+    }
+}
+export function decodeElementOperation(operations, options) {
+    const { uniqueIdToElement, uniqueIdToCssInJsRule, createElementImpl, createStyleRuleImpl, eventHandler, timingFlags, } = options;
+    let pageElement;
+    for (const op of operations) {
+        if (op.type === OperationType.Create) {
+            const element = createElement(op.tag, op.uid, uniqueIdToElement, createElementImpl);
+            if (typeof op.cssId === 'number') {
+                element.setAttribute(cssIdAttribute, op.cssId.toString());
+            }
+            if (op.puid) {
+                element.setAttribute(parentComponentUniqueIdAttribute, op.puid);
+            }
+            if (op.tag === 'page')
+                pageElement = element;
+        }
+        else {
+            const target = getElement(op.uid, uniqueIdToElement);
+            switch (op.type) {
+                case OperationType.Append:
+                    {
+                        const children = op.cid.map(id => getElement(id, uniqueIdToElement));
+                        target.append(...children);
+                    }
+                    break;
+                case OperationType.InsertBefore:
+                    {
+                        const child = getElement(op.cid, uniqueIdToElement);
+                        const ref = op.ref ? getElement(op.ref, uniqueIdToElement) : null;
+                        target.insertBefore(child, ref);
+                    }
+                    break;
+                case OperationType.Remove:
+                    {
+                        for (const kidId of op.cid) {
+                            const kid = getElement(kidId, uniqueIdToElement);
+                            target.removeChild(kid);
+                        }
+                    }
+                    break;
+                case OperationType.Replace:
+                    {
+                        const newElements = op.nid.map(id => getElement(id, uniqueIdToElement));
+                        target.replaceWith(...newElements);
+                    }
+                    break;
+                case OperationType.SetAttribute:
+                    {
+                        if (op.value === null) {
+                            target.removeAttribute(op.key);
+                        }
+                        else {
+                            target.setAttribute(op.key, op.value);
+                            if (op.value && op.key === __lynx_timing_flag) {
+                                timingFlags.push(op.value);
+                            }
+                        }
+                    }
+                    break;
+                case OperationType.SwapElement:
+                    {
+                        const targetB = getElement(op.tid, uniqueIdToElement);
+                        const temp = document.createElement('div');
+                        target.replaceWith(temp);
+                        targetB.replaceWith(target);
+                        temp.replaceWith(targetB);
+                    }
+                    break;
+                case OperationType.SetProperty:
+                    target[lynxRuntimeValue][op.key] = op.value;
+                    if (op.key === 'dataset') {
+                        if (op.value) {
+                            for (const [key, value] of Object.entries(op.value)) {
+                                if (value) {
+                                    target.setAttribute(`data-${key}`, value.toString());
+                                }
+                                else {
+                                    target.removeAttribute(`data-${key}`);
+                                }
+                            }
+                        }
+                        else {
+                            target[lynxRuntimeValue]['dataset'] = {};
+                        }
+                    }
+                    break;
+                case OperationType.SetDatasetProperty:
+                    target[lynxRuntimeValue].dataset[op.key] = op.value;
+                    if (op.value) {
+                        target.setAttribute(`data-${op.key}`, op.value.toString());
+                    }
+                    else {
+                        target.removeAttribute(`data-${op.key}`);
+                    }
+                    break;
+                case OperationType.RegisterEventHandler:
+                    const isMtsHandler = op.hname === null;
+                    const lynxEventName = op.ename.toLowerCase();
+                    const htmlEventName = LynxEventNameToW3cByTagName[target.tagName]?.[lynxEventName]
+                        ?? LynxEventNameToW3cCommon[lynxEventName] ?? lynxEventName;
+                    const currentHandlerInfo = target[lynxRuntimeValue].eventHandler[lynxEventName];
+                    if (currentHandlerInfo) {
+                        target.removeEventListener(htmlEventName, handleHtmlEvent);
+                    }
+                    const isCaptureEvent = op.eventType === 'capture-bind'
+                        || op.eventType === 'capture-catch';
+                    if (op.hname === undefined) {
+                        target.removeAttribute(`x-enable-${lynxEventName}-event`);
+                        target[lynxRuntimeValue].eventHandler[lynxEventName] = undefined;
+                    }
+                    else {
+                        target.setAttribute(`x-enable-${lynxEventName}-event`, '');
+                        target.addEventListener(htmlEventName, handleHtmlEvent, {
+                            passive: true,
+                            capture: isCaptureEvent,
+                        });
+                        target[lynxRuntimeValue].eventHandler[lynxEventName] = {
+                            type: op.eventType,
+                            handler: isMtsHandler
+                                ? eventHandler.mtsHandler
+                                : eventHandler.btsHandler,
+                            hname: op.hname ?? '',
+                        };
+                    }
+                    break;
+                case OperationType.SetStyleProperty:
+                    target.style.setProperty(op.key, op.value, op.im ? '!important' : undefined);
+                    break;
+                case OperationType.UpdateCssInJs:
+                    let rule = uniqueIdToCssInJsRule[op.uid]?.deref();
+                    if (rule) {
+                        rule.style.cssText = op.classStyleStr;
+                    }
+                    else {
+                        rule = createStyleRuleImpl(op.uid, op.classStyleStr);
+                        uniqueIdToCssInJsRule[op.uid] = new WeakRef(rule);
+                    }
+                    break;
+            }
+        }
+    }
+    return pageElement;
+}
+//# sourceMappingURL=decodeElementOperation.js.map

package/dist/uiThread/getElementTag.d.ts

@@ -0,0 +1 @@
+export declare function getElementTag(tag: string, tagMap: Record<string, string>, currentLoadingTags?: Promise<any>[]): string;

package/dist/uiThread/getElementTag.js

@@ -0,0 +1,20 @@
+// 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 getElementTag(tag, tagMap, currentLoadingTags) {
+    if (tagMap[tag]) {
+        return tagMap[tag];
+    }
+    if (customElements.get(tag)) {
+        tagMap[tag] = tag;
+        return tag;
+    }
+    const normizedTag = tag.includes('-') ? tag : `x-${tag}`;
+    if (customElements.get(normizedTag)) {
+        tagMap[tag] = normizedTag;
+        return normizedTag;
+    }
+    currentLoadingTags?.push(customElements.whenDefined(normizedTag));
+    return normizedTag;
+}
+//# sourceMappingURL=getElementTag.js.map

package/dist/uiThread/startUIThread.d.ts

@@ -0,0 +1,7 @@
+import type { LynxView } from '../apis/createLynxView.js';
+import { type MainThreadStartConfigs, type NativeModulesCall } from '@lynx-js/web-constants';
+export declare function startUIThread(templateUrl: string, configs: Omit<MainThreadStartConfigs, 'template'>, rootDom: HTMLElement, callbacks: {
+    loadNewTag?: (tag: string) => void;
+    nativeModulesCall: NativeModulesCall;
+    onError?: () => void;
+}, overrideTagMap: Record<string, string> | undefined, nativeModulesUrl: string | undefined): LynxView;