Merge pull request #1916 from finos/rust-perspective-viewer

Make `perspective-viewer` crate importable for external wasm projects

rust/perspective-viewer/Cargo.toml

@@ -11,8 +11,8 @@ crate-type = ["cdylib", "rlib"]
 path = "src/rust/lib.rs"
 
 [features]
-new_column_selector = []
-default = ["new_column_selector"]
+define_custom_elements_async = []
+default = []
 
 [dependencies]
 # Provides async `Mutex` for locked sections such as `render`
@@ -58,16 +58,16 @@ serde = { version = "1.0", features = ["derive"] }
 serde_json = { version = "1.0.59", features = ["raw_value"] }
 
 # Browser API bindings
-wasm-bindgen = { version = "=0.2.74", features = ["serde-serialize"] }
+wasm-bindgen = { version = "=0.2.80", features = ["serde-serialize"] }
 
 # Browser `Promise` bindings
 wasm-bindgen-futures = "0.4.20"
 
 # https://github.com/yewstack/yew/issues/2154
-yew = { git = "https://github.com/yewstack/yew", rev = "ee6a67e3ea54e45656b87de27f0f894067d16e0d", features = ["csr"] }
+yew = { git = "https://github.com/yewstack/yew", rev = "3760c5f8b56a8ac1730356f4ddbbdc949b9f120c", features = ["csr"] }
 
 [dependencies.web-sys]
