Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【功能】能否自定义默认 Web 的组件,例如 image/video/input 等 #1397

Open
XGHeaven opened this issue May 12, 2022 · 2 comments
Assignees
Labels
enhancement New feature or request

Comments

@XGHeaven
Copy link
Contributor

使用场景 | Use case

Web 这套环境是比较好的,但是希望能够自定义 Web 中的组件展示形态,例如创建一套完整的小程序组件而非 Web 标准组件。

目前看了下,只能添加自定义元素,但是无法覆盖默认元素。

提案 | Proposal

期望可以给个参数,在创建 Kraben 实例的时候选择默认启用的组件列表。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    Kraken kraken = Kraken(
      bundle: KrakenBundle.fromUrl('http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-styles.js'),
      elements: ['div', 'span'] // 启用的列表
    );

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: kraken
    );
  }
}

对 Kraben 还不算很了解,临时找了个地方放这个参数,其他的方式也都可以接受。

@XGHeaven XGHeaven added the enhancement New feature or request label May 12, 2022
@wssgcg1213
Copy link
Member

实际上内置的 Element 也是在启动阶段注册的,这个过程发生在 kraken 内部;

小程序组件的标准与 Web 组件的标准存在差异,如果你是希望扩展 Kraken 的话可以使用注册自定义的形式,覆盖反而会带来一些与标准 tag 差异的部分,需要前端抹平;如果你是希望基于 Kraken 来实现一套小程序的渲染层,在前端做一层框架就可以解决这个问题了,类似 web-components 或者 react/vue component,对原生小程序组件做映射就可以,毕竟实现小程序上层还是需要有一层运行时

@wssgcg1213 wssgcg1213 self-assigned this May 17, 2022
@XGHeaven
Copy link
Contributor Author

@wssgcg1213 如果有 WebComponent 的支持的话那自然是可以,但是目前不是还没有么。

另外不止是在小程序场景,例如在某些宿主下,希望能够自定义 input 的行为和显示,可以添加一些自定义的私有属性等等。而不是使用 Kraben 定义的。

其次我觉得 Kraben 可以抽离一个独立的渲染层,这一部分只负责渲染不和 QuickJS 的绑定,适用性会更高一些

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants