create-ziex 0.1.0-dev.1 → 0.1.0-dev.2

package/bin/index.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+
+import { intro, outro, text, select, spinner, isCancel, cancel } from '@clack/prompts';
+import color from 'picocolors';
+import { downloadTemplate } from 'giget';
+import { replaceInFile } from 'replace-in-file';
+
+import path from 'node:path';
+
+async function main() {
+  console.log();
+  intro(color.bgCyan(color.black(' create-ziex ')));
+
+  // 1. Gather User Input
+  const project = await text({
+    message: 'Where should we create your project?',
+    placeholder: './my-ziex-app',
+    validate: (value) => {
+      if (!value) return 'Please enter a path.';
+    },
+  });
+
+  if (isCancel(project)) {
+    cancel('Operation cancelled.');
+    process.exit(0);
+  }
+
+  const template = await select({
+    message: 'Pick a template',
+    options: [
+      { value: 'vercel', label: 'Vercel', hint: 'Ziex on Vercel' },
+      { value: 'cloudflare', label: 'Cloudflare', hint: 'Ziex on Cloudflare' },
+    ],
+  });
+
+  const s = spinner();
+  const targetDir = path.resolve(process.cwd(), project);
+
+  // 2. Download from GitHub
+  s.start('Downloading template...');
+  try {
+    // Uses giget to fetch from: github:ziex-dev/templates/templates/<name>
+    await downloadTemplate(`github:ziex-dev/template-${template}`, {
+      dir: targetDir,
+      force: true,
+    });
+    s.stop('Template downloaded successfully!');
+  } catch (err) {
+    s.stop('Failed to download template', 1);
+    console.error(err);
+    process.exit(1);
+  }
+
+  // 3. Perform String Replacements
+  s.start('Customizing project files...');
+  try {
+    const projectName = sanitizeProjectName(path.basename(targetDir));
+    await replaceInFile({
+      files: `${targetDir}/**/*`,
+      from: /zx_app/g,
+      to: projectName,
+    });
+    s.stop('Project customized!');
+  } catch (err) {
+    s.stop('Replacement failed', 1);
+  }
+
+  outro(`Successfully created ${color.cyan(project)}!`);
+  console.log(`\n  cd ${project}\n  zig build dev\n`);
+}
+
+// Make sure project name is suported Zig identifier
+function sanitizeProjectName(name) {
+  return name.replace(/[^a-zA-Z0-9_]/g, '_');
+}
+
+main().catch(console.error);

package/package.json

@@ -1,4 +1,15 @@
 {
   "name": "create-ziex",
-  "version": "0.1.0-dev.1"
+  "version": "0.1.0-dev.2",
+  "bin": "bin/index.js",
+  "type": "module",
+  "scripts": {
+    "start": "node bin/index.js"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.1.0",
+    "giget": "^3.1.2",
+    "picocolors": "^1.1.1",
+    "replace-in-file": "^8.4.0"
+  }
 }

package/tmp/cf/.gitattributes

@@ -0,0 +1,3 @@
+* text=auto eol=lf
+# Make .zx files be treated as .zig files on GitHub for syntax highlighting
+*.zx text eol=lf linguist-language=Zig

package/tmp/cf/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2025 Nurul Huda (Apon).
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/tmp/cf/README.md

