mirror of
https://github.com/ziex-dev/ziex.git
synced 2026-07-20 02:29:36 -06:00
feat: make id of component and server action stable
This commit is contained in:
Nurul Huda (Apon)
parent
d5eae10c8d
commit
290f7a96f4
@ -77,12 +77,13 @@ export class ZxBridge extends ZxBridgeCore {
|
||||
}
|
||||
|
||||
/** Submit a form action with bound-state round-trip. */
|
||||
submitFormActionAsync(form: HTMLFormElement, statesJson: string, fetchId: bigint): void {
|
||||
submitFormActionAsync(form: HTMLFormElement, actionId: number, statesJson: string, fetchId: bigint): void {
|
||||
const formData = new FormData(form);
|
||||
formData.append('__$states', statesJson);
|
||||
fetch(window.location.href, {
|
||||
method: 'POST',
|
||||
headers: { 'X-ZX-Action': '1' },
|
||||
// `>>> 0` reinterprets the i32 from wasm as u32 (ids can exceed 2^31).
|
||||
headers: { 'X-ZX-Action': String(actionId >>> 0) },
|
||||
body: formData,
|
||||
})
|
||||
.then(async (response) => {
|
||||
@ -358,21 +359,22 @@ export class ZxBridge extends ZxBridgeCore {
|
||||
writeBytes(bufPtr, bytes.subarray(0, len));
|
||||
return len;
|
||||
},
|
||||
_submitFormAction: (vnodeId: bigint): void => {
|
||||
_submitFormAction: (vnodeId: bigint, actionId: number): void => {
|
||||
const form = domNodes.get(vnodeId) as HTMLFormElement | undefined;
|
||||
if (!form || !(form instanceof HTMLFormElement)) return;
|
||||
const formData = new FormData(form);
|
||||
fetch(window.location.href, {
|
||||
method: 'POST',
|
||||
headers: { 'X-ZX-Action': '1' },
|
||||
// `>>> 0` reinterprets the i32 from wasm as u32 (ids can exceed 2^31).
|
||||
headers: { 'X-ZX-Action': String(actionId >>> 0) },
|
||||
body: formData,
|
||||
}).catch(() => {});
|
||||
},
|
||||
_submitFormActionAsync: (vnodeId: bigint, statesPtr: number, statesLen: number, fetchId: bigint): void => {
|
||||
_submitFormActionAsync: (vnodeId: bigint, actionId: number, statesPtr: number, statesLen: number, fetchId: bigint): void => {
|
||||
const form = domNodes.get(vnodeId) as HTMLFormElement | undefined;
|
||||
if (!form || !(form instanceof HTMLFormElement)) return;
|
||||
const statesJson = statesLen > 0 ? readString(statesPtr, statesLen) : '[]';
|
||||
bridgeRef.current?.submitFormActionAsync(form, statesJson, fetchId);
|
||||
bridgeRef.current?.submitFormActionAsync(form, actionId, statesJson, fetchId);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -32,7 +32,7 @@ pub const Component = union(enum) {
|
||||
pub const ComponentFn = struct {
|
||||
propsPtr: ?*const anyopaque,
|
||||
callFn: *const fn (propsPtr: ?*const anyopaque, allocator: Allocator) anyerror!Component,
|
||||
setIdentityFn: ?*const fn (propsPtr: ?*const anyopaque, component_id: []const u8, instance_id: u16) void = null,
|
||||
setComponentIdFn: ?*const fn (propsPtr: ?*const anyopaque, component_id: []const u8) void = null,
|
||||
getStateItems: ?*const anyopaque = null,
|
||||
allocator: Allocator,
|
||||
deinitFn: ?*const fn (propsPtr: ?*const anyopaque, allocator: Allocator) void,
|
||||
@ -41,6 +41,7 @@ pub const Component = union(enum) {
|
||||
caching: ?BuiltinAttribute.Caching = null,
|
||||
name: []const u8,
|
||||
key: ?[]const u8 = null,
|
||||
id: zx.x.Id = .undef,
|
||||
|
||||
pub fn init(comptime func: anytype, name: []const u8, allocator: Allocator, props: anytype) ComponentFn {
|
||||
const FuncInfo = @typeInfo(@TypeOf(func));
|
||||
@ -132,7 +133,6 @@ pub const Component = union(enum) {
|
||||
// Reset slot counters on every call so hooks run in stable order.
|
||||
if (@hasField(CtxType, "_internal")) {
|
||||
ctx_ptr._internal.state_idx = 0;
|
||||
ctx_ptr._internal.handler_idx = 0;
|
||||
}
|
||||
return normalize(func(ctx_ptr));
|
||||
}
|
||||
@ -148,13 +148,12 @@ pub const Component = union(enum) {
|
||||
unreachable;
|
||||
}
|
||||
|
||||
fn setIdentity(propsPtr: ?*const anyopaque, component_id: []const u8, instance_id: u16) void {
|
||||
fn setComponentId(propsPtr: ?*const anyopaque, component_id: []const u8) void {
|
||||
if (!first_is_ctx_ptr) return;
|
||||
const CtxType = @typeInfo(FirstPropType).pointer.child;
|
||||
const ctx_ptr: *CtxType = @ptrCast(@alignCast(@constCast(propsPtr orelse return)));
|
||||
if (@hasField(CtxType, "_internal")) {
|
||||
ctx_ptr._internal.component_id = component_id;
|
||||
ctx_ptr._internal.instance_id = instance_id;
|
||||
}
|
||||
}
|
||||
|
||||
@ -177,7 +176,7 @@ pub const Component = union(enum) {
|
||||
return .{
|
||||
.propsPtr = props_copy,
|
||||
.callFn = Wrapper.call,
|
||||
.setIdentityFn = if (first_is_ctx_ptr) Wrapper.setIdentity else null,
|
||||
.setComponentIdFn = if (first_is_ctx_ptr) Wrapper.setComponentId else null,
|
||||
.getStateItems = @ptrCast(devtool.ComponentSerializable.createGetStateItemsFn(func)),
|
||||
.allocator = allocator,
|
||||
.deinitFn = Wrapper.deinit,
|
||||
@ -197,9 +196,9 @@ pub const Component = union(enum) {
|
||||
}
|
||||
}
|
||||
|
||||
pub fn setIdentity(self: ComponentFn, component_id: []const u8, instance_id: u16) void {
|
||||
if (self.setIdentityFn) |set_identity_fn| {
|
||||
set_identity_fn(self.propsPtr, component_id, instance_id);
|
||||
pub fn setComponentId(self: ComponentFn, component_id: []const u8) void {
|
||||
if (self.setComponentIdFn) |set_fn| {
|
||||
set_fn(self.propsPtr, component_id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -72,10 +72,8 @@ pub fn ComponentCtx(comptime PropsType: type) type {
|
||||
_internal: Internal = .{},
|
||||
|
||||
pub const Internal = struct {
|
||||
instance_id: u16 = 0,
|
||||
component_id: []const u8 = "",
|
||||
state_idx: u32 = 0,
|
||||
handler_idx: u32 = 0,
|
||||
};
|
||||
|
||||
pub fn state(self: *Self, comptime T: type, initial: T) reactivity.StateInstance(T) {
|
||||
@ -97,7 +95,7 @@ pub fn ComponentCtx(comptime PropsType: type) type {
|
||||
|
||||
const alloc = if (zx.platform.role == .client) zx.allocator else self.allocator;
|
||||
const bound_states = zx.EventHandler.buildStates(alloc, states);
|
||||
return zx.EventHandler.serverSS(handler, alloc, &self._internal.handler_idx, bound_states);
|
||||
return zx.EventHandler.serverSS(handler, alloc, bound_states);
|
||||
}
|
||||
|
||||
pub fn bind(self: *Self, comptime handler: anytype) zx.EventHandler {
|
||||
@ -117,17 +115,17 @@ pub fn ComponentCtx(comptime PropsType: type) type {
|
||||
fn (*ClientEvent.Stateful) void => zx.EventHandler.clientS(handler, alloc, self._internal.component_id),
|
||||
|
||||
// Server
|
||||
fn (*ServerEvent.Stateful) void => zx.EventHandler.serverS(handler, alloc, self._internal.component_id, self._internal.state_idx, &self._internal.handler_idx),
|
||||
fn (*ServerEvent) void => zx.EventHandler.server(handler, alloc, &self._internal.handler_idx),
|
||||
fn (*ServerEvent.Stateful) void => zx.EventHandler.serverS(handler, alloc, self._internal.component_id, self._internal.state_idx),
|
||||
fn (*ServerEvent) void => zx.EventHandler.server(handler, alloc),
|
||||
|
||||
// Server Actions
|
||||
fn (*ActionContext.Stateful) void => zx.EventHandler.actionStateful(handler, alloc, self._internal.component_id, self._internal.state_idx, &self._internal.handler_idx),
|
||||
fn (*ActionContext.Stateful) void => zx.EventHandler.actionStateful(handler, alloc, self._internal.component_id, self._internal.state_idx),
|
||||
fn (ActionContext, *StateContext) void => actionBind(handler, alloc, self),
|
||||
fn (*ActionContext) void => actionBind(handler, alloc, self),
|
||||
|
||||
else => blk: {
|
||||
if (comptime params.len == 1 and params[0] == *ServerEvent) {
|
||||
break :blk zx.EventHandler.server(handler, alloc, &self._internal.handler_idx);
|
||||
break :blk zx.EventHandler.server(handler, alloc);
|
||||
}
|
||||
if (comptime params.len == 2 and
|
||||
@typeInfo(params[0].?) == .@"struct" and
|
||||
@ -163,15 +161,13 @@ fn actionBind(comptime handler: anytype, alloc: Allocator, ctx: anytype) zx.Even
|
||||
}
|
||||
};
|
||||
const bound = reactivity.collectStateBoundEntries(alloc, ctx._internal.component_id, ctx._internal.state_idx);
|
||||
ctx._internal.handler_idx += 1;
|
||||
const h_id = ctx._internal.handler_idx;
|
||||
const ec = alloc.create(zx.EventHandler.Context) catch @panic("OOM");
|
||||
ec.* = .{ .handler_id = h_id, .bound_states = bound };
|
||||
// handler_id is stamped later in `x.Context.attr` from the attribute @src().
|
||||
ec.* = .{ .handler_id = 0, .bound_states = bound };
|
||||
return zx.EventHandler{
|
||||
.callback = &zx.EventHandler.actionHandler,
|
||||
.context = @ptrCast(ec),
|
||||
.action_fn = &FormActionWrapper.wrap,
|
||||
.handler_id = h_id,
|
||||
.bound_states = bound,
|
||||
};
|
||||
}
|
||||
|
||||
@ -502,12 +502,22 @@ pub fn transpileReturn(self: *Ast, node: ts.Node, ctx: *TranspileContext) !void
|
||||
|
||||
// Synthesized _zx init - no source mapping (it's boilerplate)
|
||||
try ctx.write("var _zx = @import(\"zx\").x.");
|
||||
// `@src()` is only valid inside a function scope. Module-scope
|
||||
// block level component (e.g. `const x = zx { ... }`) can't use @src so skipping.
|
||||
if (allocator_value) |alloc| {
|
||||
try ctx.write("allocInit(");
|
||||
try ctx.write(alloc);
|
||||
try ctx.write(")");
|
||||
if (isInFunction(child)) {
|
||||
try ctx.write(", .{ .src = @src() })");
|
||||
} else {
|
||||
try ctx.write(", .{})");
|
||||
}
|
||||
} else {
|
||||
try ctx.write("init()");
|
||||
if (isInFunction(child)) {
|
||||
try ctx.write("init(.{ .src = @src() })");
|
||||
} else {
|
||||
try ctx.write("init(.{})");
|
||||
}
|
||||
}
|
||||
try ctx.write(";\n");
|
||||
// Mark that _zx is now initialized for nested ZX blocks
|
||||
@ -584,9 +594,17 @@ pub fn transpileBlock(self: *Ast, node: ts.Node, ctx: *TranspileContext) !void {
|
||||
if (allocator_value) |alloc| {
|
||||
try ctx.write("allocInit(");
|
||||
try ctx.write(alloc);
|
||||
try ctx.write(")");
|
||||
if (isInFunction(child)) {
|
||||
try ctx.write(", .{ .src = @src() })");
|
||||
} else {
|
||||
try ctx.write(", .{})");
|
||||
}
|
||||
} else {
|
||||
try ctx.write("init()");
|
||||
if (isInFunction(child)) {
|
||||
try ctx.write("init(.{ .src = @src() })");
|
||||
} else {
|
||||
try ctx.write("init(.{})");
|
||||
}
|
||||
}
|
||||
try ctx.write(";\n");
|
||||
|
||||
@ -1072,6 +1090,9 @@ fn writeCustomComponent(self: *Ast, _: ts.Node, tag: []const u8, tag_name_byte:
|
||||
try ctx.writeM(tag, tag_name_byte, self);
|
||||
try ctx.writeM(",\n", end_tag_start_byte, self);
|
||||
|
||||
try ctx.writeIndent();
|
||||
try ctx.write(".{ .src = @src() },\n");
|
||||
|
||||
try ctx.writeIndent();
|
||||
try ctx.write(".{ .name = \"");
|
||||
try ctx.write(componentDisplayName(tag));
|
||||
@ -1139,6 +1160,9 @@ fn writeCustomComponent(self: *Ast, _: ts.Node, tag: []const u8, tag_name_byte:
|
||||
try ctx.writeM(tag, tag_name_byte, self);
|
||||
try ctx.writeM(",\n", end_tag_start_byte, self);
|
||||
|
||||
try ctx.writeIndent();
|
||||
try ctx.write(".{ .src = @src() },\n");
|
||||
|
||||
var spreads = std.ArrayList(ZxAttribute).empty;
|
||||
defer spreads.deinit(ctx.output.allocator);
|
||||
var regular_props = std.ArrayList(ZxAttribute).empty;
|
||||
@ -1163,7 +1187,7 @@ fn writeCustomComponent(self: *Ast, _: ts.Node, tag: []const u8, tag_name_byte:
|
||||
const has_regular_props = regular_props.items.len > 0;
|
||||
const has_children = children.len > 0;
|
||||
|
||||
// Write options parameter first (name + builtin attributes)
|
||||
// Write options parameter (name + builtin attributes)
|
||||
try ctx.writeIndent();
|
||||
try ctx.write(".{ .name = \"");
|
||||
try ctx.write(componentDisplayName(tag));
|
||||
@ -1360,7 +1384,7 @@ fn writeChildrenValue(self: *Ast, children: []const ts.Node, ctx: *TranspileCont
|
||||
/// Write a regular HTML element: _zx.ele(.tag, .{ ... })
|
||||
/// When preserve_whitespace is true (e.g. for <pre>), text nodes won't be trimmed
|
||||
fn writeHtmlElement(self: *Ast, node: ts.Node, tag: []const u8, tag_name_byte: u32, end_tag_start_byte: u32, end_tag_end_byte: u32, attributes: []const ZxAttribute, children: []const ts.Node, ctx: *TranspileContext, preserve_whitespace: bool) !void {
|
||||
_ = node;
|
||||
const in_function = isInFunction(node);
|
||||
// _zx.ele( is synthesized - no source mapping
|
||||
try ctx.write("_zx.ele");
|
||||
if (ctx.paren_byte) |p| {
|
||||
@ -1385,7 +1409,7 @@ fn writeHtmlElement(self: *Ast, node: ts.Node, tag: []const u8, tag_name_byte: u
|
||||
try ctx.write(".{\n");
|
||||
ctx.indent_level += 1;
|
||||
|
||||
try writeAttributes(self, attributes, ctx);
|
||||
try writeAttributes(self, attributes, ctx, in_function);
|
||||
|
||||
// Write children
|
||||
if (children.len > 0) {
|
||||
@ -2127,7 +2151,9 @@ pub const ZxAttribute = struct {
|
||||
};
|
||||
|
||||
/// Write builtin and regular attributes to the transpile context
|
||||
fn writeAttributes(self: *Ast, attributes: []const ZxAttribute, ctx: *TranspileContext) error{OutOfMemory}!void {
|
||||
fn writeAttributes(self: *Ast, attributes: []const ZxAttribute, ctx: *TranspileContext, in_function: bool) error{OutOfMemory}!void {
|
||||
// `@src()` is only valid inside a function scope.
|
||||
const src_arg = if (in_function) "@src()" else "null";
|
||||
// Write builtin attributes first (like @allocator), but skip transpiler directives
|
||||
for (attributes) |attr| {
|
||||
if (!attr.is_builtin) continue;
|
||||
@ -2193,13 +2219,17 @@ fn writeAttributes(self: *Ast, attributes: []const ZxAttribute, ctx: *TranspileC
|
||||
try transpileTemplateStringAttr(self, attr, template_node, ctx);
|
||||
} else if (attr.zx_block_node) |zx_node| {
|
||||
// If value contains a zx_block, transpile it instead of writing raw text
|
||||
try ctx.write("_zx.attr(\"");
|
||||
try ctx.write("_zx.attr(");
|
||||
try ctx.write(src_arg);
|
||||
try ctx.write(", \"");
|
||||
try ctx.writeM(attr.name, attr.name_byte_offset, self);
|
||||
try ctx.write("\", ");
|
||||
try transpileBlock(self, zx_node, ctx);
|
||||
try ctx.write("),\n");
|
||||
} else {
|
||||
try ctx.write("_zx.attr(\"");
|
||||
try ctx.write("_zx.attr(");
|
||||
try ctx.write(src_arg);
|
||||
try ctx.write(", \"");
|
||||
try ctx.writeM(attr.name, attr.name_byte_offset, self);
|
||||
try ctx.write("\", ");
|
||||
try ctx.writeM(attr.value, attr.value_byte_offset, self);
|
||||
@ -2581,3 +2611,15 @@ pub fn getAttributeValue(self: *Ast, node: ts.Node) ![]const u8 {
|
||||
|
||||
return try self.getNodeText(node);
|
||||
}
|
||||
|
||||
fn isInFunction(node: ts.Node) bool {
|
||||
var current: ?ts.Node = node.parent();
|
||||
while (current) |n| {
|
||||
const k = n.kind();
|
||||
if (std.mem.startsWith(u8, k, "fn_") or std.mem.indexOf(u8, k, "function") != null) {
|
||||
return true;
|
||||
}
|
||||
current = n.parent();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -3,8 +3,6 @@ pub const Client = @This();
|
||||
const window = @import("window.zig");
|
||||
const is_wasm = window.is_wasm;
|
||||
|
||||
/// Global instance counter for assigning unique IDs to component instances
|
||||
var instance_counter: u16 = 0;
|
||||
|
||||
/// The component ID that is currently being rendered.
|
||||
/// Set by Client.render() so that ComponentCtx and ifpl can register subscriptions.
|
||||
@ -87,13 +85,11 @@ pub const ComponentMeta = struct {
|
||||
// Reset slot counters so hooks run in stable order every render.
|
||||
if (@hasField(CtxType, "_internal")) {
|
||||
ctx._internal = .{
|
||||
.instance_id = instance_counter,
|
||||
.component_id = current_render_id,
|
||||
.state_idx = 0,
|
||||
.handler_idx = 0,
|
||||
};
|
||||
}
|
||||
instance_counter +%= 1; // Wrap around on overflow
|
||||
|
||||
|
||||
// Parse props if the context has a props field
|
||||
if (@hasField(CtxType, "props")) {
|
||||
|
||||
@ -139,6 +139,7 @@ pub fn applyPatches(
|
||||
/// are serialised, sent as `__$states`, and the response updates those states.
|
||||
const FormActionCtx = struct {
|
||||
vnode_id: u64,
|
||||
action_id: u32 = 1,
|
||||
bound_states: []const zx.EventHandler.Bound = &.{},
|
||||
};
|
||||
|
||||
@ -175,7 +176,7 @@ fn formActionCallback(ctx: *anyopaque, event: zx.client.Event) void {
|
||||
event.preventDefault();
|
||||
|
||||
if (form_ctx.bound_states.len == 0) {
|
||||
ext._submitFormAction(form_ctx.vnode_id);
|
||||
ext._submitFormAction(form_ctx.vnode_id, form_ctx.action_id);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -197,7 +198,7 @@ fn formActionCallback(ctx: *anyopaque, event: zx.client.Event) void {
|
||||
alloc.destroy(cb_ctx);
|
||||
return;
|
||||
};
|
||||
ext._submitFormActionAsync(form_ctx.vnode_id, states_json.ptr, states_json.len, fetch_id);
|
||||
ext._submitFormActionAsync(form_ctx.vnode_id, form_ctx.action_id, states_json.ptr, states_json.len, fetch_id);
|
||||
}
|
||||
|
||||
/// Build DOM nodes for a VNode subtree and register every node in the JS
|
||||
@ -222,6 +223,7 @@ pub fn createPlatformNodes(allocator: zx.Allocator, vnode: *VNode, client: anyty
|
||||
var has_action_handler = false;
|
||||
var has_method = false;
|
||||
var form_bound_states: []const zx.EventHandler.Bound = &.{};
|
||||
var form_action_id: u32 = 1;
|
||||
|
||||
for (attrs) |attr| {
|
||||
if (std.mem.eql(u8, attr.name, "key")) continue;
|
||||
@ -229,6 +231,7 @@ pub fn createPlatformNodes(allocator: zx.Allocator, vnode: *VNode, client: anyty
|
||||
if (handler.action_fn != null) {
|
||||
has_action_handler = true;
|
||||
form_bound_states = handler.bound_states;
|
||||
form_action_id = handler.handler_id;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
@ -272,7 +275,7 @@ pub fn createPlatformNodes(allocator: zx.Allocator, vnode: *VNode, client: anyty
|
||||
if (elem.tag == .form and has_action_handler) {
|
||||
const Client = @import("Client.zig");
|
||||
if (allocator.create(FormActionCtx) catch null) |form_ctx| {
|
||||
form_ctx.* = .{ .vnode_id = vnode.id, .bound_states = form_bound_states };
|
||||
form_ctx.* = .{ .vnode_id = vnode.id, .action_id = form_action_id, .bound_states = form_bound_states };
|
||||
client.registerHandler(vnode.id, Client.EventType.submit, zx.EventHandler{
|
||||
.callback = &formActionCallback,
|
||||
.context = @ptrCast(form_ctx),
|
||||
|
||||
@ -63,16 +63,17 @@ pub extern "__zx" fn _getLocationHref(buf: [*]u8, buf_len: usize) usize;
|
||||
pub extern "__zx" fn _getFormData(vnode_id: u64, buf_ptr: [*]u8, buf_len: usize) usize;
|
||||
|
||||
/// Submit a form action: reads the DOM form identified by vnode_id, builds a
|
||||
/// multipart/form-data request with the X-ZX-Action header, and fires it via
|
||||
/// the JS fetch API. The browser handles multipart serialization (including
|
||||
/// file inputs) so no WASM-side encoding is required.
|
||||
pub extern "__zx" fn _submitFormAction(vnode_id: u64) void;
|
||||
/// multipart/form-data request with the X-ZX-Action header set to action_id,
|
||||
/// and fires it via the JS fetch API. The browser handles multipart
|
||||
/// serialization (including file inputs) so no WASM-side encoding is required.
|
||||
pub extern "__zx" fn _submitFormAction(vnode_id: u64, action_id: u32) void;
|
||||
|
||||
/// Like _submitFormAction but stateful: injects the serialised bound-state JSON
|
||||
/// as a `__$states` multipart field and calls __zx_fetch_complete(fetch_id,…)
|
||||
/// when the response arrives so WASM can apply the returned state updates.
|
||||
pub extern "__zx" fn _submitFormActionAsync(
|
||||
vnode_id: u64,
|
||||
action_id: u32,
|
||||
states_ptr: [*]const u8,
|
||||
states_len: usize,
|
||||
fetch_id: u64,
|
||||
|
||||
@ -46,6 +46,10 @@ bound_states: []const Bound = &.{},
|
||||
/// True when the handler may reach suspending browser imports and must be
|
||||
/// invoked through the async/JSPI event path.
|
||||
may_suspend: bool = false,
|
||||
/// Stable, unique id for this handler/action instance, derived from the parent
|
||||
/// component block's id and the handler's attribute name. `.undef` until set
|
||||
/// by the creating `Context` (see `x.Context.attr`).
|
||||
id: zx.x.Id = .undef,
|
||||
|
||||
const Self = @This();
|
||||
|
||||
@ -211,13 +215,13 @@ pub fn clientS(comptime handler: anytype, alloc: Allocator, component_id: []cons
|
||||
}
|
||||
|
||||
/// Stateless server handler: fn(*zx.server.Event) void
|
||||
pub fn server(comptime handler: anytype, alloc: Allocator, handler_index: *u32) Self {
|
||||
pub fn server(comptime handler: anytype, alloc: Allocator) Self {
|
||||
const Wrap = struct {
|
||||
fn wrap(ctx: *zx.server.Event) void {
|
||||
handler(ctx);
|
||||
}
|
||||
};
|
||||
return finalizeServer(alloc, handler_index, &Wrap.wrap, &.{});
|
||||
return finalizeServer(alloc, &Wrap.wrap, &.{});
|
||||
}
|
||||
|
||||
/// Stateful server handler: fn(*zx.server.Event.Stateful) void (auto-binds states)
|
||||
@ -226,7 +230,6 @@ pub fn serverS(
|
||||
alloc: Allocator,
|
||||
component_id: []const u8,
|
||||
state_index: u32,
|
||||
handler_index: *u32,
|
||||
) Self {
|
||||
const wrap_fn = makeServerWrap(handler, struct {
|
||||
fn call(ctx: *zx.server.Event, _: *zx.StateContext, h: anytype) void {
|
||||
@ -234,14 +237,13 @@ pub fn serverS(
|
||||
h(&sf);
|
||||
}
|
||||
}.call);
|
||||
return finalizeServer(alloc, handler_index, &wrap_fn, reactivity.collectStateBoundEntries(alloc, component_id, state_index));
|
||||
return finalizeServer(alloc, &wrap_fn, reactivity.collectStateBoundEntries(alloc, component_id, state_index));
|
||||
}
|
||||
|
||||
/// Stateful server handler with explicitly listed states (user-provided)
|
||||
pub fn serverSS(
|
||||
comptime handler: anytype,
|
||||
alloc: Allocator,
|
||||
handler_index: *u32,
|
||||
bound_states: []const Bound,
|
||||
) Self {
|
||||
const wrap_fn = makeServerWrap(handler, struct {
|
||||
@ -250,7 +252,7 @@ pub fn serverSS(
|
||||
h(&sf);
|
||||
}
|
||||
}.call);
|
||||
return finalizeServer(alloc, handler_index, &wrap_fn, bound_states);
|
||||
return finalizeServer(alloc, &wrap_fn, bound_states);
|
||||
}
|
||||
|
||||
/// Stateful action handler: fn(*zx.server.Action.Stateful) void (auto-binds states from component)
|
||||
@ -259,7 +261,6 @@ pub fn actionStateful(
|
||||
alloc: Allocator,
|
||||
component_id: []const u8,
|
||||
state_index: u32,
|
||||
handler_index: *u32,
|
||||
) Self {
|
||||
const ActionWrap = struct {
|
||||
fn wrap(ctx: *zx.server.Action) void {
|
||||
@ -270,15 +271,13 @@ pub fn actionStateful(
|
||||
}
|
||||
};
|
||||
const bound = reactivity.collectStateBoundEntries(alloc, component_id, state_index);
|
||||
handler_index.* += 1;
|
||||
const h_id = handler_index.*;
|
||||
const ec = alloc.create(Context) catch @panic("OOM");
|
||||
ec.* = .{ .handler_id = h_id, .bound_states = bound };
|
||||
// handler_id is stamped later in `x.Context.attr` from the attribute @src().
|
||||
ec.* = .{ .handler_id = 0, .bound_states = bound };
|
||||
return .{
|
||||
.callback = &actionHandler,
|
||||
.context = @ptrCast(ec),
|
||||
.action_fn = &ActionWrap.wrap,
|
||||
.handler_id = h_id,
|
||||
.bound_states = bound,
|
||||
};
|
||||
}
|
||||
@ -319,6 +318,26 @@ pub fn actionS() Self {
|
||||
};
|
||||
}
|
||||
|
||||
/// Stamp a stable, comptime-derived id onto a handler created in `x.Context.attr`.
|
||||
pub fn stampId(self: *Self, alloc: Allocator, id: zx.x.Id) void {
|
||||
self.id = id;
|
||||
const hid = id.short();
|
||||
self.handler_id = hid;
|
||||
|
||||
const sends_to_server = self.action_fn != null or self.server_event_fn != null;
|
||||
if (!sends_to_server) return;
|
||||
|
||||
if (@intFromPtr(self.context) == 1) {
|
||||
// Stateless action/event handler: allocate a Context to carry the id.
|
||||
const ec = alloc.create(Context) catch return;
|
||||
ec.* = .{ .handler_id = hid, .bound_states = self.bound_states };
|
||||
self.context = @ptrCast(ec);
|
||||
} else {
|
||||
const ec: *Context = @ptrCast(@alignCast(self.context));
|
||||
ec.handler_id = hid;
|
||||
}
|
||||
}
|
||||
|
||||
fn makeServerWrap(
|
||||
comptime handler: anytype,
|
||||
comptime call: fn (*zx.server.Event, *zx.StateContext, anytype) void,
|
||||
@ -334,25 +353,21 @@ fn makeServerWrap(
|
||||
|
||||
fn finalizeServer(
|
||||
alloc: Allocator,
|
||||
handler_index: *u32,
|
||||
comptime wrap_fn: *const fn (*zx.server.Event) void,
|
||||
bound_states: []const Bound,
|
||||
) Self {
|
||||
handler_index.* += 1;
|
||||
const h_id = handler_index.*;
|
||||
const ctx = alloc.create(Context) catch @panic("OOM");
|
||||
ctx.* = .{ .handler_id = h_id, .bound_states = bound_states };
|
||||
return init(h_id, wrap_fn, @ptrCast(ctx), bound_states);
|
||||
// handler_id is stamped later in `x.Context.attr` from the attribute @src().
|
||||
ctx.* = .{ .handler_id = 0, .bound_states = bound_states };
|
||||
return init(wrap_fn, @ptrCast(ctx), bound_states);
|
||||
}
|
||||
|
||||
pub fn init(
|
||||
handler_id: u32,
|
||||
comptime server_fn: *const fn (*zx.server.Event) void,
|
||||
context: *anyopaque,
|
||||
bound_states: []const Bound,
|
||||
) Self {
|
||||
return .{
|
||||
.handler_id = handler_id,
|
||||
.callback = &eventHandler,
|
||||
.context = context,
|
||||
.server_event_fn = server_fn,
|
||||
@ -366,16 +381,20 @@ pub fn actionHandler(ctx: *anyopaque, event: zx.client.Event) void {
|
||||
const client_fetch = @import("../client/fetch.zig");
|
||||
const CoreFetch = @import("Fetch.zig");
|
||||
|
||||
var handler_id: u32 = 0;
|
||||
const bound_states: []const Bound = if (@intFromPtr(ctx) == 1)
|
||||
&.{}
|
||||
else blk: {
|
||||
const ec: *Context = @ptrCast(@alignCast(ctx));
|
||||
handler_id = ec.handler_id;
|
||||
break :blk ec.bound_states;
|
||||
};
|
||||
|
||||
var id_buf: [16]u8 = undefined;
|
||||
const id_str = std.fmt.bufPrint(&id_buf, "{d}", .{handler_id}) catch "0";
|
||||
const headers = [_]CoreFetch.RequestInit.Header{
|
||||
.{ .name = "Content-Type", .value = "application/json" },
|
||||
.{ .name = "X-ZX-Action", .value = "1" },
|
||||
.{ .name = "X-ZX-Action", .value = id_str },
|
||||
};
|
||||
|
||||
if (bound_states.len > 0) {
|
||||
|
||||
@ -365,7 +365,7 @@ pub fn resolveComponent(allocator: zx.Allocator, component: zx.Component, owner_
|
||||
switch (curr) {
|
||||
.component_fn => |comp_fn| {
|
||||
const component_id = componentOwnerId(allocator, curr, owner_component_id, sibling_index);
|
||||
comp_fn.setIdentity(component_id, @truncate(next_velement_id));
|
||||
comp_fn.setComponentId(component_id);
|
||||
curr = try comp_fn.call();
|
||||
},
|
||||
else => return curr,
|
||||
@ -652,15 +652,9 @@ fn reconcileChildren(
|
||||
}
|
||||
|
||||
fn componentOwnerId(allocator: zx.Allocator, component: zx.Component, owner_component_id: []const u8, sibling_index: usize) []const u8 {
|
||||
_ = sibling_index;
|
||||
return switch (component) {
|
||||
.component_fn => |comp_fn| blk: {
|
||||
const suffix = comp_fn.key orelse std.fmt.allocPrint(allocator, "#{d}", .{sibling_index}) catch break :blk owner_component_id;
|
||||
break :blk std.fmt.allocPrint(allocator, "{s}/{s}:{s}", .{
|
||||
owner_component_id,
|
||||
comp_fn.name,
|
||||
suffix,
|
||||
}) catch owner_component_id;
|
||||
},
|
||||
.component_fn => |comp_fn| comp_fn.id.fmtShort(allocator, "c"),
|
||||
else => owner_component_id,
|
||||
};
|
||||
}
|
||||
|
||||
@ -30,18 +30,21 @@ pub fn isActionRequest(request: zx.server.Request) bool {
|
||||
}
|
||||
|
||||
fn parseActionId(request: zx.server.Request) u32 {
|
||||
const content_type = request.headers.get("content-type") orelse "";
|
||||
if (std.mem.indexOf(u8, content_type, "multipart/form-data") != null) {
|
||||
if (request.multiFormData().getValue("__$action")) |raw| {
|
||||
return std.fmt.parseInt(u32, raw, 10) catch 1;
|
||||
}
|
||||
} else if (request.formData().get("__$action")) |raw| {
|
||||
return std.fmt.parseInt(u32, raw, 10) catch 1;
|
||||
}
|
||||
|
||||
// Fall back to the header (JS fetches with no form body).
|
||||
if (request.headers.get("x-zx-action")) |raw| {
|
||||
return std.fmt.parseInt(u32, raw, 10) catch 1;
|
||||
}
|
||||
|
||||
const content_type = request.headers.get("content-type") orelse "";
|
||||
if (std.mem.indexOf(u8, content_type, "multipart/form-data") != null) {
|
||||
const raw = request.multiFormData().getValue("__$action") orelse return 1;
|
||||
return std.fmt.parseInt(u32, raw, 10) catch 1;
|
||||
}
|
||||
|
||||
const raw = request.formData().get("__$action") orelse return 1;
|
||||
return std.fmt.parseInt(u32, raw, 10) catch 1;
|
||||
return 1;
|
||||
}
|
||||
|
||||
fn serializeStateOutputs(sc: anytype, allocator: std.mem.Allocator) !?[]u8 {
|
||||
|
||||
174
src/x.zig
174
src/x.zig
@ -41,15 +41,27 @@ const Options = struct {
|
||||
name: ?[]const u8 = null,
|
||||
};
|
||||
|
||||
pub const ComptimeOptions = struct {
|
||||
src: ?std.builtin.SourceLocation = null,
|
||||
};
|
||||
|
||||
pub const InitOptions = struct {
|
||||
src: ?std.builtin.SourceLocation = null,
|
||||
};
|
||||
|
||||
fn componentId(comptime options: InitOptions) Id {
|
||||
return if (options.src) |src| Id.extendId(null, src, 0) else .undef;
|
||||
}
|
||||
|
||||
/// Initialize a Context without an allocator
|
||||
/// The allocator must be provided via @allocator attribute on the parent element
|
||||
pub fn init() Context {
|
||||
return .{ .allocator = .failing };
|
||||
pub fn init(comptime options: InitOptions) Context {
|
||||
return .{ .allocator = .failing, .component_id = componentId(options) };
|
||||
}
|
||||
|
||||
/// Initialize a Context with an allocator (for backward compatibility with direct API usage)
|
||||
pub fn allocInit(allocator: std.mem.Allocator) Context {
|
||||
return .{ .allocator = allocator };
|
||||
pub fn allocInit(allocator: std.mem.Allocator, comptime options: InitOptions) Context {
|
||||
return .{ .allocator = allocator, .component_id = componentId(options) };
|
||||
}
|
||||
|
||||
/// Create a lazy component from a function
|
||||
@ -62,6 +74,7 @@ pub fn lazy(allocator: Allocator, comptime func: anytype, props: anytype) Compon
|
||||
/// Context for creating components with allocator support
|
||||
const Context = struct {
|
||||
allocator: ?std.mem.Allocator = null,
|
||||
component_id: Id = .undef,
|
||||
|
||||
pub fn getAlloc(self: *Context) std.mem.Allocator {
|
||||
return self.allocator orelse @panic("Allocator not set. Please provide @allocator attribute to the parent element.");
|
||||
@ -215,11 +228,13 @@ const Context = struct {
|
||||
|
||||
/// Create an attribute with type-aware value handling
|
||||
/// Returns null for values that should omit the attribute (false booleans, null optionals)
|
||||
pub fn attr(self: *Context, comptime name: []const u8, val: anytype) ?Element.Attribute {
|
||||
///
|
||||
/// `src` is the attribute's call-site `@src()` (emitted by the transpiler).
|
||||
pub fn attr(self: *Context, comptime src: ?std.builtin.SourceLocation, comptime name: []const u8, val: anytype) ?Element.Attribute {
|
||||
const T = @TypeOf(val);
|
||||
|
||||
if (comptime isStatePointer(T)) {
|
||||
return self.attr(name, val.get());
|
||||
return self.attr(src, name, val.get());
|
||||
}
|
||||
|
||||
return switch (@typeInfo(T)) {
|
||||
@ -231,17 +246,20 @@ const Context = struct {
|
||||
if (ptr_info.size == .one) {
|
||||
if (@typeInfo(ptr_info.child) == .array) {
|
||||
const Slice = []const std.meta.Elem(ptr_info.child);
|
||||
return self.attr(name, @as(Slice, val));
|
||||
return self.attr(src, name, @as(Slice, val));
|
||||
}
|
||||
// Function pointer - treat as event handler
|
||||
if (@typeInfo(ptr_info.child) == .@"fn") {
|
||||
const fn_params = @typeInfo(ptr_info.child).@"fn".param_types;
|
||||
const takes_ptr = fn_params.len == 1 and
|
||||
@typeInfo(fn_params[0].?) == .pointer;
|
||||
const handler = if (takes_ptr)
|
||||
var handler = if (takes_ptr)
|
||||
zx.EventHandler.runtimePtr(val)
|
||||
else
|
||||
zx.EventHandler.runtime(val);
|
||||
if (src) |s| {
|
||||
handler.stampId(self.getAlloc(), comptime Id.extendId(null, s, 0));
|
||||
}
|
||||
break :blk .{ .name = name, .handler = handler };
|
||||
}
|
||||
}
|
||||
@ -264,7 +282,7 @@ const Context = struct {
|
||||
.bool => if (val) .{ .name = name, .value = null } else null,
|
||||
|
||||
// Optionals - recurse if non-null, omit if null
|
||||
.optional => if (val) |inner| self.attr(name, inner) else null,
|
||||
.optional => if (val) |inner| self.attr(src, name, inner) else null,
|
||||
|
||||
// Enums - convert tag name to string
|
||||
.@"enum", .enum_literal => .{
|
||||
@ -273,17 +291,23 @@ const Context = struct {
|
||||
},
|
||||
|
||||
// Event handlers - store as function pointer
|
||||
.@"fn" => .{
|
||||
.name = name,
|
||||
.handler = if (comptime std.mem.eql(u8, name, "action"))
|
||||
.@"fn" => blk: {
|
||||
var handler = if (comptime std.mem.eql(u8, name, "action"))
|
||||
zx.EventHandler.action(val)
|
||||
else
|
||||
zx.EventHandler.wrap(val),
|
||||
zx.EventHandler.wrap(val);
|
||||
if (src) |s| {
|
||||
handler.stampId(self.getAlloc(), comptime Id.extendId(null, s, 0));
|
||||
}
|
||||
break :blk .{ .name = name, .handler = handler };
|
||||
},
|
||||
// Pre-built event handlers
|
||||
.@"struct" => if (T == zx.EventHandler) .{
|
||||
.name = name,
|
||||
.handler = val,
|
||||
// Pre-built event handlers (e.g. from ctx.bind(...))
|
||||
.@"struct" => if (T == zx.EventHandler) blk: {
|
||||
var handler = val;
|
||||
if (src) |s| {
|
||||
handler.stampId(self.getAlloc(), comptime Id.extendId(null, s, 0));
|
||||
}
|
||||
break :blk .{ .name = name, .handler = handler };
|
||||
} else if (comptime @hasDecl(T, "format")) blk: {
|
||||
const allocator = self.getAlloc();
|
||||
const str = std.fmt.allocPrint(allocator, "{f}", .{val}) catch @panic("OOM");
|
||||
@ -309,11 +333,11 @@ const Context = struct {
|
||||
pub fn attrf(self: *Context, comptime name: []const u8, comptime format: []const u8, args: anytype) ?Element.Attribute {
|
||||
const allocator = self.getAlloc();
|
||||
const text = std.fmt.allocPrint(allocator, format, args) catch @panic("OOM");
|
||||
return self.attr(name, text);
|
||||
return self.attr(@src(), name, text);
|
||||
}
|
||||
|
||||
pub fn attrv(self: *Context, val: anytype) []const u8 {
|
||||
const attrkv = self.attr("f", val);
|
||||
const attrkv = self.attr(@src(), "f", val);
|
||||
if (attrkv) |a| {
|
||||
return a.value orelse "";
|
||||
}
|
||||
@ -384,7 +408,7 @@ const Context = struct {
|
||||
|
||||
inline for (field_names, 0..) |field_name, i| {
|
||||
const val = @field(props, field_name);
|
||||
result[i] = self.attr(field_name, val);
|
||||
result[i] = self.attr(@src(), field_name, val);
|
||||
}
|
||||
|
||||
return result;
|
||||
@ -511,7 +535,7 @@ const Context = struct {
|
||||
return result;
|
||||
}
|
||||
|
||||
pub fn cmp(self: *Context, comptime func: anytype, options: Options, props: anytype) Component {
|
||||
pub fn cmp(self: *Context, comptime func: anytype, comptime copts: ComptimeOptions, options: Options, props: anytype) Component {
|
||||
const allocator = self.getAlloc();
|
||||
|
||||
const FuncInfo = @typeInfo(@TypeOf(func));
|
||||
@ -536,6 +560,13 @@ const Context = struct {
|
||||
comp_fn.fallback = options.fallback;
|
||||
comp_fn.caching = options.caching;
|
||||
|
||||
// Derive a stable, unique instance id entirely at comptime from this
|
||||
// `cmp` call site's source location. `@src()` already encodes file +
|
||||
// line + column, so the id is globally unique per instance site.
|
||||
if (copts.src) |src| {
|
||||
comp_fn.id = comptime Id.extendId(null, src, 0);
|
||||
}
|
||||
|
||||
// If client option is set, return a client component (for @rendering={.client})
|
||||
// Render the component on the server for SSR, then hydrate on client.
|
||||
// On Browser (already on the client), skip the CSR wrapper - just render
|
||||
@ -641,3 +672,104 @@ fn isStatePointer(comptime PT: type) bool {
|
||||
@hasDecl(CT, "set") and
|
||||
@hasDecl(CT, "update");
|
||||
}
|
||||
|
||||
pub const fnv = std.hash.Fnv1a_64;
|
||||
|
||||
/// This was taken from DVUI and modified to make the ID stable across builds
|
||||
/// A generic id created by hashing `std.builting.SourceLocation`'s (from `@src()`)
|
||||
pub const Id = enum(u64) {
|
||||
zero = 0,
|
||||
// This may not work in future and is illegal behaviour / arch specific to compare to undefined.
|
||||
undef = 0xAAAAAAAAAAAAAAAA,
|
||||
_,
|
||||
|
||||
/// Make a unique id from `src` and `id_extra`, possibly starting with start
|
||||
/// (usually a parent widget id). This is how the initial parent widget id is
|
||||
/// created, and also toasts and dialogs from other threads.
|
||||
///
|
||||
/// See `Widget.extendId` which calls this with the widget id as start.
|
||||
///
|
||||
/// ```zig
|
||||
/// dvui.parentGet().extendId(@src(), id_extra)
|
||||
/// ```
|
||||
/// is how new widgets get their id, and can be used to make a unique id without
|
||||
/// making a widget.
|
||||
pub fn extendId(start: ?Id, comptime src: std.builtin.SourceLocation, id_extra: usize) Id {
|
||||
const cp = std.fmt.comptimePrint;
|
||||
var hash = fnv.init();
|
||||
if (start) |s| {
|
||||
hash.value = s.asU64();
|
||||
}
|
||||
// NOTE: `src.module` is intentionally excluded from the hash. The same
|
||||
// generated page is compiled into both the server (`app` module) and the
|
||||
// wasm client (`zx_meta` module) — hashing the module name would yield a
|
||||
// different id per build, breaking server-action dispatch (the client and
|
||||
// server would disagree on a handler's id). `file`+`line`+`column` are
|
||||
// stable across both builds and unique within a page.
|
||||
hash.update(cp("{s}", .{src.file}));
|
||||
hash.update(cp("{d}", .{src.line}));
|
||||
hash.update(cp("{d}", .{src.column}));
|
||||
var buf: [40]u8 = undefined;
|
||||
hash.update(std.fmt.bufPrint(&buf, "{d}", .{id_extra}) catch unreachable);
|
||||
return @enumFromInt(hash.final());
|
||||
}
|
||||
|
||||
/// Runtime variant of `extendId` that hashes a runtime `std.builtin.SourceLocation`.
|
||||
/// Produces the same id as `extendId` for an equivalent `src`/`id_extra`, so a
|
||||
/// component-block id (built at comptime) and an instance id derived from a
|
||||
/// runtime `@src()` value hash consistently.
|
||||
pub fn extend(start: ?Id, src: std.builtin.SourceLocation, id_extra: usize) Id {
|
||||
var hash = fnv.init();
|
||||
if (start) |s| {
|
||||
hash.value = s.asU64();
|
||||
}
|
||||
// `src.module` intentionally excluded — see `extendId` for why. Keep these
|
||||
// two functions in sync so a comptime id and its runtime equivalent match.
|
||||
hash.update(src.file);
|
||||
var buf: [40]u8 = undefined;
|
||||
hash.update(std.fmt.bufPrint(&buf, "{d}", .{src.line}) catch unreachable);
|
||||
hash.update(std.fmt.bufPrint(&buf, "{d}", .{src.column}) catch unreachable);
|
||||
hash.update(std.fmt.bufPrint(&buf, "{d}", .{id_extra}) catch unreachable);
|
||||
return @enumFromInt(hash.final());
|
||||
}
|
||||
|
||||
/// Make a new id by combining id with a name, commonly a string key like `"__value"`.
|
||||
/// This is how dvui tracks things in `dataGet`/`dataSet`, `animation`, and `timer`.
|
||||
pub fn update(id: Id, name: []const u8) Id {
|
||||
var h = fnv.init();
|
||||
h.value = id.asU64();
|
||||
h.update(name);
|
||||
return @enumFromInt(h.final());
|
||||
}
|
||||
|
||||
pub fn asU64(self: Id) u64 {
|
||||
return @intFromEnum(self);
|
||||
}
|
||||
|
||||
/// Shortened, stable 32-bit form of the id (the low 32 bits of the hash).
|
||||
/// Used for compact, human-readable string keys (see `fmtShort`). Collision
|
||||
/// risk within a single page is negligible.
|
||||
pub fn short(self: Id) u32 {
|
||||
return @truncate(@intFromEnum(self));
|
||||
}
|
||||
|
||||
/// Format the id as a short, prefixed, stable string (e.g. `c1a2b3c4` for a
|
||||
/// component instance, `a9f8e7d6` for an action handler). The result is
|
||||
/// allocated with `allocator`.
|
||||
pub fn fmtShort(self: Id, allocator: std.mem.Allocator, comptime prefix: []const u8) []const u8 {
|
||||
return std.fmt.allocPrint(allocator, prefix ++ "{x:0>8}", .{self.short()}) catch @panic("OOM");
|
||||
}
|
||||
|
||||
/// ALWAYS prefer using `asU64` unless a `usize` is required as it could
|
||||
/// loose precision and uniqueness on non-64bit platforms (like wasm32).
|
||||
///
|
||||
/// Using an `Id` as `Options.id_extra` would be a valid use of this function
|
||||
pub fn asUsize(self: Id) usize {
|
||||
// usize might be u32 (like on wasm32)
|
||||
return @truncate(@intFromEnum(self));
|
||||
}
|
||||
|
||||
pub fn format(self: *const Id, writer: *std.Io.Writer) !void {
|
||||
try writer.print("{x}", .{self.asU64()});
|
||||
}
|
||||
};
|
||||
|
||||
@ -30,7 +30,7 @@ test "in Component" {
|
||||
defer arena.deinit();
|
||||
const arena_allocator = arena.allocator();
|
||||
|
||||
var ctx = zx.x.allocInit(arena_allocator);
|
||||
var ctx = zx.x.allocInit(arena_allocator, .{});
|
||||
|
||||
const style: S = .{
|
||||
.color = .hex(0x0000ff),
|
||||
@ -39,8 +39,8 @@ test "in Component" {
|
||||
|
||||
const comp = ctx.ele(.div, .{
|
||||
.attributes = &[_]zx.Element.Attribute{
|
||||
ctx.attr("style", style).?,
|
||||
ctx.attr("class", "my-div").?,
|
||||
ctx.attr(@src(), "style", style).?,
|
||||
ctx.attr(@src(), "class", "my-div").?,
|
||||
},
|
||||
.children = &[_]zx.Component{
|
||||
ctx.txt("Hello with style"),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const a = allocator;
|
||||
var _zx = @import("zx").x.allocInit(a);
|
||||
var _zx = @import("zx").x.allocInit(a, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
@ -8,11 +8,13 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
ArgToBuiltin,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "ArgToBuiltin" },
|
||||
.{},
|
||||
),
|
||||
_zx.cmp(
|
||||
StructToBuiltin,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "StructToBuiltin" },
|
||||
.{},
|
||||
),
|
||||
@ -22,7 +24,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
}
|
||||
|
||||
fn ArgToBuiltin(arena: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(arena);
|
||||
var _zx = @import("zx").x.allocInit(arena, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
@ -34,7 +36,7 @@ fn ArgToBuiltin(arena: zx.Allocator) zx.Component {
|
||||
const Props = struct { c: zx.Allocator };
|
||||
fn StructToBuiltin(a: zx.Allocator) zx.Component {
|
||||
const props = Props{ .c = a };
|
||||
var _zx = @import("zx").x.allocInit(props.c);
|
||||
var _zx = @import("zx").x.allocInit(props.c, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
@ -64,8 +64,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.{
|
||||
.escaping = .html,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "bold"),
|
||||
_zx.attr("class", "italic"),
|
||||
_zx.attr(@src(), "class", "bold"),
|
||||
_zx.attr(@src(), "class", "italic"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.txt(" \n"),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const hello_child = _zx_ele_blk_0: {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
break :_zx_ele_blk_0 _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -11,7 +11,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
},
|
||||
);
|
||||
};
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
@ -19,11 +19,13 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
ChildComponent,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "ChildComponent" },
|
||||
.{ .children = hello_child },
|
||||
),
|
||||
_zx.cmp(
|
||||
ChildComponent,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "ChildComponent" },
|
||||
.{ .children = _zx.ele(
|
||||
.div,
|
||||
@ -42,7 +44,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
// Note: Not providing allocator here will use the default allocator (std.heap.page_allocator) and will have performance penalty
|
||||
// Only use this when you need to create a component that doesn't need to allocate memory, like a complete static element.
|
||||
const hello_child_outside = _zx_ele_blk_1: {
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{});
|
||||
break :_zx_ele_blk_1 _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -55,7 +57,7 @@ const hello_child_outside = _zx_ele_blk_1: {
|
||||
|
||||
const Props = struct { children: zx.Component };
|
||||
pub fn ChildComponent(allocator: zx.Allocator, props: Props) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
|
||||
@ -61,17 +61,17 @@
|
||||
11:12 -> 12:17 | "</div>" => "div,"
|
||||
7:12 -> 12:17 | "<div class={class_na" => "div,"
|
||||
11:12 -> 12:20 | "</div>" => ","
|
||||
7:17 -> 15:34 | "class={class_name} i" => "class", class_name),"
|
||||
7:23 -> 15:42 | "{class_name} id={id}" => "class_name),"
|
||||
7:36 -> 16:34 | "id={id}>" => "id", id),"
|
||||
7:39 -> 16:39 | "{id}>" => "id),"
|
||||
7:17 -> 15:42 | "class={class_name} i" => "class", class_name),"
|
||||
7:23 -> 15:50 | "{class_name} id={id}" => "class_name),"
|
||||
7:36 -> 16:42 | "id={id}>" => "id", id),"
|
||||
7:39 -> 16:47 | "{id}>" => "id),"
|
||||
10:16 -> 20:28 | "</button>" => ".button,"
|
||||
8:16 -> 20:28 | "<button class={if (i" => ".button,"
|
||||
10:16 -> 20:29 | "</button>" => "button,"
|
||||
8:16 -> 20:29 | "<button class={if (i" => "button,"
|
||||
10:16 -> 20:35 | "</button>" => ","
|
||||
8:24 -> 23:46 | "class={if (is_active" => "class", if (is_activ"
|
||||
8:30 -> 23:54 | "{if (is_active) "act" => "if (is_active) "acti"
|
||||
8:24 -> 23:54 | "class={if (is_active" => "class", if (is_activ"
|
||||
8:30 -> 23:62 | "{if (is_active) "act" => "if (is_active) "acti"
|
||||
9:0 -> 26:36 | " " => "_zx.txt(" Click me")"
|
||||
10:25 -> 29:24 | "" => "),"
|
||||
11:18 -> 32:12 | "" => "),"
|
||||
|
||||
@ -3,7 +3,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const is_active = true;
|
||||
const id = "main-content";
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -13,15 +13,15 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.div,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", class_name),
|
||||
_zx.attr("id", id),
|
||||
_zx.attr(@src(), "class", class_name),
|
||||
_zx.attr(@src(), "id", id),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.ele(
|
||||
.button,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", if (is_active) "active" else "inactive"),
|
||||
_zx.attr(@src(), "class", if (is_active) "active" else "inactive"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.txt(" Click me"),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.fragment,
|
||||
.{
|
||||
@ -9,7 +9,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.button,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("onclick", handleClick),
|
||||
_zx.attr(@src(), "onclick", handleClick),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.txt(" Click me"),
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const class_name = "container";
|
||||
const is_active = true;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -12,9 +12,9 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.section,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", class_name),
|
||||
_zx.attr("id", "main"),
|
||||
_zx.attr("data-active", is_active),
|
||||
_zx.attr(@src(), "class", class_name),
|
||||
_zx.attr(@src(), "id", "main"),
|
||||
_zx.attr(@src(), "data-active", is_active),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.ele(
|
||||
@ -32,9 +32,9 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "text"),
|
||||
_zx.attr("class", "input"),
|
||||
_zx.attr("placeholder", "Enter text"),
|
||||
_zx.attr(@src(), "type", "text"),
|
||||
_zx.attr(@src(), "class", "input"),
|
||||
_zx.attr(@src(), "placeholder", "Enter text"),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -42,8 +42,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.button,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "btn"),
|
||||
_zx.attr("id", "submit"),
|
||||
_zx.attr(@src(), "class", "btn"),
|
||||
_zx.attr(@src(), "id", "submit"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.txt("Submit"),
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const class_name = "container";
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -11,9 +11,9 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.section,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", class_name),
|
||||
_zx.attr("id", "main"),
|
||||
_zx.attr("data-active", "true"),
|
||||
_zx.attr(@src(), "class", class_name),
|
||||
_zx.attr(@src(), "id", "main"),
|
||||
_zx.attr(@src(), "data-active", "true"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.ele(
|
||||
@ -31,9 +31,9 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "text"),
|
||||
_zx.attr("class", "input"),
|
||||
_zx.attr("placeholder", "Enter text"),
|
||||
_zx.attr(@src(), "type", "text"),
|
||||
_zx.attr(@src(), "class", "input"),
|
||||
_zx.attr(@src(), "placeholder", "Enter text"),
|
||||
}),
|
||||
},
|
||||
),
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const class_name = "container";
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -11,9 +11,9 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.section,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", class_name),
|
||||
_zx.attr("id", "main"),
|
||||
_zx.attr("data-active", "true"),
|
||||
_zx.attr(@src(), "class", class_name),
|
||||
_zx.attr(@src(), "id", "main"),
|
||||
_zx.attr(@src(), "data-active", "true"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.ele(
|
||||
@ -31,9 +31,9 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "text"),
|
||||
_zx.attr("class", "input"),
|
||||
_zx.attr("placeholder", "Enter text"),
|
||||
_zx.attr(@src(), "type", "text"),
|
||||
_zx.attr(@src(), "class", "input"),
|
||||
_zx.attr(@src(), "placeholder", "Enter text"),
|
||||
}),
|
||||
},
|
||||
),
|
||||
|
||||
@ -3,7 +3,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const value: i32 = 42;
|
||||
const class = "b-1 bold";
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.form,
|
||||
.{
|
||||
@ -13,8 +13,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("data-name", @"data-name"),
|
||||
_zx.attr("class", class),
|
||||
_zx.attr(@src(), "data-name", @"data-name"),
|
||||
_zx.attr(@src(), "class", class),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -22,7 +22,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("value", value),
|
||||
_zx.attr(@src(), "value", value),
|
||||
}),
|
||||
},
|
||||
),
|
||||
|
||||
@ -9,7 +9,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.value = "test@example.com",
|
||||
};
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.form,
|
||||
.{
|
||||
@ -20,11 +20,13 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Input,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Input" },
|
||||
input_props,
|
||||
),
|
||||
_zx.cmp(
|
||||
Input,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Input" },
|
||||
_zx.propsM(input_props, .{ .extra = "override" }),
|
||||
),
|
||||
@ -35,7 +37,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
|
||||
const InputProps = struct { value: []const u8, name: []const u8, extra: []const u8 = "" };
|
||||
fn Input(ctx: *zx.ComponentCtx(InputProps)) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator);
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -53,7 +55,7 @@ fn Input(ctx: *zx.ComponentCtx(InputProps)) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrsM(.{
|
||||
_zx.attr("type", "text"),
|
||||
_zx.attr(@src(), "type", "text"),
|
||||
_zx.attrSpr(ctx.props),
|
||||
}),
|
||||
},
|
||||
@ -62,7 +64,7 @@ fn Input(ctx: *zx.ComponentCtx(InputProps)) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrsM(.{
|
||||
_zx.attr("extra", "override-by-spr"),
|
||||
_zx.attr(@src(), "extra", "override-by-spr"),
|
||||
_zx.attrSpr(ctx.props),
|
||||
}),
|
||||
},
|
||||
@ -71,9 +73,9 @@ fn Input(ctx: *zx.ComponentCtx(InputProps)) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrsM(.{
|
||||
_zx.attr("type", "text"),
|
||||
_zx.attr(@src(), "type", "text"),
|
||||
_zx.attrSpr(ctx.props),
|
||||
_zx.attr("extra", "override-by-attr"),
|
||||
_zx.attr(@src(), "extra", "override-by-attr"),
|
||||
}),
|
||||
},
|
||||
),
|
||||
|
||||
@ -9,7 +9,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const optional_null: ?[]const u8 = null;
|
||||
const enum_val = InputType.text;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.form,
|
||||
.{
|
||||
@ -19,8 +19,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "text"),
|
||||
_zx.attr("data-string", string_val),
|
||||
_zx.attr(@src(), "type", "text"),
|
||||
_zx.attr(@src(), "data-string", string_val),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -28,8 +28,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "number"),
|
||||
_zx.attr("value", int_val),
|
||||
_zx.attr(@src(), "type", "number"),
|
||||
_zx.attr(@src(), "value", int_val),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -37,8 +37,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "range"),
|
||||
_zx.attr("step", float_val),
|
||||
_zx.attr(@src(), "type", "range"),
|
||||
_zx.attr(@src(), "step", float_val),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -46,8 +46,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "checkbox"),
|
||||
_zx.attr("disabled", bool_true),
|
||||
_zx.attr(@src(), "type", "checkbox"),
|
||||
_zx.attr(@src(), "disabled", bool_true),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -55,8 +55,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "checkbox"),
|
||||
_zx.attr("disabled", bool_false),
|
||||
_zx.attr(@src(), "type", "checkbox"),
|
||||
_zx.attr(@src(), "disabled", bool_false),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -64,8 +64,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "text"),
|
||||
_zx.attr("data-user", optional_val),
|
||||
_zx.attr(@src(), "type", "text"),
|
||||
_zx.attr(@src(), "data-user", optional_val),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -73,8 +73,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "text"),
|
||||
_zx.attr("data-user", optional_null),
|
||||
_zx.attr(@src(), "type", "text"),
|
||||
_zx.attr(@src(), "data-user", optional_null),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -82,7 +82,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", enum_val),
|
||||
_zx.attr(@src(), "type", enum_val),
|
||||
}),
|
||||
},
|
||||
),
|
||||
|
||||
@ -28,87 +28,87 @@
|
||||
3:44 -> 8:16 | "" => "Button,"
|
||||
3:12 -> 8:16 | "<Button title="Custo" => "Button,"
|
||||
3:44 -> 8:22 | "" => ","
|
||||
3:20 -> 11:21 | "title="Custom Button" => "title = "Custom Butt"
|
||||
3:26 -> 11:29 | ""Custom Button" />" => ""Custom Button""
|
||||
3:44 -> 13:12 | "" => ",),"
|
||||
4:15 -> 16:0 | "" => ");"
|
||||
5:5 -> 16:1 | ";" => ";"
|
||||
5:6 -> 16:2 | "" => ""
|
||||
6:0 -> 17:0 | "}" => "}"
|
||||
6:1 -> 17:1 | "" => ""
|
||||
8:0 -> 19:0 | "const ButtonProps = " => "const ButtonProps = "
|
||||
8:5 -> 19:5 | " ButtonProps = struc" => " ButtonProps = struc"
|
||||
8:6 -> 19:6 | "ButtonProps = struct" => "ButtonProps = struct"
|
||||
8:17 -> 19:17 | " = struct { title: [" => " = struct { title: ["
|
||||
8:18 -> 19:18 | "= struct { title: []" => "= struct { title: []"
|
||||
8:19 -> 19:19 | " struct { title: []c" => " struct { title: []c"
|
||||
8:20 -> 19:20 | "struct { title: []co" => "struct { title: []co"
|
||||
8:26 -> 19:26 | " { title: []const u8" => " { title: []const u8"
|
||||
8:27 -> 19:27 | "{ title: []const u8 " => "{ title: []const u8 "
|
||||
8:28 -> 19:28 | " title: []const u8 }" => " title: []const u8 }"
|
||||
8:29 -> 19:29 | "title: []const u8 };" => "title: []const u8 };"
|
||||
8:34 -> 19:34 | ": []const u8 };" => ": []const u8 };"
|
||||
8:35 -> 19:35 | " []const u8 };" => " []const u8 };"
|
||||
8:36 -> 19:36 | "[]const u8 };" => "[]const u8 };"
|
||||
8:37 -> 19:37 | "]const u8 };" => "]const u8 };"
|
||||
8:38 -> 19:38 | "const u8 };" => "const u8 };"
|
||||
8:43 -> 19:43 | " u8 };" => " u8 };"
|
||||
8:44 -> 19:44 | "u8 };" => "u8 };"
|
||||
8:46 -> 19:46 | " };" => " };"
|
||||
8:47 -> 19:47 | "};" => "};"
|
||||
8:48 -> 19:48 | ";" => ";"
|
||||
8:49 -> 19:49 | "" => ""
|
||||
9:0 -> 20:0 | "pub fn Button(alloca" => "pub fn Button(alloca"
|
||||
9:3 -> 20:3 | " fn Button(allocator" => " fn Button(allocator"
|
||||
9:4 -> 20:4 | "fn Button(allocator:" => "fn Button(allocator:"
|
||||
9:6 -> 20:6 | " Button(allocator: z" => " Button(allocator: z"
|
||||
9:7 -> 20:7 | "Button(allocator: zx" => "Button(allocator: zx"
|
||||
9:13 -> 20:13 | "(allocator: zx.Alloc" => "(allocator: zx.Alloc"
|
||||
9:14 -> 20:14 | "allocator: zx.Alloca" => "allocator: zx.Alloca"
|
||||
9:23 -> 20:23 | ": zx.Allocator, prop" => ": zx.Allocator, prop"
|
||||
9:24 -> 20:24 | " zx.Allocator, props" => " zx.Allocator, props"
|
||||
9:25 -> 20:25 | "zx.Allocator, props:" => "zx.Allocator, props:"
|
||||
9:27 -> 20:27 | ".Allocator, props: B" => ".Allocator, props: B"
|
||||
9:28 -> 20:28 | "Allocator, props: Bu" => "Allocator, props: Bu"
|
||||
9:37 -> 20:37 | ", props: ButtonProps" => ", props: ButtonProps"
|
||||
9:38 -> 20:38 | " props: ButtonProps)" => " props: ButtonProps)"
|
||||
9:39 -> 20:39 | "props: ButtonProps) " => "props: ButtonProps) "
|
||||
9:44 -> 20:44 | ": ButtonProps) zx.Co" => ": ButtonProps) zx.Co"
|
||||
9:45 -> 20:45 | " ButtonProps) zx.Com" => " ButtonProps) zx.Com"
|
||||
9:46 -> 20:46 | "ButtonProps) zx.Comp" => "ButtonProps) zx.Comp"
|
||||
9:57 -> 20:57 | ") zx.Component {" => ") zx.Component {"
|
||||
9:58 -> 20:58 | " zx.Component {" => " zx.Component {"
|
||||
9:59 -> 20:59 | "zx.Component {" => "zx.Component {"
|
||||
9:61 -> 20:61 | ".Component {" => ".Component {"
|
||||
9:62 -> 20:62 | "Component {" => "Component {"
|
||||
9:71 -> 20:71 | " {" => " {"
|
||||
9:72 -> 20:72 | "{" => "{"
|
||||
9:73 -> 20:73 | "" => ""
|
||||
10:4 -> 22:0 | "return (<button @all" => "return _zx.ele("
|
||||
10:56 -> 23:4 | "</button>);" => ".button,"
|
||||
10:12 -> 23:4 | "<button @allocator={" => ".button,"
|
||||
10:56 -> 23:5 | "</button>);" => "button,"
|
||||
10:12 -> 23:5 | "<button @allocator={" => "button,"
|
||||
10:56 -> 23:11 | "</button>);" => ","
|
||||
10:31 -> 25:21 | "{allocator}>{props.t" => "allocator,"
|
||||
10:44 -> 27:12 | "props.title}</button" => "_zx.expr(props.title"
|
||||
10:44 -> 27:21 | "props.title}</button" => "props.title),"
|
||||
10:65 -> 30:0 | ");" => ");"
|
||||
10:66 -> 30:1 | ";" => ";"
|
||||
10:67 -> 30:2 | "" => ""
|
||||
11:0 -> 31:0 | "}" => "}"
|
||||
11:1 -> 31:1 | "" => ""
|
||||
13:0 -> 33:0 | "const zx = @import("" => "const zx = @import(""
|
||||
13:5 -> 33:5 | " zx = @import("zx");" => " zx = @import("zx");"
|
||||
13:6 -> 33:6 | "zx = @import("zx");" => "zx = @import("zx");"
|
||||
13:8 -> 33:8 | " = @import("zx");" => " = @import("zx");"
|
||||
13:9 -> 33:9 | "= @import("zx");" => "= @import("zx");"
|
||||
13:10 -> 33:10 | " @import("zx");" => " @import("zx");"
|
||||
13:11 -> 33:11 | "@import("zx");" => "@import("zx");"
|
||||
13:18 -> 33:18 | "("zx");" => "("zx");"
|
||||
13:19 -> 33:19 | ""zx");" => ""zx");"
|
||||
13:20 -> 33:20 | "zx");" => "zx");"
|
||||
13:22 -> 33:22 | "");" => "");"
|
||||
13:23 -> 33:23 | ");" => ");"
|
||||
13:24 -> 33:24 | ";" => ";"
|
||||
13:25 -> 33:25 | "" => ""
|
||||
3:20 -> 12:21 | "title="Custom Button" => "title = "Custom Butt"
|
||||
3:26 -> 12:29 | ""Custom Button" />" => ""Custom Button""
|
||||
3:44 -> 14:12 | "" => ",),"
|
||||
4:15 -> 17:0 | "" => ");"
|
||||
5:5 -> 17:1 | ";" => ";"
|
||||
5:6 -> 17:2 | "" => ""
|
||||
6:0 -> 18:0 | "}" => "}"
|
||||
6:1 -> 18:1 | "" => ""
|
||||
8:0 -> 20:0 | "const ButtonProps = " => "const ButtonProps = "
|
||||
8:5 -> 20:5 | " ButtonProps = struc" => " ButtonProps = struc"
|
||||
8:6 -> 20:6 | "ButtonProps = struct" => "ButtonProps = struct"
|
||||
8:17 -> 20:17 | " = struct { title: [" => " = struct { title: ["
|
||||
8:18 -> 20:18 | "= struct { title: []" => "= struct { title: []"
|
||||
8:19 -> 20:19 | " struct { title: []c" => " struct { title: []c"
|
||||
8:20 -> 20:20 | "struct { title: []co" => "struct { title: []co"
|
||||
8:26 -> 20:26 | " { title: []const u8" => " { title: []const u8"
|
||||
8:27 -> 20:27 | "{ title: []const u8 " => "{ title: []const u8 "
|
||||
8:28 -> 20:28 | " title: []const u8 }" => " title: []const u8 }"
|
||||
8:29 -> 20:29 | "title: []const u8 };" => "title: []const u8 };"
|
||||
8:34 -> 20:34 | ": []const u8 };" => ": []const u8 };"
|
||||
8:35 -> 20:35 | " []const u8 };" => " []const u8 };"
|
||||
8:36 -> 20:36 | "[]const u8 };" => "[]const u8 };"
|
||||
8:37 -> 20:37 | "]const u8 };" => "]const u8 };"
|
||||
8:38 -> 20:38 | "const u8 };" => "const u8 };"
|
||||
8:43 -> 20:43 | " u8 };" => " u8 };"
|
||||
8:44 -> 20:44 | "u8 };" => "u8 };"
|
||||
8:46 -> 20:46 | " };" => " };"
|
||||
8:47 -> 20:47 | "};" => "};"
|
||||
8:48 -> 20:48 | ";" => ";"
|
||||
8:49 -> 20:49 | "" => ""
|
||||
9:0 -> 21:0 | "pub fn Button(alloca" => "pub fn Button(alloca"
|
||||
9:3 -> 21:3 | " fn Button(allocator" => " fn Button(allocator"
|
||||
9:4 -> 21:4 | "fn Button(allocator:" => "fn Button(allocator:"
|
||||
9:6 -> 21:6 | " Button(allocator: z" => " Button(allocator: z"
|
||||
9:7 -> 21:7 | "Button(allocator: zx" => "Button(allocator: zx"
|
||||
9:13 -> 21:13 | "(allocator: zx.Alloc" => "(allocator: zx.Alloc"
|
||||
9:14 -> 21:14 | "allocator: zx.Alloca" => "allocator: zx.Alloca"
|
||||
9:23 -> 21:23 | ": zx.Allocator, prop" => ": zx.Allocator, prop"
|
||||
9:24 -> 21:24 | " zx.Allocator, props" => " zx.Allocator, props"
|
||||
9:25 -> 21:25 | "zx.Allocator, props:" => "zx.Allocator, props:"
|
||||
9:27 -> 21:27 | ".Allocator, props: B" => ".Allocator, props: B"
|
||||
9:28 -> 21:28 | "Allocator, props: Bu" => "Allocator, props: Bu"
|
||||
9:37 -> 21:37 | ", props: ButtonProps" => ", props: ButtonProps"
|
||||
9:38 -> 21:38 | " props: ButtonProps)" => " props: ButtonProps)"
|
||||
9:39 -> 21:39 | "props: ButtonProps) " => "props: ButtonProps) "
|
||||
9:44 -> 21:44 | ": ButtonProps) zx.Co" => ": ButtonProps) zx.Co"
|
||||
9:45 -> 21:45 | " ButtonProps) zx.Com" => " ButtonProps) zx.Com"
|
||||
9:46 -> 21:46 | "ButtonProps) zx.Comp" => "ButtonProps) zx.Comp"
|
||||
9:57 -> 21:57 | ") zx.Component {" => ") zx.Component {"
|
||||
9:58 -> 21:58 | " zx.Component {" => " zx.Component {"
|
||||
9:59 -> 21:59 | "zx.Component {" => "zx.Component {"
|
||||
9:61 -> 21:61 | ".Component {" => ".Component {"
|
||||
9:62 -> 21:62 | "Component {" => "Component {"
|
||||
9:71 -> 21:71 | " {" => " {"
|
||||
9:72 -> 21:72 | "{" => "{"
|
||||
9:73 -> 21:73 | "" => ""
|
||||
10:4 -> 23:0 | "return (<button @all" => "return _zx.ele("
|
||||
10:56 -> 24:4 | "</button>);" => ".button,"
|
||||
10:12 -> 24:4 | "<button @allocator={" => ".button,"
|
||||
10:56 -> 24:5 | "</button>);" => "button,"
|
||||
10:12 -> 24:5 | "<button @allocator={" => "button,"
|
||||
10:56 -> 24:11 | "</button>);" => ","
|
||||
10:31 -> 26:21 | "{allocator}>{props.t" => "allocator,"
|
||||
10:44 -> 28:12 | "props.title}</button" => "_zx.expr(props.title"
|
||||
10:44 -> 28:21 | "props.title}</button" => "props.title),"
|
||||
10:65 -> 31:0 | ");" => ");"
|
||||
10:66 -> 31:1 | ";" => ";"
|
||||
10:67 -> 31:2 | "" => ""
|
||||
11:0 -> 32:0 | "}" => "}"
|
||||
11:1 -> 32:1 | "" => ""
|
||||
13:0 -> 34:0 | "const zx = @import("" => "const zx = @import(""
|
||||
13:5 -> 34:5 | " zx = @import("zx");" => " zx = @import("zx");"
|
||||
13:6 -> 34:6 | "zx = @import("zx");" => "zx = @import("zx");"
|
||||
13:8 -> 34:8 | " = @import("zx");" => " = @import("zx");"
|
||||
13:9 -> 34:9 | "= @import("zx");" => "= @import("zx");"
|
||||
13:10 -> 34:10 | " @import("zx");" => " @import("zx");"
|
||||
13:11 -> 34:11 | "@import("zx");" => "@import("zx");"
|
||||
13:18 -> 34:18 | "("zx");" => "("zx");"
|
||||
13:19 -> 34:19 | ""zx");" => ""zx");"
|
||||
13:20 -> 34:20 | "zx");" => "zx");"
|
||||
13:22 -> 34:22 | "");" => "");"
|
||||
13:23 -> 34:23 | ");" => ");"
|
||||
13:24 -> 34:24 | ";" => ";"
|
||||
13:25 -> 34:25 | "" => ""
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,6 +7,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button" },
|
||||
.{ .title = "Custom Button" },
|
||||
),
|
||||
@ -17,7 +18,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
|
||||
const ButtonProps = struct { title: []const u8 };
|
||||
pub fn Button(allocator: zx.Allocator, props: ButtonProps) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.button,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,11 +7,13 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button", .caching = comptime .tag("10s:button") },
|
||||
.{ .title = "Custom Button" },
|
||||
),
|
||||
_zx.cmp(
|
||||
Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button", .caching = comptime .tag("10s") },
|
||||
.{ .title = "Custom Button" },
|
||||
),
|
||||
@ -22,7 +24,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
|
||||
const ButtonProps = struct { title: []const u8 };
|
||||
pub fn Button(allocator: zx.Allocator, props: ButtonProps) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.button,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,6 +7,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Wrapper,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Wrapper" },
|
||||
.{ .children = _zx.ele(.fragment, .{ .children = &.{
|
||||
_zx.ele(
|
||||
@ -21,6 +22,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
),
|
||||
_zx.cmp(
|
||||
Container,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Container" },
|
||||
.{ .children = _zx.ele(.fragment, .{ .children = &.{
|
||||
_zx.ele(
|
||||
@ -48,13 +50,13 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
|
||||
const WrapperProps = struct { children: zx.Component };
|
||||
fn Wrapper(allocator: zx.Allocator, props: WrapperProps) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
.allocator = allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "wrapper"),
|
||||
_zx.attr(@src(), "class", "wrapper"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(props.children),
|
||||
@ -65,13 +67,13 @@ fn Wrapper(allocator: zx.Allocator, props: WrapperProps) zx.Component {
|
||||
|
||||
const ContainerProps = struct { children: zx.Component };
|
||||
fn Container(allocator: zx.Allocator, props: ContainerProps) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
.allocator = allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "container"),
|
||||
_zx.attr(@src(), "class", "container"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(props.children),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,6 +7,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Wrapper,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Wrapper" },
|
||||
.{ .children = _zx.ele(.fragment, .{ .children = &.{
|
||||
_zx.ele(
|
||||
@ -21,6 +22,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
),
|
||||
_zx.cmp(
|
||||
Card,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Card" },
|
||||
.{ .children = _zx.ele(.fragment, .{ .children = &.{
|
||||
_zx.ele(
|
||||
@ -40,13 +42,13 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
|
||||
/// Component using ComponentContext (void props, children only)
|
||||
pub fn Wrapper(ctx: *zx.ComponentContext) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator);
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
.allocator = ctx.allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "wrapper"),
|
||||
_zx.attr(@src(), "class", "wrapper"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(ctx.children),
|
||||
@ -57,13 +59,13 @@ pub fn Wrapper(ctx: *zx.ComponentContext) zx.Component {
|
||||
|
||||
/// Another component using ComponentContext
|
||||
fn Card(ctx: *zx.ComponentContext) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator);
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.article,
|
||||
.{
|
||||
.allocator = ctx.allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "card"),
|
||||
_zx.attr(@src(), "class", "card"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(ctx.children),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,16 +7,19 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button" },
|
||||
.{ .title = "Click me" },
|
||||
),
|
||||
_zx.cmp(
|
||||
Alert,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Alert" },
|
||||
.{ .message = "This is an alert", .level = "warning" },
|
||||
),
|
||||
_zx.cmp(
|
||||
Panel,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Panel" },
|
||||
.{ .title = "Panel Title", .children = _zx.ele(.fragment, .{ .children = &.{
|
||||
_zx.ele(
|
||||
@ -37,13 +40,13 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
/// Component using ComponentCtx with props (no children)
|
||||
const ButtonProps = struct { title: []const u8 };
|
||||
pub fn Button(ctx: *zx.ComponentCtx(ButtonProps)) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator);
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.button,
|
||||
.{
|
||||
.allocator = ctx.allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "btn"),
|
||||
_zx.attr(@src(), "class", "btn"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(ctx.props.title),
|
||||
@ -55,14 +58,14 @@ pub fn Button(ctx: *zx.ComponentCtx(ButtonProps)) zx.Component {
|
||||
/// Component with multiple props
|
||||
const AlertProps = struct { message: []const u8, level: []const u8 };
|
||||
fn Alert(ctx: *zx.ComponentCtx(AlertProps)) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator);
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
.allocator = ctx.allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "alert"),
|
||||
_zx.attr("data-level", ctx.props.level),
|
||||
_zx.attr(@src(), "class", "alert"),
|
||||
_zx.attr(@src(), "data-level", ctx.props.level),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(ctx.props.message),
|
||||
@ -74,13 +77,13 @@ fn Alert(ctx: *zx.ComponentCtx(AlertProps)) zx.Component {
|
||||
/// Component with props AND children
|
||||
const PanelProps = struct { title: []const u8 };
|
||||
fn Panel(ctx: *zx.ComponentCtx(PanelProps)) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator);
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
.allocator = ctx.allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "panel"),
|
||||
_zx.attr(@src(), "class", "panel"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.ele(
|
||||
@ -95,7 +98,7 @@ fn Panel(ctx: *zx.ComponentCtx(PanelProps)) zx.Component {
|
||||
.div,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "panel-content"),
|
||||
_zx.attr(@src(), "class", "panel-content"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(ctx.children),
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const max_count = 10;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,16 +7,19 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
CounterComponent,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "CounterComponent", .client = .{ .name = "CounterComponent", .id = "c8fee6a" } },
|
||||
.{},
|
||||
),
|
||||
_zx.cmp(
|
||||
CounterComponent,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "CounterComponent" },
|
||||
.{},
|
||||
),
|
||||
_zx.cmp(
|
||||
Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button", .client = .{ .name = "Button", .id = "cd02624" } },
|
||||
.{ .title = "Custom Button" },
|
||||
),
|
||||
@ -26,7 +29,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
}
|
||||
|
||||
pub fn CounterComponent(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.button,
|
||||
.{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/// Test: CSR Zig component with props passed from server to client
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -8,16 +8,19 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Counter,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Counter", .client = .{ .name = "Counter", .id = "c24eadf" } },
|
||||
.{ .initial = 5, .label = "Main Counter" },
|
||||
),
|
||||
_zx.cmp(
|
||||
Counter,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Counter", .client = .{ .name = "Counter", .id = "cd768fc" } },
|
||||
.{ .initial = 10, .label = "Secondary" },
|
||||
),
|
||||
_zx.cmp(
|
||||
Counter,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Counter", .client = .{ .name = "Counter", .id = "c9e599a" } },
|
||||
.{ .initial = 0 },
|
||||
),
|
||||
@ -28,20 +31,20 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
|
||||
const CounterProps = struct { initial: i32 = 0, label: []const u8 = "Count" };
|
||||
pub fn Counter(ctx: *zx.ComponentCtx(CounterProps)) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator);
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
.allocator = ctx.allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "counter"),
|
||||
_zx.attr(@src(), "class", "counter"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.ele(
|
||||
.span,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "label"),
|
||||
_zx.attr(@src(), "class", "label"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(ctx.props.label),
|
||||
@ -52,7 +55,7 @@ pub fn Counter(ctx: *zx.ComponentCtx(CounterProps)) zx.Component {
|
||||
.span,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "value"),
|
||||
_zx.attr(@src(), "class", "value"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(ctx.props.initial),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/// Test: Components with error union return type (!Component)
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -8,11 +8,13 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Fallible,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Fallible" },
|
||||
.{ .success = true },
|
||||
),
|
||||
_zx.cmp(
|
||||
FallibleCtx,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "FallibleCtx" },
|
||||
.{ .success = true },
|
||||
),
|
||||
@ -25,7 +27,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const FallibleProps = struct { success: bool };
|
||||
pub fn Fallible(allocator: zx.Allocator, props: FallibleProps) !zx.Component {
|
||||
if (!props.success) return error.TestError;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -40,7 +42,7 @@ pub fn Fallible(allocator: zx.Allocator, props: FallibleProps) !zx.Component {
|
||||
/// Error union with ComponentCtx signature
|
||||
pub fn FallibleCtx(ctx: *zx.ComponentCtx(FallibleProps)) !zx.Component {
|
||||
if (!ctx.props.success) return error.TestError;
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator);
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: z.Allocator) z.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,6 +7,7 @@ pub fn Page(allocator: z.Allocator) z.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button" },
|
||||
.{ .title = "Custom Button" },
|
||||
),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,26 +7,31 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button" },
|
||||
.{ .title = "Submit" },
|
||||
),
|
||||
_zx.cmp(
|
||||
Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button" },
|
||||
.{ .title = "Cancel" },
|
||||
),
|
||||
_zx.cmp(
|
||||
AsyncScore,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "AsyncScore" },
|
||||
.{ .index = 1, .label = "Score" },
|
||||
),
|
||||
_zx.cmp(
|
||||
AsyncScore,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "AsyncScore" },
|
||||
.{ .index = 2, .label = "Points" },
|
||||
),
|
||||
_zx.cmp(
|
||||
AsyncScore,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "AsyncScore" },
|
||||
.{ .index = 3, .label = "Rating" },
|
||||
),
|
||||
@ -37,7 +42,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
|
||||
const ButtonProps = struct { title: []const u8 };
|
||||
fn Button(allocator: zx.Allocator, props: ButtonProps) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.button,
|
||||
.{
|
||||
@ -51,7 +56,7 @@ fn Button(allocator: zx.Allocator, props: ButtonProps) zx.Component {
|
||||
|
||||
const AsyncScoreProps = struct { index: u64, label: []const u8 };
|
||||
fn AsyncScore(allocator: zx.Allocator, props: AsyncScoreProps) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.span,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,6 +7,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
components.Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button" },
|
||||
.{ .title = "Custom Button" },
|
||||
),
|
||||
@ -18,7 +19,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const components = struct {
|
||||
const ButtonProps = struct { title: []const u8 };
|
||||
pub fn Button(allocator: zx.Allocator, props: ButtonProps) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.button,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,10 +7,12 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
Card,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Card" },
|
||||
.{ .title = "Welcome", .children = _zx.ele(.fragment, .{ .children = &.{
|
||||
_zx.cmp(
|
||||
Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button" },
|
||||
.{ .label = "Click me" },
|
||||
),
|
||||
@ -23,20 +25,20 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
|
||||
const CardProps = struct { title: []const u8, children: zx.Component };
|
||||
fn Card(allocator: zx.Allocator, props: CardProps) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
.allocator = allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "card"),
|
||||
_zx.attr(@src(), "class", "card"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.ele(
|
||||
.h2,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "card-header"),
|
||||
_zx.attr(@src(), "class", "card-header"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(props.title),
|
||||
@ -47,7 +49,7 @@ fn Card(allocator: zx.Allocator, props: CardProps) zx.Component {
|
||||
.div,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "card-body"),
|
||||
_zx.attr(@src(), "class", "card-body"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(props.children),
|
||||
@ -61,13 +63,13 @@ fn Card(allocator: zx.Allocator, props: CardProps) zx.Component {
|
||||
|
||||
const ButtonProps = struct { label: []const u8 };
|
||||
fn Button(allocator: zx.Allocator, props: ButtonProps) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.button,
|
||||
.{
|
||||
.allocator = allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "btn"),
|
||||
_zx.attr(@src(), "class", "btn"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.expr(props.label),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -7,11 +7,13 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
None,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "None" },
|
||||
.{},
|
||||
),
|
||||
_zx.cmp(
|
||||
Null,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Null" },
|
||||
.{},
|
||||
),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/// Test: Components with error union of optional return type (!?Component)
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -8,11 +8,13 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
MaybeContent,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "MaybeContent" },
|
||||
.{ .show = true },
|
||||
),
|
||||
_zx.cmp(
|
||||
MaybeContent,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "MaybeContent" },
|
||||
.{ .show = false },
|
||||
),
|
||||
@ -25,7 +27,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const MaybeProps = struct { show: bool };
|
||||
pub fn MaybeContent(ctx: *zx.ComponentCtx(MaybeProps)) !?zx.Component {
|
||||
if (!ctx.props.show) return null;
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator);
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const max_count = 10;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.cmp(
|
||||
Button,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Button" },
|
||||
.{},
|
||||
);
|
||||
}
|
||||
|
||||
pub fn Button(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.button,
|
||||
.{
|
||||
|
||||
@ -305,217 +305,217 @@
|
||||
42:82 -> 151:24 | ")}" => "UserComponent,"
|
||||
42:33 -> 151:24 | "<UserComponent name=" => "UserComponent,"
|
||||
42:82 -> 151:37 | ")}" => ","
|
||||
42:48 -> 154:29 | "name={user.name} age" => "name = user.name,"
|
||||
42:53 -> 154:36 | "{user.name} age={use" => "user.name,"
|
||||
42:65 -> 155:29 | "age={user.age} />)}" => "age = user.age"
|
||||
42:69 -> 155:35 | "{user.age} />)}" => "user.age"
|
||||
42:82 -> 157:20 | ")}" => ",);"
|
||||
43:15 -> 163:0 | "" => ");"
|
||||
44:5 -> 163:1 | ";" => ";"
|
||||
44:6 -> 163:2 | "" => ""
|
||||
45:0 -> 164:0 | "}" => "}"
|
||||
45:1 -> 164:1 | "" => ""
|
||||
47:0 -> 166:0 | "const User = struct " => "const User = struct "
|
||||
47:5 -> 166:5 | " User = struct { nam" => " User = struct { nam"
|
||||
47:6 -> 166:6 | "User = struct { name" => "User = struct { name"
|
||||
47:10 -> 166:10 | " = struct { name: []" => " = struct { name: []"
|
||||
47:11 -> 166:11 | "= struct { name: []c" => "= struct { name: []c"
|
||||
47:12 -> 166:12 | " struct { name: []co" => " struct { name: []co"
|
||||
47:13 -> 166:13 | "struct { name: []con" => "struct { name: []con"
|
||||
47:19 -> 166:19 | " { name: []const u8," => " { name: []const u8,"
|
||||
47:20 -> 166:20 | "{ name: []const u8, " => "{ name: []const u8, "
|
||||
47:21 -> 166:21 | " name: []const u8, a" => " name: []const u8, a"
|
||||
47:22 -> 166:22 | "name: []const u8, ag" => "name: []const u8, ag"
|
||||
47:26 -> 166:26 | ": []const u8, age: u" => ": []const u8, age: u"
|
||||
47:27 -> 166:27 | " []const u8, age: u3" => " []const u8, age: u3"
|
||||
47:28 -> 166:28 | "[]const u8, age: u32" => "[]const u8, age: u32"
|
||||
47:29 -> 166:29 | "]const u8, age: u32 " => "]const u8, age: u32 "
|
||||
47:30 -> 166:30 | "const u8, age: u32 }" => "const u8, age: u32 }"
|
||||
47:35 -> 166:35 | " u8, age: u32 };" => " u8, age: u32 };"
|
||||
47:36 -> 166:36 | "u8, age: u32 };" => "u8, age: u32 };"
|
||||
47:38 -> 166:38 | ", age: u32 };" => ", age: u32 };"
|
||||
47:39 -> 166:39 | " age: u32 };" => " age: u32 };"
|
||||
47:40 -> 166:40 | "age: u32 };" => "age: u32 };"
|
||||
47:43 -> 166:43 | ": u32 };" => ": u32 };"
|
||||
47:44 -> 166:44 | " u32 };" => " u32 };"
|
||||
47:45 -> 166:45 | "u32 };" => "u32 };"
|
||||
47:48 -> 166:48 | " };" => " };"
|
||||
47:49 -> 166:49 | "};" => "};"
|
||||
47:50 -> 166:50 | ";" => ";"
|
||||
47:51 -> 166:51 | "" => ""
|
||||
48:0 -> 167:0 | "const users = [_]Use" => "const users = [_]Use"
|
||||
48:5 -> 167:5 | " users = [_]User{" => " users = [_]User{"
|
||||
48:6 -> 167:6 | "users = [_]User{" => "users = [_]User{"
|
||||
48:11 -> 167:11 | " = [_]User{" => " = [_]User{"
|
||||
48:12 -> 167:12 | "= [_]User{" => "= [_]User{"
|
||||
48:13 -> 167:13 | " [_]User{" => " [_]User{"
|
||||
48:14 -> 167:14 | "[_]User{" => "[_]User{"
|
||||
48:15 -> 167:15 | "_]User{" => "_]User{"
|
||||
48:16 -> 167:16 | "]User{" => "]User{"
|
||||
48:17 -> 167:17 | "User{" => "User{"
|
||||
48:21 -> 167:21 | "{" => "{"
|
||||
48:22 -> 167:22 | "" => ""
|
||||
49:4 -> 168:4 | ".{ .name = "John", ." => ".{ .name = "John", ."
|
||||
49:5 -> 168:5 | "{ .name = "John", .a" => "{ .name = "John", .a"
|
||||
49:6 -> 168:6 | " .name = "John", .ag" => " .name = "John", .ag"
|
||||
49:7 -> 168:7 | ".name = "John", .age" => ".name = "John", .age"
|
||||
49:8 -> 168:8 | "name = "John", .age " => "name = "John", .age "
|
||||
49:12 -> 168:12 | " = "John", .age = 20" => " = "John", .age = 20"
|
||||
49:13 -> 168:13 | "= "John", .age = 20 " => "= "John", .age = 20 "
|
||||
49:14 -> 168:14 | " "John", .age = 20 }" => " "John", .age = 20 }"
|
||||
49:15 -> 168:15 | ""John", .age = 20 }," => ""John", .age = 20 },"
|
||||
49:16 -> 168:16 | "John", .age = 20 }," => "John", .age = 20 },"
|
||||
49:20 -> 168:20 | "", .age = 20 }," => "", .age = 20 },"
|
||||
49:21 -> 168:21 | ", .age = 20 }," => ", .age = 20 },"
|
||||
49:22 -> 168:22 | " .age = 20 }," => " .age = 20 },"
|
||||
49:23 -> 168:23 | ".age = 20 }," => ".age = 20 },"
|
||||
49:24 -> 168:24 | "age = 20 }," => "age = 20 },"
|
||||
49:27 -> 168:27 | " = 20 }," => " = 20 },"
|
||||
49:28 -> 168:28 | "= 20 }," => "= 20 },"
|
||||
49:29 -> 168:29 | " 20 }," => " 20 },"
|
||||
49:30 -> 168:30 | "20 }," => "20 },"
|
||||
49:32 -> 168:32 | " }," => " },"
|
||||
49:33 -> 168:33 | "}," => "},"
|
||||
49:34 -> 168:34 | "," => ","
|
||||
49:35 -> 168:35 | "" => ""
|
||||
50:4 -> 169:4 | ".{ .name = "Jane", ." => ".{ .name = "Jane", ."
|
||||
50:5 -> 169:5 | "{ .name = "Jane", .a" => "{ .name = "Jane", .a"
|
||||
50:6 -> 169:6 | " .name = "Jane", .ag" => " .name = "Jane", .ag"
|
||||
50:7 -> 169:7 | ".name = "Jane", .age" => ".name = "Jane", .age"
|
||||
50:8 -> 169:8 | "name = "Jane", .age " => "name = "Jane", .age "
|
||||
50:12 -> 169:12 | " = "Jane", .age = 21" => " = "Jane", .age = 21"
|
||||
50:13 -> 169:13 | "= "Jane", .age = 21 " => "= "Jane", .age = 21 "
|
||||
50:14 -> 169:14 | " "Jane", .age = 21 }" => " "Jane", .age = 21 }"
|
||||
50:15 -> 169:15 | ""Jane", .age = 21 }," => ""Jane", .age = 21 },"
|
||||
50:16 -> 169:16 | "Jane", .age = 21 }," => "Jane", .age = 21 },"
|
||||
50:20 -> 169:20 | "", .age = 21 }," => "", .age = 21 },"
|
||||
50:21 -> 169:21 | ", .age = 21 }," => ", .age = 21 },"
|
||||
50:22 -> 169:22 | " .age = 21 }," => " .age = 21 },"
|
||||
50:23 -> 169:23 | ".age = 21 }," => ".age = 21 },"
|
||||
50:24 -> 169:24 | "age = 21 }," => "age = 21 },"
|
||||
50:27 -> 169:27 | " = 21 }," => " = 21 },"
|
||||
50:28 -> 169:28 | "= 21 }," => "= 21 },"
|
||||
50:29 -> 169:29 | " 21 }," => " 21 },"
|
||||
50:30 -> 169:30 | "21 }," => "21 },"
|
||||
50:32 -> 169:32 | " }," => " },"
|
||||
50:33 -> 169:33 | "}," => "},"
|
||||
50:34 -> 169:34 | "," => ","
|
||||
50:35 -> 169:35 | "" => ""
|
||||
51:4 -> 170:4 | ".{ .name = "Jim", .a" => ".{ .name = "Jim", .a"
|
||||
51:5 -> 170:5 | "{ .name = "Jim", .ag" => "{ .name = "Jim", .ag"
|
||||
51:6 -> 170:6 | " .name = "Jim", .age" => " .name = "Jim", .age"
|
||||
51:7 -> 170:7 | ".name = "Jim", .age " => ".name = "Jim", .age "
|
||||
51:8 -> 170:8 | "name = "Jim", .age =" => "name = "Jim", .age ="
|
||||
51:12 -> 170:12 | " = "Jim", .age = 22 " => " = "Jim", .age = 22 "
|
||||
51:13 -> 170:13 | "= "Jim", .age = 22 }" => "= "Jim", .age = 22 }"
|
||||
51:14 -> 170:14 | " "Jim", .age = 22 }," => " "Jim", .age = 22 },"
|
||||
51:15 -> 170:15 | ""Jim", .age = 22 }," => ""Jim", .age = 22 },"
|
||||
51:16 -> 170:16 | "Jim", .age = 22 }," => "Jim", .age = 22 },"
|
||||
51:19 -> 170:19 | "", .age = 22 }," => "", .age = 22 },"
|
||||
51:20 -> 170:20 | ", .age = 22 }," => ", .age = 22 },"
|
||||
51:21 -> 170:21 | " .age = 22 }," => " .age = 22 },"
|
||||
51:22 -> 170:22 | ".age = 22 }," => ".age = 22 },"
|
||||
51:23 -> 170:23 | "age = 22 }," => "age = 22 },"
|
||||
51:26 -> 170:26 | " = 22 }," => " = 22 },"
|
||||
51:27 -> 170:27 | "= 22 }," => "= 22 },"
|
||||
51:28 -> 170:28 | " 22 }," => " 22 },"
|
||||
51:29 -> 170:29 | "22 }," => "22 },"
|
||||
51:31 -> 170:31 | " }," => " },"
|
||||
51:32 -> 170:32 | "}," => "},"
|
||||
51:33 -> 170:33 | "," => ","
|
||||
51:34 -> 170:34 | "" => ""
|
||||
52:4 -> 171:4 | ".{ .name = "Jill", ." => ".{ .name = "Jill", ."
|
||||
52:5 -> 171:5 | "{ .name = "Jill", .a" => "{ .name = "Jill", .a"
|
||||
52:6 -> 171:6 | " .name = "Jill", .ag" => " .name = "Jill", .ag"
|
||||
52:7 -> 171:7 | ".name = "Jill", .age" => ".name = "Jill", .age"
|
||||
52:8 -> 171:8 | "name = "Jill", .age " => "name = "Jill", .age "
|
||||
52:12 -> 171:12 | " = "Jill", .age = 23" => " = "Jill", .age = 23"
|
||||
52:13 -> 171:13 | "= "Jill", .age = 23 " => "= "Jill", .age = 23 "
|
||||
52:14 -> 171:14 | " "Jill", .age = 23 }" => " "Jill", .age = 23 }"
|
||||
52:15 -> 171:15 | ""Jill", .age = 23 }," => ""Jill", .age = 23 },"
|
||||
52:16 -> 171:16 | "Jill", .age = 23 }," => "Jill", .age = 23 },"
|
||||
52:20 -> 171:20 | "", .age = 23 }," => "", .age = 23 },"
|
||||
52:21 -> 171:21 | ", .age = 23 }," => ", .age = 23 },"
|
||||
52:22 -> 171:22 | " .age = 23 }," => " .age = 23 },"
|
||||
52:23 -> 171:23 | ".age = 23 }," => ".age = 23 },"
|
||||
52:24 -> 171:24 | "age = 23 }," => "age = 23 },"
|
||||
52:27 -> 171:27 | " = 23 }," => " = 23 },"
|
||||
52:28 -> 171:28 | "= 23 }," => "= 23 },"
|
||||
52:29 -> 171:29 | " 23 }," => " 23 },"
|
||||
52:30 -> 171:30 | "23 }," => "23 },"
|
||||
52:32 -> 171:32 | " }," => " },"
|
||||
52:33 -> 171:33 | "}," => "},"
|
||||
52:34 -> 171:34 | "," => ","
|
||||
52:35 -> 171:35 | "" => ""
|
||||
53:0 -> 172:0 | "};" => "};"
|
||||
53:1 -> 172:1 | ";" => ";"
|
||||
53:2 -> 172:2 | "" => ""
|
||||
55:0 -> 174:0 | "fn UserComponent(all" => "fn UserComponent(all"
|
||||
55:2 -> 174:2 | " UserComponent(alloc" => " UserComponent(alloc"
|
||||
55:3 -> 174:3 | "UserComponent(alloca" => "UserComponent(alloca"
|
||||
55:16 -> 174:16 | "(allocator: zx.Alloc" => "(allocator: zx.Alloc"
|
||||
55:17 -> 174:17 | "allocator: zx.Alloca" => "allocator: zx.Alloca"
|
||||
55:26 -> 174:26 | ": zx.Allocator, prop" => ": zx.Allocator, prop"
|
||||
55:27 -> 174:27 | " zx.Allocator, props" => " zx.Allocator, props"
|
||||
55:28 -> 174:28 | "zx.Allocator, props:" => "zx.Allocator, props:"
|
||||
55:30 -> 174:30 | ".Allocator, props: U" => ".Allocator, props: U"
|
||||
55:31 -> 174:31 | "Allocator, props: Us" => "Allocator, props: Us"
|
||||
55:40 -> 174:40 | ", props: User) zx.Co" => ", props: User) zx.Co"
|
||||
55:41 -> 174:41 | " props: User) zx.Com" => " props: User) zx.Com"
|
||||
55:42 -> 174:42 | "props: User) zx.Comp" => "props: User) zx.Comp"
|
||||
55:47 -> 174:47 | ": User) zx.Component" => ": User) zx.Component"
|
||||
55:48 -> 174:48 | " User) zx.Component " => " User) zx.Component "
|
||||
55:49 -> 174:49 | "User) zx.Component {" => "User) zx.Component {"
|
||||
55:53 -> 174:53 | ") zx.Component {" => ") zx.Component {"
|
||||
55:54 -> 174:54 | " zx.Component {" => " zx.Component {"
|
||||
55:55 -> 174:55 | "zx.Component {" => "zx.Component {"
|
||||
55:57 -> 174:57 | ".Component {" => ".Component {"
|
||||
55:58 -> 174:58 | "Component {" => "Component {"
|
||||
55:67 -> 174:67 | " {" => " {"
|
||||
55:68 -> 174:68 | "{" => "{"
|
||||
55:69 -> 174:69 | "" => ""
|
||||
56:4 -> 176:0 | "return (<p @allocato" => "return _zx.ele("
|
||||
56:64 -> 177:4 | "</p>);" => ".p,"
|
||||
56:12 -> 177:4 | "<p @allocator={alloc" => ".p,"
|
||||
56:64 -> 177:5 | "</p>);" => "p,"
|
||||
56:12 -> 177:5 | "<p @allocator={alloc" => "p,"
|
||||
56:64 -> 177:6 | "</p>);" => ","
|
||||
56:26 -> 179:21 | "{allocator}>{props.n" => "allocator,"
|
||||
56:39 -> 181:12 | "props.name} - {props" => "_zx.expr(props.name)"
|
||||
56:39 -> 181:21 | "props.name} - {props" => "props.name),"
|
||||
56:50 -> 182:12 | " - {props.age}</p>);" => "_zx.txt(" - "),"
|
||||
56:54 -> 183:12 | "props.age}</p>);" => "_zx.expr(props.age),"
|
||||
56:54 -> 183:21 | "props.age}</p>);" => "props.age),"
|
||||
56:68 -> 186:0 | ");" => ");"
|
||||
56:69 -> 186:1 | ";" => ";"
|
||||
56:70 -> 186:2 | "" => ""
|
||||
57:0 -> 187:0 | "}" => "}"
|
||||
57:1 -> 187:1 | "" => ""
|
||||
59:0 -> 189:0 | "const zx = @import("" => "const zx = @import(""
|
||||
59:5 -> 189:5 | " zx = @import("zx");" => " zx = @import("zx");"
|
||||
59:6 -> 189:6 | "zx = @import("zx");" => "zx = @import("zx");"
|
||||
59:8 -> 189:8 | " = @import("zx");" => " = @import("zx");"
|
||||
59:9 -> 189:9 | "= @import("zx");" => "= @import("zx");"
|
||||
59:10 -> 189:10 | " @import("zx");" => " @import("zx");"
|
||||
59:11 -> 189:11 | "@import("zx");" => "@import("zx");"
|
||||
59:18 -> 189:18 | "("zx");" => "("zx");"
|
||||
59:19 -> 189:19 | ""zx");" => ""zx");"
|
||||
59:20 -> 189:20 | "zx");" => "zx");"
|
||||
59:22 -> 189:22 | "");" => "");"
|
||||
59:23 -> 189:23 | ");" => ");"
|
||||
59:24 -> 189:24 | ";" => ";"
|
||||
59:25 -> 189:25 | "" => ""
|
||||
60:0 -> 190:0 | "const std = @import(" => "const std = @import("
|
||||
60:5 -> 190:5 | " std = @import("std"" => " std = @import("std""
|
||||
60:6 -> 190:6 | "std = @import("std")" => "std = @import("std")"
|
||||
60:9 -> 190:9 | " = @import("std");" => " = @import("std");"
|
||||
60:10 -> 190:10 | "= @import("std");" => "= @import("std");"
|
||||
60:11 -> 190:11 | " @import("std");" => " @import("std");"
|
||||
60:12 -> 190:12 | "@import("std");" => "@import("std");"
|
||||
60:19 -> 190:19 | "("std");" => "("std");"
|
||||
60:20 -> 190:20 | ""std");" => ""std");"
|
||||
60:21 -> 190:21 | "std");" => "std");"
|
||||
60:24 -> 190:24 | "");" => "");"
|
||||
60:25 -> 190:25 | ");" => ");"
|
||||
60:26 -> 190:26 | ";" => ";"
|
||||
60:27 -> 190:27 | "" => ""
|
||||
42:48 -> 155:29 | "name={user.name} age" => "name = user.name,"
|
||||
42:53 -> 155:36 | "{user.name} age={use" => "user.name,"
|
||||
42:65 -> 156:29 | "age={user.age} />)}" => "age = user.age"
|
||||
42:69 -> 156:35 | "{user.age} />)}" => "user.age"
|
||||
42:82 -> 158:20 | ")}" => ",);"
|
||||
43:15 -> 164:0 | "" => ");"
|
||||
44:5 -> 164:1 | ";" => ";"
|
||||
44:6 -> 164:2 | "" => ""
|
||||
45:0 -> 165:0 | "}" => "}"
|
||||
45:1 -> 165:1 | "" => ""
|
||||
47:0 -> 167:0 | "const User = struct " => "const User = struct "
|
||||
47:5 -> 167:5 | " User = struct { nam" => " User = struct { nam"
|
||||
47:6 -> 167:6 | "User = struct { name" => "User = struct { name"
|
||||
47:10 -> 167:10 | " = struct { name: []" => " = struct { name: []"
|
||||
47:11 -> 167:11 | "= struct { name: []c" => "= struct { name: []c"
|
||||
47:12 -> 167:12 | " struct { name: []co" => " struct { name: []co"
|
||||
47:13 -> 167:13 | "struct { name: []con" => "struct { name: []con"
|
||||
47:19 -> 167:19 | " { name: []const u8," => " { name: []const u8,"
|
||||
47:20 -> 167:20 | "{ name: []const u8, " => "{ name: []const u8, "
|
||||
47:21 -> 167:21 | " name: []const u8, a" => " name: []const u8, a"
|
||||
47:22 -> 167:22 | "name: []const u8, ag" => "name: []const u8, ag"
|
||||
47:26 -> 167:26 | ": []const u8, age: u" => ": []const u8, age: u"
|
||||
47:27 -> 167:27 | " []const u8, age: u3" => " []const u8, age: u3"
|
||||
47:28 -> 167:28 | "[]const u8, age: u32" => "[]const u8, age: u32"
|
||||
47:29 -> 167:29 | "]const u8, age: u32 " => "]const u8, age: u32 "
|
||||
47:30 -> 167:30 | "const u8, age: u32 }" => "const u8, age: u32 }"
|
||||
47:35 -> 167:35 | " u8, age: u32 };" => " u8, age: u32 };"
|
||||
47:36 -> 167:36 | "u8, age: u32 };" => "u8, age: u32 };"
|
||||
47:38 -> 167:38 | ", age: u32 };" => ", age: u32 };"
|
||||
47:39 -> 167:39 | " age: u32 };" => " age: u32 };"
|
||||
47:40 -> 167:40 | "age: u32 };" => "age: u32 };"
|
||||
47:43 -> 167:43 | ": u32 };" => ": u32 };"
|
||||
47:44 -> 167:44 | " u32 };" => " u32 };"
|
||||
47:45 -> 167:45 | "u32 };" => "u32 };"
|
||||
47:48 -> 167:48 | " };" => " };"
|
||||
47:49 -> 167:49 | "};" => "};"
|
||||
47:50 -> 167:50 | ";" => ";"
|
||||
47:51 -> 167:51 | "" => ""
|
||||
48:0 -> 168:0 | "const users = [_]Use" => "const users = [_]Use"
|
||||
48:5 -> 168:5 | " users = [_]User{" => " users = [_]User{"
|
||||
48:6 -> 168:6 | "users = [_]User{" => "users = [_]User{"
|
||||
48:11 -> 168:11 | " = [_]User{" => " = [_]User{"
|
||||
48:12 -> 168:12 | "= [_]User{" => "= [_]User{"
|
||||
48:13 -> 168:13 | " [_]User{" => " [_]User{"
|
||||
48:14 -> 168:14 | "[_]User{" => "[_]User{"
|
||||
48:15 -> 168:15 | "_]User{" => "_]User{"
|
||||
48:16 -> 168:16 | "]User{" => "]User{"
|
||||
48:17 -> 168:17 | "User{" => "User{"
|
||||
48:21 -> 168:21 | "{" => "{"
|
||||
48:22 -> 168:22 | "" => ""
|
||||
49:4 -> 169:4 | ".{ .name = "John", ." => ".{ .name = "John", ."
|
||||
49:5 -> 169:5 | "{ .name = "John", .a" => "{ .name = "John", .a"
|
||||
49:6 -> 169:6 | " .name = "John", .ag" => " .name = "John", .ag"
|
||||
49:7 -> 169:7 | ".name = "John", .age" => ".name = "John", .age"
|
||||
49:8 -> 169:8 | "name = "John", .age " => "name = "John", .age "
|
||||
49:12 -> 169:12 | " = "John", .age = 20" => " = "John", .age = 20"
|
||||
49:13 -> 169:13 | "= "John", .age = 20 " => "= "John", .age = 20 "
|
||||
49:14 -> 169:14 | " "John", .age = 20 }" => " "John", .age = 20 }"
|
||||
49:15 -> 169:15 | ""John", .age = 20 }," => ""John", .age = 20 },"
|
||||
49:16 -> 169:16 | "John", .age = 20 }," => "John", .age = 20 },"
|
||||
49:20 -> 169:20 | "", .age = 20 }," => "", .age = 20 },"
|
||||
49:21 -> 169:21 | ", .age = 20 }," => ", .age = 20 },"
|
||||
49:22 -> 169:22 | " .age = 20 }," => " .age = 20 },"
|
||||
49:23 -> 169:23 | ".age = 20 }," => ".age = 20 },"
|
||||
49:24 -> 169:24 | "age = 20 }," => "age = 20 },"
|
||||
49:27 -> 169:27 | " = 20 }," => " = 20 },"
|
||||
49:28 -> 169:28 | "= 20 }," => "= 20 },"
|
||||
49:29 -> 169:29 | " 20 }," => " 20 },"
|
||||
49:30 -> 169:30 | "20 }," => "20 },"
|
||||
49:32 -> 169:32 | " }," => " },"
|
||||
49:33 -> 169:33 | "}," => "},"
|
||||
49:34 -> 169:34 | "," => ","
|
||||
49:35 -> 169:35 | "" => ""
|
||||
50:4 -> 170:4 | ".{ .name = "Jane", ." => ".{ .name = "Jane", ."
|
||||
50:5 -> 170:5 | "{ .name = "Jane", .a" => "{ .name = "Jane", .a"
|
||||
50:6 -> 170:6 | " .name = "Jane", .ag" => " .name = "Jane", .ag"
|
||||
50:7 -> 170:7 | ".name = "Jane", .age" => ".name = "Jane", .age"
|
||||
50:8 -> 170:8 | "name = "Jane", .age " => "name = "Jane", .age "
|
||||
50:12 -> 170:12 | " = "Jane", .age = 21" => " = "Jane", .age = 21"
|
||||
50:13 -> 170:13 | "= "Jane", .age = 21 " => "= "Jane", .age = 21 "
|
||||
50:14 -> 170:14 | " "Jane", .age = 21 }" => " "Jane", .age = 21 }"
|
||||
50:15 -> 170:15 | ""Jane", .age = 21 }," => ""Jane", .age = 21 },"
|
||||
50:16 -> 170:16 | "Jane", .age = 21 }," => "Jane", .age = 21 },"
|
||||
50:20 -> 170:20 | "", .age = 21 }," => "", .age = 21 },"
|
||||
50:21 -> 170:21 | ", .age = 21 }," => ", .age = 21 },"
|
||||
50:22 -> 170:22 | " .age = 21 }," => " .age = 21 },"
|
||||
50:23 -> 170:23 | ".age = 21 }," => ".age = 21 },"
|
||||
50:24 -> 170:24 | "age = 21 }," => "age = 21 },"
|
||||
50:27 -> 170:27 | " = 21 }," => " = 21 },"
|
||||
50:28 -> 170:28 | "= 21 }," => "= 21 },"
|
||||
50:29 -> 170:29 | " 21 }," => " 21 },"
|
||||
50:30 -> 170:30 | "21 }," => "21 },"
|
||||
50:32 -> 170:32 | " }," => " },"
|
||||
50:33 -> 170:33 | "}," => "},"
|
||||
50:34 -> 170:34 | "," => ","
|
||||
50:35 -> 170:35 | "" => ""
|
||||
51:4 -> 171:4 | ".{ .name = "Jim", .a" => ".{ .name = "Jim", .a"
|
||||
51:5 -> 171:5 | "{ .name = "Jim", .ag" => "{ .name = "Jim", .ag"
|
||||
51:6 -> 171:6 | " .name = "Jim", .age" => " .name = "Jim", .age"
|
||||
51:7 -> 171:7 | ".name = "Jim", .age " => ".name = "Jim", .age "
|
||||
51:8 -> 171:8 | "name = "Jim", .age =" => "name = "Jim", .age ="
|
||||
51:12 -> 171:12 | " = "Jim", .age = 22 " => " = "Jim", .age = 22 "
|
||||
51:13 -> 171:13 | "= "Jim", .age = 22 }" => "= "Jim", .age = 22 }"
|
||||
51:14 -> 171:14 | " "Jim", .age = 22 }," => " "Jim", .age = 22 },"
|
||||
51:15 -> 171:15 | ""Jim", .age = 22 }," => ""Jim", .age = 22 },"
|
||||
51:16 -> 171:16 | "Jim", .age = 22 }," => "Jim", .age = 22 },"
|
||||
51:19 -> 171:19 | "", .age = 22 }," => "", .age = 22 },"
|
||||
51:20 -> 171:20 | ", .age = 22 }," => ", .age = 22 },"
|
||||
51:21 -> 171:21 | " .age = 22 }," => " .age = 22 },"
|
||||
51:22 -> 171:22 | ".age = 22 }," => ".age = 22 },"
|
||||
51:23 -> 171:23 | "age = 22 }," => "age = 22 },"
|
||||
51:26 -> 171:26 | " = 22 }," => " = 22 },"
|
||||
51:27 -> 171:27 | "= 22 }," => "= 22 },"
|
||||
51:28 -> 171:28 | " 22 }," => " 22 },"
|
||||
51:29 -> 171:29 | "22 }," => "22 },"
|
||||
51:31 -> 171:31 | " }," => " },"
|
||||
51:32 -> 171:32 | "}," => "},"
|
||||
51:33 -> 171:33 | "," => ","
|
||||
51:34 -> 171:34 | "" => ""
|
||||
52:4 -> 172:4 | ".{ .name = "Jill", ." => ".{ .name = "Jill", ."
|
||||
52:5 -> 172:5 | "{ .name = "Jill", .a" => "{ .name = "Jill", .a"
|
||||
52:6 -> 172:6 | " .name = "Jill", .ag" => " .name = "Jill", .ag"
|
||||
52:7 -> 172:7 | ".name = "Jill", .age" => ".name = "Jill", .age"
|
||||
52:8 -> 172:8 | "name = "Jill", .age " => "name = "Jill", .age "
|
||||
52:12 -> 172:12 | " = "Jill", .age = 23" => " = "Jill", .age = 23"
|
||||
52:13 -> 172:13 | "= "Jill", .age = 23 " => "= "Jill", .age = 23 "
|
||||
52:14 -> 172:14 | " "Jill", .age = 23 }" => " "Jill", .age = 23 }"
|
||||
52:15 -> 172:15 | ""Jill", .age = 23 }," => ""Jill", .age = 23 },"
|
||||
52:16 -> 172:16 | "Jill", .age = 23 }," => "Jill", .age = 23 },"
|
||||
52:20 -> 172:20 | "", .age = 23 }," => "", .age = 23 },"
|
||||
52:21 -> 172:21 | ", .age = 23 }," => ", .age = 23 },"
|
||||
52:22 -> 172:22 | " .age = 23 }," => " .age = 23 },"
|
||||
52:23 -> 172:23 | ".age = 23 }," => ".age = 23 },"
|
||||
52:24 -> 172:24 | "age = 23 }," => "age = 23 },"
|
||||
52:27 -> 172:27 | " = 23 }," => " = 23 },"
|
||||
52:28 -> 172:28 | "= 23 }," => "= 23 },"
|
||||
52:29 -> 172:29 | " 23 }," => " 23 },"
|
||||
52:30 -> 172:30 | "23 }," => "23 },"
|
||||
52:32 -> 172:32 | " }," => " },"
|
||||
52:33 -> 172:33 | "}," => "},"
|
||||
52:34 -> 172:34 | "," => ","
|
||||
52:35 -> 172:35 | "" => ""
|
||||
53:0 -> 173:0 | "};" => "};"
|
||||
53:1 -> 173:1 | ";" => ";"
|
||||
53:2 -> 173:2 | "" => ""
|
||||
55:0 -> 175:0 | "fn UserComponent(all" => "fn UserComponent(all"
|
||||
55:2 -> 175:2 | " UserComponent(alloc" => " UserComponent(alloc"
|
||||
55:3 -> 175:3 | "UserComponent(alloca" => "UserComponent(alloca"
|
||||
55:16 -> 175:16 | "(allocator: zx.Alloc" => "(allocator: zx.Alloc"
|
||||
55:17 -> 175:17 | "allocator: zx.Alloca" => "allocator: zx.Alloca"
|
||||
55:26 -> 175:26 | ": zx.Allocator, prop" => ": zx.Allocator, prop"
|
||||
55:27 -> 175:27 | " zx.Allocator, props" => " zx.Allocator, props"
|
||||
55:28 -> 175:28 | "zx.Allocator, props:" => "zx.Allocator, props:"
|
||||
55:30 -> 175:30 | ".Allocator, props: U" => ".Allocator, props: U"
|
||||
55:31 -> 175:31 | "Allocator, props: Us" => "Allocator, props: Us"
|
||||
55:40 -> 175:40 | ", props: User) zx.Co" => ", props: User) zx.Co"
|
||||
55:41 -> 175:41 | " props: User) zx.Com" => " props: User) zx.Com"
|
||||
55:42 -> 175:42 | "props: User) zx.Comp" => "props: User) zx.Comp"
|
||||
55:47 -> 175:47 | ": User) zx.Component" => ": User) zx.Component"
|
||||
55:48 -> 175:48 | " User) zx.Component " => " User) zx.Component "
|
||||
55:49 -> 175:49 | "User) zx.Component {" => "User) zx.Component {"
|
||||
55:53 -> 175:53 | ") zx.Component {" => ") zx.Component {"
|
||||
55:54 -> 175:54 | " zx.Component {" => " zx.Component {"
|
||||
55:55 -> 175:55 | "zx.Component {" => "zx.Component {"
|
||||
55:57 -> 175:57 | ".Component {" => ".Component {"
|
||||
55:58 -> 175:58 | "Component {" => "Component {"
|
||||
55:67 -> 175:67 | " {" => " {"
|
||||
55:68 -> 175:68 | "{" => "{"
|
||||
55:69 -> 175:69 | "" => ""
|
||||
56:4 -> 177:0 | "return (<p @allocato" => "return _zx.ele("
|
||||
56:64 -> 178:4 | "</p>);" => ".p,"
|
||||
56:12 -> 178:4 | "<p @allocator={alloc" => ".p,"
|
||||
56:64 -> 178:5 | "</p>);" => "p,"
|
||||
56:12 -> 178:5 | "<p @allocator={alloc" => "p,"
|
||||
56:64 -> 178:6 | "</p>);" => ","
|
||||
56:26 -> 180:21 | "{allocator}>{props.n" => "allocator,"
|
||||
56:39 -> 182:12 | "props.name} - {props" => "_zx.expr(props.name)"
|
||||
56:39 -> 182:21 | "props.name} - {props" => "props.name),"
|
||||
56:50 -> 183:12 | " - {props.age}</p>);" => "_zx.txt(" - "),"
|
||||
56:54 -> 184:12 | "props.age}</p>);" => "_zx.expr(props.age),"
|
||||
56:54 -> 184:21 | "props.age}</p>);" => "props.age),"
|
||||
56:68 -> 187:0 | ");" => ");"
|
||||
56:69 -> 187:1 | ";" => ";"
|
||||
56:70 -> 187:2 | "" => ""
|
||||
57:0 -> 188:0 | "}" => "}"
|
||||
57:1 -> 188:1 | "" => ""
|
||||
59:0 -> 190:0 | "const zx = @import("" => "const zx = @import(""
|
||||
59:5 -> 190:5 | " zx = @import("zx");" => " zx = @import("zx");"
|
||||
59:6 -> 190:6 | "zx = @import("zx");" => "zx = @import("zx");"
|
||||
59:8 -> 190:8 | " = @import("zx");" => " = @import("zx");"
|
||||
59:9 -> 190:9 | "= @import("zx");" => "= @import("zx");"
|
||||
59:10 -> 190:10 | " @import("zx");" => " @import("zx");"
|
||||
59:11 -> 190:11 | "@import("zx");" => "@import("zx");"
|
||||
59:18 -> 190:18 | "("zx");" => "("zx");"
|
||||
59:19 -> 190:19 | ""zx");" => ""zx");"
|
||||
59:20 -> 190:20 | "zx");" => "zx");"
|
||||
59:22 -> 190:22 | "");" => "");"
|
||||
59:23 -> 190:23 | ");" => ");"
|
||||
59:24 -> 190:24 | ";" => ";"
|
||||
59:25 -> 190:25 | "" => ""
|
||||
60:0 -> 191:0 | "const std = @import(" => "const std = @import("
|
||||
60:5 -> 191:5 | " std = @import("std"" => " std = @import("std""
|
||||
60:6 -> 191:6 | "std = @import("std")" => "std = @import("std")"
|
||||
60:9 -> 191:9 | " = @import("std");" => " = @import("std");"
|
||||
60:10 -> 191:10 | "= @import("std");" => "= @import("std");"
|
||||
60:11 -> 191:11 | " @import("std");" => " @import("std");"
|
||||
60:12 -> 191:12 | "@import("std");" => "@import("std");"
|
||||
60:19 -> 191:19 | "("std");" => "("std");"
|
||||
60:20 -> 191:20 | ""std");" => ""std");"
|
||||
60:21 -> 191:21 | "std");" => "std");"
|
||||
60:24 -> 191:24 | "");" => "");"
|
||||
60:25 -> 191:25 | ");" => ");"
|
||||
60:26 -> 191:26 | ";" => ";"
|
||||
60:27 -> 191:27 | "" => ""
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const user_names = [_][]const u8{ "John", "Jane", "Jim", "Jill" };
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -26,7 +26,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
}
|
||||
|
||||
pub fn StructCapture(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -54,7 +54,7 @@ pub fn StructCapture(allocator: zx.Allocator) zx.Component {
|
||||
}
|
||||
|
||||
pub fn StructExtraCapture(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -85,7 +85,7 @@ pub fn StructExtraCapture(allocator: zx.Allocator) zx.Component {
|
||||
|
||||
pub fn StructComplexParam(allocator: zx.Allocator) zx.Component {
|
||||
const data = .{ .users = users };
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -139,7 +139,7 @@ fn getUsers() [users.len]User {
|
||||
}
|
||||
|
||||
pub fn StructCaptureToComponent(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -150,6 +150,7 @@ pub fn StructCaptureToComponent(allocator: zx.Allocator) zx.Component {
|
||||
for (users, 0..) |user, _zx_i_5| {
|
||||
__zx_children_5[_zx_i_5] = _zx.cmp(
|
||||
UserComponent,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "UserComponent" },
|
||||
.{ .name = user.name, .age = user.age },
|
||||
);
|
||||
@ -170,7 +171,7 @@ const users = [_]User{
|
||||
};
|
||||
|
||||
fn UserComponent(allocator: zx.Allocator, props: User) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.p,
|
||||
.{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const chars = "ABC";
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -3,7 +3,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.{ .name = "Team A", .members = &[_][]const u8{ "John", "Jane" } },
|
||||
.{ .name = "Team B", .members = &[_][]const u8{ "Jim", "Jill" } },
|
||||
};
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -4,7 +4,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.{ .name = "Jane", .is_active = false },
|
||||
.{ .name = "Jim", .is_active = true },
|
||||
};
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -4,7 +4,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.{ .name = "Jane", .role = .member },
|
||||
.{ .name = "Jim", .role = .guest },
|
||||
};
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const groups = [_][]const u8{ "A", "B" };
|
||||
var j: usize = 0;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const is_logged_in = false;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const is_logged_in = false;
|
||||
const user_name = if (is_logged_in) "zx" else null;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -6,7 +6,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const is_trial = false;
|
||||
const is_guest = false;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const user = "John Doe";
|
||||
const user_empty = "";
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const show_users = true;
|
||||
const user_names = [_][]const u8{ "John", "Jane", "Jim", "Jill" };
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const show_list = true;
|
||||
const items = [_][]const u8{ "Apple", "Banana", "Cherry" };
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const is_logged_in = true;
|
||||
const is_premium = false;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const is_logged_in = true;
|
||||
const is_premium = true;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const is_logged_in = true;
|
||||
const is_premium = true;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const is_logged_in = false;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const is_logged_in = true;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const show_user_type = true;
|
||||
const user_type: UserType = .admin;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const show_list = true;
|
||||
var i: usize = 0;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -3,7 +3,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const items = [_][]const u8{ "Apple", "Banana", "Cherry" };
|
||||
var i: usize = 0;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const user_type: UserType = .admin;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const user_type: UserType = .admin;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const admin_user: User = .{ .admin = .{ .level = 5 } };
|
||||
const member_user: User = .{ .member = .{ .points = 150 } };
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const chars = "abcdefg";
|
||||
const char = chars[0];
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const user_type: UserType = .admin;
|
||||
const admin_users = [_][]const u8{ "John", "Jane" };
|
||||
const member_users = [_][]const u8{ "Jim", "Jill" };
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const user_type: UserType = .admin;
|
||||
const is_active = true;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const u: User = .{ .member = .{ .points = 150 } };
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const user_type: UserType = .admin;
|
||||
const status: Status = .inactive;
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const mode: Mode = .repeat;
|
||||
var i: usize = 0;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var i: usize = 0;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var i: usize = 0;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var iter = getIterator();
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var iter = getIterator();
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var iter = getIterator();
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var i: usize = 0;
|
||||
const items = [_][]const u8{ "a", "b" };
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var i: usize = 0;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var i: usize = 0;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var i: usize = 0;
|
||||
var j: usize = 0;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -13,7 +13,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.span,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "spacer"),
|
||||
_zx.attr(@src(), "class", "spacer"),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -21,7 +21,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.section,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("id", "empty-section"),
|
||||
_zx.attr(@src(), "id", "empty-section"),
|
||||
}),
|
||||
},
|
||||
),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.fragment,
|
||||
.{
|
||||
@ -7,6 +7,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.children = &.{
|
||||
_zx.cmp(
|
||||
FragmentComponent,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "FragmentComponent" },
|
||||
.{},
|
||||
),
|
||||
@ -16,7 +17,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
}
|
||||
|
||||
fn FragmentComponent(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.fragment,
|
||||
.{
|
||||
|
||||
@ -30,8 +30,8 @@
|
||||
17:12 -> 8:17 | "</div>" => "div,"
|
||||
3:12 -> 8:17 | "<div class="containe" => "div,"
|
||||
17:12 -> 8:20 | "</div>" => ","
|
||||
3:17 -> 11:34 | "class="container">" => "class", "container")"
|
||||
3:23 -> 11:42 | ""container">" => ""container"),"
|
||||
3:17 -> 11:42 | "class="container">" => "class", "container")"
|
||||
3:23 -> 11:50 | ""container">" => ""container"),"
|
||||
11:16 -> 15:28 | "</header>" => ".header,"
|
||||
4:16 -> 15:28 | "<header>" => ".header,"
|
||||
11:16 -> 15:29 | "</header>" => "header,"
|
||||
@ -57,8 +57,8 @@
|
||||
7:48 -> 31:77 | "</a></li>" => "a,"
|
||||
7:32 -> 31:77 | "<a href="/">Home</a>" => "a,"
|
||||
7:48 -> 31:78 | "</a></li>" => ","
|
||||
7:35 -> 34:94 | "href="/">Home</a></l" => "href", "/"),"
|
||||
7:40 -> 34:101 | ""/">Home</a></li>" => ""/"),"
|
||||
7:35 -> 34:102 | "href="/">Home</a></l" => "href", "/"),"
|
||||
7:40 -> 34:109 | ""/">Home</a></li>" => ""/"),"
|
||||
7:44 -> 37:84 | "Home</a></li>" => "_zx.txt("Home"),"
|
||||
7:52 -> 40:72 | "</li>" => "),"
|
||||
7:57 -> 43:60 | "" => "),"
|
||||
@ -72,8 +72,8 @@
|
||||
8:54 -> 49:77 | "</a></li>" => "a,"
|
||||
8:32 -> 49:77 | "<a href="/about">Abo" => "a,"
|
||||
8:54 -> 49:78 | "</a></li>" => ","
|
||||
8:35 -> 52:94 | "href="/about">About<" => "href", "/about"),"
|
||||
8:40 -> 52:101 | ""/about">About</a></" => ""/about"),"
|
||||
8:35 -> 52:102 | "href="/about">About<" => "href", "/about"),"
|
||||
8:40 -> 52:109 | ""/about">About</a></" => ""/about"),"
|
||||
8:49 -> 55:84 | "About</a></li>" => "_zx.txt("About"),"
|
||||
8:58 -> 58:72 | "</li>" => "),"
|
||||
8:63 -> 61:60 | "" => "),"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -9,7 +9,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.div,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "container"),
|
||||
_zx.attr(@src(), "class", "container"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.ele(
|
||||
@ -32,7 +32,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.a,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("href", "/"),
|
||||
_zx.attr(@src(), "href", "/"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.txt("Home"),
|
||||
@ -50,7 +50,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.a,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("href", "/about"),
|
||||
_zx.attr(@src(), "href", "/about"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.txt("About"),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -17,8 +17,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.input,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("type", "text"),
|
||||
_zx.attr("name", "username"),
|
||||
_zx.attr(@src(), "type", "text"),
|
||||
_zx.attr(@src(), "name", "username"),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -26,8 +26,8 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.img,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("src", "/logo.png"),
|
||||
_zx.attr("alt", "Logo"),
|
||||
_zx.attr(@src(), "src", "/logo.png"),
|
||||
_zx.attr(@src(), "alt", "Logo"),
|
||||
}),
|
||||
},
|
||||
),
|
||||
@ -35,7 +35,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.meta,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("charset", "utf-8"),
|
||||
_zx.attr(@src(), "charset", "utf-8"),
|
||||
}),
|
||||
},
|
||||
),
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
.allocator = allocator,
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("data-src", @src().file),
|
||||
_zx.attr(@src(), "data-src", @src().file),
|
||||
}),
|
||||
.children = &.{},
|
||||
},
|
||||
@ -13,7 +13,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
}
|
||||
|
||||
pub fn Comments(_: zx.ComponentContext) zx.Component {
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -30,7 +30,7 @@ pub fn Comments(_: zx.ComponentContext) zx.Component {
|
||||
}
|
||||
|
||||
pub fn EmptyComments(_: zx.ComponentContext) zx.Element {
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -49,7 +49,7 @@ pub fn EmptyComments(_: zx.ComponentContext) zx.Element {
|
||||
}
|
||||
|
||||
pub fn CommentsWithSpecialChars(_: zx.ComponentContext) zx.Element {
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -69,7 +69,7 @@ pub fn CommentsWithSpecialChars(_: zx.ComponentContext) zx.Element {
|
||||
|
||||
pub fn CommentsWithExpressions(_: zx.ComponentContext) zx.Element {
|
||||
const value = "test";
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -78,7 +78,7 @@ pub fn CommentsWithExpressions(_: zx.ComponentContext) zx.Element {
|
||||
.p,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("data-value", value),
|
||||
_zx.attr(@src(), "data-value", value),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.txt("Actual content"),
|
||||
@ -91,7 +91,7 @@ pub fn CommentsWithExpressions(_: zx.ComponentContext) zx.Element {
|
||||
}
|
||||
|
||||
pub fn NestedComments(_: zx.ComponentContext) zx.Element {
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -124,7 +124,7 @@ pub fn NestedComments(_: zx.ComponentContext) zx.Element {
|
||||
}
|
||||
|
||||
pub fn CommentsWithAttributes(_: zx.ComponentContext) zx.Element {
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -143,7 +143,7 @@ pub fn CommentsWithAttributes(_: zx.ComponentContext) zx.Element {
|
||||
}
|
||||
|
||||
pub fn MixedCommentsAndContent(_: zx.ComponentContext) zx.Element {
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.ul,
|
||||
.{
|
||||
@ -178,7 +178,7 @@ pub fn MixedCommentsAndContent(_: zx.ComponentContext) zx.Element {
|
||||
}
|
||||
|
||||
pub fn CommentsWithZigCode(_: zx.ComponentContext) zx.Element {
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -197,7 +197,7 @@ pub fn CommentsWithZigCode(_: zx.ComponentContext) zx.Element {
|
||||
}
|
||||
|
||||
pub fn CommentsOnlyComponent(_: zx.ComponentContext) zx.Element {
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
@ -207,7 +207,7 @@ pub fn CommentsOnlyComponent(_: zx.ComponentContext) zx.Element {
|
||||
}
|
||||
|
||||
pub fn CommentsBetweenSiblings(_: zx.ComponentContext) zx.Element {
|
||||
var _zx = @import("zx").x.init();
|
||||
var _zx = @import("zx").x.init(.{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const greeting = zx.Component{ .text = "Hello!" };
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
|
||||
@ -15,7 +15,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
// persons[0] = person;
|
||||
// persons[1] = person;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const items = [_][]const u8{ "apple", "banana", "cherry" };
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -3,7 +3,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const count = 5;
|
||||
const item = "apple";
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const maybe_name: ?[]const u8 = "Alice";
|
||||
const no_name: ?[]const u8 = null;
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const user = User{ .name = "Alice", .age = 25 };
|
||||
const product = Product{ .title = "Book", .price = 29.99 };
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.main,
|
||||
.{
|
||||
@ -30,7 +30,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
.div,
|
||||
.{
|
||||
.attributes = _zx.attrs(.{
|
||||
_zx.attr("class", "product"),
|
||||
_zx.attr(@src(), "class", "product"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.ele(
|
||||
|
||||
@ -2,7 +2,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
const count = 42;
|
||||
const name = "John";
|
||||
|
||||
var _zx = @import("zx").x.allocInit(allocator);
|
||||
var _zx = @import("zx").x.allocInit(allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.section,
|
||||
.{
|
||||
@ -16,9 +16,9 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
_zx.attrv(name),
|
||||
}),
|
||||
_zx.attrf("id", "test", .{}),
|
||||
_zx.attr("data-normal", name),
|
||||
_zx.attr("data-text", "{text}"),
|
||||
_zx.attr("data-t", "`{text}`"),
|
||||
_zx.attr(@src(), "data-normal", name),
|
||||
_zx.attr(@src(), "data-text", "{text}"),
|
||||
_zx.attr(@src(), "data-t", "`{text}`"),
|
||||
}),
|
||||
.children = &.{
|
||||
_zx.ele(
|
||||
@ -32,6 +32,7 @@ pub fn Page(allocator: zx.Allocator) zx.Component {
|
||||
),
|
||||
_zx.cmp(
|
||||
Component,
|
||||
.{ .src = @src() },
|
||||
.{ .name = "Component" },
|
||||
.{ .text = _zx.propf("hello {s}", .{_zx.propv(count)}), .name = _zx.propf("test {s} {s} more-text", .{ _zx.propv(name), _zx.propv(getThemeClass(.dark)) }) },
|
||||
),
|
||||
@ -44,7 +45,7 @@ fn Component(ctx: *zx.ComponentCtx(struct {
|
||||
text: []const u8,
|
||||
name: []const u8,
|
||||
})) zx.Component {
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator);
|
||||
var _zx = @import("zx").x.allocInit(ctx.allocator, .{ .src = @src() });
|
||||
return _zx.ele(
|
||||
.div,
|
||||
.{
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user