https://github.com/thefrontside/hastx
Create Rehype syntax trees using JSX
https://github.com/thefrontside/hastx
Last synced: about 1 year ago
JSON representation
Create Rehype syntax trees using JSX
- Host: GitHub
- URL: https://github.com/thefrontside/hastx
- Owner: thefrontside
- Created: 2023-07-02T12:54:24.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-08T13:00:45.000Z (over 1 year ago)
- Last Synced: 2025-03-28T11:43:24.272Z (over 1 year ago)
- Language: TypeScript
- Size: 105 KB
- Stars: 11
- Watchers: 5
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
Awesome Lists containing this project
README
## hastx
Create [hast][hast] syntax trees using JSX
[Hast][hast] is an abstract syntax tree format for hypertext, and it is used by
the [Rehype][Rehype] ecosystem as a universal representation for HTML documents.
This module provides a way to create hast trees using JSX which are suitable as
inputs to any Rehype pipeline.
For example, the following code uses JSX to create a section of HTML and then
pipes it through the [rehype-slug][rehype-slug] and
[rehype-autolink-headings][rehype-autolink-headings] to automatically add
internal ids and links to each `h1` element
```jsx
import rehypeSlug from "rehype-slug";
import rehypeAutoLinkHeadings from "rehype-autolink-headings";
import { pipe } from "lodash/fp";
let enhanced = pipe(rehypeSlug(), rehypeAutoLinkHeandings())(
Chapter 1
It was the best of times. It was the worst of times...
,
);
```
This package only supports the modern "automatic" JSX Transform. How to
configure this is highly dependent on your compiler, but generally involve
setting the `jsxImportSource` attribute to "hastx" either via a settings file or
a compiler pragma. The following list is non-exhaustive.
### Deno
Add the following to your `deno.json`:
```json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hastx"
},
"imports": {
"hastx/jsx-runtime": "npm:hastx@latest"
}
}
```
### TypeScript
Install the "hastx" package from npm, and configure your jsxImportSource
```json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hastx"
}
}
```
[hast]: https://github.com/syntax-tree/hast
[Rehype]: https://github.com/rehypejs/rehype
[rehype-slug]: https://github.com/rehypejs/rehype-slug
[rehype-autolink-headings]: https://github.com/rehypejs/rehype-autolink-headings