@lynx-js/web-mainthread-apis 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.17.0
+
+### 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
+
+- feat: support lazy bundle with CSSOG(`enableCSSSelector: false`). ([#1770](https://github.com/lynx-family/lynx-stack/pull/1770))
+
+- Updated dependencies [[`93d707b`](https://github.com/lynx-family/lynx-stack/commit/93d707b82a59f7256952e21da6dcad2999f8233d)]:
+  - @lynx-js/web-constants@0.17.0
+  - @lynx-js/web-style-transformer@0.17.0
+
+## 0.16.1
+
+### Patch Changes
+
+- feat: supports lazy bundle. (This feature requires `@lynx-js/lynx-core >= 0.1.3`) ([#1235](https://github.com/lynx-family/lynx-stack/pull/1235))
+
+- Updated dependencies [[`608f375`](https://github.com/lynx-family/lynx-stack/commit/608f375e20732cc4c9f141bfbf9800ba6896100b)]:
+  - @lynx-js/web-constants@0.16.1
+  - @lynx-js/web-style-transformer@0.16.1
+
 ## 0.16.0
 
 ### Minor Changes

package/dist/createMainThreadGlobalThis.d.ts

@@ -1,4 +1,4 @@
-import { type LynxTemplate, type PageConfig, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type LynxContextEventTarget, type MainThreadGlobalThis, type WebFiberElementImpl, type I18nResourceTranslationOptions, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm } from '@lynx-js/web-constants';
+import { type LynxTemplate, type PageConfig, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type LynxContextEventTarget, type MainThreadGlobalThis, type WebFiberElementImpl, type I18nResourceTranslationOptions, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm, type QueryComponentPAPI } from '@lynx-js/web-constants';
 export interface MainThreadRuntimeCallbacks {
     mainChunkReady: () => void;
     flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[], exposureChangedElements: WebFiberElementImpl[]) => void;
@@ -8,7 +8,8 @@ export interface MainThreadRuntimeCallbacks {
     publishEvent: RpcCallType<typeof publishEventEndpoint>;
     publicComponentEvent: RpcCallType<typeof publicComponentEventEndpoint>;
     _I18nResourceTranslation: (options: I18nResourceTranslationOptions) => unknown | undefined;
-    updateCssOGStyle: (uniqueId: number, newClassName: string, cssID: string | null) => void;
+    updateCssOGStyle: (uniqueId: number, newClassName: string, cssID: string | null, entryName: string | null) => void;
+    __QueryComponent: QueryComponentPAPI;
 }
 export interface MainThreadRuntimeConfig {
     pageConfig: PageConfig;

package/dist/createMainThreadGlobalThis.js

@@ -1,7 +1,7 @@
 // Copyright 2023 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-import { lynxUniqueIdAttribute, systemInfo, parentComponentUniqueIdAttribute, componentIdAttribute, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, lynxTagAttribute, W3cEventNameToLynx, cssIdAttribute, lynxDefaultDisplayLinearAttribute, __lynx_timing_flag, lynxDisposedAttribute, } from '@lynx-js/web-constants';
+import { lynxUniqueIdAttribute, systemInfo, parentComponentUniqueIdAttribute, componentIdAttribute, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, lynxTagAttribute, W3cEventNameToLynx, cssIdAttribute, lynxDefaultDisplayLinearAttribute, __lynx_timing_flag, lynxDisposedAttribute, lynxEntryNameAttribute, } from '@lynx-js/web-constants';
 import { createMainThreadLynx } from './createMainThreadLynx.js';
 import { __AddClass, __AddConfig, __AddDataset, __AddInlineStyle, __AppendElement, __ElementIsEqual, __FirstElement, __GetAttributes, __GetChildren, __GetClasses, __GetComponentID, __GetDataByKey, __GetDataset, __GetElementConfig, __GetElementUniqueID, __GetID, __GetParent, __GetTag, __GetTemplateParts, __InsertElementBefore, __LastElement, __MarkPartElement, __MarkTemplateElement, __NextElement, __RemoveElement, __ReplaceElement, __ReplaceElements, __SetClasses, __SetConfig, __SetCSSId, __SetDataset, __SetID, __SetInlineStyles, __UpdateComponentID, __UpdateComponentInfo, __GetAttributeByName, } from './pureElementPAPIs.js';
 import { createCrossThreadEvent } from './utils/createCrossThreadEvent.js';
@@ -291,9 +291,10 @@ export function createMainThreadGlobalThis(config) {
         // @ts-expect-error fixme
         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);
         }
@@ -304,13 +305,15 @@ export function createMainThreadGlobalThis(config) {
         element.setAttribute('class', newClassName);
         const cssId = element.getAttribute(cssIdAttribute);
         const uniqueId = Number(element.getAttribute(lynxUniqueIdAttribute));
-        callbacks.updateCssOGStyle(uniqueId, newClassName, cssId);
+        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(lynxUniqueIdAttribute));
-        callbacks.updateCssOGStyle(uniqueId, classNames ?? '', cssId);
+        const entryName = element.getAttribute(lynxEntryNameAttribute);
+        callbacks.updateCssOGStyle(uniqueId, classNames ?? '', cssId, entryName);
     };
     const __LoadLepusChunk = (path) => {
         try {
@@ -469,6 +472,7 @@ export function createMainThreadGlobalThis(config) {
         __LoadLepusChunk,
         __GetPageElement,
         __globalProps: globalProps,
+        __QueryComponent: callbacks.__QueryComponent,
         SystemInfo,
         lynx: createMainThreadLynx(config, SystemInfo),
         _ReportError: (err, _) => callbacks._ReportError(err, _, release),

package/dist/crossThreadHandlers/createQueryComponent.d.ts

@@ -0,0 +1,4 @@
+import { type JSRealm, type LynxCrossThreadContext, type MainThreadGlobalThis, type QueryComponentPAPI, type Rpc, type StyleInfo, type TemplateLoader } from '@lynx-js/web-constants';
+export declare function createQueryComponent(loadTemplate: TemplateLoader, updateLazyComponentStyle: (styleInfo: StyleInfo, entryName: string) => void, backgroundThreadRpc: Rpc, mtsGlobalThisRef: {
+    mtsGlobalThis: MainThreadGlobalThis;
+}, jsContext: LynxCrossThreadContext, mtsRealm: JSRealm): QueryComponentPAPI;

package/dist/crossThreadHandlers/createQueryComponent.js

@@ -0,0 +1,57 @@
+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) => {
+        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: {
+                    url,
+                    evalResult: lepusRootChunkExport,
+                },
+            });
+        }).catch((error) => {
+            console.error(`lynx web: lazy bundle load failed:`, error);
+            lazyCache.delete(url);
+            callback?.({
+                code: -1,
+                data: undefined,
+            });
+        });
+        return null;
+    };
+    backgroundThreadRpc.registerHandler(queryComponentEndpoint, (url) => {
+        const ret = new Promise(resolve => {
+            __QueryComponentImpl(url, (result) => {
+                resolve({
+                    code: result.code,
+                    detail: {
+                        schema: url,
+                    },
+                });
+            });
+        });
+        return ret;
+    });
+    return __QueryComponentImpl;
+}
+//# sourceMappingURL=createQueryComponent.js.map

package/dist/prepareMainThreadAPIs.d.ts

@@ -1,4 +1,4 @@
-import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm } from '@lynx-js/web-constants';
-export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, document: Document, mtsRealm: JSRealm, commitDocument: (exposureChangedElements: HTMLElement[]) => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, flushMarkTimingInternal: () => void, reportError: RpcCallType<typeof reportErrorEndpoint>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources, ssrHooks?: SSRDehydrateHooks): {
+import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm, type TemplateLoader } from '@lynx-js/web-constants';
+export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, document: Document, mtsRealm: JSRealm, commitDocument: (exposureChangedElements: HTMLElement[]) => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, flushMarkTimingInternal: () => void, reportError: RpcCallType<typeof reportErrorEndpoint>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources, loadTemplate: TemplateLoader, ssrHooks?: SSRDehydrateHooks): {
     startMainThread: (config: StartMainThreadContextConfig, ssrHydrateInfo?: SSRHydrateInfo) => Promise<void>;
 };

package/dist/prepareMainThreadAPIs.js

@@ -8,8 +8,9 @@ import { createMainThreadGlobalThis } from './createMainThreadGlobalThis.js';
 import { createExposureService } from './utils/createExposureService.js';
 import { initWasm } from '@lynx-js/web-style-transformer';
 import { appendStyleElement } from './utils/processStyleInfo.js';
+import { createQueryComponent } from './crossThreadHandlers/createQueryComponent.js';
 const initWasmPromise = initWasm();
-export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
+export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, loadTemplate, ssrHooks) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
     const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
     const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
