Code feedback

[babakfp]

Hi 👋

In terms of unist/mdast/ast, how can I improve this code? I don't know, it doesn't look great.

import { visit } from "unist-util-visit"
import { Transformer } from "unified"
import type { Root } from "mdast"

// Only opening tags because closing tags are parsed correctly by mdast as type of "text"
const SVELTE_SPECIAL_ELEMENTS_NAME = /^svelte:[a-z]+$/i
const SVELTE_SPECIAL_ELEMENTS_OPEN = /<svelte:[a-z]+(?:\s+[^>]*)?>/i
const SVELTE_SPECIAL_ELEMENTS_CLOSE = /<\/svelte:[a-z]+(?:\s+[^>]*)?>/i

export default (): Transformer<Root> => {
    return (tree) => {
        // Tags like `<svelte:something>` gets parsed as type of "link"! This fixes that by setting it to "text" (and later to "html").
        visit(
            tree,
            "paragraph",
            (nodeParagraph, indexParagraph, parentParagraph) => {
                if (typeof indexParagraph === "number" && parentParagraph) {
                    visit(
                        nodeParagraph,
                        "link",
                        (nodeLink, indexLink, parentLink) => {
                            if (typeof indexLink === "number" && parentLink) {
                                if (
                                    SVELTE_SPECIAL_ELEMENTS_NAME.test(
                                        nodeLink.url
                                    )
                                ) {
                                    visit(
                                        nodeLink,
                                        "text",
                                        (nodeText, indexText, parentText) => {
                                            if (
                                                SVELTE_SPECIAL_ELEMENTS_NAME.test(
                                                    nodeText.value
                                                )
                                            ) {
                                                parentLink.children.splice(
                                                    indexLink,
                                                    1,
                                                    {
                                                        // NOTE: Using "text" because closing Svelte special tags are set to the same type. We will change both opening and closing tags to `html` later in the code.
                                                        type: "text",
                                                        value: `<${nodeText.value}>`,
                                                    }
                                                )
                                            }
                                        }
                                    )
                                }
                            }
                        }
                    )

                    // This will leave some p tags with no children. Will be fixed later in the code.
                    visit(
                        nodeParagraph,
                        "text",
                        (nodeText, indexText, parentText) => {
                            if (
                                SVELTE_SPECIAL_ELEMENTS_OPEN.test(
                                    nodeText.value
                                ) ||
                                SVELTE_SPECIAL_ELEMENTS_CLOSE.test(
                                    nodeText.value
                                )
                            ) {
                                // @ts-expect-error
                                nodeText.type = "html"

                                parentParagraph.children.splice(
                                    indexParagraph,
                                    0 + Number(indexText),
                                    nodeText
                                )

                                if (
                                    parentText &&
                                    typeof indexText === "number"
                                ) {
                                    parentText.children.splice(indexText, 1)
                                }
                            }
                        }
                    )
                }
            }
        )

        // Removing empty paragraphs
        visit(tree, "paragraph", (node, index, parent) => {
            if (!node.children.length && parent && typeof index === "number") {
                parent.children.splice(index, 1)
            }
        })
    }
}

[remcohaszing]

My first recommendation if I see such nested code, is to flatten its structures using early returns. This applies to all code, not just when working with unified or ASTs.

Your variable names are in reverse order from what I usually see. For example, the parent of the paragraph is called parentParagraph. To me this reads as the paragraph that is the parent, which is not the case. I suggest reversing those variable names, so parentParagraph → paragraphParent.

I see a line nodeText.type = "html". Changing a node’s type is a bad practice. Better is to replace that node with a new node. If you need properties from the old node, copy them, but only the properties you need (in this case only value).

Since indices are of type number | undefined, I would personally use index == null instead of typeof index === 'number', but that’s a bit of a nitpick.

from a visitor function, you can return SKIP (exported from unist-util-visit) to skip further traversal and increase performance.

You call visit several times, some of which nested. I think it could be 1 traversal using unist-util-visit-parents instead. But I will leave it up to you to implement it.

[babakfp]

Thanks.
I did this, and I think it's good enough 👍

