ziex 0.1.0-dev.785 → 0.1.0-dev.787

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziex",
-  "version": "0.1.0-dev.785",
+  "version": "0.1.0-dev.787",
   "description": "ZX is a framework for building web applications with Zig.",
   "main": "index.js",
   "type": "module",
@@ -9,7 +9,10 @@
     "./react": "./react/index.js",
     "./wasm": "./wasm/index.js",
     "./wasm/init": "./wasm/init.js",
-    "./cloudflare": "./cloudflare/index.js"
+    "./cloudflare": "./cloudflare/index.js",
+    "./hono": "./hono/index.js",
+    "./aws-lambda": "./aws-lambda/index.js",
+    "./vercel": "./vercel/index.js"
   },
   "homepage": "https://ziex.dev",
   "repository": {
@@ -30,6 +33,17 @@
   ],
   "author": "Nurul Huda (Apon) <me@nurulhudaapon.com>",
   "license": "MIT",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "hono": {
+      "optional": true
+    }
+  },
   "module": "index.js",
   "types": "index.d.ts"
 }

package/vercel/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Ziex adapter for Vercel Edge Functions.
+ *
+ * @example
+ * ```ts
+ * import { Ziex } from "ziex/cloudflare";
+ * import { handle } from "ziex/vercel";
+ * import module from "./app.wasm"; // or fetch at runtime
+ *
+ * const app = new Ziex({ module });
+ *
+ * export const config = { runtime: "edge" };
+ * export default handle(app);
+ * ```
+ */
+type FetchApp = {
+    fetch(req: Request, env?: unknown, ctx?: unknown): Promise<Response>;
+};
+/**
+ * Wrap a Ziex app as a Vercel Edge Function handler.
+ *
+ * Returns a standard `(req: Request) => Promise<Response>` function.
+ * Vercel's edge runtime calls it directly — just export it as default.
+ */
+export declare function handle(app: FetchApp): (req: Request) => Promise<Response>;
+export {};

package/vercel/index.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/vercel/index.ts
+function handle(app) {
+  return (req) => app.fetch(req);
+}
+export {
+  handle
+};

package/wasm/index.d.ts

