WIP

demo/src/app/views/websockets/index.zmpl

@@ -1,4 +1,5 @@
 <link rel="stylesheet" href="/party.css" />
+<script src="/party.js"></script>
 
 <div id="party-container"></div>
 
@@ -7,11 +8,11 @@
         <span class="trophy">&#127942;</span>
         <div id="results">
             <div>Player</div>
-            <div id="player-wins" jetzig-scope="game" jetzig-connect="$.results.player"></div>
+            <div id="player-wins" jetzig-connect="$.results.player"></div>
             <div>CPU</div>
-            <div id="cpu-wins" jetzig-scope="game" jetzig-connect="$.results.cpu"></div>
+            <div id="cpu-wins" jetzig-connect="$.results.cpu"></div>
             <div>Tie</div>
-            <div id="ties" jetzig-scope="game" jetzig-connect="$.results.tie"></div>
+            <div id="ties" jetzig-connect="$.results.tie"></div>
         </div>
         <span class="trophy">&#127942;</span>
     </div>
@@ -22,7 +23,6 @@
                 class="cell"
                 jetzig-connect="$.cells.{{index}}"
                 jetzig-transform="{ player: '&#9992;&#65039;', cpu: '&#129422;', tie: '&#129309;' }[value] || ''"
-                jetzig-scope="game"
                 jetzig-click="move"
                 id="tic-tac-toe-cell-{{index}}"
                 data-cell="{{index}}"
@@ -30,33 +30,31 @@
             </div>
         }
     </div>
+
+    <div id="reset-wrapper">
+        <button jetzig-click="reset" id="reset-button">Reset Game</button>
+    </div>
+
+    <div jetzig-style="{ visibility: $.victor === null ? 'hidden' : 'visible' }" id="victor">
+        <span>&#127942;</span>
+        <span
+            jetzig-connect="$.victor"
+            jetzig-transform="{ player: '&#9992;&#65039;', cpu: '&#129422;', tie: '&#129309;' }[value] || ''"
+        ></span>
+        <span>&#127942;</span>
+    </div>
 </jetzig-scope>
 
-
-<div id="reset-wrapper">
-    <button jetzig-click="reset" id="reset-button">Reset Game</button>
-</div>
-
-<div jetzig-style="{ visibility: $.victor === null ? 'hidden' : 'visible' }" id="victor">
-    <span>&#127942;</span>
-    <span
-        jetzig-connect="$.victor"
-        jetzig-scope="game"
-        jetzig-transform="{ player: '&#9992;&#65039;', cpu: '&#129422;', tie: '&#129309;' }[value] || ''"
-    ></span>
-    <span>&#127942;</span>
-</div>
-
 <script>
+    Jetzig.channel.receive("victor", data => {
+        triggerPartyAnimation();
+    });
     @// Jetzig.channel.onStateChanged((scope, state) => {
     @// });
     @//
     @// Jetzig.channel.onMessage(data => {
     @// });
     @//
-    @// Jetzig.channel.receive("victor", data => {
-    @//     triggerPartyAnimation();
-    @// });
     @//
     @// Jetzig.channel.receive("game_over", data => {
     @//     const element = document.querySelector("#board");

src/jetzig/middleware/channels/channels.js

@@ -101,29 +101,40 @@ const Jetzig = window.Jetzig;
       const ref = element.getAttribute('jetzig-click');
       const action = channel.action_specs[ref];
       if (action) {
-      element.addEventListener('click', () => {
+        element.addEventListener('click', () => {
-        const args = [];
+          const args = [];
-        action.spec.params.forEach(param => {
+          action.spec.params.forEach(param => {
-        const arg = element.dataset[param.name];
+            const arg = element.dataset[param.name];
-        if (arg === undefined) {
+            if (arg === undefined) {
-          throw new Error(`Expected 'data-${param.name}' attribute for '${action.name}' click handler.`);
+              throw new Error(`Expected 'data-${param.name}' attribute for '${action.name}' click handler.`);
-        } else {
+            } else {
-          args.push(element.dataset[param.name]);
+              args.push(element.dataset[param.name]);
-        }
+            }
+          });
+          action.callback(...args);
         });
-        action.callback(...args);
-      });
       } else {
-      throw new Error(`Unknown click handler: '${ref}'`);
+        throw new Error(`Unknown click handler: '${ref}'`);
       }
     });
   };
 
+  const initScopes = (channel) => {
+    document.querySelectorAll('jetzig-scope').forEach(element => {
+      channel.scopeWrappers.push(element);
+    });
+  };
+
   const initElementConnections = (channel) => {
     document.querySelectorAll('[jetzig-connect]').forEach(element => {
       const ref = element.getAttribute('jetzig-connect');
       const id = `jetzig-${crypto.randomUUID()}`;
       element.setAttribute('jetzig-id', id);
+      channel.scopeWrappers.forEach(wrapper => {
+        if (wrapper.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+          if (!element.getAttribute('jetzig-scope')) element.setAttribute('jetzig-scope', wrapper.getAttribute('name'));
+        }
+      });
       const scope = element.getAttribute('jetzig-scope') || '__root__';
       if (!channel.elementMap[scope]) channel.elementMap[scope] = {};
       if (!channel.elementMap[scope][ref]) channel.elementMap[scope][ref] = [];
@@ -182,7 +193,9 @@ const Jetzig = window.Jetzig;
     onStateChanged: function(callback) { this.stateChangedCallbacks.push(callback); },
     onMessage: function(callback) { this.messageCallbacks.push(callback); },
     scopedElements: function(scope) { return this.elementMap[scope] || {}; },
+    scopeWrappers: [],
     init: function(host, path) {
+      initScopes(this);
       initWebsocket(this, host, path);
       initElementConnections(this);
       initStyledElements(this);