@tscircuit/fake-snippets 0.0.107 → 0.0.109

package/src/components/preview/index.tsx

@@ -1,13 +1,14 @@
 export { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 export { BuildsList } from "./BuildsList"
 export { PackageReleasesDashboard } from "./PackageReleasesDashboard"
-import {
-  Package,
-  PackageBuild,
-  PackageRelease,
-} from "fake-snippets-api/lib/db/schema"
+import { PackageBuild } from "fake-snippets-api/lib/db/schema"
 import { Clock, CheckCircle, AlertCircle, Loader2 } from "lucide-react"
-export const getBuildStatus = (build: PackageBuild | null) => {
+export const getBuildStatus = (
+  build?: PackageBuild | null,
+): {
+  status: "pending" | "building" | "success" | "error" | "queued"
+  label: string
+} => {
   if (!build) {
     return { status: "pending", label: "No builds" }
   }
@@ -25,154 +26,20 @@ export const getBuildStatus = (build: PackageBuild | null) => {
   ) {
     return { status: "building", label: "Building" }
   }
-  if (build?.build_completed_at && build?.transpilation_completed_at) {
+  if (
+    !build?.build_error &&
+    !build?.transpilation_error &&
+    !build?.circuit_json_build_error &&
+    !build?.build_in_progress &&
+    !build?.transpilation_in_progress &&
+    !build?.circuit_json_build_in_progress &&
+    build?.transpilation_completed_at
+  ) {
     return { status: "success", label: "Ready" }
   }
   return { status: "queued", label: "Queued" }
 }
 
-export const MOCK_PACKAGE_BUILDS: PackageBuild[] = [
-  {
-    package_build_id: "pb_1a2b3c4d",
-    package_release_id: "pr_5e6f7g8h",
-    created_at: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 35,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 32,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error: null,
-    circuit_json_build_in_progress: false,
-    circuit_json_build_started_at: new Date(
-      Date.now() - 1000 * 60 * 32,
-    ).toISOString(),
-    circuit_json_build_completed_at: new Date(
-      Date.now() - 1000 * 60 * 30,
-    ).toISOString(),
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
-    build_completed_at: new Date(Date.now() - 1000 * 60 * 25).toISOString(),
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 25,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: "https://preview.tscircuit.com/pb_1a2b3c4d",
-    branch_name: "main",
-    commit_message: "Add new LED component with improved brightness control",
-    commit_author: "john.doe",
-  },
-  {
-    package_build_id: "pb_9i8j7k6l",
-    package_release_id: "pr_5m4n3o2p",
-    created_at: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 2,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 2 + 1000 * 60 * 3,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error: null,
-    circuit_json_build_in_progress: true,
-    circuit_json_build_started_at: new Date(
-      Date.now() - 1000 * 60 * 5,
-    ).toISOString(),
-    circuit_json_build_completed_at: null,
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: null,
-    build_completed_at: null,
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 2,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: null,
-    branch_name: "feature/resistor-update",
-    commit_message: "Update resistor component with new tolerance values",
-    commit_author: "jane.smith",
-  },
-  {
-    package_build_id: "pb_1q2w3e4r",
-    package_release_id: "pr_5t6y7u8i",
-    created_at: new Date(Date.now() - 1000 * 60 * 60 * 6).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 6,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 6 + 1000 * 60 * 2,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error:
-      "TypeScript compilation failed: Cannot find module 'missing-dependency'",
-    circuit_json_build_in_progress: false,
-    circuit_json_build_started_at: null,
-    circuit_json_build_completed_at: null,
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: null,
-    build_completed_at: null,
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 6,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: null,
-    branch_name: "hotfix/critical-bug",
-    commit_message: "Fix critical issue with capacitor placement",
-    commit_author: "alex.wilson",
-  },
-  {
-    package_build_id: "pb_9o8i7u6y",
-    package_release_id: "pr_5t4r3e2w",
-    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
-    transpilation_in_progress: false,
-    transpilation_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24,
-    ).toISOString(),
-    transpilation_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 4,
-    ).toISOString(),
-    transpilation_logs: [],
-    transpilation_error: null,
-    circuit_json_build_in_progress: false,
-    circuit_json_build_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 4,
-    ).toISOString(),
-    circuit_json_build_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 8,
-    ).toISOString(),
-    circuit_json_build_logs: [],
-    circuit_json_build_error: null,
-    build_in_progress: false,
-    build_started_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 8,
-    ).toISOString(),
-    build_completed_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 12,
-    ).toISOString(),
-    build_error: null,
-    build_error_last_updated_at: new Date(
-      Date.now() - 1000 * 60 * 60 * 24 + 1000 * 60 * 12,
-    ).toISOString(),
-    build_logs: null,
-    preview_url: "https://preview.tscircuit.com/pb_9o8i7u6y",
-    branch_name: "main",
-    commit_message: "Initial project setup with basic components",
-    commit_author: "sarah.johnson",
-  },
-]
-
 export const StatusIcon = ({ status }: { status: string }) => {
   switch (status) {
     case "success":
@@ -185,7 +52,3 @@ export const StatusIcon = ({ status }: { status: string }) => {
       return <Clock className="w-4 h-4 text-gray-500" />
   }
 }
-
-export const getLatestBuildForPackage = (pkg: Package): PackageBuild => {
-  return MOCK_PACKAGE_BUILDS[0]
-}

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

@@ -1,41 +1,16 @@
-import { useEffect, useState } from "react"
-import { useParams } from "wouter"
-import { usePackageById } from "./use-package-by-package-id"
-import { usePackageByName } from "./use-package-by-package-name"
-import { useUrlParams } from "./use-url-params"
+import { useCurrentPackageInfo } from "./use-current-package-info"
 
 export const useCurrentPackageId = (): {
   packageId: string | null
   isLoading: boolean
   error: (Error & { status: number }) | null
 } => {
-  const urlParams = useUrlParams()
-  const urlPackageId = urlParams.package_id
-  const wouter = useParams()
-  const [packageIdFromUrl, setPackageId] = useState<string | null>(urlPackageId)
-
-  useEffect(() => {
-    if (urlPackageId) {
-      setPackageId(urlPackageId)
-    }
-  }, [urlPackageId])
-
-  const packageName =
-    wouter.author && wouter.packageName
-      ? `${wouter.author}/${wouter.packageName}`
-      : null
-
-  const {
-    data: packageByName,
-    isLoading: isLoadingPackageByName,
-    error: errorPackageByName,
-  } = usePackageByName(packageName)
-
-  const packageId = packageIdFromUrl ?? packageByName?.package_id ?? null
+  const { packageInfo, isLoading, error } = useCurrentPackageInfo()
+  const packageId = packageInfo?.package_id ?? null
 
   return {
     packageId,
-    isLoading: isLoadingPackageByName,
-    error: errorPackageByName,
+    isLoading,
+    error,
   }
 }

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

@@ -1,8 +1,32 @@
-import { useCurrentPackageId } from "./use-current-package-id"
+import { useParams } from "wouter"
 import { usePackageById } from "./use-package-by-package-id"
+import { usePackageByName } from "./use-package-by-package-name"
+import { useUrlParams } from "./use-url-params"
+import type { Package } from "fake-snippets-api/lib/db/schema"
 
-export const useCurrentPackageInfo = () => {
-  const { packageId } = useCurrentPackageId()
-  const { data: packageInfo, ...rest } = usePackageById(packageId)
-  return { packageInfo, ...rest }
+export const useCurrentPackageInfo = (): {
+  packageInfo: Package | undefined
+  isLoading: boolean
+  error: (Error & { status: number }) | null
+  refetch: () => Promise<unknown>
+} => {
+  const urlParams = useUrlParams()
+  const packageIdFromQuery = urlParams.package_id ?? null
+
+  const { author, packageName } = useParams()
+  const packageSlug = author && packageName ? `${author}/${packageName}` : null
+
+  const queryById = usePackageById(packageIdFromQuery)
+  const queryByName = usePackageByName(packageSlug)
+
+  const data = queryById.data ?? queryByName.data
+  const isLoading = queryById.isLoading || queryByName.isLoading
+  const error =
+    (queryById.error as (Error & { status: number }) | null) ??
+    (queryByName.error as (Error & { status: number }) | null) ??
+    null
+
+  const refetch = packageIdFromQuery ? queryById.refetch : queryByName.refetch
+
+  return { packageInfo: data, isLoading, error, refetch }
 }

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

@@ -28,7 +28,7 @@ export const useGlobalStore = create<Store>()(
   ),
 )
 
-useGlobalStore.subscribe((state, prevState) => {
+useGlobalStore.subscribe((state) => {
   ;(window as any).globalStore = state
   window.TSCIRCUIT_REGISTRY_TOKEN = state.session?.token ?? null
 })

package/src/hooks/useFileManagement.ts

@@ -6,7 +6,7 @@ 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 { useOptimizedPackageFilesLoader } from "./useOptimizedPackageFilesLoader"
 import { useGlobalStore } from "./use-global-store"
 import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
 import { useUpdatePackageFilesMutation } from "./useUpdatePackageFilesMutation"
@@ -15,6 +15,7 @@ import { useCreatePackageMutation } from "./use-create-package-mutation"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import { encodeFsMapToUrlHash } from "@/lib/encodeFsMapToUrlHash"
 import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
+import { isComponentExported } from "@/lib/utils/isComponentExported"
 
 export interface ICreateFileProps {
   newFileName: string
@@ -47,27 +48,37 @@ export interface IRenameFileResult {
 export function useFileManagement({
   templateCode,
   currentPackage,
-  fileChoosen,
   openNewPackageSaveDialog,
   updateLastUpdated,
+  urlParams,
 }: {
   templateCode?: string
   currentPackage?: Package
-  fileChoosen: string | null
   openNewPackageSaveDialog: () => void
+  urlParams: Record<string, string>
   updateLastUpdated: () => void
 }) {
+  const fileChosen = urlParams.file_path ?? null
   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 debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const {
-    data: packageFilesWithContent,
-    isLoading: isLoadingPackageFilesWithContent,
-  } = usePackageFilesLoader(currentPackage)
+    priorityFile,
+    allFiles: packageFilesWithContent,
+    isPriorityLoading,
+    areAllFilesLoading: isLoadingPackageFilesWithContent,
+    totalFilesCount,
+    loadedFilesCount,
+    isPriorityFileFetched,
+  } = useOptimizedPackageFilesLoader(
+    currentPackage,
+    fileChosen,
+    urlParams.package_id,
+  )
+
   const { data: packageFilesMeta, isLoading: isLoadingPackageFiles } =
     usePackageFiles(currentPackage?.latest_package_release_id)
   const initialCodeContent = useMemo(() => {
@@ -127,7 +138,7 @@ export function useFileManagement({
   })
 
   useEffect(() => {
-    if (!currentPackage || isLoadingPackageFilesWithContent) {
+    if (!currentPackage || isPriorityLoading) {
       const decodedFsMap = decodeUrlHashToFsMap(window.location.toString())
 
       if (decodedFsMap && Object.keys(decodedFsMap).length > 0) {
@@ -137,38 +148,114 @@ export function useFileManagement({
             content: String(content),
           }),
         )
-        const targetFile = findTargetFile(filesFromUrl, fileChoosen)
+        const targetFile = findTargetFile(filesFromUrl, fileChosen)
         setLocalFiles(filesFromUrl)
         setInitialFiles([])
         setCurrentFile(targetFile?.path || filesFromUrl[0]?.path || null)
         return
       }
 
-      setLocalFiles([
-        {
-          path: "index.tsx",
-          content: initialCodeContent || "",
-        },
-      ])
-      setInitialFiles([])
-      setCurrentFile("index.tsx")
+      if (!urlParams.package_id) {
+        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])
+  }, [currentPackage, isPriorityLoading])
+
+  useEffect(() => {
+    if (priorityFile && !isPriorityLoading && currentPackage) {
+      setLocalFiles((prev) => {
+        const existingIndex = prev.findIndex(
+          (f) => f.path === priorityFile.path,
+        )
+        if (existingIndex >= 0) {
+          const updated = [...prev]
+          updated[existingIndex] = priorityFile
+          return updated
+        }
+        return [...prev, priorityFile]
+      })
+
+      setCurrentFile((prevCurrentFile) => {
+        if (fileChosen && priorityFile.path === fileChosen) {
+          return priorityFile.path
+        } else if (!prevCurrentFile) {
+          return priorityFile.path
+        } else {
+          // If priority file is index.tsx, always update to it
+          const isPriorityFileBetter = priorityFile.path === "index.tsx"
+          if (isPriorityFileBetter) {
+            return priorityFile.path
+          }
+        }
+        return prevCurrentFile
+      })
+    }
+  }, [priorityFile, isPriorityLoading, currentPackage, fileChosen])
+
+  useEffect(() => {
+    if (packageFilesWithContent.length > 0 && currentPackage) {
+      setLocalFiles(packageFilesWithContent)
+      setInitialFiles(packageFilesWithContent)
+
+      if (fileChosen) {
+        const targetFile =
+          packageFilesWithContent.find((f) => f.path === fileChosen) ||
+          findTargetFile(packageFilesWithContent, fileChosen)
+        if (targetFile) {
+          setCurrentFile((prevCurrentFile) => {
+            return targetFile.path !== prevCurrentFile
+              ? targetFile.path
+              : prevCurrentFile
+          })
+        }
+      } else {
+        setCurrentFile((prevCurrentFile) => {
+          if (!prevCurrentFile) {
+            // Wait for priority file to load before making selection to avoid flicker
+            // Only select if we have a good candidate (tsx/ts file) or priority file isn't loading
+            const targetFile = findTargetFile(
+              packageFilesWithContent,
+              fileChosen,
+            )
+            // Only consider it a "good enough" candidate if it's index.tsx
+            // Otherwise, wait for the actual priority file (index.tsx) to load
+            const isTopPriorityFile =
+              targetFile && targetFile.path === "index.tsx"
+            const shouldWaitForPriority =
+              isPriorityLoading && !isTopPriorityFile
+
+            if (shouldWaitForPriority) {
+              return prevCurrentFile // Keep null to avoid flicker
+            }
+
+            return targetFile ? targetFile.path : prevCurrentFile
+          }
+          return prevCurrentFile
+        })
+      }
+    }
+  }, [
+    packageFilesWithContent.length,
+    currentPackage,
+    fileChosen,
+    isPriorityLoading,
+  ])
 
   const isLoading = useMemo(() => {
-    return (
-      isLoadingPackageFilesWithContent || isLoadingPackageFiles || !localFiles
-    )
-  }, [isLoadingPackageFilesWithContent, localFiles, isLoadingPackageFiles])
+    return isPriorityLoading || isLoadingPackageFiles
+  }, [isPriorityLoading, isLoadingPackageFiles])
+
+  const isFullyLoaded = useMemo(() => {
+    return !isLoadingPackageFilesWithContent && !isLoadingPackageFiles
+  }, [isLoadingPackageFilesWithContent, isLoadingPackageFiles])
 
   const fsMap = useMemo(() => {
     const map = localFiles.reduce(
@@ -178,6 +265,7 @@ export function useFileManagement({
       },
       {} as Record<string, string>,
     )
+
     return map
   }, [localFiles, manualEditsFileContent])
 
@@ -215,7 +303,6 @@ export function useFileManagement({
       }
     }
 
-    // Check if file already exists
     const fileExists = localFiles?.some((file) => file.path === newFileName)
     if (fileExists) {
       onError(new Error(`File '${newFileName}' already exists`))
@@ -224,7 +311,6 @@ export function useFileManagement({
       }
     }
 
-    // Ensure file name is not empty after path construction
     const fileName = newFileName.split("/").pop() || ""
     if (!fileName.trim()) {
       onError(new Error("File name cannot be empty"))
@@ -282,7 +368,6 @@ export function useFileManagement({
       }
     }
 
-    // Extract just the filename from the path for validation
     const fileNameOnly = newFilename.split("/").pop() || ""
     if (!isValidFileName(fileNameOnly)) {
       onError(new Error("Invalid file name"))
@@ -395,7 +480,6 @@ export function useFileManagement({
 
   const saveFiles = () => {
     if (!isLoggedIn) {
-      // For non-logged-in users, trigger immediate URL save
       if (debounceTimeoutRef.current) {
         clearTimeout(debounceTimeoutRef.current)
       }
@@ -433,20 +517,55 @@ export function useFileManagement({
     isCreatingRelease,
   ])
 
+  const currentFileCode = useMemo(
+    () =>
+      localFiles.find((x) => x.path === currentFile)?.content ?? DEFAULT_CODE,
+    [localFiles, currentFile],
+  )
+  const mainComponentPath = useMemo(() => {
+    const isComponentExportedInCurrentFile =
+      isComponentExported(currentFileCode)
+
+    const selectedComponent =
+      (currentFile?.endsWith(".tsx") || currentFile?.endsWith(".ts")) &&
+      !!localFiles.some((x) => x.path === currentFile) &&
+      isComponentExportedInCurrentFile
+        ? currentFile
+        : localFiles.find((x) => {
+            const isComponentExportedInFile = isComponentExported(x.content)
+            return (
+              x.path.endsWith(".tsx") ||
+              (x.path.endsWith(".ts") && isComponentExportedInFile)
+            )
+          })?.path || localFiles[0]?.path
+
+    return selectedComponent
+  }, [currentFile, localFiles, currentFileCode, packageFilesWithContent])
+
+  const priorityFileFetched = useMemo(() => {
+    return urlParams.package_id && isPriorityFileFetched
+  }, [urlParams.package_id, isPriorityFileFetched])
+
   return {
     fsMap,
     createFile,
+    priorityFileFetched,
     deleteFile,
     renameFile,
     saveFiles,
     localFiles,
+    mainComponentPath,
+    currentFileCode,
     initialFiles,
     currentFile,
     setLocalFiles,
     onFileSelect,
     isLoading,
+    isFullyLoaded,
     isSaving,
     savePackage,
     packageFilesMeta,
+    totalFilesCount,
+    loadedFilesCount,
   }
 }