@lynx-js/web-core 0.9.1 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @lynx-js/web-core
 
+## 0.10.1
+
+### Patch Changes
+
+- docs: fix documents about lynx-view's properties ([#412](https://github.com/lynx-family/lynx-stack/pull/412))
+
+  Attributes should be hyphen-name: 'init-data', 'global-props'.
+
+  now all properties has corresponding attributes.
+
+- feat: onNapiModulesCall function add new param: `dispatchNapiModules`, napiModulesMap val add new param: `handleDispatch`. ([#414](https://github.com/lynx-family/lynx-stack/pull/414))
+
+  Now you can use them to actively communicate to napiModules (background thread) in onNapiModulesCall (ui thread).
+
+- Updated dependencies [[`1af3b60`](https://github.com/lynx-family/lynx-stack/commit/1af3b6052ab27f98bf0e4d1b0ec9f7d9e88e0afc)]:
+  - @lynx-js/web-constants@0.10.1
+  - @lynx-js/web-worker-runtime@0.10.1
+  - @lynx-js/web-worker-rpc@0.10.1
+
+## 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

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,19 +1,26 @@
 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, dispatchNapiModules: (data: Cloneable) => void) => Promise<{
+    data: unknown;
+    transfer?: Transferable[];
+}> | {
+    data: unknown;
+    transfer?: Transferable[];
+} | undefined;
 /**
  * Based on our experiences, these elements are almost used in all lynx cards.
  */
 /**
- * @param {string} url [required] The url of the entry of your Lynx card
- * @param {Cloneable} globalProps [optional] The globalProps value of this Lynx card
- * @param {Cloneable} initData [oprional] The initial data of this Lynx card
- * @param {Record<string,string>} overrideLynxTagToHTMLTagMap [optional] use this property/attribute to override the lynx tag -> html tag map
- * @param {NativeModulesMap} nativeModulesMap [optional] use to customize NativeModules. key is module-name, value is esm url.
- * @param {NativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
- * @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 {"false" | "true" | null} injectHeadLinks [optional] @default true set it to "false" to disable injecting the <link href="" ref="stylesheet"> styles into shadowroot
+ * @property {string} url [required] (attribute: "url") The url of the entry of your Lynx card
+ * @property {Cloneable} globalProps [optional] (attribute: "global-props") The globalProps value of this Lynx card
+ * @property {Cloneable} initData [oprional] (attribute: "init-data") The initial data of this Lynx card
+ * @property {Record<string,string>} overrideLynxTagToHTMLTagMap [optional] use this property/attribute to override the lynx tag -> html tag map
+ * @property {NativeModulesMap} nativeModulesMap [optional] use to customize NativeModules. key is module-name, value is esm url.
+ * @property {NativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
+ * @property {"auto" | null} height [optional] (attribute: "height") set it to "auto" for height auto-sizing
+ * @property {"auto" | null} width [optional] (attribute: "width") set it to "auto" for width auto-sizing
+ * @property {NapiModulesMap} napiModulesMap [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
+ * @property {INapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
+ * @property {"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
  *
@@ -23,7 +30,7 @@ import { type Cloneable, type NapiModulesCall, type NapiModulesMap, type NativeM
  * Note that you should declarae the size of lynx-view
  *
  * ```html
- * <lynx-view url="https://path/to/main-thread.js" rawData="{}" globalProps="{}" style="height:300px;width:300px">
+ * <lynx-view url="https://path/to/main-thread.js" raw-data="{}" global-props="{}" style="height:300px;width:300px">
  * </lynx-view>
  * ```
  *
@@ -38,7 +45,6 @@ export declare class LynxView extends HTMLElement {
     static lynxViewCount: number;
     static tag: "lynx-view";
     private static observedAttributeAsProperties;
-    private static attributeCamelCaseMap;
     /**
      * @private
      */
@@ -95,7 +101,7 @@ export declare class LynxView extends HTMLElement {
      * @property
      */
     get onNapiModulesCall(): NapiModulesCall | undefined;
-    set onNapiModulesCall(handler: NapiModulesCall);
+    set onNapiModulesCall(handler: INapiModulesCall);
     /**
      * @public
      * @method

package/dist/apis/LynxView.js

@@ -8,17 +8,17 @@ import { inShadowRootStyles } from './inShadowRootStyles.js';
  * Based on our experiences, these elements are almost used in all lynx cards.
  */
 /**
- * @param {string} url [required] The url of the entry of your Lynx card
- * @param {Cloneable} globalProps [optional] The globalProps value of this Lynx card
- * @param {Cloneable} initData [oprional] The initial data of this Lynx card
- * @param {Record<string,string>} overrideLynxTagToHTMLTagMap [optional] use this property/attribute to override the lynx tag -> html tag map
- * @param {NativeModulesMap} nativeModulesMap [optional] use to customize NativeModules. key is module-name, value is esm url.
- * @param {NativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
- * @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 {"false" | "true" | null} injectHeadLinks [optional] @default true set it to "false" to disable injecting the <link href="" ref="stylesheet"> styles into shadowroot
+ * @property {string} url [required] (attribute: "url") The url of the entry of your Lynx card
+ * @property {Cloneable} globalProps [optional] (attribute: "global-props") The globalProps value of this Lynx card
+ * @property {Cloneable} initData [oprional] (attribute: "init-data") The initial data of this Lynx card
+ * @property {Record<string,string>} overrideLynxTagToHTMLTagMap [optional] use this property/attribute to override the lynx tag -> html tag map
+ * @property {NativeModulesMap} nativeModulesMap [optional] use to customize NativeModules. key is module-name, value is esm url.
+ * @property {NativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
+ * @property {"auto" | null} height [optional] (attribute: "height") set it to "auto" for height auto-sizing
+ * @property {"auto" | null} width [optional] (attribute: "width") set it to "auto" for width auto-sizing
+ * @property {NapiModulesMap} napiModulesMap [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
+ * @property {INapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
+ * @property {"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
  *
@@ -28,7 +28,7 @@ import { inShadowRootStyles } from './inShadowRootStyles.js';
  * Note that you should declarae the size of lynx-view
  *
  * ```html
- * <lynx-view url="https://path/to/main-thread.js" rawData="{}" globalProps="{}" style="height:300px;width:300px">
+ * <lynx-view url="https://path/to/main-thread.js" raw-data="{}" global-props="{}" style="height:300px;width:300px">
  * </lynx-view>
  * ```
  *
@@ -43,12 +43,9 @@ export class LynxView extends HTMLElement {
     static tag = 'lynx-view';
     static observedAttributeAsProperties = [
         'url',
-        'globalProps',
-        'initData',
-        'overrideLynxTagToHTMLTagMap',
-        'nativeModulesMap',
+        'global-props',
+        'init-data',
     ];
-    static attributeCamelCaseMap = Object.fromEntries(this.observedAttributeAsProperties.map((nm) => [nm.toLocaleLowerCase(), nm]));
     /**
      * @private
      */
@@ -167,7 +164,9 @@ export class LynxView extends HTMLElement {
         return this.#onNapiModulesCall;
     }
     set onNapiModulesCall(handler) {
-        this.#onNapiModulesCall = handler;
+        this.#onNapiModulesCall = (name, data, moduleName, dispatchNapiModules) => {
+            return handler(name, data, moduleName, this, dispatchNapiModules);
+        };
     }
     /**
      * @public
@@ -212,10 +211,16 @@ export class LynxView extends HTMLElement {
      */
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue !== newValue) {
-            name = LynxView.attributeCamelCaseMap[name] ?? name;
-            if (name in this) {
-                // @ts-expect-error
-                this[name] = newValue;
+            switch (name) {
+                case 'url':
+                    this.#url = newValue;
+                    break;
+                case 'global-props':
+                    this.#globalProps = JSON.parse(newValue);
+                    break;
+                case 'init-data':
+                    this.#initData = JSON.parse(newValue);
+                    break;
             }
         }
     }
@@ -289,7 +294,9 @@ export class LynxView extends HTMLElement {
                     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) => {

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/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;
+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, shadowRoot, } = options;
-    const uniqueIdToElement = [];
-    const uniqueIdToCssInJsRule = [];
-    const rootStyleElementForCssInJs = document.createElement('style');
-    if (!pageConfig.enableCSSSelector) {
-        shadowRoot.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 = shadowRoot.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;
-            shadowRoot.append(styleElement);
-            shadowRoot.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.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,

package/dist/uiThread/crossThreadHandlers/registerNapiModulesCallHandler.js

@@ -1,5 +1,8 @@
-import { napiModulesCallEndpoint, } from '@lynx-js/web-constants';
+import { dispatchNapiModuleEndpoint, napiModulesCallEndpoint, } from '@lynx-js/web-constants';
 export function registerNapiModulesCallHandler(rpc, napiModulesCall) {
-    rpc.registerHandler(napiModulesCallEndpoint, napiModulesCall);
+    const dispatchNapiModules = rpc.createCall(dispatchNapiModuleEndpoint);
+    rpc.registerHandler(napiModulesCallEndpoint, (name, data, moduleName) => {
+        return napiModulesCall(name, data, moduleName, dispatchNapiModules);
+    });
 }
 //# sourceMappingURL=registerNapiModulesCallHandler.js.map

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,13 +8,13 @@ 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';
+import { registerDispatchLynxViewEventHandler } from './crossThreadHandlers/registerDispatchLynxViewEventHandler.js';
 export function startUIThread(templateUrl, configs, shadowRoot, callbacks) {
     const createLynxStartTiming = performance.now() + performance.timeOrigin;
     const { nativeModulesMap, napiModulesMap } = configs;
@@ -23,7 +22,12 @@ export function startUIThread(templateUrl, configs, shadowRoot, callbacks) {
     const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
     const uiThreadFpReady = backgroundRpc.createCall(uiThreadFpReadyEndpoint);
     const mainThreadStart = mainThreadRpc.createCall(mainThreadStartEndpoint);
-    const { markTimingInternal, sendTimingResult } = bootTimingSystem(mainThreadRpc, backgroundRpc, shadowRoot);
+    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, shadowRoot, callbacks) {
         });
     });
     registerReportErrorHandler(mainThreadRpc, callbacks.onError);
-    mainThreadRpc.registerHandler(mainThreadChunkReadyEndpoint, (mainChunkInfo) => {
-        const { pageConfig } = mainChunkInfo;
-        registerFlushElementTreeHandler(mainThreadRpc, flushElementTreeEndpoint, {
-            pageConfig,
-            backgroundRpc,
+    registerDispatchLynxViewEventHandler(backgroundRpc, shadowRoot);
+    mainThreadRpc.registerHandler(mainThreadChunkReadyEndpoint, () => {
+        registerFlushElementTreeHandler(mainThreadRpc, {
             shadowRoot,
         }, (info) => {
-            const { pipelineId, timingFlags, isFP } = info;
+            const { isFP } = info;
             if (isFP) {
                 registerInvokeUIMethodHandler(backgroundRpc, shadowRoot);
                 registerNativePropsHandler(backgroundRpc, shadowRoot);
                 registerTriggerComponentEventHandler(backgroundRpc, shadowRoot);
                 registerSelectComponentHandler(backgroundRpc, shadowRoot);
-                createExposureService(backgroundRpc, shadowRoot);
                 uiThreadFpReady();
             }
-            sendTimingResult(pipelineId, timingFlags, isFP);
-        }, markTimingInternal);
+        });
     });
     registerNativeModulesCallHandler(backgroundRpc, callbacks.nativeModulesCall);
     registerNapiModulesCallHandler(backgroundRpc, callbacks.napiModulesCall);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,13 +24,14 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "0.9.1",
-    "@lynx-js/web-worker-rpc": "0.9.1",
-    "@lynx-js/web-worker-runtime": "0.9.1"
+    "@lynx-js/offscreen-document": "0.0.0",
+    "@lynx-js/web-constants": "0.10.1",
+    "@lynx-js/web-worker-rpc": "0.10.1",
+    "@lynx-js/web-worker-runtime": "0.10.1"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.0",
-    "@lynx-js/web-elements": "0.5.1"
+    "@lynx-js/web-elements": "0.5.3"
   },
   "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, shadowRoot: ShadowRoot): {
-    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, shadowRoot) {
-    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,
-        ]);
-        shadowRoot.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, shadowRoot: ShadowRoot): void;

package/dist/uiThread/crossThreadHandlers/createExposureService.js

@@ -1,57 +0,0 @@
-import { lynxUniqueIdAttribute, postExposureEndpoint, switchExposureService, } from '@lynx-js/web-constants';
-import { createCrossThreadEvent } from '../../utils/createCrossThreadEvent.js';
-export function createExposureService(rpc, shadowRoot) {
-    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);
-    shadowRoot.addEventListener('exposure', exposureEventHandler, {
-        passive: true,
-    });
-    shadowRoot.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