@tscircuit/cli 0.0.39 → 0.0.41

package/dev-server-api/routes/api/dev_package_examples/create.ts

@@ -9,6 +9,7 @@ export default withEdgeSpec({
     export_name: z.string().default("default"),
     tscircuit_soup: z.any(),
     error: z.string().nullable().optional().default(null),
+    is_loading: z.boolean().optional(),
   }),
   jsonResponse: z.object({
     dev_package_example: z.object({
@@ -31,6 +32,7 @@ export default withEdgeSpec({
       export_name: req.jsonBody.export_name,
       error: req.jsonBody.error,
       tscircuit_soup,
+      is_loading: req.jsonBody.is_loading ? 1 : 0,
       last_updated_at: new Date().toISOString(),
     })
     .onConflict((oc) =>
@@ -38,6 +40,7 @@ export default withEdgeSpec({
         export_name: req.jsonBody.export_name,
         error: req.jsonBody.error,
         tscircuit_soup,
+        is_loading: req.jsonBody.is_loading ? 1 : 0,
         last_updated_at: new Date().toISOString(),
       })
     )

package/dev-server-api/routes/api/dev_package_examples/get.ts

@@ -12,6 +12,7 @@ export default withEdgeSpec({
       dev_package_example_id: z.coerce.number(),
       file_path: z.string(),
       tscircuit_soup: z.any(),
+      is_loading: z.boolean(),
       error: z.string().nullable().optional().default(null),
       last_updated_at: z.string().datetime(),
     }),
@@ -32,6 +33,7 @@ export default withEdgeSpec({
       })
       .then((r) => ({
         ...r,
+        is_loading: r.is_loading === 1,
         tscircuit_soup: JSON.parse(r.tscircuit_soup),
       })),
   })

package/dev-server-api/routes/api/dev_package_examples/list.ts

@@ -1,3 +1,4 @@
+import { sql } from "kysely"
 import { withEdgeSpec } from "src/with-edge-spec"
 import { z } from "zod"
 
@@ -9,21 +10,24 @@ export default withEdgeSpec({
         dev_package_example_id: z.coerce.number(),
         file_path: z.string(),
         export_name: z.string(),
+        is_loading: z.coerce.boolean(),
         last_updated_at: z.string().datetime(),
       })
     ),
   }),
   auth: "none",
 })(async (req, ctx) => {
+  const dev_package_examples = await ctx.db
+    .selectFrom("dev_package_example")
+    .select([
+      "dev_package_example_id",
+      "file_path",
+      "export_name",
+      "last_updated_at",
+      sql`(is_loading = 1)`.$castTo<boolean>().as("is_loading"),
+    ])
+    .execute()
   return ctx.json({
-    dev_package_examples: await ctx.db
-      .selectFrom("dev_package_example")
-      .select([
-        "dev_package_example_id",
-        "file_path",
-        "export_name",
-        "last_updated_at",
-      ])
-      .execute(),
+    dev_package_examples,
   })
 })

package/dev-server-api/routes/api/dev_server/reset.ts

@@ -0,0 +1,15 @@
+import { sql } from "kysely"
+import { withEdgeSpec } from "src/with-edge-spec"
+import { z } from "zod"
+import { unlinkSync } from "fs"
+import { getDbFilePath } from "src/db/get-db"
+
+export default (req: Request) => {
+  unlinkSync(getDbFilePath())
+
+  return new Response(JSON.stringify({}), {
+    headers: {
+      "content-type": "application/json",
+    },
+  })
+}

package/dev-server-api/src/db/create-schema.ts

@@ -10,6 +10,7 @@ export const createSchema = async (db: DbClient) => {
     .addColumn("export_name", "text")
     .addColumn("tscircuit_soup", "json")
     .addColumn("error", "text")
+    .addColumn("is_loading", "boolean", (cb) => cb.defaultTo(0).notNull())
     .addColumn("last_updated_at", "text")
     .execute()
 }

package/dev-server-api/src/db/get-db.ts

@@ -9,6 +9,7 @@ interface DevPackageExample {
   file_path: string
   export_name: string
   error: string | null
+  is_loading: 1 | 0
   last_updated_at: string
 }
 
@@ -22,11 +23,13 @@ export type DbClient = Kysely<KyselyDatabaseSchema>
 
 let globalDb: Kysely<KyselyDatabaseSchema> | undefined
 
