release: v0.1.0-dev.978 from ziex-dev/ziex

Author: github-actions[bot]

.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

.gitignore

@@ -0,0 +1,3 @@
+.zig-cache/
+zig-out/
+node_modules/

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.

README.md

@@ -0,0 +1,68 @@
+# Ziex App with Node Package Managers
+
+>This is a starter template for building web applications with [Ziex](https://ziex.dev), a full-stack web framework for Zig.
+
+This project can be used without having to installe Zig or Ziex globally, it works with any Node package manager (npm, yarn, pnpm, bun, etc).
+
+**[Documentation →](https://ziex.dev)**
+
+
+## Install Dependencies
+
+You can use `bun`/`npm`/`yarn`/`pnpm` or any other Node package manager, the following guides uses Bun as an example.
+
+
+```bash
+bun install
+```
+
+## Usage
+
+### Development
+```bash
+bun dev
+```
+App will be available at [`http://localhost:3000`](http://localhost:3000). with hot reload enabled.
+
+### Serve Production Build
+```bash
+bun serve
+```
+
+### Exporting as Static Site
+```bash
+bun export
+```
+This will create a `dist/` directory with the static export of your app. You can deploy the contents of `dist/` to any static hosting provider (Netlify, Vercel, GitHub Pages, etc) or serve it with any static file server.
+
+### Deployment
+
+```bash
+bun bundle
+```
+
+This will create a `bundle/` directory with the binary and static assets needed to run your app. You can deploy the contents of `bundle/` to any VPS.
+
+
+### [ZX CLI](https://ziex.dev/reference#cli) Commands
+```bash
+bun zx [command] [options]
+```
+
+All ZX CLI commands are available under `bun zx [command]`. For example, to run auto formatter:
+```bash
+bun zx fmt .
+```
+
+## Contributing
+
+Contributions are welcome! Feel free to open issues or pull requests. 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)
+- [Topic on Ziggit](https://ziex.dev/r/ziggit)
+- [Project on Zig Discord Community](https://ziex.dev/r/zig-discord) (Join Zig Discord first: https://discord.gg/zig)
+- [GitHub](https://github.com/nurulhudaapon/ziex)
+- [Zig Language](https://ziglang.org/)

app/assets/style.css

@@ -0,0 +1,63 @@
+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;
+}
+
+.link-row {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+    margin: 20px;
+}

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;

app/pages/actions/client/page.zx

@@ -0,0 +1,28 @@
+pub fn Page(ctx: zx.PageContext) zx.Component {
+    return (
+        <main @allocator={ctx.arena}>
+            <EventForm @rendering={.client} />
+        </main>
+    );
+}
+
+pub fn EventForm(ctx: *zx.ComponentContext) zx.Component {
+    const count = ctx.state(i32, 1);
+    return (
+        <button onclick={ctx.bind(onclick)}>
+            Click Me {count}
+        </button>
+    );
+}
+
+fn onclick(e: *zx.client.Event.Stateful) void {
+    const c = e.state(i32);
+    c.set(c.get() + 1);
+    zx.log.info("Count> {d}. \n", .{c.get()});
+}
+
+pub const options: zx.PageOptions = .{
+    .methods = &.{ .GET, .POST },
+};
+
+const zx = @import("zx");

app/pages/actions/page.zx

@@ -0,0 +1,30 @@
+pub fn Page(ctx: zx.PageContext) zx.Component {
+    return (
+        <main @allocator={ctx.arena}>
+            <LoginForm @rendering={.client} name="Ziex Client" />
+            <LoginForm name="Ziex Server" />
+        </main>
+    );
+}
+
+const LoginInput = struct { name: []const u8, id: i32 = 123 };
+pub fn LoginForm(ctx: *zx.ComponentCtx(LoginInput)) zx.Component {
+    return (
+        <form @allocator={ctx.allocator} action={handleLogin}>
+            <input name="name" value={ctx.props.name} />
+            <input name="id" value={ctx.props.id} />
+
+            <button>Submit</button>
+        </form>
+    );
+}
+
+fn handleLogin(data: LoginInput) void {
+    zx.log.info("\n\nName: {s}\nID: {d}\n", .{ data.name, data.id });
+}
+
+pub const options: zx.PageOptions = .{
+    .methods = &.{.POST},
+};
+
+const zx = @import("zx");

app/pages/actions/server/page.zx

@@ -0,0 +1,28 @@
+pub fn Page(ctx: zx.PageContext) zx.Component {
+    return (
+        <main @allocator={ctx.arena}>
+            <EventForm @rendering={.client} />
+        </main>
+    );
+}
+
+pub fn EventForm(ctx: *zx.ComponentContext) zx.Component {
+    const count = ctx.state(i32, 1);
+    return (
+        <button onclick={ctx.bind(onclick)}>
+            Click Me {count}
+        </button>
+    );
+}
+
+fn onclick(e: *zx.server.Event.Stateful) void {
+    const c = e.state(i32);
+    c.set(c.get() + 1);
+    zx.log.info("Count> {d}. \n", .{c.get()});
+}
+
+pub const options: zx.PageOptions = .{
+    .methods = &.{ .GET, .POST },
+};
+
+const zx = @import("zx");

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");