Start on supporting autoimports (#46)

.github/workflows/deploy.yml

@@ -16,17 +16,28 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 9
+          run_install: false
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: pnpm install
 
       - name: Build project
-        run: npm run build
+        run: pnpm build
+
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Upload artifact

.github/workflows/test.yml

@@ -5,19 +5,37 @@ on: push
 jobs:
   build:
     name: Test
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-latest    
+
+    permissions:
+      # Required to checkout the code
+      contents: read
+      # Required to put a comment into the pull-request
+      pull-requests: write
 
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 9
+          run_install: false
 
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: 20
+          cache: 'pnpm'
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: pnpm install
 
-      - run: npm run tsc
+      - run: npm run typecheck
       - run: npm run test
+      - name: 'Report Coverage'
+        # Set if: always() to also generate the report if tests are failing
+        # Only works if you set `reportOnFailure: true` in your vite config as specified above
+        if: always() 
+        uses:  davelosert/vitest-coverage-report-action@v2

.gitignore

@@ -1,3 +1,6 @@
 node_modules
+coverage
+src/**.js
+scripts/**.js
 dist
 .DS_Store

README.md

@@ -16,6 +16,7 @@ in CodeMirror.
 - Hover hints for types
 - Autocomplete
 - Diagnostics (lints, in CodeMirror's terminology)
+- Go-to definition
 
 ## Peer dependencies
 
@@ -244,6 +245,7 @@ that accept the `worker` instead of `env` as an argument.
     override: [tsAutocompleteWorker()],
   }),
   tsHoverWorker(),
+  tsGotoWorker(),
 ];
 ```
 
@@ -294,6 +296,15 @@ in the future.
 
 Comlink is [lightweight](https://bundlephobia.com/package/[email protected]) (4.7kb gzipped).
 
+## Conceptual notes: LSP
+
+This module uses TypeScript’s public APIs to power its functionality:
+it _doesn't_ use the [Language Server Protocol](https://en.wikipedia.org/wiki/Language_Server_Protocol), which is
+a specification developed by Microsoft and intended for functionality like
+this. TypeScript itself does not have a first-party LSP implementation
+and LSP is usually used across a network. Most good TypeScript language
+tooling, like VS Code’s autocompletion, does not use the LSP specification.
+
 ### ❤️ Other great CodeMirror plugins
 
 - [codemirror-vim](https://github.com/replit/codemirror-vim)

biome.json

@@ -0,0 +1,36 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": ["demo", "dist", "coverage", "scripts", "test"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"style": {
+				"noNonNullAssertion": "off"
+			},
+			"suspicious": {
+				"noConsole": "error"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	}
+}

demo/demo.css

@@ -1,49 +1,3 @@
-body {
-  margin: 0;
-  font-family: "IBM Plex Mono", monospace;
-  background: #eee;
-  color: #333;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-h1 {
-  margin: 0;
-}
-
-h2 {
-  font-weight: normal;
-  font-size: 18px;
-}
-
-p {
-  line-height: 1.5;
-}
-
-a {
-  color: blue;
-}
-
-a:hover {
-  color: green;
-}
-
-.cm-editor {
-  border: 1px solid #000;
-}
-
-main {
-  max-width: 640px;
-  min-height: 100vh;
-  margin: 0 auto;
-  background: #fff;
-  padding: 20px;
-  border-left: 1px solid #aaa;
-  border-right: 1px solid #aaa;
-}
-
 .quick-info-punctuation {
   color: #ccc;
 }

demo/index.html

@@ -4,13 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>codemirror-ts demo</title>
+    <meta name='description' content='A set of CodeMirror extensions that give it the powers of TypeScript' />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap"
       rel="stylesheet"
     />
-    <link href="./demo.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]">
+    <link rel="stylesheet" href="demo.css">
   </head>
   <body>
     <main>
@@ -28,16 +30,17 @@ <h2>Currently supported</h2>
         <li>Autocomplete</li>
         <li>Hover</li>
         <li>Diagnostics</li>
+        <li>Go to definition</li>
       </ul>
-      <h2>Demo</h2>
+      <h2>Demos</h2>
 
       <h3>TypeScript running on the page</h3>
-      <div id="app">
+      <div id="app" class='border'>
         <div id="editor"></div>
       </div>
 
       <h3>TypeScript environment in a web worker</h3>
-      <div id="app">
+      <div id="app" class='border'>
         <div id="editor-worker"></div>
       </div>
     </main>

demo/index.ts

@@ -18,20 +18,22 @@ import {
   tsSyncWorker,
   tsFacet,
   tsFacetWorker,
+  tsGotoWorker,
 } from "../src/index.js";
 import * as Comlink from "comlink";
 import { WorkerShape } from "../src/worker.js";
 
 (async () => {
   const fsMap = await createDefaultMapFromCDN(
     { target: ts.ScriptTarget.ES2022 },
-    "3.7.3",
+    ts.version,
     true,
     ts,
   );
   const system = createSystem(fsMap);
-  const compilerOpts = {};
-  const env = createVirtualTypeScriptEnvironment(system, [], ts, compilerOpts);
+  const env = createVirtualTypeScriptEnvironment(system, [], ts, {
+    lib: ["ES2022"],
+  });
 
   const path = "index.ts";
 
@@ -61,6 +63,16 @@ increment('not a number');`,
   });
 })();
 
+function renderDisplayParts(dp: ts.SymbolDisplayPart[]) {
+  const div = document.createElement("div");
+  for (const part of dp) {
+    const span = div.appendChild(document.createElement("span"));
+    span.className = `quick-info-${part.kind}`;
+    span.innerText = part.text;
+  }
+  return div;
+}
+
 (async () => {
   const path = "index.ts";
 
@@ -89,9 +101,31 @@ increment('not a number');`,
       tsSyncWorker(),
       tsLinterWorker(),
       autocompletion({
-        override: [tsAutocompleteWorker()],
+        override: [
+          tsAutocompleteWorker({
+            renderAutocomplete(raw) {
+              return () => {
+                const div = document.createElement("div");
+                if (raw.documentation) {
+                  const description = div.appendChild(
+                    document.createElement("div"),
+                  );
+                  description.appendChild(
+                    renderDisplayParts(raw.documentation),
+                  );
+                }
+                if (raw?.displayParts) {
+                  const dp = div.appendChild(document.createElement("div"));
+                  dp.appendChild(renderDisplayParts(raw.displayParts));
+                }
+                return { dom: div };
+              };
+            },
+          }),
+        ],
       }),
       tsHoverWorker(),
+      tsGotoWorker(),
     ],
     parent: document.querySelector("#editor-worker")!,
   });

demo/worker.ts

@@ -8,15 +8,18 @@ import * as Comlink from "comlink";
 import { createWorker } from "../src/worker/createWorker.js";
 
 Comlink.expose(
-  createWorker(async function () {
-    const fsMap = await createDefaultMapFromCDN(
-      { target: ts.ScriptTarget.ES2022 },
-      "3.7.3",
-      false,
-      ts,
-    );
-    const system = createSystem(fsMap);
-    const compilerOpts = {};
-    return createVirtualTypeScriptEnvironment(system, [], ts, compilerOpts);
+  createWorker({
+    env: (async function () {
+      const fsMap = await createDefaultMapFromCDN(
+        { target: ts.ScriptTarget.ES2022 },
+        ts.version,
+        false,
+        ts,
+      );
+      const system = createSystem(fsMap);
+      return createVirtualTypeScriptEnvironment(system, [], ts, {
+        lib: ["ES2022"],
+      });
+    })(),
   }),
 );