@lynx-js/web-core 0.14.2 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @lynx-js/web-core
 
+## 0.15.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @lynx-js/web-mainthread-apis@0.15.1
+  - @lynx-js/web-worker-runtime@0.15.1
+  - @lynx-js/web-constants@0.15.1
+  - @lynx-js/web-worker-rpc@0.15.1
+
+## 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
+
+- refactor: improve `linear-weight-sum` performance ([#1216](https://github.com/lynx-family/lynx-stack/pull/1216))
+
+- feat: lynx-view error event adds a new parameter: `e.detail.fileName`, which will be determined by the file location where the error occurred, either `lepus.js` or `app-service.js`. ([#1242](https://github.com/lynx-family/lynx-stack/pull/1242))
+
+- perf: use rust implemented style transformer ([#1094](https://github.com/lynx-family/lynx-stack/pull/1094))
+
+- Updated dependencies [[`7b75469`](https://github.com/lynx-family/lynx-stack/commit/7b75469d05dd2ec78bf6e1e54b94c8dff938eb40), [`f54a7aa`](https://github.com/lynx-family/lynx-stack/commit/f54a7aa539ad56ccd1e7e1b49d7ee59e742fe493), [`224c653`](https://github.com/lynx-family/lynx-stack/commit/224c653f370d807281fa0a9ffbb4f4dd5c9d308e)]:
+  - @lynx-js/offscreen-document@0.1.3
+  - @lynx-js/web-worker-runtime@0.15.0
+  - @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

package/dist/apis/LynxView.js

@@ -385,7 +385,7 @@ export class LynxView extends HTMLElement {
                             napiModulesCall: (...args) => {
                                 return this.#onNapiModulesCall?.(...args);
                             },
-                            onError: (error, release) => {
+                            onError: (error, release, fileName) => {
                                 this.dispatchEvent(new CustomEvent('error', {
                                     detail: {
                                         sourceMap: {
@@ -396,6 +396,7 @@ export class LynxView extends HTMLElement {
                                         },
                                         error,
                                         release,
+                                        fileName,
                                     },
                                 }));
                             },

package/dist/uiThread/createRenderAllOnUI.d.ts

@@ -1,7 +1,7 @@
 import { type StartMainThreadContextConfig, type Cloneable } 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, flushMarkTimingInternal: () => void, callbacks: {
-    onError?: (err: Error, release: string) => void;
+    onError?: (err: Error, release: string, fileName: string) => void;
 }): {
     start: (configs: StartMainThreadContextConfig) => Promise<void>;
     updateDataMainThread: (args_0: Cloneable, args_1: Record<string, string>) => Promise<void>;

package/dist/uiThread/createRenderAllOnUI.js

@@ -1,6 +1,10 @@
+// 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 { i18nResourceMissedEventName, I18nResources, } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
 import { dispatchLynxViewEvent } from '../utils/dispatchLynxViewEvent.js';
+import { createExposureMonitor } from './crossThreadHandlers/createExposureMonitor.js';
 const { prepareMainThreadAPIs, } = await import('@lynx-js/web-mainthread-apis');
 export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingInternal, flushMarkTimingInternal, callbacks) {
     if (!globalThis.module) {
@@ -10,8 +14,9 @@ export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingI
         dispatchLynxViewEvent(shadowRoot, i18nResourceMissedEventName, options);
     };
     const i18nResources = new I18nResources();
-    const { startMainThread } = prepareMainThreadAPIs(mainToBackgroundRpc, shadowRoot, document.createElement.bind(document), () => { }, markTimingInternal, flushMarkTimingInternal, (err, _, release) => {
-        callbacks.onError?.(err, release);
+    const { exposureChangedCallback } = createExposureMonitor(shadowRoot);
+    const { startMainThread } = prepareMainThreadAPIs(mainToBackgroundRpc, shadowRoot, document.createElement.bind(document), exposureChangedCallback, markTimingInternal, flushMarkTimingInternal, (err, _, release) => {
+        callbacks.onError?.(err, release, 'lepus.js');
     }, triggerI18nResourceFallback, (initI18nResources) => {
         i18nResources.setData(initI18nResources);
         return i18nResources;

package/dist/uiThread/createRenderMultiThread.d.ts

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

package/dist/uiThread/createRenderMultiThread.js

@@ -1,13 +1,16 @@
+// 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 { mainThreadStartEndpoint, updateDataEndpoint, updateI18nResourcesEndpoint, } from '@lynx-js/web-constants';
 import { registerReportErrorHandler } from './crossThreadHandlers/registerReportErrorHandler.js';
 import { registerFlushElementTreeHandler } from './crossThreadHandlers/registerFlushElementTreeHandler.js';
 import { registerDispatchLynxViewEventHandler } from './crossThreadHandlers/registerDispatchLynxViewEventHandler.js';
+import { createExposureMonitorForMultiThread } from './crossThreadHandlers/createExposureMonitor.js';
 export function createRenderMultiThread(mainThreadRpc, shadowRoot, callbacks) {
-    registerReportErrorHandler(mainThreadRpc, callbacks.onError);
-    registerFlushElementTreeHandler(mainThreadRpc, {
-        shadowRoot,
-    });
+    registerReportErrorHandler(mainThreadRpc, 'lepus.js', callbacks.onError);
+    registerFlushElementTreeHandler(mainThreadRpc, { shadowRoot });
     registerDispatchLynxViewEventHandler(mainThreadRpc, shadowRoot);
+    createExposureMonitorForMultiThread(mainThreadRpc, shadowRoot);
     const start = mainThreadRpc.createCall(mainThreadStartEndpoint);
     const updateDataMainThread = mainThreadRpc.createCall(updateDataEndpoint);
     const updateI18nResourcesMainThread = mainThreadRpc.createCall(updateI18nResourcesEndpoint);

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

@@ -0,0 +1,5 @@
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+export declare function createExposureMonitor(rootDom: ShadowRoot): {
+    exposureChangedCallback(targets?: Element[]): void;
+};
+export declare function createExposureMonitorForMultiThread(rpc: Rpc, rootDom: ShadowRoot): void;

package/dist/uiThread/crossThreadHandlers/createExposureMonitor.js

@@ -0,0 +1,117 @@
+// Copyright 2024 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 { convertLengthToPx } from '../../utils/convertLengthToPx.js';
+import { lynxUniqueIdAttribute, multiThreadExposureChangedEndpoint, } from '@lynx-js/web-constants';
+const scrollContainerDom = Symbol.for('lynx-scroll-container-dom');
+export function createExposureMonitor(rootDom) {
+    const intersectionObservers = new WeakMap();
+    const exposureIdOldValues = new WeakMap();
+    const exposedElements = new WeakSet();
+    const sendExposureEvent = (target, isIntersecting, exposureId) => {
+        const exposureScene = target.getAttribute('exposure-scene') ?? '';
+        const detail = {
+            exposureID: exposureId,
+            exposureScene,
+            'exposure-id': exposureId,
+            'exposure-scene': exposureScene,
+        };
+        const appearEvent = new CustomEvent(isIntersecting ? 'uiappear' : 'uidisappear', {
+            bubbles: false,
+            composed: false,
+            cancelable: true,
+            detail,
+        });
+        const exposureEvent = new CustomEvent(isIntersecting ? 'exposure' : 'disexposure', {
+            bubbles: true,
+            composed: false,
+            cancelable: false,
+            detail,
+        });
+        Object.assign(appearEvent, detail);
+        target.dispatchEvent(appearEvent);
+        target.dispatchEvent(exposureEvent);
+    };
+    const intersectionObserverCallback = (entries) => {
+        entries.forEach(({ target, isIntersecting }) => {
+            if (isIntersecting && !exposedElements.has(target)) {
+                sendExposureEvent(target, true, target.getAttribute('exposure-id'));
+                exposedElements.add(target);
+            }
+            else {
+                sendExposureEvent(target, false, target.getAttribute('exposure-id'));
+                exposedElements.delete(target);
+            }
+        });
+    };
+    const startIntersectionObserver = (target) => {
+        const threshold = parseFloat(target.getAttribute('exposure-area') ?? '0')
+            / 100;
+        const screenMarginTop = convertLengthToPx(target, target.getAttribute('exposure-screen-margin-top'));
+        const screenMarginRight = convertLengthToPx(target, target.getAttribute('exposure-screen-margin-right'));
+        const screenMarginBottom = convertLengthToPx(target, target.getAttribute('exposure-screen-margin-bottom'));
+        const screenMarginLeft = convertLengthToPx(target, target.getAttribute('exposure-screen-margin-left'));
+        const uiMarginTop = convertLengthToPx(target, target.getAttribute('exposure-ui-margin-top'));
+        const uiMarginRight = convertLengthToPx(target, target.getAttribute('exposure-ui-margin-right'));
+        const uiMarginBottom = convertLengthToPx(target, target.getAttribute('exposure-ui-margin-bottom'));
+        const uiMarginLeft = convertLengthToPx(target, target.getAttribute('exposure-ui-margin-left'));
+        /**
+         * TODO: @haoyang.wang support the switch `enableExposureUIMargin`
+         */
+        const calcedRootMarginTop = (uiMarginBottom ? -1 : 1)
+            * (screenMarginTop - uiMarginBottom);
+        const calcedRootMarginRight = (uiMarginLeft ? -1 : 1)
+            * (screenMarginRight - uiMarginLeft);
+        const calcedRootMarginBottom = (uiMarginTop ? -1 : 1)
+            * (screenMarginBottom - uiMarginTop);
+        const calcedRootMarginLeft = (uiMarginRight ? -1 : 1)
+            * (screenMarginLeft - uiMarginRight);
+        // get the parent scroll container
+        let root = target.parentElement;
+        while (root) {
+            // @ts-expect-error
+            if (root[scrollContainerDom]) {
+                // @ts-expect-error
+                root = root[scrollContainerDom];
+                break;
+            }
+            else {
+                root = root.parentElement;
+            }
+        }
+        const rootContainer = root ?? rootDom.parentElement;
+        const intersectionObserver = new IntersectionObserver(intersectionObserverCallback, {
+            rootMargin: `${calcedRootMarginTop}px ${calcedRootMarginRight}px ${calcedRootMarginBottom}px ${calcedRootMarginLeft}px`,
+            root: rootContainer,
+            threshold,
+        });
+        intersectionObserver.observe(target);
+        intersectionObservers.set(target, intersectionObserver);
+    };
+    const exposureChangedCallback = (targets) => {
+        targets.forEach((target) => {
+            const exposureIdOldValue = exposureIdOldValues.get(target) ?? null;
+            const exposureIdNewValue = target.getAttribute('exposure-id');
+            if (exposureIdOldValue !== null) {
+                sendExposureEvent(target, false, exposureIdOldValue);
+            }
+            exposureIdOldValues.set(target, exposureIdNewValue);
+            intersectionObservers.get(target)?.disconnect();
+            intersectionObservers.delete(target);
+            exposedElements.delete(target);
+            if (target.getAttribute('exposure-id') !== null) {
+                startIntersectionObserver(target);
+            }
+        });
+    };
+    return {
+        exposureChangedCallback,
+    };
+}
+export function createExposureMonitorForMultiThread(rpc, rootDom) {
+    const { exposureChangedCallback } = createExposureMonitor(rootDom);
+    rpc.registerHandler(multiThreadExposureChangedEndpoint, (uniqueIds) => {
+        exposureChangedCallback(uniqueIds.map(id => rootDom.querySelector(`[${lynxUniqueIdAttribute}="${id}"]`)).filter(el => el !== null));
+    });
+}
+//# sourceMappingURL=createExposureMonitor.js.map

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

@@ -1,2 +1,2 @@
 import type { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function registerReportErrorHandler(rpc: Rpc, onError?: (e: Error, release: string) => void): void;
+export declare function registerReportErrorHandler(rpc: Rpc, fileName: string, onError?: (e: Error, release: string, fileName: string) => void): void;

package/dist/uiThread/crossThreadHandlers/registerReportErrorHandler.js

@@ -2,9 +2,9 @@
 // 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 registerReportErrorHandler(rpc, onError) {
+export function registerReportErrorHandler(rpc, fileName, onError) {
     rpc.registerHandler(reportErrorEndpoint, (e, _, release) => {
-        onError?.(e, release);
+        onError?.(e, release, fileName);
     });
 }
 //# sourceMappingURL=registerReportErrorHandler.js.map

package/dist/uiThread/startBackground.js

@@ -17,7 +17,7 @@ export function startBackground(backgroundRpc, shadowRoot, callbacks) {
     registerNapiModulesCallHandler(backgroundRpc, callbacks.napiModulesCall);
     registerDispatchLynxViewEventHandler(backgroundRpc, shadowRoot);
     registerTriggerElementMethodEndpointHandler(backgroundRpc, shadowRoot);
-    registerReportErrorHandler(backgroundRpc, callbacks.onError);
+    registerReportErrorHandler(backgroundRpc, 'app-service.js', callbacks.onError);
     const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
     const markTiming = backgroundRpc.createCall(markTimingEndpoint);
     const updateDataBackground = backgroundRpc.createCall(updateDataEndpoint);

package/dist/uiThread/startUIThread.d.ts

@@ -3,7 +3,7 @@ import { type LynxTemplate, type StartMainThreadContextConfig, type NapiModulesC
 export type StartUIThreadCallbacks = {
     nativeModulesCall: NativeModulesCall;
     napiModulesCall: NapiModulesCall;
-    onError?: (err: Error, release: string) => void;
+    onError?: (err: Error, release: string, fileName: string) => void;
     customTemplateLoader?: (url: string) => Promise<LynxTemplate>;
 };
 export declare function startUIThread(templateUrl: string, configs: Omit<StartMainThreadContextConfig, 'template'>, shadowRoot: ShadowRoot, lynxGroupId: number | undefined, threadStrategy: 'all-on-ui' | 'multi-thread', callbacks: StartUIThreadCallbacks): LynxView;

package/dist/utils/convertLengthToPx.d.ts

@@ -0,0 +1 @@
+export declare function convertLengthToPx(targetElement: HTMLElement, str: string | null, isWidth?: boolean): number;

package/dist/utils/convertLengthToPx.js

@@ -0,0 +1,25 @@
+// Copyright 2024 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.
+export function convertLengthToPx(targetElement, str, isWidth) {
+    if (str) {
+        str = str.trim();
+        if (str.endsWith('px')) {
+            return Number(str.substring(0, str.length - 2));
+        }
+        else if (str.endsWith('%')) {
+            const pct = Number(str.substring(0, str.length - 1));
+            const { width, height } = targetElement.getBoundingClientRect();
+            const base = isWidth ? width : height;
+            return (base * pct) / 100;
+        }
+        else {
+            /**
+             * TODO (haoyang.wang): support rpx
+             */
+            return 0;
+        }
+    }
+    return 0;
+}
+//# sourceMappingURL=convertLengthToPx.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.14.2",
+  "version": "0.15.1",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,18 +24,18 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/offscreen-document": "0.1.2",
-    "@lynx-js/web-constants": "0.14.2",
-    "@lynx-js/web-mainthread-apis": "0.14.2",
-    "@lynx-js/web-worker-rpc": "0.14.2",
-    "@lynx-js/web-worker-runtime": "0.14.2"
+    "@lynx-js/offscreen-document": "0.1.3",
+    "@lynx-js/web-constants": "0.15.1",
+    "@lynx-js/web-mainthread-apis": "0.15.1",
+    "@lynx-js/web-worker-runtime": "0.15.1",
+    "@lynx-js/web-worker-rpc": "0.15.1"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.2",
-    "@lynx-js/web-elements": "0.7.7"
+    "@lynx-js/web-elements": "0.8.0"
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.2",
-    "@lynx-js/web-elements": ">=0.6.0"
+    "@lynx-js/web-elements": ">0.7.7"
   }
 }