@lynx-js/web-mainthread-apis-canary 0.16.0-canary-20250828-ff4ede60 → 0.16.0-canary-20250828-1a32dd88

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @lynx-js/web-mainthread-apis
 
-## 0.16.0-canary-20250828083326-ff4ede6056e7c71eca0ee72b4ee6ca3ee6b52120
+## 0.16.0-canary-20250828095936-1a32dd886fe736c95639f67028cf7685377d9769
 
 ### Minor Changes
 
@@ -16,11 +16,13 @@
 
 ### Patch Changes
 
+- refactor: add `:not([l-e-name])` at the end of selector for lazy component ([#1622](https://github.com/lynx-family/lynx-stack/pull/1622))
+
 - fix: the SystemInfo in bts should be assigned to the globalThis ([#1599](https://github.com/lynx-family/lynx-stack/pull/1599))
 
-- Updated dependencies [[`bb53d9a`](https://github.com/lynx-family/lynx-stack/commit/bb53d9a035f607e7c89952098d4ed77877a2e3c1), [`c1f8715`](https://github.com/lynx-family/lynx-stack/commit/c1f8715a81b2e69ff46fc363013626db4468c209)]:
-  - @lynx-js/web-constants@0.16.0-canary-20250828083326-ff4ede6056e7c71eca0ee72b4ee6ca3ee6b52120
-  - @lynx-js/web-style-transformer@0.16.0-canary-20250828083326-ff4ede6056e7c71eca0ee72b4ee6ca3ee6b52120
+- Updated dependencies [[`1a32dd8`](https://github.com/lynx-family/lynx-stack/commit/1a32dd886fe736c95639f67028cf7685377d9769), [`bb53d9a`](https://github.com/lynx-family/lynx-stack/commit/bb53d9a035f607e7c89952098d4ed77877a2e3c1), [`c1f8715`](https://github.com/lynx-family/lynx-stack/commit/c1f8715a81b2e69ff46fc363013626db4468c209)]:
+  - @lynx-js/web-constants@0.16.0-canary-20250828095936-1a32dd886fe736c95639f67028cf7685377d9769
+  - @lynx-js/web-style-transformer@0.16.0-canary-20250828095936-1a32dd886fe736c95639f67028cf7685377d9769
 
 ## 0.15.7
 

package/dist/createMainThreadGlobalThis.d.ts

@@ -1,4 +1,4 @@
-import { type LynxTemplate, type PageConfig, type StyleInfo, 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 } from '@lynx-js/web-constants';
 export interface MainThreadRuntimeCallbacks {
     mainChunkReady: () => void;
     flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[], exposureChangedElements: WebFiberElementImpl[]) => void;
@@ -8,12 +8,12 @@ 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;
 }
 export interface MainThreadRuntimeConfig {
     pageConfig: PageConfig;
     globalProps: unknown;
     callbacks: MainThreadRuntimeCallbacks;
-    styleInfo: StyleInfo;
     lynxTemplate: LynxTemplate;
     browserConfig: BrowserConfig;
     tagMap: Record<string, string>;

package/dist/createMainThreadGlobalThis.js

@@ -3,10 +3,8 @@
 // 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 { createMainThreadLynx } from './createMainThreadLynx.js';
-import { flattenStyleInfo, genCssContent, genCssOGInfo, transformToWebCss, } from './utils/processStyleInfo.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';
-import { decodeCssOG } from './utils/decodeCssOG.js';
 const exposureRelatedAttributes = new Set([
     'exposure-id',
     'exposure-area',
@@ -21,49 +19,14 @@ const exposureRelatedAttributes = new Set([
 ]);
 export function createMainThreadGlobalThis(config) {
     let timingFlags = [];
-    const { callbacks, tagMap, pageConfig, lynxTemplate, rootDom, globalProps, styleInfo, ssrHydrateInfo, ssrHooks, mtsRealm, document, } = config;
+    const { callbacks, tagMap, pageConfig, lynxTemplate, rootDom, globalProps, ssrHydrateInfo, ssrHooks, mtsRealm, document, } = config;
     const { elementTemplate, lepusCode } = lynxTemplate;
     const lynxUniqueIdToElement = ssrHydrateInfo?.lynxUniqueIdToElement ?? [];
-    const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
     const elementToRuntimeInfoMap = new WeakMap();
     let pageElement = lynxUniqueIdToElement[1]
         ?.deref();
     let uniqueIdInc = lynxUniqueIdToElement.length || 1;
     const exposureChangedElements = new Set();
-    /**
-     * now create the style content
-     * 1. flatten the styleInfo
-     * 2. transform the styleInfo to web css
-     * 3. generate the css in js info
-     * 4. create the style element
-     * 5. append the style element to the root dom
-     */
-    flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
-    transformToWebCss(styleInfo);
-    const cssOGInfo = pageConfig.enableCSSSelector
-        ? {}
-        : genCssOGInfo(styleInfo);
-    let cardStyleElement;
-    if (ssrHydrateInfo?.cardStyleElement) {
-        cardStyleElement = ssrHydrateInfo.cardStyleElement;
-    }
-    else {
-        cardStyleElement = document.createElement('style');
-        cardStyleElement.innerHTML = genCssContent(styleInfo, pageConfig);
-        rootDom.append(cardStyleElement);
-    }
-    const cardStyleElementSheet = cardStyleElement.sheet;
-    const updateCssOGStyle = (uniqueId, newStyles) => {
-        if (lynxUniqueIdToStyleRulesIndex[uniqueId] !== undefined) {
-            const rule = cardStyleElementSheet
-                .cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
-            rule.style.cssText = newStyles;
-        }
-        else {
-            const index = cardStyleElementSheet.insertRule(`[${lynxUniqueIdAttribute}="${uniqueId}"]{${newStyles}}`, cardStyleElementSheet.cssRules.length);
-            lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
-        }
-    };
     const commonHandler = (event) => {
         if (!event.currentTarget) {
             return;
@@ -339,13 +302,15 @@ export function createMainThreadGlobalThis(config) {
         const newClassName = ((element.getAttribute('class') ?? '') + ' ' + className)
             .trim();
         element.setAttribute('class', newClassName);
-        const newStyleStr = decodeCssOG(newClassName, cssOGInfo, element.getAttribute(cssIdAttribute));
-        updateCssOGStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr);
+        const cssId = element.getAttribute(cssIdAttribute);
+        const uniqueId = Number(element.getAttribute(lynxUniqueIdAttribute));
+        callbacks.updateCssOGStyle(uniqueId, newClassName, cssId);
     };
     const __SetClassesForCSSOG = (element, classNames) => {
         __SetClasses(element, classNames);
-        const newStyleStr = decodeCssOG(classNames ?? '', cssOGInfo, element.getAttribute(cssIdAttribute));
-        updateCssOGStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr ?? '');
+        const cssId = element.getAttribute(cssIdAttribute);
+        const uniqueId = Number(element.getAttribute(lynxUniqueIdAttribute));
+        callbacks.updateCssOGStyle(uniqueId, classNames ?? '', cssId);
     };
     const __LoadLepusChunk = (path) => {
         try {

package/dist/prepareMainThreadAPIs.js

@@ -7,6 +7,7 @@ import { registerGetCustomSectionHandler } from './crossThreadHandlers/registerG
 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';
 const initWasmPromise = initWasm();
 export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
@@ -28,6 +29,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mt
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
         });
         const i18nResources = initialI18nResources(initI18nResources);
+        const { updateCssOGStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, undefined, ssrHydrateInfo);
         const mtsGlobalThis = createMainThreadGlobalThis({
             lynxTemplate: template,
             mtsRealm,
@@ -36,12 +38,12 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mt
             browserConfig,
             globalProps,
             pageConfig,
-            styleInfo,
             rootDom,
             ssrHydrateInfo,
             ssrHooks,
             document,
             callbacks: {
+                updateCssOGStyle,
                 mainChunkReady: () => {
                     markTimingInternal('data_processor_start');
                     let initData = config.initData;

package/dist/utils/processStyleInfo.d.ts

@@ -1,4 +1,4 @@
-import { type StyleInfo, type CssOGInfo, type PageConfig } from '@lynx-js/web-constants';
+import { type StyleInfo, type CssOGInfo, type PageConfig, type SSRHydrateInfo } from '@lynx-js/web-constants';
 export declare function flattenStyleInfo(styleInfo: StyleInfo, enableCSSSelector: boolean): void;
 /**
  * apply the lynx css -> web css transformation
@@ -7,8 +7,11 @@ export declare function transformToWebCss(styleInfo: StyleInfo): void;
 /**
  * generate those styles applied by <style>...</style>
  */
-export declare function genCssContent(styleInfo: StyleInfo, pageConfig: PageConfig): string;
+export declare function genCssContent(styleInfo: StyleInfo, 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;
+};

package/dist/utils/processStyleInfo.js

@@ -1,8 +1,9 @@
 // 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 { cssIdAttribute, lynxTagAttribute, } from '@lynx-js/web-constants';
+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];
@@ -51,20 +52,26 @@ export function transformToWebCss(styleInfo) {
 /**
  * generate those styles applied by <style>...</style>
  */
-export function genCssContent(styleInfo, pageConfig) {
+export function genCssContent(styleInfo, pageConfig, entryName) {
     function getExtraSelectors(cssId) {
-        let suffix = '';
+        let suffix;
         if (!pageConfig.enableRemoveCSSScope) {
             if (cssId !== undefined) {
-                suffix += `[${cssIdAttribute}="${cssId}"]`;
+                suffix = `[${cssIdAttribute}="${cssId}"]`;
             }
             else {
                 // To make sure the Specificity correct
-                suffix += `[${lynxTagAttribute}]`;
+                suffix = `[${lynxTagAttribute}]`;
             }
         }
         else {
-            suffix += `[${lynxTagAttribute}]`;
+            suffix = `[${lynxTagAttribute}]`;
+        }
+        if (entryName) {
+            suffix = `${suffix}[${lynxEntryNameAttribute}="${entryName}"]`;
+        }
+        else {
+            suffix = `${suffix}:not([${lynxEntryNameAttribute}])`;
         }
         return suffix;
     }
@@ -116,4 +123,43 @@ export function genCssOGInfo(styleInfo) {
         return [cssId, oneCssOGInfo];
     }));
 }
+export function appendStyleElement(styleInfo, pageConfig, rootDom, document, entryName, ssrHydrateInfo) {
+    const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
+    /**
+     * now create the style content
+     * 1. flatten the styleInfo
+     * 2. transform the styleInfo to web css
+     * 3. generate the css in js info
+     * 4. create the style element
+     * 5. append the style element to the root dom
+     */
+    flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
+    transformToWebCss(styleInfo);
+    const cssOGInfo = pageConfig.enableCSSSelector
+        ? {}
+        : genCssOGInfo(styleInfo);
+    let cardStyleElement;
+    if (ssrHydrateInfo?.cardStyleElement) {
+        cardStyleElement = ssrHydrateInfo.cardStyleElement;
+    }
+    else {
+        cardStyleElement = document.createElement('style');
+        cardStyleElement.textContent = genCssContent(styleInfo, pageConfig, entryName);
+        rootDom.appendChild(cardStyleElement);
+    }
+    const cardStyleElementSheet = cardStyleElement.sheet;
+    const updateCssOGStyle = (uniqueId, newClassName, cssID) => {
+        const newStyles = decodeCssOG(newClassName, cssOGInfo, cssID);
+        if (lynxUniqueIdToStyleRulesIndex[uniqueId] !== undefined) {
+            const rule = cardStyleElementSheet
+                .cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
+            rule.style.cssText = newStyles;
+        }
+        else {
+            const index = cardStyleElementSheet.insertRule(`[${lynxUniqueIdAttribute}="${uniqueId}"]{${newStyles}}`, cardStyleElementSheet.cssRules.length);
+            lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
+        }
+    };
+    return { updateCssOGStyle };
+}
 //# sourceMappingURL=processStyleInfo.js.map

package/package.json

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