2022-10-02 18:16:10 -04:00
|
|
|
use js_sys::Function;
|
2022-10-02 18:21:24 -04:00
|
|
|
use wasm_bindgen::{convert::IntoWasmAbi, prelude::*, JsCast, JsValue};
|
2022-10-02 20:27:01 -04:00
|
|
|
use web_sys::{window, Element, HtmlElement};
|
2022-10-02 18:16:10 -04:00
|
|
|
|
2022-10-05 18:36:26 -04:00
|
|
|
use web_component_derive::web_component;
|
|
|
|
|
2022-10-02 18:16:10 -04:00
|
|
|
type Result<T> = std::result::Result<T, JsValue>;
|
|
|
|
|
2022-10-02 20:27:01 -04:00
|
|
|
// TODO(jwall): Trait methods can't be exported out to js yet so we'll need a wrapper object or we'll need to `Derive` this api in a prop-macro.
|
|
|
|
pub trait CustomElementImpl: IntoWasmAbi {}
|
2022-10-02 18:21:24 -04:00
|
|
|
|
2022-10-02 20:27:01 -04:00
|
|
|
pub struct WebComponentHandle<T: CustomElementImpl> {
|
2022-10-02 18:21:24 -04:00
|
|
|
pub impl_handle: Closure<dyn FnMut() -> T>,
|
|
|
|
pub element_constructor: Function,
|
2022-10-02 18:16:10 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
#[cfg(test)]
|
|
|
|
mod tests {
|
|
|
|
use super::*;
|
2022-10-02 18:21:24 -04:00
|
|
|
use wasm_bindgen::JsCast;
|
2022-10-02 18:16:10 -04:00
|
|
|
use wasm_bindgen_test::wasm_bindgen_test;
|
2022-10-02 20:27:01 -04:00
|
|
|
use web_sys::Text;
|
2022-10-02 18:16:10 -04:00
|
|
|
wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser);
|
|
|
|
|
2022-10-05 18:36:26 -04:00
|
|
|
#[web_component(class_name = "MyElement", element_name = "my-element")]
|
2022-10-02 20:27:01 -04:00
|
|
|
#[derive(Default, Debug)]
|
|
|
|
pub struct MyElementImpl {}
|
2022-10-02 18:16:10 -04:00
|
|
|
|
2022-10-02 20:27:01 -04:00
|
|
|
impl CustomElementImpl for MyElementImpl {}
|
|
|
|
|
|
|
|
#[wasm_bindgen]
|
|
|
|
impl MyElementImpl {
|
|
|
|
#[wasm_bindgen(constructor)]
|
|
|
|
pub fn new() -> Self {
|
|
|
|
Self::default()
|
|
|
|
}
|
|
|
|
|
|
|
|
#[wasm_bindgen]
|
|
|
|
pub fn create() -> Element {
|
|
|
|
window()
|
|
|
|
.unwrap()
|
|
|
|
.document()
|
|
|
|
.unwrap()
|
|
|
|
.create_element(Self::element_name())
|
|
|
|
.unwrap()
|
|
|
|
}
|
|
|
|
|
|
|
|
#[wasm_bindgen]
|
|
|
|
pub fn connected_impl(&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_with_val("element: ".to_owned(), element);
|
|
|
|
}
|
|
|
|
|
|
|
|
#[wasm_bindgen]
|
|
|
|
pub fn disconnected_impl(&self, element: &HtmlElement) {
|
|
|
|
log("Firing discconnected call back".to_owned());
|
|
|
|
let node = element.first_child().unwrap();
|
|
|
|
element.remove_child(&node).unwrap();
|
|
|
|
}
|
|
|
|
|
|
|
|
#[wasm_bindgen]
|
|
|
|
pub fn adopted_impl(&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);
|
|
|
|
}
|
|
|
|
|
|
|
|
pub fn observed_attributes() -> js_sys::Array {
|
|
|
|
let attrs = js_sys::Array::new();
|
|
|
|
attrs.push(&JsValue::from_str("class"));
|
|
|
|
attrs
|
|
|
|
}
|
|
|
|
|
|
|
|
#[wasm_bindgen]
|
|
|
|
pub fn attribute_changed_impl(
|
|
|
|
&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);
|
2022-10-02 18:21:24 -04:00
|
|
|
}
|
2022-10-02 18:16:10 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
#[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);
|
|
|
|
}
|
|
|
|
|
2022-10-02 20:27:01 -04:00
|
|
|
// 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.
|
2022-10-02 18:16:10 -04:00
|
|
|
#[wasm_bindgen_test]
|
2022-10-02 20:27:01 -04:00
|
|
|
fn test_component() {
|
|
|
|
let obj = MyElementImpl::define().expect("Failed to define web component");
|
2022-10-02 18:21:24 -04:00
|
|
|
let fun = obj.element_constructor.dyn_ref::<Function>().unwrap();
|
2022-10-02 18:16:10 -04:00
|
|
|
assert_eq!(fun.name(), MyElementImpl::class_name());
|
2022-10-02 20:27:01 -04:00
|
|
|
let element = MyElementImpl::create();
|
2022-10-02 18:16:10 -04:00
|
|
|
assert_eq!(
|
|
|
|
element.tag_name().to_uppercase(),
|
|
|
|
MyElementImpl::element_name().to_uppercase()
|
|
|
|
);
|
2022-10-02 20:27:01 -04:00
|
|
|
let document = window().unwrap().document().unwrap();
|
|
|
|
let body = document.body().unwrap();
|
|
|
|
|
|
|
|
// Test the connected callback
|
|
|
|
let node = body.append_child(element.as_ref()).unwrap();
|
|
|
|
assert_eq!(
|
|
|
|
element.text_content().unwrap(),
|
|
|
|
"Added a text node on connect"
|
|
|
|
);
|
|
|
|
|
|
|
|
// Test the disconnected callback
|
|
|
|
body.remove_child(&node).unwrap();
|
|
|
|
assert_eq!(element.text_content().unwrap(), "");
|
|
|
|
|
|
|
|
body.append_child(element.as_ref()).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"
|
|
|
|
);
|
2022-10-02 18:16:10 -04:00
|
|
|
}
|
|
|
|
}
|