@lynx-js/web-worker-runtime 0.14.1 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @lynx-js/web-worker-runtime
 
+## 0.15.0
+
+### Minor Changes
+
+- refactor: move exposure system to web-core ([#1254](https://github.com/lynx-family/lynx-stack/pull/1254))
+
+  **THIS IS A BREAKING CHANGE**
+
+  **You'll need to upgrade your @lynx-js/web-elements to >= 0.8.0**
+
+  For SSR and better performance, we moved the lynx's exposure system from web-element to web-core.
+
+  Before this commit, we create Intersection observers by creating HTMLElements.
+
+  After this commit, we will create such Intersection observers after dom stabled.
+
+  Also, the setInterval for exposure has been removed, now we use an on time lazy timer for such features.
+
+### Patch Changes
+
+- feat: add `napiModulesPath` to bundle napiModules into worker runtime. ([#1134](https://github.com/lynx-family/lynx-stack/pull/1134))
+
+  Usage:
+
+  ```ts
+  import { pluginWebPlatform } from '@lynx-js/web-platform-rsbuild-plugin';
+  import { defineConfig } from '@rsbuild/core';
+
+  export default defineConfig({
+    plugins: [
+      pluginWebPlatform({
+        // replace with your actual napi-modules file path
+        napiModulesPath: path.resolve(__dirname, './index.napi-modules.ts'),
+      }),
+    ],
+  });
+  ```
+
+  `napi-modules.ts` example:
+
+  ```ts
+  // index.napi-modules.ts
+  export default {
+    custom_module: function(NapiModules, NapiModulesCall) {
+      return {
+        async test(name) {
+          console.log('CustomModule', NapiModules, NapiModulesCall);
+        },
+      };
+    },
+  };
+  ```
+
+- Updated dependencies [[`7b75469`](https://github.com/lynx-family/lynx-stack/commit/7b75469d05dd2ec78bf6e1e54b94c8dff938eb40), [`224c653`](https://github.com/lynx-family/lynx-stack/commit/224c653f370d807281fa0a9ffbb4f4dd5c9d308e)]:
+  - @lynx-js/offscreen-document@0.1.3
+  - @lynx-js/web-mainthread-apis@0.15.0
+  - @lynx-js/web-constants@0.15.0
+  - @lynx-js/web-worker-rpc@0.15.0
+
+## 0.14.2
+
+### Patch Changes
+
+- feat: merge multiple markTiming RPC communication events together and send them together, which can effectively reduce the number of RPC communications. ([#1178](https://github.com/lynx-family/lynx-stack/pull/1178))
+
+- Updated dependencies [[`e44b146`](https://github.com/lynx-family/lynx-stack/commit/e44b146b1bc2b58c0347af7fb4e4157688e07e36), [`5a9b38b`](https://github.com/lynx-family/lynx-stack/commit/5a9b38b783e611aa9761c4cd52191172270c09c7), [`6ca5b91`](https://github.com/lynx-family/lynx-stack/commit/6ca5b9106aade393dfac88914b160960a61a82f2)]:
+  - @lynx-js/web-mainthread-apis@0.14.2
+  - @lynx-js/web-constants@0.14.2
+  - @lynx-js/web-worker-rpc@0.14.2
+
 ## 0.14.1
 
 ### Patch Changes

package/dist/backgroundThread/background-apis/createNapiLoader.js

@@ -1,6 +1,7 @@
 // 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.
+/* LYNX_NAPI_MODULES_IMPORT */
 import { dispatchNapiModuleEndpoint, napiModulesCallEndpoint, } from '@lynx-js/web-constants';
 export const createNapiLoader = async (rpc, napiModulesMap) => {
     const napiModulesCall = rpc.createCall(napiModulesCallEndpoint);
@@ -8,6 +9,7 @@ export const createNapiLoader = async (rpc, napiModulesMap) => {
     await Promise.all(Object.entries(napiModulesMap).map(([moduleName, moduleStr]) => import(/* webpackIgnore: true */ moduleStr).then(module => napiModules[moduleName] = module?.default?.(napiModules, (name, data) => napiModulesCall(name, data, moduleName), (func) => {
         rpc.registerHandler(dispatchNapiModuleEndpoint, (data) => func(data));
     }))));
+    /* LYNX_NAPI_MODULES_ADD */
     return {
         load(moduleName) {
             return napiModules[moduleName];

package/dist/backgroundThread/background-apis/createTimingSystem.d.ts

@@ -5,4 +5,4 @@ export type TimingSystem = {
     markTimingInternal: (timingKey: string, pipelineId?: string) => void;
     pipelineIdToTimingFlags: Map<string, string[]>;
 };
-export declare function createTimingSystem(mainThreadRpc: Rpc, backgroundThreadRpc: Rpc): TimingSystem;
+export declare function createTimingSystem(mainThreadRpc: Rpc, uiThreadRpc: Rpc): TimingSystem;

package/dist/backgroundThread/background-apis/createTimingSystem.js

@@ -6,25 +6,27 @@ const ListenerKeys = {
     onSetup: 'lynx.performance.timing.onSetup',
     onUpdate: 'lynx.performance.timing.onUpdate',
 };
-export function createTimingSystem(mainThreadRpc, backgroundThreadRpc) {
+export function createTimingSystem(mainThreadRpc, uiThreadRpc) {
     let isFp = true;
     const setupTiming = {};
     const pipelineIdToTiming = new Map();
     const pipelineIdToTimingFlags = new Map();
-    const dispatchLynxViewEvent = backgroundThreadRpc.createCall(dispatchLynxViewEventEndpoint);
+    const dispatchLynxViewEvent = uiThreadRpc.createCall(dispatchLynxViewEventEndpoint);
     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, {});
+    function markTimingInternal(markTimingRecords) {
+        for (let { timingKey, pipelineId, timeStamp } of markTimingRecords) {
+            if (!timeStamp)
+                timeStamp = performance.now() + performance.timeOrigin;
+            if (!pipelineId) {
+                setupTiming[timingKey] = timeStamp;
+                continue;
+            }
+            if (!pipelineIdToTiming.has(pipelineId)) {
+                pipelineIdToTiming.set(pipelineId, {});
+            }
+            const timingInfo = pipelineIdToTiming.get(pipelineId);
+            timingInfo[timingKey] = timeStamp;
         }
-        const timingInfo = pipelineIdToTiming.get(pipelineId);
-        timingInfo[timingKey] = timeStamp;
     }
     const registerGlobalEmitter = (globalEventEmitter) => {
         mainThreadRpc.registerHandler(postTimingFlagsEndpoint, (timingFlags, pipelineId) => {
@@ -74,9 +76,9 @@ export function createTimingSystem(mainThreadRpc, backgroundThreadRpc) {
         });
     };
     mainThreadRpc.registerHandler(markTimingEndpoint, markTimingInternal);
-    backgroundThreadRpc.registerHandler(markTimingEndpoint, markTimingInternal);
+    uiThreadRpc.registerHandler(markTimingEndpoint, markTimingInternal);
     return {
-        markTimingInternal,
+        markTimingInternal: (timingKey, pipelineId, timeStamp) => markTimingInternal([{ timingKey, pipelineId, timeStamp }]),
         registerGlobalEmitter,
         pipelineIdToTimingFlags,
     };

package/dist/mainThread/crossThreadHandlers/createMainthreadMarkTimingInternal.d.ts

@@ -1,2 +1,5 @@
 import type { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function createMarkTimingInternal(uiThreadRpc: Rpc): (timingKey: string, pipelineId?: string) => void;
+export declare function createMarkTimingInternal(backgroundThreadRpc: Rpc): {
+    markTimingInternal: (timingKey: string, pipelineId?: string, timeStamp?: number) => void;
+    flushMarkTimingInternal: () => void;
+};

package/dist/mainThread/crossThreadHandlers/createMainthreadMarkTimingInternal.js

@@ -1,14 +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 { markTimingEndpoint } from '@lynx-js/web-constants';
-export function createMarkTimingInternal(uiThreadRpc) {
-    return (timingKey, pipelineId) => {
-        uiThreadRpc.invoke(markTimingEndpoint, [
-            timingKey,
-            pipelineId,
-            performance.now() + performance.timeOrigin,
-        ]);
+import { dispatchMarkTiming, flushMarkTiming, markTimingEndpoint, } from '@lynx-js/web-constants';
+export function createMarkTimingInternal(backgroundThreadRpc) {
+    const markTiming = backgroundThreadRpc.createCall(markTimingEndpoint);
+    const cacheMarkTimings = {
+        records: [],
+        timeout: null,
+    };
+    return {
+        markTimingInternal: (timingKey, pipelineId, timeStamp) => {
+            dispatchMarkTiming({
+                timingKey,
+                pipelineId,
+                timeStamp,
+                markTiming,
+                cacheMarkTimings,
+            });
+        },
+        flushMarkTimingInternal: () => flushMarkTiming(markTiming, cacheMarkTimings),
     };
 }
 //# sourceMappingURL=createMainthreadMarkTimingInternal.js.map

package/dist/mainThread/startMainThread.js

@@ -1,7 +1,7 @@
 // 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 { flushElementTreeEndpoint, mainThreadStartEndpoint, postOffscreenEventEndpoint, reportErrorEndpoint, dispatchLynxViewEventEndpoint, i18nResourceMissedEventName, I18nResources, updateI18nResourcesEndpoint, } from '@lynx-js/web-constants';
+import { flushElementTreeEndpoint, mainThreadStartEndpoint, postOffscreenEventEndpoint, reportErrorEndpoint, dispatchLynxViewEventEndpoint, i18nResourceMissedEventName, I18nResources, updateI18nResourcesEndpoint, multiThreadExposureChangedEndpoint, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
 import { createMarkTimingInternal } from './crossThreadHandlers/createMainthreadMarkTimingInternal.js';
 import { OffscreenDocument } from '@lynx-js/offscreen-document/webworker';
@@ -11,7 +11,7 @@ const { prepareMainThreadAPIs } = await import('@lynx-js/web-mainthread-apis');
 export function startMainThreadWorker(uiThreadPort, backgroundThreadPort) {
     const uiThreadRpc = new Rpc(uiThreadPort, 'main-to-ui');
     const backgroundThreadRpc = new Rpc(backgroundThreadPort, 'main-to-bg');
-    const markTimingInternal = createMarkTimingInternal(backgroundThreadRpc);
+    const { markTimingInternal, flushMarkTimingInternal } = createMarkTimingInternal(backgroundThreadRpc);
     const uiFlush = uiThreadRpc.createCall(flushElementTreeEndpoint);
     const reportError = uiThreadRpc.createCall(reportErrorEndpoint);
     const triggerI18nResourceFallback = (options) => {
@@ -25,7 +25,13 @@ export function startMainThreadWorker(uiThreadPort, backgroundThreadPort) {
     });
     const i18nResources = new I18nResources();
     uiThreadRpc.registerHandler(postOffscreenEventEndpoint, docu[_onEvent]);
-    const { startMainThread } = prepareMainThreadAPIs(backgroundThreadRpc, docu, docu.createElement.bind(docu), docu.commit.bind(docu), markTimingInternal, reportError, triggerI18nResourceFallback, (initI18nResources) => {
+    const sendMultiThreadExposureChangedEndpoint = uiThreadRpc.createCall(multiThreadExposureChangedEndpoint);
+    const { startMainThread } = prepareMainThreadAPIs(backgroundThreadRpc, docu, docu.createElement.bind(docu), (exposureChangedElementUniqueIds) => {
+        docu.commit();
+        sendMultiThreadExposureChangedEndpoint(exposureChangedElementUniqueIds
+            .map(e => e.getAttribute(lynxUniqueIdAttribute))
+            .filter(id => id !== null));
+    }, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, (initI18nResources) => {
         i18nResources.setData(initI18nResources);
         return i18nResources;
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-worker-runtime",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -22,10 +22,10 @@
     "README.md"
   ],
   "dependencies": {
-    "@lynx-js/offscreen-document": "0.1.2",
-    "@lynx-js/web-constants": "0.14.1",
-    "@lynx-js/web-mainthread-apis": "0.14.1",
-    "@lynx-js/web-worker-rpc": "0.14.1"
+    "@lynx-js/offscreen-document": "0.1.3",
+    "@lynx-js/web-constants": "0.15.0",
+    "@lynx-js/web-mainthread-apis": "0.15.0",
+    "@lynx-js/web-worker-rpc": "0.15.0"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.2"