strict ts by fanshi1028 · Pull Request #190 · seanhess/hyperbole

fanshi1028 · 2026-02-09T13:44:12Z

No description provided.

seanhess · 2026-02-09T15:57:15Z

@fanshi1028 Thanks for submitting this. Did you run through all the examples to test?

I'm getting a couple Typescript errors on your branch. Can you fix please? Do we have a typescript version mismatch or somethign?

 ➜  hyperbole git:(fanshi1028) cd client
 ➜  client git:(fanshi1028) npx webpack
assets by status 24.4 KiB [cached] 11 assets
orphan modules 31.1 KiB [orphan] 9 modules
cacheable modules 43.5 KiB
  ./src/index.ts + 9 modules 41.2 KiB [built] [code generated]
  ./package.json 381 bytes [built] [code generated]
  ./node_modules/debounce/index.js 2.02 KiB [built] [code generated]

ERROR in /Users/seanhess/code/hyperbole/client/src/events.ts
./src/events.ts 219:11-17
[tsl] ERROR in /Users/seanhess/code/hyperbole/client/src/events.ts(219,12)
      TS2345: Argument of type 'HyperView | undefined' is not assignable to parameter of type 'HyperView'.
  Type 'undefined' is not assignable to type 'HyperView'.
ts-loader-default_e3b0c44298fc1c14
 @ ./src/index.ts 3:0-192 114:4-14 115:4-20 116:4-20 202:4-18 205:4-14 206:4-20 207:4-20 209:4-15 213:4-18 217:4-17 221:4-15 225:4-20 229:4-16 237:4-15

ERROR in /Users/seanhess/code/hyperbole/client/src/index.ts
44:2-17
[tsl] ERROR in /Users/seanhess/code/hyperbole/client/src/index.ts(44,3)
      TS2322: Type 'Timeout' is not assignable to type 'number'.
ts-loader-default_e3b0c44298fc1c14

webpack 5.89.0 compiled with 2 errors in 891 ms

fanshi1028 · 2026-02-10T04:05:33Z

@fanshi1028 Thanks for submitting this. Did you run through all the examples to test?

I'm getting a couple Typescript errors on your branch. Can you fix please? Do we have a typescript version mismatch or somethign?

 ➜  hyperbole git:(fanshi1028) cd client
 ➜  client git:(fanshi1028) npx webpack
assets by status 24.4 KiB [cached] 11 assets
orphan modules 31.1 KiB [orphan] 9 modules
cacheable modules 43.5 KiB
  ./src/index.ts + 9 modules 41.2 KiB [built] [code generated]
  ./package.json 381 bytes [built] [code generated]
  ./node_modules/debounce/index.js 2.02 KiB [built] [code generated]

ERROR in /Users/seanhess/code/hyperbole/client/src/events.ts
./src/events.ts 219:11-17
[tsl] ERROR in /Users/seanhess/code/hyperbole/client/src/events.ts(219,12)
      TS2345: Argument of type 'HyperView | undefined' is not assignable to parameter of type 'HyperView'.
  Type 'undefined' is not assignable to type 'HyperView'.
ts-loader-default_e3b0c44298fc1c14
 @ ./src/index.ts 3:0-192 114:4-14 115:4-20 116:4-20 202:4-18 205:4-14 206:4-20 207:4-20 209:4-15 213:4-18 217:4-17 221:4-15 225:4-20 229:4-16 237:4-15

ERROR in /Users/seanhess/code/hyperbole/client/src/index.ts
44:2-17
[tsl] ERROR in /Users/seanhess/code/hyperbole/client/src/index.ts(44,3)
      TS2322: Type 'Timeout' is not assignable to type 'number'.
ts-loader-default_e3b0c44298fc1c14

webpack 5.89.0 compiled with 2 errors in 891 ms

Oops. I just tsc-ed it and didn't even try to build with webpack. But I have just fixed them for webpack build and checked to ensured the demo app's examples do works. Please check again.

seanhess

Thanks for doing this!

seanhess · 2026-03-05T16:18:19Z

client/src/events.ts

