chore: cleanup (#17284)

packages/ui/src/components/text-reveal.tsx

@@ -1,4 +1,5 @@
-import { createEffect, createSignal, on, onCleanup, onMount } from "solid-js"
+import { createEffect, on, onCleanup, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
 
 const px = (value: number | string | undefined, fallback: number) => {
   if (typeof value === "number") return `${value}px`
@@ -30,11 +31,18 @@ export function TextReveal(props: {
   growOnly?: boolean
   truncate?: boolean
 }) {
-  const [cur, setCur] = createSignal(props.text)
-  const [old, setOld] = createSignal<string | undefined>()
-  const [width, setWidth] = createSignal("auto")
-  const [ready, setReady] = createSignal(false)
-  const [swapping, setSwapping] = createSignal(false)
+  const [state, setState] = createStore({
+    cur: props.text,
+    old: undefined as string | undefined,
+    width: "auto",
+    ready: false,
+    swapping: false,
+  })
+  const cur = () => state.cur
+  const old = () => state.old
+  const width = () => state.width
+  const ready = () => state.ready
+  const swapping = () => state.swapping
   let inRef: HTMLSpanElement | undefined
   let outRef: HTMLSpanElement | undefined
   let rootRef: HTMLSpanElement | undefined
@@ -49,7 +57,7 @@ export function TextReveal(props: {
       const prev = Number.parseFloat(width())
       if (Number.isFinite(prev) && next <= prev) return
     }
-    setWidth(`${next}px`)
+    setState("width", `${next}px`)
   }
 
   createEffect(
@@ -58,25 +66,25 @@ export function TextReveal(props: {
       (next, prev) => {
         if (next === prev) return
         if (typeof next === "string" && typeof prev === "string" && next.startsWith(prev)) {
-          setCur(next)
+          setState("cur", next)
           widen(win())
           return
         }
-        setSwapping(true)
-        setOld(prev)
-        setCur(next)
+        setState("swapping", true)
+        setState("old", prev)
+        setState("cur", next)
 
         if (typeof requestAnimationFrame !== "function") {
           widen(Math.max(win(), wout()))
           rootRef?.offsetHeight
-          setSwapping(false)
+          setState("swapping", false)
           return
         }
         if (frame !== undefined && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame)
         frame = requestAnimationFrame(() => {
           widen(Math.max(win(), wout()))
           rootRef?.offsetHeight
-          setSwapping(false)
+          setState("swapping", false)
           frame = undefined
         })
       },
@@ -87,16 +95,16 @@ export function TextReveal(props: {
     widen(win())
     const fonts = typeof document !== "undefined" ? document.fonts : undefined
     if (typeof requestAnimationFrame !== "function") {
-      setReady(true)
+      setState("ready", true)
       return
     }
     if (!fonts) {
-      requestAnimationFrame(() => setReady(true))
+      requestAnimationFrame(() => setState("ready", true))
       return
     }
     fonts.ready.finally(() => {
       widen(win())
-      requestAnimationFrame(() => setReady(true))
+      requestAnimationFrame(() => setState("ready", true))
     })
   })