Add isolated compile function (rehypeToReact) for extended use

[NonozgYtb]

Initial checklist

• [x] I read the support docs
• [x] I read the contributing guide
• [x] I agree to follow the code of conduct
• [x] I searched issues and couldn’t find anything (or linked relevant results below)
• [x] If applicable, I’ve added docs and tests

Description of changes

I have isolated the compiler in the compiler function. I linked this function with the classic use case (unified plugin). I also created a rehypeToReact function that uses the compiler and options without using unified (useful in some cases!).

I added 2 tests : the first and the last of "normal unified plugin test" with the rehypeToReact function. I also added docs of the function.

WHY ?

I'm creating a custom unified function who use the remark-directive and this compiler to compile custom "block" and get an object output to use in custom template. (Read the exemple below)

# Main Part
here

:::block{name=footer}
## Footer content here
This is not in the main display part
:::

Output : (fake rendering)

output = {
    mainContent : "<h1>Main Part</h1><p>here</p>",
    blocks : {
        footer : "<h2>Footer content here</h2><p>This is not in the main display part</p>"
    }
}

I'm french, sorry for my english mistakes. 😅

[NonozgYtb]

The checks finally passed (sorry for the 3 fixs commits).

[codecov-commenter]

Codecov Report

Base: 100.00% // Head: 100.00% // No change to project coverage :thumbsup:

Coverage data is based on head (f709827) compared to base (951a17d). Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #44 +/- ## ========================================= Coverage 100.00% 100.00% ========================================= Files 2 2 Lines 121 150 +29 ========================================= + Hits 121 150 +29 ``` | [Impacted Files](https://codecov.io/gh/rehypejs/rehype-react/pull/44?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=rehypejs) | Coverage Δ | | |---|---|---| | [index.js](https://codecov.io/gh/rehypejs/rehype-react/pull/44?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=rehypejs#diff-aW5kZXguanM=) | `100.00% <100.00%> (ø)` | | | [lib/index.js](https://codecov.io/gh/rehypejs/rehype-react/pull/44?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=rehypejs#diff-bGliL2luZGV4Lmpz) | `100.00% <100.00%> (ø)` | | Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=rehypejs). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=rehypejs)

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[ChristianMurphy]

Welcome @NonozgYtb! Thanks for taking the time to contribute! A few things before getting into a more technical code review.

WHY ?

I'm creating a custom unified function who use the remark-directive and this compiler to compile custom "block" and get an object output to use in custom template.

Could you expand a bit on this? Unified can be nested, where a plugin calls its parent pipeline with content, or creates it's own new pipeline to do processing. Was there a particular problem you ran into with this approach?

This approach may make sense (more on that in a moment), but I want to make sure it either solves the problem you're facing or is a step towards fixing a problem you face, before investing time in reworking this plugin.

I have isolated the compiler in the compiler function.

Unified/Rehype has some precedence for this, for example:

• https://github.com/syntax-tree/hast-util-to-html (for https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify)
• https://github.com/syntax-tree/hast-util-to-dom (for https://github.com/rehypejs/rehype-dom)

Note that in both circumstances, the compiler piece gets its own repository in syntax-tree and the rehype repository becomes a wrapper around that.

[wooorm]

Closing, plugins are for plugins, utilities are for everything under that. In this case, you can use hast-util-to-jsx-runtime

[github-actions[bot]]

Hi! This was closed. Team: If this was merged, please describe when this is likely to be released. Otherwise, please add one of the no/* labels.