Using custom html elements with RehypeStringify

[vritant24]

I have a processor that is adding a custom html element <custom-element> through a plugin like so:

const testProcessor = unified()
            .use(remarkParse)
            .use(remarkGfm)
            .use(customPlugin)
            .use(remarkRehype, {passThrough: ['custom-element'] })
            .use(rehypeRaw, {passThrough: ['custom-element']})
            .use(rehypeStringify);

the plugin has a visitor that adds it like so:

const visitor: Visitor<Blockquote> = function (node, i, parent) {
    ...
    const customElement: Literal = {
        type: 'custom-element',
        data: {
            'attr': "attribute value",
        },
        value: "text"
    };
    parent!.children[i!] = customElement;
};

when running this, I get the following error when running testProcessor.process('>quote'):

Cannot compile unknown node `custom-callout`

Is there a way to specify to rehypeStringify that custom-node is a valid html element?

[ChristianMurphy]

Heya @vritant24! 👋

The error is happening because custom-element is not a node type in hast https://github.com/syntax-tree/hast
Based off your previous question https://github.com/orgs/rehypejs/discussions/135
I'm assuming your intent is to serialize an HTML custom element.

If so a few ideas:

1. When inserting the node, use the Element type from @types/hast to ensure it is the right structure. (see: https://www.npmjs.com/package/@types/hast)
2. A valid hast Element will have a type: 'Element' and tagName: 'custom-element'. (see https://github.com/syntax-tree/hast#element)
3. Rather than inserting a hast node in the middle of mdast consider either:
   • turning your plugin into a rehype plugin, and running it after rehypeRaw and before rehypeStringify
   • Or, inserting an mdast node, but including data.hName, data.hProperties, and data.hChildren (documentation: https://github.com/syntax-tree/mdast-util-to-hast#fields-on-nodes) to construct the node so remarkRehype can handle it without needing a passThrough

[vritant24]

Thank you once again, I can't express how helpful you've been :)

Or, inserting an mdast node, but including data.hName, data.hProperties, and data.hChildren (documentation: https://github.com/syntax-tree/mdast-util-to-hast#fields-on-nodes) to construct the node so remarkRehype can handle it without needing a passThrough
This immediatly fixed my issue

It's been a little hard trying to solve a problem without having a deep understanding of how the remark-rehype exosystem works but your suggestions have quickly unblocked me :)