@lynx-js/web-core 0.12.0 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # @lynx-js/web-core
 
+## 0.13.1
+
+### Patch Changes
+
+- fix: some inline style properties cause crash ([#647](https://github.com/lynx-family/lynx-stack/pull/647))
+
+  add support for the following css properties
+
+  - mask
+  - mask-repeat
+  - mask-position
+  - mask-clip
+  - mask-origin
+  - mask-size
+  - gap
+  - column-gap
+  - row-gap
+  - image-rendering
+  - hyphens
+  - offset-path
+  - offset-distance
+
+- feat: support touch events for MTS ([#641](https://github.com/lynx-family/lynx-stack/pull/641))
+
+  now we support
+
+  - main-thread:bindtouchstart
+  - main-thread:bindtouchend
+  - main-thread:bindtouchmove
+  - main-thread:bindtouchcancel
+
+- feat: add SystemInfo.screenWidth and SystemInfo.screenHeight ([#641](https://github.com/lynx-family/lynx-stack/pull/641))
+
+- Updated dependencies [[`c9ccad6`](https://github.com/lynx-family/lynx-stack/commit/c9ccad6b574c98121149d3e9d4a9a7e97af63d91), [`9ad394e`](https://github.com/lynx-family/lynx-stack/commit/9ad394ea9ef28688a3b810b4051868b2a28eb7de), [`f4cfb70`](https://github.com/lynx-family/lynx-stack/commit/f4cfb70606d46cd4017254c326095432f9c6bcb8), [`c9ccad6`](https://github.com/lynx-family/lynx-stack/commit/c9ccad6b574c98121149d3e9d4a9a7e97af63d91), [`839d61c`](https://github.com/lynx-family/lynx-stack/commit/839d61c8a329ed1e265fe2edc12a702e9592f743)]:
+  - @lynx-js/offscreen-document@0.0.2
+  - @lynx-js/web-mainthread-apis@0.13.1
+  - @lynx-js/web-worker-runtime@0.13.1
+  - @lynx-js/web-constants@0.13.1
+  - @lynx-js/web-worker-rpc@0.13.1
+
+## 0.13.0
+
+### Patch Changes
+
+- refactor: isolate SystemInfo ([#628](https://github.com/lynx-family/lynx-stack/pull/628))
+
+  Never assign `SystemInfo` on worker's self object.
+
+- feat: support thread strategy `all-on-ui` ([#625](https://github.com/lynx-family/lynx-stack/pull/625))
+
+  ```html
+  <lynx-view thread-strategy="all-on-ui"></lynx-view>
+  ```
+
+  This will make the lynx's main-thread run on the UA's main thread.
+
+  Note that the `all-on-ui` does not support the HMR & chunk splitting yet.
+
+- fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](https://github.com/lynx-family/lynx-stack/pull/608))
+
+  like `.parent > :not([hidden]) ~ :not([hidden])`
+
+  you will need to upgrade your `react-rsbuild-plugin` to fix this issue
+
+- Updated dependencies [[`4ee0465`](https://github.com/lynx-family/lynx-stack/commit/4ee0465f6e5846a0d038b49d2a7c95e87c9e5c77), [`74b5bd1`](https://github.com/lynx-family/lynx-stack/commit/74b5bd15339b70107a7c42525494da46e8f8f6bd), [`06bb78a`](https://github.com/lynx-family/lynx-stack/commit/06bb78a6b93d4a7be7177a6269dd4337852ce90d), [`5a3d9af`](https://github.com/lynx-family/lynx-stack/commit/5a3d9afe52ba639987db124ca35580261e0718b5), [`5269cab`](https://github.com/lynx-family/lynx-stack/commit/5269cabef7609159bdd0dd14a03c5da667907424), [`74b5bd1`](https://github.com/lynx-family/lynx-stack/commit/74b5bd15339b70107a7c42525494da46e8f8f6bd), [`2b069f8`](https://github.com/lynx-family/lynx-stack/commit/2b069f8786c95bdb9ac1f35091f05f7fd3b52225)]:
+  - @lynx-js/web-mainthread-apis@0.13.0
+  - @lynx-js/web-worker-runtime@0.13.0
+  - @lynx-js/web-constants@0.13.0
+  - @lynx-js/offscreen-document@0.0.1
+  - @lynx-js/web-worker-rpc@0.13.0
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/apis/LynxView.d.ts

@@ -22,6 +22,7 @@ export type INapiModulesCall = (name: string, data: any, moduleName: string, lyn
  * @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
+ * @property {"all-on-ui" | "multi-thread"} threadStrategy [optional] @default "multi-thread" (attribute: "thread-strategy") controls the thread strategy for current lynx view
  * @property {(string)=>Promise<LynxTemplate>} customTemplateLoader [optional] the custom template loader, which is used to load the template
  *
  * @event error lynx card fired an error
@@ -139,6 +140,12 @@ export declare class LynxView extends HTMLElement {
      * @private
      */
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * @param
+     * @property
+     */
+    get threadStrategy(): 'all-on-ui' | 'multi-thread';
+    set threadStrategy(val: 'all-on-ui' | 'multi-thread');
     /**
      * @private
      */

package/dist/apis/LynxView.js

@@ -20,6 +20,7 @@ import { inShadowRootStyles } from './inShadowRootStyles.js';
  * @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
+ * @property {"all-on-ui" | "multi-thread"} threadStrategy [optional] @default "multi-thread" (attribute: "thread-strategy") controls the thread strategy for current lynx view
  * @property {(string)=>Promise<LynxTemplate>} customTemplateLoader [optional] the custom template loader, which is used to load the template
  *
  * @event error lynx card fired an error
@@ -243,6 +244,22 @@ export class LynxView extends HTMLElement {
             }
         }
     }
+    /**
+     * @param
+     * @property
+     */
+    get threadStrategy() {
+        // @ts-expect-error
+        return this.getAttribute('thread-strategy');
+    }
+    set threadStrategy(val) {
+        if (val) {
+            this.setAttribute('thread-strategy', val);
+        }
+        else {
+            this.removeAttribute('thread-strategy');
+        }
+    }
     /**
      * @private
      */
@@ -288,7 +305,9 @@ export class LynxView extends HTMLElement {
                         this.attachShadow({ mode: 'open' });
                     }
                     const lynxGroupId = this.lynxGroupId;
+                    const threadStrategy = (this.threadStrategy ?? 'multi-thread');
                     const lynxView = createLynxView({
+                        threadStrategy,
                         tagMap,
                         shadowRoot: this.shadowRoot,
                         templateUrl: this.#url,

package/dist/apis/createLynxView.d.ts

@@ -1,16 +1,17 @@
 import type { Cloneable, NapiModulesMap, NativeModulesMap, sendGlobalEventEndpoint, UpdateDataType } from '@lynx-js/web-constants';
-import { startUIThread } from '../uiThread/startUIThread.js';
+import { type StartUIThreadCallbacks } from '../uiThread/startUIThread.js';
 import type { RpcCallType } from '@lynx-js/web-worker-rpc';
 export interface LynxViewConfigs {
     templateUrl: string;
     initData: Cloneable;
     globalProps: Cloneable;
     shadowRoot: ShadowRoot;
-    callbacks: Parameters<typeof startUIThread>[4];
+    callbacks: StartUIThreadCallbacks;
     nativeModulesMap: NativeModulesMap;
     napiModulesMap: NapiModulesMap;
     tagMap: Record<string, string>;
     lynxGroupId: number | undefined;
+    threadStrategy: 'all-on-ui' | 'multi-thread';
 }
 export interface LynxView {
     updateData(data: Cloneable, updateDataType: UpdateDataType, callback?: () => void): void;

package/dist/apis/createLynxView.js

@@ -1,16 +1,23 @@
 // 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 { startUIThread } from '../uiThread/startUIThread.js';
+import { startUIThread, } from '../uiThread/startUIThread.js';
+const pixelRatio = window.devicePixelRatio;
+const screenWidth = window.screen.availWidth * pixelRatio;
+const screenHeight = window.screen.availHeight * pixelRatio;
 export function createLynxView(configs) {
-    const { shadowRoot, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, lynxGroupId, } = configs;
+    const { shadowRoot, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, lynxGroupId, threadStrategy = 'multi-thread', } = configs;
     return startUIThread(templateUrl, {
         tagMap,
         initData,
         globalProps,
         nativeModulesMap,
         napiModulesMap,
-        browserConfig: {},
-    }, shadowRoot, lynxGroupId, callbacks);
+        browserConfig: {
+            pixelRatio: window.devicePixelRatio,
+            pixelWidth: screenWidth,
+            pixelHeight: screenHeight,
+        },
+    }, shadowRoot, lynxGroupId, threadStrategy, 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(lynxGroupId: number | undefined): LynxViewRpc;
+export declare function bootWorkers(lynxGroupId: number | undefined, allOnUI?: boolean): LynxViewRpc;
 export {};

package/dist/uiThread/bootWorkers.js

@@ -5,9 +5,15 @@ import { Rpc } from '@lynx-js/web-worker-rpc';
 const backgroundWorkerContextCount = [];
 const contextIdToBackgroundWorker = [];
 let preHeatedMainWorker = createMainWorker();
-export function bootWorkers(lynxGroupId) {
-    const curMainWorker = preHeatedMainWorker;
-    preHeatedMainWorker = createMainWorker();
+export function bootWorkers(lynxGroupId, allOnUI) {
+    let curMainWorker;
+    if (allOnUI) {
+        curMainWorker = createUIChannel();
+    }
+    else {
+        curMainWorker = preHeatedMainWorker;
+        preHeatedMainWorker = createMainWorker();
+    }
     const curBackgroundWorker = createBackgroundWorker(lynxGroupId, curMainWorker.channelMainThreadWithBackground);
     if (lynxGroupId !== undefined) {
         if (backgroundWorkerContextCount[lynxGroupId]) {
@@ -21,7 +27,7 @@ export function bootWorkers(lynxGroupId) {
         mainThreadRpc: curMainWorker.mainThreadRpc,
         backgroundRpc: curBackgroundWorker.backgroundRpc,
         terminateWorkers: () => {
-            curMainWorker.mainThreadWorker.terminate();
+            curMainWorker.mainThreadWorker?.terminate();
             if (lynxGroupId === undefined) {
                 curBackgroundWorker.backgroundThreadWorker.terminate();
             }
@@ -33,6 +39,14 @@ export function bootWorkers(lynxGroupId) {
         },
     };
 }
+function createUIChannel() {
+    const channelMainThreadWithBackground = new MessageChannel();
+    const mainThreadRpc = new Rpc(channelMainThreadWithBackground.port1, 'main-to-bg');
+    return {
+        mainThreadRpc,
+        channelMainThreadWithBackground,
+    };
+}
 function createMainWorker() {
     const channelToMainThread = new MessageChannel();
     const channelMainThreadWithBackground = new MessageChannel();
@@ -41,7 +55,6 @@ function createMainWorker() {
         mode: 'main',
         toUIThread: channelToMainThread.port2,
         toPeerThread: channelMainThreadWithBackground.port1,
-        pixelRatio: window.devicePixelRatio,
     };
     mainThreadWorker.postMessage(mainThreadMessage, [
         channelToMainThread.port2,
@@ -69,7 +82,6 @@ function createBackgroundWorker(lynxGroupId, channelMainThreadWithBackground) {
         mode: 'background',
         toUIThread: channelToBackground.port2,
         toPeerThread: channelMainThreadWithBackground.port2,
-        pixelRatio: window.devicePixelRatio,
     };
     backgroundThreadWorker.postMessage(backgroundThreadMessage, [
         channelToBackground.port2,

package/dist/uiThread/createRenderAllOnUI.d.ts

@@ -0,0 +1,8 @@
+import type { MainThreadStartConfigs } from '@lynx-js/web-constants';
+import { Rpc } from '@lynx-js/web-worker-rpc';
+export declare function createRenderAllOnUI(mainToBackgroundRpc: Rpc, shadowRoot: ShadowRoot, markTimingInternal: (timingKey: string, pipelineId?: string, timeStamp?: number) => void, callbacks: {
+    onError?: () => void;
+}): {
+    start: (configs: MainThreadStartConfigs) => Promise<void>;
+    updateDataMainThread: (args_0: import("@lynx-js/web-constants").Cloneable, args_1: Record<string, string>) => Promise<void>;
+};

package/dist/uiThread/createRenderAllOnUI.js

@@ -0,0 +1,26 @@
+import { Rpc } from '@lynx-js/web-worker-rpc';
+const { loadMainThread, } = await import('@lynx-js/web-mainthread-apis');
+export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingInternal, callbacks) {
+    if (!globalThis.module) {
+        Object.assign(globalThis, { module: {} });
+    }
+    const docu = Object.assign(shadowRoot, {
+        createElement: document.createElement.bind(document),
+    });
+    const { startMainThread } = loadMainThread(mainToBackgroundRpc, docu, () => { }, markTimingInternal, () => {
+        callbacks.onError?.();
+    });
+    let runtime;
+    const start = async (configs) => {
+        const mainThreadRuntime = startMainThread(configs);
+        runtime = await mainThreadRuntime;
+    };
+    const updateDataMainThread = async (...args) => {
+        runtime.updatePage?.(...args);
+    };
+    return {
+        start,
+        updateDataMainThread,
+    };
+}
+//# sourceMappingURL=createRenderAllOnUI.js.map

package/dist/uiThread/createRenderMultiThread.d.ts

@@ -0,0 +1,7 @@
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+export declare function createRenderMultiThread(mainThreadRpc: Rpc, shadowRoot: ShadowRoot, callbacks: {
+    onError?: () => void;
+}): {
+    start: (args_0: import("@lynx-js/web-constants").MainThreadStartConfigs) => void;
+    updateDataMainThread: (args_0: import("@lynx-js/web-constants").Cloneable, args_1: Record<string, string>) => Promise<void>;
+};

package/dist/uiThread/createRenderMultiThread.js

@@ -0,0 +1,16 @@
+import { mainThreadStartEndpoint, updateDataEndpoint, } from '@lynx-js/web-constants';
+import { registerReportErrorHandler } from './crossThreadHandlers/registerReportErrorHandler.js';
+import { registerFlushElementTreeHandler } from './crossThreadHandlers/registerFlushElementTreeHandler.js';
+export function createRenderMultiThread(mainThreadRpc, shadowRoot, callbacks) {
+    registerReportErrorHandler(mainThreadRpc, callbacks.onError);
+    registerFlushElementTreeHandler(mainThreadRpc, {
+        shadowRoot,
+    });
+    const start = mainThreadRpc.createCall(mainThreadStartEndpoint);
+    const updateDataMainThread = mainThreadRpc.createCall(updateDataEndpoint);
+    return {
+        start,
+        updateDataMainThread,
+    };
+}
+//# sourceMappingURL=createRenderMultiThread.js.map

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

@@ -1,3 +1,4 @@
-import type { Rpc } from '@lynx-js/web-worker-rpc';
+import type { RpcCallType } from '@lynx-js/web-worker-rpc';
 import type { LynxView } from '../../apis/createLynxView.js';
-export declare function createUpdateData(mainThreadRpc: Rpc, backgroundRpc: Rpc): LynxView['updateData'];
+import { updateDataEndpoint } from '@lynx-js/web-constants';
+export declare function createUpdateData(updateDataMainThread: RpcCallType<typeof updateDataEndpoint>, updateDataBackground: RpcCallType<typeof updateDataEndpoint>): LynxView['updateData'];

package/dist/uiThread/crossThreadHandlers/createUpdateData.js

@@ -2,12 +2,12 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 import { updateDataEndpoint, } from '@lynx-js/web-constants';
-export function createUpdateData(mainThreadRpc, backgroundRpc) {
+export function createUpdateData(updateDataMainThread, updateDataBackground) {
     return (data, _updateDataType, callback) => {
         Promise.all([
             // There is no need to process options for now, as they have default values.
-            mainThreadRpc.invoke(updateDataEndpoint, [data, {}]),
-            backgroundRpc.invoke(updateDataEndpoint, [data, {}]),
+            updateDataMainThread(data, {}),
+            updateDataBackground(data, {}),
         ]).then(() => callback?.());
     };
 }

package/dist/uiThread/startBackground.d.ts

@@ -0,0 +1,10 @@
+import { type NapiModulesCall, type NativeModulesCall } from '@lynx-js/web-constants';
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+export declare function startBackground(backgroundRpc: Rpc, shadowRoot: ShadowRoot, callbacks: {
+    nativeModulesCall: NativeModulesCall;
+    napiModulesCall: NapiModulesCall;
+}): {
+    sendGlobalEvent: (args_0: string, args_1: import("@lynx-js/web-constants").Cloneable[] | undefined) => void;
+    markTiming: (timingKey: string, pipelineId: string | undefined, timeStamp: number) => void;
+    updateDataBackground: (args_0: import("@lynx-js/web-constants").Cloneable, args_1: Record<string, string>) => Promise<void>;
+};

package/dist/uiThread/startBackground.js

@@ -0,0 +1,26 @@
+import { markTimingEndpoint, sendGlobalEventEndpoint, updateDataEndpoint, } from '@lynx-js/web-constants';
+import { registerInvokeUIMethodHandler } from './crossThreadHandlers/registerInvokeUIMethodHandler.js';
+import { registerNativePropsHandler } from './crossThreadHandlers/registerSetNativePropsHandler.js';
+import { registerNativeModulesCallHandler } from './crossThreadHandlers/registerNativeModulesCallHandler.js';
+import { registerTriggerComponentEventHandler } from './crossThreadHandlers/registerTriggerComponentEventHandler.js';
+import { registerSelectComponentHandler } from './crossThreadHandlers/registerSelectComponentHandler.js';
+import { registerNapiModulesCallHandler } from './crossThreadHandlers/registerNapiModulesCallHandler.js';
+import { registerDispatchLynxViewEventHandler } from './crossThreadHandlers/registerDispatchLynxViewEventHandler.js';
+export function startBackground(backgroundRpc, shadowRoot, callbacks) {
+    registerInvokeUIMethodHandler(backgroundRpc, shadowRoot);
+    registerNativePropsHandler(backgroundRpc, shadowRoot);
+    registerTriggerComponentEventHandler(backgroundRpc, shadowRoot);
+    registerSelectComponentHandler(backgroundRpc, shadowRoot);
+    registerNativeModulesCallHandler(backgroundRpc, callbacks.nativeModulesCall);
+    registerNapiModulesCallHandler(backgroundRpc, callbacks.napiModulesCall);
+    registerDispatchLynxViewEventHandler(backgroundRpc, shadowRoot);
+    const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
+    const markTiming = backgroundRpc.createCall(markTimingEndpoint);
+    const updateDataBackground = backgroundRpc.createCall(updateDataEndpoint);
+    return {
+        sendGlobalEvent,
+        markTiming,
+        updateDataBackground,
+    };
+}
+//# sourceMappingURL=startBackground.js.map

package/dist/uiThread/startUIThread.d.ts

@@ -1,8 +1,9 @@
 import type { LynxView } from '../apis/createLynxView.js';
 import { type LynxTemplate, type MainThreadStartConfigs, type NapiModulesCall, type NativeModulesCall } from '@lynx-js/web-constants';
-export declare function startUIThread(templateUrl: string, configs: Omit<MainThreadStartConfigs, 'template'>, shadowRoot: ShadowRoot, lynxGroupId: number | undefined, callbacks: {
+export type StartUIThreadCallbacks = {
     nativeModulesCall: NativeModulesCall;
     napiModulesCall: NapiModulesCall;
     onError?: () => void;
     customTemplateLoader?: (url: string) => Promise<LynxTemplate>;
-}): LynxView;
+};
+export declare function startUIThread(templateUrl: string, configs: Omit<MainThreadStartConfigs, 'template'>, shadowRoot: ShadowRoot, lynxGroupId: number | undefined, threadStrategy: 'all-on-ui' | 'multi-thread', callbacks: StartUIThreadCallbacks): LynxView;

package/dist/uiThread/startUIThread.js

@@ -1,53 +1,40 @@
 // 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 { registerInvokeUIMethodHandler } from './crossThreadHandlers/registerInvokeUIMethodHandler.js';
-import { registerNativePropsHandler } from './crossThreadHandlers/registerSetNativePropsHandler.js';
-import { registerNativeModulesCallHandler } from './crossThreadHandlers/registerNativeModulesCallHandler.js';
 import { bootWorkers } from './bootWorkers.js';
-import { registerReportErrorHandler } from './crossThreadHandlers/registerReportErrorHandler.js';
-import { registerFlushElementTreeHandler } from './crossThreadHandlers/registerFlushElementTreeHandler.js';
 import { createDispose } from './crossThreadHandlers/createDispose.js';
-import { registerTriggerComponentEventHandler } from './crossThreadHandlers/registerTriggerComponentEventHandler.js';
-import { registerSelectComponentHandler } from './crossThreadHandlers/registerSelectComponentHandler.js';
-import { mainThreadStartEndpoint, markTimingEndpoint, sendGlobalEventEndpoint, } from '@lynx-js/web-constants';
+import {} 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, lynxGroupId, callbacks) {
+import { startBackground } from './startBackground.js';
+import { createRenderMultiThread } from './createRenderMultiThread.js';
+import { createRenderAllOnUI } from './createRenderAllOnUI.js';
+export function startUIThread(templateUrl, configs, shadowRoot, lynxGroupId, threadStrategy, callbacks) {
     const createLynxStartTiming = performance.now() + performance.timeOrigin;
-    const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers(lynxGroupId);
-    const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
-    const mainThreadStart = mainThreadRpc.createCall(mainThreadStartEndpoint);
-    const markTiming = backgroundRpc.createCall(markTimingEndpoint);
+    const allOnUI = threadStrategy === 'all-on-ui';
+    const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers(lynxGroupId, allOnUI);
+    const { markTiming, sendGlobalEvent, updateDataBackground } = startBackground(backgroundRpc, shadowRoot, callbacks);
     const markTimingInternal = (timingKey, pipelineId, timeStamp) => {
         if (!timeStamp)
             timeStamp = performance.now() + performance.timeOrigin;
         markTiming(timingKey, pipelineId, timeStamp);
     };
+    const { start, updateDataMainThread } = allOnUI
+        ? createRenderAllOnUI(
+        /* main-to-bg rpc*/ mainThreadRpc, shadowRoot, markTimingInternal, callbacks)
+        : createRenderMultiThread(
+        /* main-to-ui rpc*/ mainThreadRpc, shadowRoot, callbacks);
     markTimingInternal('create_lynx_start', undefined, createLynxStartTiming);
     markTimingInternal('load_template_start');
     loadTemplate(templateUrl, callbacks.customTemplateLoader).then((template) => {
         markTimingInternal('load_template_end');
-        mainThreadStart({
+        start({
             ...configs,
             template,
         });
     });
-    registerReportErrorHandler(mainThreadRpc, callbacks.onError);
-    registerDispatchLynxViewEventHandler(backgroundRpc, shadowRoot);
-    registerFlushElementTreeHandler(mainThreadRpc, {
-        shadowRoot,
-    });
-    registerInvokeUIMethodHandler(backgroundRpc, shadowRoot);
-    registerNativePropsHandler(backgroundRpc, shadowRoot);
-    registerTriggerComponentEventHandler(backgroundRpc, shadowRoot);
-    registerSelectComponentHandler(backgroundRpc, shadowRoot);
-    registerNativeModulesCallHandler(backgroundRpc, callbacks.nativeModulesCall);
-    registerNapiModulesCallHandler(backgroundRpc, callbacks.napiModulesCall);
     return {
-        updateData: createUpdateData(mainThreadRpc, backgroundRpc),
+        updateData: createUpdateData(updateDataMainThread, updateDataBackground),
         dispose: createDispose(backgroundRpc, terminateWorkers),
         sendGlobalEvent,
     };

package/dist/utils/loadTemplate.js

@@ -82,12 +82,14 @@ const mainThreadInjectVars = [
     '__OnLifecycleEvent',
     '__FlushElementTree',
     '__LoadLepusChunk',
+    'SystemInfo',
 ];
 const backgroundInjectVars = [
     'NativeModules',
     'globalThis',
     'lynx',
     'lynxCoreInject',
+    'SystemInfo',
 ];
 const backgroundInjectWithBind = [
     'Card',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,14 +24,15 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/offscreen-document": "0.0.0",
-    "@lynx-js/web-constants": "0.12.0",
-    "@lynx-js/web-worker-rpc": "0.12.0",
-    "@lynx-js/web-worker-runtime": "0.12.0"
+    "@lynx-js/offscreen-document": "0.0.2",
+    "@lynx-js/web-constants": "0.13.1",
+    "@lynx-js/web-mainthread-apis": "0.13.1",
+    "@lynx-js/web-worker-rpc": "0.13.1",
+    "@lynx-js/web-worker-runtime": "0.13.1"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.2",
-    "@lynx-js/web-elements": "0.6.0"
+    "@lynx-js/web-elements": "0.7.1"
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.2",