feat: Support frame element on web

.changeset/frame-web-core.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-core": patch
+---
+
+Add web support for the `<frame>` element by mapping it to `<lynx-view>`.

packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts

@@ -261,6 +261,71 @@ test.describe('reactlynx3 tests', () => {
       await expect(height).toHaveText('5678');
     });
 
+    test('api-frame-element-map', async ({ page }, { title }) => {
+      await goto(page, title);
+      await expect(page.locator('#target')).toHaveJSProperty(
+        'tagName',
+        'LYNX-VIEW',
+      );
+    });
+
+    test('api-frame-src', async ({ page }, { title }) => {
+      await goto(page, title);
+      await expect(page.locator('#frame-ready')).toHaveText('frame:ready');
+    });
+
+    test('api-frame-data', async ({ page }, { title }) => {
+      await goto(page, title);
+      await expect(page.locator('#frame-data')).toHaveText('data:from-data');
+    });
+
+    test('api-frame-data-update', async ({ page }, { title }) => {
+      await goto(page, title);
+      await expect(page.locator('#frame-data')).toHaveText('data:before');
+      await page.locator('#update-frame-data').click();
+      await expect(page.locator('#frame-data')).toHaveText('data:after');
+    });
+
+    test('api-frame-global-props', async ({ page }, { title }) => {
+      await goto(page, title);
+      await expect(page.locator('#frame-global-props')).toHaveText(
+        'global:from-global-props',
+      );
+    });
+
+    test('api-frame-bindload', async ({ page }, { title }) => {
+      await goto(page, title);
+      await expect(page.locator('#frame-load-status')).toHaveText('0');
+      await expect(page.locator('#frame-load-message')).toHaveText('success');
+      await expect(page.locator('#frame-load-url')).toContainText(
+        '/dist/api-frame-inner.web.bundle',
+      );
+    });
+
+    test('api-frame-auto-height', async ({ page }, { title }) => {
+      await goto(page, title);
+      await expect(page.locator('#target')).toHaveAttribute(
+        'auto-height',
+        'true',
+      );
+      await expect(page.locator('#target')).not.toHaveAttribute(
+        'height',
+        'auto',
+      );
+    });
+
+    test('api-frame-auto-width', async ({ page }, { title }) => {
+      await goto(page, title);
+      await expect(page.locator('#target')).toHaveAttribute(
+        'auto-width',
+        'true',
+      );
+      await expect(page.locator('#target')).not.toHaveAttribute(
+        'width',
+        'auto',
+      );
+    });
+
     test('basic-bindtap-simultaneous', async ({ page }, { title }) => {
       await goto(page, title);
       await wait(100);

packages/web-platform/web-core-e2e/tests/reactlynx/api-frame-auto-height/index.jsx

@@ -0,0 +1,19 @@
+// Copyright 2026 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';
+
+function App() {
+  return (
+    <view>
+      <frame
+        id='target'
+        auto-height={true}
+        src='/dist/api-frame-inner.web.bundle'
+        style={{ width: '300px' }}
+      />
+    </view>
+  );
+}
+
+root.render(<App />);

packages/web-platform/web-core-e2e/tests/reactlynx/api-frame-auto-width/index.jsx

@@ -0,0 +1,19 @@
+// Copyright 2026 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';
+
+function App() {
+  return (
+    <view>
+      <frame
+        id='target'
+        auto-width={true}
+        src='/dist/api-frame-inner.web.bundle'
+        style={{ height: '120px' }}
+      />
+    </view>
+  );
+}
+
+root.render(<App />);

packages/web-platform/web-core-e2e/tests/reactlynx/api-frame-bindload/index.jsx

@@ -0,0 +1,27 @@
+// Copyright 2026 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 [detail, setDetail] = useState({
+    statusCode: -1,
+    statusMessage: '',
+    url: '',
+  });
+
+  return (
+    <view>
+      <frame
+        src='/dist/api-frame-inner.web.bundle'
+        bindload={event => setDetail(event.detail)}
+        style={{ width: '300px', height: '120px' }}
+      />
+      <text id='frame-load-status'>{detail.statusCode}</text>
+      <text id='frame-load-message'>{detail.statusMessage}</text>
+      <text id='frame-load-url'>{detail.url}</text>
+    </view>
+  );
+}
+
+root.render(<App />);

packages/web-platform/web-core-e2e/tests/reactlynx/api-frame-data-update/index.jsx

@@ -0,0 +1,23 @@
+// Copyright 2026 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 [label, setLabel] = useState('before');
+
+  return (
+    <view>
+      <frame
+        src='/dist/api-frame-inner.web.bundle'
+        data={{ label }}
+        style={{ width: '300px', height: '120px' }}
+      />
+      <view id='update-frame-data' bindtap={() => setLabel('after')}>
+        <text>update</text>
+      </view>
+    </view>
+  );
+}
+
+root.render(<App />);

