@lynx-js/web-core 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @lynx-js/web-core
 
+## 0.17.0
+
+### Minor Changes
+
+- break(web): temporary remove support for chunk split ([#1739](https://github.com/lynx-family/lynx-stack/pull/1739))
+
+  Since the global variables cannot be accessed in the splited chunk, we temporary remove supporting for chunk spliting
+
+  Developers could easily remove the chunk Split settings in Rspeedy for migration
+
+  ```
+  import { defineConfig } from '@lynx-js/rspeedy'
+
+  export default defineConfig({
+    performance: {
+      chunkSplit: {
+        strategy: 'all-in-one',
+      },
+    },
+  })
+  ```
+
+### Patch Changes
+
+- fix: lazy component load error ([#1794](https://github.com/lynx-family/lynx-stack/pull/1794))
+
+  Some special version template may have chunk loading error. We fixed it.
+
+- fix: avoid duplicate style transformation ([#1748](https://github.com/lynx-family/lynx-stack/pull/1748))
+
+  After this commit, we use DAG methods to handle the styleInfos
+
+- fix: add sandbox attribute to iframe for enhanced security ([#1709](https://github.com/lynx-family/lynx-stack/pull/1709))
+
+- fix: the default template loader won't fetch twice for one url ([#1709](https://github.com/lynx-family/lynx-stack/pull/1709))
+
+- Updated dependencies [[`721635d`](https://github.com/lynx-family/lynx-stack/commit/721635de6c1d2d617c7cbaa86e7d816c42d62930), [`93d707b`](https://github.com/lynx-family/lynx-stack/commit/93d707b82a59f7256952e21da6dcad2999f8233d), [`d150ed4`](https://github.com/lynx-family/lynx-stack/commit/d150ed440a4f1e9d9a3a2911adf6e6fa39a0c589)]:
+  - @lynx-js/web-mainthread-apis@0.17.0
+  - @lynx-js/web-constants@0.17.0
+  - @lynx-js/web-worker-runtime@0.17.0
+  - @lynx-js/web-worker-rpc@0.17.0
+
+## 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

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

@@ -18,29 +18,37 @@ const { prepareMainThreadAPIs, } = await import(
  */
 function createIFrameRealm(parent) {
     const iframe = document.createElement('iframe');
-    const iframeLoaded = new Promise((resolve) => {
-        iframe.onload = () => resolve();
-    });
     iframe.style.display = 'none';
-    iframe.src = 'about:blank';
+    iframe.srcdoc =
+        '<!DOCTYPE html><html><head></head><body style="display:none"></body></html>';
+    iframe.sandbox = 'allow-same-origin allow-scripts'; // Restrict capabilities for security
+    iframe.loading = 'eager';
     parent.appendChild(iframe);
     const iframeWindow = iframe.contentWindow;
-    const iframeDocument = iframe.contentDocument;
-    const loadScript = (url) => {
+    const loadScript = async (url) => {
+        const script = iframe.contentDocument.createElement('script');
+        script.fetchPriority = 'high';
+        script.defer = true;
+        script.async = false;
+        if (!iframe.contentDocument.head) {
+            await new Promise((resolve) => {
+                iframe.onload = () => resolve();
+                // In case iframe is already loaded, wait a macro task
+                setTimeout(() => resolve(), 0);
+            });
+        }
+        iframe.contentDocument.head.appendChild(script);
         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 = () => resolve(iframeWindow?.module?.exports);
+            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);
+            script.src = url;
         });
     };
     const loadScriptSync = (url) => {
@@ -53,7 +61,10 @@ function createIFrameRealm(parent) {
             // @ts-expect-error
             iframeWindow.module = { exports: undefined };
             iframe.contentDocument.head.appendChild(script);
-            return iframeWindow?.module?.exports;
+            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 });
@@ -61,7 +72,7 @@ function createIFrameRealm(parent) {
     };
     return { globalWindow: iframeWindow, loadScript, loadScriptSync };
 }
-export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingInternal, flushMarkTimingInternal, callbacks, ssrDumpInfo) {
+export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, loadTemplate, markTimingInternal, flushMarkTimingInternal, callbacks, ssrDumpInfo) {
     if (!globalThis.module) {
         Object.assign(globalThis, { module: {} });
     }
@@ -77,7 +88,7 @@ export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingI
     }, triggerI18nResourceFallback, (initI18nResources) => {
         i18nResources.setData(initI18nResources);
         return i18nResources;
-    });
+    }, loadTemplate);
     const pendingUpdateCalls = [];
     const start = async (configs) => {
         if (ssrDumpInfo) {

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';
@@ -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,41 @@
-import { generateTemplate } from '@lynx-js/web-constants';
-const templateCache = {};
+import { generateTemplate, } from '@lynx-js/web-constants';
+const templateCache = new Map();
 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.get(url);
+        if (cachedTemplate) {
+            markTimingInternal('load_template_end');
+            return cachedTemplate;
+        }
+        else {
+            const promise = new Promise(async (resolve, reject) => {
+                try {
+                    const template = customTemplateLoader
+                        ? await customTemplateLoader(url)
+                        : (await (await fetch(url, {
+                            method: 'GET',
+                        })).json());
+                    const decodedTemplate = await generateTemplate(template, createJsModuleUrl);
+                    resolve(decodedTemplate);
+                }
+                catch (e) {
+                    templateCache.delete(url);
+                    reject(e);
+                }
+            });
+            templateCache.set(url, promise);
+            /**
+             * 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 promise;
+        }
+    };
+    return loadTemplate;
 }
 //# sourceMappingURL=loadTemplate.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,14 +25,14 @@
   ],
   "dependencies": {
     "@lynx-js/offscreen-document": "0.1.4",
-    "@lynx-js/web-constants": "0.16.0",
-    "@lynx-js/web-mainthread-apis": "0.16.0",
-    "@lynx-js/web-worker-rpc": "0.16.0",
-    "@lynx-js/web-worker-runtime": "0.16.0"
+    "@lynx-js/web-constants": "0.17.0",
+    "@lynx-js/web-mainthread-apis": "0.17.0",
+    "@lynx-js/web-worker-rpc": "0.17.0",
+    "@lynx-js/web-worker-runtime": "0.17.0"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.3",
-    "@lynx-js/web-elements": "0.8.4"
+    "@lynx-js/web-elements": "0.8.7"
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.3",