https://github.com/suin/refractor-group-by-lines
A utility to embed line information to Refractor ASTs
https://github.com/suin/refractor-group-by-lines
refractor
Last synced: 11 months ago
JSON representation
A utility to embed line information to Refractor ASTs
- Host: GitHub
- URL: https://github.com/suin/refractor-group-by-lines
- Owner: suin
- License: mit
- Created: 2021-06-02T06:45:33.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-02T06:47:48.000Z (about 5 years ago)
- Last Synced: 2025-06-23T04:42:36.852Z (about 1 year ago)
- Topics: refractor
- Language: TypeScript
- Homepage:
- Size: 145 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @suin/refractor-group-by-lines
A utility to embed line information to [Refractor](https://github.com/wooorm/refractor) ASTs.
## Installation
```bash
yarn add @suin/refractor-group-by-lines
# or
npm install @suin/refractor-group-by-lines
```
## Usage
### Basic Usage
code.js:
```js
/* MULTIPLE
LINE
COMMENT */
`MULTIPLE
LINE
STRING`;
Many.Tokens.In.A.Single.Line;
```
```typescript
import refractor from "refractor";
import groupByLines from "@suin/refractor-group-by-lines";
const code = fs.readFileSync("./code.js", "utf-8");
const tree = refractor.highlight(code, "js");
const newTree = groupByLines(tree);
```
The structure of `tree` is:
```
root[17]
├─0 element[1]
│ │ properties: {"className":["token","comment"]}
│ └─0 text "/* MULTIPLE\n LINE\n COMMENT */"
├─1 text "\n"
├─2 element[3]
│ │ properties: {"className":["token","template-string"]}
│ ├─0 element[1]
│ │ │ properties: {"className":["token","template-punctuation","string"]}
│ │ └─0 text "`"
│ ├─1 element[1]
│ │ │ properties: {"className":["token","string"]}
│ │ └─0 text "MULTIPLE\n LINE\n STRING"
│ └─2 element[1]
│ │ properties: {"className":["token","template-punctuation","string"]}
│ └─0 text "`"
├─3 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text ";"
├─4 text "\n"
├─5 element[1]
│ │ properties: {"className":["token","maybe-class-name"]}
│ └─0 text "Many"
├─6 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text "."
├─7 element[1]
│ │ properties: {"className":["token","property-access"]}
│ └─0 element[1]
│ │ properties: {"className":["token","maybe-class-name"]}
│ └─0 text "Tokens"
├─8 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text "."
├─9 element[1]
│ │ properties: {"className":["token","property-access"]}
│ └─0 element[1]
│ │ properties: {"className":["token","maybe-class-name"]}
│ └─0 text "In"
├─10 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text "."
├─11 element[1]
│ │ properties: {"className":["token","constant"]}
│ └─0 text "A"
├─12 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text "."
├─13 element[1]
│ │ properties: {"className":["token","property-access"]}
│ └─0 element[1]
│ │ properties: {"className":["token","maybe-class-name"]}
│ └─0 text "Single"
├─14 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text "."
├─15 element[1]
│ │ properties: {"className":["token","property-access"]}
│ └─0 element[1]
│ │ properties: {"className":["token","maybe-class-name"]}
│ └─0 text "Line"
└─16 element[1]
│ properties: {"className":["token","punctuation"]}
└─0 text ";"
```
The structure of the `newTree` above becomes:
```
root[7]
├─0 element[1]
│ │ properties: {"className":["line"],"data-line-number":1}
│ └─0 element[1]
│ │ properties: {"className":["token","comment"]}
│ └─0 text "/* MULTIPLE\n"
├─1 element[1]
│ │ properties: {"className":["line"],"data-line-number":2}
│ └─0 element[1]
│ │ properties: {"className":["token","comment"]}
│ └─0 text " LINE\n"
├─2 element[2]
│ │ properties: {"className":["line"],"data-line-number":3}
│ ├─0 element[1]
│ │ │ properties: {"className":["token","comment"]}
│ │ └─0 text " COMMENT */"
│ └─1 text "\n"
├─3 element[2]
│ │ properties: {"className":["line"],"data-line-number":4}
│ ├─0 element[1]
│ │ │ properties: {"className":["token","template-string","template-punctuation","string"]}
│ │ └─0 text "`"
│ └─1 element[1]
│ │ properties: {"className":["token","template-string","string"]}
│ └─0 text "MULTIPLE\n"
├─4 element[1]
│ │ properties: {"className":["line"],"data-line-number":5}
│ └─0 element[1]
│ │ properties: {"className":["token","template-string","string"]}
│ └─0 text " LINE\n"
├─5 element[4]
│ │ properties: {"className":["line"],"data-line-number":6}
│ ├─0 element[1]
│ │ │ properties: {"className":["token","template-string","string"]}
│ │ └─0 text " STRING"
│ ├─1 element[1]
│ │ │ properties: {"className":["token","template-string","template-punctuation","string"]}
│ │ └─0 text "`"
│ ├─2 element[1]
│ │ │ properties: {"className":["token","punctuation"]}
│ │ └─0 text ";"
│ └─3 text "\n"
└─6 element[12]
│ properties: {"className":["line"],"data-line-number":7}
├─0 element[1]
│ │ properties: {"className":["token","maybe-class-name"]}
│ └─0 text "Many"
├─1 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text "."
├─2 element[1]
│ │ properties: {"className":["token","property-access","maybe-class-name"]}
│ └─0 text "Tokens"
├─3 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text "."
├─4 element[1]
│ │ properties: {"className":["token","property-access","maybe-class-name"]}
│ └─0 text "In"
├─5 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text "."
├─6 element[1]
│ │ properties: {"className":["token","constant"]}
│ └─0 text "A"
├─7 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text "."
├─8 element[1]
│ │ properties: {"className":["token","property-access","maybe-class-name"]}
│ └─0 text "Single"
├─9 element[1]
│ │ properties: {"className":["token","punctuation"]}
│ └─0 text "."
├─10 element[1]
│ │ properties: {"className":["token","property-access","maybe-class-name"]}
│ └─0 text "Line"
└─11 element[1]
│ properties: {"className":["token","punctuation"]}
└─0 text ";"
```
HTML would be like this:
```html
/* MULTIPLE\n LINE\n COMMENT */\n`MULTIPLE\n LINE\n STRING`;\nMany.Tokens.In.A.Single.Line;
```
## API Reference
https://suin.github.io/refractor-group-by-lines/