Update useTheme

Author: forestream

packages/react/src/hooks/__tests__/use-theme.browser.test.ts

@@ -2,25 +2,31 @@ import { renderHook, waitFor } from '@testing-library/react'
 
 beforeEach(() => {
   vi.resetModules()
+  vi.resetAllMocks()
 })
 
 describe('useTheme', () => {
   it('should return theme', async () => {
     const { useTheme } = await import('../use-theme')
-    const { result } = renderHook(() => useTheme())
+    const { result, unmount } = renderHook(() => useTheme())
     expect(result.current).toBeNull()
 
     document.documentElement.setAttribute('data-theme', 'dark')
     await waitFor(() => {
       expect(result.current).toBe('dark')
     })
-    const { result: newResult } = renderHook(() => useTheme())
+    const { result: newResult, unmount: newUnmount } = renderHook(() =>
+      useTheme(),
+    )
     expect(newResult.current).toBe('dark')
+    newUnmount()
+    unmount()
   })
   it('should return theme when already set', async () => {
     const { useTheme } = await import('../use-theme')
     document.documentElement.setAttribute('data-theme', 'dark')
-    const { result } = renderHook(() => useTheme())
+    const { result, unmount } = renderHook(() => useTheme())
     expect(result.current).toBe('dark')
+    unmount()
   })
 })

packages/react/src/hooks/use-theme.ts

@@ -1,7 +1,10 @@
 'use client'
 
 import { useSyncExternalStore } from 'react'
-import { themeStore } from 'src/stores/themeStore'
+
+import { createThemeStore } from '../stores/theme-store'
+
+const themeStore = createThemeStore()
 
 export function useTheme() {
   const theme = useSyncExternalStore(

packages/react/src/stores/__tests__/theme-store.test.ts

@@ -0,0 +1,19 @@
+beforeEach(() => {
+  vi.resetModules()
+})
+
+describe('themeStore', () => {
+  it('should return themeStore object for browser', async () => {
+    const { createThemeStore } = await import('../theme-store')
+    const themeStore = createThemeStore()
+    expect(themeStore).toBeDefined()
+    expect(themeStore.get).toEqual(expect.any(Function))
+    expect(themeStore.set).toEqual(expect.any(Function))
+    expect(themeStore.subscribe).toEqual(expect.any(Function))
+    expect(themeStore.get()).toBeNull()
+    expect(themeStore.set('dark' as any)).toBeUndefined()
+    expect(themeStore.subscribe(() => {})()).toBeUndefined()
+    themeStore.subscribe(() => {})
+    expect(themeStore.set('dark' as any)).toBeUndefined()
+  })
+})

packages/react/src/stores/themeStore.ts packages/react/src/stores/theme-store.tspackages/react/src/stores/themeStore.ts renamed to packages/react/src/stores/theme-store.ts

@@ -1,26 +1,23 @@
 'use client'
-
-import { DevupTheme } from '@devup-ui/react'
+import type { DevupTheme } from '../types/theme'
 
 type Theme = keyof DevupTheme | null
 type StoreChangeEvent = (newTheme: Theme) => void
 
 const initTheme = null
 
-export const themeStore = (() => {
+export function createThemeStore() {
   if (typeof window === 'undefined')
     return {
       get: () => initTheme,
       set: () => {},
       subscribe: () => () => {},
     }
-  const el = document.documentElement
 
+  const el = document.documentElement
   const subscribers: Set<StoreChangeEvent> = new Set()
   let theme: Theme = initTheme
-  const get = () => {
-    return theme
-  }
+  const get = () => theme
   const set = (newTheme: Theme) => {
     theme = newTheme
     subscribers.forEach((subscriber) => subscriber(theme))
@@ -33,25 +30,18 @@ export const themeStore = (() => {
   }
 
   const mo = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (
-        mutation.type === 'attributes' &&
-        mutation.target instanceof HTMLElement
-      ) {
-        set(mutation.target.getAttribute('data-theme') as Theme)
-      }
-    })
+    for (const m of mutations)
+      if (m.type === 'attributes' && m.target instanceof HTMLElement)
+        set(m.target.getAttribute('data-theme') as Theme)
   })
-
   mo.observe(el, {
     attributes: true,
     attributeFilter: ['data-theme'],
     subtree: false,
   })
-
   return {
     get,
     set,
     subscribe,
   }
-})()
+}