@lynx-js/web-worker-runtime 0.7.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,173 @@
 # @lynx-js/web-worker-runtime
 
+## 0.9.0
+
+### Minor Changes
+
+- feat: `nativeModulesUrl` of lynx-view is changed to `nativeModulesMap`, and the usage is completely aligned with `napiModulesMap`. ([#220](https://github.com/lynx-family/lynx-stack/pull/220))
+
+  "warning: This is a breaking change."
+
+  `nativeModulesMap` will be a map: key is module-name, value should be a esm url which export default a
+  function with two parameters(you never need to use `this`):
+
+  - `NativeModules`: oriented `NativeModules`, which you can use to call
+    other Native-Modules.
+
+  - `NativeModulesCall`: trigger `onNativeModulesCall`, same as the deprecated `this.nativeModulesCall`.
+
+  example:
+
+  ```js
+  const nativeModulesMap = {
+    CustomModule: URL.createObjectURL(
+      new Blob(
+        [
+          `export default function(NativeModules, NativeModulesCall) {
+      return {
+        async getColor(data, callback) {
+          const color = await NativeModulesCall('getColor', data);
+          callback(color);
+        },
+      }
+    };`,
+        ],
+        { type: 'text/javascript' },
+      ),
+    ),
+  };
+  lynxView.nativeModulesMap = nativeModulesMap;
+  ```
+
+  In addition, we will use Promise.all to load `nativeModules`, which will optimize performance in the case of multiple modules.
+
+- refractor: remove entryId concept ([#217](https://github.com/lynx-family/lynx-stack/pull/217))
+
+  After the PR #198
+  All contents are isolated by a shadowroot.
+  Therefore we don't need to add the entryId selector to avoid the lynx-view's style taking effect on the whole page.
+
+### Patch Changes
+
+- refactor: remove customelement defined detecting logic ([#247](https://github.com/lynx-family/lynx-stack/pull/247))
+
+  Before this commit, for those element with tag without `-`, we always try to detect if the `x-${tagName}` is defined.
+
+  After this commit, we pre-define a map(could be override by the `overrideLynxTagToHTMLTagMap`) to make that transformation for tag name.
+
+  This change is a path to SSR and the MTS support.
+
+- Updated dependencies [[`5b5e090`](https://github.com/lynx-family/lynx-stack/commit/5b5e090fdf0e896f1c38a49bf3ed9889117c4fb8), [`b844e75`](https://github.com/lynx-family/lynx-stack/commit/b844e751f566d924256365d37aec4c86c520ec00), [`53230f0`](https://github.com/lynx-family/lynx-stack/commit/53230f012216f3a627853e11d544e4be175c5b9b), [`6f16827`](https://github.com/lynx-family/lynx-stack/commit/6f16827d1f4d7364870d354fc805a8868c110f1e), [`d2d55ef`](https://github.com/lynx-family/lynx-stack/commit/d2d55ef9fe438c35921d9db0daa40d5228822ecc)]:
+  - @lynx-js/web-constants@0.9.0
+  - @lynx-js/web-mainthread-apis@0.9.0
+  - @lynx-js/web-worker-rpc@0.9.0
+
+## 0.8.0
+
+### Minor Changes
+
+- refactor: remove web-elements/lazy and loadNewTag ([#123](https://github.com/lynx-family/lynx-stack/pull/123))
+
+  - remove @lynx-js/web-elements/lazy
+  - remove loadElement
+  - remove loadNewTag callback
+
+  **This is a breaking change**
+
+  Now we removed the default lazy loading preinstalled in web-core
+
+  Please add the following statement in your web project
+
+  ```
+  import "@lynx-js/web-elements/all";
+  ```
+
+### Patch Changes
+
+- feat: add pixelRatio of SystemInfo, now you can use `SystemInfo.pixelRatio`. ([#150](https://github.com/lynx-family/lynx-stack/pull/150))
+
+- feat: add two prop of lynx-view about `napiLoader`: ([#173](https://github.com/lynx-family/lynx-stack/pull/173))
+
+  - `napiModulesMap`: [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
+
+  - `onNapiModulesCall`: [optional] the NapiModule value handler.
+
+  **Warning:** This is the internal implementation of `@lynx-js/lynx-core`. In most cases, this API is not required for projects.
+
+  1. The `napiModulesMap` value should be a esm url which export default a function with two parameters:
+
+  - `NapiModules`: oriented `napiModulesMap`, which you can use to call other Napi-Modules
+
+  - `NapiModulesCall`: trigger `onNapiModulesCall`
+
+  example:
+
+  ```js
+  const color_environment = URL.createObjectURL(
+    new Blob(
+      [
+        `export default function(NapiModules, NapiModulesCall) {
+    return {
+      getColor() {
+        NapiModules.color_methods.getColor({ color: 'green' }, color => {
+          console.log(color);
+        });
+      },
+      ColorEngine: class ColorEngine {
+        getColor(name) {
+          NapiModules.color_methods.getColor({ color: 'green' }, color => {
+            console.log(color);
+          });
+        }
+      },
+    };
+  };`,
+      ],
+      { type: 'text/javascript' },
+    ),
+  );
+
+  const color_methods = URL.createObjectURL(
+    new Blob(
+      [
+        `export default function(NapiModules, NapiModulesCall) {
+    return {
+      async getColor(data, callback) {
+        const color = await NapiModulesCall('getColor', data);
+        callback(color);
+      },
+    };
+  };`,
+      ],
+      { type: 'text/javascript' },
+    ),
+  );
+
+  lynxView.napiModuleMap = {
+    color_environment: color_environment,
+    color_methods: color_methods,
+  };
+  ```
+
+  2. The `onNapiModulesCall` function has three parameters:
+
+  - `name`: the first parameter of `NapiModulesCall`, the function name
+  - `data`: the second parameter of `NapiModulesCall`, data
+  - `moduleName`: the module-name of the called napi-module
+
+  ```js
+  lynxView.onNapiModulesCall = (name, data, moduleName) => {
+    if (name === 'getColor' && moduleName === 'color_methods') {
+      return data.color;
+    }
+  };
+  ```
+
+- Updated dependencies [[`e9e8370`](https://github.com/lynx-family/lynx-stack/commit/e9e8370e070a50cbf65a4ebc46c2e37ea1e0be40), [`ec4e1ce`](https://github.com/lynx-family/lynx-stack/commit/ec4e1ce0d7612d6c0701792a46c78cd52130bad4), [`f0a717c`](https://github.com/lynx-family/lynx-stack/commit/f0a717c630700e16ab0af7f1fe370fd60ac75b30), [`63fab7b`](https://github.com/lynx-family/lynx-stack/commit/63fab7b515b7456750b5f7e06844f244a20ca4f1)]:
+  - @lynx-js/web-mainthread-apis@0.8.0
+  - @lynx-js/web-constants@0.8.0
+  - @lynx-js/web-worker-rpc@0.8.0
+
 ## 0.7.1
 
 ### Patch Changes

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

@@ -0,0 +1,5 @@
+import { type NapiModulesMap } from '@lynx-js/web-constants';
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+export declare const createNapiLoader: (rpc: Rpc, napiModulesMap: NapiModulesMap) => Promise<{
+    load(moduleName: string): Record<string, any> | undefined;
+}>;

package/dist/backgroundThread/background-apis/createNapiLoader.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 { napiModulesCallEndpoint, } from '@lynx-js/web-constants';
+export const createNapiLoader = async (rpc, napiModulesMap) => {
+    const napiModulesCall = rpc.createCall(napiModulesCallEndpoint);
+    const napiModules = {};
+    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)))));
+    return {
+        load(moduleName) {
+            return napiModules[moduleName];
+        },
+    };
+};
+//# sourceMappingURL=createNapiLoader.js.map

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

@@ -1,9 +1,9 @@
 import type { Rpc } from '@lynx-js/web-worker-rpc';
-import { type LynxTemplate, type NativeApp } from '@lynx-js/web-constants';
+import { type LynxTemplate, type NativeApp, type NativeModulesMap } from '@lynx-js/web-constants';
 export declare function createNativeApp(config: {
     template: LynxTemplate;
     uiThreadRpc: Rpc;
     mainThreadRpc: Rpc;
     markTimingInternal: (timingKey: string, pipelineId?: string) => void;
-    customNativeModules: Record<string, Record<string, any>>;
-}): NativeApp;
+    nativeModulesMap: NativeModulesMap;
+}): Promise<NativeApp>;

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

@@ -12,8 +12,8 @@ import { registerOnNativeAppReadyHandler } from './crossThreadHandlers/registerO
 import { registerSendGlobalEventHandler } from './crossThreadHandlers/registerSendGlobalEvent.js';
 import { createJSObjectDestructionObserver } from './crossThreadHandlers/createJSObjectDestructionObserver.js';
 let nativeAppCount = 0;
-export function createNativeApp(config) {
-    const { mainThreadRpc, uiThreadRpc, markTimingInternal, template, customNativeModules, } = config;
+export async function createNativeApp(config) {
+    const { mainThreadRpc, uiThreadRpc, markTimingInternal, template, nativeModulesMap, } = config;
     const { performanceApis, pipelineIdToTimingFlags } = createPerformanceApis(markTimingInternal);
     const callLepusMethod = mainThreadRpc.createCallbackify(callLepusMethodEndpoint, 2);
     const setNativeProps = uiThreadRpc.createCall(setNativePropsEndpoint);
@@ -26,7 +26,7 @@ export function createNativeApp(config) {
         setInterval: setInterval,
         clearTimeout: clearTimeout,
         clearInterval: clearInterval,
-        nativeModuleProxy: createNativeModules(uiThreadRpc, customNativeModules),
+        nativeModuleProxy: await createNativeModules(uiThreadRpc, nativeModulesMap),
         loadScriptAsync: function (sourceURL, callback) {
             const mainfestUrl = template.manifest[`/${sourceURL}`];
             if (mainfestUrl)

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

@@ -1,2 +1,3 @@
+import { type NativeModulesMap } from '@lynx-js/web-constants';
 import type { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function createNativeModules(rpc: Rpc, customNativeModules: Record<string, Record<string, any>>): Record<string, any>;
+export declare function createNativeModules(rpc: Rpc, nativeModulesMap: NativeModulesMap): Promise<Record<string, any>>;

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

@@ -2,7 +2,7 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 import { nativeModulesCallEndpoint, switchExposureService, } from '@lynx-js/web-constants';
-export function createNativeModules(rpc, customNativeModules) {
+export async function createNativeModules(rpc, nativeModulesMap) {
     const switchExposure = rpc.createCall(switchExposureService);
     const nativeModulesCall = rpc.createCall(nativeModulesCallEndpoint);
     const lynxExposureModule = {
@@ -18,35 +18,13 @@ export function createNativeModules(rpc, customNativeModules) {
             nativeModulesCall(name, data, 'bridge').then(callback);
         },
     };
-    return {
+    const nativeModules = {};
+    const customNativeModules = {};
+    await Promise.all(Object.entries(nativeModulesMap).map(([moduleName, moduleStr]) => import(/* webpackIgnore: true */ moduleStr).then(module => customNativeModules[moduleName] = module?.default?.(nativeModules, (name, data) => nativeModulesCall(name, data, moduleName)))));
+    return Object.assign(nativeModules, {
         bridge: bridgeModule,
         LynxExposureModule: lynxExposureModule,
-        ...recursiveFunctionCallBinder(nativeModulesCall, customNativeModules),
-    };
-}
-function recursiveFunctionCallBinder(nativeModulesCall, customNativeModules) {
-    const newObj = Object.fromEntries(Object.entries(customNativeModules).map(([moduleName, moduleImpl]) => {
-        if (typeof moduleImpl === 'object') {
-            for (const [property, value] of Object.entries(moduleImpl)) {
-                if (typeof value === 'function') {
-                    moduleImpl[property] = bindThisContext({
-                        nativeModulesCall,
-                        moduleName,
-                        func: value,
-                    });
-                }
-            }
-        }
-        return [moduleName, moduleImpl];
-    }));
-    return newObj;
-}
-function bindThisContext({ nativeModulesCall, moduleName, func }) {
-    const context = {
-        nativeModulesCall(name, data) {
-            return nativeModulesCall(name, data, moduleName);
-        },
-    };
-    return func.bind(context);
+        ...customNativeModules,
+    });
 }
 //# sourceMappingURL=createNativeModules.js.map

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

@@ -7,6 +7,7 @@ import { createNativeApp } from './createNativeApp.js';
 import { registerDisposeHandler } from './crossThreadHandlers/registerDisposeHandler.js';
 import { createMarkTimingInternal } from './crossThreadHandlers/createBackgroundMarkTimingInternal.js';
 import { BackgroundThreadStartEndpoint } from '@lynx-js/web-constants';
+import { createNapiLoader } from './createNapiLoader.js';
 const lynxCore = import(
 /* webpackMode: "eager" */ '@lynx-js/lynx-core/web');
 export function startBackgroundThread(uiThreadPort, mainThreadPort) {
@@ -16,17 +17,14 @@ export function startBackgroundThread(uiThreadPort, mainThreadPort) {
     markTimingInternal('load_core_start');
     mainThreadRpc.registerHandler(BackgroundThreadStartEndpoint, async (config) => {
         markTimingInternal('load_core_end');
-        const customNativeModules = config.nativeModulesUrl
-            ? (await import(
-            /* webpackIgnore: true */ config.nativeModulesUrl))?.default ?? {}
-            : {};
-        const nativeApp = createNativeApp({
+        const nativeApp = await createNativeApp({
             ...config,
             uiThreadRpc,
             mainThreadRpc,
             markTimingInternal,
-            customNativeModules,
         });
+        globalThis['napiLoaderOnRT' + nativeApp.id] =
+            await createNapiLoader(uiThreadRpc, config.napiModulesMap);
         const nativeLynx = createBackgroundLynx(config, nativeApp, mainThreadRpc);
         lynxCore.then(({ loadCard, destroyCard, callDestroyLifetimeFun }) => {
             loadCard(nativeApp, config, nativeLynx);

package/dist/index.d.ts

@@ -2,4 +2,5 @@ export interface WorkerStartMessage {
     mode: 'main' | 'background';
     toPeerThread: MessagePort;
     toUIThread: MessagePort;
+    pixelRatio: number;
 }

package/dist/index.js

@@ -4,7 +4,9 @@
 import { startBackgroundThread } from './backgroundThread/index.js';
 import { startMainThread } from './mainThread/startMainThread.js';
 self.onmessage = (ev) => {
-    const { mode, toPeerThread, toUIThread } = ev.data;
+    const { mode, toPeerThread, toUIThread, pixelRatio } = ev
+        .data;
+    globalThis.SystemInfo.pixelRatio = pixelRatio;
     if (mode === 'main') {
         startMainThread(toUIThread, toPeerThread);
     }

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 { BackgroundThreadStartEndpoint, mainThreadChunkReadyEndpoint, mainThreadStartEndpoint, onLifecycleEventEndpoint, loadNewTagEndpoint, flushElementTreeEndpoint, } from '@lynx-js/web-constants';
+import { BackgroundThreadStartEndpoint, mainThreadChunkReadyEndpoint, mainThreadStartEndpoint, onLifecycleEventEndpoint, flushElementTreeEndpoint, reportErrorEndpoint, } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
 import { MainThreadRuntime } from '@lynx-js/web-mainthread-apis';
 import { registerCallLepusMethodHandler } from './crossThreadHandlers/registerCallLepusMethodHandler.js';
@@ -16,18 +16,18 @@ export function startMainThread(uiThreadPort, backgroundThreadPort) {
     const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
     const __OnLifecycleEvent = backgroundThreadRpc.createCall(onLifecycleEventEndpoint);
     const mainThreadChunkReady = uiThreadRpc.createCall(mainThreadChunkReadyEndpoint);
-    const onNewTag = uiThreadRpc.createCall(loadNewTagEndpoint);
     const flushElementTree = uiThreadRpc.createCall(flushElementTreeEndpoint);
+    const reportError = uiThreadRpc.createCall(reportErrorEndpoint);
     markTimingInternal('lepus_excute_start');
     uiThreadRpc.registerHandler(mainThreadStartEndpoint, async (config) => {
-        const { globalProps, template, entryId, browserConfig, nativeModulesUrl, } = config;
+        const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, } = config;
         const { styleInfo, pageConfig, customSections, cardType, lepusCode } = template;
         markTimingInternal('decode_start');
         await import(
         /* webpackIgnore: true */ template.lepusCode.root);
         const entry = globalThis.module.exports;
         const runtime = new MainThreadRuntime({
-            entryId,
+            tagMap,
             browserConfig,
             customSections,
             globalProps,
@@ -52,16 +52,14 @@ export function startMainThread(uiThreadPort, backgroundThreadPort) {
                         template,
                         cardType: cardType ?? 'react',
                         customSections: Object.fromEntries(Object.entries(customSections).filter(([, value]) => value.type !== 'lazy').map(([k, v]) => [k, v.content])),
-                        nativeModulesUrl,
+                        nativeModulesMap,
+                        napiModulesMap,
                     });
                     runtime.renderPage(initData);
                     runtime.__FlushElementTree(undefined, {});
                 },
-                onNewTag,
                 flushElementTree,
-                _ReportError: function (error, info) {
-                    console.error('main-thread:', error, info);
-                },
+                _ReportError: reportError,
                 __OnLifecycleEvent,
                 /**
                  * Note :

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-worker-runtime",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -22,9 +22,9 @@
     "README.md"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "0.7.1",
-    "@lynx-js/web-mainthread-apis": "0.7.1",
-    "@lynx-js/web-worker-rpc": "0.7.1"
+    "@lynx-js/web-constants": "0.9.0",
+    "@lynx-js/web-mainthread-apis": "0.9.0",
+    "@lynx-js/web-worker-rpc": "0.9.0"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.0"

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

@@ -1,2 +0,0 @@
-import type { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function createReportError(rpc: Rpc): (error: Error, info?: unknown) => void;

package/dist/mainThread/crossThreadHandlers/createReportError.js

@@ -1,10 +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 { reportErrorEndpoint } from '@lynx-js/web-constants';
-export function createReportError(rpc) {
-    return (error, info) => {
-        rpc.invoke(reportErrorEndpoint, ['main-thread', error.toString(), info]);
-    };
-}
-//# sourceMappingURL=createReportError.js.map