wasm

Author: CodeHariK

go.work

@@ -3,5 +3,4 @@ go 1.24.0
 use (
 	./lockfree
 	./secretary
-	./wasm
 )

secretary/Makefile

@@ -52,3 +52,10 @@ gen:
 	buf dep update
 	buf format -w
 	buf generate
+
+.PHONY: wasm
+wasm:
+	GOOS=js GOARCH=wasm go build -o ./secretaryui/secretary.wasm ./wasm
+
+cpwasm:
+	cp $(shell go env GOROOT)/lib/wasm/wasm_exec.js ./secretaryui

secretary/secretaryui/index.html

@@ -226,6 +226,10 @@
         </div>
       </div>
 
+      <button id="add-btn">ADD</button>
+      <button onClick="allTree();">AllTree</button>
+      <button onClick="set();">SET</button>
+
       <div id="info-box"></div>
 
       <div id="result"></div>
@@ -256,4 +260,6 @@
 
 <script type="module" src="/src/main.ts"></script>
 
+<script src="wasm_exec.js"></script>
+
 </html>

wasm/wasm/secretary.wasm secretary/secretaryui/secretary.wasmwasm/wasm/secretary.wasm renamed to secretary/secretaryui/secretary.wasm

@@ -117,7 +117,22 @@ export async function fetchAllBTree() {
     await makeRequest(
         `${ui.url}/getalltree`,
         undefined,
-        (data: any[]) => {
+        (data: any[], error: boolean) => {
+
+            console.log(data)
+
+            if (error) {
+                ui.WASM = true
+
+                // ui.func.allTree()
+
+                console.log(ui.func)
+
+                console.log("---> ", ui.func.allTree())
+
+                return
+            }
+
             const collectionsDiv = document.getElementById("collections")!;
             collectionsDiv.innerHTML = "";
 
@@ -259,16 +274,17 @@ async function makeRequest(
     parameters: RequestInit | undefined,
     after: (result: any, error: boolean) => void
 ) {
-    const response = await fetch(url, parameters);
+    let response;
     let result;
 
     try {
+        response = await fetch(url, parameters);
         result = await response.json();
     } catch {
         result = { data: null, logs: "Invalid JSON response" };
     }
 
-    const hasError = !response.ok || response.status !== 200;
+    const hasError = !response?.ok || response.status !== 200;
     appendResult(url, result.data, result.logs, hasError);
     after(result.data, hasError);
 }

secretary/secretaryui/src/collection.ts

@@ -4,16 +4,15 @@ import { BTree, BTreeNode, NodeDef, TreeDef } from './tree';
 import { canvasSection, modalOverlay, openModalBtn, themeToggle } from './dom';
 import { setupDraw } from './draw';
 import Split from 'split.js'
+import { Func, SetupWASM } from './wasm';
 
-// document.addEventListener('DOMContentLoaded', () => {
 Split(['#json-section', "#canvas-section", '#form-section'],
   {
     sizes: [15, 70, 15],
     // gutterSize: 4,
   }
 );
 (document.querySelector('.container') as HTMLElement).style.visibility = 'visible';
-// });
 
 class Ui {
   graph: dia.Graph
@@ -26,6 +25,9 @@ class Ui {
 
   DARK: boolean
 
+  func!: Func
+  WASM: boolean = false
+
   router: "normal" | "orthogonal" = "orthogonal"
   connector: "straight" | "curve" = "straight"
 
@@ -66,7 +68,10 @@ class Ui {
 let dark = localStorage.getItem("theme") === "dark"
 export let ui = new Ui(dark)
 
-fetchAllBTree()
+SetupWASM()
+setTimeout(() => {
+  fetchAllBTree()
+}, 2000)
 setupCollectionRequest()
 setupDraw()
 

secretary/secretaryui/src/main.ts

@@ -0,0 +1,78 @@
+import { resultDiv } from "./dom";
+import { ui } from "./main";
+
+let WASM = "secretary.wasm"
+
+declare const Go: any;
+
+export interface Func {
+    add: (a: number, b: number) => number
+    allTree: () => string
+    set: (v: string) => null
+}
+
+interface Window {
+    lib: Func;
+}
+
+declare let window: Window;
+
+const go = new Go();
+let mod: WebAssembly.Module, inst: WebAssembly.Instance;
+WebAssembly.instantiateStreaming(fetch(WASM), go.importObject).then(async (result) => {
+    mod = result.module;
+    inst = result.instance;
+
+    go.run(inst); // Start Go runtime
+
+    ui.func = window.lib
+
+}).catch((err) => {
+    console.error(err);
+});
+
+export function SetupWASM() {
+    document.getElementById("add-btn")?.addEventListener("click", async () => {
+        add()
+    });
+}
+
+async function add() {
+
+    if (!inst) {
+        console.error("WebAssembly instance not loaded yet!");
+        return;
+    }
+
+    if (typeof ui.func.add === "function") {
+        resultDiv.innerText = "Result: " + ui.func.add(10, 20);
+    } else {
+        console.error("ui.func.add is undefined!");
+    }
+}
+
+async function allTree() {
+    if (!inst) {
+        console.error("WebAssembly instance not loaded yet!");
+        return;
+    }
+
+    if (typeof ui.func.allTree === "function") {
+        resultDiv.innerText = "Result: " + ui.func.allTree();
+    } else {
+        console.error("ui.func.allTree is undefined!");
+    }
+}
+
+async function set() {
+    if (!inst) {
+        console.error("WebAssembly instance not loaded yet!");
+        return;
+    }
+
+    if (typeof ui.func.set === "function") {
+        resultDiv.innerText = "Result: " + ui.func.set("hello");
+    } else {
+        console.error("ui.func.set is undefined!");
+    }
+}

secretary/secretaryui/src/wasm.ts

@@ -11,7 +11,6 @@ import (
 
 	"github.com/codeharik/secretary"
 	"github.com/codeharik/secretary/utils"
-	"github.com/codeharik/wasm"
 )
 
 var SECRETARY *secretary.Secretary
@@ -44,6 +43,9 @@ func init() {
 
 func main() {
 	var lib map[string]any = map[string]any{
+		"allTree":      js.FuncOf(allTree),
+		"allTree_info": "allTree() -> json",
+
 		"set":      js.FuncOf(set),
 		"set_info": "set(value string) -> string",
 
@@ -54,11 +56,20 @@ func main() {
 		"sub_info": "sub(a int, b int) -> int",
 	}
 
-	wasm.SetWASMLibaray(lib)
+	SetWASMLibaray(lib)
 
 	select {}
 }
 
+func allTree(this js.Value, args []js.Value) any {
+	data, err := SECRETARY.HandleGetAllTree()
+	if err != nil {
+		return js.ValueOf(err.Error())
+	}
+
+	return js.ValueOf(string(data))
+}
+
 func set(this js.Value, args []js.Value) any {
 	value := args[0].String()
 

wasm/wasm_exec.js secretary/secretaryui/wasm_exec.jswasm/wasm_exec.js renamed to secretary/secretaryui/wasm_exec.js

@@ -1,7 +1,7 @@
 //go:build js && wasm
 // +build js,wasm
 
-package wasm
+package main
 
 import (
 	"fmt"