@@ -12,8 +12,7 @@ import { Framework, getBranch, getLibrary } from '~/libraries'
12
12
import { fetchFile , fetchRepoDirectoryContents } from '~/utils/docs'
13
13
import {
14
14
getFrameworkStartFileName ,
15
- getInitialExplorerDirectory ,
16
- getInitialSandboxFileName ,
15
+ getInitialExplorerFileName ,
17
16
} from '~/utils/sandbox'
18
17
import { seo } from '~/utils/seo'
19
18
import { capitalize , slugToTitle } from '~/utils/utils'
@@ -43,7 +42,7 @@ const repoDirApiContentsQueryOptions = (
43
42
fetchRepoDirectoryContents ( {
44
43
data : { repo, branch, startingPath } ,
45
44
} ) ,
46
- staleTime : Infinity ,
45
+ staleTime : Infinity , // We can cache this forever. A refresh can invalidate the cache if necessary.
47
46
} )
48
47
49
48
export const Route = createFileRoute (
@@ -72,35 +71,41 @@ export const Route = createFileRoute(
72
71
const library = getLibrary ( params . libraryId )
73
72
const branch = getBranch ( library , params . version )
74
73
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 (
77
79
params . framework as Framework ,
78
80
params . libraryId
79
81
)
80
82
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
+ )
100
105
101
106
return {
102
- explorerDirectoryStartingPath ,
103
- explorerStartingFilePath ,
107
+ repoStartingDirPath ,
108
+ repoStartingFilePath ,
104
109
}
105
110
} ,
106
111
staleTime : 1000 * 60 * 5 , // 5 minutes
@@ -114,8 +119,7 @@ function RouteComponent() {
114
119
function PageComponent ( ) {
115
120
// Not sure why this inferred type is not working
116
121
// @ts -expect-error
117
- const { explorerDirectoryStartingPath, explorerStartingFilePath } =
118
- Route . useLoaderData ( )
122
+ const { repoStartingDirPath, repoStartingFilePath } = Route . useLoaderData ( )
119
123
120
124
const navigate = Route . useNavigate ( )
121
125
const queryClient = useQueryClient ( )
@@ -125,24 +129,13 @@ function PageComponent() {
125
129
126
130
const examplePath = [ framework , _splat ] . join ( '/' )
127
131
128
- const mainExampleFile = getInitialSandboxFileName (
132
+ const mainExampleFile = getInitialExplorerFileName (
129
133
framework as Framework ,
130
134
libraryId
131
135
)
132
136
133
137
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 )
146
139
)
147
140
148
141
const [ isDark , setIsDark ] = React . useState ( true )
@@ -170,7 +163,7 @@ function PageComponent() {
170
163
171
164
const currentPath = Route . useSearch ( {
172
165
select : ( s ) => {
173
- return s . path || startingFilePath || explorerStartingFilePath
166
+ return s . path || repoStartingFilePath
174
167
} ,
175
168
} )
176
169
@@ -313,15 +306,9 @@ function determineStartingFilePath(
313
306
314
307
const preferenceFiles = new Set ( [
315
308
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 ( ) ,
325
312
'README.md' ,
326
313
] )
327
314
0 commit comments