fix: set default port to 3020

cli/dev/register.ts

@@ -7,15 +7,33 @@ import { getLocalFileDependencies } from "lib/dependency-analysis/getLocalFileDe
 import { installNodeModuleTypesForSnippet } from "../../lib/dependency-analysis/installNodeModuleTypesForSnippet"
 import { EventsWatcher } from "../../lib/server/EventsWatcher"
 import { DevServer } from "./DevServer"
+import * as net from "node:net"
 
 export const registerDev = (program: Command) => {
   program
     .command("dev")
     .description("Start development server for a snippet")
     .argument("[file]", "Path to the snippet file")
-    .option("-p, --port <number>", "Port to run server on", "3000")
+    .option("-p, --port <number>", "Port to run server on", "3020")
     .action(async (file: string, options: { port: string }) => {
-      const port = parseInt(options.port)
+      let port = parseInt(options.port)
+
+      const isPortAvailable = (port: number): Promise<boolean> => {
+        return new Promise((resolve) => {
+          const server = net.createServer()
+          server.once("error", () => resolve(false))
+          server.once("listening", () => {
+            server.close(() => resolve(true))
+          })
+          server.listen(port)
+        })
+      }
+
+      while (!(await isPortAvailable(port))) {
+        console.log(`Port ${port} is in use, trying port ${port + 1}...`)
+        port += 1
+      }
+
       let absolutePath: string
 
       if (file) {

lib/server/createHttpServer.ts

@@ -8,7 +8,7 @@ import pkg from "../../package.json"
 import winterspecBundle from "@tscircuit/file-server/dist/bundle.js"
 import { getIndex } from "../site/getIndex"
 
-export const createHttpServer = async (port = 3000) => {
+export const createHttpServer = async (port = 3020) => {
   const fileServerHandler = getNodeHandler(winterspecBundle as any, {})
 
   const server = http.createServer(async (req, res) => {

tests/test3-dev-server-port.test.ts

@@ -0,0 +1,36 @@
+import { test, expect, afterEach } from "bun:test"
+import { DevServer } from "cli/dev/DevServer"
+import { getTestFixture } from "tests/fixtures/get-test-fixture"
+import * as http from "node:http"
+
+test("test3 dev server port handling", async () => {
+  const { tempDirPath } = await getTestFixture({
+    vfs: {
+      "snippet.tsx": `
+      export const MyCircuit = () => (
+        <board width="10mm" height="10mm">
+          <chip name="U1" footprint="soic8" />
+        </board>
+      )
+      `,
+    },
+  })
+
+  const server = http.createServer(() => {}).listen(3020)
+
+  const devServer = new DevServer({
+    port: 3021,
+    componentFilePath: `${tempDirPath}/snippet.tsx`,
+  })
+  await devServer.start()
+
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+
+  const res = await fetch(`http://localhost:3021`)
+  expect(res.status).toBe(200)
+
+  afterEach(async () => {
+    server.close()
+    await devServer.stop()
+  })
+})