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

package/dist/index.js

@@ -1,19 +1,21 @@
 import node_os from "node:os";
 import promises from "node:fs/promises";
 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__, {
-                    C2: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.C2,
-                    Or: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.Or,
-                    a9: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.a9,
-                    h4: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.h4,
-                    oT: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.oT,
-                    pE: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.pE,
-                    xJ: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.xJ,
-                    xQ: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.xQ
+                    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,
+                    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");
                 var _standard_bg_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../web-style-transformer/dist/standard_bg.js");
@@ -21,7 +23,7 @@ var __webpack_modules__ = {
                     _standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__
                 ]);
                 _standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
-                (0, _standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.oT)(_standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__);
+                (0, _standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.lI)(_standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__);
                 _standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__.__wbindgen_start();
                 __webpack_async_result__();
             } catch (e) {
@@ -29,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__, {
-            C2: ()=>__wbg_push_737cfc8c1432c2c6,
-            Or: ()=>__wbindgen_throw,
-            a9: ()=>__wbg_new_78feb108b6472713,
-            h4: ()=>__wbindgen_string_new,
-            oT: ()=>__wbg_set_wasm,
-            pE: ()=>transform_raw_u16_inline_style_ptr_parsed,
-            xJ: ()=>transform_raw_u16_inline_style_ptr,
-            xQ: ()=>__wbindgen_init_externref_table
+            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,
+            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) {
@@ -120,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;
         }
@@ -145,19 +160,19 @@ 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__.a9,
-                    __wbg_push_737cfc8c1432c2c6: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.C2,
-                    __wbg_set_wasm: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.oT,
-                    __wbindgen_init_externref_table: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.xQ,
-                    __wbindgen_string_new: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.h4,
-                    __wbindgen_throw: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.Or,
-                    transform_raw_u16_inline_style_ptr: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.xJ,
-                    transform_raw_u16_inline_style_ptr_parsed: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.pE
+                    __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,
+                    __wbindgen_throw: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.Qn,
+                    transform_raw_u16_inline_style_ptr: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.aC,
+                    transform_raw_u16_inline_style_ptr_parsed: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.iG
                 });
                 var _dist_standard_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../web-style-transformer/dist/standard.js");
                 var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([
@@ -170,15 +185,15 @@ 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.a9,
-                __wbindgen_string_new: WEBPACK_IMPORTED_MODULE_0.h4,
-                __wbg_push_737cfc8c1432c2c6: WEBPACK_IMPORTED_MODULE_0.C2,
-                __wbindgen_throw: WEBPACK_IMPORTED_MODULE_0.Or,
-                __wbindgen_init_externref_table: WEBPACK_IMPORTED_MODULE_0.xQ
+                __wbg_new_58353953ad2097cc: WEBPACK_IMPORTED_MODULE_0.Fz,
+                __wbindgen_string_new: WEBPACK_IMPORTED_MODULE_0.yc,
+                __wbg_push_73fd7b5550ebf707: WEBPACK_IMPORTED_MODULE_0.qB,
+                __wbindgen_throw: WEBPACK_IMPORTED_MODULE_0.Qn,
+                __wbindgen_init_externref_table: WEBPACK_IMPORTED_MODULE_0.bL
             }
         });
     }
@@ -187,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__;
 (()=>{
@@ -231,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;
@@ -247,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;
@@ -281,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";
 })();
