swc-plugin-jsx-attrs

此 swc 插件用于为符合条件的 jsx element 注入参数。

babel 版本 UNDERCOVERj/babel-plugins

示例

基础用法

单个组件可以注入多个属性，默认前置追加，也可以通过配置 rule: append 追加到尾部。

{
  "@fixture/my-components": {
    "Button": [{ "name": "type", "value": "primary" }],
    "Link": [{ "name": "type", "rule": "append", "value": "primary" }]
  }
}

  import { Button, Link } from "@fixture/my-components";

  export function MyPage() {
    return (
      <>
-       <Button onClick={console.log} />
+       <Button type={"primary"} onClick={console.log} />
-       <Link href="/" />
+       <Link href="/" type={"primary"} />
      </>
    );
  }

支持属性访问语法

{
  "@fixture/my-components": {
    "Dropdown.Link": [{ "name": "type", "value": "primary" }]
  }
}

  import { Dropdown, Noop } from "@fixture/my-components";
  import * as components from "@fixture/my-components";

  export function MyPage() {
    return (
      <>
        <Noop />
-       <Dropdown.Link />
+       <Dropdown.Link type={"primary"} />
        <components.Noop />
-       <components.Dropdown.Link />
+       <components.Dropdown.Link type={"primary"} />
      </>
    );
  }

支持基于 swc 内置的 id 引用分析

{
  "@fixture/my-components": {
    "Button": [{ "name": "type", "value": "primary" }],
    "Link": [{ "name": "type", "value": "primary" }]
  }
}

  import { Button } from "@fixture/another-components";
  import { Button as MyButton, Link } from "@fixture/my-components";

  export function MyPage() {
    return (
      <>
-       <Link />
+       <Link type={"primary"} />
-       <MyButton />
+       <MyButton type={"primary"} />
      </>
    );
  }

  export function createPage() {
    function Link() {
      return null;
    }

    return () => (
      <>
        <Link />
        <Button />
      </>
    );
  }