@lynx-js/web-core-server-canary 0.16.1-canary-20250915-74388494 → 0.16.1-canary-20250915-608f375e

package/CHANGELOG.md

@@ -1,11 +1,13 @@
 # @lynx-js/web-core-server
 
-## 0.16.1-canary-20250915064132-743884945342f58670e037c1a5dab06b782639c2
+## 0.16.1-canary-20250915073423-608f375e20732cc4c9f141bfbf9800ba6896100b
 
 ### 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))
+
 ## 0.16.0
 
 ### Minor Changes

package/dist/index.js

@@ -648,6 +648,9 @@ createRpcEndpoint('updateGlobalProps', false, false);
 createRpcEndpoint('updateI18nResources', false, false);
 createRpcEndpoint('updateI18nResource', false, false);
 const dispatchI18nResourceEndpoint = createRpcEndpoint('dispatchI18nResource', false, false);
+const queryComponentEndpoint = createRpcEndpoint('queryComponent', false, true);
+const updateBTSTemplateCacheEndpoint = createRpcEndpoint('updateBTSTemplateCacheEndpoint', false, true);
+createRpcEndpoint('loadTemplateMultiThread', false, true);
 var NativeApp_IdentifierType;
 (function(IdentifierType) {
     IdentifierType[IdentifierType["ID_SELECTOR"] = 0] = "ID_SELECTOR";
@@ -740,28 +743,25 @@ const templateUpgraders = [
         template.appType = template.lepusCode.root.startsWith('(function (globDynamicComponentEntry') ? 'lazy' : 'card';
         template.manifest = Object.fromEntries(Object.entries(template.manifest).map(([key, value])=>[
                 key,
-                `module.exports={init: (lynxCoreInject) => { var {${defaultInjectStr}} = lynxCoreInject.tt; var module = {exports:null}; ${value}\n return module.exports; } }`
-            ]));
-        template.lepusCode = Object.fromEntries(Object.entries(template.lepusCode).map(([key, value])=>[
-                key,
-                `(()=>{${value}\n})();`
+                `module.exports={init: (lynxCoreInject) => { var {${defaultInjectStr}} = lynxCoreInject.tt; var module = {exports:{}}; var exports=module.exports; ${value}\n return module.exports; } }`
             ]));
         template.version = 2;
         return template;
     }
 ];
-const generateModuleContent = (content, eager)=>[
+const generateModuleContent = (content, eager, appType)=>[
         eager ? '//# allFunctionsCalledOnLoad' : '',
         '\n(function() { "use strict"; const ',
         globalDisallowedVars.join('=void 0,'),
         '=void 0;\n',
+        'lazy' === appType ? 'module.exports=\n' : '',
         content,
         '\n})()'
     ].join('');
-async function generateJavascriptUrl(obj, createJsModuleUrl, eager, templateName) {
+async function generateJavascriptUrl(obj, createJsModuleUrl, eager, appType, templateName) {
     const processEntry = async ([name, content])=>[
             name,
-            await createJsModuleUrl(generateModuleContent(content, eager), `${templateName}-${name.replaceAll('/', '')}.js`)
+            await createJsModuleUrl(generateModuleContent(content, eager, appType), `${templateName}-${name.replaceAll('/', '')}.js`)
         ];
     return Promise.all(Object.entries(obj).filter(([_, content])=>'string' == typeof content).map(processEntry)).then(Object.fromEntries);
 }
@@ -772,8 +772,8 @@ async function generateTemplate(template, createJsModuleUrl, templateName) {
     while(template.version < currentSupportedTemplateVersion && (upgrader = templateUpgraders[template.version - 1]))template = upgrader(template);
     return {
         ...template,
-        lepusCode: await generateJavascriptUrl(template.lepusCode, createJsModuleUrl, true, templateName),
-        manifest: await generateJavascriptUrl(template.manifest, createJsModuleUrl, false, templateName)
+        lepusCode: await generateJavascriptUrl(template.lepusCode, createJsModuleUrl, true, template.appType, templateName),
+        manifest: await generateJavascriptUrl(template.manifest, createJsModuleUrl, false, template.appType, templateName)
     };
 }
 function registerCallLepusMethodHandler(rpc, runtime) {
@@ -1196,8 +1196,11 @@ const __UpdateComponentInfo = /*#__PURE__*/ (element, params)=>{
     void 0 !== params.cssID && element.setAttribute(cssIdAttribute, params.cssID + '');
     void 0 !== params.name && element.setAttribute('name', params.name);
 };
-const __SetCSSId = /*#__PURE__*/ (elements, cssId)=>{
-    for (const element of elements)element.setAttribute(cssIdAttribute, cssId + '');
+const __SetCSSId = /*#__PURE__*/ (elements, cssId, entryName)=>{
+    for (const element of elements){
+        element.setAttribute(cssIdAttribute, cssId + '');
+        entryName && element.setAttribute(lynxEntryNameAttribute, entryName);
+    }
 };
 const __SetClasses = /*#__PURE__*/ (element, classname)=>{
     classname ? element.setAttribute('class', classname) : element.removeAttribute('class');
@@ -1685,6 +1688,7 @@ function createMainThreadGlobalThis(config) {
         __LoadLepusChunk,
         __GetPageElement,
         __globalProps: globalProps,
+        __QueryComponent: callbacks.__QueryComponent,
         SystemInfo,
         lynx: createMainThreadLynx(config, SystemInfo),
         _ReportError: (err, _)=>callbacks._ReportError(err, _, release),
@@ -1819,7 +1823,7 @@ function genCssContent(styleInfo, pageConfig, entryName) {
     function getExtraSelectors(cssId) {
         let suffix;
         suffix = pageConfig.enableRemoveCSSScope ? `[${lynxTagAttribute}]` : void 0 !== cssId ? `[${cssIdAttribute}="${cssId}"]` : `[${lynxTagAttribute}]`;
-        suffix = entryName ? `${suffix}[${lynxEntryNameAttribute}="${entryName}"]` : `${suffix}:not([${lynxEntryNameAttribute}])`;
+        suffix = entryName ? `${suffix}[${lynxEntryNameAttribute}=${JSON.stringify(entryName)}]` : `${suffix}:not([${lynxEntryNameAttribute}])`;
         return suffix;
     }
     const finalCssContent = [];
@@ -1883,12 +1887,63 @@ function appendStyleElement(styleInfo, pageConfig, rootDom, document, entryName,
             lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
         }
     };
+    const updateLazyComponentStyle = (styleInfo, entryName)=>{
+        flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
+        transformToWebCss(styleInfo);
+        const newStyleSheet = genCssContent(styleInfo, pageConfig, entryName);
+        cardStyleElement.textContent += newStyleSheet;
+    };
     return {
-        updateCssOGStyle
+        updateCssOGStyle,
+        updateLazyComponentStyle
+    };
+}
+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: void 0
+            });
+        });
+        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;
 }
 const initWasmPromise = initWasm();
-function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
+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);
@@ -1908,7 +1963,11 @@ function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm,
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint
         });
         const i18nResources = initialI18nResources(initI18nResources);
