Giter Club home page Giter Club logo

refractor-group-by-lines's Introduction

@suin/refractor-group-by-lines

A utility to embed line information to Refractor ASTs.

Installation

yarn add @suin/refractor-group-by-lines
# or
npm install @suin/refractor-group-by-lines

Usage

Basic Usage

code.js:

/* MULTIPLE
   LINE
   COMMENT */
`MULTIPLE
  LINE
  STRING`;
Many.Tokens.In.A.Single.Line;
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<span>[1]
│   │ properties: {"className":["token","comment"]}
│   └─0 text "/* MULTIPLE\n   LINE\n   COMMENT */"
├─1 text "\n"
├─2 element<span>[3]
│   │ properties: {"className":["token","template-string"]}
│   ├─0 element<span>[1]
│   │   │ properties: {"className":["token","template-punctuation","string"]}
│   │   └─0 text "`"
│   ├─1 element<span>[1]
│   │   │ properties: {"className":["token","string"]}
│   │   └─0 text "MULTIPLE\n  LINE\n  STRING"
│   └─2 element<span>[1]
│       │ properties: {"className":["token","template-punctuation","string"]}
│       └─0 text "`"
├─3 element<span>[1]
│   │ properties: {"className":["token","punctuation"]}
│   └─0 text ";"
├─4 text "\n"
├─5 element<span>[1]
│   │ properties: {"className":["token","maybe-class-name"]}
│   └─0 text "Many"
├─6 element<span>[1]
│   │ properties: {"className":["token","punctuation"]}
│   └─0 text "."
├─7 element<span>[1]
│   │ properties: {"className":["token","property-access"]}
│   └─0 element<span>[1]
│       │ properties: {"className":["token","maybe-class-name"]}
│       └─0 text "Tokens"
├─8 element<span>[1]
│   │ properties: {"className":["token","punctuation"]}
│   └─0 text "."
├─9 element<span>[1]
│   │ properties: {"className":["token","property-access"]}
│   └─0 element<span>[1]
│       │ properties: {"className":["token","maybe-class-name"]}
│       └─0 text "In"
├─10 element<span>[1]
│   │ properties: {"className":["token","punctuation"]}
│   └─0 text "."
├─11 element<span>[1]
│   │ properties: {"className":["token","constant"]}
│   └─0 text "A"
├─12 element<span>[1]
│   │ properties: {"className":["token","punctuation"]}
│   └─0 text "."
├─13 element<span>[1]
│   │ properties: {"className":["token","property-access"]}
│   └─0 element<span>[1]
│       │ properties: {"className":["token","maybe-class-name"]}
│       └─0 text "Single"
├─14 element<span>[1]
│   │ properties: {"className":["token","punctuation"]}
│   └─0 text "."
├─15 element<span>[1]
│   │ properties: {"className":["token","property-access"]}
│   └─0 element<span>[1]
│       │ properties: {"className":["token","maybe-class-name"]}
│       └─0 text "Line"
└─16 element<span>[1]
    │ properties: {"className":["token","punctuation"]}
    └─0 text ";"

The structure of the newTree above becomes:

