Start the quickinfo highlighing

jest.config.js

@@ -10,5 +10,8 @@ module.exports = {
         }
       } 
     ]
+  },
+  "snapshotFormat": {
+    "printBasicPrototype": false
   }
 };

package.json

@@ -16,13 +16,13 @@
     "esbuild": "^0.12.9",
     "esbuild-jest": "^0.5.0",
     "glob": "^7.1.7",
-    "jest": "^27.0.5",
+    "jest": "^28.1.3",
     "markdown-magic": "^2.2.0",
     "markdown-magic-inline-types": "^1.0.2",
     "pleb": "^3.4.4",
     "prettier": "^2.3.1",
     "typescript": "^4.3.4"
-  }, 
+  },
   "prettier": {
     "printWidth": 140
   }

packages/ts-quickinfo-highlighter/index.ts

@@ -0,0 +1,94 @@
+/**
+ * Takes a string of TypeScript code and adds syntax highlighting to it.
+ * @param {string} ts 
+ */
+export const quickInfoToHTML = (ts: string) => {
+    const lexer = lex(ts)
+    let tokens = []
+    let t
+    while(true) {
+        lexer.scan()
+        t = lexer.token()
+        switch (t) {
+            case Token.EOF:
+                return tokens
+            case Token.Identifier:
+            case Token.Literal:
+                tokens.push({ token: t, text: lexer.text() })
+                break
+            default:
+                tokens.push({ token: t })
+                break
+        }
+    }
+} 
+
+export enum Token {
+    Function,
+    Var,
+    Type,
+    Return,
+    Equals,
+    Literal,
+    Identifier,
+    Newline,
+    Semicolon,
+    Colon,
+    Whitespace,
+    Unknown,
+    BOF,
+    EOF,
+}
+export type Lexer = {
+    scan(): void
+    token(): Token
+    pos(): number
+    text(): string
+}
+
+const keywords = {
+    "function": Token.Function,
+    "var": Token.Var,
+    "type": Token.Type,
+    "return": Token.Return,
+}
+export function lex(s: string): Lexer {
+    let pos = 0
+    let text = ""
+    let token = Token.BOF
+    return {
+        scan,
+        token: () => token,
+        pos: () => pos,
+        text: () => text,
+    }
+    function scan() {
+        scanForward(c => /[ \t\b\n]/.test(c))
+        const start = pos
+        if (pos === s.length) {
+            token = Token.EOF
+        }
+        else if (/[0-9]/.test(s.charAt(pos))) {
+            scanForward(c => /[0-9]/.test(c))
+            text = s.slice(start, pos)
+            token = Token.Literal
+        }
+        else if (/[_a-zA-Z]/.test(s.charAt(pos))) {
+            scanForward(c => /[_a-zA-Z0-9]/.test(c))
+            text = s.slice(start, pos)
+            token = text in keywords ? keywords[text as keyof typeof keywords] : Token.Identifier
+        }
+        else {
+            pos++
+            switch (s.charAt(pos - 1)) {
+                case '=': token = Token.Equals; break
+                case ';': token = Token.Semicolon; break
+                case ":": token = Token.Colon; break
+                default: token = Token.Unknown; break
+            }
+        }
+    }
+    function scanForward(pred: (x: string) => boolean) {
+        while (pos < s.length && pred(s.charAt(pos))) pos++
+    }
+}

packages/ts-quickinfo-highlighter/package.json

@@ -0,0 +1,14 @@
+{
+    "name": "ts-quickinfo-highlighter",
+    "version": "1.3.18",
+    "main": "index.js",
+    "author": "Orta Therox",
+    "license": "MIT",
+    "type": "module",
+
+    "devDependencies": {
+      "@types/node": "^14.14.6",
+      "typescript": "^3"
+    }
+  }
+

packages/ts-quickinfo-highlighter/quickinfo.test.ts

@@ -0,0 +1,58 @@
+import { quickInfoToHTML } from "./index";
+
+it("render some examples", async () => {
+  const examples = [
+    "function compact(arr: string[]): string[]",
+    "(parameter) arr: string[]",
+    "(parameter) arr: string[]",
+    "(property) Array<string>.length: number",
+  ];
+
+  expect(quickInfoToHTML(examples[0])).toMatchInlineSnapshot(`
+    [
+      {
+        "token": 0,
+      },
+      {
+        "text": "compact",
+        "token": 6,
+      },
+      {
+        "token": 11,
+      },
+      {
+        "text": "arr",
+        "token": 6,
+      },
+      {
+        "token": 9,
+      },
+      {
+        "text": "string",
+        "token": 6,
+      },
+      {
+        "token": 11,
+      },
+      {
+        "token": 11,
+      },
+      {
+        "token": 11,
+      },
+      {
+        "token": 9,
+      },
+      {
+        "text": "string",
+        "token": 6,
+      },
+      {
+        "token": 11,
+      },
+      {
+        "token": 11,
+      },
+    ]
+  `);
+});