@@ -29,7 +30,11 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mt
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
         });
         const i18nResources = initialI18nResources(initI18nResources);
-        const { updateCssOGStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, undefined, ssrHydrateInfo);
+        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo);
+        const mtsGlobalThisRef = {
+            mtsGlobalThis: undefined,
+        };
+        const __QueryComponent = createQueryComponent(loadTemplate, updateLazyComponentStyle, backgroundThreadRpc, mtsGlobalThisRef, jsContext, mtsRealm);
         const mtsGlobalThis = createMainThreadGlobalThis({
             lynxTemplate: template,
             mtsRealm,
@@ -127,8 +132,10 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mt
                     }
                     return triggerI18nResourceFallback(options);
                 },
+                __QueryComponent,
             },
         });
+        mtsGlobalThisRef.mtsGlobalThis = mtsGlobalThis;
         markTimingInternal('decode_end');
         await mtsRealm.loadScript(template.lepusCode.root);
         jsContext.__start(); // start the jsContext after the runtime is created

package/dist/pureElementPAPIs.js

@@ -1,7 +1,7 @@
 // Copyright 2023 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-import { componentIdAttribute, cssIdAttribute, lynxComponentConfigAttribute, lynxDatasetAttribute, lynxElementTemplateMarkerAttribute, lynxPartIdAttribute, lynxTagAttribute, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
