support live view navigation

package.json

@@ -26,7 +26,14 @@
     "test": "jest --expand",
     "prepublish": "npm run clean; npm run build"
   },
-  "keywords": ["liveviewjs","liveview", "phoenix", "typescript", "javascript", "framework"],
+  "keywords": [
+    "liveviewjs",
+    "liveview",
+    "phoenix",
+    "typescript",
+    "javascript",
+    "framework"
+  ],
   "author": "Donnie Flood <[email protected]>",
   "license": "ISC",
   "dependencies": {
@@ -50,7 +57,7 @@
     "@types/http-errors": "^1.8.1",
     "@types/jest": "^27.4.0",
     "@types/jsonwebtoken": "^8.5.8",
-    "@types/node": "^17.0.0",
+    "@types/node": "^17.0.10",
     "@types/ws": "^8.2.2",
     "eslint": "^8.5.0",
     "jest": "^27.4.7",

src/examples/index.ts

@@ -5,6 +5,7 @@ import { LicenseLiveViewComponent } from './license_liveview';
 import { LightLiveViewComponent } from './light_liveview';
 import { SearchLiveViewComponent } from './live-search/component';
 import { SalesDashboardLiveViewComponent } from './sales_dashboard_liveview';
+import { ServersLiveViewComponent } from './servers/component';
 
 const lvServer = new LiveViewServer({
   // port: 3002,
@@ -18,13 +19,14 @@ export const router: LiveViewRouter = {
   '/sales-dashboard': new SalesDashboardLiveViewComponent(),
   '/search': new SearchLiveViewComponent(),
   "/autocomplete": new AutocompleteLiveViewComponent(),
+  "/light": new LightLiveViewComponent(),
 }
 
 // register all routes
 lvServer.registerLiveViewRoutes(router)
 
 // register single route
-lvServer.registerLiveViewRoute("/light", new LightLiveViewComponent())
+lvServer.registerLiveViewRoute("/servers", new ServersLiveViewComponent())
 
 // start server
 lvServer.start();

src/examples/servers/component.ts

@@ -0,0 +1,97 @@
+import escapeHtml from "../../server/templates";
+import { LiveViewComponent, LiveViewContext, LiveViewExternalEventListener, LiveViewParamsHandler, LiveViewTemplate } from "../../server/types";
+import { PhxSocket } from "../../server/socket/types";
+import { WebSocket } from "ws";
+import { listServers, Server } from "./data";
+import { live_patch } from "../../server/templates/helpers/live_patch";
+
+// Example of Phoenix "Live Navigation"
+
+export interface ServersContext {
+  servers: Server[]
+  selectedServer: Server
+}
+
+const idToWs = new Map<string, WebSocket>();
+
+export class ServersLiveViewComponent implements
+  LiveViewComponent<ServersContext>,
+  LiveViewParamsHandler<ServersContext, { id: string }> {
+
+
+  mount(params: any, session: any, socket: PhxSocket): LiveViewContext<ServersContext> {
+    const servers = listServers();
+    const selectedServer = servers[0];
+    return { data: { servers, selectedServer } };
+  }
+
+  handleParams(params: { id: string; }, url: string, socket: PhxSocket): LiveViewContext<ServersContext> {
+    console.log("params", params);
+    const servers = listServers();
+    const selectedServer = servers.find(server => server.id === params.id) || servers[0];
+    return { data: { servers, selectedServer } };
+  }
+
+  render(context: LiveViewContext<ServersContext>): LiveViewTemplate {
+    const { servers, selectedServer } = context.data;
+    console.log("rendering servers", servers, selectedServer);
+    return escapeHtml`
+    <h1>Servers</h1>
+    <div id="servers">
+      <div class="sidebar">
+        <nav>
+          ${servers.map(server => {
+      return live_patch(this.link_body(server), { to: { path: "/servers", params: { id: server.id } }, class: server.id === selectedServer.id ? "selected" : "" })
+    })}
+        </nav>
+      </div>
+      <div class="main">
+        <div class="wrapper">
+          <div class="card">
+            <div class="header">
+              <h2>${selectedServer.name}</h2>
+              <span class="${selectedServer.status}">
+                ${selectedServer.status}
+              </span>
+            </div>
+            <div class="body">
+              <div class="row">
+                <div class="deploys">
+                  🚀
+                  <span>
+                    ${selectedServer.deploy_count} deploys
+                  </span>
+                </div>
+                <span>
+                  ${selectedServer.size} MB
+                </span>
+                <span>
+                  ${selectedServer.framework}
+                </span>
+              </div>
+              <h3>Git Repo</h3>
+              <div class="repo">
+                ${selectedServer.git_repo}
+              </div>
+              <h3>Last Commit</h3>
+              <div class="commit">
+                ${selectedServer.last_commit_id}
+              </div>
+              <blockquote>
+                ${selectedServer.last_commit_message}
+              </blockquote>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    `
+  }
+
+  private link_body(server: Server) {
+    return escapeHtml`
+      🤖 ${server.name}
+    `
+  }
+
+}

src/examples/servers/data.ts

@@ -0,0 +1,64 @@
+
+export interface Server {
+  id: string
+  name: string,
+  status: string,
+  deploy_count: number,
+  size: number,
+  framework: string,
+  git_repo: string,
+  last_commit_id: string,
+  last_commit_message: string
+}
+
+export function listServers(): Server[] {
+  return servers;
+}
+
+const servers: Server[] = [
+  {
+    id: "1",
+    name: "dancing-lizard",
+    status: "up",
+    deploy_count: 14,
+    size: 19.5,
+    framework: "Elixir/Phoenix",
+    git_repo: "https://git.example.com/dancing-lizard.git",
+    last_commit_id: "f3d41f7",
+    last_commit_message: "If this works, I'm going disco    🕺"
+  },
+  {
+    id: "2",
+    name: "lively-frog",
+    status: "up",
+    deploy_count: 12,
+    size: 24.0,
+    framework: "Elixir/Phoenix",
+    git_repo: "https://git.example.com/lively-frog.git",
+    last_commit_id: "d2eba26",
+    last_commit_message: "Does it scale? 🤔"
+  },
+  {
+    id: "3",
+    name: "curious-raven",
+    status: "up",
+    deploy_count: 21,
+    size: 17.25,
+    framework: "Ruby/Rails",
+    git_repo: "https://git.example.com/curious-raven.git",
+    last_commit_id: "a3708f1",
+    last_commit_message: "Fixed a bug! 🐞"
+  },
+  {
+    id: "4",
+    name: "cryptic-owl",
+    status: "down",
+    deploy_count: 2,
+    size: 5.0,
+    framework: "Elixir/Phoenix",
+    git_repo: "https://git.example.com/cryptic-owl.git",
+    last_commit_id: "c497e91",
+    last_commit_message: "First big launch! 🤞"
+  },
+
+]