tweaking dev reload server

pydantic · Nov 17, 2023 · 8db3960 · 8db3960
1 parent d9b6759
commit 8db3960
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 22 deletions.
diff --git a/demo/server.py b/demo/server.py
@@ -13,6 +13,7 @@
 from fastui.display import Display
 from fastui.events import PageEvent, GoToEvent
 
+# app = FastAPI()
 app = dev_fastapi_app()
 
 

diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -3,7 +3,7 @@ import { FastUI, ClassNameGenerator, CustomRender } from 'fastui'
 export default function App() {
   return (
     <div className="app">
-      <FastUI rootUrl="/api" classNameGenerator={bootstrapClassName} customRender={customRender} dev />
+      <FastUI rootUrl="/api" classNameGenerator={bootstrapClassName} customRender={customRender} />
     </div>
   )
 }

diff --git a/react/fastui/hooks/dev.tsx b/react/fastui/hooks/dev.tsx
@@ -1,47 +1,64 @@
-import { createContext, FC, ReactNode, useEffect, useState } from 'react'
+import { createContext, FC, ReactNode, useContext, useEffect, useState } from 'react'
+
+import { ErrorContext } from './error'
 
 export const ReloadContext = createContext<number>(0)
 let devConnected = false
 
-export const DevReloadProvider: FC<{ children: ReactNode; enabled: boolean }> = ({ children, enabled }) => {
+export const DevReloadProvider: FC<{ children: ReactNode; enabled?: boolean }> = ({ children, enabled }) => {
   const [value, setValue] = useState<number>(0)
+  const { setError } = useContext(ErrorContext)
+  if (typeof enabled === 'undefined') {
+    enabled = process.env.NODE_ENV === 'development'
+  }
 
   useEffect(() => {
     let listening = true
     async function listen() {
+      let count = 0
       let failCount = 0
+      // this avoids connecting twice when vite is reloading
+      await sleep(100)
       while (true) {
+        if (!listening || failCount >= 5) {
+          return count
+        }
         const response = await fetch('/api/__dev__/reload')
+        count++
+        console.debug(`dev reload connected ${count}...`)
+        // if the response is okay, and we previously failed, clear error
+        if (response.ok && failCount > 0) {
+          setError(null)
+        }
         // await like this means we wait for the entire response to be received
         const text = await response.text()
         const value = parseInt(text.replace(/\./g, '')) || 0
-        if (response.ok) {
+        if (response.status === 404) {
+          console.log('dev reload endpoint not found, disabling dev reload')
+          return count
+        } else if (response.ok) {
           failCount = 0
+          // wait long enough for the server to be back online
+          await sleep(300)
+          console.debug('dev reloading')
+          setValue(value)
+          setError(null)
         } else {
           failCount++
+          await sleep(2000)
         }
-        // wait long enough for the server to be back online
-        await sleep(500)
-        if (!listening || failCount >= 4) {
-          return value
-        }
-        console.debug('dev reload...')
-        setValue(value)
       }
     }
 
     if (enabled && !devConnected) {
       devConnected = true
-      listen().then((value) => {
-        console.debug('dev reload disconnected.')
-        setValue(value)
-      })
+      listen().then((count) => count > 0 && console.debug('dev reload disconnected.'))
       return () => {
         listening = false
         devConnected = false
       }
     }
-  }, [enabled])
+  }, [enabled, setError])
 
   return <ReloadContext.Provider value={value}>{children}</ReloadContext.Provider>
 }

diff --git a/react/fastui/index.tsx b/react/fastui/index.tsx
@@ -19,24 +19,25 @@ export interface FastUIProps {
   DisplayError?: ErrorDisplayType
   classNameGenerator?: ClassNameGenerator
   customRender?: CustomRender
-  dev?: boolean
+  // defaults to `process.env.NODE_ENV === 'development'
+  devMode?: boolean
 }
 
 export function FastUI(props: FastUIProps) {
-  const { classNameGenerator, DisplayError, customRender, dev, ...rest } = props
+  const { classNameGenerator, DisplayError, customRender, devMode, ...rest } = props
   return (
     <div className="fastui">
-      <DevReloadProvider enabled={dev ?? false}>
-        <ErrorContextProvider DisplayError={DisplayError}>
+      <ErrorContextProvider DisplayError={DisplayError}>
+        <DevReloadProvider enabled={devMode}>
           <LocationProvider>
             <ClassNameContext.Provider value={classNameGenerator ?? null}>
               <CustomRenderContext.Provider value={customRender ?? null}>
                 <FastUIController {...rest} />
               </CustomRenderContext.Provider>
             </ClassNameContext.Provider>
           </LocationProvider>
-        </ErrorContextProvider>
-      </DevReloadProvider>
+        </DevReloadProvider>
+      </ErrorContextProvider>
     </div>
   )
 }