Here is Server-Action Demo! But looking for feedback on the most reasonable 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)
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()});
}
