refactor: refine ServerPayload type using a union with mode as discriminant (#701)

packages/tuono/src/shared/DevResources.tsx

@@ -1,12 +1,17 @@
 import type { JSX } from 'react'
 
-import { useTuonoContextServerPayload } from './TuonoContext'
+import type { TuonoConfigServer } from '../config'
 
 const VITE_PROXY_PATH = '/vite-server'
 const DEFAULT_SERVER_CONFIG = { host: 'localhost', origin: null, port: 3000 }
 
-export const DevResources = (): JSX.Element => {
-  const { devServerConfig } = useTuonoContextServerPayload()
+interface DevResourcesProps {
+  devServerConfig?: TuonoConfigServer
+}
+
+export const DevResources = ({
+  devServerConfig,
+}: DevResourcesProps): JSX.Element => {
   const { host, origin, port } = devServerConfig ?? DEFAULT_SERVER_CONFIG
 
   const viteBaseUrl =

packages/tuono/src/shared/ProdResources.tsx

@@ -1,10 +1,14 @@
 import type { JSX } from 'react'
 
-import { useTuonoContextServerPayload } from './TuonoContext'
-
-export const ProdResources = (): JSX.Element => {
-  const { cssBundles, jsBundles } = useTuonoContextServerPayload()
+interface ProdResourcesProps {
+  jsBundles: Array<string> | null
+  cssBundles: Array<string> | null
+}
 
+export const ProdResources = ({
+  cssBundles,
+  jsBundles,
+}: ProdResourcesProps): JSX.Element => {
   return (
     <>
       {cssBundles?.map((cssHref) => (

packages/tuono/src/shared/TuonoScripts.tsx

@@ -12,8 +12,15 @@ export function TuonoScripts(): JSX.Element {
   return (
     <>
       <script>{`window['${SERVER_PAYLOAD_VARIABLE_NAME}']=${JSON.stringify(serverPayload)}`}</script>
-      {serverPayload.mode === 'Dev' && <DevResources />}
-      {serverPayload.mode === 'Prod' && <ProdResources />}
+      {serverPayload.mode === 'Dev' && (
+        <DevResources devServerConfig={serverPayload.devServerConfig} />
+      )}
+      {serverPayload.mode === 'Prod' && (
+        <ProdResources
+          jsBundles={serverPayload.jsBundles}
+          cssBundles={serverPayload.cssBundles}
+        />
+      )}
     </>
   )
 }

packages/tuono/src/types.ts

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react'
 
+import type { TuonoConfigServer } from './config'
+
 /**
  * Provided by the rust server and used in the ssr env
  * @see tuono-router {@link ServerInitialLocation}
@@ -13,27 +15,11 @@ export interface ServerPayloadLocation {
 /**
  * @see crates/tuono_lib/src/payload.rs
  */
-export interface ServerPayload<TData = unknown> {
-  mode: 'Prod' | 'Dev'
-
+export type ServerPayload<TData = unknown> = {
   location: ServerPayloadLocation
 
   data: TData
-
-  /** Available only on 'Prod' mode */
-  jsBundles: Array<string> | null
-  cssBundles: Array<string> | null
-
-  /** Available only on 'Dev' mode */
-  devServerConfig?: {
-    port: number
-    origin: string | null
-    host: string
-  }
-}
-
-/* the above type could be refined with an union like this
-(
+} & (
   | {
       mode: 'Prod'
       jsBundles: Array<string>
@@ -41,13 +27,9 @@ export interface ServerPayload<TData = unknown> {
     }
   | {
       mode: 'Dev'
-      devServerConfig: {
-        port: number
-        host: string
-      }
+      devServerConfig?: TuonoConfigServer
     }
 )
-*/
 
 export type TuonoRouteProps<TData> =
   | {