dioxus-web-component-macro

提供一个处理宏来构建 Dioxus 网络组件。

示例

该宏替换了 Dioxus 的 #[component] 宏。

use dioxus::prelude::*;
use dioxus_web_component::{web_component, DioxusWebComponent};
use wasm_bindgen::prelude::*;

#[web_component]
fn MyWebComponent(
  attr: Option<String>,
  event: EventHandler<i64>,
) -> Element {
  rsx ! {
    div {
      // ...
    }
  }
}

#[wasm_bindgen(main)]
pub fn main() {
  // Register the web component (aka custom element)
  register_my_web_component();
}

<!-- include the script generated with wasm-pack -->
<script type="module" src="my-web-component.js"></script>

<!-- in the body -->
<my-web-component attr="plop"></my-web-component>

使用方法

标签

自定义元素标签由组件名称构建。

默认情况下，标签是名称的短横线版本。例如，MyWebComponent 变为 my-web-component。

您可以使用 tag 属性更改默认行为。

use dioxus::prelude::*;
use dioxus_web_component::{web_component, DioxusWebComponent};

#[web_component(tag = "plop-component")]
fn MyWebComponent(
  // ...
) -> Element { todo!() }

<!-- in the body -->
<plop-component></plop-component>

ℹ️ 信息：自定义元素标签名称有约束。宏会为您检查标签的有效性。请参阅 MDN - 有效的自定义元素名称

样式

您可以使用 style 属性提供网络组件样式。

use dioxus::prelude::*;
use dioxus_web_component::{web_component, InjectedStyle};

#[web_component(
  tag = "plop-greeting", 
  style = InjectedStyle::css(include_str!("./style.css"))
)]
fn Greeting(
  // ...
) -> Element {
  todo!()
}

dioxus_web_component::InjectedStyle 可以是包含在 HTML <style>...</style> 元素中的原始 CSS，或指向外部样式表的链接，或 InjectedStyle 样式的列表。

⚠️ 警告：网络组件被包装在一个带有 dioxus CSS 类的 HTML div 中。

组件参数

您的组件的每个参数都应该是一个属性、一个属性或一个事件。请注意，参数可以是属性和属性的组合。

处理宏试图通过查看其类型来检测参数的类型。如果类型以 EventHandler 开头，则它被期望是一个事件。但是，这种检测并不可靠，因此您可能需要添加一个注释来纠正此行为。

如果需要自定义行为，也需要这些注释。

属性

属性类似于 href HTML 元素。

您可以使用#[attribute]注解将参数强制转换为属性。

当属性值发生变化时，dioxus组件将被渲染。

属性的HTML值是一个String，因此您应该能够将该字符串解析为目标类型。

属性name

属性名默认是参数名的短横线命名法。您可以使用#[attribute(name = "my-custom-name")]选择另一个名称。

属性option

属性可以是可选的或不选的。宏尝试通过类型名称自动检测它。但是检测并不可靠，所以如果需要，您可以使用#[attribute(option = true)]来修复检测。

属性initial

属性需要有一个初始值。如果没有提供HTML属性或属性被删除时，将使用此值。

默认情况下，我们期望属性类型实现std::default::Default。如果不是这种情况，或者您想为属性使用其他值，您可以使用#[attribute(initial = String::from("World"))]提供您的默认表达式。

请注意，即使T没有实现自己的Default，Option<T>也会使用Default的None值。

// ...
#[property(
    try_into_js = |prop| {
        let js_value = if prop.0 {
            JsValue::TRUE
        } else {
            JsValue::FALSE
        };
        Ok::<_, Infallible>(js_value)
    },
)]
prop2: MyProp,
// ...

#[derive(Clone, PartialEq, Default)]
struct MyProp(bool);

// ...
#[property(
    try_from_js= |value| Ok::<_, Infallible>(MyProp(value.is_truthy())),
)]
prop2: MyProp,
// ...

#[derive(Clone, PartialEq, Default)]
struct MyProp(bool);