@tscircuit/fake-snippets 0.0.72 → 0.0.74

package/src/components/PackageCard.tsx

@@ -12,7 +12,6 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
 import { timeAgo } from "@/lib/utils/timeAgo"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 import { ImageWithFallback } from "./ImageWithFallback"
 
 export interface PackageCardProps {
@@ -57,10 +56,6 @@ export const PackageCard: React.FC<PackageCardProps> = ({
     }
   }
 
-  const fsMapHash = useGetFsMapHashForPackage(
-    pkg.latest_package_release_id ?? "",
-  )
-
   const cardContent = (
     <div
       className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
@@ -70,11 +65,7 @@ export const PackageCard: React.FC<PackageCardProps> = ({
           className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden`}
         >
           <ImageWithFallback
-            src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?${new URLSearchParams(
-              {
-                fs_sha: fsMapHash ?? "",
-              },
-            ).toString()}`}
+            src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?fs_sha=${pkg.latest_package_release_fs_sha}`}
             alt={`${pkg.unscoped_name} PCB image`}
             className={`object-cover h-full w-full ${imageTransform}`}
           />

package/src/components/TrendingPackagesCarousel.tsx

@@ -5,16 +5,11 @@ import { Link } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { useRef, useState } from "react"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 
 const CarouselItem = ({
   pkg,
   apiBaseUrl,
 }: { pkg: Package; apiBaseUrl: string }) => {
-  const fsMapHash = useGetFsMapHashForPackage(
-    pkg.latest_package_release_id ?? "",
-  )
-
   return (
     <Link href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}>
       <div className="flex-shrink-0 w-[200px] bg-white p-3 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
@@ -22,17 +17,11 @@ const CarouselItem = ({
           {pkg.owner_github_username}/{pkg.unscoped_name}
         </div>
         <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
-          {fsMapHash && (
-            <img
-              src={`${apiBaseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?${new URLSearchParams(
-                {
-                  fs_sha: fsMapHash,
-                },
-              ).toString()}`}
-              alt="PCB preview"
-              className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
-            />
-          )}
+          <img
+            src={`${apiBaseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?fs_map=${pkg.latest_package_release_fs_sha}`}
+            alt="PCB preview"
+            className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
+          />
         </div>
         <div className="flex items-center text-xs text-gray-500">
           <StarFilledIcon className="w-3 h-3 mr-1" />

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -72,7 +72,7 @@ const MobileSidebar = ({
 
   const { availableViews } = usePreviewImages({
     packageName: packageInfo?.name,
-    fsMapHash: packageInfo?.latest_package_release_id ?? "",
+    fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
   })
 
   const handleViewClick = useCallback(

package/src/components/ViewPackagePage/components/preview-image-squares.tsx

@@ -1,11 +1,10 @@
 "use client"
 import { Skeleton } from "@/components/ui/skeleton"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 import { usePreviewImages } from "@/hooks/use-preview-images"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 
 interface ViewPlaceholdersProps {
-  packageInfo?: Pick<Package, "name" | "latest_package_release_id">
+  packageInfo?: Pick<Package, "name" | "latest_package_release_fs_sha">
   onViewChange?: (view: "3d" | "pcb" | "schematic") => void
 }
 
@@ -13,12 +12,9 @@ export default function PreviewImageSquares({
   packageInfo,
   onViewChange,
 }: ViewPlaceholdersProps) {
-  const fsMapHash = useGetFsMapHashForPackage(
-    packageInfo?.latest_package_release_id ?? "",
-  )
   const { availableViews } = usePreviewImages({
     packageName: packageInfo?.name,
-    fsMapHash: fsMapHash ?? "",
+    fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
   })
 
   const handleViewClick = (viewId: string) => {

package/src/components/package-port/CodeAndPreview.tsx

@@ -164,9 +164,9 @@ export function CodeAndPreview({ pkg }: Props) {
     )
   }
 
-  if ((!pkg && urlParams.package_id) || isLoading) {
+  if (urlParams.package_id && (!pkg || isLoading)) {
     return (
-      <div className="flex items-center justify-center h-64">
+      <div className="flex items-center justify-center h-[60vh]">
         <div className="flex flex-col items-center justify-center">
           <div className="text-lg text-gray-500 mb-4">Loading</div>
           <Loader2 className="w-16 h-16 animate-spin text-gray-400" />
@@ -200,6 +200,7 @@ export function CodeAndPreview({ pkg }: Props) {
           )}
         >
           <CodeEditor
+            isSaving={isSaving}
             handleCreateFile={createFile}
             handleDeleteFile={deleteFile}
             currentFile={currentFile}

package/src/components/package-port/CodeEditor.tsx

@@ -49,6 +49,7 @@ export const CodeEditor = ({
   onCodeChange,
   readOnly = false,
   files = [],
+  isSaving = false,
   isStreaming = false,
   showImportAndFormatButtons = true,
   onFileContentChanged,
@@ -60,6 +61,7 @@ export const CodeEditor = ({
 }: {
   onCodeChange: (code: string, filename?: string) => void
   files: PackageFile[]
+  isSaving?: boolean
   handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
   handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
   readOnly?: boolean
@@ -242,7 +244,7 @@ export const CodeEditor = ({
         ? json()
         : javascript({ typescript: true, jsx: true }),
       keymap.of([indentWithTab]),
-      EditorState.readOnly.of(readOnly),
+      EditorState.readOnly.of(readOnly || isSaving),
       EditorView.updateListener.of((update) => {
         if (update.docChanged) {
           const newContent = update.state.doc.toString()
@@ -416,7 +418,7 @@ export const CodeEditor = ({
                       const end = start + match[0].length
                       decorations.push(
                         Decoration.mark({
-                          class: "cm-underline",
+                          class: "cm-underline cursor-pointer",
                         }).range(start, end),
                       )
                     }
@@ -448,7 +450,7 @@ export const CodeEditor = ({
     return () => {
       view.destroy()
     }
-  }, [!isStreaming, currentFile, code !== "", Boolean(highlighter)])
+  }, [!isStreaming, currentFile, code !== "", Boolean(highlighter), isSaving])
 
   const updateCurrentEditorContent = (newContent: string) => {
     if (viewRef.current) {

package/src/components/package-port/EditorNav.tsx

@@ -207,19 +207,23 @@ export default function EditorNav({
         <div className="flex items-center space-x-1">
           {pkg && (
             <>
-              <Link
-                className="text-blue-500 font-semibold hover:underline"
-                href={`/${pkg.owner_github_username}`}
-              >
-                {pkg.owner_github_username}
-              </Link>
-              <span className="px-0.5 text-gray-500">/</span>
-              <Link
-                className="text-blue-500  font-semibold hover:underline"
-                href={`/${pkg.name}`}
-              >
-                {pkg.unscoped_name}
-              </Link>
+              <div className="flex items-center space-x-1 overflow-hidden">
+                <Link
+                  className="text-blue-500 font-semibold hover:underline truncate"
+                  href={`/${pkg.owner_github_username}`}
+                  title={pkg.owner_github_username || ""}
+                >
+                  {pkg.owner_github_username}
+                </Link>
+                <span className="px-0.5 text-gray-500">/</span>
+                <Link
+                  className="text-blue-500 font-semibold hover:underline truncate"
+                  href={`/${pkg.name}`}
+                  title={pkg.unscoped_name}
+                >
+                  {pkg.unscoped_name}
+                </Link>
+              </div>
               {pkg.star_count !== undefined && (
                 <span className="ml-2 text-gray-500 text-xs flex items-center">
                   <Star className="w-3 h-3 mr-1" />

package/src/hooks/use-create-package-mutation.ts

@@ -2,7 +2,6 @@ import type { Package } from "fake-snippets-api/lib/db/schema"
 import { useMutation } from "react-query"
 import { useAxios } from "./use-axios"
 import { useGlobalStore } from "./use-global-store"
-import { useUrlParams } from "./use-url-params"
 
 export const useCreatePackageMutation = ({
   onSuccess,
@@ -42,13 +41,7 @@ export const useCreatePackageMutation = ({
     },
     {
       onSuccess: (pkg: Package) => {
-        const url = new URL(window.location.href)
-        url.searchParams.set("package_id", pkg.package_id)
-        url.searchParams.delete("template")
-        url.searchParams.delete("should_create_package")
-        window.history.pushState({}, "", url.toString())
         onSuccess?.(pkg)
-        window.dispatchEvent(new Event("popstate"))
       },
       onError: (error: any) => {
         console.error("Error creating package:", error)

package/src/hooks/use-current-package-id.ts

@@ -31,17 +31,11 @@ export const useCurrentPackageId = (): {
     error: errorPackageByName,
   } = usePackageByName(packageName)
 
-  const {
-    data: packageById,
-    isLoading: isLoadingPackageById,
-    error: errorPackageById,
-  } = usePackageById(packageIdFromUrl)
-
   const packageId = packageIdFromUrl ?? packageByName?.package_id ?? null
 
   return {
     packageId,
-    isLoading: isLoadingPackageByName || isLoadingPackageById,
-    error: errorPackageByName || errorPackageById,
+    isLoading: isLoadingPackageByName,
+    error: errorPackageByName,
   }
 }

package/src/hooks/use-current-package-release.ts

@@ -0,0 +1,28 @@
+import { useParams } from "wouter"
+import { useCurrentPackageId } from "./use-current-package-id"
+import { useUrlParams } from "./use-url-params"
+import { usePackageRelease } from "./use-package-release"
+
+export const useCurrentPackageRelease = () => {
+  const { packageId } = useCurrentPackageId()
+  const urlParams = useUrlParams()
+  const { author, packageName } = useParams()
+
+  const version = urlParams.version
+  const releaseId = urlParams.package_release_id
+
+  let query: Parameters<typeof usePackageRelease>[0] | null = null
+
+  if (releaseId) {
+    query = { package_release_id: releaseId }
+  } else if (version && author && packageName) {
+    query = { package_name_with_version: `${author}/${packageName}@${version}` }
+  } else if (author && packageName) {
+    query = { package_name: `${author}/${packageName}`, is_latest: true }
+  } else if (packageId) {
+    query = { package_id: packageId, is_latest: true }
+  }
+
+  const { data: packageRelease, ...rest } = usePackageRelease(query)
+  return { packageRelease, ...rest }
+}

package/src/hooks/use-preview-images.ts

@@ -22,33 +22,21 @@ export function usePreviewImages({
       id: "3d",
       label: "3D View",
       imageUrl: packageName
-        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/3d.png?${new URLSearchParams(
-            {
-              fs_sha: fsMapHash ?? "",
-            },
-          ).toString()}`
+        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/3d.png?fs_sha=${fsMapHash}`
         : undefined,
     },
     {
       id: "pcb",
       label: "PCB View",
       imageUrl: packageName
-        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/pcb.png?${new URLSearchParams(
-            {
-              fs_sha: fsMapHash ?? "",
-            },
-          ).toString()}`
+        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/pcb.png?fs_sha=${fsMapHash}`
         : undefined,
     },
     {
       id: "schematic",
       label: "Schematic View",
       imageUrl: packageName
-        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/schematic.png?${new URLSearchParams(
-            {
-              fs_sha: fsMapHash ?? "",
-            },
-          ).toString()}`
+        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/schematic.png?fs_sha=${fsMapHash}`
         : undefined,
     },
   ]

package/src/hooks/useFileManagement.ts

@@ -91,7 +91,31 @@ export function useFileManagement({
         })
       },
     })
-  const createPackageMutation = useCreatePackageMutation()
+  const createPackageMutation = useCreatePackageMutation({
+    onSuccess: (newPackage) => {
+      createRelease(
+        {
+          package_name_with_version: `${newPackage.name}@latest`,
+        },
+        {
+          onSuccess: () => {
+            updatePackageFilesMutation.mutate({
+              package_name_with_version: `${newPackage.name}@latest`,
+              ...newPackage,
+            })
+            const url = new URL(window.location.href)
+            url.searchParams.set("package_id", newPackage.package_id)
+            url.searchParams.delete("template")
+            url.searchParams.delete("should_create_package")
+            window.history.pushState({}, "", url.toString())
+            window.dispatchEvent(new Event("popstate"))
+            updateLastUpdated()
+            setInitialFiles([...localFiles])
+          },
+        },
+      )
+    },
+  })
 
   useEffect(() => {
     if (!currentPackage || isLoadingPackageFilesWithContent) {
@@ -204,29 +228,10 @@ export function useFileManagement({
       return
     }
 
-    const newPackage = await createPackageMutation.mutateAsync({
+    await createPackageMutation.mutateAsync({
       name: `${loggedInUser?.github_username}/${generateRandomPackageName()}`,
       is_private: isPrivate,
     })
-
-    if (newPackage) {
-      createRelease(
-        {
-          package_name_with_version: `${newPackage.name}@latest`,
-        },
-        {
-          onSuccess: () => {
-            updatePackageFilesMutation.mutate({
-              package_name_with_version: `${newPackage.name}@latest`,
-              ...newPackage,
-            })
-            updateLastUpdated()
-            setInitialFiles([...localFiles])
-          },
-        },
-      )
-    }
-    updateLastUpdated()
   }
 
   const saveFiles = () => {

package/src/lib/utils/checkIfManualEditsImported.ts

@@ -1,8 +1,17 @@
+import { findTargetFile } from "./findTargetFile"
+
 export const checkIfManualEditsImported = (
   files: Record<string, string>,
   file: string = "index.tsx",
 ) => {
   if (!files[file]) return false
+  const targetFile = findTargetFile(
+    Object.keys(files).map((f) => ({ path: f, content: files[f] })),
+    null,
+  )
+  if (targetFile && file !== targetFile.path) {
+    return false
+  }
   if (!file.endsWith(".tsx") && !file.endsWith(".ts")) return false
   const importRegex =
     /import\s+(?:\*\s+as\s+)?([a-zA-Z_$][\w$]*)\s+from\s+["'](?:\.\/)?manual-edits\.json["'];?/

package/src/pages/editor.tsx

@@ -4,14 +4,10 @@ import Header from "@/components/Header"
 import { Helmet } from "react-helmet-async"
 import { useCurrentPackageId } from "@/hooks/use-current-package-id"
 import { usePackage } from "@/hooks/use-package"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 
 export const EditorPage = () => {
   const { packageId } = useCurrentPackageId()
   const { data: pkg, isLoading, error } = usePackage(packageId)
-  const fsMapHash = useGetFsMapHashForPackage(
-    pkg?.latest_package_release_id ?? "",
-  )
 
   return (
     <div className="overflow-x-hidden">
@@ -27,16 +23,12 @@ export const EditorPage = () => {
             />
             <meta
               property="og:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?${new URLSearchParams(
-                {
-                  fs_sha: fsMapHash ?? "",
-                },
-              ).toString()}`}
+              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
             <meta name="twitter:card" content="summary_large_image" />
             <meta
               name="twitter:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png`}
+              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
           </>
         )}

package/src/pages/package-builds.tsx

@@ -0,0 +1,33 @@
+import { CodeAndPreview } from "@/components/package-port/CodeAndPreview"
+import Footer from "@/components/Footer"
+import Header from "@/components/Header"
+import { usePackage } from "@/hooks/use-package"
+import { Helmet } from "react-helmet-async"
+import { useCurrentPackageId } from "@/hooks/use-current-package-id"
+import { NotFound } from "@/components/NotFound"
+import { ErrorOutline } from "@/components/ErrorOutline"
+import { PackageBuildDetailsPage } from "@/components/PackageBuildsPage/PackageBuildDetailsPage"
+
+export const EditorPage = () => {
+  const { packageId } = useCurrentPackageId()
+  const { data: pkg, error } = usePackage(packageId)
+  const uuid4RegExp = new RegExp(
+    /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/,
+  )
+
+  return (
+    <div className="overflow-x-hidden">
+      <Helmet>
+        <title>{pkg ? `${pkg.name} Package Builds` : "Package Builds"}</title>
+        {pkg && (
+          <>
+            <meta property="og:title" content={`${pkg.name} Package Builds`} />
+          </>
+        )}
+      </Helmet>
+      <Header />
+      <PackageBuildDetailsPage />
+      <Footer />
+    </div>
+  )
+}

package/src/pages/package-editor.tsx

@@ -6,14 +6,10 @@ import { Helmet } from "react-helmet-async"
 import { useCurrentPackageId } from "@/hooks/use-current-package-id"
 import { NotFound } from "@/components/NotFound"
 import { ErrorOutline } from "@/components/ErrorOutline"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 
 export const EditorPage = () => {
   const { packageId } = useCurrentPackageId()
   const { data: pkg, error } = usePackage(packageId)
-  const fsMapHash = useGetFsMapHashForPackage(
-    pkg?.latest_package_release_id ?? "",
-  )
   const uuid4RegExp = new RegExp(
     /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/,
   )
@@ -30,20 +26,12 @@ export const EditorPage = () => {
             />
             <meta
               property="og:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?${new URLSearchParams(
-                {
-                  fs_sha: fsMapHash ?? "",
-                },
-              ).toString()}`}
+              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
             <meta name="twitter:card" content="summary_large_image" />
             <meta
               name="twitter:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?${new URLSearchParams(
-                {
-                  fs_sha: fsMapHash ?? "",
-                },
-              ).toString()}`}
+              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
           </>
         )}

package/src/hooks/use-get-fsmap-hash-for-package.ts

@@ -1,19 +0,0 @@
-import { usePackageFiles } from "@/hooks/use-package-files"
-import md5 from "md5"
-
-export const useGetFsMapHashForPackage = (packageReleaseId: string) => {
-  const { data: pkgFilesList } = usePackageFiles(packageReleaseId)
-
-  if (!pkgFilesList) {
-    console.error(
-      `No package files found for package release ${packageReleaseId}`,
-    )
-    return null
-  }
-  const fsMap = new Map<string, string>()
-  for (const file of pkgFilesList) {
-    fsMap.set(file.file_path, file.content_text ?? "")
-  }
-  const fsMapHash = md5(JSON.stringify(fsMap))
-  return `md5-${fsMapHash}`
-}