@tscircuit/fake-snippets 0.0.3 → 0.0.5

package/src/components/CodeAndPreview.tsx

@@ -15,8 +15,9 @@ import { Loader2 } from "lucide-react"
 import { useEffect, useMemo, useState } from "react"
 import { useMutation, useQueryClient } from "react-query"
 import EditorNav from "./EditorNav"
-import { PreviewContent } from "./PreviewContent"
 import { parseJsonOrNull } from "@/lib/utils/parseJsonOrNull"
+import { PreviewContent } from "./PreviewContent"
+import { SuspenseRunFrame } from "./SuspenseRunFrame"
 
 interface Props {
   snippet?: Snippet | null
@@ -50,6 +51,9 @@ export function CodeAndPreview({ snippet }: Props) {
   const [showPreview, setShowPreview] = useState(true)
   const [lastRunCode, setLastRunCode] = useState(defaultCode ?? "")
   const [fullScreen, setFullScreen] = useState(false)
+  const shouldUseWebworkerForRun = useGlobalStore(
+    (s) => s.should_use_webworker_for_run,
+  )
 
   const snippetType: "board" | "package" | "model" | "footprint" =
     snippet?.snippet_type ??
@@ -187,6 +191,41 @@ export function CodeAndPreview({ snippet }: Props) {
 
   useWarnUserOnPageChange({ hasUnsavedChanges })
 
+  const fsMap = useMemo(() => {
+    const possibleExportNames = [
+      ...(code.match(/export function (\w+)/)?.slice(1) ?? []),
+      ...(code.match(/export const (\w+) ?=/)?.slice(1) ?? []),
+    ]
+
+    console.log(possibleExportNames)
+
+    const exportName = possibleExportNames[0]
+
+    let entrypointContent: string
+    if (snippetType === "board") {
+      entrypointContent = `
+        import ${exportName ? `{ ${exportName} as Snippet }` : "Snippet"} from "./index.tsx"
+        circuit.add(<Snippet />)
+      `.trim()
+    } else {
+      entrypointContent = `
+        import ${exportName ? `{ ${exportName} as Snippet }` : "Snippet"} from "./index.tsx"
+        circuit.add(
+          <board width="10mm" height="10mm">
+            <Snippet name="U1" />
+          </board>
+        )
+      `.trim()
+    }
+
+    return {
+      "index.tsx": code,
+      "manual-edits.json": manualEditsFileContent ?? "{}",
+      "main.tsx": entrypointContent,
+    }
+  }, [code, manualEditsFileContent])
+  console.log(fsMap)
+
   if (!snippet && (urlParams.snippet_id || urlParams.should_create_snippet)) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -231,7 +270,7 @@ export function CodeAndPreview({ snippet }: Props) {
             onDtsChange={(newDts) => setDts(newDts)}
           />
         </div>
-        {showPreview && (
+        {showPreview && !shouldUseWebworkerForRun && (
           <PreviewContent
             className={cn(
               "flex p-2 flex-col min-h-[640px]",
@@ -252,6 +291,25 @@ export function CodeAndPreview({ snippet }: Props) {
             isFullScreen={fullScreen}
           />
         )}
+        {showPreview && shouldUseWebworkerForRun && (
+          <div
+            className={cn(
+              "flex p-0 flex-col min-h-[640px]",
+              fullScreen
+                ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
+                : "w-full md:w-1/2",
+            )}
+          >
+            <SuspenseRunFrame
+              showRunButton
+              onEditEvent={() => {
+                // TODO
+              }}
+              fsMap={fsMap}
+              entrypoint="main.tsx"
+            />
+          </div>
+        )}
       </div>
     </div>
   )

package/src/components/EditorNav.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button"
-import { GitFork } from "lucide-react"
+import { Check, CircleCheckBig, Cpu, GitFork, Square } from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -75,6 +75,12 @@ export default function EditorNav({
   const [, navigate] = useLocation()
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const session = useGlobalStore((s) => s.session)
+  const shouldUseWebworkerForRun = useGlobalStore(
+    (s) => s.should_use_webworker_for_run,
+  )
+  const setShouldUseWebworkerForRun = useGlobalStore(
+    (s) => s.setShouldUseWebworkerForRun,
+  )
   const { Dialog: RenameDialog, openDialog: openRenameDialog } =
     useRenameSnippetDialog()
   const {
@@ -275,10 +281,25 @@ export default function EditorNav({
             variant="ghost"
             size="sm"
             className="hidden md:flex px-2 text-xs"
+            onClick={() =>
+              setShouldUseWebworkerForRun(!shouldUseWebworkerForRun)
+            }
+          >
+            {shouldUseWebworkerForRun ? (
+              <CircleCheckBig className="mr-1 h-3 w-3" />
+            ) : (
+              <Square className="mr-1 h-3 w-3" />
+            )}
+            Webworker (Beta)
+          </Button>
+          {/* <Button
+            variant="ghost"
+            size="sm"
+            className="hidden md:flex px-2 text-xs"
           >
             <Eye className="mr-1 h-3 w-3" />
             Public
-          </Button>
+          </Button> */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" size="icon" className="hidden md:flex">

package/src/components/FootprintDialog.tsx

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from "react"
 import { parseFootprintParams } from "../lib/utils/parseFootprintParams"
 import ParametersEditor from "./ParametersEditor"
 import { convertCircuitJsonToPcbSvg } from "circuit-to-svg"
-import { fp } from "@tscircuit/footprinter"
+import { fp, getFootprintNamesByType } from "@tscircuit/footprinter"
 import { useToast } from "../hooks/use-toast"
 import { Button } from "./ui/button"
 import { FileName } from "./CodeEditorHeader"
@@ -53,10 +53,7 @@ export const FootprintDialog = ({
   const [error, setError] = useState<string | null>(null)
   const { toast } = useToast()
 
-  const PASSIVE_COMPONENTS = ["diode", "led", "resistor", "cap", "res"]
-  const footprintNames = fp
-    .getFootprintNames()
-    .filter((footprintName) => !PASSIVE_COMPONENTS.includes(footprintName))
+  const { normalFootprintNames } = getFootprintNamesByType()
 
   useEffect(() => {
     if (copied) {
@@ -266,7 +263,7 @@ export const FootprintDialog = ({
                     handleFootprintPreview(value)
                   }
                 }}
-                options={footprintNames}
+                options={normalFootprintNames}
                 placeholder="Select footprint..."
                 searchPlaceholder="Search footprints..."
                 emptyText="No footprints found."

package/src/components/Header2.tsx

@@ -64,6 +64,13 @@ export const Header2 = () => {
   const isLoggedIn = useGlobalStore((state) => Boolean(state.session))
   return (
     <>
+      {/* <div className="absolute left-0 top-0 z-[9999999]">
+        <div className="hidden xl:block">xl</div>
+        <div className="hidden lg:block xl:hidden">lg</div>
+        <div className="hidden md:block lg:hidden">md</div>
+        <div className="hidden sm:block md:hidden">sm</div>
+        <div className="hidden xs:block sm:hidden">xs</div>
+      </div> */}
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <div className="container mx-auto flex h-16 items-center justify-between px-2 md:px-6">
           <div className="flex items-center gap-2">

package/src/components/PrefetchPageLink.tsx

@@ -30,7 +30,10 @@ const PrefetchPageLink = ({
 
   useEffect(() => {
     if (inView) {
-      const pageName = href === "/" ? "landing" : href.slice(1)
+      const link = href === "/" ? "landing" : href.slice(1)
+      if (!link) return
+      const pageName = link.split("?")[0]
+
       import(`@/pages/${pageName}.tsx`).catch((error) => {
         console.error(`Failed to prefetch page module ${pageName}:`, error)
       })

package/src/components/SuspenseRunFrame.tsx

@@ -0,0 +1,16 @@
+import { lazy, Suspense } from "react"
+
+const RunFrame = lazy(async () => {
+  const { RunFrame } = await import("@tscircuit/runframe/runner")
+  return { default: RunFrame }
+})
+
+export const SuspenseRunFrame = (
+  props: React.ComponentProps<typeof RunFrame>,
+) => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <RunFrame {...props} />
+    </Suspense>
+  )
+}

package/src/components/dialogs/import-snippet-dialog.tsx

@@ -1,10 +1,11 @@
-import { Snippet } from "fake-snippets-api/lib/db/schema"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
-import { Input } from "../ui/input"
-import { Button } from "../ui/button"
+import { useAxios } from "@/hooks/use-axios"
+import { useDebounce } from "@/hooks/use-debounce"
+import type { Snippet } from "fake-snippets-api/lib/db/schema"
 import { useState } from "react"
 import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
+import { Button } from "../ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { Input } from "../ui/input"
 import { createUseDialog } from "./create-use-dialog"
 
 export const ImportSnippetDialog = ({
@@ -17,15 +18,18 @@ export const ImportSnippetDialog = ({
   onSnippetSelected: (snippet: Snippet) => any
 }) => {
   const [searchText, setSearchText] = useState("")
+  const debouncedSearch = useDebounce(searchText, 300)
   const axios = useAxios()
   const { data: snippets, isLoading } = useQuery(
-    ["snippetSearch", searchText],
+    ["snippetSearch", debouncedSearch],
     async () => {
-      const response = await axios.get(`/snippets/search?q=${searchText}`)
+      const response = await axios.get(
+        `/snippets/search?q=${encodeURIComponent(debouncedSearch)}`,
+      )
       return response.data.snippets.slice(0, 12)
     },
     {
-      enabled: searchText.length > 0,
+      enabled: debouncedSearch.length > 0,
     },
   )
 

package/src/hooks/use-debounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react"
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

package/src/hooks/use-global-store.ts

@@ -10,6 +10,8 @@ export type Store = {
   } | null
   setSession: (session: Store["session"]) => any
   should_onboarding_tips_be_closed: boolean
+  should_use_webworker_for_run?: boolean
+  setShouldUseWebworkerForRun: (should_use_webworker_for_run: boolean) => any
   setOnboardingTipsClosed: (closed: boolean) => any
 }
 
@@ -17,6 +19,9 @@ export const useGlobalStore = create<Store>()(
   persist(
     (set) => ({
       session: null,
+      should_use_webworker_for_run: false,
+      setShouldUseWebworkerForRun: (should_use_webworker_for_run: boolean) =>
+        set({ should_use_webworker_for_run }),
       setSession: (session) => set({ session }),
       should_onboarding_tips_be_closed: false,
       setOnboardingTipsClosed: (closed) =>

package/src/hooks/use-run-tsx/index.tsx

@@ -108,6 +108,7 @@ export const useRunTsx = ({
       }
       ;(globalThis as any).__tscircuit_require = __tscircuit_require
       preSuppliedImports["@tscircuit/core"] = tscircuitCore
+      preSuppliedImports["tscircuit"] = tscircuitCore
       preSuppliedImports["@tscircuit/math-utils"] = tscircuitMathUtils
       preSuppliedImports["react"] = React
       preSuppliedImports["jscad-fiber"] = jscadFiber

package/src/pages/landing.tsx

@@ -41,7 +41,7 @@ export function LandingPage() {
       </Helmet>
       <Header2 />
       <main className="flex-1">
-        <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
+        <section className="w-full py-8 md:py-12 lg:py-20 xl:py-36">
           <div className="container px-4 md:px-6 mx-auto">
             <div className="container mx-auto max-w-7xl">
               <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
@@ -116,7 +116,7 @@ export function LandingPage() {
                 <div className="w-full aspect-video relative">
                   <OptimizedImage
                     alt="Product preview"
-                    className="mx-auto overflow-hidden rounded-xl object-cover object-center absolute inset-0 w-full h-full"
+                    className="mx-auto overflow-hidden rounded-xl object-cover object-center absolute inset-0 w-full h-full mt-8 lg:mt-0"
                     src="/assets/editor_example_1_more_square.webp"
                     priority={true}
                   />

package/src/pages/preview.tsx

@@ -1,14 +1,11 @@
-import { CircuitToSvgWithMouseControl } from "@/components/CircuitToSvgWithMouseControl"
 import { useSnippet } from "@/hooks/use-snippet"
 import { useUrlParams } from "@/hooks/use-url-params"
-import { CadViewer } from "@tscircuit/3d-viewer"
-import { PCBViewer } from "@tscircuit/pcb-viewer"
+import { CircuitJsonPreview } from "@tscircuit/runframe"
 import { Loader2 } from "lucide-react"
 
 export const PreviewPage = () => {
   const urlParams = useUrlParams()
   const snippetId = urlParams.snippet_id
-  const view = urlParams.view || "pcb"
   const { data: snippet, isLoading, error } = useSnippet(snippetId)
 
   if (isLoading) {
@@ -43,28 +40,5 @@ export const PreviewPage = () => {
     )
   }
 
-  const validViews = ["pcb", "3d", "schematic"]
-  if (!validViews.includes(view)) {
-    return (
-      <div className="w-full h-screen">
-        {view === "pcb" && (
-          <PCBViewer soup={snippet.circuit_json} height={window.innerHeight} />
-        )}
-      </div>
-    )
-  }
-
-  return (
-    <div className="w-full h-screen">
-      {view === "pcb" && (
-        <PCBViewer soup={snippet.circuit_json} height={window.innerHeight} />
-      )}
-      {view === "3d" && <CadViewer soup={snippet.circuit_json as any} />}
-      {view === "schematic" && (
-        <CircuitToSvgWithMouseControl
-          circuitJson={snippet.circuit_json as any}
-        />
-      )}
-    </div>
-  )
+  return <CircuitJsonPreview circuitJson={snippet.circuit_json as any} />
 }

package/src/pages/quickstart.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { TypeBadge } from "@/components/TypeBadge"
 import { JLCPCBImportDialog } from "@/components/JLCPCBImportDialog"
+import { CircuitJsonImportDialog } from "@/components/CircuitJsonImportDialog"
 import { useNotImplementedToast } from "@/hooks/use-toast"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { cn } from "@/lib/utils"
@@ -16,6 +17,8 @@ import { PrefetchPageLink } from "@/components/PrefetchPageLink"
 export const QuickstartPage = () => {
   const axios = useAxios()
   const [isJLCPCBDialogOpen, setIsJLCPCBDialogOpen] = useState(false)
+  const [isCircuitJsonImportDialogOpen, setIsCircuitJsonImportDialogOpen] =
+    useState(false)
   const toastNotImplemented = useNotImplementedToast()
   const currentUser = useGlobalStore((s) => s.session?.github_username)
   const { data: mySnippets, isLoading } = useQuery<Snippet[]>(
@@ -159,6 +162,22 @@ export const QuickstartPage = () => {
                 </Button>
               </CardContent>
             </Card>
+            <Card className="hover:shadow-md transition-shadow rounded-md">
+              <CardHeader className="p-4 pb-0">
+                <CardTitle className="text-lg flex items-center justify-between">
+                  Circuit Json
+                  <TypeBadge type="module" className="ml-2" />
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="p-4">
+                <Button
+                  className="w-full"
+                  onClick={() => setIsCircuitJsonImportDialogOpen(true)}
+                >
+                  Import Circuit JSON
+                </Button>
+              </CardContent>
+            </Card>
           </div>
         </div>
 
@@ -167,6 +186,11 @@ export const QuickstartPage = () => {
           onOpenChange={setIsJLCPCBDialogOpen}
         />
 
+        <CircuitJsonImportDialog
+          open={isCircuitJsonImportDialogOpen}
+          onOpenChange={setIsCircuitJsonImportDialogOpen}
+        />
+
         <div>
           <h2 className="text-xl font-semibold mb-4 mt-12">
             Start from a Template

package/vite.config.ts

@@ -113,8 +113,8 @@ export default defineConfig(async (): Promise<UserConfig> => {
     },
     base: "/",
     build: {
-      minify: "terser",
       copyPublicDir: true,
+      minify: "terser",
       terserOptions: {
         compress: {
           drop_console: true,