From ae3ed05a7de7b9dcdd6cfd8925ee4c743dff975c Mon Sep 17 00:00:00 2001
From: Bob Farrell <git@bob.frl>
Date: Tue, 6 May 2025 19:41:33 +0100
Subject: [PATCH] WIP

---
 demo/src/app/views/websockets.zig            | 10 ++++++++--
 demo/src/app/views/websockets/index.zmpl     |  7 ++++++-
 src/jetzig/channels/Channel.zig              |  3 ++-
 src/jetzig/http/Server.zig                   |  2 +-
 src/jetzig/middleware/ChannelsMiddleware.zig |  5 +++--
 src/jetzig/middleware/channels/channels.js   |  8 ++++++--
 6 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/demo/src/app/views/websockets.zig b/demo/src/app/views/websockets.zig
index a823d4f..097d427 100644
--- a/demo/src/app/views/websockets.zig
+++ b/demo/src/app/views/websockets.zig
@@ -9,6 +9,12 @@ pub fn index(request: *jetzig.Request) !jetzig.View {
     return request.render(.ok);
 }
 
+pub fn get(id: []const u8, request: *jetzig.Request) !jetzig.View {
+    var root = try request.data(.object);
+    try root.put("join_token", id);
+    return request.renderTemplate("websockets/index", .ok);
+}
+
 pub const Channel = struct {
     pub fn open(channel: jetzig.channels.Channel) !void {
         var state = try channel.state("game");
@@ -17,8 +23,8 @@ pub const Channel = struct {
     }
 
     pub const Actions = struct {
-        pub fn join(channel: jetzig.channels.Channel, token: []const u8) !void {
-            try channel.connect("game", token);
+        pub fn join(channel: jetzig.channels.Channel, join_token: []const u8) !void {
+            try channel.connect("game", join_token);
         }
 
         pub fn move(channel: jetzig.channels.Channel, cell: usize) !void {
diff --git a/demo/src/app/views/websockets/index.zmpl b/demo/src/app/views/websockets/index.zmpl
index 07b8b4f..3adee66 100644
--- a/demo/src/app/views/websockets/index.zmpl
+++ b/demo/src/app/views/websockets/index.zmpl
@@ -3,6 +3,10 @@
 
 <div id="party-container"></div>
 
+@if ($.join_token) |join_token|
+    <a href="#" jetzig-click="join" data-join-token="{{join_token}}">Join Game</a>
+@end
+
 <jetzig-scope name="game">
     <div id="results-wrapper">
         <span class="trophy">&#127942;</span>
@@ -45,9 +49,10 @@
     </div>
 
     <h4>Share this link to invite another player</h4>
-    <div jetzig-connect="$.__connect_url__"></div>
+    <div jetzig-connect="$.__connection_url__"></div>
 </jetzig-scope>
 
+
 <script>
     Jetzig.channel.receive("victor", data => {
         triggerPartyAnimation();
diff --git a/src/jetzig/channels/Channel.zig b/src/jetzig/channels/Channel.zig
index 3e3ca14..58ae978 100644
--- a/src/jetzig/channels/Channel.zig
+++ b/src/jetzig/channels/Channel.zig
@@ -116,7 +116,8 @@ pub fn RoutedChannel(Routes: type) type {
             const connection_key = try std.fmt.allocPrint(channel.allocator, "{s}:{s}", .{ channel.websocket.session_id, connection_id });
             const channel_state = try channel.websocket.channels.get(channel.data, connection_key) orelse blk: {
                 const channel_state = try channel.data.object();
-                try channel_state.put("__connection_key__", try std.fmt.allocPrint(channel.allocator, "http://{s}{s}?key={s}", .{ channel.host, channel.path, connection_key }));
+                // TODO - store this in a way that won't clobber the key with each new state.
+                try channel_state.put("__connection_url__", try std.fmt.allocPrint(channel.allocator, "http://{s}{s}?key={s}", .{ channel.host, channel.path, connection_key }));
                 try channel.websocket.channels.put(connection_key, channel_state);
                 break :blk channel_state;
             };
diff --git a/src/jetzig/http/Server.zig b/src/jetzig/http/Server.zig
index d098ba2..226e51c 100644
--- a/src/jetzig/http/Server.zig
+++ b/src/jetzig/http/Server.zig
@@ -481,7 +481,7 @@ pub fn RoutedServer(Routes: type) type {
         ) ![]const u8 {
             try addTemplateConstants(view, route);
 
-            var template_context = jetzig.TemplateContext{ .request = request };
+            var template_context = jetzig.TemplateContext{ .request = request, .route = route };
             template_context.middleware.context = &template_context;
 
             if (request.getLayout(route)) |layout_name| {
diff --git a/src/jetzig/middleware/ChannelsMiddleware.zig b/src/jetzig/middleware/ChannelsMiddleware.zig
index 142e68c..bef43e4 100644
--- a/src/jetzig/middleware/ChannelsMiddleware.zig
+++ b/src/jetzig/middleware/ChannelsMiddleware.zig
@@ -15,18 +15,19 @@ pub const Blocks = struct {
     }
 
     pub fn footer(context: jetzig.TemplateContext, writer: anytype) !void {
+        const route = context.route orelse return;
         const request = context.request orelse return;
         const host = request.headers.getLower("host") orelse return;
         try writer.print(
             \\<script>
             \\    (() => {{
             \\        window.addEventListener('DOMContentLoaded', () => {{
-            \\            Jetzig.channel.init("{s}", "{s}");
+            \\            Jetzig.channel.init("{s}", "/{s}");
             \\        }});
             \\    }})();
             \\</script>
             \\
-        , .{ host, request.path.base_path });
+        , .{ host, route.view_name });
     }
 };
 
diff --git a/src/jetzig/middleware/channels/channels.js b/src/jetzig/middleware/channels/channels.js
index ae6828f..7a16b2b 100644
--- a/src/jetzig/middleware/channels/channels.js
+++ b/src/jetzig/middleware/channels/channels.js
@@ -104,9 +104,9 @@ const Jetzig = window.Jetzig;
         element.addEventListener('click', () => {
           const args = [];
           action.spec.params.forEach(param => {
-            const arg = element.dataset[param.name];
+            const arg = element.dataset[transformParam(param.name)];
             if (arg === undefined) {
-              throw new Error(`Expected 'data-${param.name}' attribute for '${action.name}' click handler.`);
+              throw new Error(`Expected 'data-${param.name}' HTML attribute for '${action.spec.name}' click handler.`);
             } else {
               args.push(element.dataset[param.name]);
             }
@@ -119,6 +119,10 @@ const Jetzig = window.Jetzig;
     });
   };
 
+  const transformParam = (param) => param.toLowerCase()
+                                         .replace(/([-_][a-z])/g,
+                                                  group => group.toUpperCase().replace('-', '').replace('_', ''));
+
   const initScopes = (channel) => {
     document.querySelectorAll('jetzig-scope').forEach(element => {
       channel.scopeWrappers.push(element);