fix: resolve lint issues and migrate dev server to esm

Author: liueic

dev-server.js

@@ -0,0 +1,133 @@
+import { createServer } from 'node:http';
+import { createServer as createHttpsServer } from 'node:https';
+import { readFileSync } from 'node:fs';
+import { networkInterfaces } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath, parse } from 'node:url';
+import next from 'next';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const dev = process.env.NODE_ENV !== 'production';
+const hostname = process.env.HOSTNAME || '0.0.0.0';
+const port = Number.parseInt(process.env.PORT ?? '3000', 10) || 3000;
+const useHttps = process.env.HTTPS === 'true';
+
+const app = next({ dev, hostname, port });
+const handle = app.getRequestHandler();
+
+function getLocalIP() {
+  const interfaces = networkInterfaces();
+
+  const priorityPrefixes = [
+    'wlp',
+    'wlan',
+    'wlx',
+    'enp',
+    'eth',
+    'ens',
+  ];
+
+  const skipPrefixes = ['br-', 'docker', 'veth', 'virbr', 'lo'];
+
+  for (const prefix of priorityPrefixes) {
+    for (const [name, entries] of Object.entries(interfaces)) {
+      if (!name.startsWith(prefix) || !entries) {
+        continue;
+      }
+
+      for (const iface of entries) {
+        if (iface.family === 'IPv4' && !iface.internal) {
+          return iface.address;
+        }
+      }
+    }
+  }
+
+  for (const [name, entries] of Object.entries(interfaces)) {
+    if (!entries || skipPrefixes.some((prefix) => name.startsWith(prefix))) {
+      continue;
+    }
+
+    for (const iface of entries) {
+      if (iface.family === 'IPv4' && !iface.internal) {
+        return iface.address;
+      }
+    }
+  }
+
+  for (const entries of Object.values(interfaces)) {
+    if (!entries) {
+      continue;
+    }
+
+    for (const iface of entries) {
+      if (iface.family === 'IPv4' && !iface.internal) {
+        return iface.address;
+      }
+    }
+  }
+
+  return '127.0.0.1';
+}
+
+async function main() {
+  await app.prepare();
+
+  const server = useHttps
+    ? createHttpsServer(
+        {
+          key: readFileSync(
+            path.join(__dirname, 'certificates', 'localhost-key.pem')
+          ),
+          cert: readFileSync(
+            path.join(__dirname, 'certificates', 'localhost.pem')
+          ),
+        },
+        async (req, res) => {
+          try {
+            const parsedUrl = parse(req.url ?? '/', true);
+            await handle(req, res, parsedUrl);
+          } catch (error) {
+            console.error('Error occurred handling', req.url, error);
+            res.statusCode = 500;
+            res.end('internal server error');
+          }
+        }
+      )
+    : createServer(async (req, res) => {
+        try {
+          const parsedUrl = parse(req.url ?? '/', true);
+          await handle(req, res, parsedUrl);
+        } catch (error) {
+          console.error('Error occurred handling', req.url, error);
+          res.statusCode = 500;
+          res.end('internal server error');
+        }
+      });
+
+  server.listen(port, hostname, (error) => {
+    if (error) {
+      throw error;
+    }
+
+    if (useHttps) {
+      console.log(
+        `\n🔒 HTTPS 开发服务器已启动！\n` +
+          `   本地访问: https://localhost:${port}\n` +
+          `   局域网访问: https://${getLocalIP()}:${port}\n` +
+          '   (请在局域网设备上信任此自签名证书)\n'
+      );
+      return;
+    }
+
+    console.log(
+      `\n🚀 HTTP 开发服务器已启动！\n` +
+        `   本地访问: http://localhost:${port}\n` +
+        `   局域网访问: http://${getLocalIP()}:${port}\n`
+    );
+  });
+}
+
+void main();

dev-server.mjs

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "NODE_ENV=development node dev-server.js",
-    "dev:https": "HTTPS=true NODE_ENV=development node dev-server.js",
+    "dev": "NODE_ENV=development node dev-server.mjs",
+    "dev:https": "HTTPS=true NODE_ENV=development node dev-server.mjs",
     "dev:legacy": "next dev -H 0.0.0.0",
     "build": "next build",
     "start": "next start -H 0.0.0.0",

package.json

@@ -1,23 +1,43 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useSyncExternalStore } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useChatStore } from '@/store/useChatStore';
 import WelcomeModal from '@/components/WelcomeModal';
 import ChatInterface from '@/components/ChatInterface';
 
+function subscribeToHydration(onStoreChange: () => void) {
+  const unsubscribeHydrate = useChatStore.persist.onHydrate(onStoreChange);
+  const unsubscribeFinishHydration =
+    useChatStore.persist.onFinishHydration(onStoreChange);
+
+  return () => {
+    unsubscribeHydrate();
+    unsubscribeFinishHydration();
+  };
+}
+
 export default function Home() {
-  const { hasAgreed, initUser } = useChatStore();
-  const [isMounted, setIsMounted] = useState(false);
+  const hasAgreed = useChatStore((state) => state.hasAgreed);
+  const initUser = useChatStore((state) => state.initUser);
+  const isHydrated = useSyncExternalStore(
+    subscribeToHydration,
+    () => useChatStore.persist.hasHydrated(),
+    () => false
+  );
+
+  useEffect(() => {
+    void useChatStore.persist.rehydrate();
+  }, []);
 
   useEffect(() => {
-    useChatStore.persist.rehydrate();
-    initUser();
-    setIsMounted(true);
-  }, [initUser]);
+    if (isHydrated) {
+      initUser();
+    }
+  }, [initUser, isHydrated]);
 
   // Prevent hydration mismatch by not rendering until client-side
-  if (!isMounted) {
+  if (!isHydrated) {
     return <div className="h-screen w-screen bg-stone-50" />;
   }
 
@@ -46,4 +66,4 @@ export default function Home() {
       </AnimatePresence>
     </main>
   );
-}
+}

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useChatStore, ChatSession } from '@/store/useChatStore';
+import { useChatStore } from '@/store/useChatStore';
 import { Plus, MessageSquare, Trash2, X } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { cn } from '@/lib/utils';

src/components/Sidebar.tsx

@@ -10,7 +10,8 @@ export function generateUUID() {
     return crypto.randomUUID();
   }
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+    const r = Math.random() * 16 | 0;
+    const v = c == 'x' ? r : (r & 0x3 | 0x8);
     return v.toString(16);
   });
 }

src/lib/utils.ts

@@ -54,7 +54,7 @@ export const useChatStore = create<ChatState>()(
       initUser: () => {
         const { userId, sessions, activeSessionId } = get();
 
-        let newState: Partial<ChatState> = {};
+        const newState: Partial<ChatState> = {};
 
         if (!userId) {
           newState.userId = generateUUID();