Skip to content

Commit 8dc52df

Browse files
authored
fix(code-explorer): resolving starting path when not available (#376)
* underlying bug of not passing the branch ref * re-enable dev/prod behaviour * display contents from root but find the starting file * better comments for future adventurers
1 parent f688716 commit 8dc52df

File tree

3 files changed

+46
-56
lines changed

3 files changed

+46
-56
lines changed

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

Lines changed: 38 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ import { Framework, getBranch, getLibrary } from '~/libraries'
1212
import { fetchFile, fetchRepoDirectoryContents } from '~/utils/docs'
1313
import {
1414
getFrameworkStartFileName,
15-
getInitialExplorerDirectory,
16-
getInitialSandboxFileName,
15+
getInitialExplorerFileName,
1716
} from '~/utils/sandbox'
1817
import { seo } from '~/utils/seo'
1918
import { capitalize, slugToTitle } from '~/utils/utils'
@@ -43,7 +42,7 @@ const repoDirApiContentsQueryOptions = (
4342
fetchRepoDirectoryContents({
4443
data: { repo, branch, startingPath },
4544
}),
46-
staleTime: Infinity,
45+
staleTime: Infinity, // We can cache this forever. A refresh can invalidate the cache if necessary.
4746
})
4847

4948
export const Route = createFileRoute(
@@ -72,35 +71,41 @@ export const Route = createFileRoute(
7271
const library = getLibrary(params.libraryId)
7372
const branch = getBranch(library, params.version)
7473
const examplePath = [params.framework, params._splat].join('/')
75-
const explorerFirstDirectory = getInitialExplorerDirectory(params.libraryId)
76-
const explorerFirstFileName = getInitialSandboxFileName(
74+
75+
// Used to determine the starting file name for the explorer
76+
// i.e. app.tsx, main.tsx, src/routes/__root.tsx, etc.
77+
// This value is not absolutely guaranteed to be available, so further resolution may be necessary
78+
const explorerCandidateStartingFileName = getInitialExplorerFileName(
7779
params.framework as Framework,
7880
params.libraryId
7981
)
8082

81-
// Used for fetching the file content of the initial file
82-
const explorerStartingFilePath = `examples/${examplePath}/${explorerFirstFileName}`
83-
84-
// Used to indicate from where should the directory tree start.
85-
// i.e. from `examples/react/quickstart` or `examples/react/quickstart/src`
86-
const explorerDirectoryStartingPath = `examples/${examplePath}${explorerFirstDirectory}`
87-
88-
await Promise.allSettled([
89-
queryClient.ensureQueryData(
90-
fileQueryOptions(library.repo, branch, explorerStartingFilePath)
91-
),
92-
queryClient.ensureQueryData(
93-
repoDirApiContentsQueryOptions(
94-
library.repo,
95-
branch,
96-
explorerDirectoryStartingPath
97-
)
98-
),
99-
])
83+
// Used to tell the github contents api where to start looking for files in the target repository
84+
const repoStartingDirPath = `examples/${examplePath}`
85+
86+
// Fetching and Caching the contents of the target directory
87+
const githubContents = await queryClient.ensureQueryData(
88+
repoDirApiContentsQueryOptions(library.repo, branch, repoStartingDirPath)
89+
)
90+
91+
// Using the fetched contents, get the actual starting file-path for the explorer
92+
// The `explorerCandidateStartingFileName` is used for matching, but the actual file-path may differ
93+
const repoStartingFilePath = determineStartingFilePath(
94+
githubContents,
95+
explorerCandidateStartingFileName,
96+
params.framework as Framework,
97+
params.libraryId
98+
)
99+
100+
// Now that we've resolved the starting file path, we can
101+
// fetching and caching the file content for the starting file path
102+
await queryClient.ensureQueryData(
103+
fileQueryOptions(library.repo, branch, repoStartingFilePath)
104+
)
100105

101106
return {
102-
explorerDirectoryStartingPath,
103-
explorerStartingFilePath,
107+
repoStartingDirPath,
108+
repoStartingFilePath,
104109
}
105110
},
106111
staleTime: 1000 * 60 * 5, // 5 minutes
@@ -114,8 +119,7 @@ function RouteComponent() {
114119
function PageComponent() {
115120
// Not sure why this inferred type is not working
116121
// @ts-expect-error
117-
const { explorerDirectoryStartingPath, explorerStartingFilePath } =
118-
Route.useLoaderData()
122+
const { repoStartingDirPath, repoStartingFilePath } = Route.useLoaderData()
119123

120124
const navigate = Route.useNavigate()
121125
const queryClient = useQueryClient()
@@ -125,24 +129,13 @@ function PageComponent() {
125129

126130
const examplePath = [framework, _splat].join('/')
127131

128-
const mainExampleFile = getInitialSandboxFileName(
132+
const mainExampleFile = getInitialExplorerFileName(
129133
framework as Framework,
130134
libraryId
131135
)
132136

133137
const { data: githubContents } = useSuspenseQuery(
134-
repoDirApiContentsQueryOptions(
135-
library.repo,
136-
branch,
137-
explorerDirectoryStartingPath
138-
)
139-
)
140-
141-
const startingFilePath = determineStartingFilePath(
142-
githubContents,
143-
explorerStartingFilePath,
144-
framework as Framework,
145-
libraryId
138+
repoDirApiContentsQueryOptions(library.repo, branch, repoStartingDirPath)
146139
)
147140

148141
const [isDark, setIsDark] = React.useState(true)
@@ -170,7 +163,7 @@ function PageComponent() {
170163

171164
const currentPath = Route.useSearch({
172165
select: (s) => {
173-
return s.path || startingFilePath || explorerStartingFilePath
166+
return s.path || repoStartingFilePath
174167
},
175168
})
176169

@@ -313,15 +306,9 @@ function determineStartingFilePath(
313306

314307
const preferenceFiles = new Set([
315308
getFrameworkStartFileName(framework, libraryId),
316-
'page.tsx',
317-
'page.ts',
318-
'App.tsx',
319-
'App.ts',
320-
'main.tsx',
321-
'main.ts',
322-
'index.tsx',
323-
'index.ts',
324-
'action.ts',
309+
...['App', 'main', 'index', 'page', 'action']
310+
.map((name) => [`${name}.tsx`, `${name}.ts`, `${name}.js`, `${name}.jsx`])
311+
.flat(),
325312
'README.md',
326313
])
327314

app/utils/documents.server.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -496,7 +496,7 @@ async function fetchApiContentsRemote(
496496
},
497497
}
498498
const res = await fetch(
499-
`https://api.github.com/repos/${repo}/contents/${startingPath}?=${branch}`,
499+
`https://api.github.com/repos/${repo}/contents/${startingPath}?ref=${branch}`,
500500
fetchOptions
501501
)
502502

app/utils/sandbox.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,13 @@ export function getFrameworkStartFileName(
3838
return `${file}.${ext}` as const
3939
}
4040

41-
export const getInitialExplorerDirectory = (libraryId: string) => {
42-
if (['start', 'router'].includes(libraryId)) {
43-
return ''
41+
export const getInitialExplorerFileName = (
42+
framework: Framework,
43+
libraryId?: string
44+
) => {
45+
if (libraryId && ['start', 'router'].includes(libraryId)) {
46+
return 'src/routes/__root.tsx'
4447
}
4548

46-
return '/src'
49+
return getFrameworkStartFileName(framework, libraryId)
4750
}

0 commit comments

Comments
 (0)