ziex 0.1.0-dev.517 → 0.1.0-dev.526

package/README.md

@@ -121,7 +121,7 @@ const zx = @import("zx");
     - [ ] Layout
     - [x] Page
     - [ ] Assets
-- [ ] API Route
+- [x] API Route
 - [ ] Plugin (_Alpha_)
     - [x] Builtin TailwindCSS and Esbuild
     - [x] Command based plugin system

package/index.js

@@ -1,7 +1,7 @@
 // src/index.ts
 var zx = {
   name: "zx",
-  version: "0.1.0-dev.517",
+  version: "0.1.0-dev.526",
   description: "ZX is a framework for building web applications with Zig.",
   repository: "https://github.com/nurulhudaapon/zx",
   fingerprint: 14616285862371232000,

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "ziex",
-  "version": "0.1.0-dev.517",
+  "version": "0.1.0-dev.526",
   "description": "ZX is a framework for building web applications with Zig.",
   "main": "index.js",
   "type": "module",
   "exports": {
     ".": "./index.js",
     "./react": "./react/index.js",
-    "./wasm": "./wasm/index.js"
+    "./wasm": "./wasm/index.js",
+    "./wasm/init": "./wasm/init.js"
   },
   "homepage": "https://github.com/nurulhudaapon/zx",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nurulhudaapon/zx.git"
+    "url": "git+https://github.com/nurulhudaapon/zx.git"
   },
   "keywords": [
     "zx",

package/wasm/index.d.ts

@@ -1,40 +1,52 @@
 import { ZigJS } from "../../../../vendor/jsz/js/src";
+/**
+ * ZX Client Bridge - Unified JS↔WASM communication layer
+ * Handles events, fetch, timers, and other async callbacks using jsz
+ */
+export declare const CallbackType: {
+    readonly Event: 0;
+    readonly FetchSuccess: 1;
+    readonly FetchError: 2;
+    readonly Timeout: 3;
+    readonly Interval: 4;
+};
+export type CallbackTypeValue = typeof CallbackType[keyof typeof CallbackType];
 export declare const jsz: ZigJS;
-declare class ZXInstance {
+/** Store a value using jsz.storeValue and get the 64-bit reference. */
+export declare function storeValueGetRef(val: any): bigint;
+/** ZX Bridge - provides JS APIs that callback into WASM */
+export declare class ZxBridge {
     #private;
-    exports: WebAssembly.Exports;
-    events: Event[];
-    constructor({ exports, events }: ZXInstanceOptions);
-    addEvent(event: Event): number;
-    /**
-     * Initialize event delegation on a root element
-     * This attaches a single event listener for each event type at the root,
-     * and uses __zx_ref to look up the corresponding VElement in WASM
-     */
-    initEventDelegation(rootSelector?: string): void;
-    getZxRef(element: HTMLElement): number | undefined;
+    constructor(exports: WebAssembly.Exports);
+    /** Fetch a URL and callback with the response */
+    fetch(urlPtr: number, urlLen: number, callbackId: bigint): void;
+    /** Set a timeout and callback when it fires */
+    setTimeout(callbackId: bigint, delayMs: number): void;
+    /** Set an interval and callback each time it fires */
+    setInterval(callbackId: bigint, intervalMs: number): void;
+    /** Clear an interval */
+    clearInterval(callbackId: bigint): void;
+    /** Handle a DOM event (called by event delegation) */
+    eventbridge(velementId: bigint, eventTypeId: number, event: Event): void;
+    /** Create the import object for WASM instantiation */
+    static createImportObject(bridgeRef: {
+        current: ZxBridge | null;
+    }): WebAssembly.Imports;
 }
-export declare function init(options?: InitOptions): Promise<WebAssembly.WebAssemblyInstantiatedSource>;
+/** Initialize event delegation */
+export declare function initEventDelegation(bridge: ZxBridge, rootSelector?: string): void;
 export type InitOptions = {
-    /** URL to the WASM file (default: /assets/main.wasm) */
     url?: string;
-    /** CSS selector for the event delegation root element (default: 'body') */
     eventDelegationRoot?: string;
     importObject?: WebAssembly.Imports;
 };
-type ZXInstanceOptions = {
-    exports: ZXInstance['exports'];
-    events?: ZXInstance['events'];
-};
+/** Initialize WASM with the ZX Bridge */
+export declare function init(options?: InitOptions): Promise<{
+    source: WebAssembly.WebAssemblyInstantiatedSource;
+    bridge: ZxBridge;
+}>;
 declare global {
-    interface Window {
-        _zx: ZXInstance;
-    }
     interface HTMLElement {
-        /**
-         * The VElement ID of the element
-         */
         __zx_ref?: number;
     }
 }
-export {};

package/wasm/index.js

@@ -168,8 +168,102 @@ class ZigJS {
   }
 }
 // src/wasm/index.ts
-var DEFAULT_URL = "/assets/main.wasm";
-var MAX_EVENTS = 100;
+var CallbackType = {
+  Event: 0,
+  FetchSuccess: 1,
+  FetchError: 2,
+  Timeout: 3,
+  Interval: 4
+};
+var jsz = new ZigJS;
+var tempRefBuffer = new ArrayBuffer(8);
+var tempRefView = new DataView(tempRefBuffer);
+function storeValueGetRef(val) {
+  const originalMemory = jsz.memory;
+  jsz.memory = { buffer: tempRefBuffer };
+  jsz.storeValue(0, val);
+  jsz.memory = originalMemory;
+  return tempRefView.getBigUint64(0, true);
+}
+function readString(ptr, len) {
+  const memory = new Uint8Array(jsz.memory.buffer);
+  return new TextDecoder().decode(memory.slice(ptr, ptr + len));
+}
+
+class ZxBridge {
+  #exports;
+  #nextCallbackId = BigInt(1);
+  #intervals = new Map;
+  constructor(exports) {
+    this.#exports = exports;
+  }
+  get #handler() {
+    return this.#exports.__zx_cb;
+  }
+  #getNextId() {
+    return this.#nextCallbackId++;
+  }
+  #invoke(type, id, data) {
+    const handler = this.#handler;
+    if (!handler) {
+      console.warn("__zx_cb not exported from WASM");
+      return;
+    }
+    const dataRef = storeValueGetRef(data);
+    handler(type, id, dataRef);
+  }
+  fetch(urlPtr, urlLen, callbackId) {
+    const url = readString(urlPtr, urlLen);
+    fetch(url).then((response) => response.text()).then((text) => {
+      this.#invoke(CallbackType.FetchSuccess, callbackId, text);
+    }).catch((error) => {
+      this.#invoke(CallbackType.FetchError, callbackId, error.message ?? "Fetch failed");
+    });
+  }
+  setTimeout(callbackId, delayMs) {
+    setTimeout(() => {
+      this.#invoke(CallbackType.Timeout, callbackId, null);
+    }, delayMs);
+  }
+  setInterval(callbackId, intervalMs) {
+    const handle = setInterval(() => {
+      this.#invoke(CallbackType.Interval, callbackId, null);
+    }, intervalMs);
+    this.#intervals.set(callbackId, handle);
+  }
+  clearInterval(callbackId) {
+    const handle = this.#intervals.get(callbackId);
+    if (handle !== undefined) {
+      clearInterval(handle);
+      this.#intervals.delete(callbackId);
+    }
+  }
+  eventbridge(velementId, eventTypeId, event) {
+    const eventRef = storeValueGetRef(event);
+    const eventbridge = this.#exports.__zx_eventbridge;
+    if (eventbridge)
+      eventbridge(velementId, eventTypeId, eventRef);
+  }
+  static createImportObject(bridgeRef) {
+    return {
+      ...jsz.importObject(),
+      __zx: {
+        _fetch: (urlPtr, urlLen, callbackId) => {
+          bridgeRef.current?.fetch(urlPtr, urlLen, callbackId);
+        },
+        _setTimeout: (callbackId, delayMs) => {
+          bridgeRef.current?.setTimeout(callbackId, delayMs);
+        },
+        _setInterval: (callbackId, intervalMs) => {
+          bridgeRef.current?.setInterval(callbackId, intervalMs);
+        },
+        _clearInterval: (callbackId) => {
+          bridgeRef.current?.clearInterval(callbackId);
+        }
+      }
+    };
+  }
+}
 var DELEGATED_EVENTS = [
   "click",
   "dblclick",
@@ -212,71 +306,45 @@ var EVENT_TYPE_MAP = {
   touchmove: 17,
   scroll: 18
 };
-var jsz = new ZigJS;
-var importObject = {
-  ...jsz.importObject()
-};
-
-class ZXInstance {
-  exports;
-  events;
-  #eventDelegationInitialized = false;
-  constructor({ exports, events = [] }) {
-    this.exports = exports;
-    this.events = events;
-  }
-  addEvent(event) {
-    if (this.events.length >= MAX_EVENTS)
-      this.events.length = 0;
-    const idx = this.events.push(event);
-    return idx - 1;
-  }
-  initEventDelegation(rootSelector = "body") {
-    if (this.#eventDelegationInitialized)
-      return;
-    const root = document.querySelector(rootSelector);
-    if (!root)
-      return;
-    for (const eventType of DELEGATED_EVENTS) {
-      root.addEventListener(eventType, (event) => {
-        this.#handleDelegatedEvent(eventType, event);
-      }, { passive: eventType.startsWith("touch") || eventType === "scroll" });
-    }
-    this.#eventDelegationInitialized = true;
-  }
-  #handleDelegatedEvent(eventType, event) {
-    let target = event.target;
-    while (target && target !== document.body) {
-      const zxRef = target.__zx_ref;
-      if (zxRef !== undefined) {
-        const eventId = this.addEvent(event);
-        const handleEvent = this.exports.handleEvent;
-        if (typeof handleEvent === "function") {
-          const eventTypeId = EVENT_TYPE_MAP[eventType] ?? 0;
-          handleEvent(BigInt(zxRef), eventTypeId, BigInt(eventId));
+function initEventDelegation(bridge, rootSelector = "body") {
+  const root = document.querySelector(rootSelector);
+  if (!root)
+    return;
+  for (const eventType of DELEGATED_EVENTS) {
+    root.addEventListener(eventType, (event) => {
+      let target = event.target;
+      while (target && target !== document.body) {
+        const zxRef = target.__zx_ref;
+        if (zxRef !== undefined) {
+          bridge.eventbridge(BigInt(zxRef), EVENT_TYPE_MAP[eventType] ?? 0, event);
+          break;
         }
-        break;
+        target = target.parentElement;
       }
-      target = target.parentElement;
-    }
-  }
-  getZxRef(element) {
-    return element.__zx_ref;
+    }, { passive: eventType.startsWith("touch") || eventType === "scroll" });
   }
 }
+var DEFAULT_URL = "/assets/main.wasm";
 async function init(options = {}) {
-  const url = options?.url ?? DEFAULT_URL;
-  const wasmInstiatedSource = await WebAssembly.instantiateStreaming(fetch(url), Object.assign({}, importObject, options.importObject));
-  const { instance } = wasmInstiatedSource;
+  const url = options.url ?? DEFAULT_URL;
+  const bridgeRef = { current: null };
+  const importObject = Object.assign({}, ZxBridge.createImportObject(bridgeRef), options.importObject);
+  const source = await WebAssembly.instantiateStreaming(fetch(url), importObject);
+  const { instance } = source;
   jsz.memory = instance.exports.memory;
-  window._zx = new ZXInstance({ exports: instance.exports });
-  window._zx.initEventDelegation(options.eventDelegationRoot ?? "body");
+  const bridge = new ZxBridge(instance.exports);
+  bridgeRef.current = bridge;
+  initEventDelegation(bridge, options.eventDelegationRoot ?? "body");
   const main = instance.exports.mainClient;
   if (typeof main === "function")
     main();
-  return wasmInstiatedSource;
+  return { source, bridge };
 }
 export {
+  storeValueGetRef,
   jsz,
-  init
+  initEventDelegation,
+  init,
+  ZxBridge,
+  CallbackType
 };

package/wasm/init.d.ts

@@ -0,0 +1 @@
+export {};

package/wasm/init.js

@@ -0,0 +1,345 @@
+// ../../vendor/jsz/js/src/zigjs.ts
+var NAN_PREFIX = 2146959360;
+var predefined = {
+  nan: 0,
+  null: 1,
+  true: 2,
+  false: 3,
+  undefined: 4,
+  globalThis: 5,
+  runtime: 6
+};
+var PREDEFINED_ID_MAX = 6;
+var encoder = new TextEncoder;
+var decoder = new TextDecoder("utf-8");
+
+class ZigJS {
+  memory;
+  values = [NaN, null, true, false, undefined, globalThis, this];
+  idPool = [];
+  importObject() {
+    return {
+      "zig-js": {
+        valueGet: this.valueGet.bind(this),
+        valueSet: this.valueSet.bind(this),
+        valueDeinit: this.valueDeinit.bind(this),
+        valueObjectCreate: this.valueObjectCreate.bind(this),
+        valueStringCreate: this.valueStringCreate.bind(this),
+        valueStringLen: this.valueStringLen.bind(this),
+        valueStringCopy: this.valueStringCopy.bind(this),
+        valueNew: this.valueNew.bind(this),
+        funcApply: this.funcApply.bind(this)
+      }
+    };
+  }
+  valueGet(out, id, ptr, len) {
+    const val = this.loadValue(id);
+    const str = this.loadString(ptr, len);
+    const result = Reflect.get(val, str);
+    this.storeValue(out, result);
+  }
+  valueSet(id, ptr, len, refAddr) {
+    const obj = this.loadValue(id);
+    const str = this.loadString(ptr, len);
+    const val = this.loadRef(refAddr);
+    Reflect.set(obj, str, val);
+  }
+  valueDeinit(id) {
+    if (id > PREDEFINED_ID_MAX) {
+      this.values[id] = null;
+      this.idPool.push(id);
+    }
+  }
+  valueObjectCreate(out) {
+    this.storeValue(out, new Object);
+  }
+  valueStringCreate(out, ptr, len) {
+    const str = this.loadString(ptr, len);
+    this.storeValue(out, str);
+  }
+  valueStringLen(id) {
+    const val = this.loadValue(id);
+    const buf = encoder.encode(val);
+    return buf.byteLength;
+  }
+  valueStringCopy(id, ptr, max) {
+    if (this.memory == null)
+      return;
+    const val = this.loadValue(id);
+    const bytes = encoder.encode(val);
+    if (bytes.byteLength > max)
+      return;
+    new Uint8Array(this.memory.buffer, ptr, bytes.length).set(bytes);
+  }
+  valueNew(out, id, argsAddr, argsLen) {
+    const fn = this.loadValue(id);
+    const args = [];
+    for (let i = 0;i < argsLen; i++) {
+      args.push(this.loadRef(argsAddr + i * 8));
+    }
+    const result = Reflect.construct(fn, args);
+    this.storeValue(out, result);
+  }
+  funcApply(out, id, thisRefAddr, argsAddr, argsLen) {
+    const fn = this.loadValue(id);
+    const thisVal = this.loadRef(thisRefAddr);
+    const args = [];
+    for (let i = 0;i < argsLen; i++) {
+      args.push(this.loadRef(argsAddr + i * 8));
+    }
+    const result = Reflect.apply(fn, thisVal, args);
+    this.storeValue(out, result);
+  }
+  loadValue(id) {
+    return this.values[id];
+  }
+  deleteValue(id) {
+    const val = this.values[id];
+    this.valueDeinit(id);
+    return val;
+  }
+  loadRef(refAddr) {
+    if (this.memory == null)
+      return;
+    const view = new DataView(this.memory.buffer);
+    const floatVal = view.getFloat64(refAddr, true);
+    if (!isNaN(floatVal))
+      return floatVal;
+    const id = this.loadRefId(refAddr);
+    return this.values[id];
+  }
+  loadRefId(refAddr) {
+    if (this.memory == null)
+      return 0;
+    return new DataView(this.memory.buffer).getUint32(refAddr, true);
+  }
+  storeValue(out, val) {
+    if (this.memory == null)
+      return;
+    const view = new DataView(this.memory.buffer);
+    if (typeof val === "number") {
+      if (isNaN(val)) {
+        view.setUint32(out, predefined.nan, true);
+        view.setUint32(out + 4, NAN_PREFIX, true);
+      } else {
+        view.setFloat64(out, val, true);
+      }
+      return;
+    }
+    if (val === null) {
+      view.setUint32(out, predefined.null, true);
+      view.setUint32(out + 4, NAN_PREFIX, true);
+      return;
+    }
+    if (val === undefined) {
+      view.setUint32(out, predefined.undefined, true);
+      view.setUint32(out + 4, NAN_PREFIX, true);
+      return;
+    }
+    let id = this.idPool.pop();
+    if (id === undefined) {
+      id = this.values.length;
+    }
+    this.values[id] = val;
+    let typeId = 0;
+    switch (typeof val) {
+      case "object":
+        typeId = 1;
+        break;
+      case "string":
+        typeId = 2;
+        break;
+      case "symbol":
+        typeId = 3;
+        break;
+      case "function":
+        typeId = 4;
+        break;
+    }
+    view.setUint32(out, Number(id), true);
+    view.setUint32(out + 4, NAN_PREFIX | typeId, true);
+  }
+  loadString(ptr, len) {
+    if (this.memory == null)
+      return "";
+    const arr = new Uint8ClampedArray(this.memory.buffer, ptr, Number(len));
+    const data = arr.slice();
+    return decoder.decode(data);
+  }
+}
+// src/wasm/index.ts
+var CallbackType = {
+  Event: 0,
+  FetchSuccess: 1,
+  FetchError: 2,
+  Timeout: 3,
+  Interval: 4
+};
+var jsz = new ZigJS;
+var tempRefBuffer = new ArrayBuffer(8);
+var tempRefView = new DataView(tempRefBuffer);
+function storeValueGetRef(val) {
+  const originalMemory = jsz.memory;
+  jsz.memory = { buffer: tempRefBuffer };
+  jsz.storeValue(0, val);
+  jsz.memory = originalMemory;
+  return tempRefView.getBigUint64(0, true);
+}
+function readString(ptr, len) {
+  const memory = new Uint8Array(jsz.memory.buffer);
+  return new TextDecoder().decode(memory.slice(ptr, ptr + len));
+}
+
+class ZxBridge {
+  #exports;
+  #nextCallbackId = BigInt(1);
+  #intervals = new Map;
+  constructor(exports) {
+    this.#exports = exports;
+  }
+  get #handler() {
+    return this.#exports.__zx_cb;
+  }
+  #getNextId() {
+    return this.#nextCallbackId++;
+  }
+  #invoke(type, id, data) {
+    const handler = this.#handler;
+    if (!handler) {
+      console.warn("__zx_cb not exported from WASM");
+      return;
+    }
+    const dataRef = storeValueGetRef(data);
+    handler(type, id, dataRef);
+  }
+  fetch(urlPtr, urlLen, callbackId) {
+    const url = readString(urlPtr, urlLen);
+    fetch(url).then((response) => response.text()).then((text) => {
+      this.#invoke(CallbackType.FetchSuccess, callbackId, text);
+    }).catch((error) => {
+      this.#invoke(CallbackType.FetchError, callbackId, error.message ?? "Fetch failed");
+    });
+  }
+  setTimeout(callbackId, delayMs) {
+    setTimeout(() => {
+      this.#invoke(CallbackType.Timeout, callbackId, null);
+    }, delayMs);
+  }
+  setInterval(callbackId, intervalMs) {
+    const handle = setInterval(() => {
+      this.#invoke(CallbackType.Interval, callbackId, null);
+    }, intervalMs);
+    this.#intervals.set(callbackId, handle);
+  }
+  clearInterval(callbackId) {
+    const handle = this.#intervals.get(callbackId);
+    if (handle !== undefined) {
+      clearInterval(handle);
+      this.#intervals.delete(callbackId);
+    }
+  }
+  eventbridge(velementId, eventTypeId, event) {
+    const eventRef = storeValueGetRef(event);
+    const eventbridge = this.#exports.__zx_eventbridge;
+    if (eventbridge)
+      eventbridge(velementId, eventTypeId, eventRef);
+  }
+  static createImportObject(bridgeRef) {
+    return {
+      ...jsz.importObject(),
+      __zx: {
+        _fetch: (urlPtr, urlLen, callbackId) => {
+          bridgeRef.current?.fetch(urlPtr, urlLen, callbackId);
+        },
+        _setTimeout: (callbackId, delayMs) => {
+          bridgeRef.current?.setTimeout(callbackId, delayMs);
+        },
+        _setInterval: (callbackId, intervalMs) => {
+          bridgeRef.current?.setInterval(callbackId, intervalMs);
+        },
+        _clearInterval: (callbackId) => {
+          bridgeRef.current?.clearInterval(callbackId);
+        }
+      }
+    };
+  }
+}
+var DELEGATED_EVENTS = [
+  "click",
+  "dblclick",
+  "input",
+  "change",
+  "submit",
+  "focus",
+  "blur",
+  "keydown",
+  "keyup",
+  "keypress",
+  "mouseenter",
+  "mouseleave",
+  "mousedown",
+  "mouseup",
+  "mousemove",
+  "touchstart",
+  "touchend",
+  "touchmove",
+  "scroll"
+];
+var EVENT_TYPE_MAP = {
+  click: 0,
+  dblclick: 1,
+  input: 2,
+  change: 3,
+  submit: 4,
+  focus: 5,
+  blur: 6,
+  keydown: 7,
+  keyup: 8,
+  keypress: 9,
+  mouseenter: 10,
+  mouseleave: 11,
+  mousedown: 12,
+  mouseup: 13,
+  mousemove: 14,
+  touchstart: 15,
+  touchend: 16,
+  touchmove: 17,
+  scroll: 18
+};
+function initEventDelegation(bridge, rootSelector = "body") {
+  const root = document.querySelector(rootSelector);
+  if (!root)
+    return;
+  for (const eventType of DELEGATED_EVENTS) {
+    root.addEventListener(eventType, (event) => {
+      let target = event.target;
+      while (target && target !== document.body) {
+        const zxRef = target.__zx_ref;
+        if (zxRef !== undefined) {
+          bridge.eventbridge(BigInt(zxRef), EVENT_TYPE_MAP[eventType] ?? 0, event);
+          break;
+        }
+        target = target.parentElement;
+      }
+    }, { passive: eventType.startsWith("touch") || eventType === "scroll" });
+  }
+}
+var DEFAULT_URL = "/assets/main.wasm";
+async function init(options = {}) {
+  const url = options.url ?? DEFAULT_URL;
+  const bridgeRef = { current: null };
+  const importObject = Object.assign({}, ZxBridge.createImportObject(bridgeRef), options.importObject);
+  const source = await WebAssembly.instantiateStreaming(fetch(url), importObject);
+  const { instance } = source;
+  jsz.memory = instance.exports.memory;
+  const bridge = new ZxBridge(instance.exports);
+  bridgeRef.current = bridge;
+  initEventDelegation(bridge, options.eventDelegationRoot ?? "body");
+  const main = instance.exports.mainClient;
+  if (typeof main === "function")
+    main();
+  return { source, bridge };
+}
+
+// src/wasm/init.ts
+(() => init())();