@lynx-js/web-core 0.15.7 → 0.16.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @lynx-js/web-core
 
+## 0.16.1
+
+### Patch Changes
+
+- refactor: improve chunk loading ([#1703](https://github.com/lynx-family/lynx-stack/pull/1703))
+
+- feat: supports lazy bundle. (This feature requires `@lynx-js/lynx-core >= 0.1.3`) ([#1235](https://github.com/lynx-family/lynx-stack/pull/1235))
+
+- Updated dependencies [[`608f375`](https://github.com/lynx-family/lynx-stack/commit/608f375e20732cc4c9f141bfbf9800ba6896100b)]:
+  - @lynx-js/web-mainthread-apis@0.16.1
+  - @lynx-js/web-worker-runtime@0.16.1
+  - @lynx-js/web-constants@0.16.1
+  - @lynx-js/web-worker-rpc@0.16.1
+
+## 0.16.0
+
+### Minor Changes
+
+- refactor: provide the mts a real globalThis ([#1589](https://github.com/lynx-family/lynx-stack/pull/1589))
+
+  Before this change, We create a function wrapper and a fake globalThis for Javascript code.
+
+  This caused some issues.
+
+  After this change, we will create an iframe for createing an isolated Javascript context.
+
+  This means the globalThis will be the real one.
+
+### Patch Changes
+
+- refactor: add `:not([l-e-name])` at the end of selector for lazy component ([#1622](https://github.com/lynx-family/lynx-stack/pull/1622))
+
+- feat: remove multi-thread mts heating ([#1597](https://github.com/lynx-family/lynx-stack/pull/1597))
+
+  The default rendering mode is "all-on-ui". Therefore the preheating for "multi-thread" will be removed.
+
+- fix: the SystemInfo in bts should be assigned to the globalThis ([#1599](https://github.com/lynx-family/lynx-stack/pull/1599))
+
+- Updated dependencies [[`1a32dd8`](https://github.com/lynx-family/lynx-stack/commit/1a32dd886fe736c95639f67028cf7685377d9769), [`bb53d9a`](https://github.com/lynx-family/lynx-stack/commit/bb53d9a035f607e7c89952098d4ed77877a2e3c1), [`1a32dd8`](https://github.com/lynx-family/lynx-stack/commit/1a32dd886fe736c95639f67028cf7685377d9769), [`c1f8715`](https://github.com/lynx-family/lynx-stack/commit/c1f8715a81b2e69ff46fc363013626db4468c209)]:
+  - @lynx-js/web-mainthread-apis@0.16.0
+  - @lynx-js/web-constants@0.16.0
+  - @lynx-js/web-worker-runtime@0.16.0
+  - @lynx-js/offscreen-document@0.1.4
+  - @lynx-js/web-worker-rpc@0.16.0
+
 ## 0.15.7
 
 ### Patch Changes

package/dist/uiThread/bootWorkers.d.ts

@@ -1,8 +1,9 @@
+import { type BrowserConfig } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
 interface LynxViewRpc {
     mainThreadRpc: Rpc;
     backgroundRpc: Rpc;
     terminateWorkers: () => void;
 }
-export declare function bootWorkers(lynxGroupId: number | undefined, allOnUI?: boolean): LynxViewRpc;
+export declare function bootWorkers(lynxGroupId: number | undefined, allOnUI: boolean, browserConfig: BrowserConfig): LynxViewRpc;
 export {};

package/dist/uiThread/bootWorkers.js

@@ -1,20 +1,19 @@
 // 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 { systemInfo } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
 const backgroundWorkerContextCount = [];
 const contextIdToBackgroundWorker = [];
-let preHeatedMainWorker = createMainWorker();
-export function bootWorkers(lynxGroupId, allOnUI) {
+export function bootWorkers(lynxGroupId, allOnUI, browserConfig) {
     let curMainWorker;
     if (allOnUI) {
         curMainWorker = createUIChannel();
     }
     else {
-        curMainWorker = preHeatedMainWorker;
-        preHeatedMainWorker = createMainWorker();
+        curMainWorker = createMainWorker();
     }
-    const curBackgroundWorker = createBackgroundWorker(lynxGroupId, curMainWorker.channelMainThreadWithBackground);
+    const curBackgroundWorker = createBackgroundWorker(lynxGroupId, curMainWorker.channelMainThreadWithBackground, browserConfig);
     if (lynxGroupId !== undefined) {
         if (backgroundWorkerContextCount[lynxGroupId]) {
             backgroundWorkerContextCount[lynxGroupId]++;
@@ -71,7 +70,7 @@ function createMainWorker() {
         channelMainThreadWithBackground,
     };
 }
-function createBackgroundWorker(lynxGroupId, channelMainThreadWithBackground) {
+function createBackgroundWorker(lynxGroupId, channelMainThreadWithBackground, browserConfig) {
     const channelToBackground = new MessageChannel();
     let backgroundThreadWorker;
     if (lynxGroupId) {
@@ -86,6 +85,7 @@ function createBackgroundWorker(lynxGroupId, channelMainThreadWithBackground) {
         mode: 'background',
         toUIThread: channelToBackground.port2,
         toPeerThread: channelMainThreadWithBackground.port2,
+        systemInfo: { ...systemInfo, ...browserConfig },
     };
     backgroundThreadWorker.postMessage(backgroundThreadMessage, [
         channelToBackground.port2,
@@ -95,7 +95,12 @@ function createBackgroundWorker(lynxGroupId, channelMainThreadWithBackground) {
     return { backgroundRpc, backgroundThreadWorker };
 }
 function createWebWorker(name) {
-    return new Worker(new URL('@lynx-js/web-worker-runtime', import.meta.url), {
+    return new Worker(
+    /* webpackFetchPriority: "high" */
+    /* webpackChunkName: "web-core-worker-runtime" */
+    /* webpackPrefetch: true */
+    /* webpackPreload: true */
+    new URL('@lynx-js/web-worker-runtime', import.meta.url), {
         type: 'module',
         name,
     });

package/dist/uiThread/createRenderAllOnUI.d.ts

@@ -1,8 +1,7 @@
-import { type StartMainThreadContextConfig, type Cloneable, type SSRDumpInfo } from '@lynx-js/web-constants';
+import { type StartMainThreadContextConfig, type Cloneable, type SSRDumpInfo, type TemplateLoader } 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, fileName: string) => void;
-}, ssrDumpInfo: SSRDumpInfo | undefined): {
+import type { StartUIThreadCallbacks } from './startUIThread.js';
+export declare function createRenderAllOnUI(mainToBackgroundRpc: Rpc, shadowRoot: ShadowRoot, loadTemplate: TemplateLoader, markTimingInternal: (timingKey: string, pipelineId?: string, timeStamp?: number) => void, flushMarkTimingInternal: () => void, callbacks: StartUIThreadCallbacks, ssrDumpInfo: SSRDumpInfo | undefined): {
     start: (configs: StartMainThreadContextConfig) => Promise<void>;
     updateDataMainThread: (args_0: Cloneable, args_1: Record<string, string>) => Promise<void>;
     updateI18nResourcesMainThread: (data: Cloneable) => void;

package/dist/uiThread/createRenderAllOnUI.js

@@ -5,8 +5,71 @@ import { i18nResourceMissedEventName, I18nResources, lynxUniqueIdAttribute, } fr
 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, ssrDumpInfo) {
+const { prepareMainThreadAPIs, } = await import(
+/* webpackChunkName: "web-core-main-thread-apis" */
+/* webpackMode: "lazy-once" */
+/* webpackPreload: true */
+/* webpackPrefetch: true */
+/* webpackFetchPriority: "high" */
+'@lynx-js/web-mainthread-apis');
+/**
+ * Creates a isolated JavaScript context for executing mts code.
+ * This context has its own global variables and functions.
+ */
+function createIFrameRealm(parent) {
+    const iframe = document.createElement('iframe');
+    const iframeLoaded = new Promise((resolve) => {
+        iframe.onload = () => resolve();
+    });
+    iframe.style.display = 'none';
+    iframe.src = 'about:blank';
+    parent.appendChild(iframe);
+    const iframeWindow = iframe.contentWindow;
+    const iframeDocument = iframe.contentDocument;
+    const loadScript = (url) => {
+        return new Promise(async (resolve, reject) => {
+            if (iframeDocument.readyState !== 'complete') {
+                await iframeLoaded;
+            }
+            const script = iframeDocument.createElement('script');
+            script.src = url;
+            script.fetchPriority = 'high';
+            script.defer = true;
+            script.async = false;
+            script.onload = () => {
+                const ret = iframeWindow?.module?.exports;
+                // @ts-expect-error
+                iframeWindow.module = { exports: undefined };
+                resolve(ret);
+            };
+            script.onerror = (err) => reject(new Error(`Failed to load script: ${url}`, { cause: err }));
+            // @ts-expect-error
+            iframeWindow.module = { exports: undefined };
+            iframe.contentDocument.head.appendChild(script);
+        });
+    };
+    const loadScriptSync = (url) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', url, false); // Synchronous request
+        xhr.send(null);
+        if (xhr.status === 200) {
+            const script = iframe.contentDocument.createElement('script');
+            script.textContent = xhr.responseText;
+            // @ts-expect-error
+            iframeWindow.module = { exports: undefined };
+            iframe.contentDocument.head.appendChild(script);
+            const ret = iframeWindow?.module?.exports;
+            // @ts-expect-error
+            iframeWindow.module = { exports: undefined };
+            return ret;
+        }
+        else {
+            throw new Error(`Failed to load script: ${url}`, { cause: xhr });
+        }
+    };
+    return { globalWindow: iframeWindow, loadScript, loadScriptSync };
+}
+export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, loadTemplate, markTimingInternal, flushMarkTimingInternal, callbacks, ssrDumpInfo) {
     if (!globalThis.module) {
         Object.assign(globalThis, { module: {} });
     }
@@ -15,13 +78,14 @@ export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingI
     };
     const i18nResources = new I18nResources();
     const { exposureChangedCallback } = createExposureMonitor(shadowRoot);
-    const { startMainThread } = prepareMainThreadAPIs(mainToBackgroundRpc, shadowRoot, document.createElement.bind(document), exposureChangedCallback, markTimingInternal, flushMarkTimingInternal, (err, _, release) => {
+    const mtsRealm = createIFrameRealm(shadowRoot);
+    const mtsGlobalThis = mtsRealm.globalWindow;
+    const { startMainThread } = prepareMainThreadAPIs(mainToBackgroundRpc, shadowRoot, document, mtsRealm, exposureChangedCallback, markTimingInternal, flushMarkTimingInternal, (err, _, release) => {
         callbacks.onError?.(err, release, 'lepus.js');
     }, triggerI18nResourceFallback, (initI18nResources) => {
         i18nResources.setData(initI18nResources);
         return i18nResources;
-    });
-    let mtsGlobalThis;
+    }, loadTemplate);
     const pendingUpdateCalls = [];
     const start = async (configs) => {
         if (ssrDumpInfo) {
@@ -46,7 +110,7 @@ export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingI
                     }
                 }
             }
-            mtsGlobalThis = await startMainThread(configs, {
+            await startMainThread(configs, {
                 // @ts-expect-error
                 lynxUniqueIdToElement: lynxUniqueIdToElement,
                 lynxUniqueIdToStyleRulesIndex,
@@ -55,7 +119,7 @@ export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingI
             });
         }
         else {
-            mtsGlobalThis = await startMainThread(configs);
+            await startMainThread(configs);
         }
         // Process any pending update calls that were queued while mtsGlobalThis was undefined
         for (const args of pendingUpdateCalls) {

package/dist/uiThread/createRenderMultiThread.d.ts

@@ -1,7 +1,7 @@
+import { type TemplateLoader } from '@lynx-js/web-constants';
 import type { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function createRenderMultiThread(mainThreadRpc: Rpc, shadowRoot: ShadowRoot, callbacks: {
-    onError?: (err: Error, release: string, fileName: string) => void;
-}): {
+import type { StartUIThreadCallbacks } from './startUIThread.js';
+export declare function createRenderMultiThread(mainThreadRpc: Rpc, shadowRoot: ShadowRoot, loadTemplate: TemplateLoader, callbacks: StartUIThreadCallbacks): {
     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>;
     updateI18nResourcesMainThread: (args_0: import("@lynx-js/web-constants").Cloneable) => void;

package/dist/uiThread/createRenderMultiThread.js

@@ -1,16 +1,17 @@
 // 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 { loadTemplateMultiThread, 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) {
+export function createRenderMultiThread(mainThreadRpc, shadowRoot, loadTemplate, callbacks) {
     registerReportErrorHandler(mainThreadRpc, 'lepus.js', callbacks.onError);
     registerFlushElementTreeHandler(mainThreadRpc, { shadowRoot });
     registerDispatchLynxViewEventHandler(mainThreadRpc, shadowRoot);
     createExposureMonitorForMultiThread(mainThreadRpc, shadowRoot);
+    mainThreadRpc.registerHandler(loadTemplateMultiThread, loadTemplate);
     const start = mainThreadRpc.createCall(mainThreadStartEndpoint);
     const updateDataMainThread = mainThreadRpc.createCall(updateDataEndpoint);
     const updateI18nResourcesMainThread = mainThreadRpc.createCall(updateI18nResourcesEndpoint);

package/dist/uiThread/startUIThread.d.ts

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

package/dist/uiThread/startUIThread.js

@@ -4,7 +4,7 @@
 import { bootWorkers } from './bootWorkers.js';
 import { createDispose } from './crossThreadHandlers/createDispose.js';
 import { updateGlobalPropsEndpoint, dispatchMarkTiming, flushMarkTiming, } from '@lynx-js/web-constants';
-import { loadTemplate } from '../utils/loadTemplate.js';
+import { createTemplateLoader } from '../utils/loadTemplate.js';
 import { createUpdateData } from './crossThreadHandlers/createUpdateData.js';
 import { startBackground } from './startBackground.js';
 import { createRenderMultiThread } from './createRenderMultiThread.js';
@@ -12,7 +12,7 @@ import { createRenderAllOnUI } from './createRenderAllOnUI.js';
 export function startUIThread(templateUrl, configs, shadowRoot, lynxGroupId, threadStrategy, callbacks, ssr) {
     const createLynxStartTiming = performance.now() + performance.timeOrigin;
     const allOnUI = threadStrategy === 'all-on-ui';
-    const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers(lynxGroupId, allOnUI);
+    const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers(lynxGroupId, allOnUI, configs.browserConfig);
     const { markTiming, sendGlobalEvent, updateDataBackground, updateI18nResourceBackground, } = startBackground(backgroundRpc, shadowRoot, callbacks);
     const cacheMarkTimings = {
         records: [],
@@ -28,15 +28,14 @@ export function startUIThread(templateUrl, configs, shadowRoot, lynxGroupId, thr
         });
     };
     const flushMarkTimingInternal = () => flushMarkTiming(markTiming, cacheMarkTimings);
+    const templateLoader = createTemplateLoader(callbacks.customTemplateLoader, markTimingInternal);
     const { start, updateDataMainThread, updateI18nResourcesMainThread } = allOnUI
         ? createRenderAllOnUI(
-        /* main-to-bg rpc*/ mainThreadRpc, shadowRoot, markTimingInternal, flushMarkTimingInternal, callbacks, ssr)
+        /* main-to-bg rpc*/ mainThreadRpc, shadowRoot, templateLoader, markTimingInternal, flushMarkTimingInternal, callbacks, ssr)
         : createRenderMultiThread(
-        /* main-to-ui rpc*/ mainThreadRpc, shadowRoot, callbacks);
+        /* main-to-ui rpc*/ mainThreadRpc, shadowRoot, templateLoader, callbacks);
     markTimingInternal('create_lynx_start', undefined, createLynxStartTiming);
-    markTimingInternal('load_template_start');
-    loadTemplate(templateUrl, callbacks.customTemplateLoader).then((template) => {
-        markTimingInternal('load_template_end');
+    templateLoader(templateUrl).then((template) => {
         flushMarkTimingInternal();
         start({
             ...configs,

package/dist/utils/loadTemplate.d.ts

@@ -1,2 +1,2 @@
-import { type LynxTemplate } from '@lynx-js/web-constants';
-export declare function loadTemplate(url: string, customTemplateLoader?: (url: string) => Promise<LynxTemplate>): Promise<LynxTemplate>;
+import { type MarkTimingInternal, type TemplateLoader } from '@lynx-js/web-constants';
+export declare function createTemplateLoader(customTemplateLoader: TemplateLoader | undefined, markTimingInternal: MarkTimingInternal): TemplateLoader;

package/dist/utils/loadTemplate.js

@@ -1,23 +1,30 @@
-import { generateTemplate } from '@lynx-js/web-constants';
+import { generateTemplate, } from '@lynx-js/web-constants';
 const templateCache = {};
 function createJsModuleUrl(content) {
     return URL.createObjectURL(new Blob([content], { type: 'text/javascript' }));
 }
-export async function loadTemplate(url, customTemplateLoader) {
-    const cachedTemplate = templateCache[url];
-    if (cachedTemplate)
-        return cachedTemplate;
-    const template = customTemplateLoader
-        ? await customTemplateLoader(url)
-        : (await (await fetch(url, {
-            method: 'GET',
-        })).json());
-    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.
-     */
-    return decodedTemplate;
+export function createTemplateLoader(customTemplateLoader, markTimingInternal) {
+    const loadTemplate = async (url) => {
+        markTimingInternal('load_template_start');
+        const cachedTemplate = templateCache[url];
+        if (cachedTemplate) {
+            markTimingInternal('load_template_end');
+            return cachedTemplate;
+        }
+        const template = customTemplateLoader
+            ? await customTemplateLoader(url)
+            : (await (await fetch(url, {
+                method: 'GET',
+            })).json());
+        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.
+         */
+        markTimingInternal('load_template_end');
+        return decodedTemplate;
+    };
+    return loadTemplate;
 }
 //# sourceMappingURL=loadTemplate.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.15.7",
+  "version": "0.16.1",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,15 +24,15 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/offscreen-document": "0.1.3",
-    "@lynx-js/web-constants": "0.15.7",
-    "@lynx-js/web-mainthread-apis": "0.15.7",
-    "@lynx-js/web-worker-rpc": "0.15.7",
-    "@lynx-js/web-worker-runtime": "0.15.7"
+    "@lynx-js/offscreen-document": "0.1.4",
+    "@lynx-js/web-constants": "0.16.1",
+    "@lynx-js/web-mainthread-apis": "0.16.1",
+    "@lynx-js/web-worker-rpc": "0.16.1",
+    "@lynx-js/web-worker-runtime": "0.16.1"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.3",
-    "@lynx-js/web-elements": "0.8.4"
+    "@lynx-js/web-elements": "0.8.6"
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.3",