+export const getDbFilePath = () =>
+  process.env.TSCI_DEV_SERVER_DB ?? "./.tscircuit/dev-server.sqlite"
+
 export const getDb = async (): Promise<Kysely<KyselyDatabaseSchema>> => {
   if (globalDb) return globalDb
 
-  const devServerDbPath =
-    process.env.TSCI_DEV_SERVER_DB ?? "./.tscircuit/dev-server.db"
+  const devServerDbPath = getDbFilePath()
 
   mkdirSync(Path.dirname(devServerDbPath), { recursive: true })
 

package/dev-server-api/src/middlewares/with-error-response.ts

@@ -1,15 +1,28 @@
-import type { Middleware } from "edgespec/middleware"
+import { NotFoundError, type Middleware } from "edgespec/middleware"
 import kleur from "kleur"
 
 export const withErrorResponse: Middleware<{}, {}> = async (req, ctx, next) => {
   try {
     return await next(req, ctx)
   } catch (error: any) {
-    console.error(kleur.red("Intercepted error:"), error)
     // If error is a Response, return it
     if (error instanceof Response) {
       return error
     }
+    if (error instanceof NotFoundError) {
+      return (ctx as any).json(
+        {
+          ok: false,
+          error: {
+            message: error?.message,
+            error_code: "not_found",
+          },
+        },
+        { status: error?.status || 404 }
+      )
+    }
+
+    console.error(kleur.red("Intercepted unhandled error:"), error)
     return (ctx as any).json(
       {
         ok: false,

package/dev-server-frontend/package.json

@@ -12,7 +12,8 @@
     "start": "npm run dev",
     "build": "tsc && vite build --base /preview && rm -f dist/bundle* && make-vfs --dir dist --outfile ./dist/bundle.ts",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 10",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "update-deps": "bun add @tscircuit/pcb-viewer@latest @tscircuit/builder@latest @tscircuit/schematic-viewer@latest"
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -28,9 +29,9 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tscircuit/builder": "^1.5.5",
-    "@tscircuit/pcb-viewer": "^1.2.12",
-    "@tscircuit/schematic-viewer": "^1.1.7",
+    "@tscircuit/builder": "latest",
+    "@tscircuit/pcb-viewer": "latest",
+    "@tscircuit/schematic-viewer": "latest",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

package/dev-server-frontend/src/ExampleContentView.tsx

@@ -10,7 +10,12 @@ export const ExampleContentView = () => {
     (s) => s.active_dev_example_package_id
   )
 
-  const { data: pkg } = useQuery(
+  const {
+    data: pkg,
+    error,
+    isError,
+    isLoading,
+  } = useQuery(
     ["dev_package_example", devExamplePackageId],
     async () =>
       axios
@@ -20,9 +25,12 @@ export const ExampleContentView = () => {
         .then((r) => r.data.dev_package_example),
     {
       refetchIntervalInBackground: true,
+      retry: false,
     }
   )
 
+  const notFound = (error as any)?.response?.status === 404
+
   const viewMode = useGlobalStore((s) => s.view_mode)
   const splitMode = useGlobalStore((s) => s.split_mode)
 
@@ -44,6 +52,26 @@ export const ExampleContentView = () => {
         viewMode === "split" && splitMode === "vertical" && "grid grid-rows-2"
       )}
     >
+      {notFound && (
+        <div className="absolute top-0 w-full flex justify-center">
+          <div className="bg-yellow-50 shadow-lg p-4 m-16 border-yellow-200 border rounded-lg whitespace-pre max-w-[400px]">
+            Select an example from the menu above
+          </div>
+        </div>
+      )}
+      {isLoading && !isError && (
+        <div className="absolute top-0 w-full flex justify-center">
+          <div className="bg-gray-50 shadow-lg p-4 m-16 border-gray-200 border rounded-lg whitespace-pre">
+            Loading...
+          </div>
+        </div>
+      )}
+      {pkg && pkg.is_loading && (
+        <div className="absolute top-0 right-0 bg-white p-4 py-2 m-4 rounded-md flex items-center z-10 shadow-lg border border-gray-200">
+          <div className="border-2 border-blue-400 border-t-transparent rounded-full w-4 h-4 animate-spin mr-2"></div>
+          Rebuilding...
+        </div>
+      )}
       {pkg && (viewMode === "schematic" || viewMode === "split") && (
         <Schematic
           key={pkg?.last_updated_at}

package/dev-server-frontend/src/components/command-k.tsx

@@ -9,6 +9,8 @@ import {
   CommandShortcut,
 } from "./ui/command"
 import { useGlobalStore } from "src/hooks/use-global-store"
+import { useDevPackageExamples } from "./select-example-search"
+import { CommandSeparator } from "cmdk"
 
 export const CommandK = () => {
   const [open, setOpen] = useState(false)
@@ -19,23 +21,28 @@ export const CommandK = () => {
         e.preventDefault()
         setOpen((open) => !open)
       }
+      if (e.key === "Escape") {
+        setOpen(false)
+      }
     }
 
     document.addEventListener("keydown", down)
     return () => document.removeEventListener("keydown", down)
   }, [])
 
+  const { data: examples } = useDevPackageExamples()
+
   const close = () => {
     setOpen(false)
     return true
   }
 
   return (
-    <CommandDialog open={open}>
+    <CommandDialog open={open} onOpenChange={(open) => setOpen(open)}>
       <Command className="rounded-lg border shadow-md">
         <CommandInput placeholder="Type a command or search..." />
-        <CommandGroup>
-          <CommandList>
+        <CommandList>
+          <CommandGroup heading="Viewing Options">
             <CommandItem
               onSelect={() => close() && store.setViewMode("schematic")}
             >
@@ -54,8 +61,25 @@ export const CommandK = () => {
               Vertical Split
               <CommandShortcut></CommandShortcut>
             </CommandItem>
-          </CommandList>
-        </CommandGroup>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Examples">
+            {examples?.map((ex) => (
+              <CommandItem
+                key={ex.dev_package_example_id}
+                value={ex.expath}
+                onSelect={() =>
+                  close() &&
+                  store.setActiveDevExamplePackageId(
+                    ex.dev_package_example_id.toString()
+                  )
+                }
+              >
+                {ex.expath}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </CommandList>
       </Command>
     </CommandDialog>
   )