ViewState

fix state updates js

cleanup

Author: seanhess

client/dist/action.d.ts

@@ -1,12 +1,13 @@
-import { Meta, ViewId, RequestId, EncodedAction } from "./message";
+import { Meta, ViewId, RequestId, EncodedAction, ViewState } from "./message";
 export type ActionMessage = {
     viewId: ViewId;
     action: EncodedAction;
     requestId: RequestId;
+    state?: ViewState;
     meta: Meta[];
     form: URLSearchParams | undefined;
 };
-export declare function actionMessage(id: ViewId, action: EncodedAction, reqId: RequestId, form?: FormData): ActionMessage;
+export declare function actionMessage(id: ViewId, action: EncodedAction, state: ViewState | undefined, reqId: RequestId, form?: FormData): ActionMessage;
 export declare function toSearch(form?: FormData): URLSearchParams | undefined;
 export declare function renderActionMessage(msg: ActionMessage): string;
 export declare function renderForm(form: URLSearchParams | undefined): string;

client/dist/hyperbole.js

@@ -5,6 +5,7 @@ export type Meta = {
 export type ViewId = string;
 export type RequestId = number;
 export type EncodedAction = string;
+export type ViewState = string;
 type RemoteEvent = {
     name: string;
     detail: any;

client/dist/hyperbole.js.map

@@ -1,6 +1,6 @@
 
 import { takeWhileMap } from "./lib"
-import { Meta, ViewId, RequestId, EncodedAction } from "./message"
+import { Meta, ViewId, RequestId, EncodedAction, ViewState } from "./message"
 import * as message from "./message"
 
 
@@ -9,20 +9,21 @@ export type ActionMessage = {
   viewId: ViewId
   action: EncodedAction
   requestId: RequestId
+  state?: ViewState
   meta: Meta[]
   form: URLSearchParams | undefined
 }
 
 
 
 
-export function actionMessage(id: ViewId, action: EncodedAction, reqId: RequestId, form?: FormData): ActionMessage {
+export function actionMessage(id: ViewId, action: EncodedAction, state: ViewState | undefined, reqId: RequestId, form?: FormData): ActionMessage {
   let meta: Meta[] = [
     { key: "Cookie", value: decodeURI(document.cookie) },
     { key: "Query", value: window.location.search }
   ]
 
-  return { viewId: id, action, requestId: reqId, meta, form: toSearch(form) }
+  return { viewId: id, action, state, requestId: reqId, meta, form: toSearch(form) }
 }
 
 export function toSearch(form?: FormData): URLSearchParams | undefined {
@@ -42,10 +43,15 @@ export function renderActionMessage(msg: ActionMessage): string {
     "|ACTION|",
     "ViewId: " + msg.viewId,
     "Action: " + msg.action,
-    "RequestId: " + msg.requestId
   ]
 
 
+  if (msg.state) {
+    header.push("State: " + msg.state)
+  }
+
+  header.push("RequestId: " + msg.requestId)
+
   return [
     header.join('\n'),
     message.renderMetas(msg.meta),

client/dist/message.d.ts

@@ -2,7 +2,7 @@ import { patch, create } from "omdomdom/lib/omdomdom.es.js"
 import { SocketConnection, Update, Redirect } from './sockets'
 import { listenChange, listenClick, listenDblClick, listenFormSubmit, listenLoad, listenTopLevel, listenInput, listenKeydown, listenKeyup, listenMouseEnter, listenMouseLeave } from './events'
 import { actionMessage, ActionMessage, Request, newRequest } from './action'
-import { ViewId, Metadata, parseMetadata } from './message'
+import { ViewId, Metadata, parseMetadata, ViewState } from './message'
 import { setQuery } from "./browser"
 import { parseResponse, Response, LiveUpdate } from './response'
 
@@ -46,8 +46,10 @@ async function runAction(target: HyperView, action: string, form?: FormData) {
     target.classList.add("hyp-loading")
   }, 100)
 
+  let state = target.dataset.state
+
   let req = newRequest()
-  let msg = actionMessage(target.id, action, req.requestId, form)
+  let msg = actionMessage(target.id, action, state, req.requestId, form)
 
   // Set the requestId
   target.activeRequest = req
@@ -110,6 +112,7 @@ function handleUpdate(res: Update): HyperView {
   // Patch the node
   const old: VNode = create(target)
   let next: VNode = create(update.content)
+  let state = (next.attributes as any)["data-state"]
   next.attributes = old.attributes
   patch(next, old)
 
@@ -118,21 +121,24 @@ function handleUpdate(res: Update): HyperView {
   let newTarget = document.getElementById(target.id)
   dispatchContent(newTarget)
 
-  if (newTarget) {
-    // execute the metadata, anything that doesn't interrupt the dom update
-    runMetadata(res.meta, newTarget)
-
-    // now way for these to bubble)
-    listenLoad(newTarget)
-    listenMouseEnter(newTarget)
-    listenMouseLeave(newTarget)
-    fixInputs(newTarget)
-    enrichHyperViews(newTarget)
-  }
-  else {
+  if (!newTarget) {
     console.warn("Target Missing: ", target.id)
+    return target
   }
 
+  // re-add state attribute 
+  newTarget.dataset.state = state
+
+  // execute the metadata, anything that doesn't interrupt the dom update
+  runMetadata(res.meta, newTarget)
+
+  // now way for these to bubble)
+  listenLoad(newTarget)
+  listenMouseEnter(newTarget)
+  listenMouseLeave(newTarget)
+  fixInputs(newTarget)
+  enrichHyperViews(newTarget)
+
   return target
 }
 // catch (err) {

client/src/action.ts

@@ -7,6 +7,7 @@ export type Meta = { key: string, value: string }
 export type ViewId = string
 export type RequestId = number
 export type EncodedAction = string
+export type ViewState = string
 
 type RemoteEvent = { name: string, detail: any }
 

client/src/index.ts

@@ -58,6 +58,7 @@ import Example.Page.State.Actions qualified as Actions
 import Example.Page.State.Effects qualified as Effects
 import Example.Page.State.Query qualified as Query
 import Example.Page.State.Sessions qualified as Sessions
+import Example.Page.State.View qualified as SView
 import Example.Page.Test qualified as Test
 import Example.Page.Todos.Todo qualified as Todo
 import Example.Page.Todos.TodoCSS qualified as TodoCSS
@@ -121,7 +122,7 @@ exampleApp config users count chats = do
   runApp = runReader config . runTodosSession . runUsersIO users . runDebugIO . runConcurrent . runRandom . runOAuth2 config.oauth config.manager
 
   router :: forall es. (Hyperbole :> es, OAuth2 :> es, Todos :> es, Users :> es, Debug :> es, Concurrent :> es, IOE :> es, GenRandom :> es, Reader AppConfig :> es) => AppRoute -> Eff es Response
-  router Chat = runReader chats $ runPage $ Chat.page
+  router Chat = runReader chats $ runPage Chat.page
   router (Hello h) = runPage $ hello h
   router (Contacts (Contact uid)) = Contact.response uid
   router (Contacts ContactsAll) = runPage Contacts.page
@@ -141,6 +142,7 @@ exampleApp config users count chats = do
     case r of
       StateRoot -> redirect $ routeUri (State Actions)
       Actions -> runPage Actions.page
+      StateView -> runPage SView.page
       Effects -> runReader count $ runPage Effects.page
       Sessions -> runPage Sessions.page
       Query -> runPage Query.page

client/src/message.ts

@@ -68,6 +68,7 @@ instance Route DataRoute where
 data StateRoute
   = StateRoot
   | Actions
+  | StateView
   | Effects
   | Query
   | Sessions
@@ -110,6 +111,7 @@ routeTitle (Hello _) = "Hello World"
 routeTitle (Contacts ContactsAll) = "Contacts"
 routeTitle (State Effects) = "Effects"
 routeTitle (State StateRoot) = "State"
+routeTitle (State StateView) = "Built-in State"
 routeTitle (State Actions) = "Managing State"
 routeTitle (State Query) = "Query"
 routeTitle (State Sessions) = "Sessions"

examples/Example/App.hs

@@ -58,5 +58,5 @@ controlView = do
 
 targetView :: View Controls ()
 targetView = do
-  target Message $ do
+  target Message () $ do
     button (SetMessage "Targeted!") ~ btn $ "Target SetMessage"