@lynx-js/web-core 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @lynx-js/web-core
 
+## 0.11.0
+
+### Minor Changes
+
+- feat: upgrade @lynx-js/lynx-core to 0.1.2 ([#465](https://github.com/lynx-family/lynx-stack/pull/465))
+
+  refactor some internal logic
+
+  - \_\_OnLifeCycleEvent
+  - \_\_OnNativeAppReady
+
+### Patch Changes
+
+- feat: support mts event handler (1/n) ([#495](https://github.com/lynx-family/lynx-stack/pull/495))
+
+  now the main-thread:bind handler could be invoked. The params of the handler will be implemented later.
+
+- feat: allow multi lynx-view to share bts worker ([#520](https://github.com/lynx-family/lynx-stack/pull/520))
+
+  Now we allow users to enable so-called "shared-context" feature on the Web Platform.
+
+  Similar to the same feature for Lynx iOS/Android, this feature let multi lynx cards to share one js context.
+
+  The `lynx.getSharedData` and `lynx.setSharedData` are also supported in this commit.
+
+  To enable this feature, set property `lynxGroupId` or attribute `lynx-group-id` before a lynx-view starts rendering. Those card with same context id will share one web worker for the bts scripts.
+
+- perf: dispatchLynxViewEventEndpoint is a void call ([#506](https://github.com/lynx-family/lynx-stack/pull/506))
+
+- Updated dependencies [[`ea42e62`](https://github.com/lynx-family/lynx-stack/commit/ea42e62fbcd5c743132c3e6e7c4851770742d544), [`a0f5ca4`](https://github.com/lynx-family/lynx-stack/commit/a0f5ca4ea0895ccbaa6aa63f449f53a677a1cf73)]:
+  - @lynx-js/web-worker-runtime@0.11.0
+  - @lynx-js/web-constants@0.11.0
+  - @lynx-js/web-worker-rpc@0.11.0
+
+## 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

package/dist/apis/LynxView.d.ts

@@ -1,5 +1,5 @@
 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<{
+export type INapiModulesCall = (name: string, data: any, moduleName: string, lynxView: LynxView, dispatchNapiModules: (data: Cloneable) => void) => Promise<{
     data: unknown;
     transfer?: Transferable[];
 }> | {
@@ -10,17 +10,18 @@ export type INapiModulesCall = (name: string, data: any, moduleName: string, lyn
  * 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 {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
+ * @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
+ * @property {number} lynxGroupId [optional] (attribute: "lynx-group-id") the background shared context id, which is used to share webworker between different lynx cards
  *
  * @event error lynx card fired an error
  *
@@ -30,7 +31,7 @@ export type INapiModulesCall = (name: string, data: any, moduleName: string, lyn
  * 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>
  * ```
  *
@@ -45,7 +46,6 @@ export declare class LynxView extends HTMLElement {
     static lynxViewCount: number;
     static tag: "lynx-view";
     private static observedAttributeAsProperties;
-    private static attributeCamelCaseMap;
     /**
      * @private
      */
@@ -103,6 +103,12 @@ export declare class LynxView extends HTMLElement {
      */
     get onNapiModulesCall(): NapiModulesCall | undefined;
     set onNapiModulesCall(handler: INapiModulesCall);
+    /**
+     * @param
+     * @property
+     */
+    get lynxGroupId(): number | undefined;
+    set lynxGroupId(val: number | undefined);
     /**
      * @public
      * @method

package/dist/apis/LynxView.js

@@ -8,17 +8,18 @@ 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 {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
+ * @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
+ * @property {number} lynxGroupId [optional] (attribute: "lynx-group-id") the background shared context id, which is used to share webworker between different lynx cards
  *
  * @event error lynx card fired an error
  *
@@ -28,7 +29,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 +44,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,10 +165,27 @@ export class LynxView extends HTMLElement {
         return this.#onNapiModulesCall;
     }
     set onNapiModulesCall(handler) {
-        this.#onNapiModulesCall = (name, data, moduleName) => {
-            return handler(name, data, moduleName, this);
+        this.#onNapiModulesCall = (name, data, moduleName, dispatchNapiModules) => {
+            return handler(name, data, moduleName, this, dispatchNapiModules);
         };
     }
+    /**
+     * @param
+     * @property
+     */
+    get lynxGroupId() {
+        return this.getAttribute('lynx-group-id')
+            ? Number(this.getAttribute('lynx-group-id'))
+            : undefined;
+    }
+    set lynxGroupId(val) {
+        if (val) {
+            this.setAttribute('lynx-group-id', val.toString());
+        }
+        else {
+            this.removeAttribute('lynx-group-id');
+        }
+    }
     /**
      * @public
      * @method
@@ -214,10 +229,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;
             }
         }
     }
@@ -259,6 +280,7 @@ export class LynxView extends HTMLElement {
                     if (!this.shadowRoot) {
                         this.attachShadow({ mode: 'open' });
                     }
+                    const lynxGroupId = this.lynxGroupId;
                     const lynxView = createLynxView({
                         tagMap,
                         shadowRoot: this.shadowRoot,
@@ -267,6 +289,7 @@ export class LynxView extends HTMLElement {
                         initData: this.#initData,
                         nativeModulesMap: this.#nativeModulesMap,
                         napiModulesMap: this.#napiModulesMap,
+                        lynxGroupId,
                         callbacks: {
                             nativeModulesCall: (...args) => {
                                 if (this.#onNativeModulesCall) {

package/dist/apis/createLynxView.d.ts

@@ -6,10 +6,11 @@ export interface LynxViewConfigs {
     initData: Cloneable;
     globalProps: Cloneable;
     shadowRoot: ShadowRoot;
-    callbacks: Parameters<typeof startUIThread>[3];
+    callbacks: Parameters<typeof startUIThread>[4];
     nativeModulesMap: NativeModulesMap;
     napiModulesMap: NapiModulesMap;
     tagMap: Record<string, string>;
+    lynxGroupId: number | undefined;
 }
 export interface LynxView {
     updateData(data: Cloneable, updateDataType: UpdateDataType, callback?: () => void): void;

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 { shadowRoot, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, } = configs;
+    const { shadowRoot, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, lynxGroupId, } = configs;
     return startUIThread(templateUrl, {
         tagMap,
         initData,
@@ -11,6 +11,6 @@ export function createLynxView(configs) {
         nativeModulesMap,
         napiModulesMap,
         browserConfig: {},
-    }, shadowRoot, callbacks);
+    }, shadowRoot, lynxGroupId, callbacks);
 }
 //# sourceMappingURL=createLynxView.js.map

package/dist/uiThread/bootWorkers.d.ts

@@ -4,5 +4,5 @@ interface LynxViewRpc {
     backgroundRpc: Rpc;
     terminateWorkers: () => void;
 }
-export declare function bootWorkers(): LynxViewRpc;
+export declare function bootWorkers(lynxGroupId: number | undefined): LynxViewRpc;
 export {};

package/dist/uiThread/bootWorkers.js

@@ -2,24 +2,41 @@
 // 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';
+const backgroundWorkerContextCount = [];
+const contextIdToBackgroundWorker = [];
 let preHeatedMainWorker = createMainWorker();
-export function bootWorkers() {
+export function bootWorkers(lynxGroupId) {
     const curMainWorker = preHeatedMainWorker;
-    const curBackgroundWorker = createBackgroundWorker(curMainWorker.channelMainThreadWithBackground);
     preHeatedMainWorker = createMainWorker();
+    const curBackgroundWorker = createBackgroundWorker(lynxGroupId, curMainWorker.channelMainThreadWithBackground);
+    if (lynxGroupId !== undefined) {
+        if (backgroundWorkerContextCount[lynxGroupId]) {
+            backgroundWorkerContextCount[lynxGroupId]++;
+        }
+        else {
+            backgroundWorkerContextCount[lynxGroupId] = 1;
+        }
+    }
     return {
         mainThreadRpc: curMainWorker.mainThreadRpc,
         backgroundRpc: curBackgroundWorker.backgroundRpc,
         terminateWorkers: () => {
             curMainWorker.mainThreadWorker.terminate();
-            curBackgroundWorker.backgroundThreadWorker.terminate();
+            if (lynxGroupId === undefined) {
+                curBackgroundWorker.backgroundThreadWorker.terminate();
+            }
+            else if (backgroundWorkerContextCount[lynxGroupId] === 1) {
+                curBackgroundWorker.backgroundThreadWorker.terminate();
+                backgroundWorkerContextCount[lynxGroupId] = 0;
+                contextIdToBackgroundWorker[lynxGroupId] = undefined;
+            }
         },
     };
 }
 function createMainWorker() {
     const channelToMainThread = new MessageChannel();
     const channelMainThreadWithBackground = new MessageChannel();
-    const mainThreadWorker = createWebWorker();
+    const mainThreadWorker = createWebWorker('lynx-main');
     const mainThreadMessage = {
         mode: 'main',
         toUIThread: channelToMainThread.port2,
@@ -37,9 +54,17 @@ function createMainWorker() {
         channelMainThreadWithBackground,
     };
 }
-function createBackgroundWorker(channelMainThreadWithBackground) {
+function createBackgroundWorker(lynxGroupId, channelMainThreadWithBackground) {
     const channelToBackground = new MessageChannel();
-    const backgroundThreadWorker = createWebWorker();
+    let backgroundThreadWorker;
+    if (lynxGroupId) {
+        backgroundThreadWorker = contextIdToBackgroundWorker[lynxGroupId]
+            ?? createWebWorker('lynx-bg');
+        contextIdToBackgroundWorker[lynxGroupId] = backgroundThreadWorker;
+    }
+    else {
+        backgroundThreadWorker = createWebWorker('lynx-bg');
+    }
     const backgroundThreadMessage = {
         mode: 'background',
         toUIThread: channelToBackground.port2,
@@ -53,10 +78,10 @@ function createBackgroundWorker(channelMainThreadWithBackground) {
     const backgroundRpc = new Rpc(channelToBackground.port1, 'ui-to-bg');
     return { backgroundRpc, backgroundThreadWorker };
 }
-function createWebWorker() {
+function createWebWorker(name) {
     return new Worker(new URL('@lynx-js/web-worker-runtime', import.meta.url), {
         type: 'module',
-        name: `lynx-web`,
+        name,
     });
 }
 //# sourceMappingURL=bootWorkers.js.map

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

@@ -1,6 +1,4 @@
 import type { Rpc } from '@lynx-js/web-worker-rpc';
 export declare function registerFlushElementTreeHandler(mainThreadRpc: Rpc, options: {
     shadowRoot: ShadowRoot;
-}, onCommit: (info: {
-    isFP: boolean;
-}) => void): void;
+}): void;

package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.js

@@ -3,22 +3,15 @@
 // LICENSE file in the root directory of this source tree.
 import { flushElementTreeEndpoint, postOffscreenEventEndpoint, } from '@lynx-js/web-constants';
 import { initOffscreenDocument } from '@lynx-js/offscreen-document/main';
-export function registerFlushElementTreeHandler(mainThreadRpc, options, onCommit) {
+export function registerFlushElementTreeHandler(mainThreadRpc, options) {
     const { shadowRoot, } = options;
     const onEvent = mainThreadRpc.createCall(postOffscreenEventEndpoint);
     const { decodeOperation } = initOffscreenDocument({
         shadowRoot,
         onEvent,
     });
-    let isFP = true;
     mainThreadRpc.registerHandler(flushElementTreeEndpoint, (operations) => {
         decodeOperation(operations);
-        onCommit({
-            isFP,
-        });
-        if (isFP) {
-            isFP = false;
-        }
     });
 }
 //# sourceMappingURL=registerFlushElementTreeHandler.js.map

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.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'>, shadowRoot: ShadowRoot, callbacks: {
+export declare function startUIThread(templateUrl: string, configs: Omit<MainThreadStartConfigs, 'template'>, shadowRoot: ShadowRoot, lynxGroupId: number | undefined, callbacks: {
     nativeModulesCall: NativeModulesCall;
     napiModulesCall: NapiModulesCall;
     onError?: () => void;

package/dist/uiThread/startUIThread.js

@@ -10,17 +10,16 @@ import { registerFlushElementTreeHandler } from './crossThreadHandlers/registerF
 import { createDispose } from './crossThreadHandlers/createDispose.js';
 import { registerTriggerComponentEventHandler } from './crossThreadHandlers/registerTriggerComponentEventHandler.js';
 import { registerSelectComponentHandler } from './crossThreadHandlers/registerSelectComponentHandler.js';
-import { mainThreadChunkReadyEndpoint, mainThreadStartEndpoint, markTimingEndpoint, sendGlobalEventEndpoint, uiThreadFpReadyEndpoint, } from '@lynx-js/web-constants';
+import { mainThreadStartEndpoint, markTimingEndpoint, sendGlobalEventEndpoint, } 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) {
+export function startUIThread(templateUrl, configs, shadowRoot, lynxGroupId, callbacks) {
     const createLynxStartTiming = performance.now() + performance.timeOrigin;
     const { nativeModulesMap, napiModulesMap } = configs;
-    const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers();
+    const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers(lynxGroupId);
     const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
-    const uiThreadFpReady = backgroundRpc.createCall(uiThreadFpReadyEndpoint);
     const mainThreadStart = mainThreadRpc.createCall(mainThreadStartEndpoint);
     const markTiming = backgroundRpc.createCall(markTimingEndpoint);
     const markTimingInternal = (timingKey, pipelineId, timeStamp) => {
@@ -41,20 +40,13 @@ export function startUIThread(templateUrl, configs, shadowRoot, callbacks) {
     });
     registerReportErrorHandler(mainThreadRpc, callbacks.onError);
     registerDispatchLynxViewEventHandler(backgroundRpc, shadowRoot);
-    mainThreadRpc.registerHandler(mainThreadChunkReadyEndpoint, () => {
-        registerFlushElementTreeHandler(mainThreadRpc, {
-            shadowRoot,
-        }, (info) => {
-            const { isFP } = info;
-            if (isFP) {
-                registerInvokeUIMethodHandler(backgroundRpc, shadowRoot);
-                registerNativePropsHandler(backgroundRpc, shadowRoot);
-                registerTriggerComponentEventHandler(backgroundRpc, shadowRoot);
-                registerSelectComponentHandler(backgroundRpc, shadowRoot);
-                uiThreadFpReady();
-            }
-        });
+    registerFlushElementTreeHandler(mainThreadRpc, {
+        shadowRoot,
     });
+    registerInvokeUIMethodHandler(backgroundRpc, shadowRoot);
+    registerNativePropsHandler(backgroundRpc, shadowRoot);
+    registerTriggerComponentEventHandler(backgroundRpc, shadowRoot);
+    registerSelectComponentHandler(backgroundRpc, shadowRoot);
     registerNativeModulesCallHandler(backgroundRpc, callbacks.nativeModulesCall);
     registerNapiModulesCallHandler(backgroundRpc, callbacks.napiModulesCall);
     return {

package/dist/utils/loadTemplate.js

@@ -81,6 +81,7 @@ const mainThreadInjectVars = [
     '__SetCSSId',
     '__OnLifecycleEvent',
     '__FlushElementTree',
+    '__LoadLepusChunk',
 ];
 const backgroundInjectVars = [
     'NativeModules',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,16 +25,16 @@
   ],
   "dependencies": {
     "@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"
+    "@lynx-js/web-constants": "0.11.0",
+    "@lynx-js/web-worker-rpc": "0.11.0",
+    "@lynx-js/web-worker-runtime": "0.11.0"
   },
   "devDependencies": {
-    "@lynx-js/lynx-core": "0.1.0",
-    "@lynx-js/web-elements": "0.5.2"
+    "@lynx-js/lynx-core": "0.1.2",
+    "@lynx-js/web-elements": "0.5.4"
   },
   "peerDependencies": {
-    "@lynx-js/lynx-core": "0.1.0",
+    "@lynx-js/lynx-core": "0.1.2",
     "@lynx-js/web-elements": ">=0.3.1"
   }
 }