WIP

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 {

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();

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;
             };

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| {

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 });
     }
 };
 

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);