refactor liveview handlers to support nested paths; experiement with …

…live_view_route; test; bump version to 0.0.11

package.json

@@ -1,6 +1,6 @@
 {
   "name": "liveviewjs",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "LiveViewJS brings the power of Phoenix LiveView to Typescript and Javascript developers and applications.",
   "targets": {
     "client": {

src/examples/index.ts

@@ -1,7 +1,6 @@
 import path from 'path';
 import { LiveViewServer } from '../server';
 import { LiveViewRouter } from '../server/component/types';
-import { configLiveViewHandler } from '../server/live_view_route';
 import { AsyncFetchLiveViewComponent } from './asyncfetch/component';
 import { AutocompleteLiveViewComponent } from './autocomplete/component';
 import { LicenseLiveViewComponent } from './license_liveview';
@@ -35,6 +34,8 @@ const lvServer = new LiveViewServer({
 
 const router: LiveViewRouter = {
   "/light": new LightLiveViewComponent(),
+  // sub paths also work
+  "/foo/light": new LightLiveViewComponent(),
   "/license": new LicenseLiveViewComponent(),
   '/sales-dashboard': new SalesDashboardLiveViewComponent(),
   '/search': new SearchLiveViewComponent(),
@@ -52,20 +53,6 @@ lvServer.registerLiveViewRoutes(router)
 // register single route
 // lvServer.registerLiveViewRoute("/volunteers", new VolunteerComponent())
 
-
-lvServer.expressApp.get("/foo/bar", configLiveViewHandler(
-  new LightLiveViewComponent(),
-  "root.html.ejs",
-  "signing-secret-foo",
-  (req) => {
-    return { ...req.session, csrfToken: "csrfToken"}
-  },
-  {
-    title: "Examples",
-  },
-  )
-)
-
 // add your own routes to the express app
 lvServer.expressApp.get("/", (req, res) => {
 

src/server/live_view_route.test.ts

@@ -0,0 +1,93 @@
+import { SessionData } from "express-session";
+import { nanoid } from "nanoid";
+import request from "superwstest";
+import { configLiveViewHandler } from ".";
+import { BaseLiveViewComponent } from "./component/base_component";
+import { LiveViewMountParams, LiveViewSocket } from "./component/types";
+import { LiveViewServer } from "./live_view_server";
+import { html } from "./templates";
+
+
+describe("test live view route", () => {
+
+  it("starting / stopping twice has no effect", async () => {
+    const lvServer = new LiveViewServer({
+      signingSecret: "MY_VERY_SECRET_KEY",
+      port: 7878,
+      pageTitleDefaults: {
+        prefix: "TitlePrefix - ",
+        suffix: " - TitleSuffix",
+        title: "Title",
+      },
+    });
+    lvServer.start();
+    expect(lvServer.isStarted).toBe(true);
+    lvServer.start();
+    expect(lvServer.isStarted).toBe(true);
+    lvServer.shutdown();
+    expect(lvServer.isStarted).toBe(false);
+    lvServer.shutdown();
+    expect(lvServer.isStarted).toBe(false);
+  })
+
+  it("use configLiveViewHandler", (done) => {
+    const lvServer = new LiveViewServer({
+      signingSecret: "MY_VERY_SECRET_KEY",
+      port: 7878,
+      pageTitleDefaults: {
+        prefix: "TitlePrefix - ",
+        suffix: " - TitleSuffix",
+        title: "Title",
+      },
+    });
+
+    lvServer.start();
+    expect(lvServer.isStarted).toBe(true);
+    const lvComponent = new LiveViewComponent()
+    lvServer.expressApp.get(...configLiveViewHandler(
+      "/test/foo",
+      lvComponent,
+      "root.html.ejs",
+      "my signing secret",
+      (req) => {
+        return {
+          ...req.session, // copy session data
+          csrfToken: req.session.csrfToken || nanoid(),
+        }
+      },
+      {
+        title: "Default Title"
+      }
+    ))
+    lvServer.start()
+    setTimeout((() => {
+      request(lvServer.httpServer).get('/test/foo').expect(200).then(res => {
+        expect(res.text).toContain(lvComponent.render({ message: "test" }).toString())
+        done();
+        lvServer.shutdown()
+      })
+    }), 100)
+  })
+
+
+
+})
+
+declare module 'express-session' {
+  interface SessionData {
+    message: string;
+  }
+}
+
+class LiveViewComponent extends BaseLiveViewComponent<{ message?: string }, {}> {
+
+  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<{}>): {} {
+    return { message: session.message || "test" }
+  }
+
+  render(ctx: { message: string }) {
+    const { message } = ctx
+    return html`<div>${message}</div>`;
+  }
+
+}

src/server/live_view_route.ts

@@ -8,13 +8,14 @@ type SessionDataProvider<T extends {csrfToken: string}> = (req: Request) => T;
 const emptyVoid = () => {};
 
 export const configLiveViewHandler = <T extends {csrfToken: string}>(
+  getPath: string,
   component: LiveViewComponent<unknown,unknown>,
   rootView: string,
   signingSecret: string,
   sessionDataProvider: SessionDataProvider<T>,
   pageTitleDefaults: PageTitleDefaults
-) => {
-  return async (req:Request, res: Response, next: NextFunction) => {
+): [string, (req:Request, res: Response, next: NextFunction) => Promise<void>] => {
+  return [getPath, async (req:Request, res: Response, next: NextFunction) => {
 
     // new LiveViewId for each request
     const liveViewId = nanoid();
@@ -57,5 +58,5 @@ export const configLiveViewHandler = <T extends {csrfToken: string}>(
       statics: jwt.sign(JSON.stringify(view.statics), signingSecret),
       inner_content: view.toString()
     })
-  }
+  }]
 }

src/server/live_view_server.test.ts

@@ -1,11 +1,11 @@
 import { SessionData } from "express-session";
-import { LiveViewServer } from "./live_view_server";
-import { html } from "./templates";
-import { LiveViewMountParams, LiveViewRouter, LiveViewSocket } from "./component/types";
-import request from "superwstest"
 import { Server } from "http";
-import { PhxJoinIncoming } from "./socket/types";
+import request from "superwstest";
 import { BaseLiveViewComponent } from "./component/base_component";
+import { LiveViewMountParams, LiveViewRouter, LiveViewSocket } from "./component/types";
+import { LiveViewServer } from "./live_view_server";
+import { PhxJoinIncoming } from "./socket/types";
+import { html } from "./templates";
 
 
 describe("test live view server", () => {
@@ -71,6 +71,15 @@ describe("test live view server", () => {
     })
   })
 
+  it("http request renders a live view component html at deeper path", (done) => {
+    const lvComponent = new LiveViewComponent()
+    lvServer.registerLiveViewRoute("/test/foo/bar", lvComponent)
+    request(lvServer.httpServer).get('/test/foo/bar').expect(200).then(res => {
+      expect(res.text).toContain(lvComponent.render({ message: "test" }).toString())
+      done();
+    })
+  })
+
   it("http request contains live title components", (done) => {
     const lvComponent = new LiveViewComponent()
     lvServer.registerLiveViewRoute("/test", lvComponent)

src/server/live_view_server.ts

@@ -127,9 +127,13 @@ export class LiveViewServer {
     this.httpServer.close();
   }
 
+
   private buildExpressApp() {
     const app = express();
 
+    // empty void function
+    const emptyVoid = () => {};
+
     app.use(express.static(this.publicPath))
 
     app.set('view engine', 'ejs');
@@ -153,10 +157,9 @@ export class LiveViewServer {
     // register live_title_tag helper
     app.locals.live_title_tag = live_title_tag;
 
-    app.get('/:liveview', async (req, res, next) => {
-      const liveview = req.params.liveview;
-
-      const emptyVoid = () => { };
+    // handle all views and look up components by path
+    app.use(async (req, res, next) => {
+      const liveview = req.path;
 
       // new LiveViewId per HTTP requess?
       const liveViewId = nanoid();
@@ -172,7 +175,7 @@ export class LiveViewServer {
       }
 
       // look up component for route
-      const component = this._router[`/${liveview}`];
+      const component = this._router[liveview];
       if (!component) {
         // no component found for route so call next() to
         // let a possible downstream route handle the request
@@ -185,15 +188,15 @@ export class LiveViewServer {
         req.session.csrfToken = nanoid();
       }
 
-      const jwtPayload: Omit<SessionData, "cookie"> = {
+      const sessionData: Omit<SessionData, "cookie" | "message"> = {
         ...req.session,
         csrfToken: req.session.csrfToken,
       }
 
       // mount and render component if found
       const ctx = await component.mount(
         { _csrf_token: req.session.csrfToken, _mounts: -1 },
-        { ...jwtPayload },
+        { ...sessionData },
         liveViewSocket
       );
       const view = component.render(ctx);
@@ -205,7 +208,7 @@ export class LiveViewServer {
         page_title_suffix: this.pageTitleDefaults?.suffix,
         csrf_meta_tag: req.session.csrfToken,
         liveViewId,
-        session: jwt.sign(jwtPayload, this.signingSecret),
+        session: jwt.sign(sessionData, this.signingSecret),
         statics: jwt.sign(JSON.stringify(view.statics), this.signingSecret),
         inner_content: view.toString()
       })