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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lynx-js/web-core-server
 
+## 0.16.0
+
+### Minor Changes
+
+- refactor: provide the mts a real globalThis ([#1589](https://github.com/lynx-family/lynx-stack/pull/1589))
+
+  Before this change, We create a function wrapper and a fake globalThis for Javascript code.
+
+  This caused some issues.
+
+  After this change, we will create an iframe for createing an isolated Javascript context.
+
+  This means the globalThis will be the real one.
+
 ## 0.15.7
 
 ## 0.15.6

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__) {
             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
+                    M2: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.M2,
+                    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,
+                    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) {
@@ -31,14 +33,14 @@ var __webpack_modules__ = {
     },
     "../web-style-transformer/dist/standard_bg.js": function(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
+            M2: ()=>__wbg_new_78feb108b6472713,
+            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,
+            yc: ()=>__wbindgen_string_new
         });
         module = __webpack_require__.hmd(module);
         let wasm;
@@ -150,14 +152,14 @@ var __webpack_modules__ = {
             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_78feb108b6472713: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.M2,
+                    __wbg_push_737cfc8c1432c2c6: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.tZ,
+                    __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__([
@@ -174,11 +176,11 @@ var __webpack_modules__ = {
         var WEBPACK_IMPORTED_MODULE_0 = __webpack_require__("../web-style-transformer/dist/standard_bg.js");
         module.exports = __webpack_require__.v(exports, module.id, "431436911960378f", {
             "./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_78feb108b6472713: WEBPACK_IMPORTED_MODULE_0.M2,
+                __wbindgen_string_new: WEBPACK_IMPORTED_MODULE_0.yc,
+                __wbg_push_737cfc8c1432c2c6: WEBPACK_IMPORTED_MODULE_0.tZ,
+                __wbindgen_throw: WEBPACK_IMPORTED_MODULE_0.Qn,
+                __wbindgen_init_externref_table: WEBPACK_IMPORTED_MODULE_0.bL
             }
         });
     }
@@ -352,7 +354,7 @@ __webpack_require__.m = __webpack_modules__;
 })();
 (()=>{
     var installedChunks = {
-        980: 0
+        410: 0
     };
     var installChunk = (data)=>{
         var __webpack_ids__ = data.__webpack_ids__;
@@ -391,6 +393,7 @@ 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';
@@ -399,12 +402,6 @@ 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 +415,6 @@ const inShadowRootStyles = [
     overflow: visible;
   }`
 ];
-const constants_globalDisallowedVars = [
-    'navigator',
-    'postMessage'
-];
 const W3cEventNameToLynx = {
     click: 'tap',
     lynxscroll: 'scroll',
@@ -473,12 +466,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 +514,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;
@@ -741,115 +734,49 @@ 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.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})();`
+            ]));
+        template.version = 2;
+        return template;
+    }
 ];
