5 个版本

1.0.0-alpha.8	2022年3月2日
1.0.0-alpha.7	2022年3月1日
1.0.0-alpha.6	2022年2月28日
1.0.0-alpha.5	2022年2月27日
1.0.0-alpha.2	2022年1月28日

1497 在网页编程

MIT 许可证

15KB
156 行

frender

功能渲染： React 在 Rust

frender 仍处于 alpha 版本，其 API 可能会更改。目前建议在 Cargo.toml 中指定确切版本。在更新之前，请查看完整的变更日志，以防出现重大更改。

一些示例应用程序位于 examples 文件夹中。您可以在此网站预览它们。

快速入门

创建新的 cargo 项目

cargo new my-frender-app
cd my-frender-app

在 Cargo.toml 中将 frender 添加到依赖项。
```
[dependencies]
frender = "= 1.0.0-alpha.8"
```

在项目根目录中创建 index.html。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My frender App</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <link data-trunk rel="rust" href="Cargo.toml" />
  </head>
  <body>
    <div id="frender-root"></div>
  </body>
</html>

修改 src/main.rs

use frender::prelude::*;

#[component(main(mount_element_id = "frender-root"))]
fn Main() {
    rsx!(
        <div>
            "Hello, frender!"
        </div>
    )
}

使用 trunk 运行

安装 trunk 然后执行
```
trunk serve
```
然后您可以通过访问 https://127.0.0.1:8080 来查看您的 frender 应用程序。

`rsx` 语法

`rsx` 元素

use frender::prelude::*;

rsx! (
  <MyComp id="my-component">
    // Child node can be any literal strings or numbers
    "some string"
    1
    // Child node can be any rust expressions wrapped in braces
    { 1 + 6 }
    { value }
    // Child node can be an element
    <MyChild key="k" prop={any_expr} />

    // Prop without value means `true`, just like React
    <MyDialog show />

    // Fragment
    <>1 2 3</>
    // Fragment with key
    <# key="key">1 2 3</#>

    // you can also use `</_>` to enclose any element
    <path::to::Component></_>
    // the above is equivalent to:
    <path::to::Component></path::to::Component>
  </MyComp>
)

以小写字母开头的任何组件名称都将被解释为 内建组件。例如，rsx!( <div id="my-div" /> ) 将被解析为

use frender::prelude::*;
use self::intrinsic_components::div::prelude::*;

rsx! (
  <self::intrinsic_components::div::prelude::Component id="my-div" />
)

`rsx` 属性

为了使 rsx 更加简洁，frender 提供了 IntoPropValue 特性。在 <MyComponent prop={value} /> 中的 value 将映射到 IntoPropValue::into_prop_value(value)。

假设属性接受 Option<i32>，你可以将 prop={Some(1)} 简化为 prop={1}，因为 T 实现了 IntoPropValue<Option<T>>。

如果你想直接传递值，可以使用 := 来设置属性。 prop:={value}

编写组件

无属性的组件

use frender::prelude::*;

#[component]
fn MyComponent() {
  //            ^
  //            the return type defaults to react::Element
  rsx!( <div /> )
}

// Or you can specify the return type explicitly
#[component]
fn MyAnotherComponent() -> Option<react::Element> {
  if check_something() {
    Some(rsx!( <MyComponent /> ))
  } else {
    None
  }
}

有属性的组件

首先定义 MyProps

use frender::prelude::*;

def_props! {
  pub struct MyProps {
    // Required prop
    name: String,

    // Optional prop which defaults to `Default::default()`
    // The following property `age` is optional, and defaults to `None`
    age?: Option<u8>,

    // The following property `tags` is optional, and defaults to `Vec::default()`
    tags?: Vec<String>,

    // If the prop type is not specified,
    // then frender will infer the type by prop name.
    // For example, `class_name` default has type `Option<String>`
    // The following property `class_name` is optional, has type Option<String>
    class_name?,

    // The following property `id` is required, has type Option<String>
    id,

    // Prop can also have type generics.
    // For example, the following is
    // the default definition for prop `children`,
    // which means it accepts any `Option<TNode>` where TNode implements react::Node,
    // and then map the value into `Option<react::Children>` and store it into MyProps.
    children<TNode: react::Node>(value: Option<TNode>) -> Option<react::Children> {
      value.and_then(react::Node::into_children)
    },
  }
}

然后使用上述属性编写组件

use frender::prelude::*;
#[component]
pub fn MyComponent(props: &MyProps) {
  rsx!(<div>{&props.children}</div>)
}

由于泛型，在非常罕见的情况下，你可能遇到诸如 type annotations needed cannot infer type for type parameter 的错误。你可以通过使用涡轮鱼语法 ::<> 来指定类型。例如

rsx! (
  // ERROR: type annotations needed
  <a children={None} />
)
rsx! (
  // it works!
  <a children={None::<()>} />
)

钩子

frender 也支持 React 钩子。

你可以查看示例来了解使用方法。

未来开发计划

文档
内联 SVG 组件
将 frender 组件导出到 js
服务器端渲染
CssProperties 的类型检查
Css-in-rust（例如，与 emotion/react 集成）

贡献

frender 在 GitHub 上开源。欢迎提交 pull request 和 issues。

你也可以赞助我，我会非常感激 ❤️

依赖

~10–13MB
~248K SLoC