@lynx-js/web-mainthread-apis-canary 0.16.1 → 0.17.0-canary-20250918-b17b7cb2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.17.0-canary-20250918080343-b17b7cb2bb92d1539e76276f136806eefa788258
+
+### Patch Changes
+
+- fix: \_\_QueryComponentImpl in mts should execute only once for same url ([#1763](https://github.com/lynx-family/lynx-stack/pull/1763))
+
+- fix: avoid duplicate style transformation ([#1748](https://github.com/lynx-family/lynx-stack/pull/1748))
+
+  After this commit, we use DAG methods to handle the styleInfos
+
+- Updated dependencies [[`93d707b`](https://github.com/lynx-family/lynx-stack/commit/93d707b82a59f7256952e21da6dcad2999f8233d)]:
+  - @lynx-js/web-constants@0.17.0-canary-20250918080343-b17b7cb2bb92d1539e76276f136806eefa788258
+  - @lynx-js/web-style-transformer@0.17.0-canary-20250918080343-b17b7cb2bb92d1539e76276f136806eefa788258
+
 ## 0.16.1
 
 ### Patch Changes
@@ -212,25 +226,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/crossThreadHandlers/createQueryComponent.js

@@ -1,19 +1,27 @@
 import { queryComponentEndpoint, updateBTSTemplateCacheEndpoint, } from '@lynx-js/web-constants';
 export 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 updateBTSCachePromise = updateBTSTemplateCache(url, template);
-            let lepusRootChunkExport = await mtsRealm.loadScript(template.lepusCode.root);
-            if (mtsGlobalThisRef.mtsGlobalThis.processEvalResult) {
-                lepusRootChunkExport = mtsGlobalThisRef.mtsGlobalThis.processEvalResult(lepusRootChunkExport, url);
-            }
-            updateLazyComponentStyle(template.styleInfo, url);
-            await updateBTSCachePromise;
-            jsContext.dispatchEvent({
-                type: '__OnDynamicJSSourcePrepared',
-                data: url,
+        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);
+                }
+                updateLazyComponentStyle(template.styleInfo, url);
+                await updateBTSCachePromise;
+                jsContext.dispatchEvent({
+                    type: '__OnDynamicJSSourcePrepared',
+                    data: url,
+                });
+                return lepusRootChunkExport;
             });
+        !cacheLazy && lazyCache.set(url, loadPromise);
+        loadPromise.then(lepusRootChunkExport => {
             callback?.({
                 code: 0,
                 data: {
@@ -23,6 +31,7 @@ export function createQueryComponent(loadTemplate, updateLazyComponentStyle, bac
             });
         }).catch((error) => {
             console.error(`lynx web: lazy bundle load failed:`, error);
+            lazyCache.delete(url);
             callback?.({
                 code: -1,
                 data: undefined,

package/dist/utils/processStyleInfo.d.ts

@@ -1,17 +1,23 @@
-import { type StyleInfo, type CssOGInfo, type PageConfig, type SSRHydrateInfo } from '@lynx-js/web-constants';
-export declare function flattenStyleInfo(styleInfo: StyleInfo, enableCSSSelector: boolean): void;
+import { type StyleInfo, type CssOGInfo, type PageConfig, type SSRHydrateInfo, type FlattenedStyleInfo } from '@lynx-js/web-constants';
+/**
+ * get Transitive Closure of a Direct Acyclic Graph (DAG)
+ * 1. for each css, find all the imported by css files (directly and indirectly)
+ * 2. for each css, find all the importing css files (directly and indirectly)
+ * 3. return the flattened style info, do not modify the content and rules
+ */
+export declare function flattenStyleInfo(styleInfo: StyleInfo): FlattenedStyleInfo;
 /**
  * apply the lynx css -> web css transformation
  */
-export declare function transformToWebCss(styleInfo: StyleInfo): void;
+export declare function transformToWebCss(styleInfo: FlattenedStyleInfo): void;
 /**
  * generate those styles applied by <style>...</style>
  */
-export declare function genCssContent(styleInfo: StyleInfo, pageConfig: PageConfig, entryName?: string): string;
+export declare function genCssContent(styleInfo: FlattenedStyleInfo, pageConfig: PageConfig, entryName?: string): string;
 /**
  * generate the css-in-js data
  */
-export declare function genCssOGInfo(styleInfo: StyleInfo): CssOGInfo;
+export declare function genCssOGInfo(styleInfo: FlattenedStyleInfo): CssOGInfo;
 export declare function appendStyleElement(styleInfo: StyleInfo, pageConfig: PageConfig, rootDom: Node, document: Document, entryName?: string, ssrHydrateInfo?: SSRHydrateInfo): {
     updateCssOGStyle: (uniqueId: number, newClassName: string, cssID: string | null) => void;
     updateLazyComponentStyle: (styleInfo: StyleInfo, entryName: string) => void;

package/dist/utils/processStyleInfo.js

@@ -4,36 +4,94 @@
 import { cssIdAttribute, lynxTagAttribute, lynxUniqueIdAttribute, lynxEntryNameAttribute, } from '@lynx-js/web-constants';
 import { transformParsedStyles } from './tokenizer.js';
 import { decodeCssOG } from './decodeCssOG.js';
-export 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(...flatInfo.rules);
-                    oneInfo.rules.push(...(enableCSSSelector
-                        ? flatInfo.rules
-                        // when enableCSSSelector is false, need to make a shallow copy of rules.sel
-                        // otherwise updating `oneCssInfo.sel` in `genCssOGInfo()` will affect other imported cssInfo
-                        : flatInfo.rules.map(i => ({ ...i }))));
+function topologicalSort(styleInfo) {
+    /**
+     * kahn's algorithm
+     * 1. The styleInfo is already equivalent to a adjacency list. (cssId, import)
+     * 2. The styleInfo is a DAG therefore we don't need to do cyclic detection
+     */
+    const queue = [];
+    const inDegreeMap = new Map();
+    for (const [cssId, oneStyleInfo] of Object.entries(styleInfo)) {
+        !inDegreeMap.has(cssId) && inDegreeMap.set(cssId, 0); // initialize
+        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 (inDegree === 0) {
+            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 (importInDegree === 0) {
+                    queue.push(importCssId);
                 }
             }
-            oneInfo.imports = undefined;
         }
-        return oneInfo;
     }
-    Object.keys(styleInfo).map((cssId) => {
-        flattenOneStyleInfo(cssId);
+    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));
+            }
+            cssIdToImportBy.set(cssId, currentImportBy);
+        }
+    }
+    return cssIdToImportBy;
+}
+/**
+ * get Transitive Closure of a Direct Acyclic Graph (DAG)
+ * 1. for each css, find all the imported by css files (directly and indirectly)
+ * 2. for each css, find all the importing css files (directly and indirectly)
+ * 3. return the flattened style info, do not modify the content and rules
+ */
+export function flattenStyleInfo(styleInfo) {
+    // Step 1. Topological sorting
+    const sortedCssIds = topologicalSort(styleInfo);
+    // Step 2. generate deps;
+    const cssIdToImportBy = generateImportByMap(styleInfo, sortedCssIds);
+    sortedCssIds.reverse();
+    // Step 3. generate the flattened style info
+    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;
     });
 }
 /**
  * apply the lynx css -> web css transformation
  */
 export function transformToWebCss(styleInfo) {
-    for (const cssInfos of Object.values(styleInfo)) {
+    for (const cssInfos of styleInfo) {
         for (const rule of cssInfos.rules) {
             const { sel: selectors, decl: declarations } = rule;
             const { transformedStyle, childStyle } = transformParsedStyles(declarations);
@@ -56,13 +114,7 @@ export function genCssContent(styleInfo, pageConfig, entryName) {
     function getExtraSelectors(cssId) {
         let suffix;
         if (!pageConfig.enableRemoveCSSScope) {
-            if (cssId !== undefined) {
-                suffix = `[${cssIdAttribute}="${cssId}"]`;
-            }
-            else {
-                // To make sure the Specificity correct
-                suffix = `[${lynxTagAttribute}]`;
-            }
+            suffix = `[${cssIdAttribute}="${cssId}"]`;
         }
         else {
             suffix = `[${lynxTagAttribute}]`;
@@ -76,13 +128,15 @@ export function genCssContent(styleInfo, pageConfig, entryName) {
         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;
             // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
-            const selectorString = selectorList.map((selectors) => {
-                return selectors.toSpliced(-4, 0, [suffix]).flat().join('');
+            const selectorString = cssInfos.importBy.map(cssId => {
+                const suffix = getExtraSelectors(cssId);
+                return selectorList.map((selectors) => {
+                    return selectors.toSpliced(-4, 0, [suffix]).flat().join('');
+                }).join(',');
             }).join(',');
             const declarationString = declarations.map(([k, v]) => `${k}:${v};`).join('');
             return `${selectorString}{${declarationString}}`;
@@ -95,10 +149,10 @@ export function genCssContent(styleInfo, pageConfig, entryName) {
  * generate the css-in-js data
  */
 export 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 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 (
                 // only one class selector
@@ -107,21 +161,26 @@ export function genCssOGInfo(styleInfo) {
                     && pseudoElementSelectors.length === 0
                     && combinator.length === 0) {
                     const selectorName = classSelectors[0].substring(1);
-                    const currentDeclarations = oneCssOGInfo[selectorName];
-                    if (currentDeclarations) {
-                        currentDeclarations.push(...oneCssInfo.decl);
-                    }
-                    else {
-                        oneCssOGInfo[selectorName] = oneCssInfo.decl;
+                    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 false; // remove this selector from style info
                 }
                 return true;
             });
-            return oneCssInfo.sel.length > 0;
+            return oneRule.sel.length > 0;
         });
-        return [cssId, oneCssOGInfo];
-    }));
+    }
+    return cssOGInfo;
 }
 export function appendStyleElement(styleInfo, pageConfig, rootDom, document, entryName, ssrHydrateInfo) {
     const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
@@ -133,18 +192,18 @@ export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ent
      * 4. create the style element
      * 5. append the style element to the root dom
      */
-    flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
-    transformToWebCss(styleInfo);
+    const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+    transformToWebCss(flattenedStyleInfo);
     const cssOGInfo = pageConfig.enableCSSSelector
         ? {}
-        : genCssOGInfo(styleInfo);
+        : 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;
@@ -161,9 +220,9 @@ export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ent
         }
     };
     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 { updateCssOGStyle, updateLazyComponentStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis-canary",
-  "version": "0.16.1",
+  "version": "0.17.0-canary-20250918-b17b7cb2",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,8 +24,8 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.16.1",
-    "@lynx-js/web-style-transformer": "npm:@lynx-js/web-style-transformer-canary@0.16.1",
+    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.17.0-canary-20250918-b17b7cb2",
+    "@lynx-js/web-style-transformer": "npm:@lynx-js/web-style-transformer-canary@0.17.0-canary-20250918-b17b7cb2",
     "hyphenate-style-name": "^1.1.0"
   }
 }