import snippets from registry to development server (#423)

* import snippets from registry to development server

* only run in development

* only log on failed import

* added env variable to dev script

* used redaxios

fake-snippets-api/lib/db/autoload-dev-snippets.ts

@@ -0,0 +1,84 @@
+import axios from "redaxios"
+import fs from "fs"
+import path from "path"
+import { DbClient } from "./db-client"
+
+const extractTsciDependencies = (
+  code: string,
+): Array<{ owner: string; name: string }> => {
+  const regex = /@tsci\/([^.]+)\.([^"'\s]+)/g
+  const matches = Array.from(code.matchAll(regex))
+  return matches.map((match) => ({
+    owner: match[1],
+    name: match[2],
+  }))
+}
+
+const registryApi = axios.create({
+  baseURL: "https://registry-api.tscircuit.com",
+  headers: {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  },
+})
+
+const fetchSnippetFromRegistry = async (owner: string, name: string) => {
+  const response = await registryApi.get(
+    `/snippets/get?owner_name=${owner}&unscoped_name=${name}`,
+  )
+  return response.data.snippet
+}
+
+const loadSnippetWithDependencies = async (
+  db: DbClient,
+  owner: string,
+  name: string,
+  loadedSnippets = new Set<string>(),
+) => {
+  const snippetKey = `${owner}/${name}`
+  if (loadedSnippets.has(snippetKey)) {
+    return
+  }
+
+  try {
+    const snippet = await fetchSnippetFromRegistry(owner, name)
+
+    if (db.getSnippetByAuthorAndName(owner, name)) return
+
+    db.addSnippet(snippet)
+    loadedSnippets.add(snippetKey)
+
+    const dependencies = extractTsciDependencies(snippet.code)
+    for (const dep of dependencies) {
+      loadSnippetWithDependencies(db, dep.owner, dep.name, loadedSnippets)
+    }
+  } catch (e) {
+    console.error(`✗ Failed to load ${snippetKey}:`, e)
+  }
+}
+
+export const loadAutoloadSnippets = async (db: DbClient) => {
+  try {
+    const autoloadPath = path.join(
+      path.dirname(__dirname),
+      "db",
+      "autoload-snippets.json",
+    )
+    if (fs.existsSync(autoloadPath)) {
+      const autoloadContent = JSON.parse(fs.readFileSync(autoloadPath, "utf8"))
+      console.log("Loading development snippets from registry...")
+
+      const loadedSnippets = new Set<string>()
+      for (const snippetRef of autoloadContent.snippets) {
+        loadSnippetWithDependencies(
+          db,
+          snippetRef.owner,
+          snippetRef.name,
+          loadedSnippets,
+        )
+      }
+    }
+  } catch (e) {
+    console.error("Failed to load autoload-snippets.json:", e)
+  }
+}

fake-snippets-api/lib/db/autoload-snippets.json

@@ -0,0 +1,24 @@
+{
+  "snippets": [
+    {
+      "owner": "Abse2001",
+      "name": "Arduino-Nano-Servo-Breakout"
+    },
+    {
+      "owner": "ShiboSoftwareDev",
+      "name": "Wifi-Camera-Module"
+    },
+    {
+      "owner": "imrishabh18",
+      "name": "Arduino-nano"
+    },
+    {
+      "owner": "seveibar",
+      "name": "usb-c-flashlight"
+    },
+    {
+      "owner": "AnasSarkiz",
+      "name": "grid-of-LEDs-with-an-ESP32"
+    }
+  ]
+}

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

@@ -1,4 +1,5 @@
-import type { DbClient } from "./db-client"
+import { DbClient } from "./db-client"
+import { loadAutoloadSnippets } from "./autoload-dev-snippets"
 
 export const seed = (db: DbClient) => {
   const { account_id } = db.addAccount({
@@ -20,6 +21,11 @@ export const seed = (db: DbClient) => {
   db.addAccount({
     github_username: "seveibar",
   })
+
+  if (process.env.AUTOLOAD_SNIPPETS === "true") {
+    loadAutoloadSnippets(db)
+  }
+
   db.addSnippet({
     name: "testuser/my-test-board",
     unscoped_name: "my-test-board",

package.json

@@ -13,7 +13,7 @@
     "playwright": "bunx playwright test",
     "playwright:update": "bunx playwright test --update-snapshots",
     "start:playwright-server": "bun run build:fake-api && vite --port 5177",
-    "dev": "bun run build:fake-api && vite",
+    "dev": "AUTOLOAD_SNIPPETS=true bun run build:fake-api && vite",
     "dev:registry": "SNIPPETS_API_URL=http://localhost:3100 vite",
     "build": "bun run build:fake-api && tsc -b && vite build",
     "preview": "vite preview",