@pyreon/kinetic 0.11.5 → 0.11.7

package/src/__tests__/useAnimationEnd.test.ts

@@ -1,59 +1,59 @@
-import { signal } from "@pyreon/reactivity"
-import useAnimationEnd from "../useAnimationEnd"
+import { signal } from '@pyreon/reactivity'
+import useAnimationEnd from '../useAnimationEnd'
 
 const createMockRef = () => {
-  const el = document.createElement("div")
+  const el = document.createElement('div')
   return { current: el }
 }
 
-describe("useAnimationEnd", () => {
+describe('useAnimationEnd', () => {
   beforeEach(() => vi.useFakeTimers())
   afterEach(() => vi.useRealTimers())
 
-  it("calls onEnd when transitionend fires on the element", () => {
+  it('calls onEnd when transitionend fires on the element', () => {
     const onEnd = vi.fn()
     const ref = createMockRef()
     const active = signal(true)
 
     useAnimationEnd({ ref, onEnd, active })
 
-    const event = new Event("transitionend", { bubbles: true })
-    Object.defineProperty(event, "target", { value: ref.current })
+    const event = new Event('transitionend', { bubbles: true })
+    Object.defineProperty(event, 'target', { value: ref.current })
     ref.current.dispatchEvent(event)
 
     expect(onEnd).toHaveBeenCalledTimes(1)
   })
 
-  it("calls onEnd when animationend fires on the element", () => {
+  it('calls onEnd when animationend fires on the element', () => {
     const onEnd = vi.fn()
     const ref = createMockRef()
     const active = signal(true)
 
     useAnimationEnd({ ref, onEnd, active })
 
-    const event = new Event("animationend", { bubbles: true })
-    Object.defineProperty(event, "target", { value: ref.current })
+    const event = new Event('animationend', { bubbles: true })
+    Object.defineProperty(event, 'target', { value: ref.current })
     ref.current.dispatchEvent(event)
 
     expect(onEnd).toHaveBeenCalledTimes(1)
   })
 
-  it("ignores bubbled events from children", () => {
+  it('ignores bubbled events from children', () => {
     const onEnd = vi.fn()
     const ref = createMockRef()
-    const child = document.createElement("span")
+    const child = document.createElement('span')
     ref.current.appendChild(child)
     const active = signal(true)
 
     useAnimationEnd({ ref, onEnd, active })
 
-    const event = new Event("transitionend", { bubbles: true })
+    const event = new Event('transitionend', { bubbles: true })
     child.dispatchEvent(event)
 
     expect(onEnd).not.toHaveBeenCalled()
   })
 
-  it("fires timeout fallback when no event fires", () => {
+  it('fires timeout fallback when no event fires', () => {
     const onEnd = vi.fn()
     const ref = createMockRef()
     const active = signal(true)
@@ -67,7 +67,7 @@ describe("useAnimationEnd", () => {
     expect(onEnd).toHaveBeenCalledTimes(1)
   })
 
-  it("uses default timeout of 5000ms", () => {
+  it('uses default timeout of 5000ms', () => {
     const onEnd = vi.fn()
     const ref = createMockRef()
     const active = signal(true)
@@ -81,25 +81,25 @@ describe("useAnimationEnd", () => {
     expect(onEnd).toHaveBeenCalledTimes(1)
   })
 
-  it("only fires onEnd once even if multiple events fire", () => {
+  it('only fires onEnd once even if multiple events fire', () => {
     const onEnd = vi.fn()
     const ref = createMockRef()
     const active = signal(true)
 
     useAnimationEnd({ ref, onEnd, active })
 
-    const event1 = new Event("transitionend", { bubbles: true })
-    Object.defineProperty(event1, "target", { value: ref.current })
+    const event1 = new Event('transitionend', { bubbles: true })
+    Object.defineProperty(event1, 'target', { value: ref.current })
     ref.current.dispatchEvent(event1)
 
-    const event2 = new Event("animationend", { bubbles: true })
-    Object.defineProperty(event2, "target", { value: ref.current })
+    const event2 = new Event('animationend', { bubbles: true })
+    Object.defineProperty(event2, 'target', { value: ref.current })
     ref.current.dispatchEvent(event2)
 
     expect(onEnd).toHaveBeenCalledTimes(1)
   })
 
-  it("does not fire when active is false", () => {
+  it('does not fire when active is false', () => {
     const onEnd = vi.fn()
     const ref = createMockRef()
     const active = signal(false)
@@ -111,7 +111,7 @@ describe("useAnimationEnd", () => {
     expect(onEnd).not.toHaveBeenCalled()
   })
 
-  it("does not fire when active=true but ref.current is null", () => {
+  it('does not fire when active=true but ref.current is null', () => {
     const onEnd = vi.fn()
     const ref = { current: null } as { current: HTMLElement | null }
     const active = signal(true)
@@ -124,7 +124,7 @@ describe("useAnimationEnd", () => {
     expect(onEnd).not.toHaveBeenCalled()
   })
 
-  it("does not call onEnd twice when transitionend fires and then timeout fires", () => {
+  it('does not call onEnd twice when transitionend fires and then timeout fires', () => {
     const onEnd = vi.fn()
     const ref = createMockRef()
     const active = signal(true)
@@ -132,8 +132,8 @@ describe("useAnimationEnd", () => {
     useAnimationEnd({ ref, onEnd, active, timeout: 1000 })
 
     // First: transitionend fires — calls done()
-    const event = new Event("transitionend", { bubbles: true })
-    Object.defineProperty(event, "target", { value: ref.current })
+    const event = new Event('transitionend', { bubbles: true })
+    Object.defineProperty(event, 'target', { value: ref.current })
     ref.current.dispatchEvent(event)
 
     expect(onEnd).toHaveBeenCalledTimes(1)
@@ -144,7 +144,7 @@ describe("useAnimationEnd", () => {
     expect(onEnd).toHaveBeenCalledTimes(1)
   })
 
-  it("does not call onEnd twice when timeout fires and then transitionend fires", () => {
+  it('does not call onEnd twice when timeout fires and then transitionend fires', () => {
     const onEnd = vi.fn()
     const ref = createMockRef()
     const active = signal(true)
@@ -157,14 +157,14 @@ describe("useAnimationEnd", () => {
     expect(onEnd).toHaveBeenCalledTimes(1)
 
     // Second: transitionend fires — should be no-op via called guard
-    const event = new Event("transitionend", { bubbles: true })
-    Object.defineProperty(event, "target", { value: ref.current })
+    const event = new Event('transitionend', { bubbles: true })
+    Object.defineProperty(event, 'target', { value: ref.current })
     ref.current.dispatchEvent(event)
 
     expect(onEnd).toHaveBeenCalledTimes(1)
   })
 
-  it("resets called when active transitions from true to false", () => {
+  it('resets called when active transitions from true to false', () => {
     const onEnd = vi.fn()
     const ref = createMockRef()
     const active = signal(true)
@@ -172,8 +172,8 @@ describe("useAnimationEnd", () => {
     useAnimationEnd({ ref, onEnd, active, timeout: 1000 })
 
     // Fire to set called = true
-    const event = new Event("transitionend", { bubbles: true })
-    Object.defineProperty(event, "target", { value: ref.current })
+    const event = new Event('transitionend', { bubbles: true })
+    Object.defineProperty(event, 'target', { value: ref.current })
     ref.current.dispatchEvent(event)
 
     expect(onEnd).toHaveBeenCalledTimes(1)
@@ -185,8 +185,8 @@ describe("useAnimationEnd", () => {
     active.set(true)
 
     // Should be able to fire again
-    const event2 = new Event("transitionend", { bubbles: true })
-    Object.defineProperty(event2, "target", { value: ref.current })
+    const event2 = new Event('transitionend', { bubbles: true })
+    Object.defineProperty(event2, 'target', { value: ref.current })
     ref.current.dispatchEvent(event2)
 
     expect(onEnd).toHaveBeenCalledTimes(2)

package/src/__tests__/useReducedMotion.test.ts

@@ -2,7 +2,7 @@
 let mountCallbacks: Array<() => undefined | (() => void)> = []
 let unmountCallbacks: Array<() => void> = []
 
-vi.mock("@pyreon/core", () => ({
+vi.mock('@pyreon/core', () => ({
   onMount: vi.fn((cb: () => undefined | (() => void)) => {
     mountCallbacks.push(cb)
   }),
@@ -11,7 +11,7 @@ vi.mock("@pyreon/core", () => ({
   }),
 }))
 
-vi.mock("@pyreon/reactivity", () => {
+vi.mock('@pyreon/reactivity', () => {
   const signal = <T>(initial: T) => {
     let value = initial
     const s = (() => value) as (() => T) & {
@@ -39,20 +39,20 @@ vi.mock("@pyreon/reactivity", () => {
   return { signal }
 })
 
-import { useReducedMotion } from "../useReducedMotion"
+import { useReducedMotion } from '../useReducedMotion'
 
-describe("useReducedMotion", () => {
+describe('useReducedMotion', () => {
   let changeHandlers: Array<(e: any) => void>
   let removedHandlers: Array<(e: any) => void>
 
   const createMockMQL = (matches: boolean) => ({
     matches,
-    media: "(prefers-reduced-motion: reduce)",
+    media: '(prefers-reduced-motion: reduce)',
     addEventListener: vi.fn((event: string, handler: (e: any) => void) => {
-      if (event === "change") changeHandlers.push(handler)
+      if (event === 'change') changeHandlers.push(handler)
     }),
     removeEventListener: vi.fn((event: string, handler: (e: any) => void) => {
-      if (event === "change") removedHandlers.push(handler)
+      if (event === 'change') removedHandlers.push(handler)
     }),
   })
 
@@ -67,18 +67,18 @@ describe("useReducedMotion", () => {
     vi.restoreAllMocks()
   })
 
-  it("returns false initially", () => {
+  it('returns false initially', () => {
     vi.stubGlobal(
-      "matchMedia",
+      'matchMedia',
       vi.fn(() => createMockMQL(false)),
     )
     const result = useReducedMotion()
     expect(result()).toBe(false)
   })
 
-  it("reads matchMedia state on mount (true)", () => {
+  it('reads matchMedia state on mount (true)', () => {
     vi.stubGlobal(
-      "matchMedia",
+      'matchMedia',
       vi.fn(() => createMockMQL(true)),
     )
     const result = useReducedMotion()
@@ -89,9 +89,9 @@ describe("useReducedMotion", () => {
     expect(result()).toBe(true)
   })
 
-  it("reads matchMedia state on mount (false)", () => {
+  it('reads matchMedia state on mount (false)', () => {
     vi.stubGlobal(
-      "matchMedia",
+      'matchMedia',
       vi.fn(() => createMockMQL(false)),
     )
     const result = useReducedMotion()
@@ -101,9 +101,9 @@ describe("useReducedMotion", () => {
     expect(result()).toBe(false)
   })
 
-  it("reacts to change events", () => {
+  it('reacts to change events', () => {
     vi.stubGlobal(
-      "matchMedia",
+      'matchMedia',
       vi.fn(() => createMockMQL(false)),
     )
     const result = useReducedMotion()
@@ -119,19 +119,19 @@ describe("useReducedMotion", () => {
     expect(result()).toBe(true)
   })
 
-  it("queries the correct media string", () => {
+  it('queries the correct media string', () => {
     const mockMatchMedia = vi.fn(() => createMockMQL(false))
-    vi.stubGlobal("matchMedia", mockMatchMedia)
+    vi.stubGlobal('matchMedia', mockMatchMedia)
 
     useReducedMotion()
     for (const cb of mountCallbacks) cb()
 
-    expect(mockMatchMedia).toHaveBeenCalledWith("(prefers-reduced-motion: reduce)")
+    expect(mockMatchMedia).toHaveBeenCalledWith('(prefers-reduced-motion: reduce)')
   })
 
-  it("registers a change listener on mount", () => {
+  it('registers a change listener on mount', () => {
     vi.stubGlobal(
-      "matchMedia",
+      'matchMedia',
       vi.fn(() => createMockMQL(false)),
     )
     useReducedMotion()
@@ -141,9 +141,9 @@ describe("useReducedMotion", () => {
     expect(changeHandlers).toHaveLength(1)
   })
 
-  it("removes the change listener on unmount", () => {
+  it('removes the change listener on unmount', () => {
     vi.stubGlobal(
-      "matchMedia",
+      'matchMedia',
       vi.fn(() => createMockMQL(false)),
     )
     useReducedMotion()

package/src/__tests__/useTransitionState.test.ts

@@ -1,132 +1,132 @@
-import { signal } from "@pyreon/reactivity"
-import useTransitionState from "../useTransitionState"
+import { signal } from '@pyreon/reactivity'
+import useTransitionState from '../useTransitionState'
 
-describe("useTransitionState", () => {
-  it("initial state is hidden when show=false", () => {
+describe('useTransitionState', () => {
+  it('initial state is hidden when show=false', () => {
     const show = signal(false)
     const result = useTransitionState({ show })
-    expect(result.stage()).toBe("hidden")
+    expect(result.stage()).toBe('hidden')
     expect(result.shouldMount()).toBe(false)
   })
 
-  it("initial state is entered when show=true and appear=false", () => {
+  it('initial state is entered when show=true and appear=false', () => {
     const show = signal(true)
     const result = useTransitionState({ show })
-    expect(result.stage()).toBe("entered")
+    expect(result.stage()).toBe('entered')
     expect(result.shouldMount()).toBe(true)
   })
 
-  it("transitions to entering when show changes false->true", () => {
+  it('transitions to entering when show changes false->true', () => {
     const show = signal(false)
     const result = useTransitionState({ show })
 
-    expect(result.stage()).toBe("hidden")
+    expect(result.stage()).toBe('hidden')
 
     show.set(true)
-    expect(result.stage()).toBe("entering")
+    expect(result.stage()).toBe('entering')
     expect(result.shouldMount()).toBe(true)
   })
 
-  it("complete() transitions entering->entered", () => {
+  it('complete() transitions entering->entered', () => {
     const show = signal(false)
     const result = useTransitionState({ show })
 
     show.set(true)
-    expect(result.stage()).toBe("entering")
+    expect(result.stage()).toBe('entering')
 
     result.complete()
-    expect(result.stage()).toBe("entered")
+    expect(result.stage()).toBe('entered')
   })
 
-  it("transitions to leaving when show changes true->false", () => {
+  it('transitions to leaving when show changes true->false', () => {
     const show = signal(true)
     const result = useTransitionState({ show })
 
-    expect(result.stage()).toBe("entered")
+    expect(result.stage()).toBe('entered')
 
     show.set(false)
-    expect(result.stage()).toBe("leaving")
+    expect(result.stage()).toBe('leaving')
     expect(result.shouldMount()).toBe(true)
   })
 
-  it("complete() transitions leaving->hidden", () => {
+  it('complete() transitions leaving->hidden', () => {
     const show = signal(true)
     const result = useTransitionState({ show })
 
     show.set(false)
-    expect(result.stage()).toBe("leaving")
+    expect(result.stage()).toBe('leaving')
 
     result.complete()
-    expect(result.stage()).toBe("hidden")
+    expect(result.stage()).toBe('hidden')
     expect(result.shouldMount()).toBe(false)
   })
 
-  it("appear=true enters after ref is connected", () => {
+  it('appear=true enters after ref is connected', () => {
     const show = signal(true)
     const result = useTransitionState({ show, appear: true })
     // Before ref is wired, element should be mounted but stage is 'entered'
-    expect(result.stage()).toBe("entered")
+    expect(result.stage()).toBe('entered')
     expect(result.shouldMount()).toBe(true)
 
     // Simulate ref connection (as the renderer would do)
-    const el = document.createElement("div")
-    if (typeof result.ref === "function") {
+    const el = document.createElement('div')
+    if (typeof result.ref === 'function') {
       result.ref(el)
     }
     // Now the appear animation should trigger
-    expect(result.stage()).toBe("entering")
+    expect(result.stage()).toBe('entering')
   })
 
-  it("complete() is a no-op in entered state", () => {
+  it('complete() is a no-op in entered state', () => {
     const show = signal(true)
     const result = useTransitionState({ show })
 
-    expect(result.stage()).toBe("entered")
+    expect(result.stage()).toBe('entered')
 
     result.complete()
-    expect(result.stage()).toBe("entered")
+    expect(result.stage()).toBe('entered')
   })
 
-  it("complete() is a no-op in hidden state", () => {
+  it('complete() is a no-op in hidden state', () => {
     const show = signal(false)
     const result = useTransitionState({ show })
 
-    expect(result.stage()).toBe("hidden")
+    expect(result.stage()).toBe('hidden')
 
     result.complete()
-    expect(result.stage()).toBe("hidden")
+    expect(result.stage()).toBe('hidden')
   })
 
-  it("handles rapid toggling true->false->true", () => {
+  it('handles rapid toggling true->false->true', () => {
     const show = signal(true)
     const result = useTransitionState({ show })
 
     // Start leave
     show.set(false)
-    expect(result.stage()).toBe("leaving")
+    expect(result.stage()).toBe('leaving')
 
     // Interrupt with enter before leave completes
     show.set(true)
-    expect(result.stage()).toBe("entering")
+    expect(result.stage()).toBe('entering')
   })
 
-  it("handles rapid toggling false->true->false (entering to leaving)", () => {
+  it('handles rapid toggling false->true->false (entering to leaving)', () => {
     const show = signal(false)
     const result = useTransitionState({ show })
 
     // Start enter
     show.set(true)
-    expect(result.stage()).toBe("entering")
+    expect(result.stage()).toBe('entering')
 
     // Interrupt with leave before enter completes
     show.set(false)
-    expect(result.stage()).toBe("leaving")
+    expect(result.stage()).toBe('leaving')
   })
 
-  it("provides a ref (callback or object)", () => {
+  it('provides a ref (callback or object)', () => {
     const show = signal(false)
     const result = useTransitionState({ show })
     expect(result.ref).toBeDefined()
-    expect(typeof result.ref === "function" || "current" in result.ref).toBe(true)
+    expect(typeof result.ref === 'function' || 'current' in result.ref).toBe(true)
   })
 })