Feat: Download JSON button added

package.json

@@ -57,6 +57,7 @@
     "easyeda": "^0.0.32",
     "embla-carousel-react": "^8.3.0",
     "fflate": "^0.8.2",
+    "file-saver": "^2.0.5",
     "immer": "^10.1.1",
     "input-otp": "^1.2.4",
     "jose": "^5.9.3",
@@ -85,6 +86,7 @@
     "@tscircuit/prompt-benchmarks": "^0.0.5",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
+    "@types/file-saver": "^2.0.7",
     "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",

src/components/DownloadButtonAndMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -7,8 +6,18 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
 import { Download, ChevronDown } from "lucide-react"
+import { useDownloadCurrentSnippetCircuitJson } from "@/hooks/use-download-json"
+import { saveAs } from "file-saver"
+import { createBlobURL } from "@/lib/createBlobURL"
+import create from "fake-snippets-api/routes/api/snippets/create"
 
 export function DownloadButtonAndMenu({ className }: { className?: string }) {
+  const { jsonContent, jsonFileName } = useDownloadCurrentSnippetCircuitJson()
+
+  const handleDownloadClick = () => {
+    const blob = createBlobURL(jsonContent)
+    saveAs(blob, jsonFileName)
+  }
   return (
     <div className={className}>
       <DropdownMenu>
@@ -20,14 +29,7 @@ export function DownloadButtonAndMenu({ className }: { className?: string }) {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>
-          <DropdownMenuItem className="text-xs">
-            <Download className="mr-1 h-3 w-3" />
-            <span className="flex-grow mr-6">Download TSX</span>
-            <span className="text-[0.6rem] opacity-80 bg-blue-500 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
-              tsx
-            </span>
-          </DropdownMenuItem>
-          <DropdownMenuItem className="text-xs">
+          <DropdownMenuItem className="text-xs" onClick={handleDownloadClick}>
             <Download className="mr-1 h-3 w-3" />
             <span className="flex-grow mr-6">Download Circuit JSON</span>
             <span className="text-[0.6rem] opacity-80 bg-blue-500 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">

src/hooks/use-download-json.ts

@@ -0,0 +1,25 @@
+import { useCurrentSnippetId } from "@/hooks/use-current-snippet-id"
+import { useSnippet } from "@/hooks/use-snippet"
+import { useMemo, useState } from "react"
+import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
+import { useRunTsx } from "@/hooks/use-run-tsx"
+
+export const useDownloadCurrentSnippetCircuitJson = () => {
+  const snippetId = useCurrentSnippetId()
+  const { data: snippet, isLoading } = useSnippet(snippetId)
+
+  const defaultCode = useMemo(() => {
+    return decodeUrlHashToText(window.location.toString()) ?? snippet?.code
+  }, [])
+
+  const [code, setCode] = useState(defaultCode ?? "")
+
+  const { message, circuitJson } = useRunTsx(code, snippet?.snippet_type)
+
+  const stringifiedCircuitJson = JSON.stringify(circuitJson, null, 2)
+
+  return {
+    jsonContent: stringifiedCircuitJson,
+    jsonFileName: `${snippet?.name}.json`,
+  }
+}

src/lib/createBlobURL.ts

@@ -0,0 +1,4 @@
+export const createBlobURL = (content: string) => {
+  const blob = new Blob([content], { type: "text/plain" })
+  return URL.createObjectURL(blob)
+}