-        const { updateCssOGStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, void 0, ssrHydrateInfo);
+        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, void 0, ssrHydrateInfo);
+        const mtsGlobalThisRef = {
+            mtsGlobalThis: void 0
+        };
+        const __QueryComponent = createQueryComponent(loadTemplate, updateLazyComponentStyle, backgroundThreadRpc, mtsGlobalThisRef, jsContext, mtsRealm);
         const mtsGlobalThis = createMainThreadGlobalThis({
             lynxTemplate: template,
             mtsRealm,
@@ -1992,9 +2051,11 @@ function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm,
                     dispatchI18nResource(matchedInitI18nResources?.resource);
                     if (matchedInitI18nResources) return matchedInitI18nResources.resource;
                     return triggerI18nResourceFallback(options);
-                }
+                },
+                __QueryComponent
             }
         });
+        mtsGlobalThisRef.mtsGlobalThis = mtsGlobalThis;
         markTimingInternal('decode_end');
         await mtsRealm.loadScript(template.lepusCode.root);
         jsContext.__start();
@@ -2014,7 +2075,7 @@ async function loadTemplate_createJsModuleUrl(content, filename) {
     });
     return fileUrl;
 }
-async function loadTemplate(rawTemplate, templateName = Math.random().toString(36).substring(2, 7)) {
+async function loadTemplate_loadTemplate(rawTemplate, templateName = Math.random().toString(36).substring(2, 7)) {
     if (templateCache.has(rawTemplate)) return templateCache.get(rawTemplate);
     templateName += Math.random().toString(36).substring(2, 7);
     const decodedTemplate = templateCache.get(rawTemplate) ?? await generateTemplate(rawTemplate, loadTemplate_createJsModuleUrl, templateName + '-lepusCode');
@@ -2208,6 +2269,9 @@ class OffscreenElement extends EventTarget {
         this[ancestorDocument][enableEvent](type, this[OffscreenElement_uniqueId]);
         super.addEventListener(type, callback, options);
     }
+    get textContent() {
+        return this[textContent];
+    }
     set textContent(text1) {
         this[ancestorDocument][operations].push(OperationType.SetTextContent, this[OffscreenElement_uniqueId], text1);
         for (const child of this.children)child.remove();
@@ -2721,7 +2785,7 @@ OffscreenElement.prototype.toJSON = function() {
 };
 async function createLynxView(config) {
     const { template: rawTemplate, browserConfig, tagMap, initData, globalProps, overrideElementTemplates = {}, hydrateUrl, autoSize, injectStyles, lynxViewStyle, threadStrategy = 'all-on-ui', initI18nResources } = config;
-    const template = await loadTemplate(rawTemplate, config.templateName);
+    const template = await loadTemplate_loadTemplate(rawTemplate, config.templateName);
     const { promise: firstPaintReadyPromise, resolve: firstPaintReady } = Promise.withResolvers();
     const mainWithBackgroundChannel = new MessageChannel();
     const backgroundThreadRpc = new Rpc(mainWithBackgroundChannel.port1, 'background-thread');
@@ -2782,7 +2846,7 @@ async function createLynxView(config) {
     }, ()=>{}, ()=>{}, ()=>{}, ()=>{}, (initI18nResources)=>{
         i18nResources.setData(initI18nResources);
         return i18nResources;
-    }, {
+    }, ()=>{}, {
         __AddEvent (element, eventName, eventData, eventOptions) {
             events.push([
                 Number(element.getAttribute("l-uid")),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core-server-canary",
-  "version": "0.16.1-canary-20250915-74388494",
+  "version": "0.16.1-canary-20250915-608f375e",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,11 +25,11 @@
   "devDependencies": {
     "rsbuild-plugin-arethetypeswrong": "0.1.1",
     "rsbuild-plugin-publint": "0.3.3",
+    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.16.1-canary-20250915-608f375e",
     "@lynx-js/offscreen-document": "npm:@lynx-js/offscreen-document-canary@0.1.4",
-    "@lynx-js/web-elements-template": "npm:@lynx-js/web-elements-template-canary@0.8.6-canary-20250915-74388494",
-    "@lynx-js/web-worker-rpc": "npm:@lynx-js/web-worker-rpc-canary@0.16.1-canary-20250915-74388494",
-    "@lynx-js/web-mainthread-apis": "npm:@lynx-js/web-mainthread-apis-canary@0.16.1-canary-20250915-74388494",
-    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.16.1-canary-20250915-74388494"
+    "@lynx-js/web-mainthread-apis": "npm:@lynx-js/web-mainthread-apis-canary@0.16.1-canary-20250915-608f375e",
+    "@lynx-js/web-elements-template": "npm:@lynx-js/web-elements-template-canary@0.8.6-canary-20250915-608f375e",
+    "@lynx-js/web-worker-rpc": "npm:@lynx-js/web-worker-rpc-canary@0.16.1-canary-20250915-608f375e"
   },
   "scripts": {
     "build": "rslib build",