@tscircuit/fake-snippets 0.0.71 → 0.0.73

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/components/ui/tree-view.tsx

@@ -404,9 +404,9 @@ const TreeLeaf = React.forwardRef<
           default={defaultLeafIcon}
         />
         <span className="flex-grow text-sm truncate">{item.name}</span>
-        <TreeActions isSelected={selectedItemId === item.id}>
-          {item.actions}
-        </TreeActions>
+        <div onClick={(e) => e.stopPropagation()}>
+          <TreeActions isSelected={true}>{item.actions}</TreeActions>
+        </div>
       </div>
     )
   },

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-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

@@ -1,59 +1,278 @@
-import { Dispatch, SetStateAction } from "react"
+import { useEffect, useMemo, useState, useCallback } from "react"
 import { isValidFileName } from "@/lib/utils/isValidFileName"
 import {
-  CodeAndPreviewState,
-  CreateFileProps,
+  DEFAULT_CODE,
+  generateRandomPackageName,
+  PackageFile,
 } from "../components/package-port/CodeAndPreview"
+import { Package } from "fake-snippets-api/lib/db/schema"
+import {
+  usePackageFile,
+  usePackageFileById,
+  usePackageFiles,
+} from "./use-package-files"
+import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
+import { usePackageFilesLoader } from "./usePackageFilesLoader"
+import { useGlobalStore } from "./use-global-store"
+import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
+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"
+
+export interface ICreateFileProps {
+  newFileName: string
+  onError: (error: Error) => void
+}
+export interface ICreateFileResult {
+  newFileCreated: boolean
+}
+
+export interface IDeleteFileResult {
+  fileDeleted: boolean
+}
+export interface IDeleteFileProps {
+  filename: string
+  onError: (error: Error) => void
+}
+
+export function useFileManagement({
+  templateCode,
+  currentPackage,
+  fileChoosen,
+  openNewPackageSaveDialog,
+  updateLastUpdated,
+}: {
+  templateCode?: string
+  currentPackage?: Package
+  fileChoosen: string | null
+  openNewPackageSaveDialog: () => void
+  updateLastUpdated: () => void
+}) {
+  const [localFiles, setLocalFiles] = useState<PackageFile[]>([])
+  const [initialFiles, setInitialFiles] = useState<PackageFile[]>([])
+  const [currentFile, setCurrentFile] = useState<string | null>(null)
+  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
+  const loggedInUser = useGlobalStore((s) => s.session)
+  const { toast } = useToast()
+  const {
+    data: packageFilesWithContent,
+    isLoading: isLoadingPackageFilesWithContent,
+  } = usePackageFilesLoader(currentPackage)
+  const { data: packageFilesMeta, isLoading: isLoadingPackageFiles } =
+    usePackageFiles(currentPackage?.latest_package_release_id)
 
-export function useFileManagement(
-  state: CodeAndPreviewState,
-  setState: Dispatch<SetStateAction<CodeAndPreviewState>>,
-) {
-  const handleCreateFile = async ({
+  const initialCodeContent = useMemo(() => {
+    return (
+      templateCode ??
+      decodeUrlHashToText(window.location.toString()) ??
+      DEFAULT_CODE
+    )
+  }, [templateCode, currentPackage])
+  const manualEditsFileContent = useMemo(() => {
+    return (
+      localFiles?.find((file) => file.path === "manual-edits.json")?.content ||
+      "{}"
+    )
+  }, [localFiles])
+
+  const updatePackageFilesMutation = useUpdatePackageFilesMutation({
+    currentPackage,
+    localFiles,
+    initialFiles,
+    packageFilesMeta: packageFilesMeta || [],
+  })
+  const { mutate: createRelease, isLoading: isCreatingRelease } =
+    useCreatePackageReleaseMutation({
+      onSuccess: () => {
+        toast({
+          title: "Package released",
+          description: "Your package has been released successfully.",
+        })
+      },
+    })
+  const createPackageMutation = useCreatePackageMutation()
+
+  useEffect(() => {
+    if (!currentPackage || isLoadingPackageFilesWithContent) {
+      setLocalFiles([
+        {
+          path: "index.tsx",
+          content: initialCodeContent || "",
+        },
+      ])
+      setInitialFiles([])
+      setCurrentFile("index.tsx")
+      return
+    } else {
+      const targetFile = findTargetFile(
+        packageFilesWithContent || [],
+        fileChoosen,
+      )
+      setLocalFiles(packageFilesWithContent || [])
+      setInitialFiles(packageFilesWithContent || [])
+      setCurrentFile(targetFile?.path || null)
+    }
+  }, [currentPackage, isLoadingPackageFilesWithContent])
+
+  const isLoading = useMemo(() => {
+    return (
+      isLoadingPackageFilesWithContent || isLoadingPackageFiles || !localFiles
+    )
+  }, [isLoadingPackageFilesWithContent, localFiles, isLoadingPackageFiles])
+
+  const fsMap = useMemo(() => {
+    const map = localFiles.reduce(
+      (acc, file) => {
+        acc[file.path] = file.content || ""
+        return acc
+      },
+      {} as Record<string, string>,
+    )
+    return map
+  }, [localFiles, manualEditsFileContent])
+
+  const onFileSelect = (fileName: string) => {
+    if (localFiles.some((file) => file.path === fileName)) {
+      setCurrentFile(fileName)
+    } else {
+      setCurrentFile(null)
+    }
+  }
+
+  const createFile = ({
     newFileName,
-    setErrorMessage,
-    onFileSelect,
-    setNewFileName,
-    setIsCreatingFile,
-  }: CreateFileProps) => {
+    onError,
+  }: ICreateFileProps): ICreateFileResult => {
     newFileName = newFileName.trim()
     if (!newFileName) {
-      setErrorMessage("File name cannot be empty")
-      return
+      onError(new Error("File name cannot be empty"))
+      return {
+        newFileCreated: false,
+      }
     }
     if (!isValidFileName(newFileName)) {
-      setErrorMessage(
-        'Invalid file name. Avoid using special characters like <>:"/\\|?*',
-      )
-      return
+      onError(new Error("Invalid file name"))
+      return {
+        newFileCreated: false,
+      }
     }
-    setErrorMessage("")
-
-    const fileExists = state.pkgFilesWithContent.some(
-      (file) => file.path === newFileName,
-    )
 
+    const fileExists = localFiles?.some((file) => file.path === newFileName)
     if (fileExists) {
-      setErrorMessage("A file with this name already exists")
-      return
+      onError(new Error("File already exists"))
+      return {
+        newFileCreated: false,
+      }
+    }
+    const updatedFiles = [
+      ...(localFiles || []),
+      { path: newFileName, content: "" },
+    ]
+    setLocalFiles(updatedFiles)
+    onFileSelect(newFileName)
+    return {
+      newFileCreated: true,
     }
+  }
 
-    setState((prev) => {
-      const updatedFiles = [
-        ...prev.pkgFilesWithContent,
-        { path: newFileName, content: "" },
-      ]
+  const deleteFile = ({
+    filename,
+    onError,
+  }: IDeleteFileProps): IDeleteFileResult => {
+    const fileExists = localFiles?.some((file) => file.path === filename)
+    if (!fileExists) {
+      onError(new Error("File does not exist"))
       return {
-        ...prev,
-        pkgFilesWithContent: updatedFiles,
-      } as CodeAndPreviewState
+        fileDeleted: false,
+      }
+    }
+    const updatedFiles = localFiles.filter((file) => file.path !== filename)
+    setLocalFiles(updatedFiles)
+    onFileSelect(updatedFiles[0]?.path || "")
+    return {
+      fileDeleted: true,
+    }
+  }
+
+  const savePackage = async (isPrivate: boolean) => {
+    if (!isLoggedIn) {
+      toast({
+        title: "Not Logged In",
+        description: "You must be logged in to save your package.",
+      })
+      return
+    }
+
+    const newPackage = await createPackageMutation.mutateAsync({
+      name: `${loggedInUser?.github_username}/${generateRandomPackageName()}`,
+      is_private: isPrivate,
     })
-    onFileSelect(newFileName)
-    setIsCreatingFile(false)
-    setNewFileName("")
+
+    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 = () => {
+    if (!isLoggedIn) {
+      toast({
+        title: "Not Logged In",
+        description: "You must be logged in to save your package.",
+      })
+      return
+    }
+    if (!currentPackage) {
+      openNewPackageSaveDialog()
+      return
+    }
+    updatePackageFilesMutation.mutate({
+      package_name_with_version: `${currentPackage.name}@latest`,
+      ...currentPackage,
+    })
+    updateLastUpdated()
+    setInitialFiles([...localFiles])
   }
 
+  const isSaving = useMemo(() => {
+    return (
+      updatePackageFilesMutation.isLoading ||
+      createPackageMutation.isLoading ||
+      isCreatingRelease
+    )
+  }, [
+    updatePackageFilesMutation.isLoading,
+    createPackageMutation.isLoading,
+    isCreatingRelease,
+  ])
+
   return {
-    handleCreateFile,
+    fsMap,
+    createFile,
+    deleteFile,
+    saveFiles,
+    localFiles,
+    initialFiles,
+    currentFile,
+    setLocalFiles,
+    onFileSelect,
+    isLoading,
+    isSaving,
+    savePackage,
   }
 }

package/src/hooks/usePackageFilesLoader.ts

@@ -33,8 +33,8 @@ export function usePackageFilesLoader(pkg?: Package) {
         const response = await axios.post(`/package_files/get`, {
           package_file_id: file.package_file_id,
         })
-        const content = response.data.package_file?.content_text ?? ""
-        return content ? { path: file.file_path, content } : null
+        const content = response.data.package_file?.content_text
+        return { path: file.file_path, content: content ?? "" }
       },
       staleTime: 2,
     })) ?? [],

package/src/hooks/useUpdatePackageFilesMutation.ts

@@ -1,5 +1,7 @@
 import { useMutation } from "react-query"
 import type { Package } from "fake-snippets-api/lib/db/schema"
+import { useAxios } from "./use-axios"
+import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
 
 interface PackageFile {
   path: string
@@ -7,47 +9,49 @@ interface PackageFile {
 }
 
 interface UseUpdatePackageFilesMutationProps {
-  pkg: Package | undefined
-  pkgFilesWithContent: PackageFile[]
-  initialFilesLoad: PackageFile[]
-  pkgFiles: any
-  axios: any
-  toast: any
+  currentPackage: Package | undefined
+  localFiles: PackageFile[]
+  initialFiles: PackageFile[]
+  packageFilesMeta: {
+    created_at: string
+    file_path: string
+    package_file_id: string
+    package_release_id: string
+  }[]
 }
 
 export function useUpdatePackageFilesMutation({
-  pkg,
-  pkgFilesWithContent,
-  initialFilesLoad,
-  pkgFiles,
-  axios,
-  toast,
+  currentPackage,
+  localFiles,
+  initialFiles,
+  packageFilesMeta,
 }: UseUpdatePackageFilesMutationProps) {
+  const axios = useAxios()
+  const { toast } = useToast()
   return useMutation({
     mutationFn: async (
-      newpackage: Pick<Package, "package_id" | "name"> & {
+      newPackage: Pick<Package, "package_id" | "name"> & {
         package_name_with_version: string
       },
     ) => {
-      if (pkg) {
-        newpackage = { ...pkg, ...newpackage }
+      if (currentPackage) {
+        newPackage = { ...currentPackage, ...newPackage }
       }
-      if (!newpackage) throw new Error("No package to update")
+      if (!newPackage) throw new Error("No package to update")
 
       let updatedFilesCount = 0
 
-      for (const file of pkgFilesWithContent) {
-        const initialFile = initialFilesLoad.find((x) => x.path === file.path)
-        if (file.content && file.content !== initialFile?.content) {
+      for (const file of localFiles) {
+        const initialFile = initialFiles.find((x) => x.path === file.path)
+        if (file.content !== initialFile?.content) {
           const updatePkgFilePayload = {
             package_file_id:
-              pkgFiles.data?.find((x: any) => x.file_path === file.path)
+              packageFilesMeta.find((x) => x.file_path === file.path)
                 ?.package_file_id ?? null,
             content_text: file.content,
             file_path: file.path,
-            package_name_with_version: `${newpackage.name}`,
+            package_name_with_version: `${newPackage.name}`,
           }
-
           const response = await axios.post(
             "/package_files/create_or_update",
             updatePkgFilePayload,
@@ -58,10 +62,33 @@ export function useUpdatePackageFilesMutation({
           }
         }
       }
+
+      for (const initialFile of initialFiles) {
+        const fileStillExists = localFiles.some(
+          (x) => x.path === initialFile.path,
+        )
+
+        if (!fileStillExists) {
+          const fileToDelete = packageFilesMeta.find(
+            (x) => x.file_path === initialFile.path,
+          )
+
+          if (fileToDelete?.package_file_id) {
+            const response = await axios.post("/package_files/delete", {
+              package_name_with_version: `${newPackage.name}`,
+              file_path: initialFile.path,
+            })
+
+            if (response.status === 200) {
+              updatedFilesCount++
+            }
+          }
+        }
+      }
       return updatedFilesCount
     },
     onSuccess: (updatedFilesCount) => {
-      if (updatedFilesCount) {
+      if (updatedFilesCount > 0) {
         toast({
           title: `Package's ${updatedFilesCount} files saved`,
           description: "Your changes have been saved successfully.",
@@ -69,7 +96,6 @@ export function useUpdatePackageFilesMutation({
       }
     },
     onError: (error: any) => {
-      console.error("Error updating pkg files:", error)
       toast({
         title: "Error",
         description:

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 { DeploymentDetailsPage } from "@/components/PackageBuildsPage/DeploymentDetailsPage"
+
+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 />
+      <DeploymentDetailsPage />
+      <Footer />
+    </div>
+  )
+}