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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.16.0
+
+### Minor Changes
+
+- refactor: provide the mts a real globalThis ([#1589](https://github.com/lynx-family/lynx-stack/pull/1589))
+
+  Before this change, We create a function wrapper and a fake globalThis for Javascript code.
+
+  This caused some issues.
+
+  After this change, we will create an iframe for createing an isolated Javascript context.
+
+  This means the globalThis will be the real one.
+
+### 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 [[`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
+  - @lynx-js/web-style-transformer@0.16.0
+
 ## 0.15.7
 
 ### Patch Changes

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 LynxJSModule, type MainThreadGlobalThis, type WebFiberElementImpl, type I18nResourceTranslationOptions, type SSRHydrateInfo, type SSRDehydrateHooks } 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;
@@ -7,22 +7,21 @@ export interface MainThreadRuntimeCallbacks {
     markTiming: (pipelineId: string, timingKey: string) => void;
     publishEvent: RpcCallType<typeof publishEventEndpoint>;
     publicComponentEvent: RpcCallType<typeof publicComponentEventEndpoint>;
-    createElement: (tag: string) => WebFiberElementImpl;
     _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;
-    customSections: LynxTemplate['customSections'];
-    elementTemplate: LynxTemplate['elementTemplate'];
-    lepusCode: Record<string, LynxJSModule>;
+    lynxTemplate: LynxTemplate;
     browserConfig: BrowserConfig;
     tagMap: Record<string, string>;
     rootDom: Pick<Element, 'append' | 'addEventListener'> & Partial<Pick<ShadowRoot, 'querySelectorAll' | 'cloneNode'>>;
     jsContext: LynxContextEventTarget;
     ssrHydrateInfo?: SSRHydrateInfo;
     ssrHooks?: SSRDehydrateHooks;
+    mtsRealm: JSRealm;
+    document: Document;
 }
 export declare function createMainThreadGlobalThis(config: MainThreadRuntimeConfig): MainThreadGlobalThis;

package/dist/createMainThreadGlobalThis.js

@@ -1,13 +1,10 @@
 // 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, globalDisallowedVars, } from '@lynx-js/web-constants';
-import { globalMuteableVars } from '@lynx-js/web-constants';
+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',
@@ -22,54 +19,14 @@ const exposureRelatedAttributes = new Set([
 ]);
 export function createMainThreadGlobalThis(config) {
     let timingFlags = [];
-    let renderPage;
-    const { callbacks, tagMap, pageConfig, lepusCode, rootDom, globalProps, styleInfo, ssrHydrateInfo, ssrHooks, } = 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;
-    /**
-     * for "update" the globalThis.val in the main thread
-     */
-    const varsUpdateHandlers = [];
-    const lynxGlobalBindingValues = {};
     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 = callbacks.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;
@@ -107,7 +64,8 @@ export function createMainThreadGlobalThis(config) {
                     crossThreadEvent.currentTarget
                         .elementRefptr = event.currentTarget;
                 }
-                mtsGlobalThis.runWorklet?.(hname.value, [crossThreadEvent]);
+                mtsRealm.globalWindow
+                    .runWorklet?.(hname.value, [crossThreadEvent]);
             }
         }
         return false;
