@tscircuit/fake-snippets 0.0.88 → 0.0.90

package/src/hooks/useFileManagement.ts

@@ -1,13 +1,14 @@
 import { useEffect, useMemo, useState, useCallback, useRef } from "react"
 import { isValidFileName } from "@/lib/utils/isValidFileName"
+import { PackageFile } from "@/types/package"
 import {
   DEFAULT_CODE,
   generateRandomPackageName,
-  PackageFile,
-} from "../components/package-port/CodeAndPreview"
+} from "@/lib/utils/package-utils"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { usePackageFiles } from "./use-package-files"
 import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
+import { decodeUrlHashToFsMap } from "@/lib/decodeUrlHashToFsMap"
 import { usePackageFilesLoader } from "./usePackageFilesLoader"
 import { useGlobalStore } from "./use-global-store"
 import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
@@ -15,7 +16,7 @@ import { useUpdatePackageFilesMutation } from "./useUpdatePackageFilesMutation"
 import { useCreatePackageReleaseMutation } from "./use-create-package-release-mutation"
 import { useCreatePackageMutation } from "./use-create-package-mutation"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
-import { createSnippetUrl } from "@tscircuit/create-snippet-url"
+import { encodeFsMapToUrlHash } from "@/lib/encodeFsMapToUrlHash"
 
 export interface ICreateFileProps {
   newFileName: string
@@ -117,6 +118,22 @@ export function useFileManagement({
 
   useEffect(() => {
     if (!currentPackage || isLoadingPackageFilesWithContent) {
+      const decodedFsMap = decodeUrlHashToFsMap(window.location.toString())
+
+      if (decodedFsMap && Object.keys(decodedFsMap).length > 0) {
+        const filesFromUrl = Object.entries(decodedFsMap).map(
+          ([path, content]) => ({
+            path,
+            content: String(content),
+          }),
+        )
+        const targetFile = findTargetFile(filesFromUrl, fileChoosen)
+        setLocalFiles(filesFromUrl)
+        setInitialFiles([])
+        setCurrentFile(targetFile?.path || filesFromUrl[0]?.path || null)
+        return
+      }
+
       setLocalFiles([
         {
           path: "index.tsx",
@@ -243,14 +260,15 @@ export function useFileManagement({
 
       debounceTimeoutRef.current = setTimeout(() => {
         try {
-          const mainFile =
-            files.find((f) => f.path === currentFile) ||
-            files.find((f) => f.path === "index.tsx") ||
-            files[0]
-
-          if (mainFile.content.length > 50000) return
+          const map = files.reduce(
+            (acc, f) => {
+              acc[f.path] = f.content || ""
+              return acc
+            },
+            {} as Record<string, string>,
+          )
 
-          const snippetUrl = createSnippetUrl(mainFile.content)
+          const snippetUrl = encodeFsMapToUrlHash(map)
           if (typeof snippetUrl !== "string") return
 
           const currentUrl = new URL(window.location.href)

package/src/hooks/usePackageFilesLoader.ts

@@ -36,7 +36,9 @@ export function usePackageFilesLoader(pkg?: Package) {
         const content = response.data.package_file?.content_text
         return { path: file.file_path, content: content ?? "" }
       },
-      staleTime: 2,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      cacheTime: 0,
     })) ?? [],
   )
 

package/src/index.css

@@ -67,3 +67,14 @@
   padding: 12px !important;
   margin: 0 !important;
 }
+
+.markdown-content {
+  padding-top: 0.5rem;
+  max-width: none !important;
+  width: 100% !important;
+}
+
+.markdown-content .prose {
+  max-width: none !important;
+  width: 100% !important;
+}

package/src/lib/decodeUrlHashToFsMap.ts

@@ -0,0 +1,17 @@
+import { gunzipSync, strFromU8 } from "fflate"
+import { base64ToBytes } from "./base64ToBytes"
+
+export function decodeUrlHashToFsMap(
+  url: string,
+): Record<string, string> | null {
+  const base64Data = url.split("#data:application/gzip;base64,")[1]
+  if (!base64Data) return null
+  try {
+    const compressedData = base64ToBytes(base64Data)
+    const decompressedData = gunzipSync(compressedData)
+    const text = strFromU8(decompressedData)
+    return JSON.parse(text)
+  } catch {
+    return null
+  }
+}

package/src/lib/download-fns/download-circuit-png.ts

@@ -0,0 +1,88 @@
+import { AnyCircuitElement } from "circuit-json"
+import {
+  convertCircuitJsonToAssemblySvg,
+  convertCircuitJsonToPcbSvg,
+  convertCircuitJsonToSchematicSvg,
+} from "circuit-to-svg"
+import { saveAs } from "file-saver"
+
+export type ImageFormat = "schematic" | "pcb" | "assembly"
+
+interface DownloadCircuitPngOptions {
+  format: ImageFormat
+  width?: number
+  height?: number
+}
+
+const convertSvgToPng = async (svgString: string): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement("canvas")
+    const ctx = canvas.getContext("2d")
+    if (!ctx) {
+      reject(new Error("Failed to get canvas context"))
+      return
+    }
+
+    const img = new Image()
+    img.onload = () => {
+      canvas.width = img.width || 800
+      canvas.height = img.height || 600
+      ctx.fillStyle = "white"
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(img, 0, 0)
+
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob)
+        } else {
+          reject(new Error("Failed to convert canvas to blob"))
+        }
+      }, "image/png")
+    }
+
+    img.onerror = () => {
+      reject(new Error("Failed to load SVG image"))
+    }
+
+    const svgBlob = new Blob([svgString], { type: "image/svg+xml" })
+    const url = URL.createObjectURL(svgBlob)
+    img.src = url
+
+    setTimeout(() => URL.revokeObjectURL(url), 10000)
+  })
+}
+
+export const downloadCircuitPng = async (
+  circuitJson: AnyCircuitElement[],
+  fileName: string,
+  options: DownloadCircuitPngOptions = { format: "pcb" },
+) => {
+  try {
+    let blob: Blob
+    let svg: string
+
+    const svgOptions: any = {}
+    if (options.width) svgOptions.width = options.width
+    if (options.height) svgOptions.height = options.height
+
+    switch (options.format) {
+      case "schematic":
+        svg = convertCircuitJsonToSchematicSvg(circuitJson, svgOptions)
+        break
+      case "pcb":
+        svg = convertCircuitJsonToPcbSvg(circuitJson, svgOptions)
+        break
+      case "assembly":
+        svg = convertCircuitJsonToAssemblySvg(circuitJson, svgOptions)
+        break
+      default:
+        throw new Error(`Unsupported format: ${options.format}`)
+    }
+
+    blob = await convertSvgToPng(svg)
+    const downloadFileName = `${fileName}_${options.format}.png`
+    saveAs(blob, downloadFileName)
+  } catch (error) {
+    throw new Error(`Failed to download ${options.format} PNG: ${error}`)
+  }
+}

package/src/lib/download-fns/download-png-utils.ts

@@ -0,0 +1,31 @@
+import { AnyCircuitElement } from "circuit-json"
+import { downloadCircuitPng, ImageFormat } from "./download-circuit-png"
+import { toast } from "@/hooks/use-toast"
+
+interface DownloadPngOptions {
+  circuitJson?: AnyCircuitElement[] | null
+  unscopedName?: string
+  author?: string
+  format: ImageFormat
+}
+
+export const downloadPngImage = async ({
+  circuitJson,
+  unscopedName,
+  format,
+}: DownloadPngOptions) => {
+  try {
+    if (!circuitJson) {
+      throw new Error("Circuit JSON not available")
+    }
+    await downloadCircuitPng(circuitJson, unscopedName || "circuit", {
+      format,
+    })
+  } catch (error: any) {
+    toast({
+      title: `Error Downloading ${format.charAt(0).toUpperCase() + format.slice(1)} PNG`,
+      description: error.toString(),
+      variant: "destructive",
+    })
+  }
+}

package/src/lib/encodeFsMapToUrlHash.ts

@@ -0,0 +1,13 @@
+import { gzipSync, strToU8 } from "fflate"
+import { bytesToBase64 } from "./bytesToBase64"
+
+export function encodeFsMapToUrlHash(
+  fsMap: Record<string, string>,
+  snippet_type?: string,
+): string {
+  const text = JSON.stringify(fsMap)
+  const compressedData = gzipSync(strToU8(text))
+  const base64Data = bytesToBase64(compressedData)
+  const typeParam = snippet_type ? `&snippet_type=${snippet_type}` : ""
+  return `${window.location.origin}/editor?${typeParam}#data:application/gzip;base64,${base64Data}`
+}

package/src/lib/populate-query-cache-with-ssr-data.ts

@@ -14,7 +14,9 @@ export function populateQueryCacheWithSSRData(queryClient: QueryClient) {
 
   if (!ssrPackage || !ssrPackageRelease) return
 
+  // Cache lookups by package name and id
   queryClient.setQueryData(["package", ssrPackage.name], ssrPackage)
+  queryClient.setQueryData(["package", ssrPackage.package_id], ssrPackage)
   queryClient.setQueryData(["packages", ssrPackage.package_id], ssrPackage)
 
   queryClient.setQueryData(
@@ -29,6 +31,11 @@ export function populateQueryCacheWithSSRData(queryClient: QueryClient) {
     ssrPackageRelease,
   )
 
+  queryClient.setQueryData(
+    ["packageRelease", { is_latest: true, package_id: ssrPackage.package_id }],
+    ssrPackageRelease,
+  )
+
   queryClient.setQueryData(
     [
       "packageRelease",

package/src/lib/ts-lib-cache.ts

@@ -0,0 +1,47 @@
+import {
+  createDefaultMapFromCDN,
+  knownLibFilesForCompilerOptions,
+} from "@typescript/vfs"
+import { get, set } from "idb-keyval"
+import { compressToUTF16, decompressFromUTF16 } from "lz-string"
+import ts from "typescript"
+
+const TS_LIB_VERSION = "5.6.3"
+const CACHE_PREFIX = `ts-lib-${TS_LIB_VERSION}-`
+
+export async function loadDefaultLibMap(): Promise<Map<string, string>> {
+  const fsMap = new Map<string, string>()
+  const libs = knownLibFilesForCompilerOptions(
+    { target: ts.ScriptTarget.ES2022 },
+    ts,
+  )
+  const missing: string[] = []
+
+  for (const lib of libs) {
+    const cached = await get(CACHE_PREFIX + lib)
+    if (cached) {
+      fsMap.set("/" + lib, decompressFromUTF16(cached as string))
+    } else {
+      missing.push(lib)
+    }
+  }
+
+  if (missing.length > 0) {
+    const fetched = await createDefaultMapFromCDN(
+      { target: ts.ScriptTarget.ES2022 },
+      TS_LIB_VERSION,
+      true,
+      ts,
+      { compressToUTF16, decompressFromUTF16 } as any,
+    )
+    for (const [filename, content] of fetched) {
+      fsMap.set(filename, content)
+      await set(
+        CACHE_PREFIX + filename.replace(/^\//, ""),
+        compressToUTF16(content),
+      )
+    }
+  }
+
+  return fsMap
+}

package/src/lib/types.ts

@@ -11,6 +11,8 @@ declare global {
       format: (code: string, options: any) => string
     }
     prettierPlugins: any
+    /** Timestamp in milliseconds of when the application was first loaded */
+    __APP_LOADED_AT?: number
   }
 }
 

package/src/lib/utils/findTargetFile.ts

@@ -1,4 +1,4 @@
-import { PackageFile } from "@/components/package-port/CodeAndPreview"
+import { PackageFile } from "@/types/package"
 
 export const findMainEntrypointFileFromTscircuitConfig = (
   files: PackageFile[],

package/src/lib/utils/package-utils.ts

@@ -0,0 +1,10 @@
+export const DEFAULT_CODE = `
+export default () => (
+  <board width="10mm" height="10mm">
+    {/* write your code here! */}
+  </board>
+)
+`.trim()
+
+export const generateRandomPackageName = () =>
+  `untitled-package-${Math.floor(Math.random() * 900) + 100}`

package/src/main.tsx

@@ -1,7 +1,14 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import App from "./App.tsx"
+
+if (typeof window !== "undefined" && !window.__APP_LOADED_AT) {
+  window.__APP_LOADED_AT = Date.now()
+}
 import "./index.css"
+import { setupBuildWatcher } from "./build-watcher"
+
+setupBuildWatcher()
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

package/src/pages/dashboard.tsx

@@ -41,14 +41,17 @@ export const DashboardPage = () => {
       const response = await axios.post(`/packages/list`, {
         owner_github_username: currentUser,
       })
-      return response.data.packages.sort(
-        (a: any, b: any) =>
-          new Date(b.updated_at || b.created_at).getTime() -
-          new Date(a.updated_at || a.created_at).getTime(),
-      )
+      return response.data.packages
     },
     {
       enabled: isLoggedIn,
+      select: (data: Package[]) => {
+        return [...data].sort(
+          (a: Package, b: Package) =>
+            new Date(b.updated_at || b.created_at).getTime() -
+            new Date(a.updated_at || a.created_at).getTime(),
+        )
+      },
     },
   )
 
@@ -58,6 +61,11 @@ export const DashboardPage = () => {
       const response = await axios.get("/packages/list_trending")
       return response.data.packages
     },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    },
   )
 
   const { data: latestPackages } = useQuery<Package[]>(
@@ -66,6 +74,11 @@ export const DashboardPage = () => {
       const response = await axios.get("/packages/list_latest")
       return response.data.packages
     },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    },
   )
 
   const baseUrl = useSnippetsBaseApiUrl()

package/src/pages/view-package.tsx

@@ -21,11 +21,17 @@ export const ViewPackagePage = () => {
     data: packageRelease,
     error: packageReleaseError,
     isLoading: isLoadingPackageRelease,
-  } = usePackageRelease({
-    is_latest: true,
-    package_name: `${author}/${packageName}`,
-    include_ai_review: true,
-  })
+  } = usePackageRelease(
+    {
+      is_latest: true,
+      package_name: `${author}/${packageName}`,
+      include_ai_review: true,
+    },
+    {
+      refetchInterval: (data) =>
+        data?.ai_review_requested && !data.ai_review_text ? 2000 : false,
+    },
+  )
 
   const { data: packageFiles } = usePackageFiles(
     packageRelease?.package_release_id,
@@ -46,15 +52,17 @@ export const ViewPackagePage = () => {
       </Helmet>
       <RepoPageContent
         packageFiles={packageFiles as any}
-        packageInfo={packageInfo as any}
-        packageRelease={packageRelease as any}
+        packageInfo={packageInfo}
+        packageRelease={packageRelease}
         importantFilePaths={["README.md", "LICENSE", "package.json"]}
         onFileClicked={(file) => {
+          if (!packageInfo?.package_id) return
           setLocation(
             `/editor?package_id=${packageInfo?.package_id}&file_path=${file.file_path}`,
           )
         }}
         onEditClicked={(file_path?: string) => {
+          if (!packageInfo?.package_id) return
           setLocation(
             `/editor?package_id=${packageInfo?.package_id}${
               file_path ? `&file_path=${file_path}` : ""

package/src/types/package.ts

@@ -0,0 +1,4 @@
+export interface PackageFile {
+  path: string
+  content: string
+}

package/vite.config.ts

@@ -1,11 +1,14 @@
 import { createDatabase } from "./fake-snippets-api/lib/db/db-client"
 import { defineConfig, Plugin, UserConfig } from "vite"
 import type { PluginOption } from "vite"
-import path from "path"
+import path, { extname } from "path"
+import { readFileSync } from "fs"
+import { execSync } from "child_process"
 import react from "@vitejs/plugin-react"
 import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
 import { getNodeHandler } from "winterspec/adapters/node"
 import vercel from "vite-plugin-vercel"
+import type { IncomingMessage, ServerResponse } from "http"
 
 // @ts-ignore
 import winterspecBundle from "./dist/bundle.js"
@@ -39,6 +42,100 @@ function apiFakePlugin(): Plugin {
   }
 }
 
+function vercelSsrDevPlugin(): Plugin {
+  return {
+    name: "vercel-ssr-dev",
+    apply: "serve",
+    async configureServer(server) {
+      const port = server.config.server.port || 5173
+      process.env.TSC_DEV_SSR = "true"
+      process.env.TSC_BASE_URL = `http://127.0.0.1:${port}`
+      process.env.TSC_REGISTRY_API = `http://127.0.0.1:${port}/api`
+
+      const { default: ssrHandler, setHtmlContent } = await import(
+        "./api/generated-index.js"
+      )
+
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url?.split("?")[0] || ""
+        const accept = req.headers.accept || ""
+
+        if (url === "/" || url === "/landing.html") {
+          return next()
+        }
+
+        if (url.startsWith("/api/")) {
+          return next()
+        }
+
+        if (!accept.includes("text/html")) {
+          return next()
+        }
+
+        if (extname(url)) {
+          return next()
+        }
+
+        const patchedRes = res as ServerResponse & {
+          status?: (code: number) => ServerResponse
+          send?: (body: any) => void
+        }
+
+        if (!patchedRes.status) {
+          patchedRes.status = function (code: number) {
+            patchedRes.statusCode = code
+            return patchedRes
+          }
+        }
+
+        if (!patchedRes.send) {
+          patchedRes.send = function (body: any) {
+            if (Buffer.isBuffer(body) || typeof body === "string") {
+              patchedRes.end(body)
+            } else {
+              patchedRes.end(JSON.stringify(body))
+            }
+          }
+        }
+
+        try {
+          let rawHtml = readFileSync(
+            path.resolve(__dirname, "index.html"),
+            "utf-8",
+          )
+          rawHtml = rawHtml.replace(
+            /src="\.\/src\/main\.tsx"/,
+            'src="/src/main.tsx"',
+          )
+          const transformed = await server.transformIndexHtml(url, rawHtml)
+          setHtmlContent(transformed)
+          await ssrHandler(req as IncomingMessage, patchedRes)
+        } catch (err) {
+          console.error("SSR handler error", err)
+          next()
+        }
+      })
+    },
+  }
+}
+
+function buildIdPlugin(): Plugin {
+  return {
+    name: "build-id",
+    transformIndexHtml(html) {
+      try {
+        const hash = execSync("git rev-parse --short HEAD").toString().trim()
+        return html.replace(
+          /<\/head>/i,
+          `  <meta name="tscircuit-build" content="${hash}"></head>`,
+        )
+      } catch {
+        return html
+      }
+    },
+  }
+}
+
 export default defineConfig(async (): Promise<UserConfig> => {
   let proxyConfig: Record<string, any> | undefined
 
@@ -71,6 +168,8 @@ export default defineConfig(async (): Promise<UserConfig> => {
         effort: 6,
       },
     }),
+    vercelSsrDevPlugin(),
+    buildIdPlugin(),
   ]
 
   if (process.env.VITE_BUNDLE_ANALYZE === "true" || 1) {