diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
index c7d92bcf74..aa876546cb 100644
--- a/packages/docusaurus-theme-classic/package.json
+++ b/packages/docusaurus-theme-classic/package.json
@@ -50,7 +50,8 @@
"rtlcss": "^3.1.2"
},
"devDependencies": {
- "@docusaurus/module-type-aliases": "2.0.0-beta.4"
+ "@docusaurus/module-type-aliases": "2.0.0-beta.4",
+ "@types/parse-numeric-range": "^0.0.1"
},
"peerDependencies": {
"react": "^16.8.4 || ^17.0.0",
diff --git a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx
index 5ea763f0fd..5d861542d6 100644
--- a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx
@@ -39,11 +39,9 @@ function smoothScrollTopPolyfill(): CancelScrollTop {
}
rafRecursion();
- return () => {
- // Break the recursion
- // Prevents the user from "fighting" against that recursion producing a weird UX
- raf && cancelAnimationFrame(raf);
- };
+ // Break the recursion
+ // Prevents the user from "fighting" against that recursion producing a weird UX
+ return () => raf && cancelAnimationFrame(raf);
}
type UseSmoothScrollTopReturn = {
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
index 39058aa644..0fa58aff97 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -62,7 +62,7 @@ const getHighlightDirectiveRegex = (
return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
};
// select comment styles based on language
-const highlightDirectiveRegex = (lang) => {
+const highlightDirectiveRegex = (lang: string) => {
switch (lang) {
case 'js':
case 'javascript':
@@ -119,11 +119,12 @@ export default function CodeBlock({
const prismTheme = usePrismTheme();
// In case interleaved Markdown (e.g. when using CodeBlock as standalone component).
- const content = Array.isArray(children) ? children.join('') : children;
+ const content = Array.isArray(children)
+ ? children.join('')
+ : (children as string);
if (metastring && highlightLinesRangeRegex.test(metastring)) {
// Tested above
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const highlightLinesRange = metastring.match(highlightLinesRangeRegex)![1];
highlightLines = rangeParser(highlightLinesRange).filter((n) => n > 0);
}
@@ -145,7 +146,7 @@ export default function CodeBlock({
const directiveRegex = highlightDirectiveRegex(language);
// go through line by line
const lines = content.replace(/\n$/, '').split('\n');
- let blockStart;
+ let blockStart: number;
// loop through lines
for (let index = 0; index < lines.length; ) {
const line = lines[index];
@@ -169,7 +170,7 @@ export default function CodeBlock({
break;
case 'highlight-end':
- range += `${blockStart}-${lineNumber - 1},`;
+ range += `${blockStart!}-${lineNumber - 1},`;
break;
default:
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
index 7d8bcef2ee..94e86733ff 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -30,10 +30,10 @@ const MDXComponents: MDXComponentsObject = {
},
a: (props) => ,
pre: (props) => {
- const {children} = props as {children: any};
+ const {children} = props;
// See comment for `code` above
- if (isValidElement(children?.props?.children)) {
+ if (isValidElement(children) && isValidElement(children?.props?.children)) {
return children?.props.children;
}
@@ -46,11 +46,11 @@ const MDXComponents: MDXComponentsObject = {
);
},
details: (props): JSX.Element => {
- const items = React.Children.toArray(props.children);
+ const items = React.Children.toArray(props.children) as ReactElement[];
// Split summary item from the rest to pass it as a separate prop to the Detais theme component
- const summary: ReactElement<
- ComponentProps<'summary'>
- > = (items as any[]).find((item) => item?.props?.mdxType === 'summary');
+ const summary: ReactElement> = items.find(
+ (item) => item?.props?.mdxType === 'summary',
+ )!;
const children = <>{items.filter((item) => item !== summary)};
return (
diff --git a/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx b/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx
index 83a6c0f784..1e8973ff9b 100644
--- a/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx
@@ -16,7 +16,10 @@ const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
const TOP_OFFSET = 100;
/* eslint-disable jsx-a11y/control-has-associated-label */
-export function TOCHeadings({toc, isChild}: TOCHeadingsProps) {
+export function TOCHeadings({
+ toc,
+ isChild,
+}: TOCHeadingsProps): JSX.Element | null {
if (!toc.length) {
return null;
}
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx
index 914c437187..29764d2a31 100644
--- a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx
@@ -13,7 +13,10 @@ import styles from './styles.module.css';
import {TOCHeadings} from '@theme/TOC';
import type {TOCCollapsibleProps} from '@theme/TOCCollapsible';
-export default function TOCCollapsible({toc, className}: TOCCollapsibleProps) {
+export default function TOCCollapsible({
+ toc,
+ className,
+}: TOCCollapsibleProps): JSX.Element {
const {collapsed, toggleCollapsed} = useCollapsible({
initialState: true,
});
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
index b7e4523cd8..e56a62b8a4 100644
--- a/packages/docusaurus-theme-classic/src/types.d.ts
+++ b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -65,8 +65,10 @@ declare module '@theme/BlogLayout' {
}
declare module '@theme/CodeBlock' {
+ import {ReactElement} from 'react';
+
export type Props = {
- readonly children: string;
+ readonly children: string | ReactElement;
readonly className?: string;
readonly metastring?: string;
readonly title?: string;
diff --git a/packages/docusaurus-theme-common/src/utils/announcementBarUtils.tsx b/packages/docusaurus-theme-common/src/utils/announcementBarUtils.tsx
index 2c7f6d7f42..ae2fde81b8 100644
--- a/packages/docusaurus-theme-common/src/utils/announcementBarUtils.tsx
+++ b/packages/docusaurus-theme-common/src/utils/announcementBarUtils.tsx
@@ -95,7 +95,11 @@ const useAnnouncementBarContextValue = (): AnnouncementBarAPI => {
const AnnouncementBarContext = createContext(null);
-export const AnnouncementBarProvider = ({children}: {children: ReactNode}) => {
+export const AnnouncementBarProvider = ({
+ children,
+}: {
+ children: ReactNode;
+}): JSX.Element => {
const value = useAnnouncementBarContextValue();
return (
diff --git a/yarn.lock b/yarn.lock
index c63820228a..21cc9564a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4277,6 +4277,11 @@
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+"@types/parse-numeric-range@^0.0.1":
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/@types/parse-numeric-range/-/parse-numeric-range-0.0.1.tgz#1a807487565a753f486cb3ee4b2145937d49759d"
+ integrity sha512-nI3rPGKk8BxedokP2VilnW5JyZHYNjGCUDsAZ2JQgISgDflHNUO0wXMfGYP8CkihrKYDm5tilD52XfGhO/ZFCA==
+
"@types/parse5@^5.0.0":
version "5.0.3"
resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"