ziex 0.1.0-dev.460 → 0.1.0-dev.522

package/README.md

@@ -89,9 +89,10 @@ const zx = @import("zx");
     - [x] Virtual DOM and diffing
     - [x] Rendering only changed nodes
     - [x] `on`event handler
-    - [ ] State managment
-    - [ ] Hydration
+    - [x] State managment
+    - [x] Hydration
     - [ ] Lifecycle hook
+    - [ ] Server Actions
 - [x] Client Side Rendering (CSR) via React
 - [x] Routing
     - [x] File-system Routing
@@ -116,7 +117,7 @@ const zx = @import("zx");
     - [x] HTML (optimized by default)
 - [ ] Middleware (_cancalled_)
 - [ ] Caching (configurable)
-    - [ ] Component
+    - [x] Component
     - [ ] Layout
     - [x] Page
     - [ ] Assets
@@ -144,8 +145,8 @@ const zx = @import("zx");
     - [x] `update` Update the version of ZX dependency
     - [x] `upgrade` Upgrade the version of ZX CLI
 - [ ] Platform
-    - [x] Web Server
-    - [x] Web Browser
+    - [x] Server
+    - [x] Browser
     - [ ] iOS
     - [ ] Android
     - [ ] macOS

package/index.js

@@ -1,7 +1,7 @@
 // src/index.ts
 var zx = {
   name: "zx",
-  version: "0.1.0-dev.460",
+  version: "0.1.0-dev.522",
   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.460",
+  "version": "0.1.0-dev.522",
   "description": "ZX is a framework for building web applications with Zig.",
   "main": "index.js",
   "type": "module",
@@ -12,7 +12,7 @@
   "homepage": "https://github.com/nurulhudaapon/zx",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/nurulhudaapon/zx.git"
+    "url": "https://github.com/nurulhudaapon/zx.git"
   },
   "keywords": [
     "zx",
@@ -30,4 +30,4 @@
   "license": "MIT",
   "module": "index.js",
   "types": "index.d.ts"
-}
+}

package/react/dom.d.ts

