wasm-web-components/wasm-web-component/src/lib.rs

use js_sys::Function;
use wasm_bindgen::{convert::IntoWasmAbi, prelude::Closure, JsValue};
use web_sys::{window, Element, HtmlElement};

/// 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 attribute `name = value` parameters.
/// * `class_name = "ClassName"` - Required. The class name to use for the javascript shim.
/// * `element_name = "class-name"` - Optional. A valid custom element name to use for the element.
/// * `observed_attrs = "['attr1', attr2']"` - Optional. A javascript array with a list of observed attributes for this compoment.
///
/// 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]`](wasm_web_component_macros::web_component) attribute.
pub trait WebComponentDef: IntoWasmAbi + Default {
    fn new() -> Self {
        Self::default()
    }

    fn create() -> Element {
        window()
            .unwrap()
            .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 {
    fn connected(&self, _element: &HtmlElement) {
        // noop
    }

    fn disconnected(&self, _element: &HtmlElement) {
        // noop
    }

    fn adopted(&self, _element: &HtmlElement) {
        // noop
    }

    fn attribute_changed(
        &self,
        _element: &HtmlElement,
        _name: JsValue,
        _old_value: JsValue,
        _new_value: JsValue,
    ) {
        // 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. It is important that this
/// handle is live for as long as your Web-Component might be used.
pub struct WebComponentHandle<T> {
    /// The handle for the closure that is used to construct your Rust instance
    /// in the Javascript shim constructor. If this is dropped then your web component
    /// will not be able to be constructed properly.
    pub impl_handle: Closure<dyn FnMut() -> T>,
    /// 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::{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);
    }

    // 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) {
                log("Firing connected call back".to_owned());
                let node = Text::new().unwrap();
                node.set_text_content(Some("Added a text node on connect".into()));
                element.append_child(&node).unwrap();
                log(format!(
                    "element contents: {}",
                    &element.text_content().unwrap()
                ));
            }

            fn disconnected(&self, element: &HtmlElement) {
                log("Firing discconnected call back".to_owned());
                let node = element.first_child().unwrap();
                element.remove_child(&node).unwrap();
            }

            fn adopted(&self, element: &HtmlElement) {
                log("Firing adopted call back".to_owned());
                let node = Text::new().unwrap();
                node.set_text_content(Some("Added a text node on adopt".into()));
                element.append_child(&node).unwrap();
                log_with_val("element: ".to_owned(), element);
            }

            fn attribute_changed(
                &self,
                element: &HtmlElement,
                name: JsValue,
                old_value: JsValue,
                new_value: JsValue,
            ) {
                log("Firing attribute changed callback".to_owned());
                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();
                log_with_val("element: ".to_owned(), element);
            }
        }
        let obj = MyElementImpl::define().expect("Failed to define web component");
        let fun = obj.element_constructor.dyn_ref::<Function>().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"
        );

        // Test the adopted callback
        // First we need a new window with a new document to perform the adoption with.
        let new_window = window().unwrap().open().unwrap().unwrap();
        // Then we can have the new document adopt this node.
        new_window.document().unwrap().adopt_node(&element).unwrap();
        assert_eq!(
            element.text_content().unwrap(),
            "Added a text node on adopt"
        );
    }

    #[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");
    }
}