From 89e5dbf7189748409a7d6feaa202a57fa18550e1 Mon Sep 17 00:00:00 2001 From: "fran.serrano" Date: Fri, 21 Jun 2024 10:51:54 +0200 Subject: [PATCH 1/3] BUGFIX-256 switched to React 18 for the remote resources --- source/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/index.html b/source/index.html index 4eee9b1..277278c 100644 --- a/source/index.html +++ b/source/index.html @@ -4,8 +4,8 @@ react-jsx-parser demo - - + + From 22a41f14e63eb06d4f7653445a9786127b9edfe3 Mon Sep 17 00:00:00 2001 From: "fran.serrano" Date: Fri, 21 Jun 2024 10:52:26 +0200 Subject: [PATCH 2/3] BUGFIX-256 extracted to a new file and imported in the JsxParser.tsx --- source/components/ForwardRef.tsx | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 source/components/ForwardRef.tsx diff --git a/source/components/ForwardRef.tsx b/source/components/ForwardRef.tsx new file mode 100644 index 0000000..41e1e67 --- /dev/null +++ b/source/components/ForwardRef.tsx @@ -0,0 +1,6 @@ +import * as React from 'react' + +export const ForwardRef = React.forwardRef((properties, ref) => { + const { component, lowerName, children, ...rest } = properties + return React.createElement(component || lowerName, { ...rest, ref }, children) +}) From 29ae50e488c2532e8a8ece283fc2dbf1b110f63a Mon Sep 17 00:00:00 2001 From: "fran.serrano" Date: Fri, 21 Jun 2024 10:53:57 +0200 Subject: [PATCH 3/3] BUGFIX-256 implemented suggestions provided by @troyalford to @elitebyte, to have the PR mergeable --- source/components/JsxParser.tsx | 29 +++++++++-------------------- 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/source/components/JsxParser.tsx b/source/components/JsxParser.tsx index 6cef23f..ea9530e 100644 --- a/source/components/JsxParser.tsx +++ b/source/components/JsxParser.tsx @@ -7,6 +7,7 @@ import { canHaveChildren, canHaveWhitespace } from '../constants/specialTags' import { randomHash } from '../helpers/hash' import { parseStyle } from '../helpers/parseStyle' import { resolvePath } from '../helpers/resolvePath' +import { ForwardRef } from './ForwardRef' type ParsedJSX = React.ReactNode | boolean | string type ParsedTree = ParsedJSX | ParsedJSX[] | null @@ -30,15 +31,6 @@ export type TProps = { } type Scope = Record -interface ForwardRefComponentProps { - [key: string]: any; // for the rest of the properties -} - -const ForwardRefComponent = React.forwardRef((properties, ref) => { - const { component, lowerName, children, ...rest } = properties - return React.createElement(component || lowerName, { ...rest, ref }, children) -}) - /* eslint-disable consistent-return */ export default class JsxParser extends React.Component { static displayName = 'JsxParser' @@ -273,7 +265,7 @@ export default class JsxParser extends React.Component { let children const component = element.type === 'JSXElement' - ? resolvePath(this.props.components, name) + ? resolvePath(components, name) : Fragment if (component || canHaveChildren(name)) { @@ -345,24 +337,21 @@ export default class JsxParser extends React.Component { children, } - return React.createElement(ForwardRefComponent, componentProps) - // return React.createElement(component || lowerName, props, children) + return React.createElement(ForwardRef, componentProps) } render() { const jsx = (this.props.jsx || '').trim().replace(/]*)>/g, '') this.ParsedChildren = this.#parseJSX(jsx) - const className = [...new Set(['jsx-parser', ...String(this.props.className) - .split(' ')])].filter(Boolean).join(' ') + + const classNames = 'jsx-parser' + const additionalClassNames : string[] = String(this.props.className).split(' ') + const uniqueClassNames: Set = new Set([classNames, ...additionalClassNames]) + const className = Array.from(uniqueClassNames).filter(Boolean).join(' ') return ( this.props.renderInWrapper - ? ( -
{ - React.createElement(React.Fragment, {}, this.ParsedChildren) - } -
- ) + ? (
{this.ParsedChildren}
) : this.ParsedChildren ) }