@suin/refractor-group-by-lines

A utility to embed line information to Refractor ASTs.

Installation

``bash
yarn add @suin/refractor-group-by-lines


or


npm install @suin/refractor-group-by-lines
`

Usage

$3

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 > >;\n> >Many >. >Tokens >. >In >.A >. >Single >. >Line >;>
``

API Reference

https://suin.github.io/refractor-group-by-lines/