test: advanced type check for ThemeName (#465)

* test: advanced type check for ThemeName

* chore: import ComponentProps

Author: Brentlok

bun.lock

@@ -19,6 +19,7 @@
         "circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 'src/**/*.ts' 'src/**/*.tsx'",
         "test:native": "jest --config jest.config.native.js",
         "test:web": "jest --config jest.config.web.js",
+        "test:types": "tsc --project tests/type-test/tsconfig.json",
         "test:e2e": "playwright test",
         "release": "release-it"
     },

packages/uniwind/package.json

@@ -5,7 +5,7 @@ import { UniwindListener } from '../core/listener'
 import { ThemeName } from '../core/types'
 import { StyleDependency } from '../types'
 
-export const useUniwind = () => {
+export const useUniwind = (): { theme: ThemeName; hasAdaptiveThemes: boolean } => {
     const uniwindContext = useUniwindContext()
     const [theme, setTheme] = useState(Uniwind.currentTheme)
     const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes)
@@ -26,7 +26,7 @@ export const useUniwind = () => {
     }, [uniwindContext])
 
     return {
-        theme: uniwindContext.scopedTheme ?? theme as ThemeName,
+        theme: uniwindContext.scopedTheme ?? theme,
         hasAdaptiveThemes: uniwindContext.scopedTheme !== null ? false : hasAdaptiveThemes,
     }
 }

packages/uniwind/src/hooks/useUniwind.ts

@@ -0,0 +1,4 @@
+export type Equal<A, B> = (<T>() => T extends A ? 1 : 2) extends (<T>() => T extends B ? 1 : 2) ? true
+    : false
+
+export type Expect<T extends true> = Equal<T, true>

packages/uniwind/tests/type-test/checks.ts

@@ -0,0 +1,7 @@
+import 'uniwind'
+
+declare module 'uniwind' {
+    export interface UniwindConfig {
+        themes: readonly ['light', 'dark', 'premium', 'custom']
+    }
+}

packages/uniwind/tests/type-test/setup.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react'
+import { ScopedTheme, type ThemeName, Uniwind, useUniwind } from 'uniwind'
+import { type Equal, type Expect } from './checks'
+
+type ExpectedThemeName = 'light' | 'dark' | 'premium' | 'custom'
+
+// ThemeName exported from uniwind
+type ThemeNameTest = Expect<Equal<ThemeName, ExpectedThemeName>>
+
+// useUniwind.theme
+type UseUniwindThemeResult = ReturnType<typeof useUniwind>['theme']
+type UseUniwindTest = Expect<Equal<UseUniwindThemeResult, ExpectedThemeName>>
+
+// Uniwind.currentTheme
+type UniwindCurrentThemeTest = Expect<Equal<typeof Uniwind.currentTheme, ExpectedThemeName>>
+
+// Uniwind.themes
+type UniwindThemesTest = Expect<Equal<typeof Uniwind.themes, Array<ExpectedThemeName>>>
+
+// Uniwind.setTheme
+type UniwindSetThemeParameter = Parameters<typeof Uniwind.setTheme>[0]
+type UniwindSetThemeTest = Expect<Equal<UniwindSetThemeParameter, ExpectedThemeName | 'system'>>
+
+// Uniwind.updateCSSVariables
+type UniwindUpdateCSSVariablesThemeParameter = Parameters<typeof Uniwind.updateCSSVariables>[0]
+type UniwindUpdateCSSVariablesThemeTest = Expect<Equal<UniwindUpdateCSSVariablesThemeParameter, ExpectedThemeName>>
+
+// ScopedTheme theme prop
+type ScopedThemeThemeProp = ComponentProps<typeof ScopedTheme>['theme']
+type ScopedThemeThemePropTest = Expect<Equal<ScopedThemeThemeProp, ExpectedThemeName>>

packages/uniwind/tests/type-test/theme.ts

@@ -0,0 +1,15 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "noEmit": true,
+        "rootDir": ".",
+        "baseUrl": ".",
+        "paths": {
+            "uniwind": ["../../dist/module/index.d.ts"]
+        }
+    },
+    "include": [
+        "setup.d.ts",
+        "*.ts"
+    ]
+}

packages/uniwind/tests/type-test/tsconfig.json

@@ -14,17 +14,29 @@
         "//#check:format": {},
         "circular:check": {},
         "precommit": {
-            "dependsOn": ["lint", "check:typescript", "circular:check", "test:native", "test:web", "//#check:format"]
+            "dependsOn": [
+                "lint",
+                "check:typescript",
+                "circular:check",
+                "test:native",
+                "test:web",
+                "test:types",
+                "//#check:format"
+            ]
         },
         "test": {
-            "dependsOn": ["test:native", "test:web", "test:e2e"]
+            "dependsOn": ["test:native", "test:web", "test:types", "test:e2e"]
         },
         "test:native": {
             "cache": false
         },
         "test:web": {
             "cache": false
         },
+        "test:types": {
+            "dependsOn": ["build"],
+            "cache": false
+        },
         "test:e2e": {
             "cache": false
         }