import { visit } from "unist-util-visit"
import { Transformer } from "unified"
import type {
    Blockquote,
    FootnoteDefinition,
    ListItem,
    Paragraph,
    Root,
} from "mdast"

// Examples: `"svelte:head"`, `"svelte:head/"`
const SVELTE_SPECIAL_ELEMENTS_NAME = /^svelte:[a-z]+\/?$/i
const SVELTE_SPECIAL_ELEMENTS_OPEN = /<svelte:[a-z]+(?:\s+[^>]*)?\/?>/i
const SVELTE_SPECIAL_ELEMENTS_CLOSE = /<\/svelte:[a-z]+(?:\s+[^>]*)?>/i

export default (): Transformer<Root> => {
    return (tree) => {
        fixSpecialElements(tree)
        removeEmptyParagraph(tree)
    }
}

/** Converts incorrect type of Svelte Special Elements to `"html"`. */
const fixSpecialElements = (tree: Root) => {
    visit(tree, "paragraph", (node, index, parent) => {
        if (!parent || index === undefined) return

        specialElementsToText(node)
        specialElementsToHtml(node, index, parent)
    })
}

/**
 * Converts special elements type to `"text"`, and moves them (out of `"link"`) to `"paragraph"`.
 */
const specialElementsToText = (node: Paragraph) => {
    visit(node, "link", (linkNode, linkIndex, linkParent) => {
        if (!linkParent || linkIndex === undefined) return
        if (!SVELTE_SPECIAL_ELEMENTS_NAME.test(linkNode.url)) return

        visit(linkNode, "text", (textNode) => {
            if (!SVELTE_SPECIAL_ELEMENTS_NAME.test(textNode.value)) return

            linkParent.children.splice(linkIndex, 1, {
                // We are using `"text"` here because closing special tags are set to the same type.
                type: "text",
                // Adding the angle brackets because they are not included in the `value`.
                value: `<${textNode.value}>`,
            })
        })
    })
}

type ParentOfParagraph = Root | Blockquote | FootnoteDefinition | ListItem

/**
 * Converts special elements type to `"html"`, and moves them (out of `"paragraph"`) to the top level.
 */
const specialElementsToHtml = (
    node: Paragraph,
    index: number,
    parent: ParentOfParagraph
) => {
    visit(node, "text", (textNode, textIndex, textParent) => {
        if (
            !SVELTE_SPECIAL_ELEMENTS_OPEN.test(textNode.value) &&
            !SVELTE_SPECIAL_ELEMENTS_CLOSE.test(textNode.value)
        )
            return

        // Moving it out of the "paragraph" node.
        parent.children.splice(index, 0 + (textIndex ?? 0), {
            // Converting the type, so that in the future parsing pipeline, it parsed correctly.
            type: "html",
            value: textNode.value,
        })

        // Removing it because a copy of it is created and moved out. Not removing it will result it duplication.
        if (!textParent || textIndex === undefined) return
        textParent.children.splice(textIndex, 1)
    })
}

/**
 * Removes parents (with type of `"paragraph"`) if their `children` is empty.
 */
const removeEmptyParagraph = (tree: Root) => {
    visit(tree, "paragraph", (node, index, parent) => {
        if (!parent || index === undefined || node.children.length) return
        parent.children.splice(index, 1)
    })
}

[ChristianMurphy]

Hey again @babakfp! 👋
The answer is similar to before (https://github.com/orgs/rehypejs/discussions/167#discussioncomment-8815787). If you want to embed svelte content in markdown consider https://mdsvex.pngwn.io/
If for some reason mdsvex doesn't meet your needs, you can extend markdown.
To do that you probably want to start at the micromark level, see https://github.com/micromark/micromark#extending-markdown and https://github.com/micromark/micromark#creating-a-micromark-extension

[babakfp]

Hi 👋
Thank you for taking the time, again.
I read your comment back then, however, I didn't want to take more of your time to explain things so because of that I didn't respond. Sorry about that.
what I'm trying to achieve is creating an alternative to mdsvex itself.
I'll take a look at the links you have sent. Thanks.