-version = "0.3.46"
+version = "0.3.57"
 features = [
     # "Performance",
     "Blob",
@@ -112,6 +112,7 @@ features = [
     # "TouchList",
     # "Touch",
     # "WheelEvent",
+    "ReadableStreamDefaultReader",
     "ShadowRoot",
     "ShadowRootMode",
     "ShadowRootInit",

rust/perspective-viewer/build.js

@@ -75,6 +75,7 @@ const BUILD = [
         external: ["*.wasm", "*.worker.js"],
         outdir: "dist/esm",
     },
+
     {
         entryPoints: ["src/ts/perspective-viewer.ts"],
         plugins: [
@@ -111,14 +112,14 @@ const BUILD = [
 // parsed due to this multi-step download+eval.  Luckily `esbuild` is quite fast
 // enough to just run another build to inline this one file `chunk.js`.
 const POSTBUILD = [
-    {
-        entryPoints: ["dist/cdn/perspective-viewer.js"],
-        format: "esm",
-        plugins: [NodeModulesExternal()],
-        external: ["*.wasm", "*.worker.js", "*.main.js"],
-        outdir: "dist/cdn",
-        allowOverwrite: true,
-    },
+    // {
+    //     entryPoints: ["dist/cdn/perspective-viewer.js"],
+    //     format: "esm",
+    //     plugins: [NodeModulesExternal()],
+    //     external: ["*.wasm", "*.worker.js", "*.main.js"],
+    //     outdir: "dist/cdn",
+    //     allowOverwrite: true,
+    // },
 ];
 
 const INHERIT = {
@@ -135,6 +136,7 @@ async function compile_rust() {
 
     await wasm_bindgen("perspective_viewer", {
         debug: IS_DEBUG,
+        version: "0.2.80",
         targetdir: "build",
     });
 

rust/perspective-viewer/docs.js

@@ -54,7 +54,7 @@ class ConvertLinksToAnchors extends Transform {
 
 const inPaths = [
     "./dist/docs/README.md",
-    "./dist/docs/classes/HTMLPerspectiveViewerElement.md",
+    "./dist/docs/interfaces/IPerspectiveViewerElement.md",
     "./dist/docs/interfaces/IPerspectiveViewerPlugin.md",
 ];
 
@@ -75,9 +75,10 @@ async function capture_exprtk() {
     const page = await browser.newPage();
     await page.addScriptTag({path: "dist/umd/perspective-viewer.js"});
     const data = await page.evaluate(async () => {
+        await customElements.whenDefined("perspective-viewer");
         const commands = await customElements
             .get("perspective-viewer")
-            .getExprtkCommands();
+            .getExprTKCommands();
 
         return JSON.stringify(commands, null, 4);
     });

rust/perspective-viewer/package.json

@@ -43,7 +43,7 @@
         "test:run:rust": "WASM_BINDGEN_TEST_TIMEOUT=60 wasm-pack test --chrome --headless",
         "test:run": "jest --rootDir=. --config=../../tools/perspective-test/jest.config.js --color --noStackTrace 2>&1",
         "test:clean": "rm perspective.csv || true",
-        "test": "yarn test:build && npm-run-all -p test:run:rust test:run && yarn test:clean"
+        "test": "yarn test:build && npm-run-all -p test:run && yarn test:clean"
     },
     "publishConfig": {
         "access": "public"

rust/perspective-viewer/src/rust/custom_elements/copy_dropdown.rs

@@ -28,6 +28,10 @@ pub struct CopyDropDownMenuElement {
     modal: Rc<RefCell<Option<ModalElement<CopyDropDownMenu>>>>,
 }
 
+impl CustomElementMetadata for CopyDropDownMenuElement {
+    const CUSTOM_ELEMENT_NAME: &'static str = "perspective-copy-menu";
+}
+
 #[wasm_bindgen]
 impl CopyDropDownMenuElement {
     #[wasm_bindgen(constructor)]

rust/perspective-viewer/src/rust/custom_elements/export_dropdown.rs

@@ -29,6 +29,10 @@ pub struct ExportDropDownMenuElement {
     modal: Rc<RefCell<Option<ModalElement<ExportDropDownMenu>>>>,
 }
 
+impl CustomElementMetadata for ExportDropDownMenuElement {
+    const CUSTOM_ELEMENT_NAME: &'static str = "perspective-export-menu";
+}
+
 #[wasm_bindgen]
 impl ExportDropDownMenuElement {
     #[wasm_bindgen(constructor)]

rust/perspective-viewer/src/rust/custom_elements/number_column_style.rs

@@ -8,6 +8,7 @@
 
 use crate::components::number_column_style::*;
 use crate::custom_elements::modal::*;
+use crate::utils::CustomElementMetadata;
 use crate::*;
 
 use wasm_bindgen::prelude::*;
@@ -17,7 +18,8 @@ use yew::*;
 #[wasm_bindgen]
 #[derive(Clone)]
 pub struct PerspectiveNumberColumnStyleElement {
-    modal: ModalElement<NumberColumnStyle>,
+    elem: HtmlElement,
+    modal: Option<ModalElement<NumberColumnStyle>>,
 }
 
 fn on_change(elem: &web_sys::HtmlElement, config: &NumberColumnStyleConfig) {
@@ -29,29 +31,15 @@ fn on_change(elem: &web_sys::HtmlElement, config: &NumberColumnStyleConfig) {
     elem.dispatch_event(&event.unwrap()).unwrap();
 }
 
+impl CustomElementMetadata for PerspectiveNumberColumnStyleElement {
+    const CUSTOM_ELEMENT_NAME: &'static str = "perspective-number-column-style";
+}
+
 #[wasm_bindgen]
 impl PerspectiveNumberColumnStyleElement {
     #[wasm_bindgen(constructor)]
-    pub fn new(
-        elem: web_sys::HtmlElement,
-        js_config: JsValue,
-        js_def_config: JsValue,
-    ) -> PerspectiveNumberColumnStyleElement {
-        let config: NumberColumnStyleConfig = js_config.into_serde().unwrap();
-        let default_config: NumberColumnStyleDefaultConfig = js_def_config.into_serde().unwrap();
-        let on_change = {
-            clone!(elem);
-            Callback::from(move |x: NumberColumnStyleConfig| on_change(&elem, &x))
-        };
-
-        let props = props!(NumberColumnStyleProps {
-            config,
-            on_change,
-            default_config,
-        });
-
-        let modal = ModalElement::new(elem, props, true);
-        PerspectiveNumberColumnStyleElement { modal }
+    pub fn new(elem: web_sys::HtmlElement) -> PerspectiveNumberColumnStyleElement {
+        PerspectiveNumberColumnStyleElement { elem, modal: None }
     }
 
     /// Reset to a provided JSON config, to be used in place of `new()` when
@@ -61,30 +49,57 @@ impl PerspectiveNumberColumnStyleElement {
     /// * `config` - a `ColumnStyle` config in JSON form.
     /// * `default_config` - the default `ColumnStyle` config for this column
     ///   type, in JSON form.
-    pub fn reset(&mut self, config: JsValue, default_config: JsValue) {
+    pub fn reset(&mut self, config: JsValue, default_config: JsValue) -> Result<(), JsValue> {
         let msg = NumberColumnStyleMsg::Reset(
             config.into_serde().unwrap(),
             default_config.into_serde().unwrap(),
         );
 
-        self.modal.send_message(msg);
+        self.modal.as_ref().into_jserror()?.send_message(msg);
+        Ok(())
     }
 
     /// Dispatches to `ModalElement::open(target)`
     ///
     /// # Arguments
     /// `target` - the relative target to pin this `ModalElement` to.
-    pub fn open(&mut self, target: web_sys::HtmlElement) {
-        self.modal.open(target, None);
+    pub fn open(
+        &mut self,
+        target: web_sys::HtmlElement,
+        js_config: JsValue,
+        js_def_config: JsValue,
+    ) -> Result<(), JsValue> {
+        if self.modal.is_some() {
+            self.reset(js_config, js_def_config)?;
+        } else {
+            let config: NumberColumnStyleConfig = js_config.into_serde().unwrap();
+            let default_config: NumberColumnStyleDefaultConfig =
+                js_def_config.into_serde().unwrap();
+            let on_change = {
+                clone!(self.elem);
+                Callback::from(move |x: NumberColumnStyleConfig| on_change(&elem, &x))
+            };
+
+            let props = props!(NumberColumnStyleProps {
+                config,
+                on_change,
+                default_config,
+            });
+
+            self.modal = Some(ModalElement::new(self.elem.clone(), props, true));
+        }
+
+        self.modal.as_ref().into_jserror()?.open(target, None);
+        Ok(())
     }
 
     /// Remove this `ModalElement` from the DOM.
     pub fn close(&mut self) -> Result<(), JsValue> {
-        self.modal.hide()
+        self.modal.as_ref().into_jserror()?.hide()
     }
 
     pub fn destroy(self) -> Result<(), JsValue> {
-        self.modal.destroy()
+        self.modal.into_jserror()?.destroy()
     }
 
     /// DOM lifecycle method when connected.  We don't use this, as it can fire

rust/perspective-viewer/src/rust/custom_elements/string_column_style.rs

@@ -8,6 +8,7 @@
 
 use crate::components::string_column_style::*;
 use crate::custom_elements::modal::*;
+use crate::utils::CustomElementMetadata;
 use crate::*;
 
 use wasm_bindgen::prelude::*;
@@ -17,7 +18,8 @@ use yew::*;
 #[wasm_bindgen]
 #[derive(Clone)]
 pub struct PerspectiveStringColumnStyleElement {
-    modal: ModalElement<StringColumnStyle>,
+    elem: HtmlElement,
+    modal: Option<ModalElement<StringColumnStyle>>,
 }
 
 fn on_change(elem: &web_sys::HtmlElement, config: &StringColumnStyleConfig) {
@@ -29,54 +31,70 @@ fn on_change(elem: &web_sys::HtmlElement, config: &StringColumnStyleConfig) {
     elem.dispatch_event(&event.unwrap()).unwrap();
 }
 
+impl CustomElementMetadata for PerspectiveStringColumnStyleElement {
+    const CUSTOM_ELEMENT_NAME: &'static str = "perspective-string-column-style";
+}
+
 #[wasm_bindgen]
 impl PerspectiveStringColumnStyleElement {
     #[wasm_bindgen(constructor)]
-    pub fn new(elem: web_sys::HtmlElement, js_config: JsValue, js_default_config: JsValue) -> Self {
-        let config: StringColumnStyleConfig = js_config.into_serde().unwrap();
-        let default_config: StringColumnStyleDefaultConfig =
-            js_default_config.into_serde().unwrap();
-
-        let on_change = {
-            clone!(elem);
-            Callback::from(move |x: StringColumnStyleConfig| on_change(&elem, &x))
-        };
-
-        let props = props!(StringColumnStyleProps {
-            config,
-            default_config,
-            on_change,
-        });
-
-        let modal = ModalElement::new(elem, props, true);
-        Self { modal }
+    pub fn new(elem: web_sys::HtmlElement) -> Self {
+        Self { elem, modal: None }
     }
 
     /// Reset to a provided JSON config, to be used in place of `new()` when
     /// re-using this component.
     ///
     /// # Arguments
     /// * `config` - a `ColumnStyle` config in JSON form.
-    pub fn reset(&mut self, config: JsValue) {
+    pub fn reset(&mut self, config: JsValue) -> Result<(), JsValue> {
         let msg = StringColumnStyleMsg::Reset(config.into_serde().unwrap());
-        self.modal.send_message(msg);
+        self.modal.as_ref().into_jserror()?.send_message(msg);
+        Ok(())
     }
 
     /// Dispatches to `ModalElement::open(target)`
     ///
     /// # Arguments
     /// `target` - the relative target to pin this `ModalElement` to.
-    pub fn open(&mut self, target: web_sys::HtmlElement) {
-        self.modal.open(target, None);
+    pub fn open(
+        &mut self,
+        target: web_sys::HtmlElement,
+        js_config: JsValue,
+        js_default_config: JsValue,
+    ) -> Result<(), JsValue> {
+        if self.modal.is_some() {
+            self.reset(js_config)?;
+        } else {
+            let config: StringColumnStyleConfig = js_config.into_serde().unwrap();
+            let default_config: StringColumnStyleDefaultConfig =
+                js_default_config.into_serde().unwrap();
+
+            let on_change = {
+                clone!(self.elem);
+                Callback::from(move |x: StringColumnStyleConfig| on_change(&elem, &x))
+            };
+
+            let props = props!(StringColumnStyleProps {
+                config,
+                default_config,
+                on_change,
+            });
+
+            self.modal = Some(ModalElement::new(self.elem.clone(), props, true));
+        }
+
+        self.modal.as_ref().into_jserror()?.open(target, None);
+        Ok(())
     }
 
     /// Remove this `ModalElement` from the DOM.
     pub fn close(&mut self) -> Result<(), JsValue> {
-        self.modal.hide()
+        self.modal.as_ref().into_jserror()?.hide()
     }
 
     pub fn destroy(self) -> Result<(), JsValue> {
-        self.modal.destroy()
+        self.modal.into_jserror()?.destroy()
     }
 
     /// DOM lifecycle method when connected.  We don't use this, as it can fire