Use BroadcastChannelPubSub in deno example

packages/deno/src/example/autorun.ts

@@ -30,7 +30,7 @@ esbuild
 
 // Spawn the server
 Deno.run({
-  cmd: "deno run --allow-net --allow-read --allow-write --allow-env --import-map=import_map.json --watch src/example/index.ts".split(
+  cmd: "deno run --unstable --allow-net --allow-read --allow-write --allow-env --import-map=import_map.json --watch src/example/index.ts".split(
     " "
   ),
 });

packages/deno/src/example/index.ts

@@ -1,3 +1,4 @@
+import { BroadcastChannelPubSub } from "../deno/broadcastChannelPubSub.ts";
 import { DenoOakLiveViewServer } from "../deno/server.ts";
 import {
   Application,
@@ -14,7 +15,6 @@ import {
   photosLiveView,
   printLiveView,
   Router,
-  rtCounterLiveView,
   searchLiveView,
   send,
   serversLiveView,
@@ -25,6 +25,7 @@ import {
 } from "../deps.ts";
 import { indexHandler } from "./indexHandler.ts";
 import { liveHtmlTemplate, wrapperTemplate } from "./liveTemplates.ts";
+import { rtCounterLiveView } from "./liveview/rtcounter.ts";
 
 // map request paths to LiveViews
 const lvRouter: LiveViewRouter = {
@@ -63,7 +64,10 @@ const liveView = new DenoOakLiveViewServer(
   lvRouter,
   liveHtmlTemplate,
   { title: "Deno Demo", suffix: " · LiveViewJS" },
-  { wrapperTemplate: wrapperTemplate }
+  {
+    wrapperTemplate: wrapperTemplate,
+    pubSub: new BroadcastChannelPubSub(),
+  }
 );
 
 // setup the LiveViewJS HTTP middleware

packages/deno/src/example/liveview/rtcounter.ts

@@ -0,0 +1,53 @@
+import { createLiveView, html } from "liveviewjs";
+import { BroadcastChannelPubSub } from "../../deno/broadcastChannelPubSub.ts";
+
+// An in-memory count simulating state outside of the LiveView
+let count = 0;
+// Use a deno's BroadcastChannel pub/sub implementation
+const pubSub = new BroadcastChannelPubSub();
+
+/**
+ * A basic counter that increments and decrements a number.
+ */
+export const rtCounterLiveView = createLiveView<
+  { count: number }, // Define LiveView Context / State
+  { type: "increment" } | { type: "decrement" }, // Define LiveView Events
+  { type: "counter"; count: number } // Define LiveView Info messages
+>({
+  mount: (socket) => {
+    // init state, set count to current count
+    socket.assign({ count });
+    // subscribe to counter events
+    socket.subscribe("counter");
+  },
+  handleEvent: (event, socket) => {
+    // handle increment and decrement events
+    const { count } = socket.context;
+    switch (event.type) {
+      case "increment":
+        // broadcast the new count
+        pubSub.broadcast("counter", { count: count + 1 });
+        break;
+      case "decrement":
+        // broadcast the new count
+        pubSub.broadcast("counter", { count: count - 1 });
+        break;
+    }
+  },
+  handleInfo: (info, socket) => {
+    // receive updates from pubsub and update the context
+    count = info.count;
+    socket.assign({ count });
+  },
+  render: (context) => {
+    // render the view based on the state
+    const { count } = context;
+    return html`
+      <div>
+        <h1>Count is: ${count}</h1>
+        <button phx-click="decrement">-</button>
+        <button phx-click="increment">+</button>
+      </div>
+    `;
+  },
+});