Skip to content

Commit ab3baea

Browse files
satya164satya164
committed
Migrate to TypeScript
1 parent b2361e7 commit ab3baea

File tree

21 files changed

+313
-207
lines changed

21 files changed

+313
-207
lines changed

docusaurus.config.js renamed to docusaurus.config.ts

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1+
import type * as Preset from '@docusaurus/preset-classic';
2+
import type { Config } from '@docusaurus/types';
3+
14
import rehypeCodeblockMeta from './src/plugins/rehype-codeblock-meta.mjs';
25
import rehypeStaticToDynamic from './src/plugins/rehype-static-to-dynamic.mjs';
36
import rehypeVideoAspectRatio from './src/plugins/rehype-video-aspect-ratio.mjs';
47
import remarkNpm2Yarn from './src/plugins/remark-npm2yarn.mjs';
8+
import darkTheme from './src/themes/react-navigation-dark';
9+
import lightTheme from './src/themes/react-navigation-light';
510

6-
export default {
11+
const config: Config = {
712
title: 'React Navigation',
813
tagline: 'Routing and navigation for your React Native apps',
914
url: 'https://reactnavigation.org/',
@@ -30,8 +35,8 @@ export default {
3035
respectPrefersColorScheme: true,
3136
},
3237
prism: {
33-
theme: require('./src/themes/react-navigation-light.js'),
34-
darkTheme: require('./src/themes/react-navigation-dark.js'),
38+
theme: lightTheme,
39+
darkTheme: darkTheme,
3540
additionalLanguages: [
3641
'bash',
3742
'json',
@@ -57,7 +62,6 @@ export default {
5762
appId: 'QCWXRU195A',
5863
apiKey: 'bad995329370d9a9ba50cc4b840a3884',
5964
indexName: 'react-navigation',
60-
algoliaOptions: {},
6165
},
6266
navbar: {
6367
title: 'React Navigation',
@@ -126,7 +130,7 @@ export default {
126130
},
127131
],
128132
},
129-
},
133+
} satisfies Preset.ThemeConfig,
130134
plugins: [
131135
'./src/plugins/disable-fully-specified.mjs',
132136
'./src/plugins/react-navigation-versions.mjs',
@@ -183,12 +187,12 @@ export default {
183187
remarkPlugins: [[remarkNpm2Yarn, { sync: true }]],
184188
},
185189
theme: {
186-
customCss: require.resolve('./src/css/custom.css'),
190+
customCss: './src/css/custom.css',
187191
},
188192
googleAnalytics: {
189193
trackingID: 'UA-10128745-16',
190194
},
191-
},
195+
} satisfies Preset.Options,
192196
],
193197
],
194198
headTags: [
@@ -221,3 +225,5 @@ export default {
221225
'/js/video-playback.js',
222226
],
223227
};
228+
229+
export default config;

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"clear": "docusaurus clear",
99
"serve": "docusaurus serve",
1010
"swizzle": "docusaurus swizzle",
11+
"typecheck": "tsc",
1112
"deploy": "DEPLOYMENT_BRANCH=gh-pages docusaurus deploy",
1213
"test": "node --test --test-reporter=@voxpelli/node-test-pretty-reporter",
1314
"crowdin-upload": "crowdin upload sources --auto-update -b main",
@@ -34,13 +35,17 @@
3435
},
3536
"devDependencies": {
3637
"@babel/types": "^7.28.5",
38+
"@docusaurus/tsconfig": "^3.9.2",
3739
"@ffprobe-installer/ffprobe": "^2.1.2",
40+
"@types/react": "^19.2.8",
41+
"@types/react-dom": "^19.2.3",
3842
"@voxpelli/node-test-pretty-reporter": "^1.1.2",
3943
"markdownlint": "^0.40.0",
4044
"markdownlint-cli2": "^0.19.1",
4145
"postcss-nesting": "^13.0.2",
4246
"prettier": "^3.7.4",
43-
"recast": "^0.23.11"
47+
"recast": "^0.23.11",
48+
"typescript": "^5.9.3"
4449
},
4550
"packageManager": "yarn@4.0.2",
4651
"browserslist": {

src/components/LinkingTester.js renamed to src/components/LinkingTester.tsx

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,23 @@ import * as React from 'react';
55
import Editor from 'react-simple-code-editor';
66
import RouteMap from './RouteMap';
77

8-
const parse = (value) => eval(`(function() { return ${value}; }())`);
8+
const parse = (value: string) => eval(`(function() { return ${value}; }())`);
99

10-
function Code({ code, theme, language }) {
10+
interface CodeProps {
11+
code: string;
12+
theme: typeof themes.dracula;
13+
language: string;
14+
}
15+
16+
function Code({ code, theme, language }: CodeProps) {
1117
return (
1218
<Highlight code={code} theme={theme} language={language}>
1319
{({ className, style, tokens, getLineProps, getTokenProps }) => (
1420
<pre className={className} style={{ ...style, ...styles.json }}>
1521
{tokens.map((line, i) => (
16-
<div {...getLineProps({ line, key: i })}>
22+
<div {...getLineProps({ line, key: i })} key={i}>
1723
{line.map((token, key) => (
18-
<span {...getTokenProps({ token, key })} />
24+
<span {...getTokenProps({ token, key })} key={key} />
1925
))}
2026
</div>
2127
))}
@@ -53,13 +59,15 @@ export default function LinkingTester() {
5359

5460
const [path, setPath] = React.useState('/user/@vergil/edit');
5561
const [config, setConfig] = React.useState(() => parse(rawConfig));
56-
const [pane, setPane] = React.useState('chart');
62+
const [pane, setPane] = React.useState<'chart' | 'state' | 'action'>('chart');
5763

5864
let state, action;
5965

6066
try {
6167
state = getStateFromPath(path.replace(/(^\w+:|^)\/\//, ''), config);
62-
action = getActionFromState(state, config);
68+
if (state) {
69+
action = getActionFromState(state, config);
70+
}
6371
} catch (e) {
6472
// Ignore
6573
}
@@ -89,15 +97,17 @@ export default function LinkingTester() {
8997
}}
9098
highlight={(code) => (
9199
<Highlight code={code} theme={theme} language="jsx">
92-
{({ tokens, getLineProps, getTokenProps }) =>
93-
tokens.map((line, i) => (
94-
<div {...getLineProps({ line, key: i })}>
95-
{line.map((token, key) => (
96-
<span {...getTokenProps({ token, key })} />
97-
))}
98-
</div>
99-
))
100-
}
100+
{({ tokens, getLineProps, getTokenProps }) => (
101+
<>
102+
{tokens.map((line, i) => (
103+
<div {...getLineProps({ line, key: i })} key={i}>
104+
{line.map((token, key) => (
105+
<span {...getTokenProps({ token, key })} key={key} />
106+
))}
107+
</div>
108+
))}
109+
</>
110+
)}
101111
</Highlight>
102112
)}
103113
padding={16}
@@ -154,7 +164,7 @@ export default function LinkingTester() {
154164
);
155165
}
156166

157-
const styles = {
167+
const styles: Record<string, React.CSSProperties> = {
158168
code: {
159169
display: 'block',
160170
fontFamily: 'var(--ifm-font-family-monospace)',

src/components/Pre.js renamed to src/components/Pre.tsx

Lines changed: 67 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,32 @@ const COMMENTS = {
1212
FOCUS_END: '// codeblock-focus-end',
1313
};
1414

15+
interface PreProps {
16+
children: React.ReactElement<{ className?: string; children: string }>;
17+
'data-name'?: string;
18+
'data-snack'?: string | 'embed';
19+
'data-dependencies'?: string;
20+
'data-lang'?: string;
21+
}
22+
1523
export default function Pre({
1624
children,
1725
'data-name': name,
1826
'data-snack': snack,
1927
'data-dependencies': deps,
2028
'data-lang': lang,
2129
...rest
22-
}) {
30+
}: PreProps) {
2331
const [isExpanded, setIsExpanded] = React.useState(false);
2432

2533
const { colorMode } = useColorMode();
26-
const activeVersion = useActiveVersion();
27-
const { versions } = usePluginData('react-navigation-versions');
34+
const activeVersion = useActiveVersion(undefined);
35+
const { versions } = usePluginData('react-navigation-versions') as {
36+
versions: Record<
37+
string,
38+
Record<string, string | [string, Record<string, string>]>
39+
>;
40+
};
2841

2942
const child = React.Children.only(children);
3043

@@ -39,11 +52,6 @@ export default function Pre({
3952
}
4053

4154
// Replace + and - with magic comments
42-
// Need to add following in docusaurus.config.js
43-
// themeConfig.prims.magicComments: [
44-
// { className: 'code-block-diff-add-line', line: 'diff-add' },
45-
// { className: 'code-block-diff-remove-line', line: 'diff-remove' },
46-
// ],
4755
const content = code
4856
.split('\n')
4957
.map((line) => {
@@ -57,15 +65,15 @@ export default function Pre({
5765
})
5866
.join('\n');
5967

60-
children = React.cloneElement(child, {
68+
const modifiedChildren = React.cloneElement(child, {
6169
className: `language-${lang}`,
6270
children: content,
6371
});
6472

65-
return <MDXPre {...rest}>{children}</MDXPre>;
73+
return <MDXPre {...rest}>{modifiedChildren}</MDXPre>;
6674
}
6775

68-
const buttons = [];
76+
const buttons: React.ReactNode[] = [];
6977

7078
if (child.props.children.includes?.(COMMENTS.FOCUS_START)) {
7179
buttons.push(
@@ -106,7 +114,7 @@ export default function Pre({
106114
const version = activeVersion?.name;
107115

108116
// Handle snack demos
109-
if (snack && versions[version] != null) {
117+
if (snack && version && versions[version] != null) {
110118
const code = child.props.children;
111119

112120
if (typeof code !== 'string') {
@@ -115,7 +123,7 @@ export default function Pre({
115123
);
116124
}
117125

118-
const dependencies = deps
126+
const dependencies: Record<string, string> = deps
119127
? Object.fromEntries(
120128
deps.split(',').map((entry) => {
121129
let prefix = '';
@@ -135,34 +143,37 @@ export default function Pre({
135143

136144
Object.assign(
137145
dependencies,
138-
Object.entries(versions[version]).reduce((acc, [key, value]) => {
139-
if (code.includes(`from '${key}'`)) {
140-
if (Array.isArray(value)) {
141-
const [v, peers] = value;
142-
143-
Object.assign(acc, {
144-
[key]: v,
145-
...Object.fromEntries(
146-
Object.entries(peers).map(([key, value]) => {
147-
const meta = versions[version][key];
148-
149-
if (value === '*' && meta) {
150-
const v = Array.isArray(meta) ? meta[0] : meta;
151-
152-
return [key, v];
153-
}
154-
155-
return [key, value];
156-
})
157-
),
158-
});
159-
} else {
160-
acc[key] = value;
146+
Object.entries(versions[version]).reduce(
147+
(acc, [key, value]) => {
148+
if (code.includes(`from '${key}'`)) {
149+
if (Array.isArray(value)) {
150+
const [v, peers] = value;
151+
152+
Object.assign(acc, {
153+
[key]: v,
154+
...Object.fromEntries(
155+
Object.entries(peers).map(([key, value]) => {
156+
const meta = versions[version][key];
157+
158+
if (value === '*' && meta) {
159+
const v = Array.isArray(meta) ? meta[0] : meta;
160+
161+
return [key, v];
162+
}
163+
164+
return [key, value];
165+
})
166+
),
167+
});
168+
} else {
169+
acc[key] = value;
170+
}
161171
}
162-
}
163172

164-
return acc;
165-
}, {})
173+
return acc;
174+
},
175+
{} as Record<string, string>
176+
)
166177
);
167178

168179
const url = new URL('https://snack.expo.dev');
@@ -209,7 +220,6 @@ export default function Pre({
209220
style={{
210221
width: '100%',
211222
height: 660,
212-
border: 'none',
213223
border: '1px solid var(--ifm-table-border-color)',
214224
borderRadius: 'var(--ifm-global-radius)',
215225
overflow: 'hidden',
@@ -263,7 +273,16 @@ export default function Pre({
263273
);
264274
}
265275

266-
function FocusedCodeBlock({ children, expanded, ...rest }) {
276+
interface FocusedCodeBlockProps {
277+
children: React.ReactElement<{ children: string }>;
278+
expanded: boolean;
279+
}
280+
281+
function FocusedCodeBlock({
282+
children,
283+
expanded,
284+
...rest
285+
}: FocusedCodeBlockProps) {
267286
const child = React.Children.only(children);
268287
const code = child.props.children;
269288

@@ -274,7 +293,7 @@ function FocusedCodeBlock({ children, expanded, ...rest }) {
274293
if (expanded) {
275294
content = code
276295
.split('\n')
277-
.filter((line) =>
296+
.filter((line: string) =>
278297
[COMMENTS.FOCUS_START, COMMENTS.FOCUS_END].every(
279298
(comment) => line.trim() !== comment
280299
)
@@ -284,7 +303,7 @@ function FocusedCodeBlock({ children, expanded, ...rest }) {
284303
const lines = code.split('\n');
285304

286305
let focus = false;
287-
let indent;
306+
let indent: string | undefined;
288307

289308
for (const line of lines) {
290309
if (line.trim() === COMMENTS.FOCUS_START) {
@@ -293,10 +312,10 @@ function FocusedCodeBlock({ children, expanded, ...rest }) {
293312
focus = false;
294313
} else if (focus) {
295314
if (indent === undefined) {
296-
indent = line.match(/^\s*/)[0];
315+
indent = line.match(/^\s*/)?.[0];
297316
}
298317

299-
if (line.startsWith(indent)) {
318+
if (indent && line.startsWith(indent)) {
300319
content += line.slice(indent.length) + '\n';
301320
} else {
302321
content += line + '\n';
@@ -305,9 +324,11 @@ function FocusedCodeBlock({ children, expanded, ...rest }) {
305324
}
306325
}
307326

308-
children = React.Children.map(children, (c) =>
327+
const modifiedChildren = React.Children.map(children, (c) =>
309328
React.cloneElement(c, { children: content })
310329
);
330+
331+
return <MDXPre {...rest}>{modifiedChildren}</MDXPre>;
311332
}
312333

313334
return <MDXPre {...rest}>{children}</MDXPre>;

0 commit comments

Comments
 (0)