╭ main_wasm.zig ────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯
1 const std = @import("std"); 2 const ui = @import("./ui.zig"); 3 const web = @import("./web.zig"); 4 const xit = @import("xit"); 5 const xitui = xit.xitui; 6 const Key = xitui.input.Key; 7 const wgt = xitui.widget; 8 9 const allocator = std.heap.wasm_allocator; 10 11 var root: ?ui.Widget = null; 12 var page_arena = std.heap.ArenaAllocator.init(allocator); 13 var snapshot: ui.Snapshot = undefined; 14 var session: ui.Session = undefined; 15 var last_pushed_page_maybe: ?ui.RoutablePage = null; // last current_page we told JS about 16 var last_scrolled_focus_id: ?usize = null; // last focused widget we asked JS to scroll into view 17 18 fn init(json: []const u8, min_height: u32, max_width: u32) !void { 19 _ = page_arena.reset(.free_all); 20 // drop the last-pushed page so the next tick pushes the freshly-loaded 21 // page's url. 22 last_pushed_page_maybe = null; 23 24 // alloc_always so the parsed strings live entirely inside the arena 25 // and don't borrow from the caller's json buffer. 26 snapshot = try std.json.parseFromSliceLeaky(ui.Snapshot, page_arena.allocator(), json, .{ 27 .allocate = .alloc_always, 28 }); 29 30 // adopt the server's session view wholesale — one assignment instead of 31 // hand-restoring each field by reaching into the page's data tree. 32 session = .{ 33 .data = snapshot.session, 34 .arena = &page_arena, 35 // one render per page load (init resets the arena), so page-scoped and 36 // session-scoped allocations share the same arena here. 37 .page_arena = &page_arena, 38 }; 39 40 var next_root = try ui.initRoot(allocator, &snapshot.page, &session); 41 errdefer next_root.deinit(allocator); 42 43 if (root) |*old_root| old_root.deinit(allocator); 44 root = next_root; 45 46 try tick(min_height, max_width); 47 } 48 49 fn tick(min_height: u32, max_width: u32) !void { 50 const root_ptr = if (root) |*root_value| root_value else return error.NotStarted; 51 52 // apply actions queued during input. the wasm path has no repo, so this is 53 // in-memory only; logged-in web persistence goes through the /ansi POST. 54 session.applyPending(); 55 56 // bind the UI to the browser viewport (cols x rows) like the terminal: 57 // min == max height fills it exactly, and each Scroll clips to its 58 // viewport while handing its full content to a native-scrollable element. 59 // a full-height page instead grows to its content and the browser scrolls 60 // the whole page, which the overlay's absolute positions track. 61 const max_height: ?u32 = if (session.data.current_page.fullHeight()) null else min_height; 62 try root_ptr.build(allocator, .{ 63 .min_size = .{ .width = null, .height = min_height }, 64 .max_size = .{ .width = max_width, .height = max_height }, 65 }, root_ptr.getFocus()); 66 67 // mirror the page Header settled on into the browser URL. these are 68 // passive same-page changes, like moving down the commits list, so we 69 // replace the URL in place rather than pushing a history entry. real 70 // cross-page navigations go through _navigate. 71 const current_page = session.data.current_page; 72 const should_push = if (last_pushed_page_maybe) |lp| !lp.eql(current_page) else true; 73 if (should_push) { 74 last_pushed_page_maybe = current_page; 75 const url = try current_page.toUrl(&page_arena); 76 _replaceState(url.ptr, @intCast(url.len)); 77 } 78 79 const html = try web.generateHtml(allocator, root_ptr); 80 defer allocator.free(html); 81 _setHtml(html.ptr, @intCast(html.len)); 82 83 // emit the overlay (form + inputs + button) on every tick so the wasm 84 // layout drives positions, not just the server's initial render. JS 85 // diffs the result against the previous overlay; an unchanged overlay 86 // leaves the live <form> alone — crucial since wiping it mid-click 87 // would detach the submit button before the browser can dispatch the 88 // form submission. 89 const overlay = try web.generateOverlay(allocator, root_ptr, &session); 90 defer allocator.free(overlay); 91 _setOverlay(overlay.ptr, @intCast(overlay.len)); 92 93 const root_focus = root_ptr.getFocus(); 94 if (root_focus.grandchild_id) |gid| { 95 if (root_focus.children.get(gid)) |child| { 96 // browser-focus the focused overlay control (text input or submit button) 97 // so the browser handles typing and Enter-to-submit natively. without this 98 // the submit button never gets focus and Enter falls through to the wasm. 99 switch (child.focus.kind) { 100 .text_input, .text_input_password, .text_area => _focusInput(@intCast(gid)), 101 .custom => |custom| if (std.mem.eql(u8, custom, "submit")) _focusInput(@intCast(gid)), 102 else => {}, 103 } 104 105 // keep the focused widget visible within its own scrollable element. 106 // only fire on an actual focus change so we don't fight the user's 107 // manual scrolling on unrelated ticks. 108 if (gid != last_scrolled_focus_id) { 109 last_scrolled_focus_id = gid; 110 _scrollToFocus(@intCast(gid)); 111 } 112 } 113 } 114 } 115 116 fn onKeyDown(key_code: u32) !void { 117 const root_ptr = if (root) |*root_value| root_value else return error.NotStarted; 118 const key: Key = switch (key_code) { 119 13 => .enter, 120 33 => .page_up, 121 34 => .page_down, 122 35 => .end, 123 36 => .home, 124 37 => .arrow_left, 125 38 => .arrow_up, 126 39 => .arrow_right, 127 40 => .arrow_down, 128 else => return, 129 }; 130 131 if (key == .enter) { 132 if (root_ptr.getFocus().grandchild_id) |gid| { 133 // follow a cross-page link 134 if (ui.crossPageLink(root_ptr.getFocus(), gid, session.data)) |route| { 135 const url = try route.toUrl(&page_arena); 136 _navigate(url.ptr, @intCast(url.len)); 137 return; 138 } 139 } 140 } 141 142 try root_ptr.input(allocator, key, root_ptr.getFocus()); 143 } 144 145 fn onMouseClick(focus_id: usize) !void { 146 const root_ptr = if (root) |*root_value| root_value else return error.NotStarted; 147 // follow a cross-page link 148 if (ui.crossPageLink(root_ptr.getFocus(), focus_id, session.data)) |route| { 149 const url = try route.toUrl(&page_arena); 150 _navigate(url.ptr, @intCast(url.len)); 151 return; 152 } 153 root_ptr.getFocus().setFocus(focus_id); 154 } 155 156 fn setFocus(focus_id: usize) !void { 157 const root_ptr = if (root) |*root_value| root_value else return error.NotStarted; 158 root_ptr.getFocus().setFocus(focus_id); 159 } 160 161 fn consoleLog(arg: []const u8) void { 162 _consoleLog(arg.ptr, @intCast(arg.len)); 163 } 164 165 extern fn _consoleLog(arg: [*]const u8, len: u32) void; 166 extern fn _setHtml(arg: [*]const u8, len: u32) void; 167 extern fn _setOverlay(arg: [*]const u8, len: u32) void; 168 extern fn _replaceState(arg: [*]const u8, len: u32) void; 169 extern fn _focusInput(focus_id: u32) void; 170 extern fn _navigate(arg: [*]const u8, len: u32) void; 171 extern fn _scrollToFocus(focus_id: u32) void; 172 173 /// js calls this first to get a wasm pointer it can write the page json into. 174 export fn _alloc(len: u32) ?[*]u8 { 175 const slice = allocator.alloc(u8, len) catch return null; 176 return slice.ptr; 177 } 178 179 export fn _init(json_ptr: [*]u8, json_len: u32, min_height: u32, max_width: u32) void { 180 const json = json_ptr[0..json_len]; 181 defer allocator.free(json); 182 init(json, min_height, max_width) catch |err| { 183 var buf: [256]u8 = undefined; 184 const str = std.fmt.bufPrint(&buf, "init: {}", .{err}) catch unreachable; 185 consoleLog(str); 186 }; 187 } 188 189 export fn _tick(min_height: u32, max_width: u32) bool { 190 tick(min_height, max_width) catch |err| { 191 var buf: [256]u8 = undefined; 192 const str = std.fmt.bufPrint(&buf, "tick: {}", .{err}) catch unreachable; 193 consoleLog(str); 194 return false; 195 }; 196 return true; 197 } 198 199 export fn _onKeyDown(key_code: u32) void { 200 onKeyDown(key_code) catch |err| { 201 var buf: [256]u8 = undefined; 202 const str = std.fmt.bufPrint(&buf, "onKeyDown: {}", .{err}) catch unreachable; 203 consoleLog(str); 204 }; 205 } 206 207 export fn _onMouseClick(focus_id: u32) void { 208 onMouseClick(focus_id) catch |err| { 209 var buf: [256]u8 = undefined; 210 const str = std.fmt.bufPrint(&buf, "onMouseClick: {}", .{err}) catch unreachable; 211 consoleLog(str); 212 }; 213 } 214 215 export fn _setFocus(focus_id: u32) void { 216 setFocus(focus_id) catch |err| { 217 var buf: [256]u8 = undefined; 218 const str = std.fmt.bufPrint(&buf, "setFocus: {}", .{err}) catch unreachable; 219 consoleLog(str); 220 }; 221 } 222 223 // js calls this when the value of an overlay <input> changes; we replace 224 // the matching TextInput's content with the supplied utf-8 bytes. 225 export fn _setTextInputValue(focus_id: u32, value_ptr: [*]const u8, value_len: u32) void { 226 setTextInputValue(focus_id, value_ptr[0..value_len]) catch |err| { 227 var buf: [256]u8 = undefined; 228 const str = std.fmt.bufPrint(&buf, "setTextInputValue: {}", .{err}) catch unreachable; 229 consoleLog(str); 230 }; 231 } 232 233 fn setTextInputValue(focus_id: u32, bytes: []const u8) !void { 234 const root_ptr = if (root) |*r| r else return error.NotStarted; 235 const root_focus = root_ptr.getFocus(); 236 const child = root_focus.children.get(focus_id) orelse return error.UnknownFocusId; 237 switch (child.focus.kind) { 238 .text_input, .text_input_password, .text_area => {}, 239 else => return error.NotATextInput, 240 } 241 const ti = session.text_inputs.get(focus_id) orelse return error.UnknownFocusId; 242 try ti.setContent(allocator, bytes); 243 // mirror the TTY behavior in Login.View.input: editing an input clears 244 // the stale failure flag so the "(invalid)" label doesn't linger after 245 // the user has typed a correction 246 session.data.login_failure = null; 247 } 248