Use the platform as the base interpreter instead of trying to extend it

packages/interpreter/src/js/hash.txt

@@ -1 +1 @@
-12494364440840058490
+13493771420133770074

packages/interpreter/src/js/native.js

@@ -159,6 +159,16 @@ System.register("interpreter_core", [], function (exports_2, context_2) {
                     var id = element.getAttribute("data-dioxus-id");
                     delete this.local[id];
                 };
+                Interpreter.prototype.getNode = function (id) {
+                    return this.nodes[id];
+                };
+                Interpreter.prototype.appendChildren = function (id, many) {
+                    var root = this.nodes[id];
+                    var els = this.stack.splice(this.stack.length - many);
+                    for (var k = 0; k < many; k++) {
+                        root.appendChild(els[k]);
+                    }
+                };
                 return Interpreter;
             }());
             exports_2("Interpreter", Interpreter);

packages/interpreter/src/js/web.js

@@ -74,6 +74,16 @@ System.register("interpreter_core", [], function (exports_1, context_1) {
                     var id = element.getAttribute("data-dioxus-id");
                     delete this.local[id];
                 };
+                Interpreter.prototype.getNode = function (id) {
+                    return this.nodes[id];
+                };
+                Interpreter.prototype.appendChildren = function (id, many) {
+                    var root = this.nodes[id];
+                    var els = this.stack.splice(this.stack.length - many);
+                    for (var k = 0; k < many; k++) {
+                        root.appendChild(els[k]);
+                    }
+                };
                 return Interpreter;
             }());
             exports_1("Interpreter", Interpreter);
@@ -141,16 +151,6 @@ System.register("interpreter_web", ["interpreter_core"], function (exports_2, co
                         currentNode = treeWalker.nextNode();
                     }
                 };
-                WebInterpreter.prototype.getNode = function (id) {
-                    return this.nodes[id];
-                };
-                WebInterpreter.prototype.appendChildren = function (id, many) {
-                    var root = this.nodes[id];
-                    var els = this.stack.splice(this.stack.length - many);
-                    for (var k = 0; k < many; k++) {
-                        root.appendChild(els[k]);
-                    }
-                };
                 return WebInterpreter;
             }(interpreter_core_1.Interpreter));
             exports_2("WebInterpreter", WebInterpreter);

packages/interpreter/src/lib.rs

