ziex 0.1.0-dev.526 → 0.1.0-dev.562

package/README.md

@@ -122,6 +122,7 @@ const zx = @import("zx");
     - [x] Page
     - [ ] Assets
 - [x] API Route
+    - [x] Websocket 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.526",
+  version: "0.1.0-dev.562",
   description: "ZX is a framework for building web applications with Zig.",
   repository: "https://github.com/nurulhudaapon/zx",
   fingerprint: 14616285862371232000,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziex",
-  "version": "0.1.0-dev.526",
+  "version": "0.1.0-dev.562",
   "description": "ZX is a framework for building web applications with Zig.",
   "main": "index.js",
   "type": "module",

package/react/dom.d.ts

@@ -1,162 +1,21 @@
 import type { ComponentMetadata } from "./types";
-/**
- * Result of preparing a component for hydration.
- *
- * Contains all the necessary data to render a React component into its server-rendered container.
- */
 export type PreparedComponent = {
-    /**
-     * The HTML element where the component should be rendered.
-     *
-     * This is a container element created between the comment markers. The server-rendered
-     * content is moved into this container, and React will hydrate it with the interactive component.
-     *
-     * @example
-     * ```tsx
-     * // Server-rendered HTML with comment markers:
-     * // <!--$zx-abc123-0 CounterComponent {"max_count":10}-->
-     * // <button>0</button>
-     * // <!--/$zx-abc123-0-->
-     *
-     * const { domNode } = await prepareComponent(component);
-     * createRoot(domNode).render(<Component {...props} />);
-     * ```
-     */
     domNode: HTMLElement;
-    /**
-     * Component props parsed from the comment marker.
-     *
-     * Props are extracted from the start comment marker content. The comment format is:
-     * `<!--$id name props-->` where props is JSON-encoded.
-     *
-     * @example
-     * ```tsx
-     * // Server-rendered HTML:
-     * // <!--$zx-abc123-0 CounterComponent {"max_count":10,"label":"Counter"}-->
-     * // <button>0</button>
-     * // <!--/$zx-abc123-0-->
-     *
-     * const { props } = await prepareComponent(component);
-     * // props = { max_count: 10, label: "Counter" }
-     * ```
-     */
     props: Record<string, any> & {
-        /**
-         * React's special prop for setting inner HTML directly.
-         *
-         * May be used when the component has server-rendered children that should
-         * be preserved during hydration.
-         */
         dangerouslySetInnerHTML?: {
             __html: string;
         };
     };
-    /**
-     * The loaded React component function ready to render.
-     *
-     * This is the default export from the component module, lazy-loaded via the component's
-     * import function. The component is ready to be rendered with React's `createRoot().render()`.
-     *
-     * @example
-     * ```tsx
-     * const { Component, props, domNode } = await prepareComponent(component);
-     *
-     * // Component is the default export from the component file:
-     * // export default function CounterComponent({ max_count }: { max_count: number }) {
-     * //   return <div>Count: {max_count}</div>;
-     * // }
-     *
-     * createRoot(domNode).render(<Component {...props} />);
-     * ```
-     */
     Component: (props: any) => React.ReactElement;
 };
-/**
- * Prepares a client-side component for hydration by locating its comment markers, extracting
- * props from the marker content, and lazy-loading the component module.
- *
- * This function bridges server-rendered HTML (from ZX's Zig transpiler) and client-side React
- * components. It searches for comment markers in the format `<!--$id name props-->...<!--/$id-->`
- * and extracts the component data from the marker content.
- *
- * @param component - The component metadata containing ID, import function, and other metadata
- *                    needed to locate and load the component
- *
- * @returns A Promise that resolves to a `PreparedComponent` object containing the DOM node,
- *          parsed props, and the loaded React component function
- *
- * @throws {Error} If the component's comment markers cannot be found in the DOM. This typically
- *                 happens if the component ID doesn't match any marker, the script runs before
- *                 the HTML is loaded, or there's a mismatch between server and client metadata
- *
- * @example
- * ```tsx
- * // Basic usage with React:
- * import { createRoot } from "react-dom/client";
- * import { prepareComponent } from "ziex";
- * import { components } from "@ziex/components";
- *
- * for (const component of components) {
- *   prepareComponent(component).then(({ domNode, Component, props }) => {
- *     createRoot(domNode).render(<Component {...props} />);
- *   }).catch(console.error);
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Server-rendered HTML with comment markers:
- * // <!--$zx-abc123-0 CounterComponent {"max_count":10}-->
- * // <button>0</button>
- * // <!--/$zx-abc123-0-->
- * ```
- */
 export declare function prepareComponent(component: ComponentMetadata): Promise<PreparedComponent>;
 export declare function filterComponents(components: ComponentMetadata[]): ComponentMetadata[];
