I can't add any custom properties in remark plugin

[mvalts]

I'm trying to add some extra data in remark plugin.

export function test(options:any = {}) {
    return (tree: any) => {
        visit(tree, 'paragraph', node => {
            node.properties = {test: 1};
            node.customData = "test";
            visit(node, 'text', textNode => {
                textNode.value = "new value";
                textNode.properties = {test: 1};
                textNode.customData = "test";
            })
        })
    }
}

Later when this data is passed down the line to "rehype" and then "react-markdown" the data is gone.
If I add a "rehype" plugin, the data has disappeared already. But interestingly enough if I add custom data in "rehype" plugin then it will stay and my custom component renderer will receive it!

const MDComponents = {
    p: (props:any) => {
        console.info("All my custom properties are gone",props);
        return (
            <p>
                {props.children}
            </p>
        );
    },
}

[wooorm]

You seem to be using TypeScript. TypeScript can be useful in this case, but you’re setting everything to anys.

The markdown syntax tree (called mdast, used by remark) does not have properties. You can’t set properties there. You‘re not supposed to.

The HTML syntax tree (called hast, used by rehype) does have properties. You can set them there.

If I add a "rehype" plugin, the data has disappeared already. But interestingly enough if I add custom data in "rehype" plugin then it will stay and my custom component renderer will receive it!

Indeed. You want to set properties in html/hast/rehype.

[wooorm]

Your question is posed as an XY problem: https://xyproblem.info. You’re asking about what you think is a solution, instead of the problem. This proposed solution doesn’t make sense. But perhaps knowing the actual problem can help people help you better.

[ChristianMurphy]

To add on, passing properties from mdast to hast is supported, via node.data.hProperties (because remark-rehype and mdast-util-to-hast are used to power react-markdown, see https://github.com/syntax-tree/mdast-util-to-hast#hproperties)

[mvalts]

Well the thing I wan't to achieve is to create HTML elements that depend on some special cases in MD document.
For example if I find a specific definition [fragment]: <0> (some-value) then I wan't to render the next paragraph differently depending on <0> some-value data.

If I could write a plugin that setts this data then I can use it in my CustomComponents.

Is there any way to get those definition objects down to rehype ?

[mvalts]

To add on, passing properties from mdast to hast is supported, via node.data.hProperties (because remark-rehype and mdast-util-to-hast are used to power react-markdown, see https://github.com/syntax-tree/mdast-util-to-hast#hproperties)

This worked! So there is one way to implement my requirements.
Maybe someone will suggest a more elegant solution.

[wooorm]

Your current technique might work and has the benefit of “working” in markdown parsers that don’t understand it. It’s the “Using and abusing markdown to add new meaning” solution in https://github.com/micromark/micromark#extending-markdown, which might be interesting to read!