ziex 0.1.0-dev.785 → 0.1.0-dev.786

package/index.js

@@ -13,7 +13,7 @@ var __export = (target, all) => {
 var zx = {
   name: "zx",
   version: "0.1.0-dev.785",
-  jsglue_version: "0.1.0-dev.727",
+  jsglue_version: "0.1.0-dev.785",
   description: "ZX is a framework for building web applications with Zig.",
   repository: "https://github.com/ziex-dev/ziex",
   homepage: "https://ziex.dev",

package/package.json

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

package/wasm/index.d.ts

@@ -61,11 +61,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,7 +298,7 @@ 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);
@@ -333,7 +345,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 +381,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 +404,7 @@ class ZxBridge {
     }
   }
   #writeStringToWasm(str) {
-    const encoded = new TextEncoder().encode(str);
+    const encoded = textEncoder.encode(str);
     return this.#writeBytesToWasm(encoded);
   }
   #writeBytesToWasm(data) {
@@ -401,11 +412,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 +444,74 @@ 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);
+          }
         }
       }
     };
   }
 }
+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 +767,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 +791,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,7 +287,7 @@ 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);
@@ -322,7 +334,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 +370,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 +393,7 @@ class ZxBridge {
     }
   }
   #writeStringToWasm(str) {
-    const encoded = new TextEncoder().encode(str);
+    const encoded = textEncoder.encode(str);
     return this.#writeBytesToWasm(encoded);
   }
   #writeBytesToWasm(data) {
@@ -390,11 +401,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 +433,74 @@ 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);
+          }
         }
       }
     };
   }
 }
+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 +756,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;
       }