@tscircuit/fake-snippets 0.0.87 → 0.0.89

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

@@ -7,46 +7,47 @@ import type { QueryClient } from "react-query"
 export function populateQueryCacheWithSSRData(queryClient: QueryClient) {
   if (typeof window === "undefined") return
 
-  const ssrPackage = (window as any).SSR_PACKAGE
-  const ssrPackageRelease = (window as any).SSR_PACKAGE_RELEASE
-  const ssrPackageFiles = (window as any).SSR_PACKAGE_FILES
-
-  if (ssrPackage) {
-    // Cache package data with all possible query keys
-    queryClient.setQueryData(["package", ssrPackage.package_id], ssrPackage)
-    queryClient.setQueryData(["package", ssrPackage.name], ssrPackage)
-    queryClient.setQueryData(["packages", ssrPackage.package_id], ssrPackage)
-  }
+  const windowAny = window as any
+  const ssrPackage = windowAny.SSR_PACKAGE
+  const ssrPackageRelease = windowAny.SSR_PACKAGE_RELEASE
+  const ssrPackageFiles = windowAny.SSR_PACKAGE_FILES
 
-  if (ssrPackageRelease && ssrPackage) {
-    // Cache package release with various query patterns
-    queryClient.setQueryData(
-      [
-        "packageRelease",
-        { package_id: ssrPackage.package_id, is_latest: true },
-      ],
-      ssrPackageRelease,
-    )
+  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(
+    [
+      "packageRelease",
+      {
+        is_latest: true,
+        package_name: ssrPackage.name,
+        include_ai_review: true,
+      },
+    ],
+    ssrPackageRelease,
+  )
+
+  queryClient.setQueryData(
+    ["packageRelease", { is_latest: true, package_id: ssrPackage.package_id }],
+    ssrPackageRelease,
+  )
+
+  queryClient.setQueryData(
+    [
+      "packageRelease",
+      { package_release_id: ssrPackageRelease.package_release_id },
+    ],
+    ssrPackageRelease,
+  )
+
+  if (ssrPackageFiles && ssrPackageRelease.package_release_id) {
     queryClient.setQueryData(
-      ["packageRelease", { package_name: ssrPackage.name, is_latest: true }],
-      ssrPackageRelease,
+      ["packageFiles", ssrPackageRelease.package_release_id],
+      ssrPackageFiles,
     )
-    if (ssrPackageRelease.package_release_id) {
-      queryClient.setQueryData(
-        [
-          "packageRelease",
-          { package_release_id: ssrPackageRelease.package_release_id },
-        ],
-        ssrPackageRelease,
-      )
-    }
-
-    // Cache package files if available
-    if (ssrPackageFiles && ssrPackageRelease.package_release_id) {
-      queryClient.setQueryData(
-        ["packageFiles", ssrPackageRelease.package_release_id],
-        ssrPackageFiles,
-      )
-    }
   }
 }

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/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(),
+        )
+      },
     },
   )
 

package/src/pages/user-profile.tsx

@@ -55,7 +55,7 @@ export const UserProfilePage = () => {
   )
 
   // use the username stored in the database so the correct case is displayed
-  const githubUsername = account?.account.github_username || username
+  const githubUsername = account?.account?.github_username || username
   const isCurrentUserProfile = githubUsername === session?.github_username
 
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =

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/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) {