@lynx-js/web-core 0.14.0 → 0.14.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @lynx-js/web-core
 
+## 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))
+
+- chore: extract shared logic from web-core and web-core-server's loadTemplate into a unified generateTemplate function ([#1211](https://github.com/lynx-family/lynx-stack/pull/1211))
+
+- 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-worker-runtime@0.14.2
+  - @lynx-js/web-constants@0.14.2
+  - @lynx-js/web-worker-rpc@0.14.2
+
+## 0.14.1
+
+### Patch Changes
+
+- feat: support BTS API `lynx.reportError` && `__SetSourceMapRelease`, now you can use it and handle it in lynx-view error event. ([#1059](https://github.com/lynx-family/lynx-stack/pull/1059))
+
+- fix: under the all-on-ui strategy, reload() will add two page elements. ([#1147](https://github.com/lynx-family/lynx-stack/pull/1147))
+
+- Updated dependencies [[`a64333e`](https://github.com/lynx-family/lynx-stack/commit/a64333ef28228d6b90c32e027f67bef8acbd8432), [`7751375`](https://github.com/lynx-family/lynx-stack/commit/775137521782ca5445f22029c39163c0a63bbfa5), [`b52a924`](https://github.com/lynx-family/lynx-stack/commit/b52a924a2375cb6f7ebafdd8abfbab0254eb2330)]:
+  - @lynx-js/web-worker-runtime@0.14.1
+  - @lynx-js/web-constants@0.14.1
+  - @lynx-js/web-mainthread-apis@0.14.1
+  - @lynx-js/web-worker-rpc@0.14.1
+
 ## 0.14.0
 
 ### Minor Changes

package/dist/apis/LynxView.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 { createLynxView, } from './createLynxView.js';
-import { inShadowRootStyles, } from '@lynx-js/web-constants';
+import { inShadowRootStyles, lynxDisposedAttribute, lynxTagAttribute, } from '@lynx-js/web-constants';
 /**
  * Based on our experiences, these elements are almost used in all lynx cards.
  */
@@ -315,6 +315,10 @@ export class LynxView extends HTMLElement {
     disconnectedCallback() {
         this.#instance?.dispose();
         this.#instance = undefined;
+        // under the all-on-ui strategy, when reload() triggers dsl flush, the previously removed pageElement will be used in __FlushElementTree.
+        // This attribute is added to filter this issue.
+        this.shadowRoot?.querySelector(`[${lynxTagAttribute}="page"]`)
+            ?.setAttribute(lynxDisposedAttribute, '');
         if (this.shadowRoot) {
             this.shadowRoot.innerHTML = '';
         }

package/dist/uiThread/createRenderAllOnUI.d.ts

@@ -1,6 +1,6 @@
 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, callbacks: {
+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;
 }): {
     start: (configs: StartMainThreadContextConfig) => Promise<void>;

package/dist/uiThread/createRenderAllOnUI.js

@@ -2,7 +2,7 @@ import { i18nResourceMissedEventName, I18nResources, } from '@lynx-js/web-consta
 import { Rpc } from '@lynx-js/web-worker-rpc';
 import { dispatchLynxViewEvent } from '../utils/dispatchLynxViewEvent.js';
 const { prepareMainThreadAPIs, } = await import('@lynx-js/web-mainthread-apis');
-export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingInternal, callbacks) {
+export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingInternal, flushMarkTimingInternal, callbacks) {
     if (!globalThis.module) {
         Object.assign(globalThis, { module: {} });
     }
@@ -10,7 +10,7 @@ export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingI
         dispatchLynxViewEvent(shadowRoot, i18nResourceMissedEventName, options);
     };
     const i18nResources = new I18nResources();
-    const { startMainThread } = prepareMainThreadAPIs(mainToBackgroundRpc, shadowRoot, document.createElement.bind(document), () => { }, markTimingInternal, (err, _, release) => {
+    const { startMainThread } = prepareMainThreadAPIs(mainToBackgroundRpc, shadowRoot, document.createElement.bind(document), () => { }, markTimingInternal, flushMarkTimingInternal, (err, _, release) => {
         callbacks.onError?.(err, release);
     }, triggerI18nResourceFallback, (initI18nResources) => {
         i18nResources.setData(initI18nResources);

package/dist/uiThread/startBackground.d.ts

@@ -1,11 +1,9 @@
-import { type Cloneable, type I18nResourceTranslationOptions, type InitI18nResources, type NapiModulesCall, type NativeModulesCall } from '@lynx-js/web-constants';
+import { type Cloneable, type I18nResourceTranslationOptions, type InitI18nResources } 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;
-}): {
+import type { StartUIThreadCallbacks } from './startUIThread.js';
+export declare function startBackground(backgroundRpc: Rpc, shadowRoot: ShadowRoot, callbacks: StartUIThreadCallbacks): {
     sendGlobalEvent: (args_0: string, args_1: Cloneable[] | undefined) => void;
-    markTiming: (timingKey: string, pipelineId: string | undefined, timeStamp: number) => void;
+    markTiming: (args_0: import("@lynx-js/web-constants").MarkTiming[]) => void;
     updateDataBackground: (args_0: Cloneable, args_1: Record<string, string>) => Promise<void>;
     updateI18nResourceBackground: (data: InitI18nResources, options: I18nResourceTranslationOptions) => void;
 };

package/dist/uiThread/startBackground.js

@@ -7,6 +7,7 @@ import { registerSelectComponentHandler } from './crossThreadHandlers/registerSe
 import { registerNapiModulesCallHandler } from './crossThreadHandlers/registerNapiModulesCallHandler.js';
 import { registerDispatchLynxViewEventHandler } from './crossThreadHandlers/registerDispatchLynxViewEventHandler.js';
 import { registerTriggerElementMethodEndpointHandler } from './crossThreadHandlers/registerTriggerElementMethodEndpointHandler.js';
+import { registerReportErrorHandler } from './crossThreadHandlers/registerReportErrorHandler.js';
 export function startBackground(backgroundRpc, shadowRoot, callbacks) {
     registerInvokeUIMethodHandler(backgroundRpc, shadowRoot);
     registerNativePropsHandler(backgroundRpc, shadowRoot);
@@ -16,6 +17,7 @@ export function startBackground(backgroundRpc, shadowRoot, callbacks) {
     registerNapiModulesCallHandler(backgroundRpc, callbacks.napiModulesCall);
     registerDispatchLynxViewEventHandler(backgroundRpc, shadowRoot);
     registerTriggerElementMethodEndpointHandler(backgroundRpc, shadowRoot);
+    registerReportErrorHandler(backgroundRpc, callbacks.onError);
     const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
     const markTiming = backgroundRpc.createCall(markTimingEndpoint);
     const updateDataBackground = backgroundRpc.createCall(updateDataEndpoint);

package/dist/uiThread/startUIThread.js

@@ -3,7 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 import { bootWorkers } from './bootWorkers.js';
 import { createDispose } from './crossThreadHandlers/createDispose.js';
-import { updateGlobalPropsEndpoint, } from '@lynx-js/web-constants';
+import { updateGlobalPropsEndpoint, dispatchMarkTiming, flushMarkTiming, } from '@lynx-js/web-constants';
 import { loadTemplate } from '../utils/loadTemplate.js';
 import { createUpdateData } from './crossThreadHandlers/createUpdateData.js';
 import { startBackground } from './startBackground.js';
@@ -14,20 +14,30 @@ export function startUIThread(templateUrl, configs, shadowRoot, lynxGroupId, thr
     const allOnUI = threadStrategy === 'all-on-ui';
     const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers(lynxGroupId, allOnUI);
     const { markTiming, sendGlobalEvent, updateDataBackground, updateI18nResourceBackground, } = startBackground(backgroundRpc, shadowRoot, callbacks);
+    const cacheMarkTimings = {
+        records: [],
+        timeout: null,
+    };
     const markTimingInternal = (timingKey, pipelineId, timeStamp) => {
-        if (!timeStamp)
-            timeStamp = performance.now() + performance.timeOrigin;
-        markTiming(timingKey, pipelineId, timeStamp);
+        dispatchMarkTiming({
+            timingKey,
+            pipelineId,
+            timeStamp,
+            markTiming,
+            cacheMarkTimings,
+        });
     };
+    const flushMarkTimingInternal = () => flushMarkTiming(markTiming, cacheMarkTimings);
     const { start, updateDataMainThread, updateI18nResourcesMainThread } = allOnUI
         ? createRenderAllOnUI(
-        /* main-to-bg rpc*/ mainThreadRpc, shadowRoot, markTimingInternal, callbacks)
+        /* main-to-bg rpc*/ mainThreadRpc, shadowRoot, markTimingInternal, flushMarkTimingInternal, 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');
+        flushMarkTimingInternal();
         start({
             ...configs,
             template,

package/dist/utils/loadTemplate.js

@@ -1,106 +1,10 @@
-import { globalMuteableVars } from '@lynx-js/web-constants';
-const TemplateCache = {};
+import { generateTemplate } from '@lynx-js/web-constants';
+const templateCache = {};
 function createJsModuleUrl(content) {
     return URL.createObjectURL(new Blob([content], { type: 'text/javascript' }));
 }
-function generateJavascriptUrl(obj, injectVars, injectWithBind, muteableVars) {
-    injectVars = injectVars.concat(muteableVars);
-    return Object.fromEntries(Object.entries(obj).map(([name, content]) => {
-        return [
-            name,
-            createJsModuleUrl([
-                '//# allFunctionsCalledOnLoad\n',
-                'globalThis.module.exports = function(lynx_runtime) {',
-                'const module= {exports:{}};let exports = module.exports;',
-                'var {',
-                injectVars.join(','),
-                '} = lynx_runtime;',
-                ...injectWithBind.map((nm) => `const ${nm} = lynx_runtime.${nm}?.bind(lynx_runtime);`),
-                ';var globDynamicComponentEntry = \'__Card__\';',
-                'var {__globalProps} = lynx;',
-                'lynx_runtime._updateVars=()=>{',
-                ...muteableVars.map((nm) => `${nm} = lynx_runtime.__lynxGlobalBindingValues.${nm};`),
-                '};\n',
-                content,
-                '\n return module.exports;}',
-            ].join('')),
-        ];
-    }));
-}
-const mainThreadInjectVars = [
-    'lynx',
-    'globalThis',
-    '_ReportError',
-    '_SetSourceMapRelease',
-    '__AddConfig',
-    '__AddDataset',
-    '__GetAttributes',
-    '__GetComponentID',
-    '__GetDataByKey',
-    '__GetDataset',
-    '__GetElementConfig',
-    '__GetElementUniqueID',
-    '__GetID',
-    '__GetTag',
-    '__SetAttribute',
-    '__SetConfig',
-    '__SetDataset',
-    '__SetID',
-    '__UpdateComponentID',
-    '__GetConfig',
-    '__UpdateListCallbacks',
-    '__AppendElement',
-    '__ElementIsEqual',
-    '__FirstElement',
-    '__GetChildren',
-    '__GetParent',
-    '__InsertElementBefore',
-    '__LastElement',
-    '__NextElement',
-    '__RemoveElement',
-    '__ReplaceElement',
-    '__ReplaceElements',
-    '__SwapElement',
-    '__CreateComponent',
-    '__CreateElement',
-    '__CreatePage',
-    '__CreateView',
-    '__CreateText',
-    '__CreateRawText',
-    '__CreateImage',
-    '__CreateScrollView',
-    '__CreateWrapperElement',
-    '__CreateList',
-    '__AddEvent',
-    '__GetEvent',
-    '__GetEvents',
-    '__SetEvents',
-    '__AddClass',
-    '__SetClasses',
-    '__GetClasses',
-    '__AddInlineStyle',
-    '__SetInlineStyles',
-    '__SetCSSId',
-    '__OnLifecycleEvent',
-    '__FlushElementTree',
-    '__LoadLepusChunk',
-    'SystemInfo',
-    '_I18nResourceTranslation',
-    '_AddEventListener',
-];
-const backgroundInjectVars = [
-    'NativeModules',
-    'globalThis',
-    'lynx',
-    'lynxCoreInject',
-    'SystemInfo',
-];
-const backgroundInjectWithBind = [
-    'Card',
-    'Component',
-];
 export async function loadTemplate(url, customTemplateLoader) {
-    const cachedTemplate = TemplateCache[url];
+    const cachedTemplate = templateCache[url];
     if (cachedTemplate)
         return cachedTemplate;
     const template = customTemplateLoader
@@ -108,12 +12,8 @@ export async function loadTemplate(url, customTemplateLoader) {
         : (await (await fetch(url, {
             method: 'GET',
         })).json());
-    const decodedTemplate = {
-        ...template,
-        lepusCode: generateJavascriptUrl(template.lepusCode, mainThreadInjectVars, [], globalMuteableVars),
-        manifest: generateJavascriptUrl(template.manifest, backgroundInjectVars, backgroundInjectWithBind, []),
-    };
-    TemplateCache[url] = decodedTemplate;
+    const decodedTemplate = await generateTemplate(template, createJsModuleUrl);
+    templateCache[url] = decodedTemplate;
     /**
      * This will cause a memory leak, which is expected.
      * We cannot ensure that the `URL.createObjectURL` created url will never be used, therefore here we keep it for the entire lifetime of this page.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,14 +25,14 @@
   ],
   "dependencies": {
     "@lynx-js/offscreen-document": "0.1.2",
-    "@lynx-js/web-constants": "0.14.0",
-    "@lynx-js/web-mainthread-apis": "0.14.0",
-    "@lynx-js/web-worker-rpc": "0.14.0",
-    "@lynx-js/web-worker-runtime": "0.14.0"
+    "@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"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.2",
-    "@lynx-js/web-elements": "0.7.6"
+    "@lynx-js/web-elements": "0.7.7"
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.2",