packages/web-platform/web-core-e2e/tests/reactlynx/api-frame-data/index.jsx

@@ -0,0 +1,18 @@
+// Copyright 2026 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';
+
+function App() {
+  return (
+    <view>
+      <frame
+        src='/dist/api-frame-inner.web.bundle'
+        data={{ label: 'from-data' }}
+        style={{ width: '300px', height: '120px' }}
+      />
+    </view>
+  );
+}
+
+root.render(<App />);

packages/web-platform/web-core-e2e/tests/reactlynx/api-frame-element-map/index.jsx

@@ -0,0 +1,18 @@
+// Copyright 2026 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';
+
+function App() {
+  return (
+    <view>
+      <frame
+        id='target'
+        src='/dist/api-frame-inner.web.bundle'
+        style={{ width: '300px', height: '120px' }}
+      />
+    </view>
+  );
+}
+
+root.render(<App />);

packages/web-platform/web-core-e2e/tests/reactlynx/api-frame-global-props/index.jsx

@@ -0,0 +1,18 @@
+// Copyright 2026 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';
+
+function App() {
+  return (
+    <view>
+      <frame
+        src='/dist/api-frame-inner.web.bundle'
+        global-props={{ message: 'from-global-props' }}
+        style={{ width: '300px', height: '120px' }}
+      />
+    </view>
+  );
+}
+
+root.render(<App />);

packages/web-platform/web-core-e2e/tests/reactlynx/api-frame-inner/index.jsx

@@ -0,0 +1,19 @@
+// Copyright 2026 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, useInitData } from '@lynx-js/react';
+
+function App() {
+  const initData = useInitData();
+  const globalProps = lynx.__globalProps;
+
+  return (
+    <view>
+      <text id='frame-ready'>frame:ready</text>
+      <text id='frame-data'>data:{initData.label}</text>
+      <text id='frame-global-props'>global:{globalProps.message}</text>
+    </view>
+  );
+}
+
+root.render(<App />);

packages/web-platform/web-core-e2e/tests/reactlynx/api-frame-src/index.jsx

@@ -0,0 +1,18 @@
+// Copyright 2026 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';
+
+function App() {
+  return (
+    <view>
+      <frame
+        id='target'
+        src='/dist/api-frame-inner.web.bundle'
+        style={{ width: '300px', height: '120px' }}
+      />
+    </view>
+  );
+}
+
+root.render(<App />);

packages/web-platform/web-core/src/constants.rs

@@ -32,6 +32,7 @@ lazy_static::lazy_static! {
     ("list", "x-list"),
     ("page", "div"),
     ("svg", "x-svg"),
+    ("frame", "lynx-view"),
   ]);
 
   pub static ref HTML_TAG_TO_LYNX_TAG_MAP: FnvHashMap<&'static str, &'static str> = FnvHashMap::from_iter(LYNX_TAG_TO_HTML_TAG_MAP

packages/web-platform/web-core/src/template/template_sections/style_info/style_info_decoder.rs

@@ -703,6 +703,44 @@ mod test {
     assert_eq!(result.style_content, expected);
   }
 
+  #[test]
+  fn test_frame_type_selector() {
+    let raw_style_info = RawStyleInfo {
+      css_id_to_style_sheet: FnvHashMap::from_iter(vec![(
+        0,
+        StyleSheet {
+          imports: vec![],
+          rules: vec![Rule {
+            nested_rules: vec![],
+            rule_type: RuleType::Declaration,
+            prelude: RulePrelude {
+              selector_list: vec![Selector {
+                simple_selectors: vec![OneSimpleSelector {
+                  selector_type: OneSimpleSelectorType::TypeSelector,
+                  value: "frame".to_string(),
+                }],
+              }],
+            },
+            declaration_block: DeclarationBlock {
+              declarations: vec![ParsedDeclaration {
+                property_id: CSSPropertyEnum::Height.into(),
+                is_important: false,
+                value_token_list: vec![ValueToken {
+                  token_type: crate::css_tokenizer::token_types::DIMENSION_TOKEN,
+                  value: "200px".to_string(),
+                }],
+              }],
+            },
+          }],
+        },
+      )]),
+      style_content_str_size_hint: 0,
+    };
+    let result = generate_string_buf(raw_style_info, true, None);
+    let expected = "lynx-view:not([l-e-name]){height:200px;}";
+    assert_eq!(result.style_content, expected);
+  }
+
   #[test]
   fn test_multiple_selectors() {
     let raw_style_info = RawStyleInfo {