Theme: Children interface is now ReactNode, allows guard() and render() to accept JSX
#971
Conversation
…ated in favour of plugin methods This fixes a type incompatibility where using `guard()` and returning a React or DOM element would not pass type checking. The Children interface now extends ReactNode for backwards compatibility and is marked as depreacated. Use ReactNode directly in future. Duplicated markdown utility functions in the theme are now deprecated in favour of their equivalents in the plugin package.
robbieaverill
temporarily deployed
to
default
GitHub Actions
Inactive
|
Visit the preview URL for this PR (updated for commit 2fcfe32): https://docusaurus-openapi-36b86--pr971-vfe03kyz.web.app (expires Thu, 24 Oct 2024 13:05:31 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: bf293780ee827f578864d92193b8c2866acd459f |
|
Hi @robbieaverill, some descriptions don't appear to be rendering in the preview: 
|
| if (Array.isArray(children)) { | ||
| const filteredChildren = children.filter((c) => c !== undefined); | ||
| return filteredChildren | ||
| .map((i: any) => (Array.isArray(i) ? i.join("") : i)) | ||
| .join(""); | ||
| } | ||
| return children ?? ""; | ||
| return `${children ?? ""}`; |
There was a problem hiding this comment.
This seems to be what results in description not rendering
There was a problem hiding this comment.
I did some playing around. The plugin's render() method is used to create HTML strings, e.g. <p>foo</p> that are used to create the MDX files, so it doesn't actually support rendering JSX or React elements directly.
The theme does, as in my example of using guard() in a React template context.
I've pushed a new commit which removes all of the changes to the plugin and most of the deprecations in the theme, and changes the theme's guard() and render() methods to handle ReactNode. How do you feel about that?
robbieaverill
had a problem deploying
to
default
GitHub Actions
Failure
robbieaverill
had a problem deploying
to
default
GitHub Actions
Failure
robbieaverill
temporarily deployed
to
default
GitHub Actions
Inactive
robbieaverill
changed the title
guard() and render() to accept JSX
Description
This fixes a type incompatibility in theme components where using
guard()and returning a React or DOM element would not pass type checking. The Children interface now extends ReactNode for backwards compatibility and is marked as deprecated. Use ReactNode directly in future.Duplicated markdown utility functions in the theme are now deprecated in favour of their equivalents in the plugin package.Edit: plugin methods remain the same, they look similar but serve a slightly different purpose.Motivation and Context
Refer to theme:
ParamsItem/index.tsx:The return value of the callback in this example was invalid, as a JSX.Element is not a string, etc. I've replaced the Children type with
ReactNode, which supports React elements/JSX.Element, as well as all the other values that were there (string, undefined, number, iterable variants of it, etc).How Has This Been Tested?
Type checked locally.
Types of changes
Checklist