What is the best way to add children to a parent node

[lubiah]

Hi,
I'm currently having a problem and I don't know the best way to go about it.
Here's what I want to achieve .

• Use unist-util-visit to transverse a tree and find each code block.
• For each code block:
  • Loop over a theme array and generate a theme for the code block. (This means a node which has 3 themes will get three versions of itself)

The problem now is

• how to insert the nodes into the tree and how to tell visit to SKIP those nodes which I will add.
• I know I can use parent.splice(index,1, nodes) but how will I be able to generate the Index for those nodes which I'm adding

Here's a simplified version of the code

visit(tree, "code", (node, index,parent )=>{
 const themes = ["a","b","c","d'];
 const newNodes = [];
for (const theme of themes) {
 //Do whatever you will do 
 newNodes.push(newCodeWithTheme)
}
})

So after it's done, how do I generate the index for these nodes and tell visit not to parse them

[ChristianMurphy]

Welcome @lubiah! 👋
I'm not entirely clear if you are doing things in a single pass with the visitor, or multiple.
If you are doing a single pass, unist-util-visit include a SKIP action/return which can be used to skip the children of the current node, see https://github.com/syntax-tree/unist-util-visit#skip
If you are doing multiple passes, first you would need to detect if a node is/has a theme, then call the skip action to avoid re-processing it.

[lubiah]

Sorry, I failed to include this, in my original code, the highlighting is done asynchronously so I can't do that in the visit block.

I use the visit blocks to store the nodes which I would like to highlight, then I'll iterate over those blocks and highlight them and since the addition of those nodes is done outside the visit function. I can't tell it to skip.
But since you said the visit function skips html, then I don't think it will be a problem again

But I did face another problem. Since the blocks are stored in an array, when I'm looping over them, only the first block works. This is because let's say for the index 0 in the stored array, I generate three code blocks for it, so when I use parent.children.splice to insert the nodes, for the index 1 in the stored array, it won't be able to insert the nodes at the correct position since I've added new nodes so the position for index 1 won't be same as it was. Is there any way to go about this?

Another question, why do you suggest I use rehype when remark does the job. Are there any disadvantages

[wooorm]

https://github.com/remarkjs/remark-rehype#what-is-this

[lubiah]

@wooorm , sorry if my question seems unjustifiable but I'm trying to create a remark plugin. How then can I use remark-rehype. I know I can use it when setting up unified to convert MD to html but when I export it the remark plugin, I'm not incharge of setting up the processor

[wooorm]

I linked to documentation that explains why both remark and rehype exist, and why you shouldn’t create a remark plugin when caring about HTML, but a rehype plugin, which is specifically made for dealing with HTML!

[lubiah]

@wooorm you are right that I must use rehype when dealing with HTML. The reason why I chose to use remark instead was that with remark, I accomplished the same thing with less code. I saw an example of the same thing with rehype, the code was much plenty .I really don't do anything with HTML. I just insert it into the tree.
So am I making a mistake using remark?

[lubiah]

Anyways, I've decided to use rehype but my original question still remains unanswered

[wooorm]

I don’t really know what the original question is? Would be useful to have an example of your actual code, the actual problem you are facing, and to hear what you want to improve?

[lubiah]

Strangely, the problem has disappeared after re-writing everything to use rehype instead. I guess using rehype was the best choice after all. I'll go ahead and close the discussion.
Thanks for your time.