feat(packages/tuono): improve TuonoRouteProps type (#648)

e2e/fixtures/base/src/routes/index.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from 'react'
-import type { TuonoProps } from 'tuono'
+import type { TuonoRouteProps } from 'tuono'
 import { Link } from 'tuono'
 
 interface IndexProps {
@@ -9,7 +9,7 @@ interface IndexProps {
 export default function IndexPage({
   data,
   isLoading,
-}: TuonoProps<IndexProps>): JSX.Element {
+}: TuonoRouteProps<IndexProps>): JSX.Element {
   if (isLoading) {
     return <h1>Loading...</h1>
   }
@@ -17,8 +17,8 @@ export default function IndexPage({
   return (
     <>
       <h1>TUONO</h1>
-      <h2>{data?.subtitle}</h2>
+      <h2>{data.subtitle}</h2>
-      <Link href={'/second-route'}>Routing link</Link>)
+      <Link href={'/second-route'}>Routing link</Link>
     </>
   )
 }

examples/tuono-app/src/routes/index.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from 'react'
-import type { TuonoProps } from 'tuono'
+import type { TuonoRouteProps } from 'tuono'
 
 interface IndexProps {
   subtitle: string
@@ -8,7 +8,7 @@ interface IndexProps {
 export default function IndexPage({
   data,
   isLoading,
-}: TuonoProps<IndexProps>): JSX.Element {
+}: TuonoRouteProps<IndexProps>): JSX.Element {
   if (isLoading) {
     return <h1>Loading...</h1>
   }

examples/tuono-tutorial/src/routes/index.tsx

@@ -1,6 +1,6 @@
 // src/routes/index.tsx
 import type { JSX } from 'react'
-import type { TuonoProps } from 'tuono'
+import type { TuonoRouteProps } from 'tuono'
 
 import PokemonLink from '../components/PokemonLink'
 
@@ -10,7 +10,7 @@ interface IndexProps {
 
 export default function IndexPage({
   data,
-}: TuonoProps<IndexProps>): JSX.Element | null {
+}: TuonoRouteProps<IndexProps>): JSX.Element | null {
   if (!data?.results) return null
 
   return (

examples/tuono-tutorial/src/routes/pokemons/[pokemon].tsx

@@ -1,6 +1,6 @@
 // src/routes/pokemons/[pokemon].tsx
 import type { JSX } from 'react'
-import type { TuonoProps } from 'tuono'
+import type { TuonoRouteProps } from 'tuono'
 import { Link } from 'tuono'
 
 import PokemonView from '../../components/PokemonView'
@@ -15,7 +15,7 @@ interface Pokemon {
 export default function PokemonPage({
   isLoading,
   data,
-}: TuonoProps<Pokemon>): JSX.Element {
+}: TuonoRouteProps<Pokemon>): JSX.Element {
   return (
     <div>
       <Link href="/">Back</Link>

packages/tuono/src/index.ts

@@ -13,4 +13,4 @@ export {
 
 export { TuonoScripts } from './shared/TuonoScripts'
 
-export type { TuonoProps } from './types'
+export type { TuonoRouteProps } from './types'

packages/tuono/src/types.spec-d.ts

@@ -0,0 +1,33 @@
+import { describe, it, expectTypeOf } from 'vitest'
+
+import type { TuonoRouteProps } from './types'
+
+describe('TuonoRouteProps', () => {
+  interface MyData {
+    something: string
+  }
+
+  type RouteProps = TuonoRouteProps<MyData>
+
+  it('should have correct union types', () => {
+    expectTypeOf<RouteProps>()
+      .toHaveProperty('isLoading')
+      .toEqualTypeOf<boolean>()
+
+    expectTypeOf<RouteProps>()
+      .toHaveProperty('data')
+      .toEqualTypeOf<null | MyData>()
+  })
+
+  it('should correctly infer `data` based upon `isLoading`', () => {
+    expectTypeOf<RouteProps>()
+      .extract<{ isLoading: true }>()
+      .toHaveProperty('data')
+      .toEqualTypeOf<null>()
+
+    expectTypeOf<RouteProps>()
+      .extract<{ isLoading: false }>()
+      .toHaveProperty('data')
+      .toEqualTypeOf<MyData>()
+  })
+})

packages/tuono/src/types.ts

@@ -47,7 +47,12 @@ export interface ServerPayload<TData = unknown> {
 )
 */
 
-export interface TuonoProps<T> {
+export type TuonoRouteProps<TData> =
-  data?: T
+  | {
-  isLoading: boolean
+      data: null
-}
+      isLoading: true
+    }
+  | {
+      data: TData
+      isLoading: false
+    }

packages/tuono/vite.config.ts

@@ -12,6 +12,12 @@ export default mergeConfig(
      */
     build: { target: 'es2022' },
     plugins: [react()],
+
+    test: {
+      typecheck: {
+        enabled: true,
+      },
+    },
   }),
   defineViteConfig({
     entry: [