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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lynx-js/web-core-server
 
+## 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";
 })();
@@ -389,17 +387,14 @@ __webpack_require__.m = __webpack_modules__;
         }
     };
 })();
-const lynxUniqueIdAttribute = 'l-uid';
 const cssIdAttribute = 'l-css-id';
 const componentIdAttribute = 'l-comp-id';
 const parentComponentUniqueIdAttribute = 'l-p-comp-uid';
 const lynxEntryNameAttribute = 'l-e-name';
 const lynxTagAttribute = 'lynx-tag';
-const lynxDatasetAttribute = 'l-dset';
 const lynxComponentConfigAttribute = 'l-comp-cfg';
 const lynxDisposedAttribute = 'l-disposed';
 const lynxElementTemplateMarkerAttribute = 'l-template';
-const lynxPartIdAttribute = 'l-part';
 const lynxDefaultDisplayLinearAttribute = 'lynx-default-display-linear';
 const __lynx_timing_flag = '__lynx_timing_flag';
 const systemInfo = {
@@ -653,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";
@@ -742,29 +740,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.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',
+        'lazy' === 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 +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, 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) {
@@ -1159,11 +1156,11 @@ const __AddConfig = /*#__PURE__*/ (element, type, value)=>{
 const __AddDataset = /*#__PURE__*/ (element, key, value)=>{
     const currentDataset = __GetDataset(element);
     currentDataset[key] = value;
-    element.setAttribute(lynxDatasetAttribute, encodeURIComponent(JSON.stringify(currentDataset)));
+    element.setAttribute("l-dset", encodeURIComponent(JSON.stringify(currentDataset)));
     value ? element.setAttribute('data-' + key, value.toString()) : element.removeAttribute('data-' + key);
 };
 const __GetDataset = /*#__PURE__*/ (element)=>{
-    const datasetString = element.getAttribute(lynxDatasetAttribute);
+    const datasetString = element.getAttribute("l-dset");
     const currentDataset = datasetString ? JSON.parse(decodeURIComponent(datasetString)) : {};
     return currentDataset;
 };
@@ -1181,7 +1178,7 @@ const __GetElementConfig = /*#__PURE__*/ (element)=>{
     return currentComponentConfigString ? JSON.parse(decodeURIComponent(currentComponentConfigString)) : {};
 };
 const __GetAttributeByName = /*#__PURE__*/ (element, name)=>element.getAttribute(name);
-const __GetElementUniqueID = /*#__PURE__*/ (element)=>element && element.getAttribute ? Number(element.getAttribute(lynxUniqueIdAttribute)) : -1;
+const __GetElementUniqueID = /*#__PURE__*/ (element)=>element && element.getAttribute ? Number(element.getAttribute("l-uid")) : -1;
 const __GetID = /*#__PURE__*/ (element)=>element.getAttribute('id');
 const __SetID = /*#__PURE__*/ (element, id)=>id ? element.setAttribute('id', id) : element.removeAttribute('id');
 const __GetTag = /*#__PURE__*/ (element)=>element.getAttribute(lynxTagAttribute);
@@ -1189,7 +1186,7 @@ const __SetConfig = /*#__PURE__*/ (element, config)=>{
     element.setAttribute(lynxComponentConfigAttribute, encodeURIComponent(JSON.stringify(config)));
 };
 const __SetDataset = /*#__PURE__*/ (element, dataset)=>{
-    element.setAttribute(lynxDatasetAttribute, encodeURIComponent(JSON.stringify(dataset)));
+    element.setAttribute("l-dset", encodeURIComponent(JSON.stringify(dataset)));
     for (const [key, value] of Object.entries(dataset))element.setAttribute('data-' + key, value.toString());
 };
 const __UpdateComponentID = /*#__PURE__*/ (element, componentID)=>element.setAttribute(componentIdAttribute, componentID);
@@ -1199,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');
@@ -1244,9 +1244,9 @@ const __GetTemplateParts = (templateElement)=>{
     if (!isTemplate) return {};
     const templateUniqueId = __GetElementUniqueID(templateElement);
     const parts = {};
-    const partElements = templateElement.querySelectorAll(`[${lynxUniqueIdAttribute}="${templateUniqueId}"] [${lynxPartIdAttribute}]:not([${lynxUniqueIdAttribute}="${templateUniqueId}"] [${lynxElementTemplateMarkerAttribute}] [${lynxPartIdAttribute}])`);
+    const partElements = templateElement.querySelectorAll(`[l-uid="${templateUniqueId}"] [l-part]:not([l-uid="${templateUniqueId}"] [${lynxElementTemplateMarkerAttribute}] [l-part])`);
     for (const partElement of partElements){
-        const partId = partElement.getAttribute(lynxPartIdAttribute);
+        const partId = partElement.getAttribute("l-part");
         if (partId) parts[partId] = partElement;
     }
     return parts;
@@ -1255,7 +1255,7 @@ const __MarkTemplateElement = (element)=>{
     element.setAttribute(lynxElementTemplateMarkerAttribute, '');
 };
 const __MarkPartElement = (element, partId)=>{
-    element.setAttribute(lynxPartIdAttribute, partId);
+    element.setAttribute("l-part", partId);
 };
 function toCloneableObject(obj) {
     const cloneableObj = {};
@@ -1299,9 +1299,9 @@ function createCrossThreadEvent(domEvent, eventName) {
             changedTouches: isTrusted ? changedTouches.map(toCloneableObject) : changedTouches
         });
     }
-    const currentTargetDatasetString = currentTargetElement?.getAttribute(lynxDatasetAttribute);
+    const currentTargetDatasetString = currentTargetElement?.getAttribute("l-dset");
     const currentTargetDataset = currentTargetDatasetString ? JSON.parse(decodeURIComponent(currentTargetDatasetString)) : {};
-    const targetDatasetString = targetElement.getAttribute(lynxDatasetAttribute);
+    const targetDatasetString = targetElement.getAttribute("l-dset");
     const targetDataset = targetDatasetString ? JSON.parse(decodeURIComponent(targetDatasetString)) : {};
     return {
         type: eventName,
@@ -1309,12 +1309,12 @@ function createCrossThreadEvent(domEvent, eventName) {
         target: {
             id: targetElement.getAttribute('id'),
             dataset: targetDataset,
-            uniqueId: Number(targetElement.getAttribute(lynxUniqueIdAttribute))
+            uniqueId: Number(targetElement.getAttribute("l-uid"))
         },
         currentTarget: currentTargetElement ? {
             id: currentTargetElement.getAttribute('id'),
             dataset: currentTargetDataset,
-            uniqueId: Number(currentTargetElement.getAttribute(lynxUniqueIdAttribute))
+            uniqueId: Number(currentTargetElement.getAttribute("l-uid"))
         } : null,
         detail: domEvent.detail ?? {},
         params,
@@ -1451,7 +1451,7 @@ function createMainThreadGlobalThis(config) {
         const parentComponentCssID = lynxUniqueIdToElement[parentComponentUniqueId]?.deref()?.getAttribute(cssIdAttribute);
         parentComponentCssID && '0' !== parentComponentCssID && element.setAttribute(cssIdAttribute, parentComponentCssID);
         element.setAttribute(lynxTagAttribute, tag);
-        element.setAttribute(lynxUniqueIdAttribute, uniqueId + '');
+        element.setAttribute("l-uid", uniqueId + '');
         element.setAttribute(parentComponentUniqueIdAttribute, parentComponentUniqueId + '');
         return element;
     };
@@ -1543,13 +1543,13 @@ function createMainThreadGlobalThis(config) {
         const newClassName = ((element.getAttribute('class') ?? '') + ' ' + className).trim();
         element.setAttribute('class', newClassName);
         const cssId = element.getAttribute(cssIdAttribute);
-        const uniqueId = Number(element.getAttribute(lynxUniqueIdAttribute));
+        const uniqueId = Number(element.getAttribute("l-uid"));
         callbacks.updateCssOGStyle(uniqueId, newClassName, cssId);
     };
     const __SetClassesForCSSOG = (element, classNames)=>{
         __SetClasses(element, classNames);
         const cssId = element.getAttribute(cssIdAttribute);
-        const uniqueId = Number(element.getAttribute(lynxUniqueIdAttribute));
+        const uniqueId = Number(element.getAttribute("l-uid"));
         callbacks.updateCssOGStyle(uniqueId, classNames ?? '', cssId);
     };
     const __LoadLepusChunk = (path)=>{
@@ -1587,7 +1587,7 @@ function createMainThreadGlobalThis(config) {
     };
     const applyEventsForElementTemplate = (data, element)=>{
         const uniqueId = uniqueIdInc++;
-        element.setAttribute(lynxUniqueIdAttribute, uniqueId + '');
+        element.setAttribute("l-uid", uniqueId + '');
         for (const event of data.events || []){
             const { type, name, value } = event;
             __AddEvent(element, type, name, value);
@@ -1688,6 +1688,7 @@ function createMainThreadGlobalThis(config) {
         __LoadLepusChunk,
         __GetPageElement,
         __globalProps: globalProps,
+        __QueryComponent: callbacks.__QueryComponent,
         SystemInfo,
         lynx: createMainThreadLynx(config, SystemInfo),
         _ReportError: (err, _)=>callbacks._ReportError(err, _, release),
@@ -1720,7 +1721,7 @@ function createExposureService(rootDom, postExposure) {
     const onScreen = new Map();
     function exposureEventHandler(ev) {
         const exposureEvent = createCrossThreadEvent(ev, ev.type);
-        exposureEvent.detail['unique-id'] = parseFloat(ev.target.getAttribute(lynxUniqueIdAttribute));
+        exposureEvent.detail['unique-id'] = parseFloat(ev.target.getAttribute("l-uid"));
         const exposureID = exposureEvent.detail.exposureID;
         if ('exposure' === ev.type) {
             exposureCache.push(exposureEvent);
@@ -1822,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 = [];
@@ -1882,16 +1883,67 @@ function appendStyleElement(styleInfo, pageConfig, rootDom, document, entryName,
             const rule = cardStyleElementSheet.cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
             rule.style.cssText = newStyles;
         } else {
-            const index = cardStyleElementSheet.insertRule(`[${lynxUniqueIdAttribute}="${uniqueId}"]{${newStyles}}`, cardStyleElementSheet.cssRules.length);
+            const index = cardStyleElementSheet.insertRule(`[l-uid="${uniqueId}"]{${newStyles}}`, cardStyleElementSheet.cssRules.length);
             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);
@@ -1911,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,
@@ -1995,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();
@@ -2017,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');
@@ -2211,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();
@@ -2462,13 +2523,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 {
@@ -2654,8 +2737,8 @@ function getTextContentImpl(buffer, element, shadowrootTemplates) {
             buffer.push('"');
         }
     }
-    const partId = element[_attributes].get(lynxPartIdAttribute) ?? element[_attributes].get(lynxUniqueIdAttribute);
-    buffer.push(' ', lynxPartIdAttribute, '="', partId, '"');
+    const partId = element[_attributes].get("l-part") ?? element[_attributes].get("l-uid");
+    buffer.push(' ', "l-part", '="', partId, '"');
     buffer.push('>');
     const templateImpl = shadowrootTemplates[localName];
     if (templateImpl) {
@@ -2697,12 +2780,12 @@ const builtinTagTransformMap = {
 };
 OffscreenElement.prototype.toJSON = function() {
     return {
-        ssrID: this[_attributes].get(lynxPartIdAttribute) ?? this[_attributes].get(lynxUniqueIdAttribute)
+        ssrID: this[_attributes].get("l-part") ?? this[_attributes].get("l-uid")
     };
 };
 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 +2806,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 +2823,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,10 +2846,10 @@ async function createLynxView(config) {
     }, ()=>{}, ()=>{}, ()=>{}, ()=>{}, (initI18nResources)=>{
         i18nResources.setData(initI18nResources);
         return i18nResources;
-    }, {
+    }, ()=>{}, {
         __AddEvent (element, eventName, eventData, eventOptions) {
             events.push([
-                Number(element.getAttribute(lynxUniqueIdAttribute)),
+                Number(element.getAttribute("l-uid")),
                 eventName,
                 eventData,
                 eventOptions

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.16.1",
   "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.16.1",
+    "@lynx-js/web-elements-template": "0.8.6",
+    "@lynx-js/web-mainthread-apis": "0.16.1",
+    "@lynx-js/web-worker-rpc": "0.16.1"
   },
   "scripts": {
     "build": "rslib build",