@tscircuit/fake-snippets 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "repository": {
     "type": "git",
@@ -66,9 +66,7 @@
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/math-utils": "^0.0.10",
     "@tscircuit/mm": "^0.0.8",
-    "@tscircuit/pcb-viewer": "^1.11.12",
     "@tscircuit/props": "^0.0.143",
-    "@tscircuit/schematic-viewer": "^1.4.3",
     "@types/file-saver": "^2.0.7",
     "@types/ms": "^0.7.34",
     "@typescript/ata": "^0.9.7",
@@ -130,9 +128,9 @@
     "@babel/standalone": "^7.26.2",
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",
-    "@tscircuit/core": "^0.0.315",
+    "@tscircuit/core": "^0.0.345",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.193",
+    "@tscircuit/runframe": "^0.0.231",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",
@@ -146,6 +144,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "circuit-to-svg": "^0.0.101",
+    "get-port": "^7.1.0",
     "globals": "^15.9.0",
     "postcss": "^8.4.47",
     "prismjs": "^1.29.0",

package/src/components/CodeAndPreview.tsx

@@ -2,7 +2,6 @@ import { CodeEditor } from "@/components/CodeEditor"
 import { useAxios } from "@/hooks/use-axios"
 import { useCreateSnippetMutation } from "@/hooks/use-create-snippet-mutation"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useRunTsx } from "@/hooks/use-run-tsx"
 import { useToast } from "@/hooks/use-toast"
 import { useUrlParams } from "@/hooks/use-url-params"
 import useWarnUserOnPageChange from "@/hooks/use-warn-user-on-page-change"
@@ -16,7 +15,6 @@ import { useEffect, useMemo, useState } from "react"
 import { useMutation, useQueryClient } from "react-query"
 import EditorNav from "./EditorNav"
 import { parseJsonOrNull } from "@/lib/utils/parseJsonOrNull"
