fix: load selected path in code explorer (#461)

Author: Balastrong

src/components/Markdown.tsx

@@ -104,10 +104,10 @@ export function CodeBlock({
 
   const [codeElement, setCodeElement] = React.useState(
     <>
-      <pre ref={ref} className={`shiki github-light`}>
+      <pre ref={ref} className={`shiki github-light h-full`}>
         <code>{code}</code>
       </pre>
-      <pre className={`shiki tokyo-night bg-gray-900 text-gray-400`}>
+      <pre className={`shiki tokyo-night h-full bg-gray-900 text-gray-400`}>
         <code>{code}</code>
       </pre>
     </>

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

@@ -45,38 +45,17 @@ const repoDirApiContentsQueryOptions = (
   })
 
 export const Route = createFileRoute({
-  head: ({ params }) => {
-    const library = getLibrary(params.libraryId)
-
-    return {
-      meta: seo({
-        title: `${capitalize(params.framework)} ${library.name} ${slugToTitle(
-          params._splat || ''
-        )} Example | ${library.name} Docs`,
-        description: `An example showing how to implement ${slugToTitle(
-          params._splat || ''
-        )} in ${capitalize(params.framework)} using ${library.name}.`,
-      }),
-    }
-  },
   component: RouteComponent,
   validateSearch: z.object({
     path: z.string().optional(),
     panel: z.string().optional(),
   }),
-  loader: async ({ params, context: { queryClient } }) => {
+  loaderDeps: ({ search }) => ({ path: search.path }),
+  loader: async ({ params, context: { queryClient }, deps: { path } }) => {
     const library = getLibrary(params.libraryId)
     const branch = getBranch(library, params.version)
     const examplePath = [params.framework, params._splat].join('/')
 
-    // Used to determine the starting file name for the explorer
-    // i.e. app.tsx, main.tsx, src/routes/__root.tsx, etc.
-    // This value is not absolutely guaranteed to be available, so further resolution may be necessary
-    const explorerCandidateStartingFileName = getExampleStartingPath(
-      params.framework as Framework,
-      params.libraryId
-    )
-
     // Used to tell the github contents api where to start looking for files in the target repository
     const repoStartingDirPath = `examples/${examplePath}`
 
@@ -85,9 +64,17 @@ export const Route = createFileRoute({
       repoDirApiContentsQueryOptions(library.repo, branch, repoStartingDirPath)
     )
 
+    // Used to determine the starting file name for the explorer
+    // It's either the selected path in the search params or a default we can derive
+    // i.e. app.tsx, main.tsx, src/routes/__root.tsx, etc.
+    // This value is not absolutely guaranteed to be available, so further resolution may be necessary
+    const explorerCandidateStartingFileName =
+      path ||
+      getExampleStartingPath(params.framework as Framework, params.libraryId)
+
     // Using the fetched contents, get the actual starting file-path for the explorer
     // The `explorerCandidateStartingFileName` is used for matching, but the actual file-path may differ
-    const repoStartingFilePath = determineStartingFilePath(
+    const currentPath = determineStartingFilePath(
       githubContents,
       explorerCandidateStartingFileName,
       params.framework as Framework,
@@ -97,12 +84,23 @@ export const Route = createFileRoute({
     // Now that we've resolved the starting file path, we can
     // fetching and caching the file content for the starting file path
     await queryClient.ensureQueryData(
-      fileQueryOptions(library.repo, branch, repoStartingFilePath)
+      fileQueryOptions(library.repo, branch, currentPath)
     )
 
+    return { repoStartingDirPath, currentPath }
+  },
+  head: ({ params }) => {
+    const library = getLibrary(params.libraryId)
+
     return {
-      repoStartingDirPath,
-      repoStartingFilePath,
+      meta: seo({
+        title: `${capitalize(params.framework)} ${library.name} ${slugToTitle(
+          params._splat || ''
+        )} Example | ${library.name} Docs`,
+        description: `An example showing how to implement ${slugToTitle(
+          params._splat || ''
+        )} in ${capitalize(params.framework)} using ${library.name}.`,
+      }),
     }
   },
   staleTime: 1000 * 60 * 5, // 5 minutes
@@ -114,9 +112,7 @@ function RouteComponent() {
 }
 
 function PageComponent() {
-  // Not sure why this inferred type is not working
-  // @ts-expect-error
-  const { repoStartingDirPath, repoStartingFilePath } = Route.useLoaderData()
+  const { repoStartingDirPath, currentPath } = Route.useLoaderData()
 
   const navigate = Route.useNavigate()
   const queryClient = useQueryClient()
@@ -158,12 +154,6 @@ function PageComponent() {
     })
   }
 
-  const currentPath = Route.useSearch({
-    select: (s) => {
-      return s.path || repoStartingFilePath
-    },
-  })
-
   const setCurrentPath = (path: string) => {
     navigate({
       search: { path, panel: undefined },