@lynx-js/web-core-server 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lynx-js/web-core-server
 
+## 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))
+
 ## 0.16.0
 
 ### Minor Changes

package/dist/index.js

@@ -4,17 +4,17 @@ import node_path from "node:path";
 import node_vm from "node:vm";
 import node_fs from "node:fs";
 var __webpack_modules__ = {
-    "../web-style-transformer/dist/standard.js": function(module, __webpack_exports__, __webpack_require__) {
-        __webpack_require__.a(module, async function(__webpack_handle_async_dependencies__, __webpack_async_result__) {
+    "../web-style-transformer/dist/standard.js": function(__webpack_module__, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.a(__webpack_module__, async function(__webpack_handle_async_dependencies__, __webpack_async_result__) {
             try {
                 __webpack_require__.d(__webpack_exports__, {
-                    M2: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.M2,
+                    Fz: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.Fz,
                     Qn: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.Qn,
                     aC: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.aC,
                     bL: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.bL,
                     iG: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.iG,
                     lI: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.lI,
-                    tZ: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.tZ,
+                    qB: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.qB,
                     yc: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.yc
                 });
                 var _standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../web-style-transformer/dist/standard_bg.wasm");
@@ -31,40 +31,53 @@ var __webpack_modules__ = {
             }
         });
     },
-    "../web-style-transformer/dist/standard_bg.js": function(module, __webpack_exports__, __webpack_require__) {
+    "../web-style-transformer/dist/standard_bg.js": function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
         __webpack_require__.d(__webpack_exports__, {
-            M2: ()=>__wbg_new_78feb108b6472713,
+            Fz: ()=>__wbg_new_58353953ad2097cc,
             Qn: ()=>__wbindgen_throw,
             aC: ()=>transform_raw_u16_inline_style_ptr,
             bL: ()=>__wbindgen_init_externref_table,
             iG: ()=>transform_raw_u16_inline_style_ptr_parsed,
             lI: ()=>__wbg_set_wasm,
-            tZ: ()=>__wbg_push_737cfc8c1432c2c6,
+            qB: ()=>__wbg_push_73fd7b5550ebf707,
             yc: ()=>__wbindgen_string_new
         });
-        module = __webpack_require__.hmd(module);
         let wasm;
         function __wbg_set_wasm(val) {
             wasm = val;
         }
+        let cachedUint8ArrayMemory0 = null;
+        function getUint8ArrayMemory0() {
+            if (null === cachedUint8ArrayMemory0 || 0 === cachedUint8ArrayMemory0.byteLength) cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+            return cachedUint8ArrayMemory0;
+        }
         const lTextDecoder = 'undefined' == typeof TextDecoder ? (0, module.require)('util').TextDecoder : TextDecoder;
         let cachedTextDecoder = new lTextDecoder('utf-8', {
             ignoreBOM: true,
             fatal: true
         });
         cachedTextDecoder.decode();
-        let cachedUint8ArrayMemory0 = null;
-        function getUint8ArrayMemory0() {
-            if (null === cachedUint8ArrayMemory0 || 0 === cachedUint8ArrayMemory0.byteLength) cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
-            return cachedUint8ArrayMemory0;
+        const MAX_SAFARI_DECODE_BYTES = 2146435072;
+        let numBytesDecoded = 0;
+        function decodeText(ptr, len) {
+            numBytesDecoded += len;
+            if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+                cachedTextDecoder = new lTextDecoder('utf-8', {
+                    ignoreBOM: true,
+                    fatal: true
+                });
+                cachedTextDecoder.decode();
+                numBytesDecoded = len;
+            }
+            return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
         }
         function getStringFromWasm0(ptr, len) {
             ptr >>>= 0;
-            return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+            return decodeText(ptr, len);
         }
         let WASM_VECTOR_LEN = 0;
         const lTextEncoder = 'undefined' == typeof TextEncoder ? (0, module.require)('util').TextEncoder : TextEncoder;
-        let cachedTextEncoder = new lTextEncoder('utf-8');
+        const cachedTextEncoder = new lTextEncoder('utf-8');
         const encodeString = 'function' == typeof cachedTextEncoder.encodeInto ? function(arg, view) {
             return cachedTextEncoder.encodeInto(arg, view);
         } : function(arg, view) {
@@ -122,11 +135,11 @@ var __webpack_modules__ = {
             const ret = wasm.transform_raw_u16_inline_style_ptr_parsed(ptr0, len0, ptr1, len1);
             return ret;
         }
-        function __wbg_new_78feb108b6472713() {
+        function __wbg_new_58353953ad2097cc() {
             const ret = new Array();
             return ret;
         }
-        function __wbg_push_737cfc8c1432c2c6(arg0, arg1) {
+        function __wbg_push_73fd7b5550ebf707(arg0, arg1) {
             const ret = arg0.push(arg1);
             return ret;
         }
@@ -147,13 +160,13 @@ var __webpack_modules__ = {
             throw new Error(getStringFromWasm0(arg0, arg1));
         }
     },
-    "../web-style-transformer/standard.js": function(module, __webpack_exports__, __webpack_require__) {
-        __webpack_require__.a(module, async function(__webpack_handle_async_dependencies__, __webpack_async_result__) {
+    "../web-style-transformer/standard.js": function(__webpack_module__, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.a(__webpack_module__, async function(__webpack_handle_async_dependencies__, __webpack_async_result__) {
             try {
                 __webpack_require__.r(__webpack_exports__);
                 __webpack_require__.d(__webpack_exports__, {
-                    __wbg_new_78feb108b6472713: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.M2,
-                    __wbg_push_737cfc8c1432c2c6: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.tZ,
+                    __wbg_new_58353953ad2097cc: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.Fz,
+                    __wbg_push_73fd7b5550ebf707: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.qB,
                     __wbg_set_wasm: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.lI,
                     __wbindgen_init_externref_table: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.bL,
                     __wbindgen_string_new: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.yc,
@@ -172,13 +185,13 @@ var __webpack_modules__ = {
             }
         });
     },
-    "../web-style-transformer/dist/standard_bg.wasm": function(module, exports, __webpack_require__) {
+    "../web-style-transformer/dist/standard_bg.wasm": function(module1, exports, __webpack_require__) {
         var WEBPACK_IMPORTED_MODULE_0 = __webpack_require__("../web-style-transformer/dist/standard_bg.js");
-        module.exports = __webpack_require__.v(exports, module.id, "431436911960378f", {
+        module1.exports = __webpack_require__.v(exports, module1.id, "8dc0062c26e8c5a1", {
             "./standard_bg.js": {
-                __wbg_new_78feb108b6472713: WEBPACK_IMPORTED_MODULE_0.M2,
+                __wbg_new_58353953ad2097cc: WEBPACK_IMPORTED_MODULE_0.Fz,
                 __wbindgen_string_new: WEBPACK_IMPORTED_MODULE_0.yc,
-                __wbg_push_737cfc8c1432c2c6: WEBPACK_IMPORTED_MODULE_0.tZ,
+                __wbg_push_73fd7b5550ebf707: WEBPACK_IMPORTED_MODULE_0.qB,
                 __wbindgen_throw: WEBPACK_IMPORTED_MODULE_0.Qn,
                 __wbindgen_init_externref_table: WEBPACK_IMPORTED_MODULE_0.bL
             }
@@ -189,14 +202,12 @@ var __webpack_module_cache__ = {};
 function __webpack_require__(moduleId) {
     var cachedModule = __webpack_module_cache__[moduleId];
     if (void 0 !== cachedModule) return cachedModule.exports;
-    var module = __webpack_module_cache__[moduleId] = {
+    var module1 = __webpack_module_cache__[moduleId] = {
         id: moduleId,
-        loaded: false,
         exports: {}
     };
-    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-    module.loaded = true;
-    return module.exports;
+    __webpack_modules__[moduleId](module1, module1.exports, __webpack_require__);
+    return module1.exports;
 }
 __webpack_require__.m = __webpack_modules__;
 (()=>{
@@ -233,11 +244,11 @@ __webpack_require__.m = __webpack_modules__;
             ret[webpackExports] = dep;
             return ret;
         });
-    __webpack_require__.a = (module, body, hasAwait)=>{
+    __webpack_require__.a = (module1, body, hasAwait)=>{
         var queue;
         hasAwait && ((queue = []).d = -1);
         var depQueues = new Set();
-        var exports = module.exports;
+        var exports = module1.exports;
         var currentDeps;
         var outerResolve;
         var reject;
@@ -249,7 +260,7 @@ __webpack_require__.m = __webpack_modules__;
         promise[webpackQueues] = (fn)=>{
             queue && fn(queue), depQueues.forEach(fn), promise["catch"](function() {});
         };
-        module.exports = promise;
+        module1.exports = promise;
         body((deps)=>{
             currentDeps = wrapDeps(deps);
             var fn;
@@ -283,19 +294,6 @@ __webpack_require__.m = __webpack_modules__;
             return promises;
         }, []));
 })();
-(()=>{
-    __webpack_require__.hmd = (module)=>{
-        module = Object.create(module);
-        if (!module.children) module.children = [];
-        Object.defineProperty(module, 'exports', {
-            enumerable: true,
-            set: ()=>{
-                throw new Error('ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ' + module.id);
-            }
-        });
-        return module;
-    };
-})();
 (()=>{
     __webpack_require__.u = (chunkId)=>"legacy-wasm-chunk.js";
 })();
@@ -653,6 +651,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";
@@ -742,29 +743,28 @@ const globalDisallowedVars = [
 const templateUpgraders = [
     (template)=>{
         const defaultInjectStr = "Card,setTimeout,setInterval,clearInterval,clearTimeout,NativeModules,Component,ReactLynx,nativeAppId,Behavior,LynxJSBI,lynx,window,document,frames,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,fetch,XMLHttpRequest,__WebSocket__,webkit,Reporter,print,global,requestAnimationFrame,cancelAnimationFrame";
+        template.appType = template.appType ?? (template.lepusCode.root.startsWith('(function (globDynamicComponentEntry') ? 'lazy' : 'card');
         template.manifest = Object.fromEntries(Object.entries(template.manifest).map(([key, value])=>[
                 key,
-                `{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)=>[
-        '//# allFunctionsCalledOnLoad\n',
-        '"use strict";\n',
-        `(() => {const ${globalDisallowedVars.join('=void 0,')}=void 0;module.exports = `,
+const generateModuleContent = (content, eager, appType)=>[
+        eager ? '//# allFunctionsCalledOnLoad' : '',
+        '\n(function() { "use strict"; const ',
+        globalDisallowedVars.join('=void 0,'),
+        '=void 0;\n',
+        'card' !== appType ? 'module.exports=\n' : '',
         content,
         '\n})()'
     ].join('');
-async function generateJavascriptUrl(obj, createJsModuleUrl, templateName) {
+async function generateJavascriptUrl(obj, createJsModuleUrl, eager, appType, templateName) {
     const processEntry = async ([name, content])=>[
             name,
-            await createJsModuleUrl(generateModuleContent(content), `${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);
 }
@@ -775,8 +775,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, templateName),
-        manifest: await generateJavascriptUrl(template.manifest, createJsModuleUrl, 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) {
@@ -1199,8 +1199,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');
@@ -1532,9 +1535,10 @@ function createMainThreadGlobalThis(config) {
         childB.replaceWith(childA);
         temp.replaceWith(childB);
     };
-    const __SetCSSIdForCSSOG = (elements, cssId)=>{
+    const __SetCSSIdForCSSOG = (elements, cssId, entryName)=>{
         for (const element of elements){
             element.setAttribute(cssIdAttribute, cssId + '');
+            entryName && element.setAttribute(lynxEntryNameAttribute, entryName);
             const cls = element.getAttribute('class');
             cls && __SetClassesForCSSOG(element, cls);
         }
@@ -1544,13 +1548,15 @@ function createMainThreadGlobalThis(config) {
         element.setAttribute('class', newClassName);
         const cssId = element.getAttribute(cssIdAttribute);
         const uniqueId = Number(element.getAttribute(lynxUniqueIdAttribute));
-        callbacks.updateCssOGStyle(uniqueId, newClassName, cssId);
+        const entryName = element.getAttribute(lynxEntryNameAttribute);
+        callbacks.updateCssOGStyle(uniqueId, newClassName, cssId, entryName);
     };
     const __SetClassesForCSSOG = (element, classNames)=>{
         __SetClasses(element, classNames);
         const cssId = element.getAttribute(cssIdAttribute);
         const uniqueId = Number(element.getAttribute(lynxUniqueIdAttribute));
-        callbacks.updateCssOGStyle(uniqueId, classNames ?? '', cssId);
+        const entryName = element.getAttribute(lynxEntryNameAttribute);
+        callbacks.updateCssOGStyle(uniqueId, classNames ?? '', cssId, entryName);
     };
     const __LoadLepusChunk = (path)=>{
         try {
@@ -1688,6 +1694,7 @@ function createMainThreadGlobalThis(config) {
         __LoadLepusChunk,
         __GetPageElement,
         __globalProps: globalProps,
+        __QueryComponent: callbacks.__QueryComponent,
         SystemInfo,
         lynx: createMainThreadLynx(config, SystemInfo),
         _ReportError: (err, _)=>callbacks._ReportError(err, _, release),
@@ -1781,30 +1788,74 @@ function decodeCssOG(classes, styleInfo, cssId) {
     else console.warn(`[lynx-web] cannot find styleinfo for cssid ${cssId}`);
     return declarations.map(([property, value])=>`${property}:${value};`).join('');
 }
-function flattenStyleInfo(styleInfo, enableCSSSelector) {
-    function flattenOneStyleInfo(cssId) {
-        const oneInfo = styleInfo[cssId];
-        const imports = oneInfo?.imports;
-        if (oneInfo && imports?.length) {
-            for (const im of imports){
-                const flatInfo = flattenOneStyleInfo(im);
-                if (flatInfo) {
-                    oneInfo.content.push(...flatInfo.content);
-                    oneInfo.rules.push(...enableCSSSelector ? flatInfo.rules : flatInfo.rules.map((i)=>({
-                            ...i
-                        })));
-                }
+function topologicalSort(styleInfo) {
+    const queue = [];
+    const inDegreeMap = new Map();
+    for (const [cssId, oneStyleInfo] of Object.entries(styleInfo)){
+        inDegreeMap.has(cssId) || inDegreeMap.set(cssId, 0);
+        for (const importCssId of oneStyleInfo.imports ?? []){
+            const currentInDegree = inDegreeMap.get(importCssId) ?? 0;
+            inDegreeMap.set(importCssId, currentInDegree + 1);
+        }
+    }
+    for (const [cssId, inDegree] of inDegreeMap.entries())if (0 === inDegree) queue.push(cssId);
+    const sortedCssIds = [];
+    while(queue.length > 0){
+        const currentCssId = queue.shift();
+        sortedCssIds.push(currentCssId);
+        const currentAdjunction = styleInfo[currentCssId]?.imports;
+        if (currentAdjunction) for (const importCssId of currentAdjunction){
+            const importInDegree = inDegreeMap.get(importCssId) - 1;
+            inDegreeMap.set(importCssId, importInDegree);
+            if (0 === importInDegree) queue.push(importCssId);
+        }
+    }
+    return sortedCssIds;
+}
+function generateImportByMap(styleInfo, sortedCssIds) {
+    const cssIdToImportBy = new Map();
+    for (const cssId of sortedCssIds){
+        const currentAdjunction = styleInfo[cssId]?.imports;
+        if (currentAdjunction) {
+            const currentImportBy = cssIdToImportBy.get(cssId) ?? new Set([
+                cssId
+            ]);
+            for (const importCssId of currentAdjunction){
+                const importDeps = cssIdToImportBy.get(importCssId) ?? new Set([
+                    importCssId
+                ]);
+                importDeps.add(cssId);
+                cssIdToImportBy.set(importCssId, currentImportBy.union(importDeps));
             }
-            oneInfo.imports = void 0;
+            cssIdToImportBy.set(cssId, currentImportBy);
         }
-        return oneInfo;
     }
-    Object.keys(styleInfo).map((cssId)=>{
-        flattenOneStyleInfo(cssId);
+    return cssIdToImportBy;
+}
+function flattenStyleInfo(styleInfo) {
+    const sortedCssIds = topologicalSort(styleInfo);
+    const cssIdToImportBy = generateImportByMap(styleInfo, sortedCssIds);
+    sortedCssIds.reverse();
+    return sortedCssIds.map((cssId)=>{
+        const oneInfo = styleInfo[cssId];
+        const flattenedInfo = oneInfo ? {
+            content: oneInfo.content,
+            rules: oneInfo.rules,
+            importBy: Array.from(cssIdToImportBy.get(cssId) ?? [
+                cssId
+            ])
+        } : {
+            content: [],
+            rules: [],
+            importBy: [
+                cssId
+            ]
+        };
+        return flattenedInfo;
     });
 }
 function transformToWebCss(styleInfo) {
-    for (const cssInfos of Object.values(styleInfo))for (const rule of cssInfos.rules){
+    for (const cssInfos of styleInfo)for (const rule of cssInfos.rules){
         const { sel: selectors, decl: declarations } = rule;
         const { transformedStyle, childStyle } = transformParsedStyles(declarations);
         rule.decl = transformedStyle;
@@ -1821,18 +1872,20 @@ function transformToWebCss(styleInfo) {
 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 = pageConfig.enableRemoveCSSScope ? `[${lynxTagAttribute}]` : `[${cssIdAttribute}="${cssId}"]`;
+        suffix = entryName ? `${suffix}[${lynxEntryNameAttribute}=${JSON.stringify(entryName)}]` : `${suffix}:not([${lynxEntryNameAttribute}])`;
         return suffix;
     }
     const finalCssContent = [];
-    for (const [cssId, cssInfos] of Object.entries(styleInfo)){
-        const suffix = getExtraSelectors(cssId);
+    for (const cssInfos of styleInfo){
         const declarationContent = cssInfos.rules.map((rule)=>{
             const { sel: selectorList, decl: declarations } = rule;
-            const selectorString = selectorList.map((selectors)=>selectors.toSpliced(-4, 0, [
-                    suffix
-                ]).flat().join('')).join(',');
+            const selectorString = cssInfos.importBy.map((cssId)=>{
+                const suffix = getExtraSelectors(cssId);
+                return selectorList.map((selectors)=>selectors.toSpliced(-4, 0, [
+                        suffix
+                    ]).flat().join('')).join(',');
+            }).join(',');
             const declarationString = declarations.map(([k, v])=>`${k}:${v};`).join('');
             return `${selectorString}{${declarationString}}`;
         }).join('');
@@ -1841,43 +1894,43 @@ function genCssContent(styleInfo, pageConfig, entryName) {
     return finalCssContent.join('\n');
 }
 function genCssOGInfo(styleInfo) {
-    return Object.fromEntries(Object.entries(styleInfo).map(([cssId, cssInfos])=>{
-        const oneCssOGInfo = {};
-        cssInfos.rules = cssInfos.rules.filter((oneCssInfo)=>{
-            oneCssInfo.sel = oneCssInfo.sel.filter((selectorList)=>{
-                const [classSelectors, pseudoClassSelectors, pseudoElementSelectors, combinator] = selectorList;
-                if (1 === classSelectors.length && '.' === classSelectors[0][0] && 0 === pseudoClassSelectors.length && 0 === pseudoElementSelectors.length && 0 === combinator.length) {
-                    const selectorName = classSelectors[0].substring(1);
-                    const currentDeclarations = oneCssOGInfo[selectorName];
-                    if (currentDeclarations) currentDeclarations.push(...oneCssInfo.decl);
-                    else oneCssOGInfo[selectorName] = oneCssInfo.decl;
-                    return false;
+    const cssOGInfo = {};
+    for (const oneInfo of styleInfo)oneInfo.rules = oneInfo.rules.filter((oneRule)=>{
+        oneRule.sel = oneRule.sel.filter((selectorList)=>{
+            const [classSelectors, pseudoClassSelectors, pseudoElementSelectors, combinator] = selectorList;
+            if (1 === classSelectors.length && '.' === classSelectors[0][0] && 0 === pseudoClassSelectors.length && 0 === pseudoElementSelectors.length && 0 === combinator.length) {
+                const selectorName = classSelectors[0].substring(1);
+                for (const cssId of oneInfo.importBy){
+                    if (!cssOGInfo[cssId]) cssOGInfo[cssId] = {};
+                    const currentDeclarations = cssOGInfo[cssId][selectorName];
+                    if (currentDeclarations) currentDeclarations.push(...oneRule.decl);
+                    else cssOGInfo[cssId][selectorName] = oneRule.decl;
                 }
-                return true;
-            });
-            return oneCssInfo.sel.length > 0;
+                return false;
+            }
+            return true;
         });
-        return [
-            cssId,
-            oneCssOGInfo
-        ];
-    }));
+        return oneRule.sel.length > 0;
+    });
+    return cssOGInfo;
 }
-function appendStyleElement(styleInfo, pageConfig, rootDom, document, entryName, ssrHydrateInfo) {
+function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo) {
     const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
-    flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
-    transformToWebCss(styleInfo);
-    const cssOGInfo = pageConfig.enableCSSSelector ? {} : genCssOGInfo(styleInfo);
+    const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+    transformToWebCss(flattenedStyleInfo);
+    const cssOGInfo = pageConfig.enableCSSSelector ? {} : genCssOGInfo(flattenedStyleInfo);
+    const lazyCSSOGInfo = {};
     let cardStyleElement;
     if (ssrHydrateInfo?.cardStyleElement) cardStyleElement = ssrHydrateInfo.cardStyleElement;
     else {
         cardStyleElement = document.createElement('style');
-        cardStyleElement.textContent = genCssContent(styleInfo, pageConfig, entryName);
+        cardStyleElement.textContent = genCssContent(flattenedStyleInfo, pageConfig, void 0);
         rootDom.appendChild(cardStyleElement);
     }
-    const cardStyleElementSheet = cardStyleElement.sheet;
-    const updateCssOGStyle = (uniqueId, newClassName, cssID)=>{
-        const newStyles = decodeCssOG(newClassName, cssOGInfo, cssID);
+    const updateCssOGStyle = (uniqueId, newClassName, cssID, entryName)=>{
+        const cardStyleElementSheet = cardStyleElement.sheet;
+        const styleMap = entryName && lazyCSSOGInfo[entryName] ? lazyCSSOGInfo[entryName] : cssOGInfo;
+        const newStyles = decodeCssOG(newClassName, styleMap, cssID);
         if (void 0 !== lynxUniqueIdToStyleRulesIndex[uniqueId]) {
             const rule = cardStyleElementSheet.cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
             rule.style.cssText = newStyles;
@@ -1886,12 +1939,71 @@ function appendStyleElement(styleInfo, pageConfig, rootDom, document, entryName,
             lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
         }
     };
+    const updateLazyComponentStyle = (styleInfo, entryName)=>{
+        const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+        transformToWebCss(flattenedStyleInfo);
+        if (!pageConfig.enableCSSSelector) lazyCSSOGInfo[entryName] = genCssOGInfo(flattenedStyleInfo);
+        const newStyleSheet = genCssContent(flattenedStyleInfo, pageConfig, entryName);
+        cardStyleElement.textContent += newStyleSheet;
+    };
     return {
-        updateCssOGStyle
+        updateCssOGStyle,
+        updateLazyComponentStyle
+    };
+}
+function createQueryComponent(loadTemplate, updateLazyComponentStyle, backgroundThreadRpc, mtsGlobalThisRef, jsContext, mtsRealm) {
+    const updateBTSTemplateCache = backgroundThreadRpc.createCall(updateBTSTemplateCacheEndpoint);
+    const lazyCache = new Map();
+    const __QueryComponentImpl = (url, callback)=>{
+        const cacheLazy = lazyCache.get(url);
+        const loadPromise = cacheLazy ?? 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
+            });
+            return lepusRootChunkExport;
+        });
+        cacheLazy || lazyCache.set(url, loadPromise);
+        loadPromise.then((lepusRootChunkExport)=>{
+            callback?.({
+                code: 0,
+                data: {
+                    url,
+                    evalResult: lepusRootChunkExport
+                }
+            });
+        }).catch((error)=>{
+            console.error("lynx web: lazy bundle load failed:", error);
+            lazyCache.delete(url);
+            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);
@@ -1911,7 +2023,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, ssrHydrateInfo);
+        const mtsGlobalThisRef = {
+            mtsGlobalThis: void 0
+        };
+        const __QueryComponent = createQueryComponent(loadTemplate, updateLazyComponentStyle, backgroundThreadRpc, mtsGlobalThisRef, jsContext, mtsRealm);
         const mtsGlobalThis = createMainThreadGlobalThis({
             lynxTemplate: template,
             mtsRealm,
@@ -1995,9 +2111,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();
@@ -2017,7 +2135,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');
@@ -2211,6 +2329,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();
@@ -2462,13 +2583,35 @@ const templateXOverlayNg = `<style>
     right: 0;
     bottom: 0;
     position: fixed;
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+  }
+  #dialog[open]::-webkit-scrollbar {
+    display: none;
   }
   #dialog::backdrop {
     background-color: transparent;
   }
+  .overlay-inner {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+  .overlay-inner > * {
+    pointer-events: auto;
+  }
+  .overlay-placeholder {
+    width: 100%;
+    height: 1px;
+  }
 </style>
 <dialog id="dialog" part="dialog">
-  <slot></slot>
+  <div class="overlay-inner">
+    <slot></slot>
+  </div>
+  <div class="overlay-placeholder"></div>
 </dialog>`;
 const templateXRefreshView = `<style>
   .bounce-container {
@@ -2702,7 +2845,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');
@@ -2723,7 +2866,15 @@ async function createLynxView(config) {
         const script = new node_vm.Script(scriptContent.toString(), {
             filename: url
         });
-        return script.runInContext(mtsVMContext);
+        mtsVMContext.module = {
+            exports: null
+        };
+        script.runInContext(mtsVMContext);
+        const ret = mtsVMContext.module.exports;
+        mtsVMContext.module = {
+            exports: null
+        };
+        return ret;
     };
     const loadScript = async (url)=>new Promise((resolve, reject)=>{
             node_fs.readFile(url, (err, data)=>{
@@ -2732,8 +2883,15 @@ async function createLynxView(config) {
                     const script = new node_vm.Script(data.toString(), {
                         filename: url
                     });
-                    const result = script.runInContext(mtsVMContext);
-                    resolve(result);
+                    mtsVMContext.module = {
+                        exports: null
+                    };
+                    script.runInContext(mtsVMContext);
+                    const ret = mtsVMContext.module.exports;
+                    mtsVMContext.module = {
+                        exports: null
+                    };
+                    resolve(ret);
                 } catch (e) {
                     reject(e);
                 }
@@ -2748,7 +2906,7 @@ async function createLynxView(config) {
     }, ()=>{}, ()=>{}, ()=>{}, ()=>{}, (initI18nResources)=>{
         i18nResources.setData(initI18nResources);
         return i18nResources;
-    }, {
+    }, ()=>{}, {
         __AddEvent (element, eventName, eventData, eventOptions) {
             events.push([
                 Number(element.getAttribute(lynxUniqueIdAttribute)),

package/dist/legacy-wasm-chunk.js

@@ -3,17 +3,17 @@ export const __webpack_ids__ = [
     "8"
 ];
 export const __webpack_modules__ = {
-    "../web-style-transformer/dist/legacy.js": function(module, __webpack_exports__, __webpack_require__) {
-        __webpack_require__.a(module, async function(__webpack_handle_async_dependencies__, __webpack_async_result__) {
+    "../web-style-transformer/dist/legacy.js": function(__webpack_module__, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.a(__webpack_module__, async function(__webpack_handle_async_dependencies__, __webpack_async_result__) {
             try {
                 __webpack_require__.d(__webpack_exports__, {
-                    M2: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.M2,
+                    Fz: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.Fz,
                     Qn: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.Qn,
                     aC: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.aC,
                     bk: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.bk,
                     iG: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.iG,
                     lI: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.lI,
-                    tZ: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.tZ,
+                    qB: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.qB,
                     yc: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.yc
                 });
                 var _legacy_bg_wasm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../web-style-transformer/dist/legacy_bg.wasm");
@@ -29,18 +29,17 @@ export const __webpack_modules__ = {
             }
         });
     },
-    "../web-style-transformer/dist/legacy_bg.js": function(module, __webpack_exports__, __webpack_require__) {
+    "../web-style-transformer/dist/legacy_bg.js": function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
         __webpack_require__.d(__webpack_exports__, {
-            M2: ()=>__wbg_new_78feb108b6472713,
+            Fz: ()=>__wbg_new_58353953ad2097cc,
             Qn: ()=>__wbindgen_throw,
             aC: ()=>transform_raw_u16_inline_style_ptr,
             bk: ()=>__wbindgen_object_drop_ref,
             iG: ()=>transform_raw_u16_inline_style_ptr_parsed,
             lI: ()=>__wbg_set_wasm,
-            tZ: ()=>__wbg_push_737cfc8c1432c2c6,
+            qB: ()=>__wbg_push_73fd7b5550ebf707,
             yc: ()=>__wbindgen_string_new
         });
-        module = __webpack_require__.hmd(module);
         let wasm;
         function __wbg_set_wasm(val) {
             wasm = val;
@@ -68,24 +67,38 @@ export const __webpack_modules__ = {
             dropObject(idx);
             return ret;
         }
+        let cachedUint8ArrayMemory0 = null;
+        function getUint8ArrayMemory0() {
+            if (null === cachedUint8ArrayMemory0 || 0 === cachedUint8ArrayMemory0.byteLength) cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+            return cachedUint8ArrayMemory0;
+        }
         const lTextDecoder = 'undefined' == typeof TextDecoder ? (0, module.require)('util').TextDecoder : TextDecoder;
         let cachedTextDecoder = new lTextDecoder('utf-8', {
             ignoreBOM: true,
             fatal: true
         });
         cachedTextDecoder.decode();
-        let cachedUint8ArrayMemory0 = null;
-        function getUint8ArrayMemory0() {
-            if (null === cachedUint8ArrayMemory0 || 0 === cachedUint8ArrayMemory0.byteLength) cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
-            return cachedUint8ArrayMemory0;
+        const MAX_SAFARI_DECODE_BYTES = 2146435072;
+        let numBytesDecoded = 0;
+        function decodeText(ptr, len) {
+            numBytesDecoded += len;
+            if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+                cachedTextDecoder = new lTextDecoder('utf-8', {
+                    ignoreBOM: true,
+                    fatal: true
+                });
+                cachedTextDecoder.decode();
+                numBytesDecoded = len;
+            }
+            return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
         }
         function getStringFromWasm0(ptr, len) {
             ptr >>>= 0;
-            return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+            return decodeText(ptr, len);
         }
         let WASM_VECTOR_LEN = 0;
         const lTextEncoder = 'undefined' == typeof TextEncoder ? (0, module.require)('util').TextEncoder : TextEncoder;
-        let cachedTextEncoder = new lTextEncoder('utf-8');
+        const cachedTextEncoder = new lTextEncoder('utf-8');
         const encodeString = 'function' == typeof cachedTextEncoder.encodeInto ? function(arg, view) {
             return cachedTextEncoder.encodeInto(arg, view);
         } : function(arg, view) {
@@ -155,11 +168,11 @@ export const __webpack_modules__ = {
             const ret = wasm.transform_raw_u16_inline_style_ptr_parsed(ptr0, len0, ptr1, len1);
             return takeObject(ret);
         }
-        function __wbg_new_78feb108b6472713() {
+        function __wbg_new_58353953ad2097cc() {
             const ret = new Array();
             return addHeapObject(ret);
         }
-        function __wbg_push_737cfc8c1432c2c6(arg0, arg1) {
+        function __wbg_push_73fd7b5550ebf707(arg0, arg1) {
             const ret = getObject(arg0).push(getObject(arg1));
             return ret;
         }
@@ -174,13 +187,13 @@ export const __webpack_modules__ = {
             throw new Error(getStringFromWasm0(arg0, arg1));
         }
     },
-    "../web-style-transformer/legacy.js": function(module, __webpack_exports__, __webpack_require__) {
-        __webpack_require__.a(module, async function(__webpack_handle_async_dependencies__, __webpack_async_result__) {
+    "../web-style-transformer/legacy.js": function(__webpack_module__, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.a(__webpack_module__, async function(__webpack_handle_async_dependencies__, __webpack_async_result__) {
             try {
                 __webpack_require__.r(__webpack_exports__);
                 __webpack_require__.d(__webpack_exports__, {
-                    __wbg_new_78feb108b6472713: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.M2,
-                    __wbg_push_737cfc8c1432c2c6: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.tZ,
+                    __wbg_new_58353953ad2097cc: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.Fz,
+                    __wbg_push_73fd7b5550ebf707: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.qB,
                     __wbg_set_wasm: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.lI,
                     __wbindgen_object_drop_ref: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.bk,
                     __wbindgen_string_new: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.yc,
@@ -202,13 +215,13 @@ export const __webpack_modules__ = {
             }
         });
     },
-    "../web-style-transformer/dist/legacy_bg.wasm": function(module, exports, __webpack_require__) {
+    "../web-style-transformer/dist/legacy_bg.wasm": function(module1, exports, __webpack_require__) {
         var WEBPACK_IMPORTED_MODULE_0 = __webpack_require__("../web-style-transformer/dist/legacy_bg.js");
-        module.exports = __webpack_require__.v(exports, module.id, "578076972e1e5ffd", {
+        module1.exports = __webpack_require__.v(exports, module1.id, "fe95f2851571c1d7", {
             "./legacy_bg.js": {
-                __wbg_new_78feb108b6472713: WEBPACK_IMPORTED_MODULE_0.M2,
+                __wbg_new_58353953ad2097cc: WEBPACK_IMPORTED_MODULE_0.Fz,
                 __wbindgen_string_new: WEBPACK_IMPORTED_MODULE_0.yc,
-                __wbg_push_737cfc8c1432c2c6: WEBPACK_IMPORTED_MODULE_0.tZ,
+                __wbg_push_73fd7b5550ebf707: WEBPACK_IMPORTED_MODULE_0.qB,
                 __wbindgen_object_drop_ref: WEBPACK_IMPORTED_MODULE_0.bk,
                 __wbindgen_throw: WEBPACK_IMPORTED_MODULE_0.Qn
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core-server",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -26,10 +26,10 @@
     "rsbuild-plugin-arethetypeswrong": "0.1.1",
     "rsbuild-plugin-publint": "0.3.3",
     "@lynx-js/offscreen-document": "0.1.4",
-    "@lynx-js/web-constants": "0.16.0",
-    "@lynx-js/web-elements-template": "0.8.4",
-    "@lynx-js/web-mainthread-apis": "0.16.0",
-    "@lynx-js/web-worker-rpc": "0.16.0"
+    "@lynx-js/web-constants": "0.17.0",
+    "@lynx-js/web-elements-template": "0.8.7",
+    "@lynx-js/web-mainthread-apis": "0.17.0",
+    "@lynx-js/web-worker-rpc": "0.17.0"
   },
   "scripts": {
     "build": "rslib build",