chore: move effects created outside render

src/App.tsx

@@ -43,7 +43,7 @@ export const App: ParentComponent = ({ children }) => {
 
       <div class="flex-1 overflow-y-auto p-2 sm:p-4">{children}</div>
 
-      <Show when={endpoint()}>
+      <Show when={!!endpoint()}>
         <ProtectedResources />
       </Show>
     </div>

src/pages/Config.tsx

@@ -1,10 +1,11 @@
 import { createForm } from '@felte/solid'
 import { validator } from '@felte/validator-zod'
-import type { Accessor, Component } from 'solid-js'
+import type { Accessor, Component, ParentComponent } from 'solid-js'
 import { toast } from 'solid-toast'
 import { z } from 'zod'
 import {
   fetchBackendConfigAPI,
+  fetchBackendVersionAPI,
   flushFakeIPDataAPI,
   flushingFakeIPData,
   isUpdateAvailableAPI,
@@ -37,11 +38,6 @@ import {
   useRequest,
   useTwemoji,
 } from '~/signals'
-import {
-  backendVersion,
-  isSingBox,
-  updateBackendVersion,
-} from '~/signals/version'
 import type { DNSQuery } from '~/types'
 
 const dnsQueryFormSchema = z.object({
@@ -113,7 +109,9 @@ const configFormSchema = z.object({
   'mixed-port': z.number(),
 })
 
-const ConfigForm = () => {
+const ConfigForm: ParentComponent<{ isSingBox: Accessor<boolean> }> = ({
+  isSingBox,
+}) => {
   const [t] = useI18n()
 
   const portList = [
@@ -180,9 +178,9 @@ const ConfigForm = () => {
     }
   })
 
-  const modes = () => {
-    return configsData()?.modes || ['rule', 'direct', 'global']
-  }
+  const modes = createMemo(
+    () => configsData()?.modes || ['rule', 'direct', 'global'],
+  )
 
   return (
     <div class="flex flex-col gap-4">
@@ -538,7 +536,12 @@ export default () => {
 
   const [t] = useI18n()
 
-  updateBackendVersion()
+  const [backendVersion, setBackendVersion] = createSignal('')
+  const isSingBox = createMemo(() => backendVersion().includes('sing-box'))
+
+  onMount(() => {
+    fetchBackendVersionAPI().then(setBackendVersion)
+  })
 
   return (
     <>
@@ -553,7 +556,7 @@ export default () => {
 
         <ConfigTitle withDivider>{t('coreConfig')}</ConfigTitle>
 
-        <ConfigForm />
+        <ConfigForm isSingBox={isSingBox} />
 
         <ConfigTitle withDivider>{t('xdConfig')}</ConfigTitle>
 

src/pages/Setup.tsx

@@ -28,7 +28,7 @@ export default () => {
 
   const onSetupSuccess = (id: string) => {
     setSelectedEndpoint(id)
-    navigate('/overview')
+    navigate('/overview', { replace: true })
   }
 
   const checkEndpoint = (url: string, secret: string) =>
@@ -50,13 +50,9 @@ export default () => {
   const onEndpointSelect = async (id: string) => {
     const endpoint = endpointList().find((e) => e.id === id)
 
-    if (!endpoint) {
-      return
-    }
+    if (!endpoint) return
 
-    if (!(await checkEndpoint(endpoint.url, endpoint.secret))) {
-      return
-    }
+    if (!(await checkEndpoint(endpoint.url, endpoint.secret))) return
 
     onSetupSuccess(id)
   }
@@ -64,9 +60,7 @@ export default () => {
   const onSubmit = async ({ url, secret }: { url: string; secret: string }) => {
     const transformedURL = transformEndpointURL(url)
 
-    if (!(await checkEndpoint(transformedURL, secret))) {
-      return
-    }
+    if (!(await checkEndpoint(transformedURL, secret))) return
 
     const id = uuid()
     const list = endpointList().slice()

src/signals/logs.ts

@@ -7,26 +7,26 @@ let seq = 1
 const [logs, setLogs] = createSignal<LogWithSeq[]>([])
 const [paused, setPaused] = createSignal(false)
 
-createEffect(
-  on(logLevel, (value, oldValue) => {
-    if (value === oldValue) return
-
-    const logsData = useWsRequest<Log>('logs', { level: logLevel() })
-
-    createEffect(() => {
-      const data = logsData()
-
-      if (!data || paused()) {
-        return
-      }
-
-      setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, logMaxRows()))
-      seq++
-    })
-  }),
-)
-
 export const useLogs = () => {
+  createEffect(
+    on(logLevel, (value, oldValue) => {
+      if (value === oldValue) return
+
+      const logsData = useWsRequest<Log>('logs', { level: logLevel() })
+
+      createEffect(() => {
+        const data = logsData()
+
+        if (!data || paused()) {
+          return
+        }
+
+        setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, logMaxRows()))
+        seq++
+      })
+    }),
+  )
+
   return {
     logs,
     paused,

src/signals/version.ts

@@ -1,9 +0,0 @@
-import { fetchBackendVersionAPI } from '~/apis'
-
-export const [backendVersion, setBackendVersion] = createSignal('')
-export const isSingBox = createMemo(() => {
-  return backendVersion().includes('sing-box')
-})
-export const updateBackendVersion = () => {
-  fetchBackendVersionAPI().then(setBackendVersion)
-}