@solidrt/core 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -20,7 +20,7 @@
     "colord": "^2.9.3"
   },
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.6"
+    "@solidrt/flux-types": "0.0.8"
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.14",

package/src/types.d.ts

@@ -3,6 +3,15 @@
 import type { JSX as SolidJSX } from "@solidjs/signals"
 
 declare global {
+  function requestAnimationFrame(callback: (time: number) => void): number
+  function cancelAnimationFrame(id: number): void
+
+  // UI event bus (lattice). on/once return an unsubscribe function.
+  let srt: {
+    on(event: string, callback: (data: any) => void): () => void
+    once(event: string, callback: (data: any) => void): () => void
+  }
+
   let ffi: {
     createRoot(id: number): void
     createNode(id: number, kind: string): void
@@ -207,7 +216,7 @@ export interface PathProps extends Position, PaintProps, PointerProps {
   fillRule?: "nonZero" | "evenOdd"
 }
 
-export interface TextProps extends PaintProps {
+export interface TextProps extends PaintProps, PointerProps {
   children?: Children
   fontFamily?: "sans" | "mono" | (string & {})
   fontSize?: number

package/src/window.ts

@@ -6,16 +6,24 @@ import { getEventHandler, getFocusedNodeId, setFocus } from "./core"
 let nextFrameId = 1
 let animationFrames = new Map<number, Function>()
 
+// Latest display refresh rate (Hz) reported by the runtime, passed to onFrame
+// callbacks. Defaults to 60 until the first displayRefreshRate event arrives.
+let refreshRate = 60
+
 /**
- * Calls `fn` before every frame is painted. The first call receives tick=0 (game time).
- * Returns a cleanup function to stop updates. When called within a reactive scope
- * (e.g. a component or createEffect), cleanup is also automatic.
+ * Calls `fn` before every frame is painted: `tick` is the time in ms, `frame` is
+ * the present count, and `rate` is the current refresh rate in Hz. `tick` is paced
+ * by the runtime (one refresh period per present, slow-corrected toward the wall
+ * clock) so animations driven off it stay smooth even when swap-return times
+ * jitter. For raw, continuous wall-clock time (e.g. measuring code), use
+ * performance.now() instead.
+ * Returns a cleanup function; also auto-cleans within a reactive scope.
  */
-export function onFrame(fn: (tick: number, frame: number) => void) {
+export function onFrame(fn: (tick: number, frame: number, rate: number) => void) {
   let frameId: number = null!
 
-  let extendedFn = (tick: number, frame: number) => {
-    fn(tick, frame)
+  let extendedFn = (tick: number, frame: number, rate: number) => {
+    fn(tick, frame, rate)
     frameId = nextFrameId++
     animationFrames.set(frameId, extendedFn)
   }
@@ -45,7 +53,7 @@ interface ResizeEvent {
 }
 
 export function onResize(fn: (data: ResizeEvent) => void) {
-  let unsubscribe = Flux.on("resize", fn)
+  let unsubscribe = srt.on("resize", fn)
   onCleanup(unsubscribe)
   return unsubscribe
 }
@@ -55,19 +63,19 @@ export function onResize(fn: (data: ResizeEvent) => void) {
 // by a re-layout pass before painting (one extra pass; cascades beyond that
 // paint stale).
 export function onLayout(fn: () => void) {
-  let unsubscribe = Flux.on("postLayout", fn)
+  let unsubscribe = srt.on("postLayout", fn)
   onCleanup(unsubscribe)
   return unsubscribe
 }
 
 export function onWindowFocus(fn: () => void) {
-  let unsubscribe = Flux.on("windowFocus", fn)
+  let unsubscribe = srt.on("windowFocus", fn)
   onCleanup(unsubscribe)
   return unsubscribe
 }
 
 export function onWindowBlur(fn: () => void) {
-  let unsubscribe = Flux.on("windowBlur", fn)
+  let unsubscribe = srt.on("windowBlur", fn)
   onCleanup(unsubscribe)
   return unsubscribe
 }
@@ -86,24 +94,30 @@ export function attachWindow(_nodeId: number) {
   let unsubKeyUp: () => void = null!
   let unsubTextInput: () => void = null!
   let unsubKeyboardVisibility: () => void = null!
+  let unsubRefreshRate: () => void = null!
   let unsubFirstResize: (() => void) | null = null
 
   function runFrame(t: number, frame: number) {
     if (animationFrames.size > 0) {
       let frames = animationFrames
       animationFrames = new Map()
-      for (let fn of frames.values()) fn(t, frame)
+      for (let fn of frames.values()) fn(t, frame, refreshRate)
     }
     flush()
     draw()
   }
 
   onSettled(() => {
-    unsubscribe = Flux.on("render", ({ time, frame }: { time: number; frame: number }) => {
-      runFrame((time * 1000) | 0, frame)
+    // Sticky event: a late subscriber still receives the current rate.
+    unsubRefreshRate = srt.on("displayRefreshRate", ({ hz }: { hz: number }) => {
+      if (hz > 0) refreshRate = hz
+    })
+
+    unsubscribe = srt.on("render", ({ time, frame }: { time: number; frame: number }) => {
+      runFrame(time * 1000, frame)
     })
 
-    unsubDown = Flux.on(
+    unsubDown = srt.on(
       "pointerDown",
       ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
         for (let nodeId of targets) {
@@ -118,13 +132,13 @@ export function attachWindow(_nodeId: number) {
       },
     )
 
-    unsubUp = Flux.on("pointerUp", ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
+    unsubUp = srt.on("pointerUp", ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
       for (let nodeId of targets) {
         getEventHandler(nodeId, "onPointerUp")?.(e)
       }
     })
 
-    unsubMove = Flux.on(
+    unsubMove = srt.on(
       "pointerMove",
       ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
         for (let nodeId of targets) {
@@ -133,7 +147,7 @@ export function attachWindow(_nodeId: number) {
       },
     )
 
-    unsubEnter = Flux.on(
+    unsubEnter = srt.on(
       "pointerEnter",
       ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
         for (let nodeId of targets) {
@@ -142,7 +156,7 @@ export function attachWindow(_nodeId: number) {
       },
     )
 
-    unsubLeave = Flux.on(
+    unsubLeave = srt.on(
       "pointerLeave",
       ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
         for (let nodeId of targets) {
@@ -151,27 +165,27 @@ export function attachWindow(_nodeId: number) {
       },
     )
 
-    unsubWheel = Flux.on("wheel", ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
+    unsubWheel = srt.on("wheel", ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
       for (let nodeId of targets) {
         getEventHandler(nodeId, "onWheel")?.(e)
       }
     })
 
-    unsubKeyDown = Flux.on("keydown", (e: any) => {
+    unsubKeyDown = srt.on("keydown", (e: any) => {
       let id = getFocusedNodeId()
       if (id != null) {
         getEventHandler(id, "onKeyDown")?.(e)
       }
     })
 
-    unsubKeyUp = Flux.on("keyup", (e: any) => {
+    unsubKeyUp = srt.on("keyup", (e: any) => {
       let id = getFocusedNodeId()
       if (id != null) {
         getEventHandler(id, "onKeyUp")?.(e)
       }
     })
 
-    unsubTextInput = Flux.on("textInput", (e: any) => {
+    unsubTextInput = srt.on("textInput", (e: any) => {
       let id = getFocusedNodeId()
       if (id != null) {
         getEventHandler(id, "onTextInput")?.(e)
@@ -180,7 +194,7 @@ export function attachWindow(_nodeId: number) {
 
     // When the user dismisses the on-screen keyboard (swipe down, "Done",
     // back button), blur the focused node so the app's UI state catches up.
-    unsubKeyboardVisibility = Flux.on("keyboardVisibility", ({ shown }: { shown: boolean }) => {
+    unsubKeyboardVisibility = srt.on("keyboardVisibility", ({ shown }: { shown: boolean }) => {
       if (!shown) setFocus(null)
     })
 
@@ -191,7 +205,7 @@ export function attachWindow(_nodeId: number) {
     // synchronously here, while we are still inside this onSettled callback
     // where flush() is illegal (not reentrant). Defer runFrame to a microtask
     // so the first frame always runs after this callback returns.
-    unsubFirstResize = Flux.once("resize", () => {
+    unsubFirstResize = srt.once("resize", () => {
       queueMicrotask(() => runFrame(0, 0))
     })
   })
@@ -208,6 +222,7 @@ export function attachWindow(_nodeId: number) {
     if (unsubKeyUp) unsubKeyUp()
     if (unsubTextInput) unsubTextInput()
     if (unsubKeyboardVisibility) unsubKeyboardVisibility()
+    if (unsubRefreshRate) unsubRefreshRate()
     if (unsubFirstResize) unsubFirstResize()
   })
 }