@lynx-js/web-mainthread-apis-canary 0.16.1-canary-20250915-74388494 → 0.16.1-canary-20250915-608f375e

package/CHANGELOG.md

@@ -1,12 +1,14 @@
 # @lynx-js/web-mainthread-apis
 
-## 0.16.1-canary-20250915064132-743884945342f58670e037c1a5dab06b782639c2
+## 0.16.1-canary-20250915073423-608f375e20732cc4c9f141bfbf9800ba6896100b
 
 ### Patch Changes
 
-- Updated dependencies []:
-  - @lynx-js/web-constants@0.16.1-canary-20250915064132-743884945342f58670e037c1a5dab06b782639c2
-  - @lynx-js/web-style-transformer@0.16.1-canary-20250915064132-743884945342f58670e037c1a5dab06b782639c2
+- 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-constants@0.16.1-canary-20250915073423-608f375e20732cc4c9f141bfbf9800ba6896100b
+  - @lynx-js/web-style-transformer@0.16.1-canary-20250915073423-608f375e20732cc4c9f141bfbf9800ba6896100b
 
 ## 0.16.0
 

package/dist/createMainThreadGlobalThis.d.ts

@@ -1,4 +1,4 @@
-import { type LynxTemplate, type PageConfig, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type LynxContextEventTarget, type MainThreadGlobalThis, type WebFiberElementImpl, type I18nResourceTranslationOptions, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm } from '@lynx-js/web-constants';
+import { type LynxTemplate, type PageConfig, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type LynxContextEventTarget, type MainThreadGlobalThis, type WebFiberElementImpl, type I18nResourceTranslationOptions, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm, type QueryComponentPAPI } from '@lynx-js/web-constants';
 export interface MainThreadRuntimeCallbacks {
     mainChunkReady: () => void;
     flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[], exposureChangedElements: WebFiberElementImpl[]) => void;