-/**
- * Discovered component from DOM traversal.
- * Contains all metadata needed to hydrate the component.
- */
 export type DiscoveredComponent = {
     id: string;
     name: string;
     props: Record<string, any>;
     container: HTMLElement;
 };
-/**
- * Finds all React component markers in the DOM and returns their metadata.
- *
- * This is a DOM-first approach that:
- * 1. Walks the DOM once to find all `<!--$id-->` markers
- * 2. Reads metadata from companion `<script data-zx="id">` elements
- * 3. Creates containers for React to render into
- *
- * @returns Array of discovered components with their containers and props
- */
 export declare function discoverComponents(): DiscoveredComponent[];
-/**
- * Component registry mapping component names to their import functions.
- */
 export type ComponentRegistry = Record<string, () => Promise<(props: any) => React.ReactElement>>;
-/**
- * Hydrates all React components found in the DOM.
- *
- * This is the simplest way to hydrate React islands - it automatically:
- * 1. Discovers all component markers in the DOM
- * 2. Looks up components by name in the registry
- * 3. Renders each component into its container
- *
- * @param registry - Map of component names to import functions
- * @param render - Function to render a component (e.g., `(el, Component, props) => createRoot(el).render(<Component {...props} />)`)
- *
- * @example
- * ```ts
- * import { hydrateAll } from "ziex/react";
- *
- * hydrateAll({
- *   CounterComponent: () => import("./Counter"),
- *   ToggleComponent: () => import("./Toggle"),
- * });
- * ```
- */
 export declare function hydrateAll(registry: ComponentRegistry, render: (container: HTMLElement, Component: (props: any) => React.ReactElement, props: Record<string, any>) => void): Promise<void>;

package/react/index.js

@@ -1,15 +1,28 @@
 // src/react/dom.ts
 function findCommentMarker(id) {
-  const startMarker = `$${id}`;
+  const startPrefix = `$${id} `;
   const endMarker = `/$${id}`;
   const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT, null);
   let startComment = null;
   let endComment = null;
