@lynx-js/web-mainthread-apis-canary 0.17.0-canary-20250918-db58f3c8 → 0.17.0-canary-20250919-1d4ce685

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @lynx-js/web-mainthread-apis
 
-## 0.17.0-canary-20250918141730-db58f3c88a8f863d91c0397384f9826b969b1734
+## 0.17.0-canary-20250919032145-1d4ce685a87313dfe83f0b4a366ff44090415641
 
 ### Patch Changes
 
@@ -10,9 +10,11 @@
 
   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-canary-20250918141730-db58f3c88a8f863d91c0397384f9826b969b1734
-  - @lynx-js/web-style-transformer@0.17.0-canary-20250918141730-db58f3c88a8f863d91c0397384f9826b969b1734
+  - @lynx-js/web-constants@0.17.0-canary-20250919032145-1d4ce685a87313dfe83f0b4a366ff44090415641
+  - @lynx-js/web-style-transformer@0.17.0-canary-20250919032145-1d4ce685a87313dfe83f0b4a366ff44090415641
 
 ## 0.16.1
 

package/dist/createMainThreadGlobalThis.d.ts

@@ -8,7 +8,7 @@ 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 {

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 {

package/dist/prepareMainThreadAPIs.js

@@ -30,7 +30,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mt
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
         });
         const i18nResources = initialI18nResources(initI18nResources);
-        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, undefined, ssrHydrateInfo);
+        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo);
         const mtsGlobalThisRef = {
             mtsGlobalThis: undefined,
         };

package/dist/utils/processStyleInfo.d.ts

@@ -18,7 +18,7 @@ export declare function genCssContent(styleInfo: FlattenedStyleInfo, pageConfig:
  * generate the css-in-js data
  */
 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;
+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

@@ -182,7 +182,7 @@ export function genCssOGInfo(styleInfo) {
     }
     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
@@ -197,18 +197,22 @@ export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ent
     const cssOGInfo = pageConfig.enableCSSSelector
         ? {}
         : genCssOGInfo(flattenedStyleInfo);
+    const lazyCSSOGInfo = {};
     let cardStyleElement;
     if (ssrHydrateInfo?.cardStyleElement) {
         cardStyleElement = ssrHydrateInfo.cardStyleElement;
     }
     else {
         cardStyleElement = document.createElement('style');
-        cardStyleElement.textContent = genCssContent(flattenedStyleInfo, 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]];
@@ -222,6 +226,9 @@ export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ent
     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;
     };

package/package.json

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