Load components from within JS

Author: jakmeier

src/class.rs

@@ -46,10 +46,31 @@ impl JsClassStorage {
             out
         })
     }
+    pub(crate) fn preloaded(&mut self, name: &str) -> Option<JsClassHandle> {
+        if let Some(class) = self.find_by_name(name) {
+            return Some(class);
+        }
+        if svelte_component_exists(name) {
+            let index = self.data.len();
+            let class = JsClass {
+                name: name.to_string(),
+            };
+            self.data.push(class);
+            let class_handle = JsClassHandle { index };
+            return Some(class_handle);
+        }
+        None
+    }
+    fn find_by_name(&self, name: &str) -> Option<JsClassHandle> {
+        self.data
+            .iter()
+            .position(|ch| ch.name == name)
+            .map(|index| JsClassHandle { index })
+    }
 }
 
 impl JsClass {
-    pub fn attach_new_instance(&self, node: &HtmlElement) {
-        instantiate_class(&self.name, node);
+    pub(crate) fn attach_new_instance(&self, node: &HtmlElement) {
+        instantiate_svelte_component(&self.name, node);
     }
 }

src/class/class_loader.js

@@ -0,0 +1,13 @@
+export function instantiate_svelte_component(className, target) {
+    new window.__div_rs.svcom[className]({ target, props: {} });
+}
+export function loading_progress() {
+    return window.__div_rs.loaded || 0;
+}
+export function init_div_rs() {
+    window.__div_rs = window.__div_rs || { svcom: {}, loaded: 0 };
+}
+
+export function svelte_component_exists(name) {
+    return window.__div_rs.svcom[name] !== undefined;
+}

src/class/load.rs

@@ -6,22 +6,24 @@ use wasm_bindgen::prelude::*;
 use wasm_bindgen::JsCast;
 use web_sys::{HtmlElement, HtmlScriptElement};
 
-#[wasm_bindgen(module = "/src/class_loader.js")]
+#[wasm_bindgen(module = "/src/class/class_loader.js")]
 extern "C" {
-    pub(super) fn instantiate_class(a: &str, node: &HtmlElement);
+    pub(super) fn instantiate_svelte_component(a: &str, node: &HtmlElement);
     fn loading_progress() -> i32;
+    pub(super) fn svelte_component_exists(name: &str) -> bool; 
+    pub fn init_div_rs();
 }
 
 static LOADED: AtomicI32 = AtomicI32::new(0);
 
 pub(super) fn build_class_loading_module(classes: &[&str], src: &str) -> String {
     let mut code = format!(
-        "import {{{}}} from '{}';\nwindow.panes = window.panes || {{}};",
+        "import {{{}}} from '{}';\nwindow.__div_rs = window.__div_rs || {{svcom: {{}}, loaded: 0}};",
         classes.join(", "),
         src
     );
     for class_name in classes {
-        code += "\nwindow.panes.";
+        code += "\nwindow.__div_rs.svcom.";
         code += class_name;
         code += " = classes.";
         code += class_name;
@@ -30,6 +32,7 @@ pub(super) fn build_class_loading_module(classes: &[&str], src: &str) -> String
     code
 }
 
+/// **Experimental: This API is experimental and my not be included in later versions**
 /// Asynchronously loads a JS module by appending a script tag to the head with th e provided string as content.
 /// Poll the future until it resolves to know when the script has been loaded for sure.
 /// In contrast to the more conventional Future design, the JS module will be loaded even if the Future is not polled.
@@ -42,8 +45,8 @@ pub fn load_js_module(mut code: String) -> Result<PendingScript, PanesError> {
         .dyn_into()
         .map_err(|_| PanesError::JsCastError)?;
     script.set_attribute("type", "module")?;
-    code += "\nwindow.panes = window.panes || {};";
-    code += "\nwindow.panes.____loaded = (window.panes.____loaded || 0) + 1;";
+    code += "\nwindow.__div_rs = window.__div_rs || {};";
+    code += "\nwindow.__div_rs.loaded = (window.panes.loaded || 0) + 1;";
     script.set_text(&code)?;
 
     let head = doc.head().ok_or(PanesError::MissingHead)?;

src/class_loader.js

@@ -48,7 +48,9 @@ pub fn init_ex(
         zoom: (1.0, 1.0),
         classes: JsClassStorage::default(),
     })?;
-    add_panes_styles_to_document()
+    add_panes_styles_to_document()?;
+    init_div_rs();
+    Ok(())
 }
 
 fn get_root(id: Option<&str>) -> Result<Element, PanesError> {
@@ -122,9 +124,11 @@ where
     state::exec_mut(|state| state.new_pane(x, y, w, h, html, &classes_str, &css_str))
 }
 
+/// **Experimental: This API is experimental and my not be included in later versions**
 /// Load a class named `name` from a JS file accessible at `src`.
 ///
-/// Returns a Vanilla Future that will have to be handled in one way or another.
+/// Returns a Future because the script is loaded asynchronously.
+/// That future will have to be handled in one way or another.
 /// The most direct way would be to use `wasm_bindgen_futures::spawn_local`
 /// ## Example
 /// ```rust
@@ -146,6 +150,7 @@ pub fn load_js_class(
     Ok(async { classes.await[0] })
 }
 
+/// **Experimental: This API is experimental and my not be included in later versions**
 /// Attempts to load a JS module by its source path and loads the classes exported by it, as named by the classes parameter.
 /// Usage is equivalent to `load_js_class`.
 pub fn load_js_classes(
@@ -170,3 +175,11 @@ pub fn from_js_class(
     class.attach_new_instance(&node);
     Ok(ph)
 }
+
+impl JsClass {
+    /// Load a JS class that has already been registered, usually by JS code.
+    /// Return None if no such class has been registered.
+    pub fn preregistered(name: &str) -> Option<JsClassHandle> {
+        state::exec_mut(|state| Ok(state.classes.preloaded(name))).unwrap()
+    }
+}