rehype-parse / stringify: Can sibling nodes be added while in fragment mode?

[AshtarCodes]

I notice that modifying the nodes while in document mode works fine. When I attempt to do the same in fragment mode, it only seems to remove nodes. I would appreciate greater insight into how fragment mode is working. What does it mean that document mode "opens body tags in just the right places" ? and does this not occur in fragment mode?

For the following two source files:
Document mode

Fragment mode

When I visit nodes with unist-util-visit and attempt to rearrange nodes, here is the result:
Document mode (perfect!)

Fragment mode (missing an entire node)

Thank you!

[wooorm]

Document mode is as if opening a file in a browser. It expects a head, a body, etc.
Fragment is, well, not that. When you some HTML that could be in the body or not.

It’s a bit hard to help you with this case because I don’t know what you’re doing. Can you provide more info?

[AshtarCodes]

Sure. What I'm doing is searching the tree for specific nodes that are the children of other nodes in the body, and then rearranging them to be sibling nodes (by filtering the children array, and then splicing the filtered nodes into the parent node's children array). In this case, blueButton is a child of the body and blueAlert is a child of blueButton. I then pull blueAlert out of blueButton, and insert it next to blueButton so it is a direct child of the body.

When in document mode, pulling out and then reinserting works. In fragment mode, filtering the node out of the body works but it does not seem to let me splice the node back in.

This is the function I'm using to modify the tree

[wooorm]

I recommend reading the guides on tree traversal:

• https://unifiedjs.com/learn/recipe/tree-traversal/
• https://unifiedjs.com/learn/recipe/remove-node/
• https://unifiedjs.com/learn/recipe/tree-traversal-typescript/
• https://unifiedjs.com/learn/recipe/narrow-node-typescript/

because:

• using anys anywhere defeats the purpose of TypeScript. Types can help with these things.
• you’re changing parent.children while visiting. That’s fine. But well, those new siblings are going to be visited too. If you want that, then the code is doing that. If you don‘t want that, you must return what sibling visit should jump to. This specific bug is explained in the second link (for reference: https://unifiedjs.com/learn/recipe/remove-node/)

Some random tips:

• isTarget = node.type === 'element' && voidElements.includes(node.tagName)
• L311: index can be 0, better to compare with null explicitly.
• L313: you can splice multiple things: parent.children.splice(next, 0, ...misplacedNodes)
• L315: why is there a ts-ignore?

This code looks quite brittle, you previously asked a question and I suggested webparser, did that not work?

T- this is a screenshot of part of your code, i.e., there is nothing about documents and fragments, I don‘t know what you’re doing with that, and that might, as you say, be where the bugs are. If you’re still having problems, please post the smallest reproduction you can make, in actual code

[AshtarCodes]

Oh, classic mistake. I just figured out the if check is always falsy since the index is 0 so the splicing was never occurring. I guess I just needed to look at it in the morning. 😅 Thanks again for your help @wooorm !

[AshtarCodes]

Ah, thank you for the typescript information. I meant to take another go at that later on, I struggled with setting the right types for these. and I appreciate your analysis of my code. I'll take a look at these guides and incorporate your feedback.

My org doesn't have webparser on their approved list of packages right now. It will take a little while to request, so I attempted this in the interest of time. I'll keep it in mind as this code is developed further.

Thanks again for your time @wooorm