+  let name = "";
+  let props = {};
   let node;
   while (node = walker.nextNode()) {
     const text = node.textContent?.trim() || "";
-    if (text === startMarker) {
+    if (text.startsWith(startPrefix)) {
       startComment = node;
+      const content = text.slice(startPrefix.length);
+      const jsonStart = content.indexOf("{");
+      if (jsonStart !== -1) {
+        name = content.slice(0, jsonStart).trim();
+        const jsonStr = content.slice(jsonStart);
+        try {
+          props = JSON.parse(jsonStr);
+        } catch {}
+      } else {
+        name = content.trim();
+      }
     }
     if (text === endMarker) {
       endComment = node;
@@ -17,20 +30,10 @@ function findCommentMarker(id) {
     }
   }
   if (startComment && endComment) {
-    return { startComment, endComment };
+    return { startComment, endComment, name, props };
   }
   return null;
 }
-function getComponentMetadata(id) {
-  const script = document.querySelector(`script[data-zx="${id}"]`);
-  if (script?.textContent) {
-    try {
-      const data = JSON.parse(script.textContent);
-      return { name: data.name || "", props: data.props || {} };
-    } catch {}
-  }
-  return { name: "", props: {} };
-}
 function createContainerBetweenMarkers(startComment, endComment) {
   const container = document.createElement("div");
   container.style.display = "contents";
@@ -48,8 +51,7 @@ async function prepareComponent(component) {
   if (!marker) {
     throw new Error(`Comment marker for ${component.id} not found`, { cause: component });
   }
-  const metadata = getComponentMetadata(component.id);
-  const props = metadata.props;
+  const props = marker.props;
   const domNode = createContainerBetweenMarkers(marker.startComment, marker.endComment);
   const Component = await component.import();
   return { domNode, props, Component };
@@ -60,25 +62,50 @@ function filterComponents(components) {
 }
 function discoverComponents() {
   const components = [];
-  const scripts = Array.from(document.querySelectorAll("script[data-zx]"));
-  for (const script of scripts) {
-    const id = script.getAttribute("data-zx");
-    if (!id)
-      continue;
-    let name = "";
-    let props = {};
-    try {
-      const data = JSON.parse(script.textContent || "{}");
-      name = data.name || "";
-      props = data.props || {};
-    } catch {
-      continue;
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT, null);
+  const markers = [];
+  let node;
+  while (node = walker.nextNode()) {
+    const text = node.textContent?.trim() || "";
+    if (text.startsWith("$") && !text.startsWith("/$")) {
+      const spaceIdx = text.indexOf(" ");
+      if (spaceIdx !== -1) {
+        const id = text.slice(1, spaceIdx);
+        const content = text.slice(spaceIdx + 1);
+        if (content.startsWith("[")) {
+          continue;
+        }
+        const jsonStart = content.indexOf("{");
+        let name = "";
+        let props = {};
+        if (jsonStart !== -1) {
+          name = content.slice(0, jsonStart).trim();
+          try {
+            props = JSON.parse(content.slice(jsonStart));
+          } catch {}
+        } else {
+          name = content.trim();
+        }
+        markers.push({ id, name, props, startComment: node, endComment: null });
+      }
+    } else if (text.startsWith("/$")) {
+      const id = text.slice(2);
+      const marker = markers.find((m) => m.id === id && !m.endComment);
+      if (marker) {
+        marker.endComment = node;
+      }
     }
-    const marker = findCommentMarker(id);
-    if (!marker)
+  }
+  for (const marker of markers) {
+    if (!marker.endComment)
       continue;
     const container = createContainerBetweenMarkers(marker.startComment, marker.endComment);
-    components.push({ id, name, props, container });
+    components.push({
+      id: marker.id,
+      name: marker.name,
+      props: marker.props,
+      container
+    });
   }
   return components;
 }

package/wasm/index.d.ts

@@ -1,7 +1,7 @@
 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
+ * Handles events, fetch, WebSocket, timers, and other async callbacks using jsz
  */
 export declare const CallbackType: {
     readonly Event: 0;
@@ -9,6 +9,10 @@ export declare const CallbackType: {
     readonly FetchError: 2;
     readonly Timeout: 3;
     readonly Interval: 4;
+    readonly WebSocketOpen: 5;
+    readonly WebSocketMessage: 6;
+    readonly WebSocketError: 7;
+    readonly WebSocketClose: 8;
 };
 export type CallbackTypeValue = typeof CallbackType[keyof typeof CallbackType];
 export declare const jsz: ZigJS;
@@ -18,14 +22,26 @@ export declare function storeValueGetRef(val: any): bigint;
 export declare class ZxBridge {
     #private;
     constructor(exports: WebAssembly.Exports);
-    /** Fetch a URL and callback with the response */
-    fetch(urlPtr: number, urlLen: number, callbackId: bigint): void;
+    /**
+     * Async fetch with full options support.
+     * Calls __zx_fetch_complete when done.
+     */
+    fetchAsync(urlPtr: number, urlLen: number, methodPtr: number, methodLen: number, headersPtr: number, headersLen: number, bodyPtr: number, bodyLen: number, timeoutMs: number, fetchId: 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;
+    /**
+     * Create and connect a WebSocket.
+     * Calls __zx_ws_onopen, __zx_ws_onmessage, __zx_ws_onerror, __zx_ws_onclose.
+     */
+    wsConnect(wsId: bigint, urlPtr: number, urlLen: number, protocolsPtr: number, protocolsLen: number): void;
+    /** Send data over WebSocket */
+    wsSend(wsId: bigint, dataPtr: number, dataLen: number, isBinary: number): void;
+    /** Close WebSocket connection */
+    wsClose(wsId: bigint, code: number, reasonPtr: number, reasonLen: number): void;
     /** Handle a DOM event (called by event delegation) */
     eventbridge(velementId: bigint, eventTypeId: number, event: Event): void;
     /** Create the import object for WASM instantiation */

package/wasm/index.js

@@ -173,7 +173,11 @@ var CallbackType = {
   FetchSuccess: 1,
   FetchError: 2,
   Timeout: 3,
-  Interval: 4
+  Interval: 4,
+  WebSocketOpen: 5,
+  WebSocketMessage: 6,
+  WebSocketError: 7,
+  WebSocketClose: 8
 };
 var jsz = new ZigJS;
 var tempRefBuffer = new ArrayBuffer(8);
@@ -189,19 +193,35 @@ function readString(ptr, len) {
   const memory = new Uint8Array(jsz.memory.buffer);
   return new TextDecoder().decode(memory.slice(ptr, ptr + len));
 }
+function writeBytes(ptr, data) {
+  const memory = new Uint8Array(jsz.memory.buffer);
+  memory.set(data, ptr);
+}
 
 class ZxBridge {
   #exports;
-  #nextCallbackId = BigInt(1);
   #intervals = new Map;
+  #websockets = new Map;
   constructor(exports) {
     this.#exports = exports;
   }
   get #handler() {
     return this.#exports.__zx_cb;
   }
-  #getNextId() {
-    return this.#nextCallbackId++;
+  get #fetchCompleteHandler() {
+    return this.#exports.__zx_fetch_complete;
+  }
+  get #wsOnOpenHandler() {
+    return this.#exports.__zx_ws_onopen;
+  }
+  get #wsOnMessageHandler() {
+    return this.#exports.__zx_ws_onmessage;
+  }
+  get #wsOnErrorHandler() {
+    return this.#exports.__zx_ws_onerror;
+  }
+  get #wsOnCloseHandler() {
+    return this.#exports.__zx_ws_onclose;
   }
   #invoke(type, id, data) {
     const handler = this.#handler;
@@ -212,14 +232,62 @@ class ZxBridge {
     const dataRef = storeValueGetRef(data);
     handler(type, id, dataRef);
   }
-  fetch(urlPtr, urlLen, callbackId) {
+  fetchAsync(urlPtr, urlLen, methodPtr, methodLen, headersPtr, headersLen, bodyPtr, bodyLen, timeoutMs, fetchId) {
     const url = readString(urlPtr, urlLen);
-    fetch(url).then((response) => response.text()).then((text) => {
-      this.#invoke(CallbackType.FetchSuccess, callbackId, text);
+    const method = methodLen > 0 ? readString(methodPtr, methodLen) : "GET";
+    const headersJson = headersLen > 0 ? readString(headersPtr, headersLen) : "{}";
+    const body = bodyLen > 0 ? readString(bodyPtr, bodyLen) : undefined;
+    let headers = {};
+    try {
+      headers = JSON.parse(headersJson);
+    } catch {
+      for (const line of headersJson.split(`
+`)) {
+        const colonIdx = line.indexOf(":");
+        if (colonIdx > 0) {
+          headers[line.slice(0, colonIdx)] = line.slice(colonIdx + 1);
+        }
+      }
+    }
+    const controller = new AbortController;
+    const timeout = timeoutMs > 0 ? setTimeout(() => controller.abort(), timeoutMs) : null;
+    const fetchOptions = {
+      method,
+      headers: Object.keys(headers).length > 0 ? headers : undefined,
+      body: method !== "GET" && method !== "HEAD" ? body : undefined,
+      signal: controller.signal
+    };
+    fetch(url, fetchOptions).then(async (response) => {
+      if (timeout)
+        clearTimeout(timeout);
+      const text = await response.text();
+      this.#notifyFetchComplete(fetchId, response.status, text, false);
     }).catch((error) => {
-      this.#invoke(CallbackType.FetchError, callbackId, error.message ?? "Fetch failed");
+      if (timeout)
+        clearTimeout(timeout);
+      const isAbort = error.name === "AbortError";
+      const errorMsg = isAbort ? "Request timeout" : error.message ?? "Fetch failed";
+      this.#notifyFetchComplete(fetchId, 0, errorMsg, true);
     });
   }
+  #notifyFetchComplete(fetchId, statusCode, body, isError) {
+    const handler = this.#fetchCompleteHandler;
+    if (!handler) {
+      console.warn("__zx_fetch_complete not exported from WASM");
+      return;
+    }
+    const encoded = new TextEncoder().encode(body);
+    const allocFn = this.#exports.__zx_alloc;
+    let ptr = 0;
+    if (allocFn) {
+      ptr = allocFn(encoded.length);
+    } else {
+      const heapBase = this.#exports.__heap_base?.value ?? 65536;
+      ptr = heapBase + Number(fetchId % BigInt(256)) * 65536;
+    }
+    writeBytes(ptr, encoded);
+    handler(fetchId, statusCode, ptr, encoded.length, isError ? 1 : 0);
+  }
   setTimeout(callbackId, delayMs) {
     setTimeout(() => {
       this.#invoke(CallbackType.Timeout, callbackId, null);
@@ -238,6 +306,105 @@ class ZxBridge {
       this.#intervals.delete(callbackId);
     }
   }
+  wsConnect(wsId, urlPtr, urlLen, protocolsPtr, protocolsLen) {
+    const url = readString(urlPtr, urlLen);
+    const protocolsStr = protocolsLen > 0 ? readString(protocolsPtr, protocolsLen) : "";
+    const protocols = protocolsStr ? protocolsStr.split(",").map((p) => p.trim()).filter(Boolean) : undefined;
+    try {
+      const ws = protocols && protocols.length > 0 ? new WebSocket(url, protocols) : new WebSocket(url);
+      ws.binaryType = "arraybuffer";
+      ws.onopen = () => {
+        const handler = this.#wsOnOpenHandler;
+        if (!handler)
+          return;
+        const protocol = ws.protocol || "";
+        const { ptr, len } = this.#writeStringToWasm(protocol);
+        handler(wsId, ptr, len);
+      };
+      ws.onmessage = (event) => {
+        const handler = this.#wsOnMessageHandler;
+        if (!handler)
+          return;
+        const isBinary = event.data instanceof ArrayBuffer;
+        let data;
+        if (isBinary) {
+          data = new Uint8Array(event.data);
+        } else {
+          data = new TextEncoder().encode(event.data);
+        }
+        const { ptr, len } = this.#writeBytesToWasm(data);
+        handler(wsId, ptr, len, isBinary ? 1 : 0);
+      };
+      ws.onerror = (event) => {
+        const handler = this.#wsOnErrorHandler;
+        if (!handler)
+          return;
+        const msg = "WebSocket error";
+        const { ptr, len } = this.#writeStringToWasm(msg);
+        handler(wsId, ptr, len);
+      };
+      ws.onclose = (event) => {
+        const handler = this.#wsOnCloseHandler;
+        if (!handler)
+          return;
+        const reason = event.reason || "";
+        const { ptr, len } = this.#writeStringToWasm(reason);
+        handler(wsId, event.code, ptr, len, event.wasClean ? 1 : 0);
+        this.#websockets.delete(wsId);
+      };
+      this.#websockets.set(wsId, ws);
+    } catch (error) {
+      const handler = this.#wsOnErrorHandler;
+      if (handler) {
+        const msg = error instanceof Error ? error.message : "WebSocket connection failed";
+        const { ptr, len } = this.#writeStringToWasm(msg);
+        handler(wsId, ptr, len);
+      }
+    }
+  }
+  wsSend(wsId, dataPtr, dataLen, isBinary) {
+    const ws = this.#websockets.get(wsId);
+    if (!ws || ws.readyState !== WebSocket.OPEN)
+      return;
+    const memory = new Uint8Array(jsz.memory.buffer);
+    const data = memory.slice(dataPtr, dataPtr + dataLen);
+    if (isBinary) {
+      ws.send(data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength));
+    } else {
+      ws.send(new TextDecoder().decode(data));
+    }
+  }
+  wsClose(wsId, code, reasonPtr, reasonLen) {
+    const ws = this.#websockets.get(wsId);
+    if (!ws)
+      return;
+    const reason = reasonLen > 0 ? readString(reasonPtr, reasonLen) : undefined;
+    try {
+      if (reason) {
+        ws.close(code, reason);
+      } else {
+        ws.close(code);
+      }
+    } catch {
+      ws.close();
+    }
+  }
+  #writeStringToWasm(str) {
+    const encoded = new TextEncoder().encode(str);
+    return this.#writeBytesToWasm(encoded);
+  }
+  #writeBytesToWasm(data) {
+    const allocFn = this.#exports.__zx_alloc;
+    let ptr = 0;
+    if (allocFn) {
+      ptr = allocFn(data.length);
+    } else {
+      const heapBase = this.#exports.__heap_base?.value ?? 65536;
+      ptr = heapBase + Date.now() % 256 * 4096;
+    }
+    writeBytes(ptr, data);
+    return { ptr, len: data.length };
+  }
   eventbridge(velementId, eventTypeId, event) {
     const eventRef = storeValueGetRef(event);
     const eventbridge = this.#exports.__zx_eventbridge;
@@ -248,8 +415,8 @@ class ZxBridge {
     return {
       ...jsz.importObject(),
       __zx: {
-        _fetch: (urlPtr, urlLen, callbackId) => {
-          bridgeRef.current?.fetch(urlPtr, urlLen, callbackId);
+        _fetchAsync: (urlPtr, urlLen, methodPtr, methodLen, headersPtr, headersLen, bodyPtr, bodyLen, timeoutMs, fetchId) => {
+          bridgeRef.current?.fetchAsync(urlPtr, urlLen, methodPtr, methodLen, headersPtr, headersLen, bodyPtr, bodyLen, timeoutMs, fetchId);
         },
         _setTimeout: (callbackId, delayMs) => {
           bridgeRef.current?.setTimeout(callbackId, delayMs);
@@ -259,6 +426,15 @@ class ZxBridge {
         },
         _clearInterval: (callbackId) => {
           bridgeRef.current?.clearInterval(callbackId);
+        },
+        _wsConnect: (wsId, urlPtr, urlLen, protocolsPtr, protocolsLen) => {
+          bridgeRef.current?.wsConnect(wsId, urlPtr, urlLen, protocolsPtr, protocolsLen);
+        },
+        _wsSend: (wsId, dataPtr, dataLen, isBinary) => {
+          bridgeRef.current?.wsSend(wsId, dataPtr, dataLen, isBinary);
+        },
+        _wsClose: (wsId, code, reasonPtr, reasonLen) => {
+          bridgeRef.current?.wsClose(wsId, code, reasonPtr, reasonLen);
         }
       }
     };

package/wasm/init.js

@@ -173,7 +173,11 @@ var CallbackType = {
   FetchSuccess: 1,
   FetchError: 2,
   Timeout: 3,
-  Interval: 4
+  Interval: 4,
+  WebSocketOpen: 5,
+  WebSocketMessage: 6,
+  WebSocketError: 7,
+  WebSocketClose: 8
 };
 var jsz = new ZigJS;
 var tempRefBuffer = new ArrayBuffer(8);
@@ -189,19 +193,35 @@ function readString(ptr, len) {
   const memory = new Uint8Array(jsz.memory.buffer);
   return new TextDecoder().decode(memory.slice(ptr, ptr + len));
 }
+function writeBytes(ptr, data) {
+  const memory = new Uint8Array(jsz.memory.buffer);
+  memory.set(data, ptr);
+}
 
 class ZxBridge {
   #exports;
-  #nextCallbackId = BigInt(1);
   #intervals = new Map;
+  #websockets = new Map;
   constructor(exports) {
     this.#exports = exports;
   }
   get #handler() {
     return this.#exports.__zx_cb;
   }
-  #getNextId() {
-    return this.#nextCallbackId++;
+  get #fetchCompleteHandler() {
+    return this.#exports.__zx_fetch_complete;
+  }
+  get #wsOnOpenHandler() {
+    return this.#exports.__zx_ws_onopen;
+  }
+  get #wsOnMessageHandler() {
+    return this.#exports.__zx_ws_onmessage;
+  }
+  get #wsOnErrorHandler() {
+    return this.#exports.__zx_ws_onerror;
+  }
+  get #wsOnCloseHandler() {
+    return this.#exports.__zx_ws_onclose;
   }
   #invoke(type, id, data) {
     const handler = this.#handler;
@@ -212,14 +232,62 @@ class ZxBridge {
     const dataRef = storeValueGetRef(data);
     handler(type, id, dataRef);
   }
-  fetch(urlPtr, urlLen, callbackId) {
+  fetchAsync(urlPtr, urlLen, methodPtr, methodLen, headersPtr, headersLen, bodyPtr, bodyLen, timeoutMs, fetchId) {
     const url = readString(urlPtr, urlLen);
-    fetch(url).then((response) => response.text()).then((text) => {
-      this.#invoke(CallbackType.FetchSuccess, callbackId, text);
+    const method = methodLen > 0 ? readString(methodPtr, methodLen) : "GET";
+    const headersJson = headersLen > 0 ? readString(headersPtr, headersLen) : "{}";
+    const body = bodyLen > 0 ? readString(bodyPtr, bodyLen) : undefined;
+    let headers = {};
+    try {
+      headers = JSON.parse(headersJson);
+    } catch {
+      for (const line of headersJson.split(`
+`)) {
+        const colonIdx = line.indexOf(":");
+        if (colonIdx > 0) {
+          headers[line.slice(0, colonIdx)] = line.slice(colonIdx + 1);
+        }
+      }
+    }
+    const controller = new AbortController;
+    const timeout = timeoutMs > 0 ? setTimeout(() => controller.abort(), timeoutMs) : null;
+    const fetchOptions = {
+      method,
+      headers: Object.keys(headers).length > 0 ? headers : undefined,
+      body: method !== "GET" && method !== "HEAD" ? body : undefined,
+      signal: controller.signal
+    };
+    fetch(url, fetchOptions).then(async (response) => {
+      if (timeout)
+        clearTimeout(timeout);
+      const text = await response.text();
+      this.#notifyFetchComplete(fetchId, response.status, text, false);
     }).catch((error) => {
-      this.#invoke(CallbackType.FetchError, callbackId, error.message ?? "Fetch failed");
+      if (timeout)
+        clearTimeout(timeout);
+      const isAbort = error.name === "AbortError";
+      const errorMsg = isAbort ? "Request timeout" : error.message ?? "Fetch failed";
+      this.#notifyFetchComplete(fetchId, 0, errorMsg, true);
     });
   }
+  #notifyFetchComplete(fetchId, statusCode, body, isError) {
+    const handler = this.#fetchCompleteHandler;
+    if (!handler) {
+      console.warn("__zx_fetch_complete not exported from WASM");
+      return;
+    }
+    const encoded = new TextEncoder().encode(body);
+    const allocFn = this.#exports.__zx_alloc;
+    let ptr = 0;
+    if (allocFn) {
+      ptr = allocFn(encoded.length);
+    } else {
+      const heapBase = this.#exports.__heap_base?.value ?? 65536;
+      ptr = heapBase + Number(fetchId % BigInt(256)) * 65536;
+    }
+    writeBytes(ptr, encoded);
+    handler(fetchId, statusCode, ptr, encoded.length, isError ? 1 : 0);
+  }
   setTimeout(callbackId, delayMs) {
     setTimeout(() => {
       this.#invoke(CallbackType.Timeout, callbackId, null);
@@ -238,6 +306,105 @@ class ZxBridge {
       this.#intervals.delete(callbackId);
     }
   }
+  wsConnect(wsId, urlPtr, urlLen, protocolsPtr, protocolsLen) {
+    const url = readString(urlPtr, urlLen);
+    const protocolsStr = protocolsLen > 0 ? readString(protocolsPtr, protocolsLen) : "";
+    const protocols = protocolsStr ? protocolsStr.split(",").map((p) => p.trim()).filter(Boolean) : undefined;
+    try {
+      const ws = protocols && protocols.length > 0 ? new WebSocket(url, protocols) : new WebSocket(url);
+      ws.binaryType = "arraybuffer";
+      ws.onopen = () => {
+        const handler = this.#wsOnOpenHandler;
+        if (!handler)
+          return;
+        const protocol = ws.protocol || "";
+        const { ptr, len } = this.#writeStringToWasm(protocol);
+        handler(wsId, ptr, len);
+      };
+      ws.onmessage = (event) => {
+        const handler = this.#wsOnMessageHandler;
+        if (!handler)
+          return;
+        const isBinary = event.data instanceof ArrayBuffer;
+        let data;
+        if (isBinary) {
+          data = new Uint8Array(event.data);
+        } else {
+          data = new TextEncoder().encode(event.data);
+        }
+        const { ptr, len } = this.#writeBytesToWasm(data);
+        handler(wsId, ptr, len, isBinary ? 1 : 0);
+      };
+      ws.onerror = (event) => {
+        const handler = this.#wsOnErrorHandler;
+        if (!handler)
+          return;
+        const msg = "WebSocket error";
+        const { ptr, len } = this.#writeStringToWasm(msg);
+        handler(wsId, ptr, len);
+      };
+      ws.onclose = (event) => {
+        const handler = this.#wsOnCloseHandler;
+        if (!handler)
+          return;
+        const reason = event.reason || "";
+        const { ptr, len } = this.#writeStringToWasm(reason);
+        handler(wsId, event.code, ptr, len, event.wasClean ? 1 : 0);
+        this.#websockets.delete(wsId);
+      };
+      this.#websockets.set(wsId, ws);
+    } catch (error) {
+      const handler = this.#wsOnErrorHandler;
+      if (handler) {
+        const msg = error instanceof Error ? error.message : "WebSocket connection failed";
+        const { ptr, len } = this.#writeStringToWasm(msg);
+        handler(wsId, ptr, len);
+      }
+    }
+  }
+  wsSend(wsId, dataPtr, dataLen, isBinary) {
+    const ws = this.#websockets.get(wsId);
+    if (!ws || ws.readyState !== WebSocket.OPEN)
+      return;
+    const memory = new Uint8Array(jsz.memory.buffer);
+    const data = memory.slice(dataPtr, dataPtr + dataLen);
+    if (isBinary) {
+      ws.send(data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength));
+    } else {
+      ws.send(new TextDecoder().decode(data));
+    }
+  }
+  wsClose(wsId, code, reasonPtr, reasonLen) {
+    const ws = this.#websockets.get(wsId);
+    if (!ws)
+      return;
+    const reason = reasonLen > 0 ? readString(reasonPtr, reasonLen) : undefined;
+    try {
+      if (reason) {
+        ws.close(code, reason);
+      } else {
+        ws.close(code);
+      }
+    } catch {
+      ws.close();
+    }
+  }
+  #writeStringToWasm(str) {
+    const encoded = new TextEncoder().encode(str);
+    return this.#writeBytesToWasm(encoded);
+  }
+  #writeBytesToWasm(data) {
+    const allocFn = this.#exports.__zx_alloc;
+    let ptr = 0;
+    if (allocFn) {
+      ptr = allocFn(data.length);
+    } else {
+      const heapBase = this.#exports.__heap_base?.value ?? 65536;
+      ptr = heapBase + Date.now() % 256 * 4096;
+    }
+    writeBytes(ptr, data);
+    return { ptr, len: data.length };
+  }
   eventbridge(velementId, eventTypeId, event) {
     const eventRef = storeValueGetRef(event);
     const eventbridge = this.#exports.__zx_eventbridge;
@@ -248,8 +415,8 @@ class ZxBridge {
     return {
       ...jsz.importObject(),
       __zx: {
-        _fetch: (urlPtr, urlLen, callbackId) => {
-          bridgeRef.current?.fetch(urlPtr, urlLen, callbackId);
+        _fetchAsync: (urlPtr, urlLen, methodPtr, methodLen, headersPtr, headersLen, bodyPtr, bodyLen, timeoutMs, fetchId) => {
+          bridgeRef.current?.fetchAsync(urlPtr, urlLen, methodPtr, methodLen, headersPtr, headersLen, bodyPtr, bodyLen, timeoutMs, fetchId);
         },
         _setTimeout: (callbackId, delayMs) => {
           bridgeRef.current?.setTimeout(callbackId, delayMs);
@@ -259,6 +426,15 @@ class ZxBridge {
         },
         _clearInterval: (callbackId) => {
           bridgeRef.current?.clearInterval(callbackId);
+        },
+        _wsConnect: (wsId, urlPtr, urlLen, protocolsPtr, protocolsLen) => {
+          bridgeRef.current?.wsConnect(wsId, urlPtr, urlLen, protocolsPtr, protocolsLen);
+        },
+        _wsSend: (wsId, dataPtr, dataLen, isBinary) => {
+          bridgeRef.current?.wsSend(wsId, dataPtr, dataLen, isBinary);
+        },
+        _wsClose: (wsId, code, reasonPtr, reasonLen) => {
+          bridgeRef.current?.wsClose(wsId, code, reasonPtr, reasonLen);
         }
       }
     };