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

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @lynx-js/web-core-server
 
+## 0.17.0
+
 ## 0.16.1
 
 ### Patch Changes

package/dist/index.js

@@ -387,14 +387,17 @@ __webpack_require__.m = __webpack_modules__;
         }
     };
 })();
+const lynxUniqueIdAttribute = 'l-uid';
 const cssIdAttribute = 'l-css-id';
 const componentIdAttribute = 'l-comp-id';
 const parentComponentUniqueIdAttribute = 'l-p-comp-uid';
 const lynxEntryNameAttribute = 'l-e-name';
 const lynxTagAttribute = 'lynx-tag';
+const lynxDatasetAttribute = 'l-dset';
 const lynxComponentConfigAttribute = 'l-comp-cfg';
 const lynxDisposedAttribute = 'l-disposed';
 const lynxElementTemplateMarkerAttribute = 'l-template';
+const lynxPartIdAttribute = 'l-part';
 const lynxDefaultDisplayLinearAttribute = 'lynx-default-display-linear';
 const __lynx_timing_flag = '__lynx_timing_flag';
 const systemInfo = {
@@ -740,7 +743,7 @@ const globalDisallowedVars = [
 const templateUpgraders = [
     (template)=>{
         const defaultInjectStr = "Card,setTimeout,setInterval,clearInterval,clearTimeout,NativeModules,Component,ReactLynx,nativeAppId,Behavior,LynxJSBI,lynx,window,document,frames,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,fetch,XMLHttpRequest,__WebSocket__,webkit,Reporter,print,global,requestAnimationFrame,cancelAnimationFrame";
-        template.appType = template.lepusCode.root.startsWith('(function (globDynamicComponentEntry') ? 'lazy' : 'card';
+        template.appType = 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; } }`
@@ -754,7 +757,7 @@ const generateModuleContent = (content, eager, appType)=>[
         '\n(function() { "use strict"; const ',
         globalDisallowedVars.join('=void 0,'),
         '=void 0;\n',
-        'lazy' === appType ? 'module.exports=\n' : '',
+        'card' !== appType ? 'module.exports=\n' : '',
         content,
         '\n})()'
     ].join('');
@@ -1156,11 +1159,11 @@ const __AddConfig = /*#__PURE__*/ (element, type, value)=>{
 const __AddDataset = /*#__PURE__*/ (element, key, value)=>{
     const currentDataset = __GetDataset(element);
     currentDataset[key] = value;
-    element.setAttribute("l-dset", encodeURIComponent(JSON.stringify(currentDataset)));
+    element.setAttribute(lynxDatasetAttribute, encodeURIComponent(JSON.stringify(currentDataset)));
     value ? element.setAttribute('data-' + key, value.toString()) : element.removeAttribute('data-' + key);
 };
 const __GetDataset = /*#__PURE__*/ (element)=>{
-    const datasetString = element.getAttribute("l-dset");
+    const datasetString = element.getAttribute(lynxDatasetAttribute);
     const currentDataset = datasetString ? JSON.parse(decodeURIComponent(datasetString)) : {};
     return currentDataset;
 };
@@ -1178,7 +1181,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("l-uid")) : -1;
+const __GetElementUniqueID = /*#__PURE__*/ (element)=>element && element.getAttribute ? Number(element.getAttribute(lynxUniqueIdAttribute)) : -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);
@@ -1186,7 +1189,7 @@ const __SetConfig = /*#__PURE__*/ (element, config)=>{
     element.setAttribute(lynxComponentConfigAttribute, encodeURIComponent(JSON.stringify(config)));
 };
 const __SetDataset = /*#__PURE__*/ (element, dataset)=>{
-    element.setAttribute("l-dset", encodeURIComponent(JSON.stringify(dataset)));
+    element.setAttribute(lynxDatasetAttribute, 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);
@@ -1244,9 +1247,9 @@ const __GetTemplateParts = (templateElement)=>{
     if (!isTemplate) return {};
     const templateUniqueId = __GetElementUniqueID(templateElement);
     const parts = {};
-    const partElements = templateElement.querySelectorAll(`[l-uid="${templateUniqueId}"] [l-part]:not([l-uid="${templateUniqueId}"] [${lynxElementTemplateMarkerAttribute}] [l-part])`);
+    const partElements = templateElement.querySelectorAll(`[${lynxUniqueIdAttribute}="${templateUniqueId}"] [${lynxPartIdAttribute}]:not([${lynxUniqueIdAttribute}="${templateUniqueId}"] [${lynxElementTemplateMarkerAttribute}] [${lynxPartIdAttribute}])`);
     for (const partElement of partElements){
-        const partId = partElement.getAttribute("l-part");
+        const partId = partElement.getAttribute(lynxPartIdAttribute);
         if (partId) parts[partId] = partElement;
     }
     return parts;
@@ -1255,7 +1258,7 @@ const __MarkTemplateElement = (element)=>{
     element.setAttribute(lynxElementTemplateMarkerAttribute, '');
 };
 const __MarkPartElement = (element, partId)=>{
-    element.setAttribute("l-part", partId);
+    element.setAttribute(lynxPartIdAttribute, partId);
 };
 function toCloneableObject(obj) {
     const cloneableObj = {};
@@ -1299,9 +1302,9 @@ function createCrossThreadEvent(domEvent, eventName) {
             changedTouches: isTrusted ? changedTouches.map(toCloneableObject) : changedTouches
         });
     }
-    const currentTargetDatasetString = currentTargetElement?.getAttribute("l-dset");
+    const currentTargetDatasetString = currentTargetElement?.getAttribute(lynxDatasetAttribute);
     const currentTargetDataset = currentTargetDatasetString ? JSON.parse(decodeURIComponent(currentTargetDatasetString)) : {};
-    const targetDatasetString = targetElement.getAttribute("l-dset");
+    const targetDatasetString = targetElement.getAttribute(lynxDatasetAttribute);
     const targetDataset = targetDatasetString ? JSON.parse(decodeURIComponent(targetDatasetString)) : {};
     return {
         type: eventName,
@@ -1309,12 +1312,12 @@ function createCrossThreadEvent(domEvent, eventName) {
         target: {
             id: targetElement.getAttribute('id'),
             dataset: targetDataset,
-            uniqueId: Number(targetElement.getAttribute("l-uid"))
+            uniqueId: Number(targetElement.getAttribute(lynxUniqueIdAttribute))
         },
         currentTarget: currentTargetElement ? {
             id: currentTargetElement.getAttribute('id'),
             dataset: currentTargetDataset,
-            uniqueId: Number(currentTargetElement.getAttribute("l-uid"))
+            uniqueId: Number(currentTargetElement.getAttribute(lynxUniqueIdAttribute))
         } : null,
         detail: domEvent.detail ?? {},
         params,
@@ -1451,7 +1454,7 @@ function createMainThreadGlobalThis(config) {
         const parentComponentCssID = lynxUniqueIdToElement[parentComponentUniqueId]?.deref()?.getAttribute(cssIdAttribute);
         parentComponentCssID && '0' !== parentComponentCssID && element.setAttribute(cssIdAttribute, parentComponentCssID);
         element.setAttribute(lynxTagAttribute, tag);
-        element.setAttribute("l-uid", uniqueId + '');
+        element.setAttribute(lynxUniqueIdAttribute, uniqueId + '');
         element.setAttribute(parentComponentUniqueIdAttribute, parentComponentUniqueId + '');
         return element;
     };
@@ -1532,9 +1535,10 @@ function createMainThreadGlobalThis(config) {
         childB.replaceWith(childA);
         temp.replaceWith(childB);
     };
-    const __SetCSSIdForCSSOG = (elements, cssId)=>{
+    const __SetCSSIdForCSSOG = (elements, cssId, entryName)=>{
         for (const element of elements){
             element.setAttribute(cssIdAttribute, cssId + '');
+            entryName && element.setAttribute(lynxEntryNameAttribute, entryName);
             const cls = element.getAttribute('class');
             cls && __SetClassesForCSSOG(element, cls);
         }
@@ -1543,14 +1547,16 @@ function createMainThreadGlobalThis(config) {
         const newClassName = ((element.getAttribute('class') ?? '') + ' ' + className).trim();
         element.setAttribute('class', newClassName);
         const cssId = element.getAttribute(cssIdAttribute);
-        const uniqueId = Number(element.getAttribute("l-uid"));
-        callbacks.updateCssOGStyle(uniqueId, newClassName, cssId);
+        const uniqueId = Number(element.getAttribute(lynxUniqueIdAttribute));
+        const entryName = element.getAttribute(lynxEntryNameAttribute);
+        callbacks.updateCssOGStyle(uniqueId, newClassName, cssId, entryName);
     };
     const __SetClassesForCSSOG = (element, classNames)=>{
         __SetClasses(element, classNames);
         const cssId = element.getAttribute(cssIdAttribute);
-        const uniqueId = Number(element.getAttribute("l-uid"));
-        callbacks.updateCssOGStyle(uniqueId, classNames ?? '', cssId);
+        const uniqueId = Number(element.getAttribute(lynxUniqueIdAttribute));
+        const entryName = element.getAttribute(lynxEntryNameAttribute);
+        callbacks.updateCssOGStyle(uniqueId, classNames ?? '', cssId, entryName);
     };
     const __LoadLepusChunk = (path)=>{
         try {
@@ -1587,7 +1593,7 @@ function createMainThreadGlobalThis(config) {
     };
     const applyEventsForElementTemplate = (data, element)=>{
         const uniqueId = uniqueIdInc++;
-        element.setAttribute("l-uid", uniqueId + '');
+        element.setAttribute(lynxUniqueIdAttribute, uniqueId + '');
         for (const event of data.events || []){
             const { type, name, value } = event;
             __AddEvent(element, type, name, value);
@@ -1721,7 +1727,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("l-uid"));
+        exposureEvent.detail['unique-id'] = parseFloat(ev.target.getAttribute(lynxUniqueIdAttribute));
         const exposureID = exposureEvent.detail.exposureID;
         if ('exposure' === ev.type) {
             exposureCache.push(exposureEvent);
@@ -1782,30 +1788,74 @@ function decodeCssOG(classes, styleInfo, cssId) {
     else console.warn(`[lynx-web] cannot find styleinfo for cssid ${cssId}`);
     return declarations.map(([property, value])=>`${property}:${value};`).join('');
 }
-function flattenStyleInfo(styleInfo, enableCSSSelector) {
-    function flattenOneStyleInfo(cssId) {
-        const oneInfo = styleInfo[cssId];
-        const imports = oneInfo?.imports;
-        if (oneInfo && imports?.length) {
-            for (const im of imports){
-                const flatInfo = flattenOneStyleInfo(im);
-                if (flatInfo) {
-                    oneInfo.content.push(...flatInfo.content);
-                    oneInfo.rules.push(...enableCSSSelector ? flatInfo.rules : flatInfo.rules.map((i)=>({
-                            ...i
-                        })));
-                }
+function topologicalSort(styleInfo) {
+    const queue = [];
+    const inDegreeMap = new Map();
+    for (const [cssId, oneStyleInfo] of Object.entries(styleInfo)){
+        inDegreeMap.has(cssId) || inDegreeMap.set(cssId, 0);
+        for (const importCssId of oneStyleInfo.imports ?? []){
+            const currentInDegree = inDegreeMap.get(importCssId) ?? 0;
+            inDegreeMap.set(importCssId, currentInDegree + 1);
+        }
+    }
+    for (const [cssId, inDegree] of inDegreeMap.entries())if (0 === inDegree) queue.push(cssId);
+    const sortedCssIds = [];
+    while(queue.length > 0){
+        const currentCssId = queue.shift();
+        sortedCssIds.push(currentCssId);
+        const currentAdjunction = styleInfo[currentCssId]?.imports;
+        if (currentAdjunction) for (const importCssId of currentAdjunction){
+            const importInDegree = inDegreeMap.get(importCssId) - 1;
+            inDegreeMap.set(importCssId, importInDegree);
+            if (0 === importInDegree) queue.push(importCssId);
+        }
+    }
+    return sortedCssIds;
+}
+function generateImportByMap(styleInfo, sortedCssIds) {
+    const cssIdToImportBy = new Map();
+    for (const cssId of sortedCssIds){
+        const currentAdjunction = styleInfo[cssId]?.imports;
+        if (currentAdjunction) {
+            const currentImportBy = cssIdToImportBy.get(cssId) ?? new Set([
+                cssId
+            ]);
+            for (const importCssId of currentAdjunction){
+                const importDeps = cssIdToImportBy.get(importCssId) ?? new Set([
+                    importCssId
+                ]);
+                importDeps.add(cssId);
+                cssIdToImportBy.set(importCssId, currentImportBy.union(importDeps));
             }
-            oneInfo.imports = void 0;
+            cssIdToImportBy.set(cssId, currentImportBy);
         }
-        return oneInfo;
     }
-    Object.keys(styleInfo).map((cssId)=>{
-        flattenOneStyleInfo(cssId);
+    return cssIdToImportBy;
+}
+function flattenStyleInfo(styleInfo) {
+    const sortedCssIds = topologicalSort(styleInfo);
+    const cssIdToImportBy = generateImportByMap(styleInfo, sortedCssIds);
+    sortedCssIds.reverse();
+    return sortedCssIds.map((cssId)=>{
+        const oneInfo = styleInfo[cssId];
+        const flattenedInfo = oneInfo ? {
+            content: oneInfo.content,
+            rules: oneInfo.rules,
+            importBy: Array.from(cssIdToImportBy.get(cssId) ?? [
+                cssId
+            ])
+        } : {
+            content: [],
+            rules: [],
+            importBy: [
+                cssId
+            ]
+        };
+        return flattenedInfo;
     });
 }
 function transformToWebCss(styleInfo) {
-    for (const cssInfos of Object.values(styleInfo))for (const rule of cssInfos.rules){
+    for (const cssInfos of styleInfo)for (const rule of cssInfos.rules){
         const { sel: selectors, decl: declarations } = rule;
         const { transformedStyle, childStyle } = transformParsedStyles(declarations);
         rule.decl = transformedStyle;
@@ -1822,18 +1872,20 @@ function transformToWebCss(styleInfo) {
 function genCssContent(styleInfo, pageConfig, entryName) {
     function getExtraSelectors(cssId) {
         let suffix;
-        suffix = pageConfig.enableRemoveCSSScope ? `[${lynxTagAttribute}]` : void 0 !== cssId ? `[${cssIdAttribute}="${cssId}"]` : `[${lynxTagAttribute}]`;
+        suffix = pageConfig.enableRemoveCSSScope ? `[${lynxTagAttribute}]` : `[${cssIdAttribute}="${cssId}"]`;
         suffix = entryName ? `${suffix}[${lynxEntryNameAttribute}=${JSON.stringify(entryName)}]` : `${suffix}:not([${lynxEntryNameAttribute}])`;
         return suffix;
     }
     const finalCssContent = [];
-    for (const [cssId, cssInfos] of Object.entries(styleInfo)){
-        const suffix = getExtraSelectors(cssId);
+    for (const cssInfos of styleInfo){
         const declarationContent = cssInfos.rules.map((rule)=>{
             const { sel: selectorList, decl: declarations } = rule;
-            const selectorString = selectorList.map((selectors)=>selectors.toSpliced(-4, 0, [
-                    suffix
-                ]).flat().join('')).join(',');
+            const selectorString = cssInfos.importBy.map((cssId)=>{
+                const suffix = getExtraSelectors(cssId);
+                return selectorList.map((selectors)=>selectors.toSpliced(-4, 0, [
+                        suffix
+                    ]).flat().join('')).join(',');
+            }).join(',');
             const declarationString = declarations.map(([k, v])=>`${k}:${v};`).join('');
             return `${selectorString}{${declarationString}}`;
         }).join('');
@@ -1842,55 +1894,56 @@ function genCssContent(styleInfo, pageConfig, entryName) {
     return finalCssContent.join('\n');
 }
 function genCssOGInfo(styleInfo) {
-    return Object.fromEntries(Object.entries(styleInfo).map(([cssId, cssInfos])=>{
-        const oneCssOGInfo = {};
-        cssInfos.rules = cssInfos.rules.filter((oneCssInfo)=>{
-            oneCssInfo.sel = oneCssInfo.sel.filter((selectorList)=>{
-                const [classSelectors, pseudoClassSelectors, pseudoElementSelectors, combinator] = selectorList;
-                if (1 === classSelectors.length && '.' === classSelectors[0][0] && 0 === pseudoClassSelectors.length && 0 === pseudoElementSelectors.length && 0 === combinator.length) {
-                    const selectorName = classSelectors[0].substring(1);
-                    const currentDeclarations = oneCssOGInfo[selectorName];
-                    if (currentDeclarations) currentDeclarations.push(...oneCssInfo.decl);
-                    else oneCssOGInfo[selectorName] = oneCssInfo.decl;
-                    return false;
+    const cssOGInfo = {};
+    for (const oneInfo of styleInfo)oneInfo.rules = oneInfo.rules.filter((oneRule)=>{
+        oneRule.sel = oneRule.sel.filter((selectorList)=>{
+            const [classSelectors, pseudoClassSelectors, pseudoElementSelectors, combinator] = selectorList;
+            if (1 === classSelectors.length && '.' === classSelectors[0][0] && 0 === pseudoClassSelectors.length && 0 === pseudoElementSelectors.length && 0 === combinator.length) {
+                const selectorName = classSelectors[0].substring(1);
+                for (const cssId of oneInfo.importBy){
+                    if (!cssOGInfo[cssId]) cssOGInfo[cssId] = {};
+                    const currentDeclarations = cssOGInfo[cssId][selectorName];
+                    if (currentDeclarations) currentDeclarations.push(...oneRule.decl);
+                    else cssOGInfo[cssId][selectorName] = oneRule.decl;
                 }
-                return true;
-            });
-            return oneCssInfo.sel.length > 0;
+                return false;
+            }
+            return true;
         });
-        return [
-            cssId,
-            oneCssOGInfo
-        ];
-    }));
+        return oneRule.sel.length > 0;
+    });
+    return cssOGInfo;
 }
-function appendStyleElement(styleInfo, pageConfig, rootDom, document, entryName, ssrHydrateInfo) {
+function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo) {
     const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
-    flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
-    transformToWebCss(styleInfo);
-    const cssOGInfo = pageConfig.enableCSSSelector ? {} : genCssOGInfo(styleInfo);
+    const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+    transformToWebCss(flattenedStyleInfo);
+    const cssOGInfo = pageConfig.enableCSSSelector ? {} : genCssOGInfo(flattenedStyleInfo);
+    const lazyCSSOGInfo = {};
     let cardStyleElement;
     if (ssrHydrateInfo?.cardStyleElement) cardStyleElement = ssrHydrateInfo.cardStyleElement;
     else {
         cardStyleElement = document.createElement('style');
-        cardStyleElement.textContent = genCssContent(styleInfo, pageConfig, entryName);
+        cardStyleElement.textContent = genCssContent(flattenedStyleInfo, pageConfig, void 0);
         rootDom.appendChild(cardStyleElement);
     }
-    const cardStyleElementSheet = cardStyleElement.sheet;
-    const updateCssOGStyle = (uniqueId, newClassName, cssID)=>{
-        const newStyles = decodeCssOG(newClassName, cssOGInfo, cssID);
+    const updateCssOGStyle = (uniqueId, newClassName, cssID, entryName)=>{
+        const cardStyleElementSheet = cardStyleElement.sheet;
+        const styleMap = entryName && lazyCSSOGInfo[entryName] ? lazyCSSOGInfo[entryName] : cssOGInfo;
+        const newStyles = decodeCssOG(newClassName, styleMap, cssID);
         if (void 0 !== lynxUniqueIdToStyleRulesIndex[uniqueId]) {
             const rule = cardStyleElementSheet.cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
             rule.style.cssText = newStyles;
         } else {
-            const index = cardStyleElementSheet.insertRule(`[l-uid="${uniqueId}"]{${newStyles}}`, cardStyleElementSheet.cssRules.length);
+            const index = cardStyleElementSheet.insertRule(`[${lynxUniqueIdAttribute}="${uniqueId}"]{${newStyles}}`, cardStyleElementSheet.cssRules.length);
             lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
         }
     };
     const updateLazyComponentStyle = (styleInfo, entryName)=>{
-        flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
-        transformToWebCss(styleInfo);
-        const newStyleSheet = genCssContent(styleInfo, pageConfig, entryName);
+        const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+        transformToWebCss(flattenedStyleInfo);
+        if (!pageConfig.enableCSSSelector) lazyCSSOGInfo[entryName] = genCssOGInfo(flattenedStyleInfo);
+        const newStyleSheet = genCssContent(flattenedStyleInfo, pageConfig, entryName);
         cardStyleElement.textContent += newStyleSheet;
     };
     return {
@@ -1900,8 +1953,10 @@ function appendStyleElement(styleInfo, pageConfig, rootDom, document, entryName,
 }
 function createQueryComponent(loadTemplate, updateLazyComponentStyle, backgroundThreadRpc, mtsGlobalThisRef, jsContext, mtsRealm) {
     const updateBTSTemplateCache = backgroundThreadRpc.createCall(updateBTSTemplateCacheEndpoint);
+    const lazyCache = new Map();
     const __QueryComponentImpl = (url, callback)=>{
-        loadTemplate(url).then(async (template)=>{
+        const cacheLazy = lazyCache.get(url);
+        const loadPromise = cacheLazy ?? loadTemplate(url).then(async (template)=>{
             const updateBTSCachePromise = updateBTSTemplateCache(url, template);
             let lepusRootChunkExport = await mtsRealm.loadScript(template.lepusCode.root);
             if (mtsGlobalThisRef.mtsGlobalThis.processEvalResult) lepusRootChunkExport = mtsGlobalThisRef.mtsGlobalThis.processEvalResult(lepusRootChunkExport, url);
@@ -1911,6 +1966,10 @@ function createQueryComponent(loadTemplate, updateLazyComponentStyle, background
                 type: '__OnDynamicJSSourcePrepared',
                 data: url
             });
+            return lepusRootChunkExport;
+        });
+        cacheLazy || lazyCache.set(url, loadPromise);
+        loadPromise.then((lepusRootChunkExport)=>{
             callback?.({
                 code: 0,
                 data: {
@@ -1920,6 +1979,7 @@ function createQueryComponent(loadTemplate, updateLazyComponentStyle, background
             });
         }).catch((error)=>{
             console.error("lynx web: lazy bundle load failed:", error);
+            lazyCache.delete(url);
             callback?.({
                 code: -1,
                 data: void 0
@@ -1963,7 +2023,7 @@ function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm,
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint
         });
         const i18nResources = initialI18nResources(initI18nResources);
-        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, void 0, ssrHydrateInfo);
+        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo);
         const mtsGlobalThisRef = {
             mtsGlobalThis: void 0
         };
@@ -2737,8 +2797,8 @@ function getTextContentImpl(buffer, element, shadowrootTemplates) {
             buffer.push('"');
         }
     }
-    const partId = element[_attributes].get("l-part") ?? element[_attributes].get("l-uid");
-    buffer.push(' ', "l-part", '="', partId, '"');
+    const partId = element[_attributes].get(lynxPartIdAttribute) ?? element[_attributes].get(lynxUniqueIdAttribute);
+    buffer.push(' ', lynxPartIdAttribute, '="', partId, '"');
     buffer.push('>');
     const templateImpl = shadowrootTemplates[localName];
     if (templateImpl) {
@@ -2780,7 +2840,7 @@ const builtinTagTransformMap = {
 };
 OffscreenElement.prototype.toJSON = function() {
     return {
-        ssrID: this[_attributes].get("l-part") ?? this[_attributes].get("l-uid")
+        ssrID: this[_attributes].get(lynxPartIdAttribute) ?? this[_attributes].get(lynxUniqueIdAttribute)
     };
 };
 async function createLynxView(config) {
@@ -2849,7 +2909,7 @@ async function createLynxView(config) {
     }, ()=>{}, {
         __AddEvent (element, eventName, eventData, eventOptions) {
             events.push([
-                Number(element.getAttribute("l-uid")),
+                Number(element.getAttribute(lynxUniqueIdAttribute)),
                 eventName,
                 eventData,
                 eventOptions

package/package.json

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