How to pass custom void elements to rehype-parse?

[AshtarCodes]

I see that rehype-stringify has an options object with a "voids" property, but I can't find anything similar for rehype-parse.

I'm parsing 100s of html documents that contain web components, and some of these are written as voids (without a closing tag). When I inspect the parsed tree, I can see that a sibling component will be inserted into the node.children property of the previous component. This results in the first sibling wrapping the second sibling component. This does not happen if elements have opening and closing tags.

Here is the source file:

Here is the resulting output. Note that the mds-button is wrapping the mds-alert.

This is how I've configured the processor. "parse" is rehype-parse, and "toHtml" is rehype-stringify. "transformComp" is a custom plugin.

Any advice or resource you can point me to will be greatly appreciated.

[wooorm]

No, there’s no such option. It’s not valid HTML if the non-voids are not closed. rehype-parse is an HTML parser.
I recommend using correct HTML, and thus closing your custom elements, so that both browsers and rehype can handle them.

P.S. your input shows blueButton and the like, which are also not valid custom HTML elements (they’d need to include a - to become one)

[wooorm]

are you dealing with Vue or Angular or so?

[AshtarCodes]

The framework we are converting from is a custom one that uses ractive.js underneath it. That's probably why the syntax is a little wonky. Currently, there are 100s or even 1000+ files written in this way. The new framework uses lit element or lit html i think. The point of my tool is to assist with a rewrite of all these files. Do you have any recommendations on how to rewrite these files so that rehype can parse them?

I'm wondering if I use rehype-wrap to isolate each component in a div before parsing (and then removing it in the tree), that could be a workaround. Or is there anyway I can extend the rehype parser to support custom void elements?

[wooorm]

Hasn't been updated in a few years but @starptech/rehype-webparser might be able to parse it: https://github.com/Prettyhtml/prettyhtml/tree/HEAD/packages/rehype webparser.
Then for the rest you can use "normal" rehype to format it with closing tags and such

[AshtarCodes]

Okay, thank you @wooorm. I'll look into this. I appreciate the quick response.