@lynx-js/web-core-server-canary 0.16.1 → 0.17.0-canary-20250918-b17b7cb2

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @lynx-js/web-core-server
 
+## 0.17.0-canary-20250918080343-b17b7cb2bb92d1539e76276f136806eefa788258
+
 ## 0.16.1
 
 ### Patch Changes
@@ -103,25 +105,25 @@
   lynxView.initI18nResources = [
     {
       options: {
-        locale: 'en',
-        channel: '1',
-        fallback_url: '',
+        locale: "en",
+        channel: "1",
+        fallback_url: "",
       },
       resource: {
-        hello: 'hello',
-        lynx: 'lynx web platform1',
+        hello: "hello",
+        lynx: "lynx web platform1",
       },
     },
   ];
-  lynxView.addEventListener('i18nResourceMissed', (e) => {
+  lynxView.addEventListener("i18nResourceMissed", (e) => {
     console.log(e);
   });
 
   // mts
   _I18nResourceTranslation({
-    locale: 'en',
-    channel: '1',
-    fallback_url: '',
+    locale: "en",
+    channel: "1",
+    fallback_url: "",
   });
   ```
 

package/dist/index.js

@@ -1782,30 +1782,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 +1866,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,38 +1888,36 @@ 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) {
     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);
     let cardStyleElement;
     if (ssrHydrateInfo?.cardStyleElement) cardStyleElement = ssrHydrateInfo.cardStyleElement;
     else {
         cardStyleElement = document.createElement('style');
-        cardStyleElement.textContent = genCssContent(styleInfo, pageConfig, entryName);
+        cardStyleElement.textContent = genCssContent(flattenedStyleInfo, pageConfig, entryName);
         rootDom.appendChild(cardStyleElement);
     }
     const cardStyleElementSheet = cardStyleElement.sheet;
@@ -1888,9 +1932,9 @@ function appendStyleElement(styleInfo, pageConfig, rootDom, document, entryName,
         }
     };
     const updateLazyComponentStyle = (styleInfo, entryName)=>{
-        flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
-        transformToWebCss(styleInfo);
-        const newStyleSheet = genCssContent(styleInfo, pageConfig, entryName);
+        const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+        transformToWebCss(flattenedStyleInfo);
+        const newStyleSheet = genCssContent(flattenedStyleInfo, pageConfig, entryName);
         cardStyleElement.textContent += newStyleSheet;
     };
     return {
@@ -1900,8 +1944,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 +1957,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 +1970,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

package/package.json

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