main.js

// This demo assumes you have built the wasm package into ./pkg using wasm-pack
// Example: wasm-pack build ../wasm --target web --out-dir ./pkg --out-name crakendb_wasm
import init, * as wasm from "./pkg/crakendb_wasm.js";

async function boot() {
  await init();
  document.getElementById("init").onclick = async () => {
    await wasm.init("crakendb");
    console.log("DB initialized");
  };
  document.getElementById("put").onclick = async () => {
    await wasm.put("hello", new TextEncoder().encode("world"));
    console.log("put done");
  };
  document.getElementById("get").onclick = async () => {
    const v = await wasm.get("hello");
    if (v) {
      console.log("get", new TextDecoder().decode(v));
    } else {
      console.log("not found");
    }
  };
  document.getElementById("delete").onclick = async () => {
    await wasm.delete("hello");
    console.log("delete done");
  };
  document.getElementById("put-image").onclick = async () => {
    const input = document.getElementById("file");
    const f = input.files[0];
    if (!f) return;
    const buf = new Uint8Array(await f.arrayBuffer());
    const meta = {
      id: f.name,
      content_type: f.type || "application/octet-stream",
      width: 0,
      height: 0,
      size: buf.byteLength,
      created_at_ms: Date.now(),
    };
    await wasm.put_image_rs(meta, Array.from(buf));
    console.log("image stored");
  };
  document.getElementById("get-image").onclick = async () => {
    const input = document.getElementById("file");
    const f = input.files[0];
    const id = f ? f.name : "sample";
    const res = await wasm.get_image_rs(id);
    if (res) {
      const u8 = new Uint8Array(res.data);
      const blob = new Blob([u8], { type: res.meta.content_type });
      document.getElementById("preview").src = URL.createObjectURL(blob);
    } else {
      console.log("image not found");
    }
  };
  document.getElementById("delete-image").onclick = async () => {
    const input = document.getElementById("file");
    const f = input.files[0];
    const id = f ? f.name : "sample";
    await wasm.delete_image_rs(id);
    console.log("image deleted");
  };
  document.getElementById("list-images").onclick = async () => {
    const res = await wasm.list_images_rs();
    console.log("images", res);
  };
}
boot();