+import { componentIdAttribute, cssIdAttribute, lynxComponentConfigAttribute, lynxDatasetAttribute, lynxElementTemplateMarkerAttribute, lynxEntryNameAttribute, lynxPartIdAttribute, lynxTagAttribute, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
 import { queryCSSProperty } from './style/cssPropertyMap.js';
 import { transformInlineStyleString, transformParsedStyles, } from './style/transformInlineStyle.js';
 import hyphenateStyleName from 'hyphenate-style-name';
@@ -92,9 +92,10 @@ export const __UpdateComponentInfo = /*#__PURE__*/ (element, params) => {
         && element.setAttribute(cssIdAttribute, params.cssID + '');
     params.name !== undefined && element.setAttribute('name', params.name);
 };
-export const __SetCSSId = /*#__PURE__*/ (elements, cssId) => {
+export const __SetCSSId = /*#__PURE__*/ (elements, cssId, entryName) => {
     for (const element of elements) {
         element.setAttribute(cssIdAttribute, cssId + '');
+        entryName && element.setAttribute(lynxEntryNameAttribute, entryName);
     }
 };
 export const __SetClasses = /*#__PURE__*/ (element, classname) => {

package/dist/utils/processStyleInfo.d.ts

@@ -1,17 +1,24 @@
-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 appendStyleElement(styleInfo: StyleInfo, pageConfig: PageConfig, rootDom: Node, document: Document, entryName?: string, ssrHydrateInfo?: SSRHydrateInfo): {
-    updateCssOGStyle: (uniqueId: number, newClassName: string, cssID: string | null) => void;
+export declare function genCssOGInfo(styleInfo: FlattenedStyleInfo): CssOGInfo;
+export declare function appendStyleElement(styleInfo: StyleInfo, pageConfig: PageConfig, rootDom: Node, document: Document, ssrHydrateInfo?: SSRHydrateInfo): {
+    updateCssOGStyle: (uniqueId: number, newClassName: string, cssID: string | null, entryName: 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,19 +114,13 @@ 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}]`;
         }
         if (entryName) {
-            suffix = `${suffix}[${lynxEntryNameAttribute}="${entryName}"]`;
+            suffix = `${suffix}[${lynxEntryNameAttribute}=${JSON.stringify(entryName)}]`;
         }
         else {
             suffix = `${suffix}:not([${lynxEntryNameAttribute}])`;
@@ -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,23 +161,28 @@ 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) {
+export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo) {
     const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
     /**
      * now create the style content
@@ -133,23 +192,27 @@ 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);
+    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, undefined);
         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 (lynxUniqueIdToStyleRulesIndex[uniqueId] !== undefined) {
             const rule = cardStyleElementSheet
                 .cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
@@ -160,6 +223,15 @@ export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ent
             lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
         }
     };
-    return { updateCssOGStyle };
+    const updateLazyComponentStyle = (styleInfo, entryName) => {
+        const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+        transformToWebCss(flattenedStyleInfo);
+        if (!pageConfig.enableCSSSelector) {
+            lazyCSSOGInfo[entryName] = genCssOGInfo(flattenedStyleInfo);
+        }
+        const newStyleSheet = genCssContent(flattenedStyleInfo, pageConfig, entryName);
+        cardStyleElement.textContent += newStyleSheet;
+    };
+    return { updateCssOGStyle, updateLazyComponentStyle };
 }
 //# sourceMappingURL=processStyleInfo.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
   ],
   "dependencies": {
     "hyphenate-style-name": "^1.1.0",
-    "@lynx-js/web-constants": "0.16.0",
-    "@lynx-js/web-style-transformer": "0.16.0"
+    "@lynx-js/web-constants": "0.17.0",
+    "@lynx-js/web-style-transformer": "0.17.0"
   }
 }