root[7]
├─0 element<span>[1]
│   │ properties: {"className":["line"],"data-line-number":1}
│   └─0 element<span>[1]
│       │ properties: {"className":["token","comment"]}
│       └─0 text "/* MULTIPLE\n"
├─1 element<span>[1]
│   │ properties: {"className":["line"],"data-line-number":2}
│   └─0 element<span>[1]
│       │ properties: {"className":["token","comment"]}
│       └─0 text "   LINE\n"
├─2 element<span>[2]
│   │ properties: {"className":["line"],"data-line-number":3}
│   ├─0 element<span>[1]
│   │   │ properties: {"className":["token","comment"]}
│   │   └─0 text "   COMMENT */"
│   └─1 text "\n"
├─3 element<span>[2]
│   │ properties: {"className":["line"],"data-line-number":4}
│   ├─0 element<span>[1]
│   │   │ properties: {"className":["token","template-string","template-punctuation","string"]}
│   │   └─0 text "`"
│   └─1 element<span>[1]
│       │ properties: {"className":["token","template-string","string"]}
│       └─0 text "MULTIPLE\n"
├─4 element<span>[1]
│   │ properties: {"className":["line"],"data-line-number":5}
│   └─0 element<span>[1]
│       │ properties: {"className":["token","template-string","string"]}
│       └─0 text "  LINE\n"
├─5 element<span>[4]
│   │ properties: {"className":["line"],"data-line-number":6}
│   ├─0 element<span>[1]
│   │   │ properties: {"className":["token","template-string","string"]}
│   │   └─0 text "  STRING"
│   ├─1 element<span>[1]
│   │   │ properties: {"className":["token","template-string","template-punctuation","string"]}
│   │   └─0 text "`"
│   ├─2 element<span>[1]
│   │   │ properties: {"className":["token","punctuation"]}
│   │   └─0 text ";"
│   └─3 text "\n"
└─6 element<span>[12]
    │ properties: {"className":["line"],"data-line-number":7}
    ├─0 element<span>[1]
    │   │ properties: {"className":["token","maybe-class-name"]}
    │   └─0 text "Many"
    ├─1 element<span>[1]
    │   │ properties: {"className":["token","punctuation"]}
    │   └─0 text "."
    ├─2 element<span>[1]
    │   │ properties: {"className":["token","property-access","maybe-class-name"]}
    │   └─0 text "Tokens"
    ├─3 element<span>[1]
    │   │ properties: {"className":["token","punctuation"]}
    │   └─0 text "."
    ├─4 element<span>[1]
    │   │ properties: {"className":["token","property-access","maybe-class-name"]}
    │   └─0 text "In"
    ├─5 element<span>[1]
    │   │ properties: {"className":["token","punctuation"]}
    │   └─0 text "."
    ├─6 element<span>[1]
    │   │ properties: {"className":["token","constant"]}
    │   └─0 text "A"
    ├─7 element<span>[1]
    │   │ properties: {"className":["token","punctuation"]}
    │   └─0 text "."
    ├─8 element<span>[1]
    │   │ properties: {"className":["token","property-access","maybe-class-name"]}
    │   └─0 text "Single"
    ├─9 element<span>[1]
    │   │ properties: {"className":["token","punctuation"]}
    │   └─0 text "."
    ├─10 element<span>[1]
    │   │ properties: {"className":["token","property-access","maybe-class-name"]}
    │   └─0 text "Line"
    └─11 element<span>[1]
        │ properties: {"className":["token","punctuation"]}
        └─0 text ";"

HTML would be like this:

<span class="line" data-line-number="1"
  ><span class="token comment">/* MULTIPLE\n</span></span
><span class="line" data-line-number="2"
  ><span class="token comment"> LINE\n</span></span
><span class="line" data-line-number="3"
  ><span class="token comment"> COMMENT */</span>\n</span
><span class="line" data-line-number="4"
  ><span class="token template-string template-punctuation string">`</span
  ><span class="token template-string string">MULTIPLE\n</span></span
><span class="line" data-line-number="5"
  ><span class="token template-string string"> LINE\n</span></span
><span class="line" data-line-number="6"
  ><span class="token template-string string"> STRING</span
  ><span class="token template-string template-punctuation string">`</span
  ><span class="token punctuation">;</span>\n</span
><span class="line" data-line-number="7"
  ><span class="token maybe-class-name">Many</span
  ><span class="token punctuation">.</span
  ><span class="token property-access maybe-class-name">Tokens</span
  ><span class="token punctuation">.</span
  ><span class="token property-access maybe-class-name">In</span
  ><span class="token punctuation">.</span><span class="token constant">A</span
  ><span class="token punctuation">.</span
  ><span class="token property-access maybe-class-name">Single</span
  ><span class="token punctuation">.</span
  ><span class="token property-access maybe-class-name">Line</span
  ><span class="token punctuation">;</span></span
>

API Reference

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

refractor-group-by-lines's People

Contributors

semantic-release-bot avatar suin avatar

Watchers

avatar avatar

Forkers

scm-manager

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.