From e92c85218a09f90cc492cd9ada94279957c7e3cf Mon Sep 17 00:00:00 2001 From: Donnie Flood Date: Fri, 11 Mar 2022 08:33:26 -0700 Subject: [PATCH] refactored to use http sockets where possible; implemented handeParams in before http render --- src/server/live_view_route.ts | 3 ++ src/server/live_view_server.ts | 55 +++++++++++++++++++++++----------- 2 files changed, 40 insertions(+), 18 deletions(-) diff --git a/src/server/live_view_route.ts b/src/server/live_view_route.ts index e23a6b93..6863025c 100644 --- a/src/server/live_view_route.ts +++ b/src/server/live_view_route.ts @@ -38,6 +38,9 @@ export const configLiveViewHandler = ( 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 index c20ec5fe..95eadfdb 100644 --- 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 = { - 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(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, params?: Partial): Promise { + // params may be empty + params = params ?? {}; + delete params.id; // remove id before passing to socket + + // create live component socket + const lcSocket = new HttpLiveComponentSocket(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, {