refactored to use http sockets where possible; implemented handeParam…

…s in before http render
floodfx · Mar 11, 2022 · e92c852 · e92c852
1 parent 9aa3ecd
commit e92c852
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 18 deletions.
diff --git a/src/server/live_view_route.ts b/src/server/live_view_route.ts
@@ -38,6 +38,9 @@ export const configLiveViewHandler = <T extends {csrfToken: string}>(
       liveViewSocket
     );
 
+    // handle params
+    await component.handleParams(req.query, req.url, liveViewSocket);
+
     // pass LiveViewContext and LiveViewMeta to render
     const lvContext = liveViewSocket.context;
     const liveViewMeta = new HttpLiveViewMeta(liveViewId, session.csrfToken)

diff --git a/src/server/live_view_server.ts b/src/server/live_view_server.ts
@@ -5,8 +5,9 @@ import jwt from "jsonwebtoken";
 import { nanoid } from "nanoid";
 import path from "path";
 import WebSocket from 'ws';
-import { LiveView, LiveViewRouter, LiveViewSocket, live_title_tag } from ".";
-import { HttpLiveViewMeta, LiveViewContext } from "./component";
+import { LiveView, LiveViewRouter, live_title_tag } from ".";
+import { HttpLiveComponentSocket, LiveComponent, LiveComponentContext, LiveViewContext, LiveViewTemplate } from "./component";
+import { HttpLiveViewSocket } from "./socket/live_socket";
 import { MessageRouter } from "./socket/message_router";
 
 // extend / define session interface
@@ -162,18 +163,6 @@ export class LiveViewServer {
 
       // new LiveViewId per HTTP requess?
       const liveViewId = nanoid();
-      const liveViewSocket: LiveViewSocket<LiveViewContext> = {
-        id: liveViewId,
-        connected: false, // ws socket not connected on http request
-        context: {},
-        assign: (context) => context,
-        send: emptyVoid,
-        repeat: emptyVoid,
-        pageTitle: emptyVoid,
-        subscribe: emptyVoid,
-        pushPatch: emptyVoid,
-        pushEvent: emptyVoid,
-      }
 
       // look up component for route
       const component = this._router[liveview];
@@ -194,19 +183,49 @@ export class LiveViewServer {
         csrfToken: req.session.csrfToken,
       }
 
+      // http  socket
+      const liveViewSocket = new HttpLiveViewSocket<LiveViewContext>(liveViewId, {});
+
       // mount
-      const ctx = await component.mount(
+      await component.mount(
         { _csrf_token: req.session.csrfToken, _mounts: -1 },
         { ...sessionData },
         liveViewSocket
       );
 
-      // TODO handle_params
+      // handle_params
+      await component.handleParams(req.query, req.url, liveViewSocket);
 
       // pass LiveViewContext and LiveViewMeta to render
       const lvContext = liveViewSocket.context;
-      const liveViewMeta = new HttpLiveViewMeta(liveViewId, req.session.csrfToken)
-      const view = await component.render(lvContext, liveViewMeta);
+      // const liveViewMeta = new HttpLiveViewMeta(liveViewId, req.session.csrfToken);
+
+      let myself = 1;
+      const view = await component.render(lvContext, {
+        csrfToken: req.session.csrfToken,
+        async live_component(liveComponent: LiveComponent<LiveComponentContext>, params?: Partial<LiveComponentContext & { id: string | number; }>): Promise<LiveViewTemplate> {
+          // params may be empty
+          params = params ?? {};
+          delete params.id; // remove id before passing to socket
+
+          // create live component socket
+          const lcSocket = new HttpLiveComponentSocket<LiveComponentContext>(liveViewId, params as unknown as LiveComponentContext);
+
+          // update socket with params
+          lcSocket.assign(params);
+
+          // run lifecycle
+          await liveComponent.mount(lcSocket);
+          await liveComponent.update(lcSocket);
+
+          // render view with context
+          const lcContext = lcSocket.context;
+          const newView = await liveComponent.render(lcContext, {myself: myself});
+          myself++;
+          // since http request is stateless send back the LiveViewTemplate
+          return newView;
+        }
+      });
 
       // render the view with all the data
       res.render(this.rootView, {