use js_sys::Function; use wasm_bindgen::{convert::IntoWasmAbi, JsValue}; use web_sys::{window, Element, Event, HtmlElement, Window}; /// This attribute proc-macro will generate the following trait implementations /// * [WebComponentDef](trait@WebComponentDef) /// * [WebComponent](trait@WebComponent) /// /// It will also generate a wasm_bindgen compatible impl block for your struct. /// /// It expects you to implement the [WebComponentBinding](trait@WebComponentBinding) /// trait in order to implement the callbacks. /// /// It supports three optional attributes `name = value` parameters. /// * `class_name = "ClassName"` - The class name to use for the javascript shim. If not provided uses the structs name instead. /// * `element_name = "class-name"` - A valid custom element name to use for the element. if not proviced derives it from the class name. /// * `observed_attrs = "['attr1', attr2']"` - A javascript array with a list of observed attributes for this compoment. Defaults to "[]". /// /// Reference [MDN Web Components Guide](https://developer.mozilla.org/en-US/docs/Web/Web_Components) pub use wasm_web_component_macros::web_component; /// Helper trait for Rust Web Components. This is autogenerated /// by the [`#[web_component]`](web_component) attribute. pub trait WebComponentDef: IntoWasmAbi + Default { fn new() -> Self { Self::default() } fn create() -> Element { Self::create_in_window(window().unwrap()) } fn create_in_window(window: Window) -> Element { window .document() .unwrap() .create_element(Self::element_name()) .unwrap() } fn element_name() -> &'static str; fn class_name() -> &'static str; } /// Trait defining the lifecycle callbacks for a Custom Element. /// Each method is optional. You only need to implement the ones /// you want to specify behavior for. pub trait WebComponentBinding: WebComponentDef { /// Called when the web component is connected to the DOM. /// This is when you should do any setup like attaching a ShadowDom /// or appending elements. fn connected(&self, _element: &HtmlElement) { // noop } /// Called when the web component is disconnected from the DOM. fn disconnected(&self, _element: &HtmlElement) { // noop } /// Called When the web component is moved to a new document. fn adopted(&self, _element: &HtmlElement) { // noop } /// Called when one of the observed attributes has changed. /// the observedc attributes are listed in the observed_attrs argument to the /// `#[web_component(observed_attrs = "['attr1', 'attr2']")` attribute. fn attribute_changed( &self, _element: &HtmlElement, _name: JsValue, _old_value: JsValue, _new_value: JsValue, ) { // noop } /// Top level event handler for this custome element. fn handle_event(&self, _element: &HtmlElement, _event: &Event) { // noop } } /// Marker trait used in the generated shims to assert that their are Rust implemtntations /// of the callback functions for the component. pub trait WebComponent: WebComponentBinding {} /// A handle for your WebComponent Definition. Offers easy access to construct your /// element. pub struct WebComponentHandle { /// A javascript function that can construct your element. pub element_constructor: Function, } #[cfg(test)] mod tests { use super::*; use wasm_bindgen::prelude::wasm_bindgen; use wasm_bindgen::{JsCast, JsValue}; use wasm_bindgen_test::wasm_bindgen_test; use web_sys::Text; use web_sys::{console, window, HtmlElement}; use wasm_web_component_macros::web_component; wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser); #[wasm_bindgen] extern "C" { #[wasm_bindgen(js_namespace = console, js_name = log)] pub fn log(message: String); #[wasm_bindgen(js_namespace = console, js_name = log)] pub fn log_with_val(message: String, val: &JsValue); } pub struct Timer<'a> { name: &'a str, } impl<'a> Timer<'a> { pub fn new(name: &'a str) -> Timer<'a> { console::time_with_label(name); Timer { name } } } impl<'a> Drop for Timer<'a> { fn drop(&mut self) { console::time_end_with_label(self.name); } } #[wasm_bindgen_test] pub fn bench_mark_elements() { #[web_component(observed_attrs = "['class']")] pub struct BenchElement {} impl WebComponentBinding for BenchElement { fn connected(&self, element: &HtmlElement) { let node = Text::new().unwrap(); node.set_text_content(Some("Added a text node on connect".into())); element.append_child(&node).unwrap(); } fn disconnected(&self, element: &HtmlElement) { let node = element.first_child().unwrap(); element.remove_child(&node).unwrap(); } fn adopted(&self, element: &HtmlElement) { let node = Text::new().unwrap(); node.set_text_content(Some("Added a text node on adopt".into())); element.append_child(&node).unwrap(); } fn attribute_changed( &self, element: &HtmlElement, name: JsValue, old_value: JsValue, new_value: JsValue, ) { let node = element.first_child().unwrap(); node.set_text_content(Some(&format!( "Setting {} from {} to {}", name.as_string().unwrap_or("None".to_owned()), old_value.as_string().unwrap_or("None".to_owned()), new_value.as_string().unwrap_or("None".to_owned()), ))); element.append_child(&node).unwrap(); } } Timer::new("custom-element::timing"); let _ = BenchElement::define(); let body = window().unwrap().document().unwrap().body().unwrap(); for _ in 1..100000 { let el = BenchElement::create(); body.append_child(&el).unwrap(); el.set_attribute("class", "foo").unwrap(); body.remove_child(&el).unwrap(); } } // NOTE(jwall): We can only construct the web component once and since the lifetime of the component internals is tied // to the handle we run this all in one single function. #[wasm_bindgen_test] fn test_component() { #[web_component( class_name = "MyElement", element_name = "my-element", observed_attrs = "['class']" )] pub struct MyElementImpl {} impl WebComponentBinding for MyElementImpl { fn connected(&self, element: &HtmlElement) { let node = Text::new().unwrap(); node.set_text_content(Some("Added a text node on connect".into())); element.append_child(&node).unwrap(); } fn disconnected(&self, element: &HtmlElement) { let node = element.first_child().unwrap(); element.remove_child(&node).unwrap(); } fn adopted(&self, element: &HtmlElement) { let node = Text::new().unwrap(); node.set_text_content(Some("Added a text node on adopt".into())); element.append_child(&node).unwrap(); } fn attribute_changed( &self, element: &HtmlElement, name: JsValue, old_value: JsValue, new_value: JsValue, ) { let node = element.first_child().unwrap(); node.set_text_content(Some(&format!( "Setting {} from {} to {}", name.as_string().unwrap_or("None".to_owned()), old_value.as_string().unwrap_or("None".to_owned()), new_value.as_string().unwrap_or("None".to_owned()), ))); element.append_child(&node).unwrap(); } } let obj = MyElementImpl::define().expect("Failed to define web component"); let fun = obj.element_constructor.dyn_ref::().unwrap(); assert_eq!(fun.name(), MyElementImpl::class_name()); let element = MyElementImpl::create(); assert_eq!( element.tag_name().to_uppercase(), MyElementImpl::element_name().to_uppercase() ); let document = window().unwrap().document().unwrap(); let body = document.body().unwrap(); // Test the connected callback body.append_child(&element).unwrap(); assert_eq!( element.text_content().unwrap(), "Added a text node on connect" ); // Test the disconnected callback body.remove_child(&element).unwrap(); assert_eq!(element.text_content().unwrap(), ""); body.append_child(&element).unwrap(); element.set_attribute("class", "foo").unwrap(); assert_eq!( element.text_content().unwrap(), "Setting class from None to foo" ); // NOTE(jwall): If we are running headless then this can fail sometimes. // We don't fail the test when that happens. if let Ok(Some(new_window)) = window().unwrap().open() { // Test the adopted callback // First we need a new window with a new document to perform the adoption with. new_window.document().unwrap().adopt_node(&element).unwrap(); assert_eq!( element.text_content().unwrap(), "Added a text node on adopt" ); } // Then we can have the new document adopt this node. } #[wasm_bindgen_test] fn test_component_no_element_name() { #[web_component(class_name = "AnElement")] pub struct AnElement {} impl WebComponentBinding for AnElement {} assert_eq!(AnElement::element_name(), "an-element"); } #[wasm_bindgen_test] fn test_component_no_class_name() { #[web_component] pub struct AnotherElement {} impl WebComponentBinding for AnotherElement {} assert_eq!(AnotherElement::class_name(), "AnotherElement"); assert_eq!(AnotherElement::element_name(), "another-element"); } #[wasm_bindgen_test] fn test_component_no_class_name_with_element_name() { #[web_component(element_name = "this-old-element")] pub struct ThisElement {} impl WebComponentBinding for ThisElement {} assert_eq!(ThisElement::class_name(), "ThisElement"); assert_eq!(ThisElement::element_name(), "this-old-element"); } }