implement seeding for dts

fake-snippets-api/lib/db/schema.ts

@@ -6,6 +6,7 @@ export const snippetSchema = z.object({
   unscoped_name: z.string(),
   owner_name: z.string(),
   code: z.string(),
+  dts: z.string().optional(),
   created_at: z.string(),
   updated_at: z.string(),
   snippet_type: z.enum(["board", "package", "model", "footprint"]),

fake-snippets-api/lib/db/seed.ts

@@ -35,6 +35,12 @@ export const A555Timer = ({ name }: { name: string }) => (
   <chip name={name} footprint="dip8" />
 )
 `.trim(),
+    dts: `
+export declare const A555Timer: ({ name }: {
+    name: string;
+}) => any;
+`.trim(),
+
     created_at: new Date().toISOString(),
     updated_at: new Date().toISOString(),
     snippet_type: "package",

fake-snippets-api/routes/api/snippets/get.ts

@@ -14,9 +14,7 @@ export default withRouteSpec({
   jsonBody: z.any().optional(),
   jsonResponse: z.object({
     ok: z.boolean(),
-    snippet: snippetSchema.extend({
-      snippet_type: z.enum(["board", "package", "model", "footprint"]),
-    }),
+    snippet: snippetSchema,
   }),
 })(async (req, ctx) => {
   const { snippet_id, name, owner_name, unscoped_name } = req.commonParams

fake-snippets-api/routes/api/snippets/update.ts

@@ -10,6 +10,7 @@ export default withRouteSpec({
     code: z.string().optional(),
     description: z.string().optional(),
     unscoped_name: z.string().optional(),
+    dts: z.string().optional(),
   }),
   jsonResponse: z.object({
     ok: z.boolean(),
@@ -18,7 +19,7 @@ export default withRouteSpec({
     }),
   }),
 })(async (req, ctx) => {
-  const { snippet_id, code, description, unscoped_name } = req.jsonBody
+  const { snippet_id, code, description, unscoped_name, dts } = req.jsonBody
 
   const snippetIndex = ctx.db.snippets.findIndex(
     (s) => s.snippet_id === snippet_id,
@@ -48,6 +49,7 @@ export default withRouteSpec({
     name: unscoped_name
       ? `${ctx.auth.github_username}/${unscoped_name}`
       : snippet.name,
+    dts: dts ?? snippet.dts,
     updated_at: new Date().toISOString(),
   }
 

src/components/CodeAndPreview.tsx

@@ -31,6 +31,7 @@ export function CodeAndPreview({ snippet }: Props) {
     return decodeUrlHashToText(window.location.toString()) ?? snippet?.code
   }, [])
   const [code, setCode] = useState(defaultCode ?? "")
+  const [dts, setDts] = useState("")
   const [showPreview, setShowPreview] = useState(true)
 
   useEffect(() => {
@@ -49,6 +50,7 @@ export function CodeAndPreview({ snippet }: Props) {
       const response = await axios.post("/snippets/update", {
         snippet_id: snippet.snippet_id,
         code: code,
+        dts: dts,
       })
       if (response.status !== 200) {
         throw new Error("Failed to save snippet")
@@ -103,6 +105,7 @@ export function CodeAndPreview({ snippet }: Props) {
           <CodeEditor
             code={code}
             onCodeChange={(newCode) => setCode(newCode)}
+            onDtsChange={(newDts) => setDts(newDts)}
           />
         </div>
         {showPreview && (

src/components/CodeEditor.tsx

@@ -18,52 +18,53 @@ import {
 import ts from "typescript"
 import { setupTypeAcquisition } from "@typescript/ata"
 import { ATABootstrapConfig } from "@typescript/ata"
+import { useAxios } from "@/hooks/use-axios"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 
 export const CodeEditor = ({
   onCodeChange,
+  onDtsChange,
   readOnly = false,
   code,
 }: {
   onCodeChange: (code: string) => void
+  onDtsChange?: (dts: string) => void
   code: string
   readOnly?: boolean
 }) => {
   const editorRef = useRef<HTMLDivElement>(null)
   const viewRef = useRef<EditorView | null>(null)
+  const apiUrl = useSnippetsBaseApiUrl()
 
   useEffect(() => {
     if (!editorRef.current) return
 
     const fsMap = new Map<string, string>()
     fsMap.set("index.tsx", code)
-    fsMap.set("package.json", `{"dependencies": {"react": "18.3.1"}}`)
-
-    //     fsMap.set(
-    //       "tscircuit-core.d.ts",
-    //       `
-
-    // declare global {
-    //   namespace JSX {
-    //     interface IntrinsicElements {
-    //       board: any
-    //     }
-    //   }
-    // }
-
-    // `.trim(),
-    //     )
 
     const system = createSystem(fsMap)
     const env = createVirtualTypeScriptEnvironment(system, [], ts, {
       jsx: ts.JsxEmit.ReactJSX,
+      declaration: true,
     })
 
     const ataConfig: ATABootstrapConfig = {
       projectName: "my-project",
       typescript: ts,
       logger: console,
-      fetcher: (input, init) => {
-        // TODO redirect @tsci/* stuff to our api registry
+      fetcher: (input: RequestInfo | URL, init?: RequestInit) => {
+        const registryPrefix =
+          "https://data.jsdelivr.com/v1/package/resolve/npm/@tsci/"
+        if (typeof input === "string" && input.startsWith(registryPrefix)) {
+          const fullPackageName = input.split(registryPrefix)[1]
+          // TODO: Implement redirection to our API registry for @tsci/* packages
+          // For now, we'll just log the package name
+          console.log(`Intercepted @tsci package: ${fullPackageName}`)
+          return fetch(
+            `${apiUrl}/snippets/download?path=${encodeURIComponent(fullPackageName)}`,
+          )
+        }
+        // For all other cases, proceed with the original fetch
         return fetch(input, init)
       },
       delegate: {
@@ -78,6 +79,7 @@ export const CodeEditor = ({
     ata(`
 import React from "@types/react"
 import { Circuit } from "@tscircuit/core"
+${code}
 `)
 
     const state = EditorState.create({
@@ -93,6 +95,18 @@ import { Circuit } from "@tscircuit/core"
         EditorView.updateListener.of((update) => {
           if (update.docChanged) {
             onCodeChange(update.state.doc.toString())
+
+            const { outputFiles } = env.languageService.getEmitOutput(
+              "index.tsx",
+              true,
+            )
+
+            const indexDts = outputFiles.find(
+              (file) => file.name === "index.d.ts",
+            )
+            if (indexDts?.text && onDtsChange) {
+              onDtsChange(indexDts.text)
+            }
           }
         }),
         EditorState.readOnly.of(readOnly),