Merge branch 'main' into optimize-build

.github/CODEOWNERS

@@ -1 +1 @@
-* @seveibar @tscircuit/core
+* @seveibar @imrishabh18 @tscircuit/core

.github/workflows/bun-pver-release.yml

@@ -0,0 +1,27 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Publish to npm
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'fake-snippets-api/**'
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm install -g pver
+      - run: bun install --frozen-lockfile
+      - run: bun run build:fake-api
+      - run: pver release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/playwright-test.yml

@@ -2,6 +2,8 @@
 name: Playwright Test
 
 on:
+  push:
+    branches: [main]
   pull_request:
 
 jobs:

.github/workflows/stale.yml

@@ -20,11 +20,11 @@ jobs:
           stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
           close-issue-message: 'This issue has been automatically closed due to inactivity. Please feel free to reopen it if you believe it still needs attention.'
 
-          # PR config
-          days-before-pr-stale: 30
-          days-before-pr-close: 7
-          stale-pr-message: 'This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
-          close-pr-message: 'This pull request has been automatically closed due to inactivity. Please feel free to reopen it if you believe it still needs attention.'
+          # Pull request config
+          stale-pr-message: 'This PR has been automatically marked as stale because it has had no recent activity. It will be closed if no further activity occurs.'
+          close-pr-message: 'This PR was closed because it has been inactive for 1 day since being marked as stale.'
+          days-before-pr-stale: 2
+          days-before-pr-close: 1
 
           # Labels
           stale-issue-label: 'stale'

.gitignore

@@ -32,4 +32,7 @@ package-lock.json
 test-results
 
 .yalc
-yalc.lock
+yalc.lock
+
+public/assets
+public/sitemap.xml

README.md

@@ -1,4 +1,11 @@
 # TSCircuit Snippets
+<a href="https://console.algora.io/org/tscircuit/bounties?status=completed">
+       <img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Ftscircuit%2Fbounties%3Fstatus%3Dcompleted" alt="Rewarded Bounties">
+   </a>
+   <a href="https://console.algora.io/org/tscircuit/bounties?status=open">
+       <img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Ftscircuit%2Fbounties%3Fstatus%3Dopen" alt="Open Bounties">
+   </a>
+
 
 [Docs](https://docs.tscircuit.com) &middot; [Website](https://tscircuit.com) &middot; [Twitter](https://x.com/tscircuit) &middot; [discord](https://tscircuit.com/community/join-redirect) &middot; [Quickstart](https://docs.tscircuit.com/quickstart) &middot; [Online Playground](https://tscircuit.com/playground)
 
@@ -90,6 +97,10 @@ This will prompt you to select a specific test file to update.
 
 We welcome contributions to TSCircuit Snippets! Please read our [Contributing Guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
 
+## Example Snippets
+
+- [Arduino Nano Servo Breakout Board](https://tscircuit.com/Abse2001/Arduino-Nano-Servo-Breakout)
+
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

biome.json

@@ -8,7 +8,7 @@
     "indentStyle": "space"
   },
   "files": {
-    "ignore": ["cosmos-export", "dist", "package.json"]
+    "ignore": ["cosmos-export", "dist", "package.json", ".vercel"]
   },
   "javascript": {
     "formatter": {

bun-tests/fake-snippets-api/fixtures/get-circuit-json.ts

@@ -136,7 +136,7 @@ export const generateCircuitJson = async ({
     }
 
     // Construct and render the circuit
-    const circuit = constructCircuit(UserElm, type)
+    const circuit = constructCircuit({ UserElm, type })
 
     // Wait for the circuit to settle
     await circuit.renderUntilSettled()

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",

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

@@ -16,7 +16,7 @@ export default withRouteSpec({
   }),
   jsonResponse: z.object({
     ok: z.boolean(),
-    snippet: snippetSchema,
+    snippet: snippetSchema.optional(),
   }),
 })(async (req, ctx) => {
   let {
@@ -28,9 +28,24 @@ export default withRouteSpec({
     circuit_json,
     dts,
   } = req.jsonBody
+
   if (!unscoped_name) {
     unscoped_name = `untitled-${snippet_type}-${ctx.db.idCounter + 1}`
   }
+
+  const existingSnippet = ctx.db.snippets.find(
+    (snippet) =>
+      snippet.unscoped_name === unscoped_name &&
+      snippet.owner_name === ctx.auth.github_username,
+  )
+
+  if (existingSnippet) {
+    return ctx.error(400, {
+      error_code: "snippet_already_exists",
+      message: "You have already forked this snippet in your account.",
+    })
+  }
+
   const newSnippet: z.input<typeof snippetSchema> = {
     snippet_id: `snippet_${ctx.db.idCounter + 1}`,
     name: `${ctx.auth.github_username}/${unscoped_name}`,
@@ -46,7 +61,14 @@ export default withRouteSpec({
     dts,
   }
 
-  ctx.db.addSnippet(newSnippet)
+  try {
+    ctx.db.addSnippet(newSnippet)
+  } catch (error) {
+    return ctx.error(500, {
+      error_code: "snippet_creation_failed",
+      message: `Failed to create snippet: ${error}`,
+    })
+  }
 
   return ctx.json({
     ok: true,

index.html

@@ -1,15 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="robots" content="index, follow, NOODP" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16">
+    <title>tscircuit - Code Electronics with React</title>
+    <meta name="description" content="tscircuit is an open-source electronics design tool that lets you create circuits using React components. Design schematics, generate PCB layouts, export and manufacture PCBs online!" />
+    <meta name="keywords" content="electronic design, PCB design, schematic capture, React components, circuit design, electronics CAD, open source EDA" />
+    <meta property="og:title" content="tscircuit - Design Electronics with React Components" />
+    <meta property="og:description" content="Create electronic circuits using React components. Design schematics, generate PCB layouts, and manufacture custom PCBs with this free open-source tool." />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="tscircuit - Design Electronics with React Components" />
+    <meta name="twitter:description" content="Create electronic circuits using React components. Free open-source electronics design tool." />
+    <link rel="canonical" href="https://tscircuit.com" />
     <script defer async src="https://cdn.jsdelivr.net/npm/typescript"></script>
     <script defer async src="https://cdn.jsdelivr.net/npm/@babel/standalone"></script>
     <script defer async src="https://cdn.jsdelivr.net/npm/prettier/standalone.js"></script>
     <script defer async src="https://cdn.jsdelivr.net/npm/prettier/plugins/typescript.js"></script>
     <script type="module" src="/src/main.tsx"></script>
-    <title>tscircuit Snippets</title>
   </head>
   <body>
     <div id="root"></div>

landing.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="robots" content="index, follow, NOODP" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16">
+    <title>tscircuit - Code Electronics with React</title>
+    <meta name="description" content="tscircuit is an open-source electronics design tool that lets you create circuits using React components. Design schematics, generate PCB layouts, export and manufacture PCBs online!" />
+    <meta name="keywords" content="electronic design, PCB design, schematic capture, React components, circuit design, electronics CAD, open source EDA" />
+    <meta property="og:title" content="tscircuit - Design Electronics with React Components" />
+    <meta property="og:description" content="Create electronic circuits using React components. Design schematics, generate PCB layouts, and manufacture custom PCBs with this free open-source tool." />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="tscircuit - Design Electronics with React Components" />
+    <meta name="twitter:description" content="Create electronic circuits using React components. Free open-source electronics design tool." />
+    <link rel="canonical" href="https://tscircuit.com" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/pages/landing.tsx"></script>
+  </body>
+</html>