Skip to content

Commit 78d8400

Browse files
Josh-Cenaslorber
Josh-Cena
and
slorber
authored
refactor(theme-classic): completely migrate package to TypeScript (facebook#5459)
* Migrate Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Migrate prism as well Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Fix Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Fix lock file Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Fix typing Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * refactor a bit CodeBlock * simplify versionBanner typing => use null instead of "none" (apart plugin options for retrocompatibility) * Remove return signatures Signed-off-by: Josh-Cena <sidachen2003@gmail.com> Co-authored-by: slorber <lorber.sebastien@gmail.com>
1 parent 5f003bc commit 78d8400

File tree

19 files changed

+153
-95
lines changed

19 files changed

+153
-95
lines changed

‎packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -514,7 +514,7 @@ Object {
514514
\\"pluginId\\": \\"default\\",
515515
\\"version\\": \\"current\\",
516516
\\"label\\": \\"Next\\",
517-
\\"banner\\": \\"none\\",
517+
\\"banner\\": null,
518518
\\"badge\\": false,
519519
\\"className\\": \\"docs-version-current\\",
520520
\\"isLast\\": true,
@@ -1025,7 +1025,7 @@ Object {
10251025
\\"pluginId\\": \\"community\\",
10261026
\\"version\\": \\"1.0.0\\",
10271027
\\"label\\": \\"1.0.0\\",
1028-
\\"banner\\": \\"none\\",
1028+
\\"banner\\": null,
10291029
\\"badge\\": true,
10301030
\\"className\\": \\"docs-version-1.0.0\\",
10311031
\\"isLast\\": true,
@@ -1722,7 +1722,7 @@ Object {
17221722
\\"pluginId\\": \\"default\\",
17231723
\\"version\\": \\"1.0.1\\",
17241724
\\"label\\": \\"1.0.1\\",
1725-
\\"banner\\": \\"none\\",
1725+
\\"banner\\": null,
17261726
\\"badge\\": true,
17271727
\\"className\\": \\"docs-version-1.0.1\\",
17281728
\\"isLast\\": true,

‎packages/docusaurus-plugin-content-docs/src/__tests__/versions.test.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ describe('simple site', () => {
8181
versionLabel: 'Next',
8282
versionName: 'current',
8383
versionPath: '/docs',
84-
versionBanner: 'none',
84+
versionBanner: null,
8585
versionBadge: false,
8686
versionClassName: 'docs-version-current',
8787
};
@@ -262,7 +262,7 @@ describe('versioned site, pluginId=default', () => {
262262
versionLabel: '1.0.1',
263263
versionName: '1.0.1',
264264
versionPath: '/docs',
265-
versionBanner: 'none',
265+
versionBanner: null,
266266
versionBadge: true,
267267
versionClassName: 'docs-version-1.0.1',
268268
};
@@ -554,7 +554,7 @@ describe('versioned site, pluginId=default', () => {
554554
routePriority: -1,
555555
tagsPath: '/docs/tags',
556556
versionPath: '/docs',
557-
versionBanner: 'none',
557+
versionBanner: null,
558558
versionBadge: false,
559559
},
560560
]);
@@ -702,7 +702,7 @@ describe('versioned site, pluginId=community', () => {
702702
versionLabel: '1.0.0',
703703
versionName: '1.0.0',
704704
versionPath: '/communityBasePath',
705-
versionBanner: 'none',
705+
versionBanner: null,
706706
versionBadge: true,
707707
versionClassName: 'docs-version-1.0.0',
708708
};
@@ -750,7 +750,7 @@ describe('versioned site, pluginId=community', () => {
750750
routePriority: -1,
751751
tagsPath: '/communityBasePath/tags',
752752
versionPath: '/communityBasePath',
753-
versionBanner: 'none',
753+
versionBanner: null,
754754
versionBadge: false,
755755
},
756756
]);

‎packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ declare module '@docusaurus/plugin-content-docs' {
1111

1212
// TODO public api surface types should rather be exposed as "@docusaurus/plugin-content-docs"
1313
declare module '@docusaurus/plugin-content-docs-types' {
14-
type VersionBanner = import('./types').VersionBanner;
14+
export type VersionBanner = import('./types').VersionBanner;
1515
type GlobalDataVersion = import('./types').GlobalVersion;
1616
type GlobalDataDoc = import('./types').GlobalDoc;
1717
type VersionTag = import('./types').VersionTag;
@@ -22,7 +22,7 @@ declare module '@docusaurus/plugin-content-docs-types' {
2222
pluginId: string;
2323
version: string;
2424
label: string;
25-
banner: VersionBanner;
25+
banner: VersionBanner | null;
2626
badge: boolean;
2727
className: string;
2828
isLast: boolean;

‎packages/docusaurus-plugin-content-docs/src/types.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export type VersionMetadata = ContentPaths & {
3232
tagsPath: string;
3333
versionEditUrl?: string | undefined;
3434
versionEditUrlLocalized?: string | undefined;
35-
versionBanner: VersionBanner;
35+
versionBanner: VersionBanner | null;
3636
versionBadge: boolean;
3737
versionClassName: string;
3838
isLast: boolean;
@@ -65,12 +65,12 @@ export type PathOptions = {
6565
};
6666

6767
// TODO support custom version banner? {type: "error", content: "html content"}
68-
export type VersionBanner = 'none' | 'unreleased' | 'unmaintained';
68+
export type VersionBanner = 'unreleased' | 'unmaintained';
6969

7070
export type VersionOptions = {
7171
path?: string;
7272
label?: string;
73-
banner?: VersionBanner;
73+
banner?: 'none' | VersionBanner;
7474
badge?: boolean;
7575
className?: string;
7676
};

‎packages/docusaurus-plugin-content-docs/src/versions.ts

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -264,10 +264,10 @@ function getDefaultVersionBanner({
264264
versionName: string;
265265
versionNames: string[];
266266
lastVersionName: string;
267-
}): VersionBanner {
267+
}): VersionBanner | null {
268268
// Current version: good, no banner
269269
if (versionName === lastVersionName) {
270-
return 'none';
270+
return null;
271271
}
272272
// Upcoming versions: unreleased banner
273273
else if (
@@ -291,17 +291,16 @@ function getVersionBanner({
291291
versionNames: string[];
292292
lastVersionName: string;
293293
options: Pick<PluginOptions, 'versions'>;
294-
}): VersionBanner {
295-
const versionOptionBanner = options.versions[versionName]?.banner;
296-
297-
return (
298-
versionOptionBanner ??
299-
getDefaultVersionBanner({
300-
versionName,
301-
versionNames,
302-
lastVersionName,
303-
})
304-
);
294+
}): VersionBanner | null {
295+
const versionBannerOption = options.versions[versionName]?.banner;
296+
if (versionBannerOption) {
297+
return versionBannerOption === 'none' ? null : versionBannerOption;
298+
}
299+
return getDefaultVersionBanner({
300+
versionName,
301+
versionNames,
302+
lastVersionName,
303+
});
305304
}
306305

307306
function getVersionBadge({

‎packages/docusaurus-theme-classic/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@
5151
},
5252
"devDependencies": {
5353
"@docusaurus/module-type-aliases": "2.0.0-beta.5",
54+
"@types/mdx-js__react": "^1.5.4",
5455
"@types/parse-numeric-range": "^0.0.1",
56+
"@types/rtlcss": "^3.1.1",
5557
"utility-types": "^3.10.0"
5658
},
5759
"peerDependencies": {

‎packages/docusaurus-theme-classic/src/index.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import type {ThemeConfig} from '@docusaurus/theme-common';
1010
import {getTranslationFiles, translateThemeConfig} from './translations';
1111
import path from 'path';
1212
import Module from 'module';
13-
import type {AcceptedPlugin, Result, Plugin as PostCssPlugin} from 'postcss';
13+
import type {AcceptedPlugin, Plugin as PostCssPlugin} from 'postcss';
1414
import rtlcss from 'rtlcss';
1515
import {readDefaultCodeTranslationMessages} from '@docusaurus/utils';
1616

@@ -25,7 +25,10 @@ const ContextReplacementPlugin = requireFromDocusaurusCore(
2525
// Need to be inlined to prevent dark mode FOUC
2626
// Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
2727
const ThemeStorageKey = 'theme';
28-
const noFlashColorMode = ({defaultMode, respectPrefersColorScheme}) => {
28+
const noFlashColorMode = ({
29+
defaultMode,
30+
respectPrefersColorScheme,
31+
}: ThemeConfig['colorMode']) => {
2932
return `(function() {
3033
var defaultMode = '${defaultMode}';
3134
var respectPrefersColorScheme = ${respectPrefersColorScheme};
@@ -83,7 +86,7 @@ const AnnouncementBarInlineJavaScript = `
8386
document.documentElement.setAttribute('${AnnouncementBarDismissDataAttribute}', isDismissed());
8487
})();`;
8588

86-
function getInfimaCSSFile(direction) {
89+
function getInfimaCSSFile(direction: string) {
8790
return `infima/dist/css/default/default${
8891
direction === 'rtl' ? '-rtl' : ''
8992
}.css`;
@@ -183,13 +186,13 @@ export default function docusaurusThemeClassic(
183186
const resolvedInfimaFile = require.resolve(getInfimaCSSFile(direction));
184187
const plugin: PostCssPlugin = {
185188
postcssPlugin: 'RtlCssPlugin',
186-
prepare: (result: Result) => {
189+
prepare: (result) => {
187190
const file = result.root?.source?.input?.file;
188191
// Skip Infima as we are using the its RTL version.
189192
if (file === resolvedInfimaFile) {
190193
return {};
191194
}
192-
return rtlcss(result.root);
195+
return rtlcss((result.root as unknown) as rtlcss.ConfigOptions);
193196
},
194197
};
195198
postCssOptions.plugins.push(plugin);

‎packages/docusaurus-theme-classic/src/prism-include-languages.js renamed to ‎packages/docusaurus-theme-classic/src/prism-include-languages.ts

File renamed without changes.

‎packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx

Lines changed: 49 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -18,49 +18,61 @@ import styles from './styles.module.css';
1818

1919
import {useThemeConfig, parseCodeBlockTitle} from '@docusaurus/theme-common';
2020

21-
const highlightLinesRangeRegex = /{([\d,-]+)}/;
21+
const HighlightLinesRangeRegex = /{([\d,-]+)}/;
22+
23+
const HighlightLanguages = ['js', 'jsBlock', 'jsx', 'python', 'html'] as const;
24+
type HighlightLanguage = typeof HighlightLanguages[number];
25+
26+
type HighlightLanguageConfig = {
27+
start: string;
28+
end: string;
29+
};
30+
31+
// Supported types of highlight comments
32+
const HighlightComments: Record<HighlightLanguage, HighlightLanguageConfig> = {
33+
js: {
34+
start: '\\/\\/',
35+
end: '',
36+
},
37+
jsBlock: {
38+
start: '\\/\\*',
39+
end: '\\*\\/',
40+
},
41+
jsx: {
42+
start: '\\{\\s*\\/\\*',
43+
end: '\\*\\/\\s*\\}',
44+
},
45+
python: {
46+
start: '#',
47+
end: '',
48+
},
49+
html: {
50+
start: '<!--',
51+
end: '-->',
52+
},
53+
};
54+
55+
// Supported highlight directives
56+
const HighlightDirectives = [
57+
'highlight-next-line',
58+
'highlight-start',
59+
'highlight-end',
60+
];
61+
2262
const getHighlightDirectiveRegex = (
23-
languages = ['js', 'jsBlock', 'jsx', 'python', 'html'],
63+
languages: readonly HighlightLanguage[] = HighlightLanguages,
2464
) => {
25-
// supported types of comments
26-
const comments = {
27-
js: {
28-
start: '\\/\\/',
29-
end: '',
30-
},
31-
jsBlock: {
32-
start: '\\/\\*',
33-
end: '\\*\\/',
34-
},
35-
jsx: {
36-
start: '\\{\\s*\\/\\*',
37-
end: '\\*\\/\\s*\\}',
38-
},
39-
python: {
40-
start: '#',
41-
end: '',
42-
},
43-
html: {
44-
start: '<!--',
45-
end: '-->',
46-
},
47-
};
48-
// supported directives
49-
const directives = [
50-
'highlight-next-line',
51-
'highlight-start',
52-
'highlight-end',
53-
].join('|');
5465
// to be more reliable, the opening and closing comment must match
5566
const commentPattern = languages
56-
.map(
57-
(lang) =>
58-
`(?:${comments[lang].start}\\s*(${directives})\\s*${comments[lang].end})`,
59-
)
67+
.map((lang) => {
68+
const {start, end} = HighlightComments[lang];
69+
return `(?:${start}\\s*(${HighlightDirectives.join('|')})\\s*${end})`;
70+
})
6071
.join('|');
6172
// white space is allowed, but otherwise it should be on it's own line
6273
return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
6374
};
75+
6476
// select comment styles based on language
6577
const highlightDirectiveRegex = (lang: string) => {
6678
switch (lang) {
@@ -123,9 +135,9 @@ export default function CodeBlock({
123135
? children.join('')
124136
: (children as string);
125137

126-
if (metastring && highlightLinesRangeRegex.test(metastring)) {
138+
if (metastring && HighlightLinesRangeRegex.test(metastring)) {
127139
// Tested above
128-
const highlightLinesRange = metastring.match(highlightLinesRangeRegex)![1];
140+
const highlightLinesRange = metastring.match(HighlightLinesRangeRegex)![1];
129141
highlightLines = rangeParser(highlightLinesRange).filter((n) => n > 0);
130142
}
131143

‎packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function useShowAnnouncementBar() {
3535
return showAnnouncementBar;
3636
}
3737

38-
function HideableSidebarButton({onClick}) {
38+
function HideableSidebarButton({onClick}: {onClick: React.MouseEventHandler}) {
3939
return (
4040
<button
4141
type="button"

0 commit comments

Comments
 (0)