@effect-tui/react 0.1.1 → 0.1.4

package/src/motion/hooks.ts

@@ -7,7 +7,7 @@ import { useRenderer } from "../renderer.js"
 import { MotionValue } from "./motion-value.js"
 import { ColorMotionValue } from "./color-motion-value.js"
 import type { SpringOptions } from "./types.js"
-import type { EventName } from "./event-emitter.js"
+import type { EventName, Subscriber } from "./event-emitter.js"
 import type { ColorInput } from "./color.js"
 
 // Global requestRender callback - set by useSpringRenderer hook
@@ -17,16 +17,16 @@ let globalRequestRender: (() => void) | null = null
  * Create a MotionValue. Similar to Motion's useMotionValue.
  */
 export function useMotionValue<T>(initial: T): MotionValue<T> {
-  const ref = useRef<MotionValue<T> | null>(null)
-  if (!ref.current) {
-    ref.current = new MotionValue(initial)
-  }
+	const ref = useRef<MotionValue<T> | null>(null)
+	if (!ref.current) {
+		ref.current = new MotionValue(initial)
+	}
 
-  useEffect(() => {
-    return () => ref.current?.destroy()
-  }, [])
+	useEffect(() => {
+		return () => ref.current?.destroy()
+	}, [])
 
-  return ref.current
+	return ref.current
 }
 
 /**
@@ -34,17 +34,20 @@ export function useMotionValue<T>(initial: T): MotionValue<T> {
  * If no renderer is passed, it will use the nearest RendererContext (useRenderer()).
  */
 export function useSpringRenderer(renderer?: { requestRender: () => void }) {
-  // Prefer explicit renderer; otherwise pull from context
-  const inferred = renderer ?? useRenderer()
-  useEffect(() => {
-    if (!inferred) return
-    globalRequestRender = inferred.requestRender.bind(inferred)
-    return () => {
-      if (globalRequestRender === inferred.requestRender) {
-        globalRequestRender = null
-      }
-    }
-  }, [inferred])
+	// Prefer explicit renderer; otherwise pull from context
+	const inferred = renderer ?? useRenderer()
+	useEffect(() => {
+		if (!inferred) return
+		// Store the bound function so we can compare for cleanup
+		const boundRequestRender = inferred.requestRender.bind(inferred)
+		globalRequestRender = boundRequestRender
+		return () => {
+			// Only clear if we're still the active renderer
+			if (globalRequestRender === boundRequestRender) {
+				globalRequestRender = null
+			}
+		}
+	}, [inferred])
 }
 
 /**
@@ -62,25 +65,25 @@ export function useSpringRenderer(renderer?: { requestRender: () => void }) {
  * // To animate: setX(100)
  */
 export function useSpring(initial: number, options?: SpringOptions): [MotionValue<number>, (value: number) => void] {
-  const mv = useMotionValue(initial)
-  const optionsRef = useRef(options)
-  optionsRef.current = options
-
-  // Subscribe to changes and request render directly (no setState!)
-  useEffect(() => {
-    return mv.on("change", () => {
-      globalRequestRender?.()
-    })
-  }, [mv])
-
-  const set = useCallback(
-    (target: number) => {
-      mv.set(target, optionsRef.current)
-    },
-    [mv],
-  )
-
-  return [mv, set]
+	const mv = useMotionValue(initial)
+	const optionsRef = useRef(options)
+	optionsRef.current = options
+
+	// Subscribe to changes and request render directly (no setState!)
+	useEffect(() => {
+		return mv.on("change", () => {
+			globalRequestRender?.()
+		})
+	}, [mv])
+
+	const set = useCallback(
+		(target: number) => {
+			mv.set(target, optionsRef.current)
+		},
+		[mv],
+	)
+
+	return [mv, set]
 }
 
 /**
@@ -103,101 +106,103 @@ export function useSpring(initial: number, options?: SpringOptions): [MotionValu
  * const brightness = dotMvs[idx].get()
  */
 export function useSprings(
-  count: number,
-  options?: SpringOptions,
+	count: number,
+	options?: SpringOptions,
 ): [MotionValue<number>[], (values: number[] | ((index: number) => number)) => void] {
-  const mvsRef = useRef<MotionValue<number>[] | null>(null)
-  const optionsRef = useRef(options)
-  optionsRef.current = options
-
-  // Create MotionValues on first render
-  if (!mvsRef.current) {
-    mvsRef.current = Array.from({ length: count }, () => new MotionValue(0))
-  }
-
-  // Handle count changes (recreate if count changes)
-  if (mvsRef.current.length !== count) {
-    // Destroy old ones
-    for (const mv of mvsRef.current) {
-      mv.destroy()
-    }
-    mvsRef.current = Array.from({ length: count }, () => new MotionValue(0))
-  }
-
-  const mvs = mvsRef.current
-
-  // Subscribe all to requestRender
-  useEffect(() => {
-    const unsubs = mvs.map((mv) =>
-      mv.on("change", () => {
-        globalRequestRender?.()
-      }),
-    )
-    return () => {
-      for (const unsub of unsubs) unsub()
-    }
-  }, [mvs])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (mvsRef.current) {
-        for (const mv of mvsRef.current) {
-          mv.destroy()
-        }
-      }
-    }
-  }, [])
-
-  const setAll = useCallback(
-    (values: number[] | ((index: number) => number)) => {
-      const opts = optionsRef.current
-      if (typeof values === "function") {
-        for (let i = 0; i < mvs.length; i++) {
-          mvs[i].set(values(i), opts)
-        }
-      } else {
-        for (let i = 0; i < Math.min(mvs.length, values.length); i++) {
-          mvs[i].set(values[i], opts)
-        }
-      }
-    },
-    [mvs],
-  )
-
-  return [mvs, setAll]
+	const mvsRef = useRef<MotionValue<number>[] | null>(null)
+	const optionsRef = useRef(options)
+	optionsRef.current = options
+
+	// Create MotionValues on first render
+	if (!mvsRef.current) {
+		mvsRef.current = Array.from({ length: count }, () => new MotionValue(0))
+	}
+
+	// Handle count changes (recreate if count changes)
+	if (mvsRef.current.length !== count) {
+		// Destroy old ones
+		for (const mv of mvsRef.current) {
+			mv.destroy()
+		}
+		mvsRef.current = Array.from({ length: count }, () => new MotionValue(0))
+	}
+
+	const mvs = mvsRef.current
+
+	// Subscribe all to requestRender
+	useEffect(() => {
+		const unsubs = mvs.map((mv) =>
+			mv.on("change", () => {
+				globalRequestRender?.()
+			}),
+		)
+		return () => {
+			for (const unsub of unsubs) unsub()
+		}
+	}, [mvs])
+
+	// Cleanup on unmount
+	useEffect(() => {
+		return () => {
+			if (mvsRef.current) {
+				for (const mv of mvsRef.current) {
+					mv.destroy()
+				}
+			}
+		}
+	}, [])
+
+	const setAll = useCallback(
+		(values: number[] | ((index: number) => number)) => {
+			const opts = optionsRef.current
+			if (typeof values === "function") {
+				for (let i = 0; i < mvs.length; i++) {
+					mvs[i].set(values(i), opts)
+				}
+			} else {
+				for (let i = 0; i < Math.min(mvs.length, values.length); i++) {
+					mvs[i].set(values[i], opts)
+				}
+			}
+		},
+		[mvs],
+	)
+
+	return [mvs, setAll]
 }
 
 /**
  * Subscribe to MotionValue events. Similar to Motion's useMotionValueEvent.
  */
 export function useMotionValueEvent<T, E extends EventName>(
-  mv: MotionValue<T>,
-  event: E,
-  callback: E extends "change" ? (value: T) => void : () => void,
+	mv: MotionValue<T>,
+	event: E,
+	callback: E extends "change" ? (value: T) => void : () => void,
 ) {
-  const callbackRef = useRef(callback)
-  callbackRef.current = callback
-
-  useEffect(() => {
-    return mv.on(event, (v: any) => (callbackRef.current as any)(v))
-  }, [mv, event])
+	const callbackRef = useRef(callback)
+	callbackRef.current = callback
+
+	useEffect(() => {
+		// The E constraint ensures type safety at call sites
+		// Cast is necessary due to conditional type complexity in the mv.on signature
+		return mv.on(event, callbackRef.current as Subscriber<E extends "change" ? T : void>)
+	}, [mv, event])
 }
 
 /**
  * Create a ColorMotionValue hook.
  */
 export function useColorMotionValue(initial: ColorInput): ColorMotionValue {
-  const ref = useRef<ColorMotionValue | null>(null)
-  if (!ref.current) {
-    ref.current = new ColorMotionValue(initial)
-  }
+	const ref = useRef<ColorMotionValue | null>(null)
+	if (!ref.current) {
+		ref.current = new ColorMotionValue(initial)
+	}
 
-  useEffect(() => {
-    return () => ref.current?.destroy()
-  }, [])
+	useEffect(() => {
+		return () => ref.current?.destroy()
+	}, [])
 
-  return ref.current
+	return ref.current
 }
 
 /**
@@ -212,26 +217,26 @@ export function useColorMotionValue(initial: ColorInput): ColorMotionValue {
  * const { r, g, b } = colorMv.get()
  */
 export function useColorSpring(
-  initial: ColorInput,
-  options?: SpringOptions,
+	initial: ColorInput,
+	options?: SpringOptions,
 ): [ColorMotionValue, (color: ColorInput) => void] {
-  const mv = useColorMotionValue(initial)
-  const optionsRef = useRef(options)
-  optionsRef.current = options
-
-  // Subscribe to changes and request render
-  useEffect(() => {
-    return mv._subscribeChannels(() => {
-      globalRequestRender?.()
-    })
-  }, [mv])
-
-  const set = useCallback(
-    (color: ColorInput) => {
-      mv.set(color, optionsRef.current)
-    },
-    [mv],
-  )
-
-  return [mv, set]
+	const mv = useColorMotionValue(initial)
+	const optionsRef = useRef(options)
+	optionsRef.current = options
+
+	// Subscribe to changes and request render
+	useEffect(() => {
+		return mv._subscribeChannels(() => {
+			globalRequestRender?.()
+		})
+	}, [mv])
+
+	const set = useCallback(
+		(color: ColorInput) => {
+			mv.set(color, optionsRef.current)
+		},
+		[mv],
+	)
+
+	return [mv, set]
 }

package/src/motion/index.ts

@@ -3,15 +3,15 @@
 
 export type { SpringOptions, MotionValue, RGBA, ColorInput } from "./motion-value.js"
 export {
-  motionValue,
-  useMotionValue,
-  useSpring,
-  useSprings,
-  useSpringRenderer,
-  useMotionValueEvent,
-  // Color springs
-  ColorMotionValue,
-  useColorMotionValue,
-  useColorSpring,
+	motionValue,
+	useMotionValue,
+	useSpring,
+	useSprings,
+	useSpringRenderer,
+	useMotionValueEvent,
+	// Color springs
+	ColorMotionValue,
+	useColorMotionValue,
+	useColorSpring,
 } from "./motion-value.js"
 export { useAnimationFrame } from "./frame.js"