@@ -27,6 +27,10 @@ export declare class ZxBridge {
      * 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;
+    /** Submit a form action with bound-state round-trip.
+     *  Sends the form as multipart/form-data + __zx_states field,
+     *  then calls __zx_fetch_complete so WASM can apply state updates. */
+    submitFormActionAsync(form: HTMLFormElement, statesJson: string, 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 */
@@ -61,11 +65,6 @@ export declare function init(options?: InitOptions): Promise<{
     source: WebAssembly.WebAssemblyInstantiatedSource;
     bridge: ZxBridge;
 }>;
-/** Initialize WASM with the ZX Bridge */
-export declare function edge(options?: InitOptions): Promise<{
-    source: WebAssembly.WebAssemblyInstantiatedSource;
-    bridge: ZxBridge;
-}>;
 declare global {
     interface HTMLElement {
         __zx_ref?: number;

package/wasm/index.js

@@ -200,42 +200,54 @@ function storeValueGetRef(val) {
   jsz.memory = originalMemory;
   return tempRefView.getBigUint64(0, true);
 }
+var textDecoder = new TextDecoder;
+var textEncoder = new TextEncoder;
+var memoryView = null;
+var memoryBuffer = null;
+function getMemoryView() {
+  const buf = jsz.memory.buffer;
+  if (buf !== memoryBuffer) {
+    memoryBuffer = buf;
+    memoryView = new Uint8Array(buf);
+  }
+  return memoryView;
+}
+var stringCache = new Map;
+function stringCacheKey(ptr, len) {
+  return ptr * 65536 + len;
+}
 function readString(ptr, len) {
-  const memory = new Uint8Array(jsz.memory.buffer);
-  return new TextDecoder().decode(memory.slice(ptr, ptr + len));
+  const key = stringCacheKey(ptr, len);
+  const cached = stringCache.get(key);
+  if (cached !== undefined)
+    return cached;
+  const str = textDecoder.decode(getMemoryView().subarray(ptr, ptr + len));
+  stringCache.set(key, str);
+  return str;
 }
 function writeBytes(ptr, data) {
-  const memory = new Uint8Array(jsz.memory.buffer);
-  memory.set(data, ptr);
+  getMemoryView().set(data, ptr);
 }
 
 class ZxBridge {
-  #exports;
   #intervals = new Map;
   #websockets = new Map;
+  #alloc;
+  #handler;
+  #fetchCompleteHandler;
+  #wsOnOpenHandler;
+  #wsOnMessageHandler;
+  #wsOnErrorHandler;
+  #wsOnCloseHandler;
   constructor(exports) {
-    this.#exports = exports;
-  }
-  get #alloc() {
-    return this.#exports.__zx_alloc;
-  }
-  get #handler() {
-    return this.#exports.__zx_cb;
-  }
-  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;
+    this.#alloc = exports.__zx_alloc;
+    this.#handler = exports.__zx_cb;
+    this.#fetchCompleteHandler = exports.__zx_fetch_complete;
+    this.#wsOnOpenHandler = exports.__zx_ws_onopen;
+    this.#wsOnMessageHandler = exports.__zx_ws_onmessage;
+    this.#wsOnErrorHandler = exports.__zx_ws_onerror;
+    this.#wsOnCloseHandler = exports.__zx_ws_onclose;
+    this.#eventbridge = exports.__zx_eventbridge;
   }
   #invoke(type, id, data) {
     const handler = this.#handler;
@@ -286,11 +298,26 @@ class ZxBridge {
   }
   #notifyFetchComplete(fetchId, statusCode, body, isError) {
     const handler = this.#fetchCompleteHandler;
-    const encoded = new TextEncoder().encode(body);
+    const encoded = textEncoder.encode(body);
     const ptr = this.#alloc(encoded.length);
     writeBytes(ptr, encoded);
     handler(fetchId, statusCode, ptr, encoded.length, isError ? 1 : 0);
   }
+  submitFormActionAsync(form, statesJson, fetchId) {
+    const formData = new FormData(form);
+    formData.append("__zx_states", statesJson);
+    fetch(window.location.href, {
+      method: "POST",
+      headers: { "X-ZX-Action": "1" },
+      body: formData
+    }).then(async (response) => {
+      const text = await response.text();
+      this.#notifyFetchComplete(fetchId, response.status, text, false);
+    }).catch((error) => {
+      const msg = error instanceof Error ? error.message : "Fetch failed";
+      this.#notifyFetchComplete(fetchId, 0, msg, true);
+    });
+  }
   setTimeout(callbackId, delayMs) {
     setTimeout(() => {
       this.#invoke(CallbackType.Timeout, callbackId, null);
@@ -333,7 +360,7 @@ class ZxBridge {
         if (isBinary) {
           data = new Uint8Array(event.data);
         } else {
-          data = new TextEncoder().encode(event.data);
+          data = textEncoder.encode(event.data);
         }
         const { ptr, len } = this.#writeBytesToWasm(data);
         handler(wsId, ptr, len, isBinary ? 1 : 0);
@@ -369,12 +396,11 @@ class ZxBridge {
     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);
+    const memory = getMemoryView();
     if (isBinary) {
-      ws.send(data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength));
+      ws.send(memory.slice(dataPtr, dataPtr + dataLen));
     } else {
-      ws.send(new TextDecoder().decode(data));
+      ws.send(textDecoder.decode(memory.subarray(dataPtr, dataPtr + dataLen)));
     }
   }
   wsClose(wsId, code, reasonPtr, reasonLen) {
@@ -393,7 +419,7 @@ class ZxBridge {
     }
   }
   #writeStringToWasm(str) {
-    const encoded = new TextEncoder().encode(str);
+    const encoded = textEncoder.encode(str);
     return this.#writeBytesToWasm(encoded);
   }
   #writeBytesToWasm(data) {
@@ -401,11 +427,12 @@ class ZxBridge {
     writeBytes(ptr, data);
     return { ptr, len: data.length };
   }
+  #eventbridge;
   eventbridge(velementId, eventTypeId, event) {
+    if (!this.#eventbridge)
+      return;
     const eventRef = storeValueGetRef(event);
-    const eventbridge = this.#exports.__zx_eventbridge;
-    if (eventbridge)
-      eventbridge(velementId, eventTypeId, eventRef);
+    this.#eventbridge(velementId, eventTypeId, eventRef);
   }
   static createImportObject(bridgeRef) {
     return {
@@ -432,15 +459,109 @@ class ZxBridge {
         _wsClose: (wsId, code, reasonPtr, reasonLen) => {
           bridgeRef.current?.wsClose(wsId, code, reasonPtr, reasonLen);
         },
-        _ce: (id) => {
+        _ce: (id, vnodeId) => {
           const tagName = TAG_NAMES[id];
           const el = id >= SVG_TAG_START_INDEX ? document.createElementNS("http://www.w3.org/2000/svg", tagName) : document.createElement(tagName);
+          el.__zx_ref = Number(vnodeId);
+          domNodes.set(vnodeId, el);
           return storeValueGetRef(el);
+        },
+        _ct: (ptr, len, vnodeId) => {
+          const text = readString(ptr, len);
+          const node = document.createTextNode(text);
+          node.__zx_ref = Number(vnodeId);
+          domNodes.set(vnodeId, node);
+          return storeValueGetRef(node);
+        },
+        _sa: (vnodeId, namePtr, nameLen, valPtr, valLen) => {
+          domNodes.get(vnodeId)?.setAttribute(readString(namePtr, nameLen), readString(valPtr, valLen));
+        },
+        _ra: (vnodeId, namePtr, nameLen) => {
+          domNodes.get(vnodeId)?.removeAttribute(readString(namePtr, nameLen));
+        },
+        _snv: (vnodeId, ptr, len) => {
+          const node = domNodes.get(vnodeId);
+          if (node)
+            node.nodeValue = readString(ptr, len);
+        },
+        _ac: (parentId, childId) => {
+          const parent = domNodes.get(parentId);
+          const child = domNodes.get(childId);
+          if (parent && child)
+            parent.appendChild(child);
+        },
+        _ib: (parentId, childId, refId) => {
+          const parent = domNodes.get(parentId);
+          const child = domNodes.get(childId);
+          const ref = domNodes.get(refId) ?? null;
+          if (parent && child)
+            parent.insertBefore(child, ref);
+        },
+        _rc: (parentId, childId) => {
+          const parent = domNodes.get(parentId);
+          const child = domNodes.get(childId);
+          if (parent && child) {
+            parent.removeChild(child);
+            cleanupDomNodes(child);
+          }
+        },
+        _rpc: (parentId, newId, oldId) => {
+          const parent = domNodes.get(parentId);
+          const newChild = domNodes.get(newId);
+          const oldChild = domNodes.get(oldId);
+          if (parent && newChild && oldChild) {
+            parent.replaceChild(newChild, oldChild);
+            cleanupDomNodes(oldChild);
+          }
+        },
+        _getLocationHref: (bufPtr, bufLen) => {
+          const bytes = textEncoder.encode(window.location.href);
+          const len = Math.min(bytes.length, bufLen);
+          writeBytes(bufPtr, bytes.subarray(0, len));
+          return len;
+        },
+        _getFormData: (vnodeId, bufPtr, bufLen) => {
+          const form = domNodes.get(vnodeId);
+          if (!form || !(form instanceof HTMLFormElement))
+            return 0;
+          const formData = new FormData(form);
+          const urlEncoded = new URLSearchParams(formData).toString();
+          const bytes = textEncoder.encode(urlEncoded);
+          const len = Math.min(bytes.length, bufLen);
+          writeBytes(bufPtr, bytes.subarray(0, len));
+          return len;
+        },
+        _submitFormAction: (vnodeId) => {
+          const form = domNodes.get(vnodeId);
+          if (!form || !(form instanceof HTMLFormElement))
+            return;
+          const formData = new FormData(form);
+          fetch(window.location.href, {
+            method: "POST",
+            headers: { "X-ZX-Action": "1" },
+            body: formData
+          }).catch(() => {});
+        },
+        _submitFormActionAsync: (vnodeId, statesPtr, statesLen, fetchId) => {
+          const form = domNodes.get(vnodeId);
+          if (!form || !(form instanceof HTMLFormElement))
+            return;
+          const statesJson = statesLen > 0 ? readString(statesPtr, statesLen) : "[]";
+          bridgeRef.current?.submitFormActionAsync(form, statesJson, fetchId);
         }
       }
     };
   }
 }
+var domNodes = new Map;
+function cleanupDomNodes(node) {
+  const ref = node.__zx_ref;
+  if (ref !== undefined)
+    domNodes.delete(BigInt(ref));
+  const children = node.childNodes;
+  for (let i = 0;i < children.length; i++)
+    cleanupDomNodes(children[i]);
+}
 var SVG_TAG_START_INDEX = 140;
 var TAG_NAMES = [
   "aside",
@@ -696,7 +817,8 @@ function initEventDelegation(bridge, rootSelector = "body") {
         const zxRef = target.__zx_ref;
         if (zxRef !== undefined) {
           bridge.eventbridge(BigInt(zxRef), EVENT_TYPE_MAP[eventType] ?? 0, event);
-          break;
+          if (event.cancelBubble)
+            break;
         }
         target = target.parentElement;
       }
@@ -719,27 +841,11 @@ async function init(options = {}) {
     main();
   return { source, bridge };
 }
-async function edge(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.main;
-  if (typeof main === "function")
-    main();
-  return { source, bridge };
-}
 export {
   storeValueGetRef,
   jsz,
   initEventDelegation,
   init,
-  edge,
   ZxBridge,
   CallbackType
 };

package/wasm/init.js

@@ -189,42 +189,54 @@ function storeValueGetRef(val) {
   jsz.memory = originalMemory;
   return tempRefView.getBigUint64(0, true);
 }
+var textDecoder = new TextDecoder;
+var textEncoder = new TextEncoder;
+var memoryView = null;
+var memoryBuffer = null;
+function getMemoryView() {
+  const buf = jsz.memory.buffer;
+  if (buf !== memoryBuffer) {
+    memoryBuffer = buf;
+    memoryView = new Uint8Array(buf);
+  }
+  return memoryView;
+}
+var stringCache = new Map;
+function stringCacheKey(ptr, len) {
+  return ptr * 65536 + len;
+}
 function readString(ptr, len) {
-  const memory = new Uint8Array(jsz.memory.buffer);
-  return new TextDecoder().decode(memory.slice(ptr, ptr + len));
+  const key = stringCacheKey(ptr, len);
+  const cached = stringCache.get(key);
+  if (cached !== undefined)
+    return cached;
+  const str = textDecoder.decode(getMemoryView().subarray(ptr, ptr + len));
+  stringCache.set(key, str);
+  return str;
 }
 function writeBytes(ptr, data) {
-  const memory = new Uint8Array(jsz.memory.buffer);
-  memory.set(data, ptr);
+  getMemoryView().set(data, ptr);
 }
 
 class ZxBridge {
-  #exports;
   #intervals = new Map;
   #websockets = new Map;
+  #alloc;
+  #handler;
+  #fetchCompleteHandler;
+  #wsOnOpenHandler;
+  #wsOnMessageHandler;
+  #wsOnErrorHandler;
+  #wsOnCloseHandler;
   constructor(exports) {
-    this.#exports = exports;
-  }
-  get #alloc() {
-    return this.#exports.__zx_alloc;
-  }
-  get #handler() {
-    return this.#exports.__zx_cb;
-  }
-  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;
+    this.#alloc = exports.__zx_alloc;
+    this.#handler = exports.__zx_cb;
+    this.#fetchCompleteHandler = exports.__zx_fetch_complete;
+    this.#wsOnOpenHandler = exports.__zx_ws_onopen;
+    this.#wsOnMessageHandler = exports.__zx_ws_onmessage;
+    this.#wsOnErrorHandler = exports.__zx_ws_onerror;
+    this.#wsOnCloseHandler = exports.__zx_ws_onclose;
+    this.#eventbridge = exports.__zx_eventbridge;
   }
   #invoke(type, id, data) {
     const handler = this.#handler;
@@ -275,11 +287,26 @@ class ZxBridge {
   }
   #notifyFetchComplete(fetchId, statusCode, body, isError) {
     const handler = this.#fetchCompleteHandler;
-    const encoded = new TextEncoder().encode(body);
+    const encoded = textEncoder.encode(body);
     const ptr = this.#alloc(encoded.length);
     writeBytes(ptr, encoded);
     handler(fetchId, statusCode, ptr, encoded.length, isError ? 1 : 0);
   }
+  submitFormActionAsync(form, statesJson, fetchId) {
+    const formData = new FormData(form);
+    formData.append("__zx_states", statesJson);
+    fetch(window.location.href, {
+      method: "POST",
+      headers: { "X-ZX-Action": "1" },
+      body: formData
+    }).then(async (response) => {
+      const text = await response.text();
+      this.#notifyFetchComplete(fetchId, response.status, text, false);
+    }).catch((error) => {
+      const msg = error instanceof Error ? error.message : "Fetch failed";
+      this.#notifyFetchComplete(fetchId, 0, msg, true);
+    });
+  }
   setTimeout(callbackId, delayMs) {
     setTimeout(() => {
       this.#invoke(CallbackType.Timeout, callbackId, null);
@@ -322,7 +349,7 @@ class ZxBridge {
         if (isBinary) {
           data = new Uint8Array(event.data);
         } else {
-          data = new TextEncoder().encode(event.data);
+          data = textEncoder.encode(event.data);
         }
         const { ptr, len } = this.#writeBytesToWasm(data);
         handler(wsId, ptr, len, isBinary ? 1 : 0);
@@ -358,12 +385,11 @@ class ZxBridge {
     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);
+    const memory = getMemoryView();
     if (isBinary) {
-      ws.send(data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength));
+      ws.send(memory.slice(dataPtr, dataPtr + dataLen));
     } else {
-      ws.send(new TextDecoder().decode(data));
+      ws.send(textDecoder.decode(memory.subarray(dataPtr, dataPtr + dataLen)));
     }
   }
   wsClose(wsId, code, reasonPtr, reasonLen) {
@@ -382,7 +408,7 @@ class ZxBridge {
     }
   }
   #writeStringToWasm(str) {
-    const encoded = new TextEncoder().encode(str);
+    const encoded = textEncoder.encode(str);
     return this.#writeBytesToWasm(encoded);
   }
   #writeBytesToWasm(data) {
@@ -390,11 +416,12 @@ class ZxBridge {
     writeBytes(ptr, data);
     return { ptr, len: data.length };
   }
+  #eventbridge;
   eventbridge(velementId, eventTypeId, event) {
+    if (!this.#eventbridge)
+      return;
     const eventRef = storeValueGetRef(event);
-    const eventbridge = this.#exports.__zx_eventbridge;
-    if (eventbridge)
-      eventbridge(velementId, eventTypeId, eventRef);
+    this.#eventbridge(velementId, eventTypeId, eventRef);
   }
   static createImportObject(bridgeRef) {
     return {
@@ -421,15 +448,109 @@ class ZxBridge {
         _wsClose: (wsId, code, reasonPtr, reasonLen) => {
           bridgeRef.current?.wsClose(wsId, code, reasonPtr, reasonLen);
         },
-        _ce: (id) => {
+        _ce: (id, vnodeId) => {
           const tagName = TAG_NAMES[id];
           const el = id >= SVG_TAG_START_INDEX ? document.createElementNS("http://www.w3.org/2000/svg", tagName) : document.createElement(tagName);
+          el.__zx_ref = Number(vnodeId);
+          domNodes.set(vnodeId, el);
           return storeValueGetRef(el);
+        },
+        _ct: (ptr, len, vnodeId) => {
+          const text = readString(ptr, len);
+          const node = document.createTextNode(text);
+          node.__zx_ref = Number(vnodeId);
+          domNodes.set(vnodeId, node);
+          return storeValueGetRef(node);
+        },
+        _sa: (vnodeId, namePtr, nameLen, valPtr, valLen) => {
+          domNodes.get(vnodeId)?.setAttribute(readString(namePtr, nameLen), readString(valPtr, valLen));
+        },
+        _ra: (vnodeId, namePtr, nameLen) => {
+          domNodes.get(vnodeId)?.removeAttribute(readString(namePtr, nameLen));
+        },
+        _snv: (vnodeId, ptr, len) => {
+          const node = domNodes.get(vnodeId);
+          if (node)
+            node.nodeValue = readString(ptr, len);
+        },
+        _ac: (parentId, childId) => {
+          const parent = domNodes.get(parentId);
+          const child = domNodes.get(childId);
+          if (parent && child)
+            parent.appendChild(child);
+        },
+        _ib: (parentId, childId, refId) => {
+          const parent = domNodes.get(parentId);
+          const child = domNodes.get(childId);
+          const ref = domNodes.get(refId) ?? null;
+          if (parent && child)
+            parent.insertBefore(child, ref);
+        },
+        _rc: (parentId, childId) => {
+          const parent = domNodes.get(parentId);
+          const child = domNodes.get(childId);
+          if (parent && child) {
+            parent.removeChild(child);
+            cleanupDomNodes(child);
+          }
+        },
+        _rpc: (parentId, newId, oldId) => {
+          const parent = domNodes.get(parentId);
+          const newChild = domNodes.get(newId);
+          const oldChild = domNodes.get(oldId);
+          if (parent && newChild && oldChild) {
+            parent.replaceChild(newChild, oldChild);
+            cleanupDomNodes(oldChild);
+          }
+        },
+        _getLocationHref: (bufPtr, bufLen) => {
+          const bytes = textEncoder.encode(window.location.href);
+          const len = Math.min(bytes.length, bufLen);
+          writeBytes(bufPtr, bytes.subarray(0, len));
+          return len;
+        },
+        _getFormData: (vnodeId, bufPtr, bufLen) => {
+          const form = domNodes.get(vnodeId);
+          if (!form || !(form instanceof HTMLFormElement))
+            return 0;
+          const formData = new FormData(form);
+          const urlEncoded = new URLSearchParams(formData).toString();
+          const bytes = textEncoder.encode(urlEncoded);
+          const len = Math.min(bytes.length, bufLen);
+          writeBytes(bufPtr, bytes.subarray(0, len));
+          return len;
+        },
+        _submitFormAction: (vnodeId) => {
+          const form = domNodes.get(vnodeId);
+          if (!form || !(form instanceof HTMLFormElement))
+            return;
+          const formData = new FormData(form);
+          fetch(window.location.href, {
+            method: "POST",
+            headers: { "X-ZX-Action": "1" },
+            body: formData
+          }).catch(() => {});
+        },
+        _submitFormActionAsync: (vnodeId, statesPtr, statesLen, fetchId) => {
+          const form = domNodes.get(vnodeId);
+          if (!form || !(form instanceof HTMLFormElement))
+            return;
+          const statesJson = statesLen > 0 ? readString(statesPtr, statesLen) : "[]";
+          bridgeRef.current?.submitFormActionAsync(form, statesJson, fetchId);
         }
       }
     };
   }
 }
+var domNodes = new Map;
+function cleanupDomNodes(node) {
+  const ref = node.__zx_ref;
+  if (ref !== undefined)
+    domNodes.delete(BigInt(ref));
+  const children = node.childNodes;
+  for (let i = 0;i < children.length; i++)
+    cleanupDomNodes(children[i]);
+}
 var SVG_TAG_START_INDEX = 140;
 var TAG_NAMES = [
   "aside",
@@ -685,7 +806,8 @@ function initEventDelegation(bridge, rootSelector = "body") {
         const zxRef = target.__zx_ref;
         if (zxRef !== undefined) {
           bridge.eventbridge(BigInt(zxRef), EVENT_TYPE_MAP[eventType] ?? 0, event);
-          break;
+          if (event.cancelBubble)
+            break;
         }
         target = target.parentElement;
       }