prepare for determining the starting file path on the server

Author: SeanCassiere

app/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx

@@ -44,12 +44,15 @@ const fileQueryOptions = (repo: string, branch: string, filePath: string) => {
 const repoDirApiContentsQueryOptions = (
   repo: string,
   branch: string,
-  startingPath: string
+  startingPath: string,
+  candidateStartingFilePath: string
 ) =>
   queryOptions({
     queryKey: ['repo-api-contents', repo, branch, startingPath],
     queryFn: () =>
-      fetchRepoDirectoryContents({ data: { repo, branch, startingPath } }),
+      fetchRepoDirectoryContents({
+        data: { repo, branch, startingPath, candidateStartingFilePath },
+      }),
   })
 
 export const Route = createFileRoute(
@@ -85,38 +88,40 @@ export const Route = createFileRoute(
     )
 
     // Used for fetching the file content of the initial file
-    const sandboxStartingFilePath = `examples/${examplePath}/${sandboxFirstFileName}`
+    const explorerStartingFilePath = `examples/${examplePath}/${sandboxFirstFileName}`
 
     // Used to indicate from where should the directory tree start.
     // i.e. from `examples/react/quickstart` or `examples/react/quickstart/src`
-    const directoryStartingPath = `examples/${examplePath}${sandboxFirstDirectory}`
+    const explorerDirectoryStartingPath = `examples/${examplePath}${sandboxFirstDirectory}`
 
     await Promise.allSettled([
       queryClient.ensureQueryData(
-        fileQueryOptions(library.repo, branch, sandboxStartingFilePath)
+        fileQueryOptions(library.repo, branch, explorerStartingFilePath)
       ),
       queryClient.ensureQueryData(
         repoDirApiContentsQueryOptions(
           library.repo,
           branch,
-          directoryStartingPath
+          explorerDirectoryStartingPath,
+          explorerStartingFilePath
         )
       ),
     ])
 
     return {
-      directoryStartingPath,
-      sandboxStartingFilePath,
+      explorerDirectoryStartingPath,
+      explorerStartingFilePath,
     }
   },
+  staleTime: 1000 * 60 * 5, // 5 minutes
 })
 
 const bannedDefaultOpenFolders = new Set(['public', '.vscode', 'tests', 'spec'])
 
 function RouteComponent() {
   // Not sure why this inferred type is not working
   // @ts-expect-error
-  const { directoryStartingPath, sandboxStartingFilePath } =
+  const { explorerDirectoryStartingPath, explorerStartingFilePath } =
     Route.useLoaderData()
 
   const navigate = Route.useNavigate()
@@ -132,8 +137,15 @@ function RouteComponent() {
     libraryId
   )
 
-  const { data: gitHubFiles } = useSuspenseQuery(
-    repoDirApiContentsQueryOptions(library.repo, branch, directoryStartingPath)
+  const {
+    data: { githubContents, startingFilePath },
+  } = useSuspenseQuery(
+    repoDirApiContentsQueryOptions(
+      library.repo,
+      branch,
+      explorerDirectoryStartingPath,
+      explorerStartingFilePath
+    )
   )
 
   const [isDark, setIsDark] = React.useState(true)
@@ -160,7 +172,9 @@ function RouteComponent() {
   }
 
   const currentPath = Route.useSearch({
-    select: (s) => s.path || sandboxStartingFilePath,
+    select: (s) => {
+      return s.path || startingFilePath || explorerStartingFilePath
+    },
   })
 
   const setCurrentPath = (path: string) => {
@@ -194,8 +208,8 @@ function RouteComponent() {
   const [expandedFolders, setExpandedFolders] = React.useState<Set<string>>(
     () => {
       const expanded = new Set<string>()
-      if (gitHubFiles) {
-        gitHubFiles.forEach((file: GitHubFileNode) => {
+      if (githubContents) {
+        githubContents.forEach((file: GitHubFileNode) => {
           if (
             file.type === 'dir' &&
             file.depth === 0 &&
@@ -457,10 +471,10 @@ function RouteComponent() {
                   isResizing ? '' : 'transition-all duration-300'
                 } ${isSidebarOpen ? '' : 'w-0 pr-0'}`}
               >
-                {gitHubFiles && isSidebarOpen ? (
+                {githubContents && isSidebarOpen ? (
                   <div className="p-2">
                     <RenderFileTree
-                      files={gitHubFiles}
+                      files={githubContents}
                       libraryColor={libraryColor}
                       toggleFolder={toggleFolder}
                       prefetchFileContent={prefetchFileContent}

app/utils/docs.ts

@@ -111,8 +111,17 @@ export const fetchRepoDirectoryContents = createServerFn({
       repo: z.string(),
       branch: z.string(),
       startingPath: z.string(),
+      candidateStartingFilePath: z.string(),
     })
   )
-  .handler(async ({ data: { repo, branch, startingPath } }) => {
-    return fetchApiContents(repo, branch, startingPath)
-  })
+  .handler(
+    async ({
+      data: { repo, branch, startingPath, candidateStartingFilePath },
+    }) => {
+      const githubContents = await fetchApiContents(repo, branch, startingPath)
+
+      const startingFilePath: string | null = candidateStartingFilePath
+
+      return { githubContents, startingFilePath }
+    }
+  )

app/utils/documents.server.ts

@@ -1,3 +1,4 @@
+import fs from 'node:fs'
 import fsp from 'node:fs/promises'
 import path from 'node:path'
 // import { fileURLToPath } from 'node:url'
@@ -47,6 +48,13 @@ async function fetchFs(repo: string, filepath: string) {
   // const __dirname = fileURLToPath(new URL('.', import.meta.url))
   const dirname = import.meta.url.split('://').at(-1)!
   const localFilePath = path.resolve(dirname, `../../../../${repo}`, filepath)
+  const exists = fs.existsSync(localFilePath)
+  if (!exists) {
+    console.warn(
+      `[fetchFs] Tried to read file that does not exist: ${localFilePath}\n`
+    )
+    return ''
+  }
   const file = await fsp.readFile(localFilePath)
   return file.toString()
 }