@@ -227,7 +185,7 @@ export function createMainThreadGlobalThis(config) {
     const __CreateElement = (tag, parentComponentUniqueId) => {
         const uniqueId = uniqueIdInc++;
         const htmlTag = tagMap[tag] ?? tag;
-        const element = callbacks.createElement(htmlTag);
+        const element = document.createElement(htmlTag);
         lynxUniqueIdToElement[uniqueId] = new WeakRef(element);
         const parentComponentCssID = lynxUniqueIdToElement[parentComponentUniqueId]
             ?.deref()?.getAttribute(cssIdAttribute);
@@ -326,9 +284,11 @@ export function createMainThreadGlobalThis(config) {
         elementToRuntimeInfoMap.set(element, runtimeInfo);
     };
     const __SwapElement = (childA, childB) => {
-        const temp = callbacks.createElement('div');
+        const temp = document.createElement('div');
+        // @ts-expect-error fixme
         childA.replaceWith(temp);
         childB.replaceWith(childA);
+        // @ts-expect-error fixme
         temp.replaceWith(childB);
     };
     const __SetCSSIdForCSSOG = (elements, cssId) => {
@@ -342,22 +302,24 @@ 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) => {
-        const lepusModule = lepusCode[`${path}`];
-        if (lepusModule) {
-            const entry = lepusModule.exports;
-            entry?.(mtsGlobalThis);
+        try {
+            path = lepusCode?.[path] ?? path;
+            mtsRealm.loadScriptSync(path);
             return true;
         }
-        else {
+        catch (e) {
+            console.error(`failed to load lepus chunk ${path}`, e);
             return false;
         }
     };
@@ -412,7 +374,7 @@ export function createMainThreadGlobalThis(config) {
         }
     };
     const __ElementFromBinary = (templateId, parentComponentUniId) => {
-        const elementTemplateData = config.elementTemplate[templateId];
+        const elementTemplateData = elementTemplate[templateId];
         if (elementTemplateData) {
             let clonedElements;
             if (templateIdToTemplate[templateId]) {
@@ -421,7 +383,7 @@ export function createMainThreadGlobalThis(config) {
             else {
                 clonedElements = elementTemplateData.map(data => createElementForElementTemplateData(data, parentComponentUniId));
                 if (rootDom.cloneNode) {
-                    const template = callbacks.createElement('template');
+                    const template = document.createElement('template');
                     template.content.append(...clonedElements);
                     templateIdToTemplate[templateId] = template;
                     rootDom.append(template);
@@ -513,53 +475,22 @@ export function createMainThreadGlobalThis(config) {
         _SetSourceMapRelease: (errInfo) => release = errInfo?.release,
         __OnLifecycleEvent: callbacks.__OnLifecycleEvent,
         __FlushElementTree,
-        __lynxGlobalBindingValues: lynxGlobalBindingValues,
         _I18nResourceTranslation: callbacks._I18nResourceTranslation,
         _AddEventListener: () => { },
-        set _updateVars(handler) {
-            varsUpdateHandlers.push(handler);
-        },
-        set renderPage(foo) {
-            renderPage = foo;
-            queueMicrotask(callbacks.mainChunkReady);
-        },
-        get renderPage() {
-            return renderPage;
-        },
+        renderPage: undefined,
     };
-    mtsGlobalThis.globalThis = new Proxy(mtsGlobalThis, {
-        get: (target, prop) => {
-            if (typeof prop === 'string' && globalDisallowedVars.includes(prop)) {
-                return undefined;
-            }
-            if (prop === 'globalThis') {
-                return target;
-            }
-            // @ts-expect-error
-            return target[prop] ?? globalThis[prop];
-        },
-        set: (target, prop, value) => {
-            // @ts-expect-error
-            target[prop] = value;
-            return true;
+    Object.assign(mtsRealm.globalWindow, mtsGlobalThis);
+    Object.defineProperty(mtsRealm.globalWindow, 'renderPage', {
+        get() {
+            return mtsGlobalThis.renderPage;
         },
-        ownKeys(target) {
-            return Reflect.ownKeys(target).filter((key) => key !== 'globalThis');
+        set(v) {
+            mtsGlobalThis.renderPage = v;
+            queueMicrotask(callbacks.mainChunkReady);
         },
+        configurable: true,
+        enumerable: true,
     });
-    for (const nm of globalMuteableVars) {
-        Object.defineProperty(mtsGlobalThis, nm, {
-            get: () => {
-                return lynxGlobalBindingValues[nm];
-            },
-            set: (v) => {
-                lynxGlobalBindingValues[nm] = v;
-                for (const handler of varsUpdateHandlers) {
-                    handler();
-                }
-            },
-        });
-    }
-    return mtsGlobalThis;
+    return mtsRealm.globalWindow;
 }
 //# sourceMappingURL=createMainThreadGlobalThis.js.map

package/dist/createMainThreadLynx.js

@@ -1,21 +1,31 @@
 import {} from './createMainThreadGlobalThis.js';
 export function createMainThreadLynx(config, SystemInfo) {
+    const requestAnimationFrameBrowserImpl = requestAnimationFrame;
+    const cancelAnimationFrameBrowserImpl = cancelAnimationFrame;
+    const setTimeoutBrowserImpl = setTimeout;
+    const clearTimeoutBrowserImpl = clearTimeout;
+    const setIntervalBrowserImpl = setInterval;
+    const clearIntervalBrowserImpl = clearInterval;
     return {
         getJSContext() {
             return config.jsContext;
         },
         requestAnimationFrame(cb) {
-            return requestAnimationFrame(cb);
+            return requestAnimationFrameBrowserImpl(cb);
         },
         cancelAnimationFrame(handler) {
-            return cancelAnimationFrame(handler);
+            return cancelAnimationFrameBrowserImpl(handler);
         },
         __globalProps: config.globalProps,
         getCustomSectionSync(key) {
-            return config.customSections[key]?.content;
+            return config.lynxTemplate.customSections[key]?.content;
         },
         markPipelineTiming: config.callbacks.markTiming,
         SystemInfo,
+        setTimeout: setTimeoutBrowserImpl,
+        clearTimeout: clearTimeoutBrowserImpl,
+        setInterval: setIntervalBrowserImpl,
+        clearInterval: clearIntervalBrowserImpl,
     };
 }
 //# sourceMappingURL=createMainThreadLynx.js.map

package/dist/prepareMainThreadAPIs.d.ts

@@ -1,4 +1,4 @@
-import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type MainThreadGlobalThis, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources, type SSRHydrateInfo, type SSRDehydrateHooks } from '@lynx-js/web-constants';
-export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, createElement: Document['createElement'], 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): {
-    startMainThread: (config: StartMainThreadContextConfig, ssrHydrateInfo?: SSRHydrateInfo) => Promise<MainThreadGlobalThis>;
+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): {
+    startMainThread: (config: StartMainThreadContextConfig, ssrHydrateInfo?: SSRHydrateInfo) => Promise<void>;
 };

package/dist/prepareMainThreadAPIs.js

@@ -7,9 +7,9 @@ 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();
-const moduleCache = {};
-export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
+export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
     const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
     const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
@@ -20,46 +20,30 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
     async function startMainThread(config, ssrHydrateInfo) {
         let isFp = true;
         const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, initI18nResources, } = config;
-        const { styleInfo, pageConfig, customSections, cardType, lepusCode, elementTemplate, } = template;
+        const { styleInfo, pageConfig, customSections, cardType, } = template;
         markTimingInternal('decode_start');
         await initWasmPromise;
-        const lepusCodeEntries = await Promise.all(Object.entries(lepusCode).map(async ([name, url]) => {
-            const cachedModule = moduleCache[url];
-            if (cachedModule) {
-                return [name, cachedModule];
-            }
-            else {
-                const { default: evaluateModule } = await import(
-                /* webpackIgnore: true */ url);
-                const module = {
-                    exports: evaluateModule,
-                };
-                moduleCache[url] = module;
-                return [name, module];
-            }
-        }));
-        const lepusCodeLoaded = Object.fromEntries(lepusCodeEntries);
-        const entry = lepusCodeLoaded['root'].exports;
         const jsContext = new LynxCrossThreadContext({
             rpc: backgroundThreadRpc,
             receiveEventEndpoint: dispatchJSContextOnMainThreadEndpoint,
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
         });
         const i18nResources = initialI18nResources(initI18nResources);
+        const { updateCssOGStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, undefined, ssrHydrateInfo);
         const mtsGlobalThis = createMainThreadGlobalThis({
+            lynxTemplate: template,
+            mtsRealm,
             jsContext,
             tagMap,
             browserConfig,
-            customSections,
-            elementTemplate,
             globalProps,
             pageConfig,
-            styleInfo,
-            lepusCode: lepusCodeLoaded,
             rootDom,
             ssrHydrateInfo,
             ssrHooks,
+            document,
             callbacks: {
+                updateCssOGStyle,
                 mainChunkReady: () => {
                     markTimingInternal('data_processor_start');
                     let initData = config.initData;
@@ -80,7 +64,6 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
                         customSections: Object.fromEntries(Object.entries(customSections).filter(([, value]) => value.type !== 'lazy').map(([k, v]) => [k, v.content])),
                         nativeModulesMap,
                         napiModulesMap,
-                        browserConfig,
                     });
                     if (!ssrHydrateInfo) {
                         mtsGlobalThis.renderPage(initData);
@@ -135,7 +118,6 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
                 markTiming: (a, b) => markTimingInternal(b, a),
                 publishEvent,
                 publicComponentEvent,
-                createElement,
                 _I18nResourceTranslation: (options) => {
                     const matchedInitI18nResources = i18nResources.data?.find(i => getCacheI18nResourcesKey(i.options)
                         === getCacheI18nResourcesKey(options));
@@ -148,9 +130,8 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
             },
         });
         markTimingInternal('decode_end');
-        entry(mtsGlobalThis);
+        await mtsRealm.loadScript(template.lepusCode.root);
         jsContext.__start(); // start the jsContext after the runtime is created
-        return mtsGlobalThis;
     }
     return { startMainThread };
 }

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",
-  "version": "0.15.7",
+  "version": "0.16.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
   ],
   "dependencies": {
     "hyphenate-style-name": "^1.1.0",
-    "@lynx-js/web-constants": "0.15.7",
-    "@lynx-js/web-style-transformer": "0.15.7"
+    "@lynx-js/web-constants": "0.16.0",
+    "@lynx-js/web-style-transformer": "0.16.0"
   }
 }