@lynx-js/web-mainthread-apis-canary 0.19.0 → 0.19.1-canary-20251210-47cc2bc6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.19.1-canary-20251210073827-47cc2bc694d0da12b41d55e459c4e78338e8b77a
+
+### Patch Changes
+
+- fix: fix reload lynx-view when `enableCSSSelector` false may cause css style lost ([#1982](https://github.com/lynx-family/lynx-stack/pull/1982))
+
+- Updated dependencies []:
+  - @lynx-js/web-constants@0.19.1-canary-20251210073827-47cc2bc694d0da12b41d55e459c4e78338e8b77a
+
 ## 0.19.0
 
 ### Patch Changes
@@ -314,25 +323,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/prepareMainThreadAPIs.d.ts

@@ -1,5 +1,5 @@
 import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources, type Cloneable, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm, type TemplateLoader, type UpdateDataOptions } from '@lynx-js/web-constants';
-export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, document: Document, mtsRealmPromise: JSRealm | Promise<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): {
+export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, document: Document, mtsRealmPromise: JSRealm | Promise<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, allOnUI?: boolean): {
     startMainThread: (config: StartMainThreadContextConfig, ssrHydrateInfo?: SSRHydrateInfo) => Promise<void>;
     handleUpdatedData: (newData: Cloneable, options: UpdateDataOptions | undefined) => Promise<void>;
 };

package/dist/prepareMainThreadAPIs.js

@@ -8,7 +8,7 @@ import { createMainThreadGlobalThis } from './createMainThreadGlobalThis.js';
 import { createExposureService } from './utils/createExposureService.js';
 import { appendStyleElement } from './utils/processStyleInfo.js';
 import { createQueryComponent } from './crossThreadHandlers/createQueryComponent.js';
-export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealmPromise, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, loadTemplate, ssrHooks) {
+export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealmPromise, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, loadTemplate, ssrHooks, allOnUI) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
     const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
     const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
@@ -29,7 +29,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mt
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
         });
         const i18nResources = initialI18nResources(initI18nResources);
-        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo);
+        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo, allOnUI);
         const mtsGlobalThisRef = {
             mtsGlobalThis: undefined,
         };

package/dist/utils/processStyleInfo.d.ts

@@ -5,7 +5,7 @@ import { type StyleInfo, type CssOGInfo, type PageConfig, type SSRHydrateInfo, t
  * 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;
+export declare function flattenStyleInfo(styleInfo: StyleInfo, cloneDeep?: boolean): FlattenedStyleInfo;
 /**
  * apply the lynx css -> web css transformation
  */
@@ -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, ssrHydrateInfo?: SSRHydrateInfo): {
+export declare function appendStyleElement(styleInfo: StyleInfo, pageConfig: PageConfig, rootDom: Node, document: Document, ssrHydrateInfo?: SSRHydrateInfo, allOnUI?: boolean): {
     updateCssOGStyle: (uniqueId: number, newClassName: string, cssID: string | null, entryName: string | null) => void;
     updateLazyComponentStyle: (styleInfo: StyleInfo, entryName: string) => void;
 };

package/dist/utils/processStyleInfo.js

@@ -64,7 +64,7 @@ function generateImportByMap(styleInfo, sortedCssIds) {
  * 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) {
+export function flattenStyleInfo(styleInfo, cloneDeep) {
     // Step 1. Topological sorting
     const sortedCssIds = topologicalSort(styleInfo);
     // Step 2. generate deps;
@@ -75,8 +75,17 @@ export function flattenStyleInfo(styleInfo) {
         const oneInfo = styleInfo[cssId];
         const flattenedInfo = oneInfo
             ? {
-                content: oneInfo.content,
-                rules: oneInfo.rules,
+                content: cloneDeep
+                    ? (oneInfo.content ? [...oneInfo.content] : [])
+                    : (oneInfo.content ?? []),
+                rules: cloneDeep
+                    ? (oneInfo.rules
+                        ? oneInfo.rules.map(rule => ({
+                            sel: rule.sel.map(selectors => selectors.map(arr => arr.slice())),
+                            decl: rule.decl.map(([k, v]) => [k, v]),
+                        }))
+                        : [])
+                    : (oneInfo.rules ?? []),
                 importBy: Array.from(cssIdToImportBy.get(cssId) ?? [cssId]),
             }
             : {
@@ -182,7 +191,7 @@ export function genCssOGInfo(styleInfo) {
     }
     return cssOGInfo;
 }
-export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo) {
+export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo, allOnUI) {
     const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
     /**
      * now create the style content
@@ -192,7 +201,7 @@ export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssr
      * 4. create the style element
      * 5. append the style element to the root dom
      */
-    const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+    const flattenedStyleInfo = flattenStyleInfo(styleInfo, !!allOnUI);
     transformToWebCss(flattenedStyleInfo);
     const cssOGInfo = pageConfig.enableCSSSelector
         ? {}
@@ -224,7 +233,7 @@ export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssr
         }
     };
     const updateLazyComponentStyle = (styleInfo, entryName) => {
-        const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+        const flattenedStyleInfo = flattenStyleInfo(styleInfo, !!allOnUI);
         transformToWebCss(flattenedStyleInfo);
         if (!pageConfig.enableCSSSelector) {
             lazyCSSOGInfo[entryName] = genCssOGInfo(flattenedStyleInfo);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis-canary",
-  "version": "0.19.0",
+  "version": "0.19.1-canary-20251210-47cc2bc6",
   "private": false,
   "description": "",
   "keywords": [],
@@ -26,7 +26,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.19.0",
+    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.19.1-canary-20251210-47cc2bc6",
     "hyphenate-style-name": "^1.1.0",
     "wasm-feature-detect": "^1.8.0"
   },