feat(web): builtinTagTransformMap add input for x-input (#1907)

<!--
  Thank you for submitting a pull request!

We appreciate the time and effort you have invested in making these
changes. Please ensure that you provide enough information to allow
others to review your pull request.

Upon submission, your pull request will be automatically assigned with
reviewers.

If you want to learn more about contributing to this project, please
visit:
https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md.
-->

<!-- The AI summary below will be auto-generated - feel free to replace
it with your own. -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

* **New Features**
* Added support for input element transformation to the x-input
component.

* **Tests**
  * Added test coverage for input element binding behavior.

* **Chores**
  * Updated patch versions for core packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

## Checklist

<!--- Check and mark with an "x" -->

- [ ] Tests updated (or not required).
- [ ] Documentation updated (or not required).
- [ ] Changeset added, and when a BREAKING CHANGE occurs, it needs to be
clearly marked (or not required).

Author: Sherry-hue

.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'`

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>);