feat(web): builtinTagTransformMap add input for x-input-ng

.changeset/light-actors-wonder.md

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

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

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

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

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

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

@@ -3024,6 +3024,19 @@
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('foobar-6-6');
       });
+      // input/bindinput test-case start for <x-input-ng>
+      test(
+        'basic-element-x-input-ng-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',
@@ -3076,7 +3089,7 @@
             inputDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
       test(
@@ -4446,7 +4459,7 @@
             textareaDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
 
@@ -4568,7 +4581,7 @@
 
           await goto(page, title);
           await wait(5000);
           expect(scrolltolower).toBeTruthy();
         },
       );
       test(
@@ -4606,7 +4619,7 @@
 
           await goto(page, title);
           await wait(5000);
           expect(scrolltolower).toBeTruthy();
         },
       );
     });

packages/web-platform/web-tests/tests/react/basic-element-x-input-ng-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>
+      <x-input-ng
+        bindinput={onInput}
+        value={value}
+        style='border: 1px solid;width: 300px;height:40px'
+      />
+      <view class='result'>
+        <text>{result}</text>
+      </view>
+    </view>
+  );
+}
+
+root.render(<App></App>);