[pull] main from lynx-family:main

.changeset/light-facts-sniff.md

@@ -0,0 +1,9 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+"@lynx-js/web-webpack-plugin": patch
+"@lynx-js/react-rsbuild-plugin": patch
+---
+
+fix(web): `:root` not work on web platform
+
+Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin`

.changeset/loose-moments-itch.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+perf: late evaluate document.font.ready

.changeset/rotten-walls-hear.md

@@ -0,0 +1,13 @@
+---
+"@lynx-js/react-alias-rsbuild-plugin": patch
+"@lynx-js/react-rsbuild-plugin": patch
+---
+
+Refactor: Replace built-in `background-only` implementation with npm package
+
+Previously we maintained custom files:
+
+- `empty.ts` for background thread
+- `error.ts` for main thread validation
+
+Now adopting the standard `background-only` npm package

.changeset/rude-memes-shave.md

@@ -0,0 +1,13 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-webpack-plugin": patch
+"@lynx-js/react-rsbuild-plugin": patch
+"@lynx-js/web-core": patch
+---
+
+fix(web): css selector not work for selectors with combinator and pseudo-class on WEB
+
+like `.parent > :not([hidden]) ~ :not([hidden])`
+
+you will need to upgrade your `react-rsbuild-plugin` to fix this issue

.changeset/shaky-games-cough.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+perf: improve raw-text performance

packages/rspeedy/plugin-react-alias/etc/react-alias-rsbuild-plugin.api.md

@@ -6,6 +6,11 @@
 
 import type { RsbuildPlugin } from '@rsbuild/core';
 
+// Warning: (ae-missing-release-tag) "createLazyResolver" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export function createLazyResolver(context: string, conditionNames: string[]): (request: string) => Promise<string>;
+
 // Warning: (ae-missing-release-tag) "Options" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)

packages/rspeedy/plugin-react-alias/src/index.ts

@@ -164,13 +164,13 @@ export function pluginReactAlias(options: Options): RsbuildPlugin {
   }
 }
 
-function createLazyResolver(context: string, conditionNames: string[]) {
+export function createLazyResolver(context: string, conditionNames: string[]) {
   let lazyExports: Record<string, string | false>
   let resolverLazy: ResolveFunction
 
   return async (
     request: string,
-  ) => {
+  ): Promise<string> => {
     const { default: resolver } = await import('enhanced-resolve')
 
     return (
@@ -179,6 +179,6 @@ function createLazyResolver(context: string, conditionNames: string[]) {
           context,
           request,
         )
-    )
+    ) as string
   }
 }

packages/rspeedy/plugin-react/package.json

@@ -43,7 +43,8 @@
     "@lynx-js/react-webpack-plugin": "workspace:*",
     "@lynx-js/runtime-wrapper-webpack-plugin": "workspace:*",
     "@lynx-js/template-webpack-plugin": "workspace:*",
-    "@lynx-js/web-webpack-plugin": "workspace:*"
+    "@lynx-js/web-webpack-plugin": "workspace:*",
+    "background-only": "^0.0.1"
   },
   "devDependencies": {
     "@lynx-js/react": "workspace:*",

packages/rspeedy/plugin-react/src/backgroundOnly.ts

@@ -6,6 +6,7 @@ import { fileURLToPath } from 'node:url'
 
 import type { RsbuildPluginAPI } from '@rsbuild/core'
 
+import { createLazyResolver } from '@lynx-js/react-alias-rsbuild-plugin'
 import { LAYERS } from '@lynx-js/react-webpack-plugin'
 
 const DETECT_IMPORT_ERROR = 'react:detect-import-error'
@@ -18,7 +19,21 @@ export function applyBackgroundOnly(
 ): void {
   const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-  api.modifyBundlerChain(chain => {
+  const backgroundResolve = createLazyResolver(
+    __dirname,
+    ['import'],
+  )
+  const mainThreadResolve = createLazyResolver(
+    __dirname,
+    ['lepus'],
+  )
+
+  api.modifyBundlerChain(async chain => {
+    const backgroundOnly = {
+      background: await backgroundResolve('background-only'),
+      mainThread: await mainThreadResolve('background-only'),
+    }
+
     chain
       .module
       .rule(ALIAS_BACKGROUND_ONLY_MAIN)
@@ -27,7 +42,7 @@ export function applyBackgroundOnly(
       .alias
       .set(
         'background-only$',
-        path.resolve(__dirname, 'background-only', 'error.js'),
+        backgroundOnly.mainThread,
       )
 
     chain
@@ -38,13 +53,13 @@ export function applyBackgroundOnly(
       .alias
       .set(
         'background-only$',
-        path.resolve(__dirname, 'background-only', 'empty.js'),
+        backgroundOnly.background,
       )
 
     chain
       .module
       .rule(DETECT_IMPORT_ERROR)
-      .test(path.resolve(__dirname, 'background-only', 'error.js'))
+      .test(backgroundOnly.mainThread)
       .issuerLayer(LAYERS.MAIN_THREAD)
       .use(DETECT_IMPORT_ERROR)
       .loader(path.resolve(__dirname, 'loaders/invalid-import-error-loader'))

packages/web-platform/web-constants/src/types/StyleInfo.ts

@@ -6,6 +6,8 @@ export interface CSSRule {
     plainSelectors: string[],
     pseudoClassSelectors: string[],
     pseudoElementSelectors: string[],
+    combinator: string[],
+    ...string[][],
   ][];
   decl: [string, string][];
 }

packages/web-platform/web-elements/src/XText/RawText.ts

@@ -11,16 +11,17 @@ import {
 export class RawTextAttributes {
   static observedAttributes = ['text'];
   readonly #dom: HTMLElement;
+  #text?: Text;
 
   constructor(currentElement: HTMLElement) {
     this.#dom = currentElement;
   }
   @registerAttributeHandler('text', true)
   #handleText(newVal: string | null) {
+    this.#text?.remove();
     if (newVal) {
-      this.#dom.innerHTML = newVal;
-    } else {
-      this.#dom.innerHTML = '';
+      this.#text = new Text(newVal);
+      this.#dom.append(this.#text);
     }
   }
 }

packages/web-platform/web-elements/src/XText/XTextTruncation.ts

@@ -119,15 +119,13 @@ export class XTextTruncation
     if (!this.#componentConnected || this.#dom.matches('x-text>x-text')) return;
     if (this.#scheduledTextLayout) return;
     this.#scheduledTextLayout = true;
-    boostedQueueMicrotask(() => {
-      this.#layoutTextInner();
+    boostedQueueMicrotask(async () => {
+      await this.#layoutTextInner();
       this.#startObservers();
-      queueMicrotask(() => {
-        this.#scheduledTextLayout = false;
-      });
+      this.#scheduledTextLayout = false;
     });
   }
-  #layoutTextInner() {
+  async #layoutTextInner() {
     this.#inplaceEllipsisNode?.parentElement?.removeChild(
       this.#inplaceEllipsisNode,
     );
@@ -136,6 +134,7 @@ export class XTextTruncation
     if (!this.#doExpensiveLineLayoutCalculation && isNaN(this.#maxLength)) {
       return;
     }
+    await document.fonts.ready;
     const parentBondingRect = this.#getInnerBox().getBoundingClientRect();
     this.#textMeasure = new TextRenderingMeasureTool(
       this.#dom,
@@ -389,9 +388,7 @@ export class XTextTruncation
     this.#handleEnableLayoutEvent(
       this.#enableLayoutEvent,
     );
-    document.fonts.ready.then(() => {
-      this.#handleAttributeChange();
-    });
+    this.#handleAttributeChange();
     boostedQueueMicrotask(() => {
       this.#sendLayoutEvent();
     });

packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts

@@ -121,7 +121,6 @@ export class MainThreadRuntime {
     const cssInJsInfo: CssInJsInfo = this.config.pageConfig.enableCSSSelector
       ? {}
       : genCssInJsInfo(this.config.styleInfo);
-    this._rootDom = this.config.docu.createElement('div');
     const cardStyleElement = this.config.docu.createElement('style');
     cardStyleElement.innerHTML = genCssContent(
       this.config.styleInfo,

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

@@ -7,6 +7,7 @@ import {
   type StyleInfo,
   type CssInJsInfo,
   type PageConfig,
+  type CSSRule,
   cssIdAttribute,
   lynxTagAttribute,
 } from '@lynx-js/web-constants';
@@ -48,13 +49,18 @@ export function transformToWebCss(styleInfo: StyleInfo) {
       rule.decl = transformedStyle;
       if (childStyle.length > 0) {
         cssInfos.rules.push({
-          sel: selectors.map(
-            selector => [
-              selector[0].concat(['>', '*']),
-              selector[1],
-              selector[2],
-            ],
-          ),
+          sel: selectors.map(selector =>
+            selector.toSpliced(
+              -2,
+              1,
+              /* replace the last combinator and insert at the end */
+              ['>'],
+              ['*'],
+              [],
+              [],
+              [],
+            )
+          ) as CSSRule['sel'],
           decl: childStyle,
         });
       }
@@ -72,7 +78,7 @@ export function genCssContent(
   function getExtraSelectors(
     cssId?: string,
   ) {
-    let prepend = '', suffix = '';
+    let suffix = '';
     if (!pageConfig.enableRemoveCSSScope) {
       if (cssId !== undefined) {
         suffix += `[${cssIdAttribute}="${cssId}"]`;
@@ -83,22 +89,17 @@ export function genCssContent(
     } else {
       suffix += `[${lynxTagAttribute}]`;
     }
-    return { prepend, suffix };
+    return suffix;
   }
   const finalCssContent: string[] = [];
   for (const [cssId, cssInfos] of Object.entries(styleInfo)) {
-    const { prepend, suffix } = getExtraSelectors(cssId);
+    const suffix = getExtraSelectors(cssId);
     const declarationContent = cssInfos.rules.map((rule) => {
-      const { sel: selectors, decl: declarations } = rule;
-      const selectorString = selectors.map(
-        ([plainSelectors, pseudoClassSelectors, pseudoElementSelectors]) => {
-          return [
-            prepend,
-            plainSelectors.join(''),
-            suffix,
-            pseudoClassSelectors.join(''),
-            pseudoElementSelectors.join(''),
-          ].join('');
+      const { sel: selectorList, decl: declarations } = rule;
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+      const selectorString = selectorList.map(
+        (selectors) => {
+          return selectors.toSpliced(-4, 0, [suffix]).join('');
         },
       ).join(',');
       const declarationString = declarations.map(([k, v]) => `${k}:${v};`).join(
@@ -120,12 +121,18 @@ export function genCssInJsInfo(styleInfo: StyleInfo): CssInJsInfo {
       const oneCssInJsInfo: Record<string, [string, string][]> = {};
       cssInfos.rules = cssInfos.rules.filter(oneCssInfo => {
         oneCssInfo.sel = oneCssInfo.sel.filter(selectorList => {
-          const [classSelectors, pseudoClassSelectors, pseudoElementSelectors] =
-            selectorList;
+          const [
+            classSelectors,
+            pseudoClassSelectors,
+            pseudoElementSelectors,
+            combinator,
+          ] = selectorList;
           if (
+            // only one class selector
             classSelectors.length === 1 && classSelectors[0]![0] === '.'
             && pseudoClassSelectors.length === 0
             && pseudoElementSelectors.length === 0
+            && combinator.length === 0
           ) {
             const selectorName = classSelectors[0]!.substring(1);
             const currentDeclarations = oneCssInJsInfo[selectorName];

packages/web-platform/web-tests/lighthouserc.js

@@ -3,6 +3,7 @@ import { chromium } from '@playwright/test';
 import cases from './tests/lighthouse.cases.js';
 
 const port = process.env.PORT ?? 3080;
+const isCI = !!process.env['CI'];
 const config = {
   ci: {
     // Use the recommended Lighthouse CI preset
@@ -42,7 +43,7 @@ const config = {
         // Configure throttling settings
         throttling: {
           rttMs: 0,
-          cpuSlowdownMultiplier: 2.5,
+          cpuSlowdownMultiplier: isCI ? 2.3 : 4,
           requestLatencyMs: 0,
           downloadThroughputKbps: 99999,
           uploadThroughputKbps: 99999,

packages/web-platform/web-tests/tests/lighthouse.cases.js

@@ -28,7 +28,7 @@ export default [
       'categories:performance': [
         'error',
         {
-          'minScore': 0.81,
+          'minScore': 0.87,
         },
       ],
       'first-contentful-paint': [
@@ -40,7 +40,31 @@ export default [
       'total-blocking-time': [
         'error',
         {
-          'maxNumericValue': 750,
+          'maxNumericValue': 500,
+        },
+      ],
+    },
+  },
+  {
+    'matchingUrlPattern':
+      '/web-element-tests/performance/x-text-with-font.html',
+    'assertions': {
+      'categories:performance': [
+        'error',
+        {
+          'minScore': 0.79,
+        },
+      ],
+      'speed-index': [
+        'error',
+        {
+          'maxNumericValue': 550,
+        },
+      ],
+      'total-blocking-time': [
+        'error',
+        {
+          'maxNumericValue': 500,
         },
       ],
     },