ts-highlight 0.1.0 → 0.2.0

package/README.md

@@ -1 +1,63 @@
-# <p align='center'> **es-highlight** </p>
+# <p align='center'> **ts-highlight** </p>
+
+<div align='center'>
+
+[![CI](https://github.com/a-marigold/crumb/actions/workflows/ci.yaml/badge.svg)](https://github.com/a-marigold/ts-highlight/actions) [![npm](https://img.shields.io/npm/v/ts-highlight)](https://npmjs.com/package/ts-highlight)
+
+</div>
+
+<div align='center'>
+
+![marigolds](assets/marigolds.webp)
+
+</div>
+
+### Usage
+
+```typescript
+import { higlight, type HighlightCSSClasses } from 'ts-higlight';
+
+// styles of generated code are extensible
+const cssClasses: HiglightCSSClasses = {
+    pre: 'pre-class second-pre-class', // classes can be divided as if they are in HTML `class` attribute
+    code: 'code-class',
+    line: 'Example-module-css-module__m3Y3uq__line', // classes can be CSS module strings
+
+    token: 'token-class', // `token` class is the class of every token of generated code
+
+    // Every token has its own class for fine grained configuration
+    operator: 'operator-class',
+
+    identifier: 'identifier',
+    keyword: 'keyword',
+
+    bigintChar: 'bigint-class', // class of bigint character (`10n` - `n` is `bigintChar`)
+    stringLiteral: 'string',
+
+    whitespace: 'whitespace', // even whitespace has its own class
+
+
+    ...
+};
+
+highlight(`let a = 'hello';`, cssClasses);
+```
+
+Real output will be:
+
+```html
+<pre class="pre-class second-pre-class">
+    <code class="code-class">
+        <div class="Example-module-css-module__m3Y3uq__line">
+            <span class="token-class keyword">let</span>
+            <span class="token-class whitespace"> </span>
+            <span class="token-class identifier">a</span>
+            <span class="token-class whitespace"> </span>
+            <span class="token-class operator-class">=</span>
+            <span class="token-class whitespace"> </span>
+            <span class="token-class string">'hello'</span>
+            <span class="token-class operator">;</span>
+        </div>
+    </code>
+</pre>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "ts-highlight",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "module": "./dist/index.js",
     "type": "module",
     "private": false,
@@ -11,7 +11,7 @@
     },
     "repository": {
         "type": "github",
-        "url": "https://github.com/a-marigold/es-higрlight"
+        "url": "https://github.com/a-marigold/ts-highlight"
     },
     "scripts": {
         "lint": "biome check",

package/src/generator/generate.ts

@@ -108,6 +108,21 @@ export const generate = (
             continue;
         }
 
+        if (currentToken.type === 'Instruction') {
+            generated +=
+                OPENED_SPAN_WITH_CLASS +
+                cssClasses.token +
+                ' ' +
+                cssClasses.instruction +
+                '>' +
+                currentToken.value +
+                CLOSED_SPAN;
+
+            tokenPos++;
+
+            continue;
+        }
+
         // literals
         if (currentToken.type === 'StringLiteral') {
             generated +=

package/src/generator/types.ts

@@ -56,7 +56,9 @@ export type HighlightCSSClasses = Partial<{
     whitespace: string;
     comment: string;
 
+    // identifier like token types ('Keyword', 'Instruction')
     keyword: string;
+    instruction: string;
 
     operator: string;
 

package/src/tokenizer/constants.ts

@@ -4,7 +4,7 @@ import type {
     DoubleOperators,
     TripleOperators,
     QuadrupleOperator,
-    Keywords,
+    IdentifierLikeMap,
 } from './types';
 
 // operators
@@ -99,36 +99,72 @@ export const tripleOperators: TokenSet = new Set(tripleOperatorsInit);
  */
 export const quadrupleOperator: QuadrupleOperator = '>>>=';
 
-// keywords
-
-const keywordsInit: Keywords = [
-    'var',
-    'let',
-    'const',
-    'typeof',
-    'class',
-
-    'in',
-
-    'new',
-
-    'instanceof',
-    'function',
-
-    'void',
-    'delete',
-    'keyof',
-    'abstract',
-    'interface',
-    'enum',
-    'type',
-    'implements',
-];
-
+// identifier like token types
 /**
- * `Set` with javascript and typescript keywords
+ * Object with Identifier like literals and their TokenType.
+ *
+ * Used to determine correct TokenType.
+ *
+ *
+ *
+ * @example
+ * ```typescript
+ * const unknownIdentifier = 'function';
+ *
+ * const tokenTypeOfUnknownIdentifier = identifierLikeMap[unknownIdentifier as IdentifierLike];
+ *
+ * // Output:
+ *
+ * 'Keyword';
+ *
+ * ```
  */
-export const keywords: TokenSet = new Set(keywordsInit);
+export const identifierLikeMap: IdentifierLikeMap = {
+    NaN: 'NaNLiteral',
+    abstract: 'Keyword',
+    as: 'Instruction',
+    assert: 'Instruction',
+    asserts: 'Instruction',
+    async: 'Instruction',
+    await: 'Instruction',
+    break: 'Instruction',
+    catch: 'Instruction',
+    class: 'Keyword',
+    const: 'Keyword',
+    continue: 'Instruction',
+    debugger: 'Keyword',
+    declare: 'Keyword',
+    default: 'Instruction',
+    delete: 'Keyword',
+    do: 'Instruction',
+    enum: 'Keyword',
+    export: 'Instruction',
+    false: 'BooleanLiteral',
+    finally: 'Instruction',
+    for: 'Instruction',
+    function: 'Keyword',
+    implements: 'Keyword',
+    import: 'Instruction',
+    in: 'Keyword',
+    instanceof: 'Keyword',
+    interface: 'Keyword',
+    is: 'Instruction',
+    keyof: 'Keyword',
+    let: 'Keyword',
+    new: 'Keyword',
+    package: 'Instruction',
+    this: 'Keyword',
+    throw: 'Instruction',
+    true: 'BooleanLiteral',
+    try: 'Instruction',
+    type: 'Keyword',
+    typeof: 'Keyword',
+    var: 'Keyword',
+    void: 'Keyword',
+    while: 'Instruction',
+    with: 'Instruction',
+    yield: 'Instruction',
+};
 
 // regular expresions (RegExp)
 

package/src/tokenizer/tokenize.ts

@@ -6,10 +6,10 @@ import {
     doubleOperators,
     tripleOperators,
     quadrupleOperator,
-    keywords,
+    identifierLikeMap,
 } from './constants';
 
-import type { Token } from './types';
+import type { Token, IdentifierLike } from './types';
 
 /**
  *
@@ -87,7 +87,9 @@ export const tokenize = (source: string): Token[] => {
             const identifier = source.slice(startPos, pos);
 
             tokens[tokens.length] = {
-                type: keywords.has(identifier) ? 'Keyword' : 'Identifier',
+                type:
+                    identifierLikeMap[identifier as IdentifierLike] ??
+                    'Identifier',
                 value: identifier,
                 start: startPos,
                 end: pos,

package/src/tokenizer/types.ts

@@ -14,6 +14,7 @@ export type TokenType =
     | 'WhiteSpace'
     | 'Comment'
     | 'LineDivision'
+    | 'Instruction'
     | LiteralTokenType;
 
 /**
@@ -119,7 +120,11 @@ export type JSKeywords = [
 
     'function',
     'void',
-    'delete'
+    'delete',
+
+    'this',
+
+    'debugger'
 ];
 export type JSKeyword = JSKeywords[number];
 export type TSKeywords = [
@@ -128,13 +133,55 @@ export type TSKeywords = [
     'interface',
     'enum',
     'type',
-    'implements'
+    'implements',
+    'declare'
 ];
 export type TSKeyword = TSKeywords[number];
 
 export type Keywords = [...JSKeywords, ...TSKeywords];
 export type Keyword = Keywords[number];
 
+type JSInstruction =
+    | 'for'
+    | 'do'
+    | 'while'
+    | 'continue'
+    | 'break'
+    | 'import'
+    | 'export'
+    | 'package'
+    | 'try'
+    | 'catch'
+    | 'finally'
+    | 'async'
+    | 'await'
+    | 'yield'
+    | 'with'
+    | 'assert'
+    | 'default'
+    | 'throw';
+
+type TSInstruction = 'as' | 'asserts' | 'is';
+export type Instruction = JSInstruction | TSInstruction;
+
+type Literal = 'true' | 'false' | 'NaN';
+
+/**
+ * Token Types that are like `Identifier` TokenType
+ */
+export type IdentifierLike = Keyword | Instruction | Literal;
+
+/**
+ * Record with Token Types that are like `Identifier` TokenType.
+ * Used to determine correct TokenType
+ */
+export type IdentifierLikeMap = {
+    [K in IdentifierLike]: Extract<
+        TokenType,
+        'Keyword' | 'Instruction' | 'BooleanLiteral' | 'NaNLiteral'
+    >;
+};
+
 /**
  *
  * Type that contains `TokenType` values to be checked in tokenizer.