ziex 0.1.0-dev.1367 → 0.1.0-dev.1377

package/{pkg/ziex/src/react → jsx}/dom.d.ts

@@ -1,12 +1,8 @@
-import type { ComponentMetadata } from "./types";
+import type { ComponentFn, ComponentMetadata } from "./types";
 export type PreparedComponent = {
     domNode: HTMLElement;
-    props: Record<string, any> & {
-        dangerouslySetInnerHTML?: {
-            __html: string;
-        };
-    };
-    Component: (props: any) => React.ReactElement;
+    props: Record<string, any>;
+    Component: ComponentFn;
 };
 export declare function prepareComponent(component: ComponentMetadata): Promise<PreparedComponent>;
 export declare function filterComponents(components: ComponentMetadata[]): ComponentMetadata[];
@@ -17,5 +13,5 @@ export type DiscoveredComponent = {
     container: HTMLElement;
 };
 export declare function discoverComponents(): DiscoveredComponent[];
-export type ComponentRegistry = Record<string, () => Promise<(props: any) => React.ReactElement>>;
-export declare function hydrateAll(registry: ComponentRegistry, render: (container: HTMLElement, Component: (props: any) => React.ReactElement, props: Record<string, any>) => void): Promise<void>;
+export type ComponentRegistry = Record<string, () => Promise<ComponentFn>>;
+export declare function hydrateAll(registry: ComponentRegistry, render: (container: HTMLElement, Component: ComponentFn, props: Record<string, any>) => void): Promise<void>;

package/{pkg/ziex/src/react → jsx}/index.d.ts

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

package/{react → jsx}/index.js

@@ -1,23 +1,12 @@
-var __defProp = Object.defineProperty;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-
-// src/react/dom.ts
+// src/jsx/dom.ts
 function findCommentMarker(id) {
   const startPrefix = `$${id} `;
   const endMarker = `/$${id}`;
-  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT, null);
+  const walker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_COMMENT,
+    null
+  );
   let startComment = null;
   let endComment = null;
   let name = "";
@@ -34,7 +23,8 @@ function findCommentMarker(id) {
         const jsonStr = content.slice(jsonStart);
         try {
           props = JSON.parse(jsonStr);
-        } catch {}
+        } catch {
+        }
       } else {
         name = content.trim();
       }
@@ -77,7 +67,11 @@ function filterComponents(components) {
 }
 function discoverComponents() {
   const components = [];
-  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT, null);
+  const walker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_COMMENT,
+    null
+  );
   const markers = [];
   let node;
   while (node = walker.nextNode()) {
@@ -97,7 +91,8 @@ function discoverComponents() {
           name = content.slice(0, jsonStart).trim();
           try {
             props = JSON.parse(content.slice(jsonStart));
-          } catch {}
+          } catch {
+          }
         } else {
           name = content.trim();
         }
@@ -112,8 +107,7 @@ function discoverComponents() {
     }
   }
   for (const marker of markers) {
-    if (!marker.endComment)
-      continue;
+    if (!marker.endComment) continue;
     const container = createContainerBetweenMarkers(marker.startComment, marker.endComment);
     components.push({
       id: marker.id,
@@ -141,8 +135,8 @@ async function hydrateAll(registry, render) {
   }));
 }
 export {
-  prepareComponent,
-  hydrateAll,
+  discoverComponents,
   filterComponents,
-  discoverComponents
+  hydrateAll,
+  prepareComponent
 };

package/{pkg/ziex/src/react → jsx}/types.d.ts

@@ -26,7 +26,7 @@
  * @example
  * ```tsx
  * // Using ComponentMetadata with prepareComponent:
- * import { prepareComponent, type ComponentMetadata } from "ziex";
+ * import { prepareComponent, type ComponentMetadata } from "ziex/jsx";
  *
  * for (const component of components) {
  *   const { domNode, props, Component } = await prepareComponent(component);
@@ -34,6 +34,11 @@
  * }
  * ```
  */
+/**
+ * Opaque JSX element from any JSX library (React, Solid, Preact, etc.).
+ */
+export type JsxElement = unknown;
+export type ComponentFn = (props: any) => JsxElement;
 export type ComponentMetadata = {
     /**
      * The name of the component as declared in the ZX file.
@@ -115,9 +120,9 @@ export type ComponentMetadata = {
     /**
      * The rendering type of the component, determining how it will be rendered on the client.
      *
-     * - **"react"** (Client Side React): The component is a React component that will be rendered
-     *   using React's client-side rendering. The component file should export a default React
-     *   component function. This is the most common type for interactive UI components.
+     * - **"react"** (Client Side JSX): The component is a JSX component that will be rendered
+     *   client-side with a JSX library (React, Solid, Preact, etc.). The component file should
+     *   export a default JSX component function.
      *
      * - **"client"** (Client Side Zig): The component is a Zig component that will be compiled to
      *   WebAssembly and rendered on the client side. This allows you to use Zig's performance
@@ -127,7 +132,7 @@ export type ComponentMetadata = {
      *
      * @example
      * ```tsx
-     * // CSR component (React):
+     * // CSR component (JSX):
      * <CounterComponent @rendering={.react} max_count={10} />
      * // type: "react"
      *
@@ -157,13 +162,13 @@ export type ComponentMetadata = {
      * code-splitting and lazy loading of components, improving initial page load performance
      * by only loading components when they are needed.
      *
-     * For CSR components, the imported module should export a default React component.
+     * For CSR components, the imported module should export a default JSX component.
      * For Client components, the import mechanism depends on the WASM module structure.
      *
      * The function is called during client-side hydration to load and render the component
      * into its corresponding DOM container element.
      *
-     * @returns A Promise that resolves to a component function that accepts props and returns a React element.
+     * @returns A Promise that resolves to a component function that accepts props and returns a JSX element.
      *
      * @example
      * ```tsx
@@ -180,11 +185,11 @@ export type ComponentMetadata = {
      * @example
      * ```tsx
      * // With prepareComponent helper:
-     * import { prepareComponent } from "ziex";
+     * import { prepareComponent } from "ziex/jsx";
      *
      * const { Component, props, domNode } = await prepareComponent(component);
      * // Component is loaded and ready to render with props
      * ```
      */
-    import: () => Promise<(props: any) => React.ReactElement>;
+    import: () => Promise<ComponentFn>;
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "ziex",
-  "version": "0.1.0-dev.1367",
+  "version": "0.1.0-dev.1377",
+  "types": "index.d.ts",
   "description": "Ziex is a framework for building web applications with Zig.",
   "main": "index.js",
   "type": "module",
@@ -9,7 +10,7 @@
   },
   "exports": {
     ".": "./index.js",
-    "./react": "./react/index.js",
+    "./jsx": "./jsx/index.js",
     "./wasm": "./wasm/index.js",
     "./wasm/init": "./wasm/init.js",
     "./cloudflare": "./cloudflare/index.js",
@@ -37,16 +38,7 @@
   "license": "MIT",
   "scripts": {},
   "dependencies": {
-    "@ziex/cli": "0.1.0-dev.1367"
+    "@ziex/cli": "0.1.0-dev.1377"
   },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
-  },
-  "module": "index.js",
-  "types": "index.d.ts"
-}
+  "module": "index.js"
+}

package/vercel/index.js

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