@@ -19,7 +19,7 @@ pub mod minimal_bindings {
     /// Some useful snippets that we use to share common functionality between the different platforms we support.
     ///
     /// This maintains some sort of consistency between web, desktop, and liveview
-    #[wasm_bindgen(module = "/src/common_exported.js")]
+    #[wasm_bindgen(module = "/src/js/web.js")]
     extern "C" {
         /// Set the attribute of the node
         pub fn setAttributeInner(node: JsValue, name: &str, value: JsValue, ns: Option<&str>);
@@ -30,3 +30,6 @@ pub mod minimal_bindings {
 
 #[cfg(feature = "sledgehammer")]
 pub mod unified_bindings;
+
+#[cfg(feature = "sledgehammer")]
+pub use unified_bindings::*;

packages/interpreter/src/ts/interpreter_core.ts

@@ -76,5 +76,17 @@ export class Interpreter {
     const id = element.getAttribute("data-dioxus-id");
     delete this.local[id];
   }
+
+  getNode(id: number): Node {
+    return this.nodes[id];
+  }
+
+  appendChildren(id: number, many: number) {
+    const root = this.nodes[id];
+    const els = this.stack.splice(this.stack.length - many);
+    for (let k = 0; k < many; k++) {
+      root.appendChild(els[k]);
+    }
+  }
 }
 

packages/interpreter/src/ts/interpreter_native.ts

@@ -7,6 +7,7 @@ import { retriveValues } from "./form";
 import { Interpreter } from "./interpreter_core";
 import { SerializedEvent, serializeEvent } from "./serialize";
 
+
 export class NativeInterpreter extends Interpreter {
   intercept_link_redirects: boolean;
   ipc: any;

packages/interpreter/src/ts/interpreter_web.ts

@@ -75,16 +75,4 @@ export class WebInterpreter extends Interpreter {
       currentNode = treeWalker.nextNode();
     }
   }
-
-  getNode(id: number): Node {
-    return this.nodes[id];
-  }
-
-  appendChildren(id: number, many: number) {
-    const root = this.nodes[id];
-    const els = this.stack.splice(this.stack.length - many);
-    for (let k = 0; k < many; k++) {
-      root.appendChild(els[k]);
-    }
-  }
 }

packages/interpreter/src/unified_bindings.rs

@@ -1,6 +1,3 @@
-#[cfg(feature = "webonly")]
-use js_sys::Function;
-
 #[cfg(feature = "webonly")]
 use web_sys::Node;
 
@@ -11,30 +8,39 @@ use sledgehammer_bindgen::bindgen;
 
 pub const SLEDGEHAMMER_JS: &str = GENERATED_JS;
 
+/// Extensions to the interpreter that are specific to the web platform.
 #[cfg(feature = "webonly")]
 #[wasm_bindgen(module = "src/js/web.js")]
 extern "C" {
-    #[wasm_bindgen]
-    pub type Interpreter;
+    pub type WebInterpreter;
 
-    #[wasm_bindgen(method)]
-    pub fn save_template(this: &Interpreter, nodes: Vec<Node>, tmpl_id: u16);
+    #[wasm_bindgen(method, js_name = "saveTemplate")]
+    pub fn save_template(this: &WebInterpreter, nodes: Vec<Node>, tmpl_id: u16);
 
     #[wasm_bindgen(method)]
-    pub fn hydrate(this: &Interpreter, ids: Vec<u32>);
+    pub fn hydrate(this: &WebInterpreter, ids: Vec<u32>);
 
-    #[wasm_bindgen(method)]
-    pub fn get_node(this: &Interpreter, id: u32) -> Node;
+    #[wasm_bindgen(method, js_name = "getNode")]
+    pub fn get_node(this: &WebInterpreter, id: u32) -> Node;
+}
 
-    #[wasm_bindgen(method)]
-    pub fn initialize(this: &Interpreter, root: Node, handler: &Function);
+#[cfg(feature = "webonly")]
+type PlatformInterpreter = WebInterpreter;
+
+#[cfg(feature = "webonly")]
+impl Interpreter {
+    /// Convert the interpreter to a web interpreter, enabling methods like hydrate and save_template.
+    pub fn as_web(&self) -> &WebInterpreter {
+        use wasm_bindgen::prelude::JsCast;
+        &self.js_channel().unchecked_ref()
+    }
 }
 
 #[bindgen(module)]
 mod js {
     /// The interpreter extends the core interpreter which contains the state for the interpreter along with some functions that all platforms use like `AppendChildren`.
-    #[extends(Interpreter)]
-    pub struct InterpreterInterface;
+    #[extends(PlatformInterpreter)]
+    pub struct Interpreter;
 
     fn mount_to_root() {
         "{this.AppendChildren(this.root, this.stack.length-1);}"

packages/interpreter/src/write_native_mutations.rs

@@ -1,5 +1,4 @@
-// use crate::binary_protocol::Channel;
-use crate::unified_bindings::Channel;
+use crate::unified_bindings::Interpreter as Channel;
 use dioxus_core::{TemplateAttribute, TemplateNode, WriteMutations};
 use dioxus_html::event_bubbles;
 use sledgehammer_utils::rustc_hash::FxHashMap;

packages/web/src/dom.rs

@@ -8,7 +8,7 @@
 
 use dioxus_core::ElementId;
 use dioxus_html::PlatformEventData;
-use dioxus_interpreter_js::Channel;
+use dioxus_interpreter_js::unified_bindings::{Interpreter, InterpreterInterface};
 use futures_channel::mpsc;
 use rustc_hash::FxHashMap;
 use wasm_bindgen::{closure::Closure, JsCast};
@@ -22,7 +22,7 @@ pub struct WebsysDom {
     pub(crate) root: Element,
     pub(crate) templates: FxHashMap<String, u16>,
     pub(crate) max_template_id: u16,
-    pub(crate) interpreter: Channel,
+    pub(crate) interpreter: InterpreterInterface,
     #[cfg(feature = "mounted")]
     pub(crate) event_channel: mpsc::UnboundedSender<UiEvent>,
     #[cfg(feature = "mounted")]
@@ -64,7 +64,7 @@ impl WebsysDom {
             }
         };
 
-        let interpreter = Channel::default();
+        let interpreter = InterpreterInterface::default();
 
         let handler: Closure<dyn FnMut(&Event)> = Closure::wrap(Box::new({
             let event_channel = event_channel.clone();
@@ -107,11 +107,12 @@ impl WebsysDom {
             }
         }));
 
-        dioxus_interpreter_js::initialize(
-            interpreter.js_channel(),
+        let _interpreter: &Interpreter = interpreter.as_ref();
+        _interpreter.initialize(
             root.clone().unchecked_into(),
             handler.as_ref().unchecked_ref(),
         );
+
         dioxus_html::set_event_converter(Box::new(WebEventConverter));
         handler.forget();