implement liveview native tutorial in express

Author: floodfx

packages/express/dist/liveviewjs-express.d.ts

@@ -43,6 +43,7 @@ interface NodeExpressLiveViewServerOptions {
     fileSystemAdaptor?: FileSystemAdaptor;
     wrapperTemplate?: LiveViewWrapperTemplate;
     onError?: (err: any) => void;
+    debug?: (msg: string) => void;
 }
 declare class NodeExpressLiveViewServer implements LiveViewServerAdaptor<RequestHandler, (wsServer: WebSocketServer) => Promise<void>> {
     #private;

packages/express/dist/liveviewjs-express.js

@@ -162,6 +162,7 @@ class NodeExpressLiveViewServer {
             flashAdaptor: this.flashAdapter,
             pubSub: this.pubSub,
             onError: options === null || options === void 0 ? void 0 : options.onError,
+            debug: options === null || options === void 0 ? void 0 : options.debug,
         }, "f");
     }
     wsMiddleware() {

packages/express/dist/liveviewjs-express.mjs

@@ -152,6 +152,7 @@ class NodeExpressLiveViewServer {
             flashAdaptor: this.flashAdapter,
             pubSub: this.pubSub,
             onError: options === null || options === void 0 ? void 0 : options.onError,
+            debug: options === null || options === void 0 ? void 0 : options.debug,
         }, "f");
     }
     wsMiddleware() {

packages/express/src/example/ios.ts

@@ -1,23 +1,21 @@
 import express, { NextFunction, Request, Response } from "express";
 import session, { MemoryStore } from "express-session";
 import { Server } from "http";
-import { LiveViewRouter, SessionFlashAdaptor, SingleProcessPubSub } from "liveviewjs";
-import { nanoid } from "nanoid";
-import { NodeFileSystemAdatptor } from "src/node/fsAdaptor";
+import { LiveViewRouter } from "liveviewjs";
 import { WebSocketServer } from "ws";
-import { NodeJwtSerDe } from "../node/jwtSerDe";
 import { NodeExpressLiveViewServer } from "../node/server";
-import { NodeWsAdaptor } from "../node/wsAdaptor";
 import { indexHandler } from "./indexHandler";
 import { iosPageRenderer, iosRootRenderer } from "./iosRenderers";
-import { iosLiveView } from "./liveview/ios";
+import { catLive } from "./liveview/ios/cat";
+import { catListLive } from "./liveview/ios/catList";
 
 // you'd want to set this to some secure, random string in production
 const signingSecret = "MY_VERY_SECRET_KEY";
 
 // map request paths to LiveViews
 const router: LiveViewRouter = {
-  "/ios": iosLiveView,
+  "/cats": catListLive,
+  "/cats/:cat": catLive,
 };
 
 // configure your express app
@@ -59,13 +57,14 @@ app.use((req: Request, res: Response, next: NextFunction) => {
 // initialize the LiveViewServer
 const liveView = new NodeExpressLiveViewServer(
   router,
-  new NodeJwtSerDe(signingSecret),
-  new SingleProcessPubSub(),
   iosPageRenderer,
-  { title: "Express Demo", suffix: " · LiveViewJS" },
-  new SessionFlashAdaptor(),
-  new NodeFileSystemAdatptor(),
-  iosRootRenderer
+  { title: "iOS Demo", suffix: " · LiveViewJS" },
+  {
+    serDeSigningSecret: signingSecret,
+    wrapperTemplate: iosRootRenderer,
+    onError: (err) => console.error(err),
+    debug: (msg) => console.log(msg),
+  }
 );
 
 // setup the LiveViewJS middleware
@@ -84,20 +83,8 @@ const wsServer = new WebSocketServer({
 httpServer.on("request", app);
 
 // initialize the LiveViewJS websocket message router
-const liveViewRouter = liveView.wsRouter();
-
-// send websocket requests to the LiveViewJS message router
-wsServer.on("connection", (ws) => {
-  const connectionId = nanoid();
-  ws.on("message", async (message, isBinary) => {
-    // pass websocket messages to LiveViewJS
-    await liveViewRouter.onMessage(connectionId, message, new NodeWsAdaptor(ws), isBinary);
-  });
-  ws.on("close", async () => {
-    // pass websocket close events to LiveViewJS
-    await liveViewRouter.onClose(connectionId);
-  });
-});
+const liveViewWsMiddleware = liveView.wsMiddleware();
+liveViewWsMiddleware(wsServer);
 
 // listen for requests
 const port = process.env.PORT || 4001;

packages/express/src/example/iosRenderers.ts

@@ -1,10 +1,10 @@
 import {
   html,
-  LiveViewPageRenderer,
-  LiveViewRootRenderer,
+  LiveTitleOptions,
+  LiveViewHtmlPageTemplate,
   LiveViewTemplate,
+  LiveViewWrapperTemplate,
   live_title_tag,
-  PageTitleDefaults,
   safe,
   SessionData,
   SessionFlashAdaptor,
@@ -14,19 +14,19 @@ import {
  * Render function for the "root" of the LiveView.  Expected that this function will
  * embed the LiveView inside and contain the necessary HTML tags to make the LiveView
  * work including the client javascript.
- * @param pageTitleDefaults the PageTitleDefauls that should be used for the title tag especially if it is a `live_title_tag`
+ * @param liveTitleOptions the PageTitleDefauls that should be used for the title tag especially if it is a `live_title_tag`
  * @param csrfToken the CSRF token value that should be embedded into a <meta/> tag named "csrf-token". LiveViewJS uses this to validate socket requests
  * @param liveViewContent the content rendered by the LiveView
  * @returns a LiveViewTemplate that can be rendered by the LiveViewJS server
  */
-export const iosPageRenderer: LiveViewPageRenderer = (
-  pageTitleDefaults: PageTitleDefaults,
+export const iosPageRenderer: LiveViewHtmlPageTemplate = (
+  liveTitleOptions: LiveTitleOptions,
   csrfToken: string,
   liveViewContent: LiveViewTemplate
 ): LiveViewTemplate => {
-  const pageTitle = pageTitleDefaults?.title ?? "";
-  const pageTitlePrefix = pageTitleDefaults?.prefix ?? "";
-  const pageTitleSuffix = pageTitleDefaults?.suffix ?? "";
+  const pageTitle = liveTitleOptions?.title ?? "";
+  const pageTitlePrefix = liveTitleOptions?.prefix ?? "";
+  const pageTitleSuffix = liveTitleOptions?.suffix ?? "";
   return html`
     <!DOCTYPE html>
     <html lang="en">
@@ -54,7 +54,7 @@ export const iosPageRenderer: LiveViewPageRenderer = (
  * @param liveViewContent the content rendered by the LiveView
  * @returns a LiveViewTemplate to be embedded in the root template
  */
-export const iosRootRenderer: LiveViewRootRenderer = async (
+export const iosRootRenderer: LiveViewWrapperTemplate = async (
   session: SessionData,
   liveViewContent: LiveViewTemplate
 ): Promise<LiveViewTemplate> => {

packages/express/src/example/liveview/ios.ts

@@ -0,0 +1,51 @@
+import { createLiveView, html } from "liveviewjs";
+import { favorites, scores } from "./data";
+
+type CatCtx = {
+  cat: string;
+  fav: boolean;
+  score: number;
+};
+
+type CatEvent =
+  | {
+      type: "change-score";
+      value: number;
+    }
+  | {
+      type: "toggle-favorite";
+    };
+
+// LiveView Native Tutorial -
+// https://liveviewnative.github.io/liveview-client-swiftui/tutorials/phoenixliveviewnative/01-initial-list/
+export const catLive = createLiveView<CatCtx, CatEvent>({
+  mount: (socket, _, params) => {
+    console.log("params", params);
+    const cat = params.cat as string;
+    const fav = favorites[cat] ?? false;
+    const score = scores[cat] ?? 0;
+    socket.assign({ cat, fav, score });
+  },
+  handleEvent: (event, socket) => {
+    console.log("event", event);
+    switch (event.type) {
+      case "change-score":
+        scores.cat = event.value;
+        socket.assign({ score: event.value });
+        break;
+      case "toggle-favorite":
+        favorites.cat = !favorites.cat;
+        socket.assign({ fav: favorites.cat });
+        break;
+    }
+  },
+  render: (ctx) => {
+    const { cat, fav, score } = ctx;
+    return html`
+      <vstack navigation-title="${cat}" nav-favorite="${fav}">
+        <asyncimage src="/images/cats/${cat}.jpg" frame='{"width": 300, "height": 300}' />
+        <cat-rating score="${score}" />
+      </vstack>
+    `;
+  },
+});

packages/express/src/example/liveview/ios/cat.ts

@@ -0,0 +1,57 @@
+import { createLiveView, html } from "liveviewjs";
+import { cats, favorites } from "./data";
+
+// LiveView Native Tutorial -
+// https://liveviewnative.github.io/liveview-client-swiftui/tutorials/phoenixliveviewnative/01-initial-list/
+export const catListLive = createLiveView({
+  mount: (socket) => {
+    socket.assign({ cats });
+  },
+  handleEvent: (event, socket) => {
+    console.log("event", event);
+    switch (event.type) {
+      case "toggle-favorite":
+        favorites[event.name] = !favorites[event.name];
+        break;
+    }
+  },
+  render: (_, meta) => {
+    return html` <list navigation-title="Cats!">
+      ${cats.map((cat) => {
+        return html`
+          <navigationlink
+            id="${cat}"
+            data-phx-link="redirect"
+            data-phx-link-state="push"
+            data-phx-href="${buildHref({ to: { path: "/cats/" + cat } })}">
+            <hstack>
+              <asyncimage src="/images/cats/${cat}.jpg" frame-width="100" frame-height="100" />
+              <text>${cat}</text>
+              <spacer />
+              <button phx-click="toggle-favorite" phx-value-name=${cat}>
+                <image
+                  system-name=${favorites[cat] ? "star.fill" : "star"}
+                  symbol-color=${favorites[cat] ? "#f3c51a" : "#000000"} />
+              </button>
+            </hstack>
+          </navigationlink>
+        `;
+      })}
+    </list>`;
+  },
+});
+
+function buildHref(options: {
+  to: {
+    path: string;
+    params?: Record<string, string>;
+  };
+}) {
+  const { path, params } = options.to;
+  const urlParams = new URLSearchParams(params);
+  if (urlParams.toString().length > 0) {
+    return `${path}?${urlParams.toString()}`;
+  } else {
+    return path;
+  }
+}

packages/express/src/example/liveview/ios/catList.ts

@@ -0,0 +1,21 @@
+export const cats = [
+  "Clenil",
+  "Flippers",
+  "Jorts",
+  "Kipper",
+  "Lemmy",
+  "Lissy",
+  "Mikkel",
+  "Minka",
+  "Misty",
+  "Nelly",
+  "Ninj",
+  "Pollito",
+  "Siegfried",
+  "Truman",
+  "Washy",
+];
+
+export const favorites: Record<string, boolean> = {};
+
+export const scores: Record<string, number> = {};

packages/express/src/example/liveview/ios/data.ts

@@ -32,6 +32,7 @@ interface NodeExpressLiveViewServerOptions {
   fileSystemAdaptor?: FileSystemAdaptor;
   wrapperTemplate?: LiveViewWrapperTemplate;
   onError?: (err: any) => void;
+  debug?: (msg: string) => void;
 }
 
 export class NodeExpressLiveViewServer
@@ -69,6 +70,7 @@ export class NodeExpressLiveViewServer
       flashAdaptor: this.flashAdapter,
       pubSub: this.pubSub,
       onError: options?.onError,
+      debug: options?.debug,
     };
   }