@@ -9,6 +9,7 @@ export interface MainThreadRuntimeCallbacks {
     publicComponentEvent: RpcCallType<typeof publicComponentEventEndpoint>;
     _I18nResourceTranslation: (options: I18nResourceTranslationOptions) => unknown | undefined;
     updateCssOGStyle: (uniqueId: number, newClassName: string, cssID: string | null) => void;
+    __QueryComponent: QueryComponentPAPI;
 }
 export interface MainThreadRuntimeConfig {
     pageConfig: PageConfig;

package/dist/createMainThreadGlobalThis.js

@@ -469,6 +469,7 @@ export function createMainThreadGlobalThis(config) {
         __LoadLepusChunk,
         __GetPageElement,
         __globalProps: globalProps,
+        __QueryComponent: callbacks.__QueryComponent,
         SystemInfo,
         lynx: createMainThreadLynx(config, SystemInfo),
         _ReportError: (err, _) => callbacks._ReportError(err, _, release),

package/dist/crossThreadHandlers/createQueryComponent.d.ts

@@ -0,0 +1,4 @@
+import { type JSRealm, type LynxCrossThreadContext, type MainThreadGlobalThis, type QueryComponentPAPI, type Rpc, type StyleInfo, type TemplateLoader } from '@lynx-js/web-constants';
+export declare function createQueryComponent(loadTemplate: TemplateLoader, updateLazyComponentStyle: (styleInfo: StyleInfo, entryName: string) => void, backgroundThreadRpc: Rpc, mtsGlobalThisRef: {
+    mtsGlobalThis: MainThreadGlobalThis;
+}, jsContext: LynxCrossThreadContext, mtsRealm: JSRealm): QueryComponentPAPI;

package/dist/crossThreadHandlers/createQueryComponent.js

@@ -0,0 +1,48 @@
+import { queryComponentEndpoint, updateBTSTemplateCacheEndpoint, } from '@lynx-js/web-constants';
+export function createQueryComponent(loadTemplate, updateLazyComponentStyle, backgroundThreadRpc, mtsGlobalThisRef, jsContext, mtsRealm) {
+    const updateBTSTemplateCache = backgroundThreadRpc.createCall(updateBTSTemplateCacheEndpoint);
+    const __QueryComponentImpl = (url, callback) => {
+        loadTemplate(url).then(async (template) => {
+            const updateBTSCachePromise = updateBTSTemplateCache(url, template);
+            let lepusRootChunkExport = await mtsRealm.loadScript(template.lepusCode.root);
+            if (mtsGlobalThisRef.mtsGlobalThis.processEvalResult) {
+                lepusRootChunkExport = mtsGlobalThisRef.mtsGlobalThis.processEvalResult(lepusRootChunkExport, url);
+            }
+            updateLazyComponentStyle(template.styleInfo, url);
+            await updateBTSCachePromise;
+            jsContext.dispatchEvent({
+                type: '__OnDynamicJSSourcePrepared',
+                data: url,
+            });
+            callback?.({
+                code: 0,
+                data: {
+                    url,
+                    evalResult: lepusRootChunkExport,
+                },
+            });
+        }).catch((error) => {
+            console.error(`lynx web: lazy bundle load failed:`, error);
+            callback?.({
+                code: -1,
+                data: undefined,
+            });
+        });
+        return null;
+    };
+    backgroundThreadRpc.registerHandler(queryComponentEndpoint, (url) => {
+        const ret = new Promise(resolve => {
+            __QueryComponentImpl(url, (result) => {
+                resolve({
+                    code: result.code,
+                    detail: {
+                        schema: url,
+                    },
+                });
+            });
+        });
+        return ret;
+    });
+    return __QueryComponentImpl;
+}
+//# sourceMappingURL=createQueryComponent.js.map

package/dist/prepareMainThreadAPIs.d.ts

@@ -1,4 +1,4 @@
-import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm } from '@lynx-js/web-constants';
-export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, document: Document, mtsRealm: JSRealm, commitDocument: (exposureChangedElements: HTMLElement[]) => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, flushMarkTimingInternal: () => void, reportError: RpcCallType<typeof reportErrorEndpoint>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources, ssrHooks?: SSRDehydrateHooks): {
+import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm, type TemplateLoader } from '@lynx-js/web-constants';
+export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, document: Document, mtsRealm: JSRealm, commitDocument: (exposureChangedElements: HTMLElement[]) => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, flushMarkTimingInternal: () => void, reportError: RpcCallType<typeof reportErrorEndpoint>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources, loadTemplate: TemplateLoader, ssrHooks?: SSRDehydrateHooks): {
     startMainThread: (config: StartMainThreadContextConfig, ssrHydrateInfo?: SSRHydrateInfo) => Promise<void>;
 };

package/dist/prepareMainThreadAPIs.js

@@ -8,8 +8,9 @@ import { createMainThreadGlobalThis } from './createMainThreadGlobalThis.js';
 import { createExposureService } from './utils/createExposureService.js';
 import { initWasm } from '@lynx-js/web-style-transformer';
 import { appendStyleElement } from './utils/processStyleInfo.js';
+import { createQueryComponent } from './crossThreadHandlers/createQueryComponent.js';
 const initWasmPromise = initWasm();
-export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
+export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, loadTemplate, ssrHooks) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
     const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
     const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
@@ -29,7 +30,11 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mt
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
         });
         const i18nResources = initialI18nResources(initI18nResources);
-        const { updateCssOGStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, undefined, ssrHydrateInfo);
+        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, undefined, ssrHydrateInfo);
+        const mtsGlobalThisRef = {
+            mtsGlobalThis: undefined,
+        };
+        const __QueryComponent = createQueryComponent(loadTemplate, updateLazyComponentStyle, backgroundThreadRpc, mtsGlobalThisRef, jsContext, mtsRealm);
         const mtsGlobalThis = createMainThreadGlobalThis({
             lynxTemplate: template,
             mtsRealm,
@@ -127,8 +132,10 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mt
                     }
                     return triggerI18nResourceFallback(options);
                 },
+                __QueryComponent,
             },
         });
