Mitosis项目发布：Angular与Stencil组件属性传递优化方案

Mitosis是一个创新的前端框架，它允许开发者编写一次组件代码，然后编译输出到多个框架（如React、Vue、Angular等）。这个工具特别适合需要在不同技术栈中共享组件逻辑的场景，大大提高了代码复用率和开发效率。

属性传递问题的背景

在Angular和Stencil（无DOM隔离模式）框架中，开发者经常会遇到一个令人困扰的问题：当我们在组件上设置诸如class、data-*或aria-*等属性时，这些属性会被渲染到父组件元素上，而不是预期的子元素上。这不仅影响了样式和功能的实现，也违背了开发者的预期行为。

问题示例

假设我们有一个Angular组件：

<my-component class="cool" data-nice="true" aria-label="wow"></my-component>

在DOM中的实际渲染结果却是：

<my-component class="cool" data-nice="true" aria-label="wow">
  <button class="my-component">My Component</button>
</my-component>

而我们期望的效果是这些属性应该传递到内部的button元素上：

<my-component>
  <button class="my-component cool" data-nice="true" aria-label="wow">
    My Component
  </button>
</my-component>

Mitosis的解决方案

Mitosis在最新版本中引入了attributePassing功能，提供了两种方式来启用属性传递机制：

1. 通过组件元数据配置

在组件文件中，我们可以使用useMetadata钩子来启用属性传递：

useMetadata({
  attributePassing: {
    enabled: true,
    // customRef: "_myRef" // 可选的自定义引用名称
  },
});

2. 通过构建配置文件

在项目的mitosis.config.cjs配置文件中，我们可以全局启用这一功能：

module.exports = {
  attributePassing: {
    enabled: true,
    // customRef: "_myRef" // 可选的自定义引用名称
  },
};

技术实现细节

当启用attributePassing功能时，Mitosis会在根元素上自动添加一个名为_root的引用（ref）。这个引用用于与DOM元素交互，实现属性的正确传递。如果开发者已经在根元素上使用了自定义的引用，可以通过customRef选项指定引用名称，避免冲突。

使用建议

1. 渐进式采用：可以先在单个组件中测试这一功能，确认无误后再全局启用。

2. 自定义引用：如果组件逻辑中已经使用了根元素的引用，务必设置customRef选项以避免引用冲突。

3. 样式隔离：注意启用属性传递后，外部传入的class会与组件内部样式合并，需要做好样式隔离和命名规范。

4. 测试覆盖：特别是对于动态属性传递的场景，建议增加相应的测试用例。

总结

Mitosis的这一更新解决了Angular和Stencil框架中长期存在的属性传递问题，使开发者能够更精确地控制属性的渲染位置。通过灵活的配置选项，这一功能可以适应各种复杂的应用场景，同时保持与现有代码的兼容性。对于需要在多个框架中共享组件的项目来说，这无疑是一个重要的改进。