fix(web): fix reload lynx-view when false may cause css style lost

.changeset/nasty-pens-love.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+---
+
+fix: fix reload lynx-view when `enableCSSSelector` false may cause css style lost

packages/web-platform/web-core-server/src/createLynxView.ts

@@ -205,6 +205,7 @@ export async function createLynxView(
         ]);
       },
     },
+    threadStrategy === 'all-on-ui',
   );
   await startMainThread({
     template,

packages/web-platform/web-core/src/uiThread/createRenderAllOnUI.ts

@@ -144,6 +144,8 @@ export function createRenderAllOnUI(
       return i18nResources;
     },
     loadTemplate,
+    undefined,
+    true,
   );
 
   const start = async (configs: StartMainThreadContextConfig) => {

packages/web-platform/web-mainthread-apis/ts/prepareMainThreadAPIs.ts

@@ -54,6 +54,7 @@ export function prepareMainThreadAPIs(
   initialI18nResources: (data: InitI18nResources) => I18nResources,
   loadTemplate: TemplateLoader,
   ssrHooks?: SSRDehydrateHooks,
+  allOnUI?: boolean,
 ) {
   const postTimingFlags = backgroundThreadRpc.createCall(
     postTimingFlagsEndpoint,
@@ -110,6 +111,7 @@ export function prepareMainThreadAPIs(
       rootDom as unknown as Node,
       document,
       ssrHydrateInfo,
+      allOnUI,
     );
     const mtsGlobalThisRef: { mtsGlobalThis: MainThreadGlobalThis } = {
       mtsGlobalThis: undefined as unknown as MainThreadGlobalThis,

packages/web-platform/web-mainthread-apis/ts/utils/processStyleInfo.ts

@@ -85,6 +85,7 @@ function generateImportByMap(
  */
 export function flattenStyleInfo(
   styleInfo: StyleInfo,
+  cloneDeep?: boolean,
 ): FlattenedStyleInfo {
   // Step 1. Topological sorting
   const sortedCssIds = topologicalSort(styleInfo);
@@ -98,8 +99,19 @@ export function flattenStyleInfo(
     const oneInfo = styleInfo[cssId];
     const flattenedInfo: FlattenedOneInfo = 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()) as typeof selectors
+              ) as CSSRule['sel'],
+              decl: rule.decl.map(([k, v]) => [k, v]) as typeof rule.decl,
+            }))
+            : [])
+          : (oneInfo.rules ?? []),
         importBy: Array.from(cssIdToImportBy.get(cssId) ?? [cssId]),
       }
       : {
@@ -242,6 +254,7 @@ export function appendStyleElement(
   rootDom: Node,
   document: Document,
   ssrHydrateInfo?: SSRHydrateInfo,
+  allOnUI?: boolean,
 ) {
   const lynxUniqueIdToStyleRulesIndex: number[] =
     ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
@@ -255,6 +268,7 @@ export function appendStyleElement(
    */
   const flattenedStyleInfo = flattenStyleInfo(
     styleInfo,
+    !!allOnUI,
   );
   transformToWebCss(flattenedStyleInfo);
   const cssOGInfo: CssOGInfo = pageConfig.enableCSSSelector
@@ -303,7 +317,7 @@ export function appendStyleElement(
     styleInfo: StyleInfo,
     entryName: string,
   ) => {
-    const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+    const flattenedStyleInfo = flattenStyleInfo(styleInfo, !!allOnUI);
     transformToWebCss(flattenedStyleInfo);
     if (!pageConfig.enableCSSSelector) {
       lazyCSSOGInfo[entryName] = genCssOGInfo(flattenedStyleInfo);

packages/web-platform/web-tests/tests/react.spec.ts

@@ -1,3 +1,3 @@
 // Copyright 2024 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.
@@ -23,7 +23,7 @@
     ReturnType<typeof expect<Page>>['toHaveScreenshot']
   >[0],
 ) => {
   await expect(page).toHaveScreenshot([
     `${caseName}`,
     `${subcaseName}`,
     `${label}.png`,
@@ -58,7 +58,7 @@
   if (testname2) {
     url += `&casename2=${testname2}`;
   }
   await page.goto(url, {
     waitUntil: 'load',
   });
   await page.evaluate(() => document.fonts.ready);
@@ -1839,6 +1839,23 @@
         ).toHaveCSS('background-color', 'rgb(0, 128, 0)');
       },
     );
+    test(
+      'config-css-selector-false-reload',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await wait(100);
+        await expect(
+          page.locator('#target'),
+        ).toHaveCSS('background-color', 'rgb(255, 0, 0)');
+        await page.evaluate(() => {
+          document.querySelector('lynx-view')?.reload();
+        });
+        await wait(1000);
+        await expect(
+          page.locator('#target'),
+        ).toHaveCSS('background-color', 'rgb(255, 0, 0)');
+      },
+    );
     test(
       'config-css-remove-scope-false-import-css',
       async ({ page }, { title }) => {
@@ -2059,7 +2076,7 @@
       const elementName = 'lynx-view';
       test('basic-element-lynx-view-not-auto', async ({ page }, { title }) => {
         await goto(page, title);
         await page.evaluate(() => {
           document.querySelector('lynx-view')!.setAttribute('width', '100vw');
           document.querySelector('lynx-view')!.setAttribute('height', '100vh');
           document.querySelector('lynx-view')!.setAttribute(
@@ -3118,7 +3135,7 @@
             inputDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
       test(
@@ -4684,7 +4701,7 @@
 
           await goto(page, title);
           await wait(5000);
           expect(scrolltolower).toBeTruthy();
         },
       );
     });

packages/web-platform/web-tests/tests/react/config-css-selector-false-reload/index.css

@@ -0,0 +1,11 @@
+/*
+// 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.
+*/
+
+.parent {
+  width: 200px;
+  height: 200px;
+  background-color: red;
+}

packages/web-platform/web-tests/tests/react/config-css-selector-false-reload/index.jsx

@@ -0,0 +1,15 @@
+// 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 { root, Component } from '@lynx-js/react';
+import './index.css';
+export default class App extends Component {
+  render() {
+    return (
+      <view id='target' class='parent'>
+      </view>
+    );
+  }
+}
+
+root.render(<App></App>);

packages/web-platform/web-worker-runtime/src/mainThread/startMainThread.ts

@@ -113,6 +113,8 @@ export async function startMainThreadWorker(
       return i18nResources;
     },
     loadTemplate,
+    undefined,
+    false,
   );
   uiThreadRpc.registerHandler(
     mainThreadStartEndpoint,