+export function listenBubblingEvent(event: string, cb: (_target: HyperView, action: string) => void): void {
  document.addEventListener(event, function(e) {
-    let el = e.target as HTMLInputElement
+    if (!(e.target instanceof HTMLElement)) {


Is this necessary? HyperView extends HTMLElement. Perhaps this belongs at the callsite (or perhaps it already has a check there).

Either way, we shouldn't return without a console error

Theoretically some third party code could do thing like this:

document.addEventListener("click", function(e){ if (e.target instanceof HTMLElement) { console.log(e) } else console.error("event target is not a HTMLElement %o", e) }) document.dispatchEvent(new Event("click"))

The event's target will be null and break the original code.

No checking on the call site of listenBubblingEvent could ever prevent this.

In practice though, maybe no one will ever do this.

I think if someone really dispatch their own event like this, whatever spaghetti they are into, it is their own business. Then when our handlers eavesdrop and catch them, this doesn't look like an "error" to me, so I just chose to ignored them in the code. But I think we can also warn them if you think we should, so I pushed a commit to "console.warn" about them now.

Tell me what you think. If you still think these checks are unnecessary(as it is really kind of a niche edge case). We could revert them all back to simple as HTMLElement.

seanhess · 2026-03-05T16:21:07Z

client/src/events.ts

    let onMouseEnter = node.dataset.onmouseenter

-    let target = nearestTarget(node)
+    let target = nearestNonHyperViewTarget(node)


This could theoretically still be a hyper view? I think we mean that it isn't required to be a HyperView.

Perhaps rename nearestTarget to nearestHyperViewTarget and rename this to nearestAnyTarget?

seanhess · 2026-03-05T16:21:31Z

client/src/events.ts

+export function listenChange(cb: (target: HyperView, action: string) => void): void {
  document.addEventListener("change", function(e) {
-    let el = e.target as HTMLElement
+    if (!(e.target instanceof HTMLElement)) {


Same as above. Seems redundant

seanhess · 2026-03-05T16:22:19Z

client/src/events.ts

  document.addEventListener("input", function(e) {
-    let el = e.target as HTMLElement
-    let source = el.closest("[data-oninput]") as LiveInputElement
+    if (!(e.target instanceof HTMLElement)) {


Same as above. Seems redundant

seanhess · 2026-03-05T16:22:50Z

client/src/events.ts

    if (!source) return

-    let delay = parseInt(source.dataset.delay) || 250
+    let delay = parseInt(source.dataset.delay || "") || 250


Interesting, does parseInt(x) || 250 fail on undefined?

Never. But we needs this unnecessary effort to please the compiler. parseInt take a string there.

seanhess · 2026-03-05T16:23:35Z

client/src/events.ts

+      console.error("Missing target: listenChange")
+      return
+    }
+    if (source.dataset.onchange === undefined) {


Simplify to if (!source.dataset.onchange) like you did for oninput

seanhess · 2026-03-05T16:23:50Z

client/src/events.ts

+export function listenFormSubmit(cb: (target: HyperView, action: string, form: FormData) => void): void {
  document.addEventListener("submit", function(e) {
-    let form = e.target as HTMLFormElement
+    if (!(e.target instanceof HTMLFormElement)) {


Same as above, seems redundant

seanhess · 2026-03-05T16:24:09Z

client/src/events.ts

 }

-function nearestTarget(node: HTMLElement): HTMLElement {
+function nearestTarget(node: HTMLElement): HyperView | undefined {


See notes above about renaming this and nearestNonHyperViewTarget

seanhess · 2026-03-05T16:28:16Z

client/src/hyperview.ts

@@ -0,0 +1,15 @@
+import { type Request } from "./action";


Let's move enrichHyperViews to this module? Plus anything else that's directly related to this interface.

if we do that. We are moving almost all code in index.ts into it. As the code and quite tightly tangled together. enrichHyperViews need runAction. and runAction need the sock and its initialisation logic.

Here are some ways I imagine we can do about it.

Just move it all. (Moving those initialisation code from index.ts into it doesn't feel right to me, but you tell me).

Just move enrichHyperViews and make it take and an extra param "runAction".

move the hyperView.ts code into event.ts (as only index.ts and event.ts import it)

Don't move it and keep it as is.

(Tell me if you have any other prefered solution)

I have chosen to do 2. Tell me it you prefer to do it other way.

seanhess · 2026-03-05T16:36:04Z

client/src/index.ts


-// Should we connect to the socket or not?
 const sock = new SocketConnection()
-sock.connect()


Where do we connect the socket? Does it happen automatically?

I somehow moved it into the constructor, but now that I think about it, yup, I moved it back out.

… to nearestAnyTarget

Changed logging level from error to warn when event handlers receive non-HTMLElement targets, and standardized log messages using %o formatter for better object inspection.

This reverts commit 51cb0bb.

fanshi1028 · 2026-03-07T03:07:18Z

@seanhess Please check my replies and changes and tell me what to do next(if any).

strict ts

016a71c

fanshi1028 added 5 commits February 10, 2026 09:27

fixup! strict ts

1a26bac

fixup! strict ts

89cf076

fix: listenKeyEvent no need to target HTMLInputElement

fdfd8e3

fix: listenMouseEnter/Leave eventTarget could be non HyperView

9013e29

fix listenInput

4f6241f

seanhess requested changes Mar 5, 2026

View reviewed changes

fanshi1028 added 7 commits March 7, 2026 08:33

nearestTarget to nearestHyperViewTarget and nearestNonHyperViewTarget…

9d34aad

… to nearestAnyTarget

warn for non-HTMLElement targets for various handlers

818ea7d

Changed logging level from error to warn when event handlers receive non-HTMLElement targets, and standardized log messages using %o formatter for better object inspection.

chores

bd3b158

move *everything* into hyperview

51cb0bb

Revert "move *everything* into hyperview"

9892869

This reverts commit 51cb0bb.

move enrichHyperViews into hyperView.ts

551ae10

Don't auto the socket connection in the SocketConnection constructor

7d1b44e

Merge branch 'main' into main

012423a

Conversation

fanshi1028 commented Feb 9, 2026

Uh oh!

seanhess commented Feb 9, 2026

Uh oh!

fanshi1028 commented Feb 10, 2026

Uh oh!

seanhess left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fanshi1028 Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fanshi1028 Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fanshi1028 Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fanshi1028 commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fanshi1028 Mar 7, 2026 •

edited

Loading

fanshi1028 Mar 7, 2026 •

edited

Loading

fanshi1028 Mar 7, 2026 •

edited

Loading

fanshi1028 commented Mar 7, 2026 •

edited

Loading