Merge remote-tracking branch 'gh/main' into feat/react-compiler

Author: upupming

.changeset/seven-coats-appear.md

@@ -0,0 +1,7 @@
+---
+"@lynx-js/web-core-server": patch
+"@lynx-js/web-core": patch
+"@lynx-js/web-explorer": patch
+---
+
+feat: builtinTagTransformMap add `'input': 'x-input'`

.changeset/thin-webs-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/template-webpack-plugin": patch
+---
+
+Remove `compiler.hooks.initialize` as [it's not called in child compilers](https://github.com/web-infra-dev/rspack/blob/aa4ad886b900770787ecddd625d3e24a51b6b99c/packages/rspack/src/rspack.ts#L78).

benchmark/react/cases/006-static-raw-text/index.tsx

@@ -0,0 +1,23 @@
+// Copyright 2025 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 } from '@lynx-js/react';
+
+import { RunBenchmarkUntilHydrate } from '../../src/RunBenchmarkUntil.js';
+
+runAfterLoadScript(() => {
+  root.render(
+    <>
+      {Array.from(
+        { length: 100 },
+        () => (
+          <text>
+            Hello, ReactLynx 🎉!
+          </text>
+        ),
+      )}
+      <RunBenchmarkUntilHydrate />
+    </>,
+  );
+});

benchmark/react/lynx.config.js

@@ -45,6 +45,10 @@ export default defineConfig({
       '005-load-script': [
         './cases/005-load-script/index.tsx',
       ],
+      '006-static-raw-text': [
+        './src/patchProfile.ts',
+        './cases/006-static-raw-text/index.tsx',
+      ],
     },
   },
   plugins: [

benchmark/react/package.json

@@ -10,6 +10,7 @@
     "bench:003-hello-list": "benchx_cli run dist/003-hello-list.lynx.bundle --wait-for-id=stop-benchmark-true",
     "bench:004-various-update": "benchx_cli run dist/004-various-update.lynx.bundle --wait-for-id=stop-benchmark-true",
     "bench:005-load-script": "benchx_cli run dist/005-load-script.lynx.bundle",
+    "bench:006-static-raw-text": "benchx_cli run dist/006-static-raw-text.lynx.bundle --wait-for-id=stop-benchmark-true",
     "build": "rspeedy build",
     "dev": "rspeedy dev",
     "perfetto": "pnpm run --sequential --stream --aggregate-output '/^perfetto:.*/'",
@@ -18,6 +19,7 @@
     "perfetto:003-hello-list": "benchx_cli -o dist/003-hello-list.ptrace run dist/003-hello-list.lynx.bundle --wait-for-id=stop-benchmark-true",
     "perfetto:004-various-update": "benchx_cli -o dist/004-various-update.ptrace run dist/004-various-update.lynx.bundle --wait-for-id=stop-benchmark-true",
     "perfetto:005-load-script": "benchx_cli -o dist/005-load-script.ptrace run dist/005-load-script.lynx.bundle",
+    "perfetto:006-static-raw-text": "benchx_cli -o dist/006-static-raw-text.ptrace run dist/006-static-raw-text.lynx.bundle --wait-for-id=stop-benchmark-true",
     "test": "echo 'No tests specified'"
   },
   "dependencies": {

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

@@ -81,6 +81,7 @@ const builtinTagTransformMap = {
   'image': 'x-image',
   'list': 'x-list',
   'svg': 'x-svg',
+  'input': 'x-input',
 };
 
 // @ts-expect-error

packages/web-platform/web-core/src/apis/LynxView.ts

@@ -420,6 +420,7 @@ export class LynxView extends HTMLElement {
             'image': 'x-image',
             'list': 'x-list',
             'svg': 'x-svg',
+            'input': 'x-input',
             ...this.overrideLynxTagToHTMLTagMap,
           };
           if (!this.shadowRoot) {

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

@@ -3003,6 +3003,16 @@ test.describe('reactlynx3 tests', () => {
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('foobar-6-6');
       });
+      // input/bindinput test-case start for <input>
+      test('basic-element-input-bindinput', async ({ page }, { title }) => {
+        await goto(page, title);
+        await page.locator('input').press('Enter');
+        await wait(200);
+        await page.locator('input').fill('foobar');
+        await wait(200);
+        const result = await page.locator('.result').first().innerText();
+        expect(result).toBe('foobar-6-6');
+      });
       // input/bindinput test-case end
       test(
         'basic-element-x-input-getValue',

packages/web-platform/web-tests/tests/react/basic-element-input-bindinput/index.jsx

@@ -0,0 +1,42 @@
+// 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, useState } from '@lynx-js/react';
+
+function App() {
+  const value = 'bindinput';
+  const [result, setResult] = useState();
+
+  const onInput = ({ detail }) => {
+    if (typeof detail !== 'object') {
+      throw new Error(
+        `detail type not match. expect object, got ${typeof detail}`,
+      );
+    }
+
+    const { value, cursor, textLength, selectionStart, selectionEnd } = detail;
+
+    if (value.length !== textLength) {
+      throw new Error(
+        `input length not match. expect ${textLength}, got ${value.length}`,
+      );
+    }
+
+    setResult(`${value}-${selectionStart}-${selectionStart}`);
+  };
+
+  return (
+    <view>
+      <input
+        bindinput={onInput}
+        value={value}
+        style='border: 1px solid;width: 300px;height:40px'
+      />
+      <view class='result'>
+        <text>{result}</text>
+      </view>
+    </view>
+  );
+}
+
+root.render(<App></App>);

packages/webpack/template-webpack-plugin/src/LynxTemplatePlugin.ts

@@ -469,57 +469,55 @@ class LynxTemplatePluginImpl {
 
     this.hash = createHash(compiler.options.output.hashFunction ?? 'xxhash64');
 
-    compiler.hooks.initialize.tap(this.name, () => {
-      // entryName to fileName conversion function
-      const userOptionFilename = this.#options.filename;
-
-      const filenameFunction = typeof userOptionFilename === 'function'
-        ? userOptionFilename
-        // Replace '[name]' with entry name
-        : (entryName: string) =>
-          userOptionFilename.replace(/\[name\]/g, entryName);
-
-      /** output filenames for the given entry names */
-      const entryNames = Object.keys(compiler.options.entry);
-      const outputFileNames = new Set(
-        (entryNames.length > 0 ? entryNames : ['main']).map((name) =>
-          filenameFunction(name)
-        ),
-      );
+    // entryName to fileName conversion function
+    const userOptionFilename = this.#options.filename;
+
+    const filenameFunction = typeof userOptionFilename === 'function'
+      ? userOptionFilename
+      // Replace '[name]' with entry name
+      : (entryName: string) =>
+        userOptionFilename.replace(/\[name\]/g, entryName);
+
+    /** output filenames for the given entry names */
+    const entryNames = Object.keys(compiler.options.entry);
+    const outputFileNames = new Set(
+      (entryNames.length > 0 ? entryNames : ['main']).map((name) =>
+        filenameFunction(name)
+      ),
+    );
 
-      outputFileNames.forEach((outputFileName) => {
-        // convert absolute filename into relative so that webpack can
-        // generate it at correct location
-        let filename = outputFileName;
-        if (path.resolve(filename) === path.normalize(filename)) {
-          filename = path.relative(
-            /** Once initialized the path is always a string */
-            compiler.options.output.path!,
-            filename,
-          );
-        }
+    outputFileNames.forEach((outputFileName) => {
+      // convert absolute filename into relative so that webpack can
+      // generate it at correct location
+      let filename = outputFileName;
+      if (path.resolve(filename) === path.normalize(filename)) {
+        filename = path.relative(
+          /** Once initialized the path is always a string */
+          compiler.options.output.path!,
+          filename,
+        );
+      }
 
-        compiler.hooks.thisCompilation.tap(this.name, (compilation) => {
-          compilation.hooks.processAssets.tapPromise(
-            {
-              name: this.name,
-              stage:
-                /**
-                 * Generate the html after minification and dev tooling is done
-                 * and source-map is generated
-                 */
-                compiler.webpack.Compilation
-                  .PROCESS_ASSETS_STAGE_OPTIMIZE_HASH,
-            },
-            () => {
-              return this.#generateTemplate(
-                compiler,
-                compilation,
-                filename,
-              );
-            },
-          );
-        });
+      compiler.hooks.thisCompilation.tap(this.name, (compilation) => {
+        compilation.hooks.processAssets.tapPromise(
+          {
+            name: this.name,
+            stage:
+              /**
+               * Generate the html after minification and dev tooling is done
+               * and source-map is generated
+               */
+              compiler.webpack.Compilation
+                .PROCESS_ASSETS_STAGE_OPTIMIZE_HASH,
+          },
+          () => {
+            return this.#generateTemplate(
+              compiler,
+              compilation,
+              filename,
+            );
+          },
+        );
       });
     });