@@ -8,14 +8,15 @@ export type PreparedComponent = {
     /**
      * The HTML element where the component should be rendered.
      *
-     * This is the DOM node that was server-rendered by ZX with the component's unique ID.
-     * The element already exists in the DOM and contains the server-rendered fallback content.
-     * React will hydrate this element, replacing its contents with the interactive component.
+     * 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
-     * // The DOM node corresponds to HTML like:
-     * // <div id="zx-dcde04c415da9d1b15ca2690d8b497ae" data-props="...">...</div>
+     * // 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} />);
@@ -23,42 +24,28 @@ export type PreparedComponent = {
      */
     domNode: HTMLElement;
     /**
-     * Component props parsed from the server-rendered HTML.
+     * Component props parsed from the comment marker.
      *
-     * Props are extracted from the `data-props` attribute (JSON-encoded) on the component's
-     * container element. If the component has children from server side then they are automatically converted to
-     * `dangerouslySetInnerHTML` for React compatibility.
+     * 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:
-     * // <div data-props='{"max_count":10,"label":"Counter"}' data-children="<span>0</span>">...</div>
+     * // <!--$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",
-     * //   dangerouslySetInnerHTML: { __html: "<span>0</span>" }
-     * // }
+     * // props = { max_count: 10, label: "Counter" }
      * ```
      */
     props: Record<string, any> & {
         /**
          * React's special prop for setting inner HTML directly.
          *
-         * Automatically added when the component has children in the ZX file. The HTML string
-         * is extracted from the `data-children` attribute on the server-rendered element.
-         *
-         * @example
-         * ```tsx
-         * // In ZX file:
-         * <MyComponent @rendering={.react}>
-         *   <p>Child content</p>
-         * </MyComponent>
-         *
-         * // Results in:
-         * // props.dangerouslySetInnerHTML = { __html: "<p>Child content</p>" }
-         * ```
+         * May be used when the component has server-rendered children that should
+         * be preserved during hydration.
          */
         dangerouslySetInnerHTML?: {
             __html: string;
@@ -85,12 +72,12 @@ export type PreparedComponent = {
     Component: (props: any) => React.ReactElement;
 };
 /**
- * Prepares a client-side component for hydration by locating its DOM container, extracting
- * props and children from server-rendered HTML attributes, and lazy-loading the component module.
+ * 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 reads data attributes (`data-props`, `data-children`) from the DOM element
- * with the component's unique ID, then lazy-loads the component module for rendering.
+ * 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
@@ -98,8 +85,8 @@ export type PreparedComponent = {
  * @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 container element cannot be found in the DOM. This typically
- *                 happens if the component ID doesn't match any element, the script runs before
+ * @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
@@ -118,18 +105,58 @@ export type PreparedComponent = {
  *
  * @example
  * ```tsx
- * // With async/await:
- * async function hydrateComponent(component: ComponentMetadata) {
- *   try {
- *     const { domNode, Component, props } = await prepareComponent(component);
- *     createRoot(domNode).render(<Component {...props} />);
- *   } catch (error) {
- *     console.error(`Failed to hydrate ${component.name}:`, error);
- *   }
- * }
- *
- * Promise.all(components.map(hydrateComponent));
+ * // 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.d.ts

@@ -1,2 +1,2 @@
-export { prepareComponent, filterComponents, type PreparedComponent } from "./dom";
+export { prepareComponent, filterComponents, discoverComponents, hydrateAll, type PreparedComponent, type DiscoveredComponent, type ComponentRegistry, } from "./dom";
 export type { ComponentMetadata } from "./types";

package/react/index.js

@@ -1,13 +1,56 @@
 // src/react/dom.ts
+function findCommentMarker(id) {
+  const startMarker = `$${id}`;
+  const endMarker = `/$${id}`;
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT, null);
+  let startComment = null;
+  let endComment = null;
+  let node;
+  while (node = walker.nextNode()) {
+    const text = node.textContent?.trim() || "";
+    if (text === startMarker) {
+      startComment = node;
+    }
+    if (text === endMarker) {
+      endComment = node;
+      break;
+    }
+  }
+  if (startComment && endComment) {
+    return { startComment, endComment };
+  }
+  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";
+  let current = startComment.nextSibling;
+  while (current && current !== endComment) {
+    const next = current.nextSibling;
+    container.appendChild(current);
+    current = next;
+  }
+  endComment.parentNode?.insertBefore(container, endComment);
+  return container;
+}
 async function prepareComponent(component) {
-  const domNode = document.getElementById(component.id);
-  if (!domNode)
-    throw new Error(`Root element ${component.id} not found`, { cause: component });
-  const props = JSON.parse(domNode.getAttribute("data-props") || "{}");
-  const htmlChildren = domNode.getAttribute("data-children") ?? undefined;
-  if (htmlChildren) {
-    props.dangerouslySetInnerHTML = { __html: htmlChildren };
+  const marker = findCommentMarker(component.id);
+  if (!marker) {
+    throw new Error(`Comment marker for ${component.id} not found`, { cause: component });
   }
+  const metadata = getComponentMetadata(component.id);
+  const props = metadata.props;
+  const domNode = createContainerBetweenMarkers(marker.startComment, marker.endComment);
   const Component = await component.import();
   return { domNode, props, Component };
 }
@@ -15,7 +58,49 @@ function filterComponents(components) {
   const currentPath = window.location.pathname;
   return components.filter((component) => component.route === currentPath || !component.route);
 }
+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 marker = findCommentMarker(id);
+    if (!marker)
+      continue;
+    const container = createContainerBetweenMarkers(marker.startComment, marker.endComment);
+    components.push({ id, name, props, container });
+  }
+  return components;
+}
+async function hydrateAll(registry, render) {
+  const components = discoverComponents();
+  await Promise.all(components.map(async ({ name, props, container }) => {
+    const importer = registry[name];
+    if (!importer) {
+      console.warn(`Component "${name}" not found in registry`);
+      return;
+    }
+    try {
+      const Component = await importer();
+      render(container, Component, props);
+    } catch (error) {
+      console.error(`Failed to hydrate "${name}":`, error);
+    }
+  }));
+}
 export {
   prepareComponent,
-  filterComponents
+  hydrateAll,
+  filterComponents,
+  discoverComponents
 };

package/react/types.d.ts

@@ -85,17 +85,16 @@ export type ComponentMetadata = {
      */
     route: string | null;
     /**
-     * A unique HTML element identifier for the component's root DOM node.
+     * A unique identifier for the component's hydration boundary.
      *
      * This ID is generated by hashing the component's path and name using MD5, then formatting it
-     * as a hex string with the "zx-" prefix. The ID is used to locate the component's container
-     * element in the DOM during client-side hydration.
+     * as a hex string with the "zx-" prefix and a counter suffix. The ID is used to locate the
+     * component's comment markers in the DOM during client-side hydration.
      *
-     * The ID format is: `zx-{32 hex characters}` (e.g., `zx-dcde04c415da9d1b15ca2690d8b497ae`)
+     * The ID format is: `zx-{32 hex characters}-{counter}` (e.g., `zx-dcde04c415da9d1b15ca2690d8b497ae-0`)
      *
-     * When the same component is used multiple times on a page, each instance gets the same base ID
-     * since they share the same path and name. The ZX runtime uses this ID along with `data-props`
-     * and `data-children` attributes to hydrate the component with the correct props and children.
+     * The ZX runtime renders components with comment markers in the format:
+     * `<!--$id name props-->...<!--/$id-->`
      *
      * @example
      * ```tsx
@@ -103,15 +102,13 @@ export type ComponentMetadata = {
      * {
      *   name: "CounterComponent",
      *   path: "./components/Counter.tsx",
-     *   id: "zx-dcde04c415da9d1b15ca2690d8b497ae"
+     *   id: "zx-dcde04c415da9d1b15ca2690d8b497ae-0"
      * }
      *
-     * // Generated HTML:
-     * <div id="zx-dcde04c415da9d1b15ca2690d8b497ae"
-     *      data-props='{"max_count":10}'
-     *      data-children="...">
-     *   <!-- Server-rendered content -->
-     * </div>
+     * // Generated HTML with comment markers:
+     * <!--$zx-dcde04c415da9d1b15ca2690d8b497ae-0 CounterComponent {"max_count":10}-->
+     * <button>0</button>
+     * <!--/$zx-dcde04c415da9d1b15ca2690d8b497ae-0-->
      * ```
      */
     id: string;

package/wasm/index.d.ts

@@ -1,38 +1,52 @@
-declare class ZXInstance {
+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;
+/** 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;
-    /** Get the VElement ID from a DOM element */
-    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<void>;
+/** 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,73 +306,45 @@ var EVENT_TYPE_MAP = {
   touchmove: 17,
   scroll: 18
 };
-var jsz = new ZigJS;
-var importObject = {
-  module: {},
-  env: {},
-  ...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) {
-      console.warn(`[ZX] Event delegation root "${rootSelector}" not found`);
-      return;
-    }
-    for (const eventType of DELEGATED_EVENTS) {
-      root.addEventListener(eventType, (event) => {
-        this.#handleDelegatedEvent(eventType, event);
-      }, { passive: eventType.startsWith("touch") || eventType === "scroll" });
-    }
-    this.#eventDelegationInitialized = true;
-    console.debug("[ZX] Event delegation initialized on", rootSelector);
-  }
-  #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 { instance } = await WebAssembly.instantiateStreaming(fetch(url), importObject);
+  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 { source, bridge };
 }
 export {
-  init
+  storeValueGetRef,
+  jsz,
+  initEventDelegation,
+  init,
+  ZxBridge,
+  CallbackType
 };