webcomponent

Web components 是一种 W3C 标准，用于编写自己的 HTML 元素。 webcomponent 是一个 Rust 库，可以轻松地在 Rust 中使用 js_ffi 编写自己的网页组件。

功能

• Shadow DOM
• 可观察属性
• 辅助函数
• #![no_std] 和 alloc

你好，世界！

[lib]
crate-type =["cdylib"] # configures rust project to build a web assembly module

[dependencies]
webcomponent="0.5" # for registering our web component

use webcomponent::*;

struct HelloWorld {
    element: HTMLElement
}

impl CustomElement for HelloWorld {
    fn new(element:HTMLElement) -> Self {
        HelloWorld(element)
    }
    fn connected(&mut self){
        set_html(&self.element,"Hello World!");
    }
}

#[no_mangle]
fn main() {
    HelloWorld::register("hello-world");
}

<!-- a polyfill for web components on some browsers -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<!-- for running your js_ffi library -->
<script src="https://cdn.jsdelivr.net/gh/richardanaya/js_ffi@latest/js_ffi.js"></script>
<!-- get things started -->
<script>js_ffi.run("helloworld.wasm");</script>
<!-- now you can put your hello-world element anywhere! -->
<hello-world></hello-world>

# cli commands for building web assembly I find useful
build:
	@RUSTFLAGS='-C link-arg=-s' cargo build --target wasm32-unknown-unknown --release
	@cp target/wasm32-unknown-unknown/release/helloworld.wasm .
lint:
	@cargo fmt
serve:
	python3 -m http.server 8080

查看演示 这里

Shadow DOM

struct HelloWorld {
    element:HTMLElement
}

impl CustomElement for HelloWorld {
    fn new(element: HTMLElement) -> Self {
        HelloWorld(element)
    }
    fn connected(&mut self) {
        let shadow_dom = attach_shadow(&self.element, true);
        set_html(&shadow_dom, r#"<div>Hello <slot name="fname"></slot>!</div>"#);
        set_html(&self.element, r#"<span slot="fname">Richard</span>"#);
    }
}

查看演示 这里

可观察属性

struct HelloPerson {
    element: HTMLElement
}

impl CustomElement for HelloPerson {
    fn new(element: HTMLElement) -> Self {
        HelloPerson(element)
    }

    fn observed_attributes() -> Vec<&'static str> {
        vec!["first_name"]
    }

    fn connected(&mut self) {
        self.render();
    }

    fn attribute_changed(&mut self, _name: String, _old_value: Option<String>, _new_value: Option<String>) {
        self.render();
    }
}

impl HelloPerson {
    fn render(&mut self){
        let first_name = get_attribute(&self.element, "first_name").unwrap_or("human".to_string());
        let msg = "Hello ".to_string() + &first_name;
        set_html(&self.element, &msg);
    }
}

查看演示 这里

JavaScript 的其余部分怎么办？

使用 webcomponent，您拥有一个 HTML 元素的句柄，这仅是您组件在 DOM 中存在的引用。通过它，我们可以使用 js_ffi（或任何基于 js_ffi 的库）来做我们想做的任何事情。

use webcomponent::*;
use js_ffi::*;

struct LoudButton {
    element: HTMLElement
}

impl CustomElement for LoudButton {
    fn new(element:HTMLElement) -> Self {
        LoudButton(element)
    }
    fn connected(&mut self){
        set_html(&self.element,r#"<button>Shout!</button>"#);
	js!(Node.prototype.addEventListener).call_2(
	  &self.element,
	  "click",
	  create_callback_0(|| {
	    js!(window.alert).invoke_1("I was clicked!");
	  }),
    	);
    }
}

许可证

此项目受以下任一项许可证的许可

• Apache 许可证 2.0 版，(LICENSE-APACHE 或 https://apache.ac.cn/licenses/LICENSE-2.0)
• MIT 许可证 (LICENSE-MIT 或 http://opensource.org/licenses/MIT)

任选其一。

贡献

除非您明确声明，否则根据 Apache-2.0 许可证定义，您提交给 webcomponent 的任何有意贡献，都将按上述方式双许可，不附加任何额外条款或条件。