From 6f0b726d449e82797d9989da089985ffa449a43d Mon Sep 17 00:00:00 2001 From: Donnie Flood Date: Tue, 1 Feb 2022 10:00:51 -0700 Subject: [PATCH 1/9] add table for liveview bindings to be filled out --- README.md | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f9524482..0823e53b 100644 --- a/README.md +++ b/README.md @@ -14,9 +14,45 @@ This is a port of [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view/Phoeni * **Follow component API design (i.e. `mount`, `render` etc), reimplemented with Typescript (so even more type-safe)** - Components in LiveViewJS follow the `mount`, `render`, `handleEvent`, and `handleInfo` API defined in Phoenix. Again, no need to invent a new API. ### Status - **⍺** -This is still in very early PoC territory. You probably shouldn't put this into production just yet. +This is still in ⍺lpha territory. You probably shouldn't put this into production just yet. But side-projects / internal apps could work. 🧱 + +### Implemented Phoenix Bindings +(See [Phoenix Bindings Docs](https://hexdocs.pm/phoenix_live_view/bindings.html) for more details) + +| Binding | Attribute | Implemented | +|-----------------|----------------------|-------------| +| Params | `phx-value-*` | [x] | +| Click Events | `phx-click` | [x] | +| Click Events | `phx-click-away` | [x] | +| Form Events | `phx-change` | [x] | +| Form Events | `phx-submit` | [x] | +| Form Events | `phx-feedback-for` | [ ] | +| Form Events | `phx-disable-with` | [ ] | +| Form Events | `phx-trigger-action` | [ ] | +| Form Events | `phx-auto-recover` | [ ] | +| Focus Events | `phx-blur` | [ ] | +| Focus Events | `phx-focus` | [ ] | +| Focus Events | `phx-window-blur` | [ ] | +| Focus Events | `phx-window-focus` | [ ] | +| Key Events | `phx-keydown` | [ ] | +| Key Events | `phx-keyup` | [ ] | +| Key Events | `phx-window-keydown` | [ ] | +| Key Events | `phx-window-keyup` | [ ] | +| Key Events | `phx-key` | [ ] | +| DOM Patching | `phx-update` | [ ] | +| DOM Patching | `phx-remove` | [ ] | +| JS Interop | `phx-hook` | [ ] | +| Rate Limiting | `phx-debounce` | [x] | +| Rate Limiting | `phx-throttle` | [x] | +| Static Tracking | `phx-track-static` | [ ] | + + ### Show me some code! ⌨️ + +**Step 0** Install LiveViewJS +`npm i liveviewjs` + **Step 1** Implement a `LiveViewComponent` ```ts import {html, LiveViewComponent, LiveViewContext, LiveViewExternalEventListener, LiveViewInternalEventListener,PhxSocket } from "liveviewjs"; From 57bd0585bca6e71f0f4510a752ee085950f8df8a Mon Sep 17 00:00:00 2001 From: Donnie Flood Date: Tue, 1 Feb 2022 10:44:49 -0700 Subject: [PATCH 2/9] add support for phx-window-keyup, phx-window-keydown, phx-key and update light example to use key bindings --- README.md | 6 ++-- src/examples/light_liveview.ts | 41 +++++++++++++++----------- src/server/socket/component_manager.ts | 6 ++-- src/server/socket/message_router.ts | 5 ++-- src/server/socket/types.ts | 12 ++++++-- 5 files changed, 44 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 0823e53b..7a2a9b2b 100644 --- a/README.md +++ b/README.md @@ -36,9 +36,9 @@ This is still in ⍺lpha territory. You probably shouldn't put this into produc | Focus Events | `phx-window-focus` | [ ] | | Key Events | `phx-keydown` | [ ] | | Key Events | `phx-keyup` | [ ] | -| Key Events | `phx-window-keydown` | [ ] | -| Key Events | `phx-window-keyup` | [ ] | -| Key Events | `phx-key` | [ ] | +| Key Events | `phx-window-keydown` | [x] | +| Key Events | `phx-window-keyup` | [x] | +| Key Events | `phx-key` | [x] | | DOM Patching | `phx-update` | [ ] | | DOM Patching | `phx-remove` | [ ] | | JS Interop | `phx-hook` | [ ] | diff --git a/src/examples/light_liveview.ts b/src/examples/light_liveview.ts index f09fb860..5eb35450 100644 --- a/src/examples/light_liveview.ts +++ b/src/examples/light_liveview.ts @@ -5,12 +5,12 @@ export interface LightContext { brightness: number; } -export type LightEvent = "on" | "off" | "up" | "down"; +export type LightEvent = "on" | "off" | "up" | "down" | "key_update"; export class LightLiveViewComponent extends BaseLiveViewComponent implements LiveViewComponent, - LiveViewExternalEventListener, - LiveViewExternalEventListener { + LiveViewExternalEventListener, + LiveViewExternalEventListener { mount(params: any, session: any, socket: LiveViewSocket) { @@ -18,47 +18,54 @@ export class LightLiveViewComponent extends BaseLiveViewComponent

Front Porch Light

-
- - ${context.brightness}% - +
+
${brightness}%
+
- - - -
` }; - handleEvent(event: LightEvent, params: any, socket: LiveViewSocket) { + handleEvent(event: LightEvent, params: { key: string }, socket: LiveViewSocket) { const ctx: LightContext = { brightness: socket.context.brightness }; - switch (event) { + // map key_update to arrow keys + const lightEvent = event === "key_update" ? params.key : event; + console.log("lightEvent:", lightEvent); + switch (lightEvent) { case 'off': + case 'ArrowLeft': ctx.brightness = 0; break; case 'on': + case 'ArrowRight': ctx.brightness = 100; break; case 'up': + case 'ArrowUp': ctx.brightness = Math.min(ctx.brightness + 10, 100); break; case 'down': + case 'ArrowDown': ctx.brightness = Math.max(ctx.brightness - 10, 0); break; } diff --git a/src/server/socket/component_manager.ts b/src/server/socket/component_manager.ts index 397e70e9..f856518c 100644 --- a/src/server/socket/component_manager.ts +++ b/src/server/socket/component_manager.ts @@ -1,6 +1,6 @@ import { WebSocket } from "ws"; import { BaseLiveViewComponent, LiveViewComponent, LiveViewSocket, StringPropertyValues } from ".."; -import { newHeartbeatReply, newPhxReply, PhxClickPayload, PhxDiffReply, PhxFormPayload, PhxHeartbeatIncoming, PhxIncomingMessage, PhxJoinIncoming, PhxJoinPayload, PhxLivePatchIncoming, PhxLivePatchPushPayload, PhxOutgoingLivePatchPush, PhxOutgoingMessage, PhxSocketProtocolNames } from "./types"; +import { newHeartbeatReply, newPhxReply, PhxClickPayload, PhxDiffReply, PhxFormPayload, PhxHeartbeatIncoming, PhxIncomingMessage, PhxJoinIncoming, PhxLivePatchIncoming, PhxOutgoingLivePatchPush, PhxOutgoingMessage, PhxKeyDownPayload, PhxKeyUpPayload } from "./types"; import jwt from 'jsonwebtoken'; import { SessionData } from "express-session"; @@ -68,7 +68,7 @@ export class LiveViewComponentManager { this.sendPhxReply(ws, newHeartbeatReply(message)); } - onEvent(ws: WebSocket, message: PhxIncomingMessage) { + onEvent(ws: WebSocket, message: PhxIncomingMessage) { const [joinRef, messageRef, topic, _, payload] = message; const { type, event } = payload; @@ -80,6 +80,8 @@ export class LiveViewComponentManager { } else if (type === "form") { // @ts-ignore - URLSearchParams has an entries method but not typed value = Object.fromEntries(new URLSearchParams(payload.value)) + } else if (type === "keyup" || type === "keydown") { + value = payload.value; } if (isEventHandler(this.component)) { diff --git a/src/server/socket/message_router.ts b/src/server/socket/message_router.ts index 3768b6aa..afa8f0ef 100644 --- a/src/server/socket/message_router.ts +++ b/src/server/socket/message_router.ts @@ -1,4 +1,4 @@ -import { RenderedNode, PhxOutgoingMessage, PhxJoinIncoming, PhxHeartbeatIncoming, PhxIncomingMessage, PhxClickPayload, PhxFormPayload, PhxDiffReply, PhxLivePatchIncoming } from './types'; +import { PhxJoinIncoming, PhxHeartbeatIncoming, PhxIncomingMessage, PhxClickPayload, PhxFormPayload, PhxLivePatchIncoming, PhxKeyDownPayload, PhxKeyUpPayload } from './types'; import WebSocket from 'ws'; import { LiveViewComponent } from '../types'; import { LiveViewRouter } from '../types'; @@ -32,7 +32,8 @@ export class MessageRouter { // lookup component manager for this topic componentManager = this.topicComponentManager[topic]; if (componentManager) { - componentManager.onEvent(ws, rawPhxMessage as PhxIncomingMessage); + const message = rawPhxMessage as PhxIncomingMessage; + componentManager.onEvent(ws, message); } else { console.log("expected component manager for topic", topic); } diff --git a/src/server/socket/types.ts b/src/server/socket/types.ts index a1c5e056..14f629f3 100644 --- a/src/server/socket/types.ts +++ b/src/server/socket/types.ts @@ -75,8 +75,16 @@ export type PhxClickPayload = PhxEventPayload<"click", { value: { value: string export type PhxFormPayload = PhxEventPayload<"form", { value: string }> & PhxEventUploads; -export type PhxClickEvent = PhxIncomingMessage -export type PhxFormEvent = PhxIncomingMessage + +// See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values +// for all the string values for the key that kicked off the event +//{type: "keyup", event: "key_update", value: {key: "ArrowUp"}} +export type PhxKeyUpPayload = PhxEventPayload<"keyup", { value: { key: string } }>; +export type PhxKeyDownPayload = PhxEventPayload<"keydown", { value: { key: string } }>; + + +// export type PhxClickEvent = PhxIncomingMessage +// export type PhxFormEvent = PhxIncomingMessage export const newPhxReply = (from: PhxIncomingMessage, payload: any): PhxReply => { From b50137e0926d6af78f9f1e439a426c66e8c560f3 Mon Sep 17 00:00:00 2001 From: Donnie Flood Date: Tue, 1 Feb 2022 10:00:51 -0700 Subject: [PATCH 3/9] add table for liveview bindings to be filled out --- README.md | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4bb3ecbc..69d08776 100644 --- a/README.md +++ b/README.md @@ -14,9 +14,45 @@ This is a port of [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view/Phoeni * **Follow component API design (i.e. `mount`, `render` etc), reimplemented with Typescript (so even more type-safe)** - Components in LiveViewJS follow the `mount`, `render`, `handleEvent`, and `handleInfo` API defined in Phoenix. Again, no need to invent a new API. ### Status - **⍺** -This is still in very early PoC territory. You probably shouldn't put this into production just yet. +This is still in ⍺lpha territory. You probably shouldn't put this into production just yet. But side-projects / internal apps could work. 🧱 + +### Implemented Phoenix Bindings +(See [Phoenix Bindings Docs](https://hexdocs.pm/phoenix_live_view/bindings.html) for more details) + +| Binding | Attribute | Implemented | +|-----------------|----------------------|-------------| +| Params | `phx-value-*` | [x] | +| Click Events | `phx-click` | [x] | +| Click Events | `phx-click-away` | [x] | +| Form Events | `phx-change` | [x] | +| Form Events | `phx-submit` | [x] | +| Form Events | `phx-feedback-for` | [ ] | +| Form Events | `phx-disable-with` | [ ] | +| Form Events | `phx-trigger-action` | [ ] | +| Form Events | `phx-auto-recover` | [ ] | +| Focus Events | `phx-blur` | [ ] | +| Focus Events | `phx-focus` | [ ] | +| Focus Events | `phx-window-blur` | [ ] | +| Focus Events | `phx-window-focus` | [ ] | +| Key Events | `phx-keydown` | [ ] | +| Key Events | `phx-keyup` | [ ] | +| Key Events | `phx-window-keydown` | [ ] | +| Key Events | `phx-window-keyup` | [ ] | +| Key Events | `phx-key` | [ ] | +| DOM Patching | `phx-update` | [ ] | +| DOM Patching | `phx-remove` | [ ] | +| JS Interop | `phx-hook` | [ ] | +| Rate Limiting | `phx-debounce` | [x] | +| Rate Limiting | `phx-throttle` | [x] | +| Static Tracking | `phx-track-static` | [ ] | + + ### Show me some code! ⌨️ + +**Step 0** Install LiveViewJS +`npm i liveviewjs` + **Step 1** Implement a `LiveViewComponent` ```ts import { SessionData } from "express-session"; From 3bf66b622c72139c97eacb158013f7f12b8a2d53 Mon Sep 17 00:00:00 2001 From: Donnie Flood Date: Tue, 1 Feb 2022 10:44:49 -0700 Subject: [PATCH 4/9] add support for phx-window-keyup, phx-window-keydown, phx-key and update light example to use key bindings --- README.md | 6 ++-- src/examples/light_liveview.ts | 40 ++++++++++++++++---------- src/server/socket/component_manager.ts | 6 ++-- src/server/socket/message_router.ts | 5 ++-- src/server/socket/types.ts | 12 ++++++-- 5 files changed, 45 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 69d08776..b9a677a9 100644 --- a/README.md +++ b/README.md @@ -36,9 +36,9 @@ This is still in ⍺lpha territory. You probably shouldn't put this into produc | Focus Events | `phx-window-focus` | [ ] | | Key Events | `phx-keydown` | [ ] | | Key Events | `phx-keyup` | [ ] | -| Key Events | `phx-window-keydown` | [ ] | -| Key Events | `phx-window-keyup` | [ ] | -| Key Events | `phx-key` | [ ] | +| Key Events | `phx-window-keydown` | [x] | +| Key Events | `phx-window-keyup` | [x] | +| Key Events | `phx-key` | [x] | | DOM Patching | `phx-update` | [ ] | | DOM Patching | `phx-remove` | [ ] | | JS Interop | `phx-hook` | [ ] | diff --git a/src/examples/light_liveview.ts b/src/examples/light_liveview.ts index 479ab708..59eec84a 100644 --- a/src/examples/light_liveview.ts +++ b/src/examples/light_liveview.ts @@ -6,11 +6,12 @@ export interface LightContext { brightness: number; } -export type LightEvent = "on" | "off" | "up" | "down"; +export type LightEvent = "on" | "off" | "up" | "down" | "key_update"; export class LightLiveViewComponent extends BaseLiveViewComponent implements LiveViewComponent, - LiveViewExternalEventListener { + LiveViewExternalEventListener, + LiveViewExternalEventListener { mount(params: LiveViewMountParams, session: Partial, socket: LiveViewSocket) { @@ -18,45 +19,54 @@ export class LightLiveViewComponent extends BaseLiveViewComponent -

Front Porch Light

-
-
${context.brightness}%
+

Front Porch Light

+
+
${brightness}%
+
- - - -
` }; - handleEvent(event: LightEvent, params: never, socket: LiveViewSocket) { + handleEvent(event: LightEvent, params: { key: string }, socket: LiveViewSocket) { const ctx: LightContext = { brightness: socket.context.brightness }; - switch (event) { + // map key_update to arrow keys + const lightEvent = event === "key_update" ? params.key : event; + console.log("lightEvent:", lightEvent); + switch (lightEvent) { case 'off': + case 'ArrowLeft': ctx.brightness = 0; break; case 'on': + case 'ArrowRight': ctx.brightness = 100; break; case 'up': + case 'ArrowUp': ctx.brightness = Math.min(ctx.brightness + 10, 100); break; case 'down': + case 'ArrowDown': ctx.brightness = Math.max(ctx.brightness - 10, 0); break; } diff --git a/src/server/socket/component_manager.ts b/src/server/socket/component_manager.ts index 397e70e9..f856518c 100644 --- a/src/server/socket/component_manager.ts +++ b/src/server/socket/component_manager.ts @@ -1,6 +1,6 @@ import { WebSocket } from "ws"; import { BaseLiveViewComponent, LiveViewComponent, LiveViewSocket, StringPropertyValues } from ".."; -import { newHeartbeatReply, newPhxReply, PhxClickPayload, PhxDiffReply, PhxFormPayload, PhxHeartbeatIncoming, PhxIncomingMessage, PhxJoinIncoming, PhxJoinPayload, PhxLivePatchIncoming, PhxLivePatchPushPayload, PhxOutgoingLivePatchPush, PhxOutgoingMessage, PhxSocketProtocolNames } from "./types"; +import { newHeartbeatReply, newPhxReply, PhxClickPayload, PhxDiffReply, PhxFormPayload, PhxHeartbeatIncoming, PhxIncomingMessage, PhxJoinIncoming, PhxLivePatchIncoming, PhxOutgoingLivePatchPush, PhxOutgoingMessage, PhxKeyDownPayload, PhxKeyUpPayload } from "./types"; import jwt from 'jsonwebtoken'; import { SessionData } from "express-session"; @@ -68,7 +68,7 @@ export class LiveViewComponentManager { this.sendPhxReply(ws, newHeartbeatReply(message)); } - onEvent(ws: WebSocket, message: PhxIncomingMessage) { + onEvent(ws: WebSocket, message: PhxIncomingMessage) { const [joinRef, messageRef, topic, _, payload] = message; const { type, event } = payload; @@ -80,6 +80,8 @@ export class LiveViewComponentManager { } else if (type === "form") { // @ts-ignore - URLSearchParams has an entries method but not typed value = Object.fromEntries(new URLSearchParams(payload.value)) + } else if (type === "keyup" || type === "keydown") { + value = payload.value; } if (isEventHandler(this.component)) { diff --git a/src/server/socket/message_router.ts b/src/server/socket/message_router.ts index 3768b6aa..afa8f0ef 100644 --- a/src/server/socket/message_router.ts +++ b/src/server/socket/message_router.ts @@ -1,4 +1,4 @@ -import { RenderedNode, PhxOutgoingMessage, PhxJoinIncoming, PhxHeartbeatIncoming, PhxIncomingMessage, PhxClickPayload, PhxFormPayload, PhxDiffReply, PhxLivePatchIncoming } from './types'; +import { PhxJoinIncoming, PhxHeartbeatIncoming, PhxIncomingMessage, PhxClickPayload, PhxFormPayload, PhxLivePatchIncoming, PhxKeyDownPayload, PhxKeyUpPayload } from './types'; import WebSocket from 'ws'; import { LiveViewComponent } from '../types'; import { LiveViewRouter } from '../types'; @@ -32,7 +32,8 @@ export class MessageRouter { // lookup component manager for this topic componentManager = this.topicComponentManager[topic]; if (componentManager) { - componentManager.onEvent(ws, rawPhxMessage as PhxIncomingMessage); + const message = rawPhxMessage as PhxIncomingMessage; + componentManager.onEvent(ws, message); } else { console.log("expected component manager for topic", topic); } diff --git a/src/server/socket/types.ts b/src/server/socket/types.ts index a1c5e056..14f629f3 100644 --- a/src/server/socket/types.ts +++ b/src/server/socket/types.ts @@ -75,8 +75,16 @@ export type PhxClickPayload = PhxEventPayload<"click", { value: { value: string export type PhxFormPayload = PhxEventPayload<"form", { value: string }> & PhxEventUploads; -export type PhxClickEvent = PhxIncomingMessage -export type PhxFormEvent = PhxIncomingMessage + +// See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values +// for all the string values for the key that kicked off the event +//{type: "keyup", event: "key_update", value: {key: "ArrowUp"}} +export type PhxKeyUpPayload = PhxEventPayload<"keyup", { value: { key: string } }>; +export type PhxKeyDownPayload = PhxEventPayload<"keydown", { value: { key: string } }>; + + +// export type PhxClickEvent = PhxIncomingMessage +// export type PhxFormEvent = PhxIncomingMessage export const newPhxReply = (from: PhxIncomingMessage, payload: any): PhxReply => { From 503283c9883c61248b2104a6b3933ccb0023ea4f Mon Sep 17 00:00:00 2001 From: Donnie Flood Date: Tue, 1 Feb 2022 10:51:59 -0700 Subject: [PATCH 5/9] refactor light_liveview and add tags to routeDetails --- src/examples/light_liveview.ts | 3 +-- src/examples/routeDetails.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/examples/light_liveview.ts b/src/examples/light_liveview.ts index 59eec84a..3b73e1e9 100644 --- a/src/examples/light_liveview.ts +++ b/src/examples/light_liveview.ts @@ -10,8 +10,7 @@ export type LightEvent = "on" | "off" | "up" | "down" | "key_update"; export class LightLiveViewComponent extends BaseLiveViewComponent implements LiveViewComponent, - LiveViewExternalEventListener, - LiveViewExternalEventListener { + LiveViewExternalEventListener { mount(params: LiveViewMountParams, session: Partial, socket: LiveViewSocket) { diff --git a/src/examples/routeDetails.ts b/src/examples/routeDetails.ts index 873b6bec..b95096ff 100644 --- a/src/examples/routeDetails.ts +++ b/src/examples/routeDetails.ts @@ -10,7 +10,7 @@ export const routeDetails: RouteDetails[] = [ label: "Light", path: "/light", summary: "Control the brightness of a porch light using buttons.", - tags: ["phx-click"] + tags: ["phx-click", "phx-window-keydown", "phx-key"] }, { label: "License", From 61da2f9210e588f672fd5c0babe00c42c0115746 Mon Sep 17 00:00:00 2001 From: Donnie Flood Date: Tue, 1 Feb 2022 10:52:45 -0700 Subject: [PATCH 6/9] remove log --- src/examples/light_liveview.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/examples/light_liveview.ts b/src/examples/light_liveview.ts index 3b73e1e9..8189b749 100644 --- a/src/examples/light_liveview.ts +++ b/src/examples/light_liveview.ts @@ -50,7 +50,6 @@ export class LightLiveViewComponent extends BaseLiveViewComponent Date: Tue, 1 Feb 2022 10:59:17 -0700 Subject: [PATCH 7/9] confirmed phx-keydown and phx-keyup events work --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b9a677a9..fccae936 100644 --- a/README.md +++ b/README.md @@ -34,8 +34,8 @@ This is still in ⍺lpha territory. You probably shouldn't put this into produc | Focus Events | `phx-focus` | [ ] | | Focus Events | `phx-window-blur` | [ ] | | Focus Events | `phx-window-focus` | [ ] | -| Key Events | `phx-keydown` | [ ] | -| Key Events | `phx-keyup` | [ ] | +| Key Events | `phx-keydown` | [x] | +| Key Events | `phx-keyup` | [x] | | Key Events | `phx-window-keydown` | [x] | | Key Events | `phx-window-keyup` | [x] | | Key Events | `phx-key` | [x] | From 87561cf5fbd2086c8363ab4311d45ab5871a9cf2 Mon Sep 17 00:00:00 2001 From: Donnie Flood Date: Tue, 1 Feb 2022 11:02:32 -0700 Subject: [PATCH 8/9] updated types and documentation on key event payloads --- src/server/socket/types.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/server/socket/types.ts b/src/server/socket/types.ts index 14f629f3..61fafb7c 100644 --- a/src/server/socket/types.ts +++ b/src/server/socket/types.ts @@ -79,8 +79,11 @@ export type PhxFormPayload = PhxEventPayload<"form", { value: string }> & PhxEve // See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values // for all the string values for the key that kicked off the event //{type: "keyup", event: "key_update", value: {key: "ArrowUp"}} -export type PhxKeyUpPayload = PhxEventPayload<"keyup", { value: { key: string } }>; -export type PhxKeyDownPayload = PhxEventPayload<"keydown", { value: { key: string } }>; +// {type: "keyup", event: "key_update", value: {key: "ArrowUp", value: ""}} +// {type: "keyup", event: "key_update", value: {key: "ArrowUp", value: "foo"}} +// NOTE: these payloads are the same for phx-window-key* events and phx-key* events +export type PhxKeyUpPayload = PhxEventPayload<"keyup", { value: { key: string, value?: string } }>; +export type PhxKeyDownPayload = PhxEventPayload<"keydown", { value: { key: string, value?: string } }>; // export type PhxClickEvent = PhxIncomingMessage From 5c2f6363f3c87fc2a4eef67c6853cf319782732f Mon Sep 17 00:00:00 2001 From: Donnie Flood Date: Tue, 1 Feb 2022 11:03:48 -0700 Subject: [PATCH 9/9] more cleanup --- src/server/socket/types.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/server/socket/types.ts b/src/server/socket/types.ts index 61fafb7c..abaf6d73 100644 --- a/src/server/socket/types.ts +++ b/src/server/socket/types.ts @@ -74,8 +74,6 @@ export type PhxClickPayload = PhxEventPayload<"click", { value: { value: string //{"type":"form","event":"update","value":"seats=3&_target=seats","uploads":{}} export type PhxFormPayload = PhxEventPayload<"form", { value: string }> & PhxEventUploads; - - // See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values // for all the string values for the key that kicked off the event //{type: "keyup", event: "key_update", value: {key: "ArrowUp"}} @@ -86,10 +84,6 @@ export type PhxKeyUpPayload = PhxEventPayload<"keyup", { value: { key: string, v export type PhxKeyDownPayload = PhxEventPayload<"keydown", { value: { key: string, value?: string } }>; -// export type PhxClickEvent = PhxIncomingMessage -// export type PhxFormEvent = PhxIncomingMessage - - export const newPhxReply = (from: PhxIncomingMessage, payload: any): PhxReply => { return [ from[0],