@@ -0,0 +1,82 @@
+# Ziex App on Cloudflare
+
+> A starter template for building web applications with [Ziex](https://ziex.dev) deployed on [Cloudflare Workers](https://workers.cloudflare.com/).
+
+**[Documentation →](https://ziex.dev)**
+
+[![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/ziex-dev/template-cloudflare)
+
+## Getting Started
+
+### Prerequisites
+
+**1. Install ZX CLI**
+
+```bash
+# Linux/macOS
+curl -fsSL https://ziex.dev/install | bash
+
+# Windows
+powershell -c "irm ziex.dev/install.ps1 | iex"
+```
+
+**2. Install Zig**
+
+```bash
+brew install zig  # macOS
+winget install -e --id zig.zig  # Windows
+```
+
+[_Other platforms →_](https://ziglang.org/learn/getting-started/)
+
+**3. Install Node.js** (for Wrangler)
+
+[_Download →_](https://nodejs.org/)
+
+## Project Structure
+
+```
+├── app/
+│   ├── assets/         # Static assets (CSS, images, etc)
+│   ├── main.ts         # Cloudflare Worker entrypoint
+│   ├── main.zig        # Zig entrypoint
+│   ├── pages/          # Pages (Zig/ZX)
+│   │   ├── layout.zx   # Root layout
+│   │   ├── page.zx     # Home page
+│   │   ├── client.zx   # Client-side component
+│   │   └── ...
+│   └── public/         # Public static files (favicon, etc)
+├── build.zig           # Zig build script
+├── build.zig.zon       # Zig package manager config
+├── wrangler.jsonc      # Cloudflare Workers config
+└── package.json
+```
+
+## Usage
+
+### Development
+
+```bash
+zig build dev
+```
+
+App will be available at [`http://localhost:3000`](http://localhost:3000) with hot reload enabled.
+
+### Deploy to Cloudflare
+
+```bash
+npx wrangler deploy
+```
+
+Or click the **Deploy to Cloudflare Workers** button above for one-click deployment.
+
+## Contributing
+
+Contributions are welcome! For feature requests, bug reports, or questions, see the [Ziex Repo](https://github.com/ziex-dev/ziex).
+
+## Links
+
+- [Documentation](https://ziex.dev)
+- [Discord](https://ziex.dev/r/discord)
+- [Cloudflare Workers Docs](https://developers.cloudflare.com/workers/)
+- [Zig Language](https://ziglang.org/)

package/tmp/cf/app/assets/style.css

@@ -0,0 +1,55 @@
+body {
+    margin: 0;
+    font-family: sans-serif;
+    font-size: 1.4rem;
+    line-height: 1.6;
+    color: white;
+    background-color: black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 100vh;
+}
+
+a {
+    color: #ffffff;
+    font-size: 1rem;
+    text-decoration: none;
+}
+
+button {
+    padding: 2px;
+    min-width: 100px;
+    font-size: 0.8rem;
+    border-radius: 5px;
+    margin: 3px;
+    border: 1px solid #ffffff;
+    background-color: transparent;
+    color: #ffffff;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    &:hover {
+        background-color: #ffffff;
+        color: #000000;
+    }
+}
+
+.counter-row {
+    height: 150px;
+    margin: 10px;
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    align-items: center;
+}
+
+.counter-row > * {
+    min-width: 150px;
+}
+
+.counter-plus {
+    width: 70px;
+    display: inline-block;
+}

package/tmp/cf/app/main.ts

@@ -0,0 +1,4 @@
+import { Ziex } from "ziex";
+import module from "../zig-out/bin/cf.wasm";
+
+export default new Ziex<Env>({ module, kv: "KV" });

package/tmp/cf/app/main.zig

@@ -0,0 +1,19 @@
+const std = @import("std");
+const zx = @import("zx");
+
+pub fn main() !void {
+    if (zx.platform == .browser) return zx.Client.run();
+    if (zx.platform == .edge) return zx.Edge.run();
+
+    var gpa = std.heap.DebugAllocator(.{}){};
+    const allocator = gpa.allocator();
+    defer _ = gpa.deinit();
+
+    const app = try zx.Server(void).init(allocator, .{}, {});
+    defer app.deinit();
+
+    app.info();
+    try app.start();
+}
+
+pub const std_options = zx.std_options;

package/tmp/cf/app/pages/about/page.zx

@@ -0,0 +1,14 @@
+pub fn Page(ctx: zx.PageContext) zx.Component {
+    return (
+        <main @allocator={ctx.arena}>
+            <p>{get_about_zx()}</p>
+            <a href="/">Back to Home</a>
+        </main>
+    );
+}
+
+pub fn get_about_zx() []const u8 {
+    return "Ziex is a framework for building web applications with Zig.";
+}
+
+const zx = @import("zx");

package/tmp/cf/app/pages/client.zx

@@ -0,0 +1,35 @@
+var count: *zx.State(i128) = undefined;
+
+pub fn CounterComponent(ctx: *zx.ComponentCtx(struct { count: i128 })) zx.Component {
+    count = ctx.state(i128, ctx.props.count);
+
+    return (
+        <div @allocator={ctx.allocator}>
+            <button onclick={reset}>Reset</button>
+            <h5>{&count}</h5>
+            <button onclick={decrement}>Decrement</button>
+            <button onclick={increment}>Increment</button>
+        </div>
+    );
+}
+
+fn increment() void {
+    count.set(count.get() + 1);
+    fetch("?increment=true");
+}
+
+fn decrement() void {
+    count.set(count.get() - 1);
+    fetch("?decrement=true");
+}
+
+fn reset(_: zx.client.Event) void {
+    count.set(0);
+    fetch("?reset=true");
+}
+
+fn fetch(url: []const u8) void {
+    _ = zx.fetch(.noop, zx.client_allocator, url, .{}) catch {};
+}
+
+const zx = @import("zx");

package/tmp/cf/app/pages/layout.zx

@@ -0,0 +1,18 @@
+pub fn Layout(ctx: zx.LayoutContext, children: zx.Component) zx.Component {
+    return (
+        <html @allocator={ctx.arena} lang="en-US">
+            <head>
+                <meta charset="UTF-8" />
+                <title>Ziex</title>
+                <link rel="stylesheet" href="/assets/style.css" />
+            </head>
+
+            <body>
+                <h1>Ziex</h1>
+                {children}
+            </body>
+        </html>
+    );
+}
+
+const zx = @import("zx");

package/tmp/cf/app/pages/page.zx

@@ -0,0 +1,28 @@
+pub fn Page(ctx: zx.PageContext) !zx.Component {
+    const query = ctx.request.searchParams;
+
+    if (query.get("reset")) |_|
+        count = 0
+    else if (query.get("increment")) |_|
+        count += 1
+    else if (query.get("decrement")) |_|
+        count -= 1
+    else
+        count += 1;
+
+    return (
+        <main @allocator={ctx.arena}>
+            <p>Ziex is a framework for building web applications with Zig.</p>
+            <a href={zx.info.homepage} target="_blank">See Ziex Docs →</a>
+            <br />
+            <CounterComponent @rendering={.client} count={count} />
+            <br />
+            <hr />
+            <a href="/about">Navigate to About Page</a>
+        </main>
+    );
+}
+var count: i128 = 0;
+
+const zx = @import("zx");
+pub const CounterComponent = @import("./client.zig").CounterComponent;

package/tmp/cf/build.zig

@@ -0,0 +1,32 @@
+const std = @import("std");
+const zx = @import("zx");
+
+pub fn build(b: *std.Build) !void {
+    // --- Target and Optimize from `zig build` arguments ---
+    const target = b.standardTargetOptions(.{});
+    const optimize = b.standardOptimizeOption(.{});
+
+    // --- ZX App Executable ---
+    const app_exe = b.addExecutable(.{
+        .name = "cf",
+        .root_module = b.createModule(.{
+            .root_source_file = b.path("app/main.zig"),
+            .target = target,
+            .optimize = optimize,
+        }),
+    });
+
+    // --- ZX setup: wires dependencies and adds `zx`/`dev` build steps ---
+    var zx_build = try zx.init(b, app_exe, .{});
+
+    // HACK: on wasi we do not inject jsglue automatically yet
+    if (target.result.os.tag == .wasi)
+        zx_build.addElement(.{
+            .parent = .body,
+            .position = .ending,
+            .element = .{
+                .tag = "script",
+                .attributes = "src=\"https://cdn.jsdelivr.net/npm/ziex@0.1.0-dev.804/wasm/init.min.js\"",
+            },
+        });
+}

package/tmp/cf/build.zig.zon

@@ -0,0 +1,17 @@
+.{
+    .name = .cf,
+    .version = "0.0.0",
+    .fingerprint = 0x77989223bd4e92d3,
+    .minimum_zig_version = "0.15.2",
+    .dependencies = .{
+        .zx = .{
+            .url = "git+https://github.com/ziex-dev/ziex#e385bf19316eb365a7edb41fa8465e7bf977a04c",
+            .hash = "zx-0.1.0-dev.805-8okzKpLD6wAa_H-raN-DxUH_YAfYibSGt-778EdgZXta",
+        },
+    },
+    .paths = .{
+        "build.zig",
+        "build.zig.zon",
+        "app",
+    },
+}

package/tmp/cf/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "ziex_cloudflare",
+  "type": "module",
+  "scripts": {
+    "build": "wrangler build",
+    "deploy": "wrangler deploy",
+    "dev": "wrangler dev"
+  },
+  "dependencies": {
+    "ziex": "^0.1.0-dev.804"
+  },
+  "devDependencies": {
+    "wrangler": "^4.73.0"
+  }
+}

package/tmp/cf/type.d.ts

@@ -0,0 +1,6 @@
+declare module "*.wasm" {
+    /** Compiled Ziex WASI Binary */
+    const module: WebAssembly.Module;
+    export default module;
+}
+

package/tmp/cf/wrangler.jsonc

@@ -0,0 +1,20 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "ziex_cloudflare",
+  "main": "app/main.ts",
+  "compatibility_date": "2026-03-10",
+  "compatibility_flags": ["nodejs_compat"],
+  "kv_namespaces": [
+    {
+      "binding": "KV",
+    },
+  ],
+  "build": {
+    "watch_dir": "./app",
+    "command": "zig build -Dtarget=wasm32-wasi -Doptimize=ReleaseSmall",
+  },
+  "assets": {
+    "directory": "./zig-out/static",
+    "binding": "ASSETS",
+  },
+}

package/tmp/test-real/.gitattributes

@@ -0,0 +1,3 @@
+* text=auto eol=lf
+# Make .zx files be treated as .zig files on GitHub for syntax highlighting
+*.zx text eol=lf linguist-language=Zig

package/tmp/test-real/.vercelignore

@@ -0,0 +1,16 @@
+# Zig
+.zig-cache
+zig-out
+
+# Ziex
+/dist
+/bundle
+
+# Node.js
+node_modules
+
+# Vercel
+.vercel
+
+# Vercel Node.js - Remove if you want to use Node.js runtime
+api/nodejs.ts 

package/tmp/test-real/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2025 Nurul Huda (Apon).
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/tmp/test-real/README.md

@@ -0,0 +1,85 @@
+# Ziex App on Vercel
+
+> A starter template for building web applications with [Ziex](https://ziex.dev) deployed on [Vercel](https://vercel.com/).
+
+**[Documentation →](https://ziex.dev)**
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/ziex-dev/template-vercel)
+
+## Getting Started
+
+### Prerequisites
+
+**1. Install ZX CLI**
+
+```bash
+# Linux/macOS
+curl -fsSL https://ziex.dev/install | bash
+
+# Windows
+powershell -c "irm ziex.dev/install.ps1 | iex"
+```
+
+**2. Install Zig**
+
+```bash
+brew install zig  # macOS
+winget install -e --id zig.zig  # Windows
+```
+
+[_Other platforms →_](https://ziglang.org/learn/getting-started/)
+
+**3. Install Node.js** (for Vercel CLI)
+
+[_Download →_](https://nodejs.org/)
+
+## Project Structure
+
+```
+├── api/
+│   └── index.ts        # Vercel Edge Function entrypoint
+│   └── nodejs.ts       # Vercel Node.js Function entrypoint
+├── app/
+│   ├── assets/         # Static assets (CSS, images, etc)
+│   ├── main.zig        # Zig entrypoint
+│   ├── pages/          # Pages (Zig/ZX)
+│   │   ├── layout.zx   # Root layout
+│   │   ├── page.zx     # Home page
+│   │   ├── client.zx   # Client-side component
+│   │   └── ...
+│   └── public/         # Public static files (favicon, etc)
+├── build.zig           # Zig build script
+├── build.zig.zon       # Zig package manager config
+└── package.json
+```
+
+## Usage
+
+By default the app is configured to use Vercel Edge Functions. If you want to use Node.js runtime instead, update .vercelignore to remove `api/nodejs.ts` and update `vercel.json` to point to `api/nodejs.ts` as the entrypoint.
+
+### Development
+
+```bash
+vercel dev
+```
+
+App will be available at [`http://localhost:3000`](http://localhost:3000) with hot reload enabled.
+
+### Deploy to Vercel
+
+```bash
+vercel deploy
+```
+
+Or click the **Deploy with Vercel** button above for one-click deployment.
+
+## Contributing
+
+Contributions are welcome! For feature requests, bug reports, or questions, see the [Ziex Repo](https://github.com/ziex-dev/ziex).
+
+## Links
+
+- [Documentation](https://ziex.dev)
+- [Discord](https://ziex.dev/r/discord)
+- [Vercel Docs](https://vercel.com/docs)
+- [Zig Language](https://ziglang.org/)

package/tmp/test-real/api/index.ts

@@ -0,0 +1,7 @@
+import module from "../zig-out/bin/zx_app.wasm?module";
+import { Ziex } from "../zig-out/pkg/ziex/index.js";
+import { handle } from "../zig-out/pkg/ziex/vercel/index.js";
+
+export const config = { runtime: "edge" };
+
+export default handle(new Ziex({ module }));

package/tmp/test-real/api/nodejs.ts

@@ -0,0 +1,9 @@
+import { fileURLToPath } from "node:url";
+import { readFileSync } from "node:fs";
+import { WASI } from "node:wasi";
+import { Ziex } from "../zig-out/pkg/ziex/index.js";
+
+export default new Ziex({
+    module: readFileSync(fileURLToPath(new URL("../zig-out/bin/ziex_dev.wasm", import.meta.url).href)),
+    wasi: new WASI({ version: "preview1" }),
+});

package/tmp/test-real/app/assets/style.css

@@ -0,0 +1,55 @@
+body {
+    margin: 0;
+    font-family: sans-serif;
+    font-size: 1.4rem;
+    line-height: 1.6;
+    color: white;
+    background-color: black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 100vh;
+}
+
+a {
+    color: #ffffff;
+    font-size: 1rem;
+    text-decoration: none;
+}
+
+button {
+    padding: 2px;
+    min-width: 100px;
+    font-size: 0.8rem;
+    border-radius: 5px;
+    margin: 3px;
+    border: 1px solid #ffffff;
+    background-color: transparent;
+    color: #ffffff;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    &:hover {
+        background-color: #ffffff;
+        color: #000000;
+    }
+}
+
+.counter-row {
+    height: 150px;
+    margin: 10px;
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    align-items: center;
+}
+
+.counter-row > * {
+    min-width: 150px;
+}
+
+.counter-plus {
+    width: 70px;
+    display: inline-block;
+}

package/tmp/test-real/app/main.zig

@@ -0,0 +1,19 @@
+const std = @import("std");
+const zx = @import("zx");
+
+pub fn main() !void {
+    if (zx.platform == .browser) return zx.Client.run();
+    if (zx.platform == .edge) return zx.Edge.run();
+
+    var gpa = std.heap.DebugAllocator(.{}){};
+    const allocator = gpa.allocator();
+    defer _ = gpa.deinit();
+
+    const app = try zx.Server(void).init(allocator, .{}, {});
+    defer app.deinit();
+
+    app.info();
+    try app.start();
+}
+
+pub const std_options = zx.std_options;

package/tmp/test-real/app/pages/about/page.zx

@@ -0,0 +1,14 @@
+pub fn Page(ctx: zx.PageContext) zx.Component {
+    return (
+        <main @allocator={ctx.arena}>
+            <p>{get_about_zx()}</p>
+            <a href="/">Back to Home</a>
+        </main>
+    );
+}
+
+pub fn get_about_zx() []const u8 {
+    return "Ziex is a framework for building web applications with Zig.";
+}
+
+const zx = @import("zx");

package/tmp/test-real/app/pages/client.zx

@@ -0,0 +1,35 @@
+var count: *zx.State(i128) = undefined;
+
+pub fn CounterComponent(ctx: *zx.ComponentCtx(struct { count: i128 })) zx.Component {
+    count = ctx.state(i128, ctx.props.count);
+
+    return (
+        <div @allocator={ctx.allocator}>
+            <button onclick={reset}>Reset</button>
+            <h5>{&count}</h5>
+            <button onclick={decrement}>Decrement</button>
+            <button onclick={increment}>Increment</button>
+        </div>
+    );
+}
+
+fn increment() void {
+    count.set(count.get() + 1);
+    fetch("?increment=true");
+}
+
+fn decrement() void {
+    count.set(count.get() - 1);
+    fetch("?decrement=true");
+}
+
+fn reset(_: zx.client.Event) void {
+    count.set(0);
+    fetch("?reset=true");
+}
+
+fn fetch(url: []const u8) void {
+    _ = zx.fetch(.noop, zx.client_allocator, url, .{}) catch {};
+}
+
+const zx = @import("zx");

package/tmp/test-real/app/pages/layout.zx

@@ -0,0 +1,18 @@
+pub fn Layout(ctx: zx.LayoutContext, children: zx.Component) zx.Component {
+    return (
+        <html @allocator={ctx.arena} lang="en-US">
+            <head>
+                <meta charset="UTF-8" />
+                <title>Ziex</title>
+                <link rel="stylesheet" href="/assets/style.css" />
+            </head>
+
+            <body>
+                <h1>Ziex</h1>
+                {children}
+            </body>
+        </html>
+    );
+}
+
+const zx = @import("zx");

package/tmp/test-real/app/pages/page.zx

@@ -0,0 +1,28 @@
+pub fn Page(ctx: zx.PageContext) !zx.Component {
+    const query = ctx.request.searchParams;
+
+    if (query.get("reset")) |_|
+        count = 0
+    else if (query.get("increment")) |_|
+        count += 1
+    else if (query.get("decrement")) |_|
+        count -= 1
+    else
+        count += 1;
+
+    return (
+        <main @allocator={ctx.arena}>
+            <p>Ziex is a framework for building web applications with Zig.</p>
+            <a href={zx.info.homepage} target="_blank">See Ziex Docs →</a>
+            <br />
+            <CounterComponent @rendering={.client} count={count} />
+            <br />
+            <hr />
+            <a href="/about">Navigate to About Page</a>
+        </main>
+    );
+}
+var count: i128 = 0;
+
+const zx = @import("zx");
+pub const CounterComponent = @import("./client.zig").CounterComponent;

package/tmp/test-real/build.zig

@@ -0,0 +1,39 @@
+const std = @import("std");
+const zx = @import("zx");
+
+pub fn build(b: *std.Build) !void {
+    // --- Target and Optimize from `zig build` arguments ---
+    const target = b.standardTargetOptions(.{});
+    const optimize = b.standardOptimizeOption(.{});
+
+    // --- ZX App Executable ---
+    const app_exe = b.addExecutable(.{
+        .name = "zx_app",
+        .root_module = b.createModule(.{
+            .root_source_file = b.path("app/main.zig"),
+            .target = target,
+            .optimize = optimize,
+        }),
+    });
+
+    // --- ZX setup: wires dependencies and adds `zx`/`dev` build steps ---
+    var zx_build = try zx.init(b, app_exe, .{});
+
+    // HACK: on wasi we do not inject jsglue automatically yet
+    if (target.result.os.tag == .wasi)
+        zx_build.addElement(.{
+            .parent = .body,
+            .position = .ending,
+            .element = .{
+                .tag = "script",
+                .attributes = "src=\"https://cdn.jsdelivr.net/npm/ziex@0.1.0-dev.804/wasm/init.min.js\"",
+            },
+        });
+
+    // --- Assets -- //
+    b.installDirectory(.{
+        .source_dir = zx_build.ziex_js.dep.path("."),
+        .install_dir = .prefix,
+        .install_subdir = "pkg/ziex",
+    });
+}

package/tmp/test-real/build.zig.zon

@@ -0,0 +1,17 @@
+.{
+    .name = .zx_app,
+    .version = "0.0.0",
+    .fingerprint = 0x77989223bd4e92d3,
+    .minimum_zig_version = "0.15.2",
+    .dependencies = .{
+        .zx = .{
+            .url = "git+https://github.com/ziex-dev/ziex#e385bf19316eb365a7edb41fa8465e7bf977a04c",
+            .hash = "zx-0.1.0-dev.805-8okzKpLD6wAa_H-raN-DxUH_YAfYibSGt-778EdgZXta",
+        },
+    },
+    .paths = .{
+        "build.zig",
+        "build.zig.zon",
+        "app",
+    },
+}

package/tmp/test-real/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "ziex_cloudflare",
+  "type": "module",
+  "scripts": {
+    "build": "vercel build",
+    "deploy": "vercel deploy --prebuilt"
+  },
+  "dependencies": {
+    "ziex": "^0.1.0-dev.804"
+  },
+  "devDependencies": {
+    "vercel": "^50.34.1"
+  }
+}

package/tmp/test-real/type.d.ts

@@ -0,0 +1,6 @@
+declare module "*.wasm?module" {
+    /** Compiled Ziex WASI Binary */
+    const module: WebAssembly.Module;
+    export default module;
+}
+

package/tmp/test-real/vercel.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "framework": null,
+  "buildCommand": "zig build -Dtarget=wasm32-wasi -Doptimize=ReleaseSmall",
+  "outputDirectory": "zig-out/static",
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/api/index"
+    }
+  ]
+}