@lynx-js/web-core 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @lynx-js/web-core
 
+## 0.10.0
+
+### Minor Changes
+
+- feat: rewrite the main thread Element PAPIs ([#343](https://github.com/lynx-family/lynx-stack/pull/343))
+
+  In this commit we've rewritten the main thread apis.
+
+  The most highlighted change is that
+
+  - Before this commit we send events directly to bts
+  - After this change, we send events to mts then send them to bts with some data combined.
+
+### Patch Changes
+
+- refactor: timing system ([#378](https://github.com/lynx-family/lynx-stack/pull/378))
+
+  Now we moved the timing system to the background thread.
+
+- feat: support `defaultOverflowVisible` config ([#406](https://github.com/lynx-family/lynx-stack/pull/406))
+
+- fix(web): rsbuild will bundle 2 exactly same chunk for two same `new Worker` stmt ([#372](https://github.com/lynx-family/lynx-stack/pull/372))
+
+  the bundle size will be optimized about 28.2KB
+
+- fix: inline style will be removed for value number `0` ([#368](https://github.com/lynx-family/lynx-stack/pull/368))
+
+  the inline style value could be incorrectly removed for number value `0`;
+
+  For example, `flex-shrink:0` may be ignored.
+
+- feat: The onNapiModulesCall function of lynx-view provides the fourth parameter: `lynxView`, which is the actual lynx-view DOM. ([#350](https://github.com/lynx-family/lynx-stack/pull/350))
+
+- fix: publicComponentEvent args order ([#401](https://github.com/lynx-family/lynx-stack/pull/401))
+
+- Updated dependencies [[`3a8dabd`](https://github.com/lynx-family/lynx-stack/commit/3a8dabd877084c15db1404c912dd8a19c7a0fc59), [`a521759`](https://github.com/lynx-family/lynx-stack/commit/a5217592f5aebea4b17860e729d523ecabb5f691), [`890c6c5`](https://github.com/lynx-family/lynx-stack/commit/890c6c51470c82104abb1049681f55e5d97cf9d6)]:
+  - @lynx-js/web-worker-runtime@0.10.0
+  - @lynx-js/web-constants@0.10.0
+  - @lynx-js/web-worker-rpc@0.10.0
+
+## 0.9.1
+
+### Patch Changes
+
+- feat: remove extra div #lynx-view-root ([#311](https://github.com/lynx-family/lynx-stack/pull/311))
+
+  In this commit we've re-implemented the lynx-view's auto-size. Now we use the `contain:content` instead of `resizeObserver`.
+
+- Updated dependencies []:
+  - @lynx-js/web-constants@0.9.1
+  - @lynx-js/web-worker-rpc@0.9.1
+  - @lynx-js/web-worker-runtime@0.9.1
+
 ## 0.9.0
 
 ### Minor Changes

package/README.md

@@ -10,8 +10,24 @@ import '@lynx-js/web-core/index.css';
 
 document.body.innerHTML = `
 <lynx-view 
-    style="height:100vh; width:100vw;" 
-    url="http://localhost:3000/main/main-thread.js"
+  style="height:100vh; width:100vw;" 
+  url="http://localhost:3000/main/main-thread.js"
+>
+</lynx-view>`;
+```
+
+If you use Lynx elements (view, text, image, etc.), you need to import `@lynx-js/web-elements`:
+
+```javascript
+import '@lynx-js/web-core';
+import '@lynx-js/web-core/index.css';
+import '@lynx-js/web-elements/all';
+import '@lynx-js/web-elements/index.css';
+
+document.body.innerHTML = `
+<lynx-view 
+  style="height:100vh; width:100vw;" 
+  url="http://localhost:3000/main/main-thread.js"
 >
 </lynx-view>`;
 ```

package/dist/apis/LynxView.d.ts

@@ -1,4 +1,11 @@
 import { type Cloneable, type NapiModulesCall, type NapiModulesMap, type NativeModulesCall, type NativeModulesMap, type UpdateDataType } from '@lynx-js/web-constants';
+export type INapiModulesCall = (name: string, data: any, moduleName: string, lynxView: LynxView) => Promise<{
+    data: unknown;
+    transfer?: Transferable[];
+}> | {
+    data: unknown;
+    transfer?: Transferable[];
+} | undefined;
 /**
  * Based on our experiences, these elements are almost used in all lynx cards.
  */
@@ -12,7 +19,7 @@ import { type Cloneable, type NapiModulesCall, type NapiModulesMap, type NativeM
  * @param {"auto" | null} height [optional] set it to "auto" for height auto-sizing
  * @param {"auto" | null} width [optional] set it to "auto" for width auto-sizing
  * @param {NapiModulesMap} napiModulesMap [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
- * @param {NapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
+ * @param {INapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
  * @param {"false" | "true" | null} injectHeadLinks [optional] @default true set it to "false" to disable injecting the <link href="" ref="stylesheet"> styles into shadowroot
  *
  * @event error lynx card fired an error
@@ -95,19 +102,7 @@ export declare class LynxView extends HTMLElement {
      * @property
      */
     get onNapiModulesCall(): NapiModulesCall | undefined;
-    set onNapiModulesCall(handler: NapiModulesCall);
-    /**
-     * @public
-     * "auto" for auto calculated height
-     */
-    get height(): string | null;
-    /**
-     * @public
-     * "auto" for auto calculated width
-     */
-    get width(): string | null;
-    set height(val: string | null);
-    set width(val: string | null);
+    set onNapiModulesCall(handler: INapiModulesCall);
     /**
      * @public
      * @method
@@ -145,5 +140,4 @@ export declare class LynxView extends HTMLElement {
      * @private
      */
     connectedCallback(): void;
-    private cleanupResizeObserver;
 }

package/dist/apis/LynxView.js

@@ -2,7 +2,7 @@
 // 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 { createLynxView, } from './createLynxView.js';
-import { lynxViewRootDomId, } from '@lynx-js/web-constants';
+import {} from '@lynx-js/web-constants';
 import { inShadowRootStyles } from './inShadowRootStyles.js';
 /**
  * Based on our experiences, these elements are almost used in all lynx cards.
@@ -17,7 +17,7 @@ import { inShadowRootStyles } from './inShadowRootStyles.js';
  * @param {"auto" | null} height [optional] set it to "auto" for height auto-sizing
  * @param {"auto" | null} width [optional] set it to "auto" for width auto-sizing
  * @param {NapiModulesMap} napiModulesMap [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
- * @param {NapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
+ * @param {INapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
  * @param {"false" | "true" | null} injectHeadLinks [optional] @default true set it to "false" to disable injecting the <link href="" ref="stylesheet"> styles into shadowroot
  *
  * @event error lynx card fired an error
@@ -167,75 +167,9 @@ export class LynxView extends HTMLElement {
         return this.#onNapiModulesCall;
     }
     set onNapiModulesCall(handler) {
-        this.#onNapiModulesCall = handler;
-    }
-    #autoHeight = false;
-    #autoWidth = false;
-    #currentWidth = 0;
-    #currentHeight = 0;
-    /**
-     * @public
-     * "auto" for auto calculated height
-     */
-    get height() {
-        return this.#autoHeight ? 'auto' : null;
-    }
-    /**
-     * @public
-     * "auto" for auto calculated width
-     */
-    get width() {
-        return this.#autoWidth ? 'auto' : null;
-    }
-    set height(val) {
-        this.#handleAutoSize();
-        this.#autoHeight = val === 'auto' ? true : false;
-    }
-    set width(val) {
-        this.#handleAutoSize();
-        this.#autoWidth = val === 'auto' ? true : false;
-    }
-    #handleAutoSize() {
-        if (this.#autoHeight || this.#autoWidth) {
-            if (this.#instance && !this.#instance.resizeObserver) {
-                this.#instance.resizeObserver = new ResizeObserver((sizes) => {
-                    const size = sizes[0];
-                    if (size) {
-                        const { width, height } = size.contentRect;
-                        if (this.#autoWidth) {
-                            if (this.#currentWidth !== width) {
-                                this.#currentWidth = width;
-                                this.style.setProperty('--lynx-view-width', `${width}px`);
-                            }
-                        }
-                        if (this.#autoHeight) {
-                            if (this.#currentHeight !== height) {
-                                this.#currentHeight = height;
-                                this.style.setProperty('--lynx-view-height', `${height}px`);
-                            }
-                        }
-                    }
-                });
-                this.#instance.resizeObserver.observe(this.#instance.rootDom);
-            }
-        }
-        else {
-            if (this.#instance?.resizeObserver) {
-                this.#instance.resizeObserver.disconnect();
-            }
-        }
-        if (this.#autoHeight) {
-            this.setAttribute('height', 'auto');
-        }
-        else {
-            this.removeAttribute('height');
-        }
-        if (this.#autoWidth) {
-            this.setAttribute('width', 'auto');
-        }
-        else {
-            this.removeAttribute('width');
-        }
+        this.#onNapiModulesCall = (name, data, moduleName) => {
+            return handler(name, data, moduleName, this);
+        };
     }
     /**
      * @public
@@ -243,7 +177,7 @@ export class LynxView extends HTMLElement {
      * update the `__initData` and trigger essential flow
      */
     updateData(data, updateDataType, callback) {
-        this.#instance?.lynxView.updateData(data, updateDataType, callback);
+        this.#instance?.updateData(data, updateDataType, callback);
     }
     /**
      * @public
@@ -251,7 +185,7 @@ export class LynxView extends HTMLElement {
      * send global events, which can be listened to using the GlobalEventEmitter
      */
     sendGlobalEvent(eventName, params) {
-        this.#instance?.lynxView.sendGlobalEvent(eventName, params);
+        this.#instance?.sendGlobalEvent(eventName, params);
     }
     /**
      * @public
@@ -291,11 +225,7 @@ export class LynxView extends HTMLElement {
      * @private
      */
     disconnectedCallback() {
-        this.cleanupResizeObserver();
-        if (this.#instance) {
-            this.#instance.lynxView.dispose();
-            this.#instance.rootDom.remove();
-        }
+        this.#instance?.dispose();
         this.#instance = undefined;
         if (this.shadowRoot) {
             this.shadowRoot.innerHTML = '';
@@ -317,9 +247,6 @@ export class LynxView extends HTMLElement {
                     this.disconnectedCallback();
                 }
                 if (this.#url) {
-                    const rootDom = document.createElement('div');
-                    rootDom.id = lynxViewRootDomId;
-                    rootDom.setAttribute('part', lynxViewRootDomId);
                     const tagMap = {
                         'page': 'div',
                         'view': 'x-view',
@@ -329,9 +256,12 @@ export class LynxView extends HTMLElement {
                         'svg': 'x-svg',
                         ...this.overrideLynxTagToHTMLTagMap,
                     };
+                    if (!this.shadowRoot) {
+                        this.attachShadow({ mode: 'open' });
+                    }
                     const lynxView = createLynxView({
                         tagMap,
-                        rootDom,
+                        shadowRoot: this.shadowRoot,
                         templateUrl: this.#url,
                         globalProps: this.#globalProps,
                         initData: this.#initData,
@@ -357,18 +287,13 @@ export class LynxView extends HTMLElement {
                             },
                         },
                     });
-                    this.#instance = {
-                        lynxView,
-                        rootDom,
-                    };
-                    this.#handleAutoSize();
-                    if (!this.shadowRoot) {
-                        this.attachShadow({ mode: 'open' });
-                    }
+                    this.#instance = lynxView;
                     const styleElement = document.createElement('style');
                     this.shadowRoot.append(styleElement);
                     const styleSheet = styleElement.sheet;
-                    styleSheet.insertRule(inShadowRootStyles);
+                    for (const rule of inShadowRootStyles) {
+                        styleSheet.insertRule(rule);
+                    }
                     const injectHeadLinks = this.getAttribute('inject-head-links') !== 'false';
                     if (injectHeadLinks) {
                         document.head.querySelectorAll('link[rel="stylesheet"]').forEach((linkElement) => {
@@ -376,7 +301,6 @@ export class LynxView extends HTMLElement {
                             styleSheet.insertRule(`@import url("${href}");`);
                         });
                     }
-                    this.shadowRoot.append(rootDom);
                 }
             });
         }
@@ -387,12 +311,6 @@ export class LynxView extends HTMLElement {
     connectedCallback() {
         this.#render();
     }
-    cleanupResizeObserver() {
-        if (this.#instance?.resizeObserver) {
-            this.#instance.resizeObserver.disconnect();
-            this.#instance.resizeObserver = undefined;
-        }
-    }
 }
 if (customElements.get(LynxView.tag)) {
     console.warn(`[${LynxView.tag}] has already been defined`);

package/dist/apis/createLynxView.d.ts

@@ -5,7 +5,7 @@ export interface LynxViewConfigs {
     templateUrl: string;
     initData: Cloneable;
     globalProps: Cloneable;
-    rootDom: HTMLElement;
+    shadowRoot: ShadowRoot;
     callbacks: Parameters<typeof startUIThread>[3];
     nativeModulesMap: NativeModulesMap;
     napiModulesMap: NapiModulesMap;

package/dist/apis/createLynxView.js

@@ -3,7 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 import { startUIThread } from '../uiThread/startUIThread.js';
 export function createLynxView(configs) {
-    const { rootDom, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, } = configs;
+    const { shadowRoot, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, } = configs;
     return startUIThread(templateUrl, {
         tagMap,
         initData,
@@ -11,6 +11,6 @@ export function createLynxView(configs) {
         nativeModulesMap,
         napiModulesMap,
         browserConfig: {},
-    }, rootDom, callbacks);
+    }, shadowRoot, callbacks);
 }
 //# sourceMappingURL=createLynxView.js.map

package/dist/apis/inShadowRootStyles.d.ts

@@ -1 +1 @@
-export declare const inShadowRootStyles = "\n[lynx-default-display-linear=\"false\"] * {\n  --lynx-display: flex;\n  --lynx-display-toggle: var(--lynx-display-flex);\n}\n";
+export declare const inShadowRootStyles: string[];

package/dist/apis/inShadowRootStyles.js

@@ -1,7 +1,10 @@
-export const inShadowRootStyles = `
-[lynx-default-display-linear="false"] * {
-  --lynx-display: flex;
-  --lynx-display-toggle: var(--lynx-display-flex);
-}
-`;
+export const inShadowRootStyles = [
+    ` [lynx-default-display-linear="false"] * {
+    --lynx-display: flex;
+    --lynx-display-toggle: var(--lynx-display-flex);
+  }`,
+    `[lynx-default-overflow-visible="true"] x-view{
+    overflow: visible;
+  }`,
+];
 //# sourceMappingURL=inShadowRootStyles.js.map

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 export { createLynxView } from './apis/createLynxView.js';
 export { LynxView } from './apis/LynxView.js';
-export { lynxRuntimeValue } from '@lynx-js/web-constants';

package/dist/index.js

@@ -3,5 +3,4 @@
 // LICENSE file in the root directory of this source tree.
 export { createLynxView } from './apis/createLynxView.js';
 export { LynxView } from './apis/LynxView.js';
-export { lynxRuntimeValue } from '@lynx-js/web-constants';
 //# sourceMappingURL=index.js.map

package/dist/uiThread/bootWorkers.js

@@ -19,10 +19,7 @@ export function bootWorkers() {
 function createMainWorker() {
     const channelToMainThread = new MessageChannel();
     const channelMainThreadWithBackground = new MessageChannel();
-    const mainThreadWorker = new Worker(new URL('@lynx-js/web-worker-runtime', import.meta.url), {
-        type: 'module',
-        name: `lynx-main`,
-    });
+    const mainThreadWorker = createWebWorker();
     const mainThreadMessage = {
         mode: 'main',
         toUIThread: channelToMainThread.port2,
@@ -42,10 +39,7 @@ function createMainWorker() {
 }
 function createBackgroundWorker(channelMainThreadWithBackground) {
     const channelToBackground = new MessageChannel();
-    const backgroundThreadWorker = new Worker(new URL('@lynx-js/web-worker-runtime', import.meta.url), {
-        type: 'module',
-        name: `lynx-bg`,
-    });
+    const backgroundThreadWorker = createWebWorker();
     const backgroundThreadMessage = {
         mode: 'background',
         toUIThread: channelToBackground.port2,
@@ -59,4 +53,10 @@ function createBackgroundWorker(channelMainThreadWithBackground) {
     const backgroundRpc = new Rpc(channelToBackground.port1, 'ui-to-bg');
     return { backgroundRpc, backgroundThreadWorker };
 }
+function createWebWorker() {
+    return new Worker(new URL('@lynx-js/web-worker-runtime', import.meta.url), {
+        type: 'module',
+        name: `lynx-web`,
+    });
+}
 //# sourceMappingURL=bootWorkers.js.map

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

@@ -1,2 +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;
+export declare function queryNodes(shadowRoot: ShadowRoot, 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

@@ -2,10 +2,10 @@
 // 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;
+export function queryNodes(shadowRoot, type, identifier, component_id, first_only, root_unique_id, callback, error) {
+    let queryRoot = shadowRoot;
     if (root_unique_id) {
-        const root = rootDom.querySelector(`[${lynxUniqueIdAttribute}="${root_unique_id}"]`);
+        const root = shadowRoot.querySelector(`[${lynxUniqueIdAttribute}="${root_unique_id}"]`);
         if (root) {
             queryRoot = root;
         }
@@ -16,7 +16,7 @@ export function queryNodes(rootDom, type, identifier, component_id, first_only,
         }
     }
     else if (component_id) {
-        const root = rootDom.querySelector(`[${componentIdAttribute}="${component_id}"]`);
+        const root = shadowRoot.querySelector(`[${componentIdAttribute}="${component_id}"]`);
         if (root) {
             queryRoot = root;
         }

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

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

package/dist/uiThread/crossThreadHandlers/registerDispatchLynxViewEventHandler.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 { dispatchLynxViewEventEndpoint } from '@lynx-js/web-constants';
+export function registerDispatchLynxViewEventHandler(rpc, shadowRoot) {
+    rpc.registerHandler(dispatchLynxViewEventEndpoint, (eventType, detail) => {
+        shadowRoot.dispatchEvent(new CustomEvent(eventType, {
+            detail,
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        }));
+    });
+}
+//# sourceMappingURL=registerDispatchLynxViewEventHandler.js.map

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

@@ -1,15 +1,6 @@
-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;
-    backgroundRpc: Rpc;
-    rootDom: HTMLElement;
+export declare function registerFlushElementTreeHandler(mainThreadRpc: Rpc, options: {
+    shadowRoot: ShadowRoot;
 }, 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>[];
-};
+}) => void): void;

package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.js

@@ -1,97 +1,24 @@
 // 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, lynxDefaultDisplayLinearAttribute, lynxRuntimeValue, lynxTagAttribute, lynxUniqueIdAttribute, parentComponentUniqueIdAttribute, postMainThreadEvent, publicComponentEventEndpoint, publishEventEndpoint, } from '@lynx-js/web-constants';
-import { decodeElementOperation } from '../decodeElementOperation.js';
-import { createCrossThreadEvent } from '../../utils/createCrossThreadEvent.js';
-function applyPageAttributes(page, pageConfig) {
-    if (pageConfig.defaultDisplayLinear === false) {
-        page.setAttribute(lynxDefaultDisplayLinearAttribute, 'false');
-    }
-}
-export function registerFlushElementTreeHandler(mainThreadRpc, endpoint, options, onCommit, markTimingInternal) {
-    const { pageConfig, backgroundRpc, rootDom, } = options;
-    const uniqueIdToElement = [];
-    const uniqueIdToCssInJsRule = [];
-    const rootStyleElementForCssInJs = document.createElement('style');
-    if (!pageConfig.enableCSSSelector) {
-        rootDom.append(rootStyleElementForCssInJs);
-    }
-    const createElementImpl = (tag) => {
-        const element = document.createElement(tag);
-        element[lynxRuntimeValue] = {
-            dataset: {},
-            eventHandler: {},
-        };
-        return element;
-    };
-    const createStyleRuleImpl = (uniqueId, initialStyle) => {
-        const commonStyleSheetText = `[${lynxUniqueIdAttribute}="${uniqueId.toString()}"]{${initialStyle}}`;
-        const idx = rootStyleElementForCssInJs.sheet.insertRule(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, timingFlags) => {
-        const { pipelineOptions } = options;
-        const pipelineId = pipelineOptions?.pipelineID;
-        markTimingInternal('dispatch_start', pipelineId);
-        markTimingInternal('layout_start', pipelineId);
-        markTimingInternal('ui_operation_flush_start', pipelineId);
-        const page = decodeElementOperation(operations, {
-            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);
-        }
-        markTimingInternal('layout_end', pipelineId);
-        markTimingInternal('dispatch_end', pipelineId);
+import { flushElementTreeEndpoint, postOffscreenEventEndpoint, } from '@lynx-js/web-constants';
+import { initOffscreenDocument } from '@lynx-js/offscreen-document/main';
+export function registerFlushElementTreeHandler(mainThreadRpc, options, onCommit) {
+    const { shadowRoot, } = options;
+    const onEvent = mainThreadRpc.createCall(postOffscreenEventEndpoint);
+    const { decodeOperation } = initOffscreenDocument({
+        shadowRoot,
+        onEvent,
+    });
+    let isFP = true;
+    mainThreadRpc.registerHandler(flushElementTreeEndpoint, (operations) => {
+        decodeOperation(operations);
         onCommit({
-            pipelineId,
-            timingFlags,
             isFP,
         });
+        if (isFP) {
+            isFP = false;
+        }
     });
-    return { uniqueIdToElement, uniqueIdToCssInJsRule };
 }
 //# sourceMappingURL=registerFlushElementTreeHandler.js.map

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

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

package/dist/uiThread/crossThreadHandlers/registerInvokeUIMethodHandler.js

@@ -1,13 +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 { Rpc } from '@lynx-js/web-worker-rpc';
 import { queryNodes } from './queryNodes.js';
-import { ErrorCode, lynxRuntimeValue, invokeUIMethodEndpoint, } from '@lynx-js/web-constants';
+import { ErrorCode, 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,
@@ -17,11 +18,11 @@ const methodAlias = {
         };
     },
 };
-export function registerInvokeUIMethodHandler(rpc, rootDom) {
+export function registerInvokeUIMethodHandler(rpc, shadowRoot) {
     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) => {
+        queryNodes(shadowRoot, type, identifier, component_id, true, root_unique_id, (element) => {
             try {
                 const aliasMethod = methodAlias[method];
                 const hasDomMethod = typeof element[method] === 'function';

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

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

package/dist/uiThread/crossThreadHandlers/registerSelectComponentHandler.js

@@ -3,10 +3,10 @@
 // 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) {
+export function registerSelectComponentHandler(rpc, shadowRoot) {
     let element;
     rpc.registerHandler(selectComponentEndpoint, (componentId, idSelector, single) => {
-        queryNodes(rootDom, IdentifierType.ID_SELECTOR, idSelector, componentId === 'card' ? '0' : componentId, single, undefined, (ele) => {
+        queryNodes(shadowRoot, IdentifierType.ID_SELECTOR, idSelector, componentId === 'card' ? '0' : componentId, single, undefined, (ele) => {
             element = ele;
         });
         return [element?.getAttribute(componentIdAttribute) ?? undefined];

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

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

package/dist/uiThread/crossThreadHandlers/registerSetNativePropsHandler.js

@@ -22,9 +22,9 @@ function applyNativeProps(element, nativeProps) {
         }
     }
 }
-export function registerNativePropsHandler(rpc, rootDom) {
+export function registerNativePropsHandler(rpc, shadowRoot) {
     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) => {
+        queryNodes(shadowRoot, type, identifier, component_id, first_only, root_unique_id, (element) => {
             applyNativeProps(element, native_props);
         });
     });

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

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

package/dist/uiThread/crossThreadHandlers/registerTriggerComponentEventHandler.js

@@ -2,9 +2,9 @@
 // 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) {
+export function registerTriggerComponentEventHandler(rpc, shadowRoot) {
     rpc.registerHandler(triggerComponentEventEndpoint, (id, params) => {
-        const componentDom = rootDom.querySelector(`[${componentIdAttribute}="${params.componentId}"]`);
+        const componentDom = shadowRoot.querySelector(`[${componentIdAttribute}="${params.componentId}"]`);
         componentDom?.dispatchEvent(new CustomEvent(id, {
             ...params.eventOption,
             detail: params.eventDetail,

package/dist/uiThread/startUIThread.d.ts

@@ -1,6 +1,6 @@
 import type { LynxView } from '../apis/createLynxView.js';
 import { type MainThreadStartConfigs, type NapiModulesCall, type NativeModulesCall } from '@lynx-js/web-constants';
-export declare function startUIThread(templateUrl: string, configs: Omit<MainThreadStartConfigs, 'template'>, rootDom: HTMLElement, callbacks: {
+export declare function startUIThread(templateUrl: string, configs: Omit<MainThreadStartConfigs, 'template'>, shadowRoot: ShadowRoot, callbacks: {
     nativeModulesCall: NativeModulesCall;
     napiModulesCall: NapiModulesCall;
     onError?: () => void;

package/dist/uiThread/startUIThread.js

@@ -1,7 +1,6 @@
 // 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 { createExposureService } from './crossThreadHandlers/createExposureService.js';
 import { registerInvokeUIMethodHandler } from './crossThreadHandlers/registerInvokeUIMethodHandler.js';
 import { registerNativePropsHandler } from './crossThreadHandlers/registerSetNativePropsHandler.js';
 import { registerNativeModulesCallHandler } from './crossThreadHandlers/registerNativeModulesCallHandler.js';
@@ -9,21 +8,26 @@ import { bootWorkers } from './bootWorkers.js';
 import { registerReportErrorHandler } from './crossThreadHandlers/registerReportErrorHandler.js';
 import { registerFlushElementTreeHandler } from './crossThreadHandlers/registerFlushElementTreeHandler.js';
 import { createDispose } from './crossThreadHandlers/createDispose.js';
-import { bootTimingSystem } from './crossThreadHandlers/bootTimingSystem.js';
 import { registerTriggerComponentEventHandler } from './crossThreadHandlers/registerTriggerComponentEventHandler.js';
 import { registerSelectComponentHandler } from './crossThreadHandlers/registerSelectComponentHandler.js';
-import { flushElementTreeEndpoint, mainThreadChunkReadyEndpoint, mainThreadStartEndpoint, sendGlobalEventEndpoint, uiThreadFpReadyEndpoint, } from '@lynx-js/web-constants';
+import { mainThreadChunkReadyEndpoint, mainThreadStartEndpoint, markTimingEndpoint, sendGlobalEventEndpoint, uiThreadFpReadyEndpoint, } from '@lynx-js/web-constants';
 import { loadTemplate } from '../utils/loadTemplate.js';
 import { createUpdateData } from './crossThreadHandlers/createUpdateData.js';
 import { registerNapiModulesCallHandler } from './crossThreadHandlers/registerNapiModulesCallHandler.js';
-export function startUIThread(templateUrl, configs, rootDom, callbacks) {
+import { registerDispatchLynxViewEventHandler } from './crossThreadHandlers/registerDispatchLynxViewEventHandler.js';
+export function startUIThread(templateUrl, configs, shadowRoot, callbacks) {
     const createLynxStartTiming = performance.now() + performance.timeOrigin;
     const { nativeModulesMap, napiModulesMap } = configs;
     const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers();
     const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
     const uiThreadFpReady = backgroundRpc.createCall(uiThreadFpReadyEndpoint);
     const mainThreadStart = mainThreadRpc.createCall(mainThreadStartEndpoint);
-    const { markTimingInternal, sendTimingResult } = bootTimingSystem(mainThreadRpc, backgroundRpc, rootDom);
+    const markTiming = backgroundRpc.createCall(markTimingEndpoint);
+    const markTimingInternal = (timingKey, pipelineId, timeStamp) => {
+        if (!timeStamp)
+            timeStamp = performance.now() + performance.timeOrigin;
+        markTiming(timingKey, pipelineId, timeStamp);
+    };
     markTimingInternal('create_lynx_start', undefined, createLynxStartTiming);
     markTimingInternal('load_template_start');
     loadTemplate(templateUrl).then((template) => {
@@ -36,24 +40,20 @@ export function startUIThread(templateUrl, configs, rootDom, callbacks) {
         });
     });
     registerReportErrorHandler(mainThreadRpc, callbacks.onError);
-    mainThreadRpc.registerHandler(mainThreadChunkReadyEndpoint, (mainChunkInfo) => {
-        const { pageConfig } = mainChunkInfo;
-        registerFlushElementTreeHandler(mainThreadRpc, flushElementTreeEndpoint, {
-            pageConfig,
-            backgroundRpc,
-            rootDom,
+    registerDispatchLynxViewEventHandler(backgroundRpc, shadowRoot);
+    mainThreadRpc.registerHandler(mainThreadChunkReadyEndpoint, () => {
+        registerFlushElementTreeHandler(mainThreadRpc, {
+            shadowRoot,
         }, (info) => {
-            const { pipelineId, timingFlags, isFP } = info;
+            const { isFP } = info;
             if (isFP) {
-                registerInvokeUIMethodHandler(backgroundRpc, rootDom);
-                registerNativePropsHandler(backgroundRpc, rootDom);
-                registerTriggerComponentEventHandler(backgroundRpc, rootDom);
-                registerSelectComponentHandler(backgroundRpc, rootDom);
-                createExposureService(backgroundRpc, rootDom);
+                registerInvokeUIMethodHandler(backgroundRpc, shadowRoot);
+                registerNativePropsHandler(backgroundRpc, shadowRoot);
+                registerTriggerComponentEventHandler(backgroundRpc, shadowRoot);
+                registerSelectComponentHandler(backgroundRpc, shadowRoot);
                 uiThreadFpReady();
             }
-            sendTimingResult(pipelineId, timingFlags, isFP);
-        }, markTimingInternal);
+        });
     });
     registerNativeModulesCallHandler(backgroundRpc, callbacks.nativeModulesCall);
     registerNapiModulesCallHandler(backgroundRpc, callbacks.napiModulesCall);

package/index.css

@@ -9,54 +9,17 @@ lynx-view {
   display: flex;
 }
 
-lynx-view::part(lynx-view-root) {
-  display: contents;
-  width: 100%;
-  height: 100%;
-}
-
-lynx-view[height="auto"] {
-  --lynx-view-height: 100%;
-  height: var(--lynx-view-height);
-  block-size: var(--lynx-view-height);
-}
-lynx-view[height="auto"]::part(lynx-view-root) {
-  height: unset;
-}
-
 lynx-view[width="auto"] {
   --lynx-view-width: 100%;
   width: var(--lynx-view-width);
   inline-size: var(--lynx-view-width);
 }
-lynx-view[width="auto"]::part(lynx-view-root) {
-  width: unset;
-}
 
 lynx-view[height="auto"], lynx-view[width="auto"] {
-  contain-intrinsic-size: var(--lynx-view-width) var(--lynx-view-height);
-}
-lynx-view[height="auto"]::part(lynx-view-root),
-lynx-view[width="auto"]::part(lynx-view-root) {
-  display: unset;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-@property --lynx-view-width {
-  syntax: "<length> | <percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-
-@property --lynx-view-height {
-  syntax: "<length> | <percentage>";
-  inherits: false;
-  initial-value: 100%;
+  contain: content;
 }
 
-lynx-view:not([width="auto"]):not([height="auto"])::part(page) {
+lynx-view::part(page) {
   height: 100%;
   width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,13 +24,14 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "0.9.0",
-    "@lynx-js/web-worker-rpc": "0.9.0",
-    "@lynx-js/web-worker-runtime": "0.9.0"
+    "@lynx-js/offscreen-document": "0.0.0",
+    "@lynx-js/web-constants": "0.10.0",
+    "@lynx-js/web-worker-rpc": "0.10.0",
+    "@lynx-js/web-worker-runtime": "0.10.0"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.0",
-    "@lynx-js/web-elements": "0.5.0"
+    "@lynx-js/web-elements": "0.5.2"
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.0",

package/dist/types/RuntimePropertyOnElement.d.ts

@@ -1,17 +0,0 @@
-import type { LynxEventType, Cloneable } from '@lynx-js/web-constants';
-import { lynxRuntimeValue } from '@lynx-js/web-constants';
-type RuntimeValue = {
-    dataset: {
-        [key: string]: Cloneable;
-    };
-    eventHandler: Record<string, {
-        type: LynxEventType;
-        handler: (ev: Event) => void;
-        hname: string;
-    } | undefined>;
-    [key: string]: any;
-};
-export type RuntimePropertyOnElement = {
-    [lynxRuntimeValue]: RuntimeValue;
-};
-export {};

package/dist/types/RuntimePropertyOnElement.js

@@ -1,2 +0,0 @@
-import { lynxRuntimeValue } from '@lynx-js/web-constants';
-//# sourceMappingURL=RuntimePropertyOnElement.js.map

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

@@ -1,5 +0,0 @@
-import type { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function bootTimingSystem(mainThreadRpc: Rpc, backgroundThreadRpc: Rpc, rootDom: HTMLElement): {
-    markTimingInternal: (timingKey: string, pipelineId?: string, timeStamp?: number) => void;
-    sendTimingResult: (pipelineId: string | undefined, timingFlags: string[], isFp: boolean) => void;
-};

package/dist/uiThread/crossThreadHandlers/bootTimingSystem.js

@@ -1,51 +0,0 @@
-// 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 { postTimingInfoFromBackgroundThread, postTimingInfoFromMainThread, postTimingResult, } from '@lynx-js/web-constants';
-export function bootTimingSystem(mainThreadRpc, backgroundThreadRpc, rootDom) {
-    const setupTiming = {};
-    const pipelineIdToTiming = new Map();
-    let commonTimingFlags = [];
-    function markTimingInternal(timingKey, pipelineId, timeStamp) {
-        if (!timeStamp)
-            timeStamp = performance.now() + performance.timeOrigin;
-        if (!pipelineId) {
-            setupTiming[timingKey] = timeStamp;
-            return;
-        }
-        if (!pipelineIdToTiming.has(pipelineId)) {
-            pipelineIdToTiming.set(pipelineId, {});
-        }
-        const timingInfo = pipelineIdToTiming.get(pipelineId);
-        timingInfo[timingKey] = timeStamp;
-    }
-    function sendTimingResult(pipelineId, timingFlags, isFp) {
-        const timingInfo = (pipelineId ? pipelineIdToTiming.get(pipelineId) : undefined) ?? {};
-        if (!pipelineId)
-            commonTimingFlags = commonTimingFlags.concat(timingFlags);
-        else
-            timingFlags = timingFlags.concat(commonTimingFlags);
-        backgroundThreadRpc.invoke(postTimingResult, [
-            pipelineId,
-            timingInfo,
-            timingFlags,
-            isFp ? setupTiming : undefined,
-        ]);
-        rootDom.dispatchEvent(new CustomEvent('timing', {
-            detail: isFp ? setupTiming : timingInfo,
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-        }));
-        if (pipelineId) {
-            pipelineIdToTiming.delete(pipelineId);
-        }
-    }
-    mainThreadRpc.registerHandler(postTimingInfoFromMainThread, markTimingInternal);
-    backgroundThreadRpc.registerHandler(postTimingInfoFromBackgroundThread, markTimingInternal);
-    return {
-        markTimingInternal,
-        sendTimingResult,
-    };
-}
-//# sourceMappingURL=bootTimingSystem.js.map

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

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

package/dist/uiThread/crossThreadHandlers/createExposureService.js

@@ -1,55 +0,0 @@
-import { lynxUniqueIdAttribute, postExposureEndpoint, switchExposureService, } from '@lynx-js/web-constants';
-import { createCrossThreadEvent } from '../../utils/createCrossThreadEvent.js';
-export function createExposureService(rpc, rootDom) {
-    let working = true;
-    let exposureCache = [];
-    let disexposureCache = [];
-    const onScreen = new Map();
-    async function exposureEventHandler(ev) {
-        const exposureEvent = createCrossThreadEvent(ev);
-        exposureEvent.detail['unique-id'] = parseFloat(ev.target.getAttribute(lynxUniqueIdAttribute));
-        const exposureID = exposureEvent.exposureID;
-        if (ev.type === 'exposure') {
-            exposureCache.push(exposureEvent);
-            onScreen.set(exposureID, exposureEvent);
-        }
-        else {
-            disexposureCache.push(exposureEvent);
-            onScreen.delete(exposureID);
-        }
-    }
-    setInterval(() => {
-        if (exposureCache.length > 0 || disexposureCache.length > 0) {
-            const currentExposure = exposureCache;
-            const currentDisexposure = disexposureCache;
-            exposureCache = [];
-            disexposureCache = [];
-            rpc.invoke(postExposureEndpoint, [{
-                    exposures: currentExposure,
-                    disExposures: currentDisexposure,
-                }]);
-        }
-    }, 1000 / 20);
-    rootDom.addEventListener('exposure', exposureEventHandler, { passive: true });
-    rootDom.addEventListener('disexposure', exposureEventHandler, {
-        passive: true,
-    });
-    rpc.registerHandler(switchExposureService, async (enable, sendEvent) => {
-        if (enable && !working) {
-            // send all onScreen info
-            rpc.invoke(postExposureEndpoint, [{
-                    exposures: [...onScreen.values()],
-                    disExposures: [],
-                }]);
-        }
-        else if (!enable && working) {
-            if (sendEvent) {
-                rpc.invoke(postExposureEndpoint, [{
-                        exposures: [],
-                        disExposures: [...onScreen.values()],
-                    }]);
-            }
-        }
-    });
-}
-//# sourceMappingURL=createExposureService.js.map

package/dist/uiThread/decodeElementOperation.d.ts

@@ -1,12 +0,0 @@
-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: {
-    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

@@ -1,175 +0,0 @@
-// 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, lynxUniqueIdAttribute, OperationType, lynxRuntimeValue, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, W3cEventNameToLynx, __lynx_timing_flag, lynxTagAttribute, } 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());
-    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, } = 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());
-            }
-        }
-        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.key === lynxTagAttribute && op.value === 'page') {
-                                pageElement = target;
-                            }
-                        }
-                    }
-                    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[lynxRuntimeValue].eventHandler[lynxEventName] = undefined;
-                    }
-                    else {
-                        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/utils/createCrossThreadEvent.d.ts

@@ -1,2 +0,0 @@
-import { type LynxCrossThreadEvent } from '@lynx-js/web-constants';
-export declare function createCrossThreadEvent(domEvent: Event): LynxCrossThreadEvent;

package/dist/utils/createCrossThreadEvent.js

@@ -1,43 +0,0 @@
-// 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 { lynxRuntimeValue, lynxUniqueIdAttribute, W3cEventNameToLynx, } from '@lynx-js/web-constants';
-export function createCrossThreadEvent(domEvent) {
-    const targetElement = domEvent.target;
-    const currentTargetElement = domEvent
-        .currentTarget;
-    const type = domEvent.type;
-    const params = {};
-    if (type.match(/^transition/)) {
-        Object.assign(params, {
-            'animation_type': 'keyframe-animation',
-            'animation_name': domEvent.propertyName,
-            new_animator: true, // we support the new_animator only
-        });
-    }
-    else if (type.match(/animation/)) {
-        Object.assign(params, {
-            'animation_type': 'keyframe-animation',
-            'animation_name': domEvent.animationName,
-            new_animator: true, // we support the new_animator only
-        });
-    }
-    return {
-        type: W3cEventNameToLynx[type] ?? type,
-        timestamp: domEvent.timeStamp,
-        target: {
-            id: targetElement.id,
-            dataset: targetElement[lynxRuntimeValue].dataset,
-            uniqueId: parseFloat(targetElement.getAttribute(lynxUniqueIdAttribute)),
-        },
-        currentTarget: {
-            id: currentTargetElement.id,
-            dataset: currentTargetElement[lynxRuntimeValue]?.dataset ?? {},
-            uniqueId: parseFloat(currentTargetElement.getAttribute(lynxUniqueIdAttribute)),
-        },
-        // @ts-expect-error
-        detail: domEvent.detail ?? {},
-        params,
-    };
-}
-//# sourceMappingURL=createCrossThreadEvent.js.map