refactor(core): swizzle wrap should use ReactNode instead of JSX.Elem…

…ent (#10747)
facebook · Dec 6, 2024 · 4966dce · 4966dce
1 parent f9825af
commit 4966dce
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/actions.test.ts.snap b/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/actions.test.ts.snap
@@ -43,14 +43,14 @@ export default function FirstLevelComponentWrapper(props) {
 `;
 
 exports[`wrap TypeScript wrap ComponentInFolder 2`] = `
-"import React from 'react';
+"import React, {type ReactNode} from 'react';
 import ComponentInFolder from '@theme-original/ComponentInFolder';
 import type ComponentInFolderType from '@theme/ComponentInFolder';
 import type {WrapperProps} from '@docusaurus/types';
 
 type Props = WrapperProps<typeof ComponentInFolderType>;
 
-export default function ComponentInFolderWrapper(props: Props): JSX.Element {
+export default function ComponentInFolderWrapper(props: Props): ReactNode {
   return (
     <>
       <ComponentInFolder {...props} />
@@ -61,14 +61,14 @@ export default function ComponentInFolderWrapper(props: Props): JSX.Element {
 `;
 
 exports[`wrap TypeScript wrap ComponentInFolder/ComponentInSubFolder 2`] = `
-"import React from 'react';
+"import React, {type ReactNode} from 'react';
 import ComponentInSubFolder from '@theme-original/ComponentInFolder/ComponentInSubFolder';
 import type ComponentInSubFolderType from '@theme/ComponentInFolder/ComponentInSubFolder';
 import type {WrapperProps} from '@docusaurus/types';
 
 type Props = WrapperProps<typeof ComponentInSubFolderType>;
 
-export default function ComponentInSubFolderWrapper(props: Props): JSX.Element {
+export default function ComponentInSubFolderWrapper(props: Props): ReactNode {
   return (
     <>
       <ComponentInSubFolder {...props} />
@@ -79,14 +79,14 @@ export default function ComponentInSubFolderWrapper(props: Props): JSX.Element {
 `;
 
 exports[`wrap TypeScript wrap FirstLevelComponent 2`] = `
-"import React from 'react';
+"import React, {type ReactNode} from 'react';
 import FirstLevelComponent from '@theme-original/FirstLevelComponent';
 import type FirstLevelComponentType from '@theme/FirstLevelComponent';
 import type {WrapperProps} from '@docusaurus/types';
 
 type Props = WrapperProps<typeof FirstLevelComponentType>;
 
-export default function FirstLevelComponentWrapper(props: Props): JSX.Element {
+export default function FirstLevelComponentWrapper(props: Props): ReactNode {
   return (
     <>
       <FirstLevelComponent {...props} />

diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap
@@ -283,14 +283,14 @@ exports[`swizzle wrap ComponentInFolder JS: theme dir tree 1`] = `
 `;
 
 exports[`swizzle wrap ComponentInFolder TS: ComponentInFolder/index.tsx 1`] = `
-"import React from 'react';
+"import React, {type ReactNode} from 'react';
 import ComponentInFolder from '@theme-original/ComponentInFolder';
 import type ComponentInFolderType from '@theme/ComponentInFolder';
 import type {WrapperProps} from '@docusaurus/types';
 
 type Props = WrapperProps<typeof ComponentInFolderType>;
 
-export default function ComponentInFolderWrapper(props: Props): JSX.Element {
+export default function ComponentInFolderWrapper(props: Props): ReactNode {
   return (
     <>
       <ComponentInFolder {...props} />
@@ -328,14 +328,14 @@ exports[`swizzle wrap ComponentInFolder/ComponentInSubFolder JS: theme dir tree
 `;
 
 exports[`swizzle wrap ComponentInFolder/ComponentInSubFolder TS: ComponentInFolder/ComponentInSubFolder/index.tsx 1`] = `
-"import React from 'react';
+"import React, {type ReactNode} from 'react';
 import ComponentInSubFolder from '@theme-original/ComponentInFolder/ComponentInSubFolder';
 import type ComponentInSubFolderType from '@theme/ComponentInFolder/ComponentInSubFolder';
 import type {WrapperProps} from '@docusaurus/types';
 
 type Props = WrapperProps<typeof ComponentInSubFolderType>;
 
-export default function ComponentInSubFolderWrapper(props: Props): JSX.Element {
+export default function ComponentInSubFolderWrapper(props: Props): ReactNode {
   return (
     <>
       <ComponentInSubFolder {...props} />
@@ -373,14 +373,14 @@ exports[`swizzle wrap ComponentInFolder/Sibling JS: theme dir tree 1`] = `
 `;
 
 exports[`swizzle wrap ComponentInFolder/Sibling TS: ComponentInFolder/Sibling.tsx 1`] = `
-"import React from 'react';
+"import React, {type ReactNode} from 'react';
 import Sibling from '@theme-original/ComponentInFolder/Sibling';
 import type SiblingType from '@theme/ComponentInFolder/Sibling';
 import type {WrapperProps} from '@docusaurus/types';
 
 type Props = WrapperProps<typeof SiblingType>;
 
-export default function SiblingWrapper(props: Props): JSX.Element {
+export default function SiblingWrapper(props: Props): ReactNode {
   return (
     <>
       <Sibling {...props} />
@@ -416,14 +416,14 @@ exports[`swizzle wrap FirstLevelComponent JS: theme dir tree 1`] = `
 `;
 
 exports[`swizzle wrap FirstLevelComponent TS: FirstLevelComponent.tsx 1`] = `
-"import React from 'react';
+"import React, {type ReactNode} from 'react';
 import FirstLevelComponent from '@theme-original/FirstLevelComponent';
 import type FirstLevelComponentType from '@theme/FirstLevelComponent';
 import type {WrapperProps} from '@docusaurus/types';
 
 type Props = WrapperProps<typeof FirstLevelComponentType>;
 
-export default function FirstLevelComponentWrapper(props: Props): JSX.Element {
+export default function FirstLevelComponentWrapper(props: Props): ReactNode {
   return (
     <>
       <FirstLevelComponent {...props} />

diff --git a/packages/docusaurus/src/commands/swizzle/actions.ts b/packages/docusaurus/src/commands/swizzle/actions.ts
@@ -128,14 +128,14 @@ export async function wrap({
   const toPath = path.resolve(siteDir, THEME_PATH, wrapperFileName);
 
   const content = typescript
-    ? `import React from 'react';
+    ? `import React, {type ReactNode} from 'react';
 import ${componentName} from '@theme-${importType}/${themeComponentName}';
 import type ${componentName}Type from '@theme/${themeComponentName}';
 import type {WrapperProps} from '@docusaurus/types';
 
 type Props = WrapperProps<typeof ${componentName}Type>;
 
-export default function ${wrapperComponentName}(props: Props): JSX.Element {
+export default function ${wrapperComponentName}(props: Props): ReactNode {
   return (
     <>
       <${componentName} {...props} />