-const generateModuleContent = (content, injectVars, injectWithBind, muteableVars, globalDisallowedVars, isESM)=>[
+const generateModuleContent = (content)=>[
         '//# 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',
+        '"use strict";\n',
+        `(() => {const ${globalDisallowedVars.join('=void 0,')}=void 0;module.exports = `,
         content,
-        '\n return module.exports;}'
+        '\n})()'
     ].join('');
-async function generateJavascriptUrl(obj, injectVars, injectWithBind, muteableVars, globalDisallowedVars, createJsModuleUrl, isESM, templateName) {
+async function generateJavascriptUrl(obj, createJsModuleUrl, 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), `${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, templateName),
+        manifest: await generateJavascriptUrl(template.manifest, createJsModuleUrl, templateName)
     };
 }
 function registerCallLepusMethodHandler(rpc, runtime) {
@@ -861,163 +788,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 +1056,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 = {};
@@ -1467,17 +1321,6 @@ function createCrossThreadEvent(domEvent, eventName) {
         ...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,7 +1446,7 @@ 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);
@@ -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(lynxUniqueIdAttribute));
+        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(lynxUniqueIdAttribute));
+        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)=>{
@@ -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);
@@ -1871,42 +1694,23 @@ function createMainThreadGlobalThis(config) {
         _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);
-        }
+        configurable: true,
+        enumerable: true
     });
-    for (const nm of globalMuteableVars)Object.defineProperty(mtsGlobalThis, nm, {
-        get: ()=>lynxGlobalBindingValues[nm],
-        set: (v)=>{
-            lynxGlobalBindingValues[nm] = v;
-            for (const handler1 of varsUpdateHandlers)handler1();
-        }
-    });
-    return mtsGlobalThis;
+    return mtsRealm.globalWindow;
 }
 function createExposureService(rootDom, postExposure) {
     let working = true;
@@ -1966,9 +1770,128 @@ 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}="${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(`[${lynxUniqueIdAttribute}="${uniqueId}"]{${newStyles}}`, cardStyleElementSheet.cssRules.length);
+            lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
+        }
+    };
+    return {
+        updateCssOGStyle
+    };
+}
 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, ssrHooks) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
     const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
     const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
@@ -1979,49 +1902,30 @@ 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 } = appendStyleElement(styleInfo, pageConfig, rootDom, document, void 0, ssrHydrateInfo);
         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 +1945,7 @@ function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, comm
                                 v.content
                             ])),
                         nativeModulesMap,
-                        napiModulesMap,
-                        browserConfig
+                        napiModulesMap
                     });
                     if (ssrHydrateInfo) {
                         for (const event of ssrHydrateInfo.events){
@@ -2087,7 +1990,6 @@ 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);
@@ -2097,9 +1999,8 @@ function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, comm
             }
         });
         markTimingInternal('decode_end');
-        entry(mtsGlobalThis);
+        await mtsRealm.loadScript(template.lepusCode.root);
         jsContext.__start();
-        return mtsGlobalThis;
     }
     return {
         startMainThread
@@ -2135,7 +2036,7 @@ const OperationType = {
     RemoveChild: 9,
     StyleDeclarationSetProperty: 10,
     StyleDeclarationRemoveProperty: 11,
-    SetInnerHTML: 12,
+    SetTextContent: 12,
     sheetInsertRule: 13,
     sheetRuleUpdateCssText: 14
 };
@@ -2158,12 +2059,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 +2211,10 @@ 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);
+    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] = [];
     }
 }
@@ -2740,7 +2641,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);
@@ -2762,14 +2663,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,
@@ -2810,7 +2711,39 @@ 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
+        });
+        return script.runInContext(mtsVMContext);
+    };
+    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
+                    });
+                    const result = script.runInContext(mtsVMContext);
+                    resolve(result);
+                } catch (e) {
+                    reject(e);
+                }
+            });
+        });
+    const { startMainThread } = prepareMainThreadAPIs(backgroundThreadRpc, offscreenDocument, offscreenDocument, {
+        globalWindow: mtsVMContext,
+        loadScript,
+        loadScriptSync
+    }, ()=>{
         firstPaintReady();
     }, ()=>{}, ()=>{}, ()=>{}, ()=>{}, (initI18nResources)=>{
         i18nResources.setData(initI18nResources);
@@ -2825,7 +2758,7 @@ async function createLynxView(config) {
             ]);
         }
     });
-    const runtime = await startMainThread({
+    await startMainThread({
         template,
         initData,
         globalProps,
@@ -2844,7 +2777,7 @@ async function createLynxView(config) {
     };
     async function renderToString() {
         await firstPaintReadyPromise;
-        const ssrEncodeData = runtime?.ssrEncode?.();
+        const ssrEncodeData = mtsVMContext?.ssrEncode?.();
         const ssrDumpInfo = {
             ssrEncodeData,
             events

package/dist/legacy-wasm-chunk.js

@@ -1,19 +1,20 @@
+export const __webpack_id__ = "8";
 export const __webpack_ids__ = [
-    "501"
+    "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__) {
             try {
                 __webpack_require__.d(__webpack_exports__, {
-                    C2: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.C2,
-                    Or: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.Or,
-                    a9: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.a9,
-                    h4: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.h4,
-                    oT: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.oT,
-                    pE: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.pE,
-                    ug: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.ug,
-                    xJ: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.xJ
+                    M2: ()=>_legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.M2,
+                    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,
+                    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");
                 var _legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../web-style-transformer/dist/legacy_bg.js");
@@ -21,7 +22,7 @@ export const __webpack_modules__ = {
                     _legacy_bg_wasm__WEBPACK_IMPORTED_MODULE_1__
                 ]);
                 _legacy_bg_wasm__WEBPACK_IMPORTED_MODULE_1__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
-                (0, _legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.oT)(_legacy_bg_wasm__WEBPACK_IMPORTED_MODULE_1__);
+                (0, _legacy_bg_js__WEBPACK_IMPORTED_MODULE_0__.lI)(_legacy_bg_wasm__WEBPACK_IMPORTED_MODULE_1__);
                 __webpack_async_result__();
             } catch (e) {
                 __webpack_async_result__(e);
@@ -30,14 +31,14 @@ export const __webpack_modules__ = {
     },
     "../web-style-transformer/dist/legacy_bg.js": function(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,
-            ug: ()=>__wbindgen_object_drop_ref,
-            xJ: ()=>transform_raw_u16_inline_style_ptr
+            M2: ()=>__wbg_new_78feb108b6472713,
+            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,
+            yc: ()=>__wbindgen_string_new
         });
         module = __webpack_require__.hmd(module);
         let wasm;
@@ -178,15 +179,15 @@ export const __webpack_modules__ = {
             try {
                 __webpack_require__.r(__webpack_exports__);
                 __webpack_require__.d(__webpack_exports__, {
-                    __wbg_new_78feb108b6472713: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.a9,
-                    __wbg_push_737cfc8c1432c2c6: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.C2,
-                    __wbg_set_wasm: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.oT,
-                    __wbindgen_object_drop_ref: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.ug,
-                    __wbindgen_string_new: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.h4,
-                    __wbindgen_throw: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.Or,
+                    __wbg_new_78feb108b6472713: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.M2,
+                    __wbg_push_737cfc8c1432c2c6: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.tZ,
+                    __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,
+                    __wbindgen_throw: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.Qn,
                     memory: ()=>_dist_legacy_bg_wasm__WEBPACK_IMPORTED_MODULE_1__.memory,
-                    transform_raw_u16_inline_style_ptr: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.xJ,
-                    transform_raw_u16_inline_style_ptr_parsed: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.pE
+                    transform_raw_u16_inline_style_ptr: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.aC,
+                    transform_raw_u16_inline_style_ptr_parsed: ()=>_dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__.iG
                 });
                 var _dist_legacy_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../web-style-transformer/dist/legacy.js");
                 var _dist_legacy_bg_wasm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../web-style-transformer/dist/legacy_bg.wasm");
@@ -205,11 +206,11 @@ export const __webpack_modules__ = {
         var WEBPACK_IMPORTED_MODULE_0 = __webpack_require__("../web-style-transformer/dist/legacy_bg.js");
         module.exports = __webpack_require__.v(exports, module.id, "578076972e1e5ffd", {
             "./legacy_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_object_drop_ref: WEBPACK_IMPORTED_MODULE_0.ug,
-                __wbindgen_throw: WEBPACK_IMPORTED_MODULE_0.Or
+                __wbg_new_78feb108b6472713: WEBPACK_IMPORTED_MODULE_0.M2,
+                __wbindgen_string_new: WEBPACK_IMPORTED_MODULE_0.yc,
+                __wbg_push_737cfc8c1432c2c6: WEBPACK_IMPORTED_MODULE_0.tZ,
+                __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.15.7",
+  "version": "0.16.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,11 +25,11 @@
   "devDependencies": {
     "rsbuild-plugin-arethetypeswrong": "0.1.1",
     "rsbuild-plugin-publint": "0.3.3",
-    "@lynx-js/offscreen-document": "0.1.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.15.7",
-    "@lynx-js/web-worker-rpc": "0.15.7",
-    "@lynx-js/web-constants": "0.15.7"
+    "@lynx-js/web-mainthread-apis": "0.16.0",
+    "@lynx-js/web-worker-rpc": "0.16.0"
   },
   "scripts": {
     "build": "rslib build",