@@ -352,7 +352,7 @@ __webpack_require__.m = __webpack_modules__;
 })();
 (()=>{
     var installedChunks = {
-        980: 0
+        410: 0
     };
     var installChunk = (data)=>{
         var __webpack_ids__ = data.__webpack_ids__;
@@ -387,24 +387,16 @@ __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 globalMuteableVars = [
-    'registerDataProcessor',
-    'registerWorkletInternal',
-    'lynxWorkletImpl',
-    'runWorklet'
-];
 const systemInfo = {
     platform: 'web',
     lynxSdkVersion: '3.0'
@@ -418,10 +410,6 @@ const inShadowRootStyles = [
     overflow: visible;
   }`
 ];
-const constants_globalDisallowedVars = [
-    'navigator',
-    'postMessage'
-];
 const W3cEventNameToLynx = {
     click: 'tap',
     lynxscroll: 'scroll',
@@ -473,12 +461,12 @@ class Rpc {
         };
     }
     #onMessage = async (message)=>{
-        const handler1 = this.#handlerMap.get(message.name);
-        if (handler1) {
+        const handler = this.#handlerMap.get(message.name);
+        if (handler) {
             const lockViewer = message.sync ? new Int32Array(message.lock) : void 0;
             const replyTempEndpoint = !message.sync && message.retId ? Rpc.createRetEndpoint(message.retId) : void 0;
             try {
-                const result = await handler1(...message.data);
+                const result = await handler(...message.data);
                 let retData, transfer = [];
                 if (message.sync) retData = result;
                 else if (message.hasTransfer) ({ data: retData, transfer } = result || {});
@@ -521,8 +509,8 @@ class Rpc {
     createCall(endpoint) {
         return (...args)=>this.invoke(endpoint, args);
     }
-    registerHandler(endpoint, handler1) {
-        this.#handlerMap.set(endpoint.name, handler1);
+    registerHandler(endpoint, handler) {
+        this.#handlerMap.set(endpoint.name, handler);
         const currentCache = this.#messageCache[endpoint.name];
         if (currentCache?.length) {
             this.#messageCache[endpoint.name] = void 0;
@@ -660,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";
@@ -741,115 +732,48 @@ class LynxCrossThreadContext extends EventTarget {
         });
     }
 }
-const mainThreadInjectVars = [
-    'lynx',
-    'globalThis',
-    '_ReportError',
-    '_SetSourceMapRelease',
-    '__AddConfig',
-    '__AddDataset',
-    '__GetAttributes',
-    '__GetComponentID',
-    '__GetDataByKey',
-    '__GetDataset',
-    '__GetElementConfig',
-    '__GetElementUniqueID',
-    '__GetID',
-    '__GetTag',
-    '__SetAttribute',
-    '__SetConfig',
-    '__SetDataset',
-    '__SetID',
-    '__UpdateComponentID',
-    '__UpdateComponentInfo',
-    '__GetConfig',
-    '__GetAttributeByName',
-    '__UpdateListCallbacks',
-    '__AppendElement',
-    '__ElementIsEqual',
-    '__FirstElement',
-    '__GetChildren',
-    '__GetParent',
-    '__InsertElementBefore',
-    '__LastElement',
-    '__NextElement',
-    '__RemoveElement',
-    '__ReplaceElement',
-    '__ReplaceElements',
-    '__SwapElement',
-    '__CreateComponent',
-    '__CreateElement',
-    '__CreatePage',
-    '__CreateView',
-    '__CreateText',
-    '__CreateRawText',
-    '__CreateImage',
-    '__CreateScrollView',
-    '__CreateWrapperElement',
-    '__CreateList',
-    '__AddEvent',
-    '__GetEvent',
-    '__GetEvents',
-    '__SetEvents',
-    '__AddClass',
-    '__SetClasses',
-    '__GetClasses',
-    '__AddInlineStyle',
-    '__SetInlineStyles',
-    '__SetCSSId',
-    '__OnLifecycleEvent',
-    '__FlushElementTree',
-    '__LoadLepusChunk',
-    'SystemInfo',
-    '_I18nResourceTranslation',
-    '_AddEventListener',
-    '__GetTemplateParts',
-    '__MarkPartElement',
-    '__MarkTemplateElement',
-    '__GetPageElement',
-    '__ElementFromBinary'
-];
-const backgroundInjectVars = [
-    'NativeModules',
-    'globalThis',
-    'lynx',
-    'lynxCoreInject',
-    'SystemInfo'
+const currentSupportedTemplateVersion = 2;
+const globalDisallowedVars = [
+    'navigator',
+    'postMessage'
 ];
-const backgroundInjectWithBind = [
-    'Card',
-    'Component'
+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,
+                `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, injectVars, injectWithBind, muteableVars, globalDisallowedVars, isESM)=>[
-        '//# allFunctionsCalledOnLoad\n',
-        isESM ? 'export default ' : 'globalThis.module.exports =',
-        'function(lynx_runtime) {',
-        'const module= {exports:{}};let exports = module.exports;',
-        'var {',
-        injectVars.join(','),
-        '} = lynx_runtime;',
-        ...injectWithBind.map((nm)=>`const ${nm} = lynx_runtime.${nm}?.bind(lynx_runtime);`),
-        ';var globDynamicComponentEntry = \'__Card__\';',
-        0 !== globalDisallowedVars.length ? `var ${globalDisallowedVars.join('=')}=undefined;` : '',
-        'var {__globalProps} = lynx;',
-        'lynx_runtime._updateVars=()=>{',
-        ...muteableVars.map((nm)=>`${nm} = lynx_runtime.__lynxGlobalBindingValues.${nm};`),
-        '};\n',
+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 return module.exports;}'
+        '\n})()'
     ].join('');
-async function generateJavascriptUrl(obj, injectVars, injectWithBind, muteableVars, globalDisallowedVars, createJsModuleUrl, isESM, templateName) {
+async function generateJavascriptUrl(obj, createJsModuleUrl, eager, appType, templateName) {
     const processEntry = async ([name, content])=>[
             name,
-            await createJsModuleUrl(generateModuleContent(content, injectVars.concat(muteableVars), injectWithBind, muteableVars, globalDisallowedVars, isESM), `${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);
 }
 async function generateTemplate(template, createJsModuleUrl, templateName) {
+    template.version = template.version ?? 1;
+    if (template.version > currentSupportedTemplateVersion) throw new Error("Unsupported template, please upgrade your web-platform dependencies");
+    let upgrader;
+    while(template.version < currentSupportedTemplateVersion && (upgrader = templateUpgraders[template.version - 1]))template = upgrader(template);
     return {
         ...template,
-        lepusCode: await generateJavascriptUrl(template.lepusCode, mainThreadInjectVars, [], globalMuteableVars, templateName ? [] : constants_globalDisallowedVars, createJsModuleUrl, true, templateName),
-        manifest: await generateJavascriptUrl(template.manifest, backgroundInjectVars, backgroundInjectWithBind, [], templateName ? [] : constants_globalDisallowedVars, 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) {
@@ -861,163 +785,34 @@ function registerGetCustomSectionHandler(rpc, customSections) {
     rpc.registerHandler(getCustomSectionsEndpoint, (key)=>customSections[key]?.content);
 }
 function createMainThreadLynx(config, SystemInfo) {
+    const requestAnimationFrameBrowserImpl = requestAnimationFrame;
+    const cancelAnimationFrameBrowserImpl = cancelAnimationFrame;
+    const setTimeoutBrowserImpl = setTimeout;
+    const clearTimeoutBrowserImpl = clearTimeout;
+    const setIntervalBrowserImpl = setInterval;
+    const clearIntervalBrowserImpl = clearInterval;
     return {
         getJSContext () {
             return config.jsContext;
         },
         requestAnimationFrame (cb) {
-            return requestAnimationFrame(cb);
+            return requestAnimationFrameBrowserImpl(cb);
         },
-        cancelAnimationFrame (handler1) {
-            return cancelAnimationFrame(handler1);
+        cancelAnimationFrame (handler) {
+            return cancelAnimationFrameBrowserImpl(handler);
         },
         __globalProps: config.globalProps,
         getCustomSectionSync (key) {
-            return config.customSections[key]?.content;
+            return config.lynxTemplate.customSections[key]?.content;
         },
         markPipelineTiming: config.callbacks.markTiming,
-        SystemInfo
-    };
-}
-const referenceTypes = async ()=>WebAssembly.validate(new Uint8Array([
-        0,
-        97,
-        115,
-        109,
-        1,
-        0,
-        0,
-        0,
-        1,
-        4,
-        1,
-        96,
-        0,
-        0,
-        3,
-        2,
-        1,
-        0,
-        10,
-        7,
-        1,
-        5,
-        0,
-        208,
-        112,
-        26,
-        11
-    ]));
-let wasm;
-async function initWasm() {
-    const supportsReferenceTypes = await referenceTypes();
-    wasm = supportsReferenceTypes ? await Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "../web-style-transformer/standard.js")) : await __webpack_require__.e("501").then(__webpack_require__.bind(__webpack_require__, "../web-style-transformer/legacy.js"));
-}
-function transformInlineStyleString(str) {
-    return wasm.transform_raw_u16_inline_style_ptr(str) ?? str;
-}
-function transformParsedStyles(styles) {
-    let childStyle = [];
-    let transformedStyle = [];
-    for (const [property, value] of styles){
-        const transformedResult = wasm.transform_raw_u16_inline_style_ptr_parsed(property, value);
-        if (transformedResult) {
-            const [transformedStyleForCurrent, childStyleForCurrent] = transformedResult;
-            transformedStyle = transformedStyle.concat(transformedStyleForCurrent);
-            if (childStyleForCurrent) childStyle = childStyle.concat(childStyleForCurrent);
-        } else transformedStyle.push([
-            property,
-            value
-        ]);
-    }
-    return {
-        childStyle,
-        transformedStyle
+        SystemInfo,
+        setTimeout: setTimeoutBrowserImpl,
+        clearTimeout: clearTimeoutBrowserImpl,
+        setInterval: setIntervalBrowserImpl,
+        clearInterval: clearIntervalBrowserImpl
     };
 }
-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
-                        })));
-                }
-            }
-            oneInfo.imports = void 0;
-        }
-        return oneInfo;
-    }
-    Object.keys(styleInfo).map((cssId)=>{
-        flattenOneStyleInfo(cssId);
-    });
-}
-function transformToWebCss(styleInfo) {
-    for (const cssInfos of Object.values(styleInfo))for (const rule of cssInfos.rules){
-        const { sel: selectors, decl: declarations } = rule;
-        const { transformedStyle, childStyle } = transformParsedStyles(declarations);
-        rule.decl = transformedStyle;
-        if (childStyle.length > 0) cssInfos.rules.push({
-            sel: selectors.map((selector)=>selector.toSpliced(-2, 1, [
-                    '>'
-                ], [
-                    '*'
-                ], [], [], [])),
-            decl: childStyle
-        });
-    }
-}
-function genCssContent(styleInfo, pageConfig) {
-    function getExtraSelectors(cssId) {
-        let suffix = '';
-        if (pageConfig.enableRemoveCSSScope) suffix += `[${lynxTagAttribute}]`;
-        else if (void 0 !== cssId) suffix += `[${cssIdAttribute}="${cssId}"]`;
-        else suffix += `[${lynxTagAttribute}]`;
-        return suffix;
-    }
-    const finalCssContent = [];
-    for (const [cssId, cssInfos] of Object.entries(styleInfo)){
-        const suffix = getExtraSelectors(cssId);
-        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 declarationString = declarations.map(([k, v])=>`${k}:${v};`).join('');
-            return `${selectorString}{${declarationString}}`;
-        }).join('');
-        finalCssContent.push(...cssInfos.content, declarationContent);
-    }
-    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;
-                }
-                return true;
-            });
-            return oneCssInfo.sel.length > 0;
-        });
-        return [
-            cssId,
-            oneCssOGInfo
-        ];
-    }));
-}
 const cacheForCamelize = {};
 function camelize(str) {
     if (cacheForCamelize[str]) return cacheForCamelize[str];
@@ -1258,6 +1053,62 @@ V('offset-distance');
 function queryCSSProperty(index) {
     return cssPropertyMap[index];
 }
+const referenceTypes = async ()=>WebAssembly.validate(new Uint8Array([
+        0,
+        97,
+        115,
+        109,
+        1,
+        0,
+        0,
+        0,
+        1,
+        4,
+        1,
+        96,
+        0,
+        0,
+        3,
+        2,
+        1,
+        0,
+        10,
+        7,
+        1,
+        5,
+        0,
+        208,
+        112,
+        26,
+        11
+    ]));
+let wasm;
+async function initWasm() {
+    const supportsReferenceTypes = await referenceTypes();
+    wasm = supportsReferenceTypes ? await Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "../web-style-transformer/standard.js")) : await __webpack_require__.e("8").then(__webpack_require__.bind(__webpack_require__, "../web-style-transformer/legacy.js"));
+}
+function transformInlineStyleString(str) {
+    return wasm.transform_raw_u16_inline_style_ptr(str) ?? str;
+}
+function transformParsedStyles(styles) {
+    let childStyle = [];
+    let transformedStyle = [];
+    for (const [property, value] of styles){
+        const transformedResult = wasm.transform_raw_u16_inline_style_ptr_parsed(property, value);
+        if (transformedResult) {
+            const [transformedStyleForCurrent, childStyleForCurrent] = transformedResult;
+            transformedStyle = transformedStyle.concat(transformedStyleForCurrent);
+            if (childStyleForCurrent) childStyle = childStyle.concat(childStyleForCurrent);
+        } else transformedStyle.push([
+            property,
+            value
+        ]);
+    }
+    return {
+        childStyle,
+        transformedStyle
+    };
+}
 var uppercasePattern = /[A-Z]/g;
 var msPattern = /^ms-/;
 var hyphenate_style_name_cache = {};
@@ -1305,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;
 };
@@ -1327,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);
@@ -1335,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);
@@ -1345,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');
@@ -1390,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;
@@ -1401,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 = {};
@@ -1445,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,
@@ -1455,29 +1309,18 @@ 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,
         ...otherProperties
     };
 }
-function decodeCssOG(classes, styleInfo, cssId) {
-    const classList = classes.split(' ').filter((e)=>e);
-    let declarations = [];
-    const currentStyleInfo = styleInfo[cssId ?? '0'];
-    if (currentStyleInfo) for (const oneClassName of classList){
-        const oneRule = currentStyleInfo[oneClassName];
-        if (oneRule) declarations.push(...oneRule);
-    }
-    else console.warn(`[lynx-web] cannot find styleinfo for cssid ${cssId}`);
-    return declarations.map(([property, value])=>`${property}:${value};`).join('');
-}
 const exposureRelatedAttributes = new Set([
     'exposure-id',
     'exposure-area',
@@ -1492,36 +1335,13 @@ const exposureRelatedAttributes = new Set([
 ]);
 function createMainThreadGlobalThis(config) {
     let timingFlags = [];
-    let renderPage;
-    const { callbacks, tagMap, pageConfig, lepusCode, rootDom, globalProps, styleInfo, ssrHydrateInfo, ssrHooks } = config;
+    const { callbacks, tagMap, pageConfig, lynxTemplate, rootDom, globalProps, ssrHydrateInfo, ssrHooks, mtsRealm, document } = config;
+    const { elementTemplate, lepusCode } = lynxTemplate;
     const lynxUniqueIdToElement = ssrHydrateInfo?.lynxUniqueIdToElement ?? [];
-    const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
     const elementToRuntimeInfoMap = new WeakMap();
     let pageElement = lynxUniqueIdToElement[1]?.deref();
     let uniqueIdInc = lynxUniqueIdToElement.length || 1;
-    const varsUpdateHandlers = [];
-    const lynxGlobalBindingValues = {};
     const exposureChangedElements = new Set();
-    flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
-    transformToWebCss(styleInfo);
-    const cssOGInfo = pageConfig.enableCSSSelector ? {} : genCssOGInfo(styleInfo);
-    let cardStyleElement;
-    if (ssrHydrateInfo?.cardStyleElement) cardStyleElement = ssrHydrateInfo.cardStyleElement;
-    else {
-        cardStyleElement = callbacks.createElement('style');
-        cardStyleElement.innerHTML = genCssContent(styleInfo, pageConfig);
-        rootDom.append(cardStyleElement);
-    }
-    const cardStyleElementSheet = cardStyleElement.sheet;
-    const updateCssOGStyle = (uniqueId, newStyles)=>{
-        if (void 0 !== lynxUniqueIdToStyleRulesIndex[uniqueId]) {
-            const rule = cardStyleElementSheet.cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
-            rule.style.cssText = newStyles;
-        } else {
-            const index = cardStyleElementSheet.insertRule(`[${lynxUniqueIdAttribute}="${uniqueId}"]{${newStyles}}`, cardStyleElementSheet.cssRules.length);
-            lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
-        }
-    };
     const commonHandler = (event)=>{
         if (!event.currentTarget) return;
         const currentTarget = event.currentTarget;
@@ -1542,7 +1362,7 @@ function createMainThreadGlobalThis(config) {
             if (hname) {
                 crossThreadEvent.target.elementRefptr = event.target;
                 if (crossThreadEvent.currentTarget) crossThreadEvent.currentTarget.elementRefptr = event.currentTarget;
-                mtsGlobalThis.runWorklet?.(hname.value, [
+                mtsRealm.globalWindow.runWorklet?.(hname.value, [
                     crossThreadEvent
                 ]);
             }
@@ -1600,8 +1420,8 @@ function createMainThreadGlobalThis(config) {
         {
             eventName = eventName.toLowerCase();
             const isCapture = eventType.startsWith('capture');
-            const handler1 = isCapture ? runtimeInfo.eventHandlerMap[eventName]?.capture : runtimeInfo.eventHandlerMap[eventName]?.bind;
-            return handler1?.handler;
+            const handler = isCapture ? runtimeInfo.eventHandlerMap[eventName]?.capture : runtimeInfo.eventHandlerMap[eventName]?.bind;
+            return handler?.handler;
         }
     };
     const __GetEvents = (element)=>{
@@ -1611,11 +1431,11 @@ function createMainThreadGlobalThis(config) {
             info.bind,
             info.capture
         ])if (atomInfo) {
-            const { type, handler: handler1 } = atomInfo;
-            if (handler1) eventInfos.push({
+            const { type, handler } = atomInfo;
+            if (handler) eventInfos.push({
                 type: type,
                 name: lynxEventName,
-                function: handler1
+                function: handler
             });
         }
         return eventInfos;
@@ -1626,12 +1446,12 @@ function createMainThreadGlobalThis(config) {
     const __CreateElement = (tag, parentComponentUniqueId)=>{
         const uniqueId = uniqueIdInc++;
         const htmlTag = tagMap[tag] ?? tag;
-        const element = callbacks.createElement(htmlTag);
+        const element = document.createElement(htmlTag);
         lynxUniqueIdToElement[uniqueId] = new WeakRef(element);
         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;
     };
@@ -1707,7 +1527,7 @@ function createMainThreadGlobalThis(config) {
         elementToRuntimeInfoMap.set(element, runtimeInfo);
     };
     const __SwapElement = (childA, childB)=>{
-        const temp = callbacks.createElement('div');
+        const temp = document.createElement('div');
         childA.replaceWith(temp);
         childB.replaceWith(childA);
         temp.replaceWith(childB);
@@ -1722,21 +1542,24 @@ function createMainThreadGlobalThis(config) {
     const __AddClassForCSSOG = (element, className)=>{
         const newClassName = ((element.getAttribute('class') ?? '') + ' ' + className).trim();
         element.setAttribute('class', newClassName);
-        const newStyleStr = decodeCssOG(newClassName, cssOGInfo, element.getAttribute(cssIdAttribute));
-        updateCssOGStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr);
+        const cssId = element.getAttribute(cssIdAttribute);
+        const uniqueId = Number(element.getAttribute("l-uid"));
+        callbacks.updateCssOGStyle(uniqueId, newClassName, cssId);
     };
     const __SetClassesForCSSOG = (element, classNames)=>{
         __SetClasses(element, classNames);
-        const newStyleStr = decodeCssOG(classNames ?? '', cssOGInfo, element.getAttribute(cssIdAttribute));
-        updateCssOGStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr ?? '');
+        const cssId = element.getAttribute(cssIdAttribute);
+        const uniqueId = Number(element.getAttribute("l-uid"));
+        callbacks.updateCssOGStyle(uniqueId, classNames ?? '', cssId);
     };
     const __LoadLepusChunk = (path)=>{
-        const lepusModule = lepusCode[`${path}`];
-        if (!lepusModule) return false;
-        {
-            const entry = lepusModule.exports;
-            entry?.(mtsGlobalThis);
+        try {
+            path = lepusCode?.[path] ?? path;
+            mtsRealm.loadScriptSync(path);
             return true;
+        } catch (e) {
+            console.error(`failed to load lepus chunk ${path}`, e);
+            return false;
         }
     };
     const __FlushElementTree = (_subTree, options)=>{
@@ -1764,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);
@@ -1776,14 +1599,14 @@ function createMainThreadGlobalThis(config) {
         }
     };
     const __ElementFromBinary = (templateId, parentComponentUniId)=>{
-        const elementTemplateData = config.elementTemplate[templateId];
+        const elementTemplateData = elementTemplate[templateId];
         if (elementTemplateData) {
             let clonedElements;
             if (templateIdToTemplate[templateId]) clonedElements = Array.from(templateIdToTemplate[templateId].content.cloneNode(true).children);
             else {
                 clonedElements = elementTemplateData.map((data)=>createElementForElementTemplateData(data, parentComponentUniId));
                 if (rootDom.cloneNode) {
-                    const template = callbacks.createElement('template');
+                    const template = document.createElement('template');
                     template.content.append(...clonedElements);
                     templateIdToTemplate[templateId] = template;
                     rootDom.append(template);
@@ -1865,48 +1688,30 @@ function createMainThreadGlobalThis(config) {
         __LoadLepusChunk,
         __GetPageElement,
         __globalProps: globalProps,
+        __QueryComponent: callbacks.__QueryComponent,
         SystemInfo,
         lynx: createMainThreadLynx(config, SystemInfo),
         _ReportError: (err, _)=>callbacks._ReportError(err, _, release),
         _SetSourceMapRelease: (errInfo)=>release = errInfo?.release,
         __OnLifecycleEvent: callbacks.__OnLifecycleEvent,
         __FlushElementTree,
-        __lynxGlobalBindingValues: lynxGlobalBindingValues,
         _I18nResourceTranslation: callbacks._I18nResourceTranslation,
         _AddEventListener: ()=>{},
-        set _updateVars (handler){
-            varsUpdateHandlers.push(handler);
-        },
-        set renderPage (foo){
-            renderPage = foo;
-            queueMicrotask(callbacks.mainChunkReady);
-        },
-        get renderPage () {
-            return renderPage;
-        }
+        renderPage: void 0
     };
-    mtsGlobalThis.globalThis = new Proxy(mtsGlobalThis, {
-        get: (target, prop)=>{
-            if ('string' == typeof prop && constants_globalDisallowedVars.includes(prop)) return;
-            if ('globalThis' === prop) return target;
-            return target[prop] ?? globalThis[prop];
+    Object.assign(mtsRealm.globalWindow, mtsGlobalThis);
+    Object.defineProperty(mtsRealm.globalWindow, 'renderPage', {
+        get () {
+            return mtsGlobalThis.renderPage;
         },
-        set: (target, prop, value)=>{
-            target[prop] = value;
-            return true;
+        set (v) {
+            mtsGlobalThis.renderPage = v;
+            queueMicrotask(callbacks.mainChunkReady);
         },
-        ownKeys (target) {
-            return Reflect.ownKeys(target).filter((key)=>'globalThis' !== key);
-        }
-    });
-    for (const nm of globalMuteableVars)Object.defineProperty(mtsGlobalThis, nm, {
-        get: ()=>lynxGlobalBindingValues[nm],
-        set: (v)=>{
-            lynxGlobalBindingValues[nm] = v;
-            for (const handler1 of varsUpdateHandlers)handler1();
-        }
+        configurable: true,
+        enumerable: true
     });
-    return mtsGlobalThis;
+    return mtsRealm.globalWindow;
 }
 function createExposureService(rootDom, postExposure) {
     let working = true;
@@ -1916,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);
@@ -1966,9 +1771,179 @@ function createExposureService(rootDom, postExposure) {
         switchExposureService
     };
 }
+function decodeCssOG(classes, styleInfo, cssId) {
+    const classList = classes.split(' ').filter((e)=>e);
+    let declarations = [];
+    const currentStyleInfo = styleInfo[cssId ?? '0'];
+    if (currentStyleInfo) for (const oneClassName of classList){
+        const oneRule = currentStyleInfo[oneClassName];
+        if (oneRule) declarations.push(...oneRule);
+    }
+    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
+                        })));
+                }
+            }
+            oneInfo.imports = void 0;
+        }
+        return oneInfo;
+    }
+    Object.keys(styleInfo).map((cssId)=>{
+        flattenOneStyleInfo(cssId);
+    });
+}
+function transformToWebCss(styleInfo) {
+    for (const cssInfos of Object.values(styleInfo))for (const rule of cssInfos.rules){
+        const { sel: selectors, decl: declarations } = rule;
+        const { transformedStyle, childStyle } = transformParsedStyles(declarations);
+        rule.decl = transformedStyle;
+        if (childStyle.length > 0) cssInfos.rules.push({
+            sel: selectors.map((selector)=>selector.toSpliced(-2, 1, [
+                    '>'
+                ], [
+                    '*'
+                ], [], [], [])),
+            decl: childStyle
+        });
+    }
+}
+function genCssContent(styleInfo, pageConfig, entryName) {
+    function getExtraSelectors(cssId) {
+        let suffix;
+        suffix = pageConfig.enableRemoveCSSScope ? `[${lynxTagAttribute}]` : void 0 !== cssId ? `[${cssIdAttribute}="${cssId}"]` : `[${lynxTagAttribute}]`;
+        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);
+        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 declarationString = declarations.map(([k, v])=>`${k}:${v};`).join('');
+            return `${selectorString}{${declarationString}}`;
+        }).join('');
+        finalCssContent.push(...cssInfos.content, declarationContent);
+    }
+    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;
+                }
+                return true;
+            });
+            return oneCssInfo.sel.length > 0;
+        });
+        return [
+            cssId,
+            oneCssOGInfo
+        ];
+    }));
+}
+function appendStyleElement(styleInfo, pageConfig, rootDom, document, entryName, ssrHydrateInfo) {
+    const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
+    flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
+    transformToWebCss(styleInfo);
+    const cssOGInfo = pageConfig.enableCSSSelector ? {} : genCssOGInfo(styleInfo);
+    let cardStyleElement;
+    if (ssrHydrateInfo?.cardStyleElement) cardStyleElement = ssrHydrateInfo.cardStyleElement;
+    else {
+        cardStyleElement = document.createElement('style');
+        cardStyleElement.textContent = genCssContent(styleInfo, pageConfig, entryName);
+        rootDom.appendChild(cardStyleElement);
+    }
+    const cardStyleElementSheet = cardStyleElement.sheet;
+    const updateCssOGStyle = (uniqueId, newClassName, cssID)=>{
+        const newStyles = decodeCssOG(newClassName, cssOGInfo, cssID);
+        if (void 0 !== lynxUniqueIdToStyleRulesIndex[uniqueId]) {
+            const rule = cardStyleElementSheet.cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
+            rule.style.cssText = newStyles;
+        } else {
+            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,
+        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();
-const moduleCache = {};
-function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, 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);
@@ -1979,49 +1954,34 @@ function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, comm
     async function startMainThread(config, ssrHydrateInfo) {
         let isFp = true;
         const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, initI18nResources } = config;
-        const { styleInfo, pageConfig, customSections, cardType, lepusCode, elementTemplate } = template;
+        const { styleInfo, pageConfig, customSections, cardType } = template;
         markTimingInternal('decode_start');
         await initWasmPromise;
-        const lepusCodeEntries = await Promise.all(Object.entries(lepusCode).map(async ([name, url])=>{
-            const cachedModule = moduleCache[url];
-            if (cachedModule) return [
-                name,
-                cachedModule
-            ];
-            {
-                const { default: evaluateModule } = await import(url);
-                const module = {
-                    exports: evaluateModule
-                };
-                moduleCache[url] = module;
-                return [
-                    name,
-                    module
-                ];
-            }
-        }));
-        const lepusCodeLoaded = Object.fromEntries(lepusCodeEntries);
-        const entry = lepusCodeLoaded['root'].exports;
         const jsContext = new LynxCrossThreadContext({
             rpc: backgroundThreadRpc,
             receiveEventEndpoint: dispatchJSContextOnMainThreadEndpoint,
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint
         });
         const i18nResources = initialI18nResources(initI18nResources);
+        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,
             jsContext,
             tagMap,
             browserConfig,
-            customSections,
-            elementTemplate,
             globalProps,
             pageConfig,
-            styleInfo,
-            lepusCode: lepusCodeLoaded,
             rootDom,
             ssrHydrateInfo,
             ssrHooks,
+            document,
             callbacks: {
+                updateCssOGStyle,
                 mainChunkReady: ()=>{
                     markTimingInternal('data_processor_start');
                     let initData = config.initData;
@@ -2041,8 +2001,7 @@ function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, comm
                                 v.content
                             ])),
                         nativeModulesMap,
-                        napiModulesMap,
-                        browserConfig
+                        napiModulesMap
                     });
                     if (ssrHydrateInfo) {
                         for (const event of ssrHydrateInfo.events){
@@ -2087,19 +2046,19 @@ function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, comm
                 markTiming: (a, b)=>markTimingInternal(b, a),
                 publishEvent,
                 publicComponentEvent,
-                createElement,
                 _I18nResourceTranslation: (options)=>{
                     const matchedInitI18nResources = i18nResources.data?.find((i)=>getCacheI18nResourcesKey(i.options) === getCacheI18nResourcesKey(options));
                     dispatchI18nResource(matchedInitI18nResources?.resource);
                     if (matchedInitI18nResources) return matchedInitI18nResources.resource;
                     return triggerI18nResourceFallback(options);
-                }
+                },
+                __QueryComponent
             }
         });
+        mtsGlobalThisRef.mtsGlobalThis = mtsGlobalThis;
         markTimingInternal('decode_end');
-        entry(mtsGlobalThis);
+        await mtsRealm.loadScript(template.lepusCode.root);
         jsContext.__start();
-        return mtsGlobalThis;
     }
     return {
         startMainThread
@@ -2116,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');
@@ -2135,7 +2094,7 @@ const OperationType = {
     RemoveChild: 9,
     StyleDeclarationSetProperty: 10,
     StyleDeclarationRemoveProperty: 11,
-    SetInnerHTML: 12,
+    SetTextContent: 12,
     sheetInsertRule: 13,
     sheetRuleUpdateCssText: 14
 };
@@ -2158,12 +2117,12 @@ class OffscreenCSSStyleDeclaration {
 const ancestorDocument = Symbol('ancestorDocument');
 const _attributes = Symbol('_attributes');
 const _children = Symbol('_children');
-const innerHTML = Symbol('innerHTML');
+const textContent = Symbol('textContent');
 const _cssRuleContents = Symbol('_cssRuleContents');
 const OffscreenElement_uniqueId = Symbol('uniqueId');
 const _style = Symbol('_style');
 class OffscreenElement extends EventTarget {
-    [innerHTML] = '';
+    [textContent] = '';
     [_style];
     [_attributes] = new Map();
     _parentElement = null;
@@ -2310,10 +2269,13 @@ class OffscreenElement extends EventTarget {
         this[ancestorDocument][enableEvent](type, this[OffscreenElement_uniqueId]);
         super.addEventListener(type, callback, options);
     }
-    set innerHTML(text1) {
-        this[ancestorDocument][operations].push(OperationType.SetInnerHTML, this[OffscreenElement_uniqueId], text1);
+    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();
-        this[innerHTML] = text1;
+        this[textContent] = text1;
         if (this[_cssRuleContents]) this[_cssRuleContents] = [];
     }
 }
@@ -2561,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 {
@@ -2740,7 +2724,7 @@ function escapeHtml(string) {
     }
     return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
 }
-function getInnerHTMLImpl(buffer, element, shadowrootTemplates) {
+function getTextContentImpl(buffer, element, shadowrootTemplates) {
     const localName = element.localName;
     buffer.push('<');
     buffer.push(localName);
@@ -2753,8 +2737,8 @@ function getInnerHTMLImpl(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) {
@@ -2762,14 +2746,14 @@ function getInnerHTMLImpl(buffer, element, shadowrootTemplates) {
         buffer.push('<template shadowrootmode="open">', template, '</template>');
     }
     if (element[_cssRuleContents]?.length) buffer.push(...element[_cssRuleContents]);
-    if (element[innerHTML]) buffer.push(element[innerHTML]);
-    else for (const child of element[_children])getInnerHTMLImpl(buffer, child, shadowrootTemplates);
+    if (element[textContent]) buffer.push(element[textContent]);
+    else for (const child of element[_children])getTextContentImpl(buffer, child, shadowrootTemplates);
     buffer.push('</');
     buffer.push(localName);
     buffer.push('>');
 }
 function dumpHTMLString(buffer, element, shadowrootTemplates) {
-    for (const child of element[_children])getInnerHTMLImpl(buffer, child, shadowrootTemplates);
+    for (const child of element[_children])getTextContentImpl(buffer, child, shadowrootTemplates);
 }
 const builtinElementTemplates = {
     'scroll-view': templateScrollView,
@@ -2796,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');
@@ -2810,22 +2794,69 @@ async function createLynxView(config) {
     });
     const i18nResources = new I18nResources();
     const events = [];
-    const { startMainThread } = prepareMainThreadAPIs(backgroundThreadRpc, offscreenDocument, offscreenDocument.createElement.bind(offscreenDocument), ()=>{
+    const mtsVMContext = node_vm.createContext(node_vm.constants.DONT_CONTEXTIFY);
+    Object.assign(mtsVMContext, {
+        document: offscreenDocument,
+        module: {
+            exports: null
+        }
+    });
+    const loadScriptSync = (url)=>{
+        const scriptContent = node_fs.readFileSync(url);
+        const script = new node_vm.Script(scriptContent.toString(), {
+            filename: url
+        });
+        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)=>{
+                if (err) return void reject(err);
+                try {
+                    const script = new node_vm.Script(data.toString(), {
+                        filename: url
+                    });
+                    mtsVMContext.module = {
+                        exports: null
+                    };
+                    script.runInContext(mtsVMContext);
+                    const ret = mtsVMContext.module.exports;
+                    mtsVMContext.module = {
+                        exports: null
+                    };
+                    resolve(ret);
+                } catch (e) {
+                    reject(e);
+                }
+            });
+        });
+    const { startMainThread } = prepareMainThreadAPIs(backgroundThreadRpc, offscreenDocument, offscreenDocument, {
+        globalWindow: mtsVMContext,
+        loadScript,
+        loadScriptSync
+    }, ()=>{
         firstPaintReady();
     }, ()=>{}, ()=>{}, ()=>{}, ()=>{}, (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
             ]);
         }
     });
-    const runtime = await startMainThread({
+    await startMainThread({
         template,
         initData,
         globalProps,
@@ -2844,7 +2875,7 @@ async function createLynxView(config) {
     };
     async function renderToString() {
         await firstPaintReadyPromise;
-        const ssrEncodeData = runtime?.ssrEncode?.();
+        const ssrEncodeData = mtsVMContext?.ssrEncode?.();
         const ssrDumpInfo = {
             ssrEncodeData,
             events