-import { PreviewContent } from "./PreviewContent"
 import { SuspenseRunFrame } from "./SuspenseRunFrame"
 
 interface Props {
@@ -51,9 +49,7 @@ 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 [circuitJson, setCircuitJson] = useState<any>(null)
 
   const snippetType: "board" | "package" | "model" | "footprint" =
     snippet?.snippet_type ??
@@ -82,26 +78,6 @@ export function CodeAndPreview({ snippet }: Props) {
     [manualEditsFileContent],
   )
 
-  const {
-    message,
-    circuitJson,
-    compiledJs,
-    triggerRunTsx,
-    tsxRunTriggerCount,
-    circuitJsonKey,
-    isRunningCode,
-  } = useRunTsx({
-    code,
-    userImports,
-    type: snippetType,
-    circuitDisplayName: snippet?.name,
-  })
-
-  // Update lastRunCode whenever the code is run
-  useEffect(() => {
-    setLastRunCode(code)
-  }, [tsxRunTriggerCount])
-
   const qc = useQueryClient()
 
   const updateSnippetMutation = useMutation({
@@ -112,7 +88,7 @@ export function CodeAndPreview({ snippet }: Props) {
         snippet_id: snippet.snippet_id,
         code: code,
         dts: dts,
-        compiled_js: compiledJs,
+        // compiled_js: compiledJs,
         circuit_json: circuitJson,
         manual_edits_json_content: manualEditsFileContent,
       }
@@ -276,28 +252,7 @@ export function CodeAndPreview({ snippet }: Props) {
             onDtsChange={(newDts) => setDts(newDts)}
           />
         </div>
-        {showPreview && !shouldUseWebworkerForRun && (
-          <PreviewContent
-            className={cn(
-              "flex p-2 flex-col min-h-[640px]",
-              fullScreen
-                ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
-                : "w-full md:w-1/2",
-            )}
-            code={code}
-            triggerRunTsx={triggerRunTsx}
-            tsxRunTriggerCount={tsxRunTriggerCount}
-            errorMessage={message}
-            circuitJsonKey={circuitJsonKey}
-            circuitJson={circuitJson}
-            isRunningCode={isRunningCode}
-            manualEditsFileContent={manualEditsFileContent ?? ""}
-            onManualEditsFileContentChange={setManualEditsFileContent}
-            onToggleFullScreen={() => setFullScreen(!fullScreen)}
-            isFullScreen={fullScreen}
-          />
-        )}
-        {showPreview && shouldUseWebworkerForRun && (
+        {showPreview && (
           <div
             className={cn(
               "flex p-0 flex-col min-h-[640px]",
@@ -308,8 +263,18 @@ export function CodeAndPreview({ snippet }: Props) {
           >
             <SuspenseRunFrame
               showRunButton
+              forceLatestEvalVersion
+              onRenderStarted={() => {
+                setLastRunCode(code)
+              }}
+              onRenderFinished={({ circuitJson }) => {
+                setCircuitJson(circuitJson)
+              }}
               onEditEvent={() => {
                 // TODO
+                window.alert(
+                  "Edit events are temporarily disabled on tscircuit.com, use the CLI",
+                )
               }}
               fsMap={fsMap}
               entrypoint="main.tsx"

package/src/components/CodeEditor.tsx

@@ -27,7 +27,7 @@ import { EditorView } from "codemirror"
 import { useEffect, useMemo, useRef, useState } from "react"
 import ts from "typescript"
 import CodeEditorHeader from "./CodeEditorHeader"
-import { copilotPlugin, Language } from "@valtown/codemirror-codeium"
+// import { copilotPlugin, Language } from "@valtown/codemirror-codeium"
 import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -86,7 +86,6 @@ export const CodeEditor = ({
   // Whenever streaming completes, reset the code to the initial code
   useEffect(() => {
     if (!isStreaming && code !== initialCode && initialCode) {
-      console.log("Resetting code to initial code", initialCode)
       setCode(initialCode)
 
       // HACK: Timeout because we need to wait for the editor to mount again
@@ -187,6 +186,8 @@ export const CodeEditor = ({
     const ata = setupTypeAcquisition(ataConfig)
     ataRef.current = ata
 
+    const lastFilesEventContent: Record<string, string> = {}
+
     // Set up base extensions
     const baseExtensions = [
       basicSetup,
@@ -198,7 +199,9 @@ export const CodeEditor = ({
       EditorView.updateListener.of((update) => {
         if (update.docChanged) {
           const newContent = update.state.doc.toString()
-          if (newContent === files[currentFile]) return
+
+          if (newContent === lastFilesEventContent[currentFile]) return
+          lastFilesEventContent[currentFile] = newContent
 
           if (currentFile === "index.tsx") {
             setCode(newContent)
@@ -228,10 +231,10 @@ export const CodeEditor = ({
     ]
     if (codeCompletionApi?.apiKey) {
       baseExtensions.push(
-        copilotPlugin({
-          apiKey: codeCompletionApi.apiKey,
-          language: Language.TYPESCRIPT,
-        }),
+        // copilotPlugin({
+        //   apiKey: codeCompletionApi.apiKey,
+        //   language: Language.TYPESCRIPT,
+        // }),
         EditorView.theme({
           ".cm-ghostText, .cm-ghostText *": {
             opacity: "0.6",

package/src/components/EditorNav.tsx

@@ -76,12 +76,6 @@ 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 {
@@ -278,21 +272,6 @@ export default function EditorNav({
             <Share className="mr-1 h-3 w-3" />
             Copy URL
           </Button>
-          <Button
-            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"

package/src/components/PreviewContent.tsx

@@ -3,8 +3,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { cn } from "@/lib/utils"
 import { applyPcbEditEvents } from "@/lib/utils/pcbManualEditEventHandler"
 import { CadViewer } from "@tscircuit/3d-viewer"
-import { PCBViewer } from "@tscircuit/pcb-viewer"
-import { Schematic } from "@tscircuit/schematic-viewer"
+// import { PCBViewer } from "@tscircuit/pcb-viewer"
+// import { SchematicViewer } from "@tscircuit/schematic-viewer"
 import { useEffect, useRef, useState } from "react"
 import { ErrorFallback } from "./ErrorFallback"
 import { ErrorBoundary } from "react-error-boundary"

package/src/components/ViewSnippetHeader.tsx

@@ -18,6 +18,10 @@ export default function ViewSnippetHeader() {
   const session = useGlobalStore((s) => s.session)
   const [isStarred, setIsStarred] = useState(snippet?.is_starred || false)
 
+  useEffect(() => {
+    setIsStarred(snippet?.is_starred || false)
+  }, [snippet?.is_starred])
+
   const useForkSnippetMutation = ({
     snippet,
     onSuccess,

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

@@ -10,8 +10,6 @@ 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
 }
 
@@ -19,9 +17,6 @@ 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-package-as-snippet.ts

@@ -0,0 +1,78 @@
+import { useAxios } from "@/hooks/use-axios"
+import type {
+  Package,
+  PackageFile,
+  Snippet,
+} from "fake-snippets-api/lib/db/schema"
+import { useQuery } from "react-query"
+
+export const usePackageAsSnippet = (packageId: string | null) => {
+  const axios = useAxios()
+
+  console.log("packageId", packageId)
+
+  const packageQuery = useQuery<Package, Error & { status: number }>(
+    ["packages", packageId],
+    async () => {
+      if (!packageId) {
+        throw new Error("Package ID is required")
+      }
+      const { data } = await axios.get("/packages/get", {
+        params: { package_id: packageId },
+      })
+      return data.package
+    },
+    {
+      enabled: Boolean(packageId),
+      retry: false,
+    },
+  )
+
+  const filesQuery = useQuery<PackageFile[], Error & { status: number }>(
+    ["package-files", packageQuery.data?.latest_package_release_id],
+    async () => {
+      if (!packageQuery.data?.latest_package_release_id) {
+        throw new Error("No latest release ID available")
+      }
+      const { data } = await axios.post("/package_files/list", {
+        package_release_id: packageQuery.data.latest_package_release_id,
+      })
+      return data.package_files
+    },
+    {
+      enabled: Boolean(packageQuery.data?.latest_package_release_id),
+      retry: false,
+      // Add these options to ensure proper sequencing
+      staleTime: 0,
+      cacheTime: 0,
+    },
+  )
+
+  // Map package data to match Snippet structure
+  const snippetData: Snippet | undefined = packageQuery.data && {
+    snippet_id: packageId!,
+    package_release_id: packageQuery.data.latest_package_release_id || "",
+    unscoped_name: packageQuery.data.unscoped_name,
+    name: packageQuery.data.name,
+    is_starred: false,
+    version: packageQuery.data.latest_version || "",
+    owner_name: packageQuery.data.owner_github_username || "",
+    description: packageQuery.data.description || "",
+    snippet_type: "board",
+    code:
+      filesQuery.data?.find((file) => file.file_path === "index.tsx")
+        ?.content_text || "",
+    manual_edits_json_content:
+      filesQuery.data?.find((file) => file.file_path === "manual-edits.json")
+        ?.content_text || "",
+    created_at: packageQuery.data.created_at,
+    updated_at: packageQuery.data.updated_at,
+    star_count: packageQuery.data.star_count,
+  }
+
+  return {
+    data: snippetData,
+    isLoading: packageQuery.isLoading || filesQuery.isLoading,
+    error: packageQuery.error || filesQuery.error,
+  }
+}

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

@@ -19,6 +19,10 @@ type RunTsxResult = {
   isRunningCode: boolean
 }
 
+/**
+ * @deprecated will be removed in future version, use @tscircuit/eval or
+ * @tscircuit/runframe
+ */
 export const useRunTsx = ({
   code,
   userImports,

package/src/lib/jlc-parts-engine.ts

@@ -1,10 +1,12 @@
 import { type PartsEngine, SupplierPartNumbers } from "@tscircuit/props"
 import { AnySourceComponent } from "circuit-json"
-import qs from "qs"
 
 const cache = new Map<string, any>()
 const getJlcPartsCached = async (name: any, params: any) => {
-  const paramString = qs.stringify({ ...params, json: "true" })
+  const paramString = new URLSearchParams({
+    ...params,
+    json: "true",
+  }).toString()
   if (cache.has(paramString)) {
     return cache.get(paramString)
   }