+        mtsGlobalThisRef.mtsGlobalThis = mtsGlobalThis;
         markTimingInternal('decode_end');
         await mtsRealm.loadScript(template.lepusCode.root);
         jsContext.__start(); // start the jsContext after the runtime is created

package/dist/pureElementPAPIs.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 { componentIdAttribute, cssIdAttribute, lynxComponentConfigAttribute, lynxDatasetAttribute, lynxElementTemplateMarkerAttribute, lynxPartIdAttribute, lynxTagAttribute, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
+import { componentIdAttribute, cssIdAttribute, lynxComponentConfigAttribute, lynxDatasetAttribute, lynxElementTemplateMarkerAttribute, lynxEntryNameAttribute, lynxPartIdAttribute, lynxTagAttribute, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
 import { queryCSSProperty } from './style/cssPropertyMap.js';
 import { transformInlineStyleString, transformParsedStyles, } from './style/transformInlineStyle.js';
 import hyphenateStyleName from 'hyphenate-style-name';
@@ -92,9 +92,10 @@ export const __UpdateComponentInfo = /*#__PURE__*/ (element, params) => {
         && element.setAttribute(cssIdAttribute, params.cssID + '');
     params.name !== undefined && element.setAttribute('name', params.name);
 };
-export const __SetCSSId = /*#__PURE__*/ (elements, cssId) => {
+export const __SetCSSId = /*#__PURE__*/ (elements, cssId, entryName) => {
     for (const element of elements) {
         element.setAttribute(cssIdAttribute, cssId + '');
+        entryName && element.setAttribute(lynxEntryNameAttribute, entryName);
     }
 };
 export const __SetClasses = /*#__PURE__*/ (element, classname) => {

package/dist/utils/processStyleInfo.d.ts

@@ -14,4 +14,5 @@ export declare function genCssContent(styleInfo: StyleInfo, pageConfig: PageConf
 export declare function genCssOGInfo(styleInfo: StyleInfo): CssOGInfo;
 export declare function appendStyleElement(styleInfo: StyleInfo, pageConfig: PageConfig, rootDom: Node, document: Document, entryName?: string, ssrHydrateInfo?: SSRHydrateInfo): {
     updateCssOGStyle: (uniqueId: number, newClassName: string, cssID: string | null) => void;
+    updateLazyComponentStyle: (styleInfo: StyleInfo, entryName: string) => void;
 };

package/dist/utils/processStyleInfo.js

@@ -68,7 +68,7 @@ export function genCssContent(styleInfo, pageConfig, entryName) {
             suffix = `[${lynxTagAttribute}]`;
         }
         if (entryName) {
-            suffix = `${suffix}[${lynxEntryNameAttribute}="${entryName}"]`;
+            suffix = `${suffix}[${lynxEntryNameAttribute}=${JSON.stringify(entryName)}]`;
         }
         else {
             suffix = `${suffix}:not([${lynxEntryNameAttribute}])`;
@@ -160,6 +160,12 @@ export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ent
             lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
         }
     };
-    return { updateCssOGStyle };
+    const updateLazyComponentStyle = (styleInfo, entryName) => {
+        flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
+        transformToWebCss(styleInfo);
+        const newStyleSheet = genCssContent(styleInfo, pageConfig, entryName);
+        cardStyleElement.textContent += newStyleSheet;
+    };
+    return { updateCssOGStyle, updateLazyComponentStyle };
 }
 //# sourceMappingURL=processStyleInfo.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis-canary",
-  "version": "0.16.1-canary-20250915-74388494",
+  "version": "0.16.1-canary-20250915-608f375e",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,8 +24,8 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.16.1-canary-20250915-74388494",
-    "@lynx-js/web-style-transformer": "npm:@lynx-js/web-style-transformer-canary@0.16.1-canary-20250915-74388494",
+    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.16.1-canary-20250915-608f375e",
+    "@lynx-js/web-style-transformer": "npm:@lynx-js/web-style-transformer-canary@0.16.1-canary-20250915-608f375e",
     "hyphenate-style-name": "^1.1.0"
   }
 }