remarkablemark / html-react-parser

📝 HTML to React parser.
https://b.remarkabl.org/html-react-parser
MIT License
2.12k stars 129 forks source link

Cannot pass `domNode.children` to `domToReact`, as the docs suggest you can (with Typescript) #1444

Open JoshMcCullough opened 3 months ago

JoshMcCullough commented 3 months ago

Expected Behavior

Examples in README should work correctly in terms of types / types should be correct..

Actual Behavior

The README suggests that you can directly pass domNode.children to domToReact, but you get a type error if you try to do this.

Steps to Reproduce

Try to pass a DOMNode's children to domToReact.

Reproducible Demo

N/A

Environment

N/A

Keywords

N/A

remarkablemark commented 3 months ago

Does this resolve your issue? https://github.com/remarkablemark/html-react-parser/tree/v5.1.10#v5

JoshMcCullough commented 3 months ago

Technically yes, I'm doing it a bit more "safely" than that:

function getChildNodes(childNodes: ChildNode[]): DOMNode[] {
  // Hacky but we need to only get named nodes (e.g. not comment nodes), and need to coerce them to be DOMNodes.
  return childNodes
    .filter(o => o instanceof Comment || o instanceof Element || o instanceof ProcessingInstruction || o instanceof Text)
    .map(o => o as DOMNode);
}

Called as:

domToReact(getChildNodes(node.children))

Coercing the type to DOMNode[] just hides the underlying type issue.

remarkablemark commented 3 months ago

Gotcha can you provide a reproducible example?