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

.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

@@ -23,7 +23,7 @@
     ReturnType<typeof expect<Page>>['toHaveScreenshot']
   >[0],
 ) => {
   await expect(page).toHaveScreenshot([
     `${caseName}`,
     `${subcaseName}`,
     `${label}.png`,
@@ -105,7 +105,7 @@
           )
             .filter(i => i.getAttribute('lynx-tag') === 'page').length
         ),
       ).toBe(1);
     });
     test('basic-bindtap', async ({ page }, { title }) => {
       await goto(page, title);
@@ -376,7 +376,7 @@
           xDistance: 10,
           yDistance: 0,
         });
         expect(page.locator('#target1'), 'has touches').toHaveCSS(
           'background-color',
           'rgb(0, 128, 0)',
         ); // green
@@ -942,7 +942,7 @@
     test('api-get-path-info', async ({ page }, { title }) => {
       await goto(page, title);
       await wait(500);
       expect(await page.locator('#result').getAttribute('style')).toContain(
         'green',
       );
     });
@@ -1040,7 +1040,7 @@
         // @ts-expect-error
         return Object.keys(globalThis.timing);
       });
       expect(timingKeys).toContain('create_lynx_start');
       expect(timingKeys).toContain('dispatch_start');
       expect(timingKeys).toContain('layout_start');
       expect(timingKeys).toContain('layout_end');
@@ -1230,7 +1230,7 @@
       });
       await goto(page, 'api-error');
       await wait(500);
       expect(offset).toBe(true);
     });
     test('api-error-mts', async ({ page }, { title }) => {
       test.skip(isSSR, 'No need to test this on SSR');
@@ -1253,7 +1253,7 @@
       });
       await goto(page, 'api-error');
       await wait(500);
       expect(fileName).toBe(true);
     });
     test('api-error-bts', async ({ page }, { title }) => {
       let fileName = false;
@@ -1276,7 +1276,7 @@
       });
       await goto(page, 'api-error');
       await wait(500);
       expect(fileName).toBe(true);
     });
     test('api-set-release', async ({ page }, { title }) => {
       test.skip(isSSR, 'No need to test this on SSR');
@@ -1373,7 +1373,7 @@
       await goto(page, 'api-setSharedData', 'api-getSharedData');
       await wait(100);
       await page.locator('#lynxview2').locator('#target').click();
       await expect(page.locator('#lynxview2').locator('#target')).toHaveCSS(
         'background-color',
         'rgb(0, 128, 0)',
       ); // green
@@ -1398,7 +1398,7 @@
         document.body.querySelector('lynx-view')?.remove()
       );
       await wait(100);
       expect(page.workers().length).toBeLessThanOrEqual(0);
     });
 
     test.describe('api-exposure', () => {
@@ -1754,8 +1754,8 @@
         });
         await goto(page, title);
         await wait(200);
         !isSSR && expect(mts).toBe(true);
         expect(bts).toBe(true);
       },
     );
     test(
@@ -1773,7 +1773,7 @@
         });
         await goto(page, title);
         await wait(200);
         !isSSR && expect(mts).toBe(true);
         expect(bts).toBe(true);
       },
     );
@@ -1988,7 +1988,7 @@
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await wait(100);
       await expect(await target.getAttribute('style')).toContain('pink');
     });
 
     test(
@@ -3003,6 +3003,16 @@
         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',
@@ -4425,7 +4435,7 @@
             textareaDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
 

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