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) +}) 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 ) } 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 - - + +