refactor a couple of examples to use createLiveView factory function

packages/examples/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

packages/examples/package.json

@@ -35,7 +35,7 @@
   "author": "Donnie Flood <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "liveviewjs": "^0.3.0",
+    "liveviewjs": "file:../../liveviewjs-0.4.0-rc.1.tgz",
     "nanoid": "^3.2.0",
     "node-fetch": "^2.6.7",
     "zod": "^3.14.3"
@@ -60,5 +60,9 @@
     "rollup-plugin-dts": "^4.2.0",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.4"
+  },
+  "engines": {
+    "npm": ">=8.5.0",
+    "node": ">=17.8.0"
   }
 }

packages/examples/src/liveviews/counter/liveView.ts

@@ -1,17 +1,12 @@
-import { BaseLiveView, html, LiveViewMeta, LiveViewMountParams, LiveViewSocket, SessionData } from "liveviewjs";
+import { createLiveView, html } from "liveviewjs";
 
-interface Context {
-  count: number;
-}
-
-type Events = { type: "increment" } | { type: "decrement" };
-
-export class CounterLiveView extends BaseLiveView<Context, Events> {
-  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<Context>): void {
+const counterLiveView = createLiveView({
+  mount: (socket) => {
+    // init state, set count to 0
     socket.assign({ count: 0 });
-  }
-
-  handleEvent(event: Events, socket: LiveViewSocket<Context>) {
+  },
+  handleEvent: (event: { type: "increment" } | { type: "decrement" }, socket) => {
+    // handle increment and decrement events
     const { count } = socket.context;
     switch (event.type) {
       case "increment":
@@ -21,9 +16,9 @@ export class CounterLiveView extends BaseLiveView<Context, Events> {
         socket.assign({ count: count - 1 });
         break;
     }
-  }
-
-  render(context: Context, meta: LiveViewMeta) {
+  },
+  render: async (context: { count: number }) => {
+    // render the view based on the state
     const { count } = context;
     return html`
       <div>
@@ -32,5 +27,5 @@ export class CounterLiveView extends BaseLiveView<Context, Events> {
         <button phx-click="increment">+</button>
       </div>
     `;
-  }
-}
+  },
+});

packages/examples/src/liveviews/dashboard/liveView.ts

@@ -1,28 +1,29 @@
-import { BaseLiveView, html, LiveViewMountParams, LiveViewSocket, SessionData } from "liveviewjs";
+import { BaseLiveView, createLiveView, html, LiveViewMountParams, LiveViewSocket, SessionData } from "liveviewjs";
 import { numberToCurrency } from "../utils";
 
-interface Context {
-  newOrders: number;
-  salesAmount: number;
-  rating: number;
-}
-
-type Events = { type: "refresh" };
-
-type Info = { type: "tick" };
+export const dashboardLiveView = createLiveView({
+  handleInfo: (info: { type: "tick" }, socket) => {
+    // on tick, update random data
+    socket.assign(nextRandomData());
+  },
 
-export class DashboardLiveView extends BaseLiveView<Context, Events, Info> {
-  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<Context>) {
+  mount: (socket) => {
     if (socket.connected) {
-      // socket will be connected after websocket connetion established
+      // only start repeating if the socket is connected (i.e. websocket is connected)
       socket.repeat(() => {
+        // send the tick event internally
         socket.sendInfo({ type: "tick" });
       }, 1000);
     }
     socket.assign(nextRandomData());
-  }
+  },
 
-  render(context: Context) {
+  handleEvent: (events: { type: "refresh" }, socket) => {
+    // on refresh, update random data
+    socket.assign(nextRandomData());
+  },
+
+  render: (context: { newOrders: number; salesAmount: number; rating: number }) => {
     const { newOrders, salesAmount, rating } = context;
     return html`
       <h1>Sales Dashboard</h1>
@@ -40,30 +41,10 @@ export class DashboardLiveView extends BaseLiveView<Context, Events, Info> {
       <br />
       <button phx-click="refresh">↻ Refresh</button>
     `;
-  }
-
-  handleEvent(event: Events, socket: LiveViewSocket<Context>) {
-    socket.assign(nextRandomData());
-  }
-
-  handleInfo(info: Info, socket: LiveViewSocket<Context>) {
-    socket.assign(nextRandomData());
-  }
-}
+  },
+});
 
-function ratingToStars(rating: number): string {
-  const stars = [];
-  let i = 0;
-  for (; i < rating; i++) {
-    stars.push("⭐");
-  }
-  for (; i < 5; i++) {
-    stars.push("✩");
-  }
-  return stars.join("");
-}
-
-function nextRandomData(): Context {
+function nextRandomData() {
   return {
     newOrders: randomNewOrders(),
     salesAmount: randomSalesAmount(),
@@ -79,3 +60,15 @@ const random = (min: number, max: number): (() => number) => {
 const randomSalesAmount = random(100, 1000);
 const randomNewOrders = random(5, 20);
 const randomRating = random(1, 5);
+
+function ratingToStars(rating: number): string {
+  const stars = [];
+  let i = 0;
+  for (; i < rating; i++) {
+    stars.push("⭐");
+  }
+  for (; i < 5; i++) {
+    stars.push("✩");
+  }
+  return stars.join("");
+}