Ziex - Full-stack Web Framework for Zig! Like Next.js/React but for Zig

Here is Server-Action Demo! But looking for feedback on the most reasonable signature.

https://youtu.be/rLaKDNwl2FI

Client/Server Event Handler Signature
  • fn(*zx.Event.Server) void | fn(*zx.Event.Client) void
  • fn(*zx.client.Event) | fn(*zx.server.Event)
  • fn(*zx.ClientEvent) | fn(*zx.ServerEvent)
  • fn(*zx.Event) | fn(*zx.ServerEvent)
  • fn(*zx.Event.Client) | fn(*zx.Event.Server)
0 voters

Code Sample:


pub fn ProfileForm(ctx: *zx.ComponentContext) zx.Component {
    const count = ctx.state(i32, 0);

    return (
        <div @allocator={ctx.allocator} style="display: inline-flex; flex-direction: column">
            <button onclick={clientEvent} value="I'm on the client">Client Event</button>
            <button onclick={serverEvent} value="I'm on the server">Server Event</button>
            <h1>{count.get()}</h1>
            <button onclick={ctx.bind(serverIncrement)} value="I'm on the server">Increment: Server</button>
            <button onclick={ctx.bind(clientIncrement)} value="I'm on the server">Increment: Client</button>
        </div>
    );
}

fn clientEvent(ctx: zx.EventContext) void {
    const val = ctx.value() orelse "";
    std.log.info("onclick: {s}\n", .{val});
}

fn serverEvent(ctx: zx.ServerEventContext) void {
    const val = ctx.value() orelse "";
    std.log.info("onclick: {s}\n", .{val});
}

fn clientIncrement(ctx: *zx.EventContext) void {
    const val = ctx.state(i32);
    val.set(val.get() + 1);
    std.log.info("increment: {d}\n\n", .{val.get()});
}

fn serverIncrement(_: zx.ServerEventContext, sc: *zx.StateContext) void {
    const val = sc.state(i32);
    val.set(val.get() + 1);
    std.log.info("increment: {d}\n\n", .{val.get()});
}
4 Likes

Just saw this and looks very interesting, it would be cool if you can swap the renderer and use it as TUI framework like is common with react, or even gui using raylib or similar

Hey, thank you for taking a look! This was already in the future scope (though TUI is the last in the priority unless someone contributes) and things are design in a way to easily and new rendered, currently there are rendered for browser (HTML Document) and rendered for server (HTML String). And there is an impressing Zig library that renders markdown on the terminal and it’s pretty good. GitHub - JacobCrabill/zigdown: Markdown toolset in Zig ⚡ · GitHub

1 Like

Thanks all for voting! I got the API laid out and is pretty about how it ended up!

2 Likes

Rebuilt zx dev command along with DevServer, Error Overlay, cleaner TUI for error printing and source mapping to actual .zx file!

Thanks to https://codeberg.org/ziglang/zig/src/branch/master/lib/std/Build/WebServer.zig!


Demo: https://youtu.be/ZQue2FvCZ3E

1 Like