Switch from parameter-passing to using a facet (#15)

* Switch from parameter-passing to faceting

* Update README

* Ensure that all imports of VirtualTypeScript environment are type-only

Author: tmcw

README.md

@@ -67,10 +67,13 @@ const compilerOpts = {};
 const env = createVirtualTypeScriptEnvironment(system, [], ts, compilerOpts);
 ```
 
-2. Install the sync extension:
+2. Install the facet and the sync extension:
 
-This extension powers the rest: when you make changes in your
-editor, this mirrors them to the TypeScript environment using
+The facet configures the rest of the extensions
+with the right path and environment.
+
+When you make changes in your
+editor, the sync extension mirrors them to the TypeScript environment using
 `createFile` and `updateFile` in the TypeScript compiler.
 
 _Note, also, that we're supplying a path._ These extensions
@@ -81,7 +84,7 @@ as well as the `env` parameter which should be your TypeScript
 environment.
 
 ```ts
-import { tsSync } from "@valtown/codemirror-ts";
+import { tsSync, tsFacet } from "@valtown/codemirror-ts";
 
 let env = "index.ts";
 
@@ -92,7 +95,8 @@ let editor = new EditorView({
       typescript: true,
       jsx: true,
     }),
-    tsSync({ env, path }),
+    tsFacet.of({ env, path }),
+    tsSync(),
   ],
   parent: document.querySelector("#editor"),
 });
@@ -105,7 +109,7 @@ like this and added to the `extensions` array in the setup
 of your CodeMirror instance.
 
 ```ts
-tsLinter({ env, path });
+tsLinter();
 ```
 
 This uses the [@codemirror/lint](https://codemirror.net/docs/ref/#lint)
@@ -122,7 +126,7 @@ sources, we expose a [`CompletionSource`](https://codemirror.net/docs/ref/#autoc
 
 ```ts
 autocompletion({
-  override: [tsAutocomplete({ env, path })],
+  override: [tsAutocomplete()],
 });
 ```
 
@@ -135,10 +139,7 @@ a `CompletionContext` parameter._
 The hover definition can be used like the following:
 
 ```ts
-tsHover({
-  env,
-  path,
-});
+tsHover();
 ```
 
 Which automatically uses a default renderer. However, you can
@@ -147,8 +148,6 @@ to render custom UI if you want to, using the `renderTooltip` option.
 
 ```ts
 tsHover({
-  env,
-  path,
   renderTooltip: (info: HoverInfo) => {
     const div = document.createElement("div");
     if (info.quickInfo?.displayParts) {
@@ -236,15 +235,13 @@ that accept the `worker` instead of `env` as an argument.
 
 ```ts
 [
-  tsSyncWorker({ worker, path }),
-  tsLinterWorker({ worker, path }),
+  tsFacetWorker.of({ worker, path }),
+  tsSyncWorker(),
+  tsLinterWorker(),
   autocompletion({
-    override: [tsAutocompleteWorker({ worker, path })],
-  }),
-  tsHoverWorker({
-    worker,
-    path,
+    override: [tsAutocompleteWorker()],
   }),
+  tsHoverWorker(),
 ];
 ```
 

demo/index.ts

@@ -16,6 +16,8 @@ import {
   tsAutocompleteWorker,
   tsSync,
   tsSyncWorker,
+  tsFacet,
+  tsFacetWorker,
 } from "../src/index.js";
 import * as Comlink from "comlink";
 import { WorkerShape } from "../src/worker.js";
@@ -47,15 +49,13 @@ increment('not a number');`,
         typescript: true,
         jsx: true,
       }),
-      tsSync({ env, path }),
-      tsLinter({ env, path }),
+      tsFacet.of({ env, path }),
+      tsSync(),
+      tsLinter(),
       autocompletion({
-        override: [tsAutocomplete({ env, path })],
-      }),
-      tsHover({
-        env,
-        path,
+        override: [tsAutocomplete()],
       }),
+      tsHover(),
     ],
     parent: document.querySelector("#editor")!,
   });
@@ -85,15 +85,13 @@ increment('not a number');`,
         typescript: true,
         jsx: true,
       }),
-      tsSyncWorker({ worker, path }),
-      tsLinterWorker({ worker, path }),
+      tsFacetWorker.of({ worker, path }),
+      tsSyncWorker(),
+      tsLinterWorker(),
       autocompletion({
-        override: [tsAutocompleteWorker({ worker, path })],
-      }),
-      tsHoverWorker({
-        worker,
-        path,
+        override: [tsAutocompleteWorker()],
       }),
+      tsHoverWorker(),
     ],
     parent: document.querySelector("#editor-worker")!,
   });

src/autocomplete/tsAutocomplete.ts

@@ -3,27 +3,22 @@ import type {
   CompletionResult,
   CompletionSource,
 } from "@codemirror/autocomplete";
-import { type VirtualTypeScriptEnvironment } from "@typescript/vfs";
 import { getAutocompletion } from "./getAutocompletion.js";
+import { tsFacet } from "../facet/tsFacet.js";
 
 /**
  * Create a `CompletionSource` that queries
  * the _on-thread_ TypeScript environments for autocompletions
  * at this character.
  */
-export function tsAutocomplete({
-  path,
-  env,
-}: {
-  path: string;
-  env: VirtualTypeScriptEnvironment;
-}): CompletionSource {
+export function tsAutocomplete(): CompletionSource {
   return async (
     context: CompletionContext,
   ): Promise<CompletionResult | null> => {
+    const config = context.state.facet(tsFacet);
+    if (!config) return null;
     return getAutocompletion({
-      env,
-      path,
+      ...config,
       context,
     });
   };

src/autocomplete/tsAutocompleteWorker.ts

@@ -3,24 +3,20 @@ import type {
   CompletionContext,
   CompletionSource,
 } from "@codemirror/autocomplete";
-import { type WorkerShape } from "../worker.js";
+import { tsFacetWorker } from "../index.js";
 
 /**
  * Create a `CompletionSource` that queries
  * the TypeScript environment in a web worker.
  */
-export function tsAutocompleteWorker({
-  path,
-  worker,
-}: {
-  path: string;
-  worker: WorkerShape;
-}): CompletionSource {
+export function tsAutocompleteWorker(): CompletionSource {
   return async (
     context: CompletionContext,
   ): Promise<CompletionResult | null> => {
-    return worker.getAutocompletion({
-      path,
+    const config = context.state.facet(tsFacetWorker);
+    if (!config) return null;
+    return config.worker.getAutocompletion({
+      path: config.path,
       // Reduce this object so that it's serializable.
       context: {
         pos: context.pos,

src/facet/tsFacet.ts

@@ -0,0 +1,17 @@
+import { combineConfig, Facet } from "@codemirror/state";
+import { type VirtualTypeScriptEnvironment } from "@typescript/vfs";
+
+export const tsFacet = Facet.define<
+  {
+    path: string;
+    env: VirtualTypeScriptEnvironment;
+  },
+  {
+    path: string;
+    env: VirtualTypeScriptEnvironment;
+  } | null
+>({
+  combine(configs) {
+    return combineConfig(configs, {});
+  },
+});

src/facet/tsFacetWorker.ts

@@ -0,0 +1,17 @@
+import { combineConfig, Facet } from "@codemirror/state";
+import { type WorkerShape } from "../worker.js";
+
+export const tsFacetWorker = Facet.define<
+  {
+    path: string;
+    worker: WorkerShape;
+  },
+  {
+    path: string;
+    worker: WorkerShape;
+  } | null
+>({
+  combine(configs) {
+    return combineConfig(configs, {});
+  },
+});

src/hover/getHover.ts

@@ -1,5 +1,5 @@
 import { type QuickInfo, type DefinitionInfo } from "typescript";
-import { VirtualTypeScriptEnvironment } from "@typescript/vfs";
+import { type VirtualTypeScriptEnvironment } from "@typescript/vfs";
 
 /**
  * This information is passed to the API consumer to allow

src/hover/tsHover.ts

@@ -1,21 +1,19 @@
 import { hoverTooltip, Tooltip } from "@codemirror/view";
-import { type VirtualTypeScriptEnvironment } from "@typescript/vfs";
 import { getHover } from "./getHover.js";
 import { defaultRenderer, TooltipRenderer } from "./renderTooltip.js";
+import { tsFacet } from "../facet/tsFacet.js";
 
 export function tsHover({
-  env,
-  path,
   renderTooltip = defaultRenderer,
 }: {
-  env: VirtualTypeScriptEnvironment;
-  path: string;
   renderTooltip?: TooltipRenderer;
-}) {
+} = {}) {
   return hoverTooltip(async (view, pos): Promise<Tooltip | null> => {
+    const config = view.state.facet(tsFacet);
+    if (!config) return null;
+
     const hoverData = getHover({
-      env,
-      path,
+      ...config,
       pos,
     });
 

src/hover/tsHoverWorker.ts

@@ -1,19 +1,17 @@
 import { hoverTooltip, Tooltip } from "@codemirror/view";
-import { type WorkerShape } from "../worker.js";
 import { defaultRenderer, type TooltipRenderer } from "./renderTooltip.js";
+import { tsFacetWorker } from "../index.js";
 
 export function tsHoverWorker({
-  worker,
-  path,
   renderTooltip = defaultRenderer,
 }: {
-  worker: WorkerShape;
-  path: string;
   renderTooltip?: TooltipRenderer;
-}) {
+} = {}) {
   return hoverTooltip(async (view, pos): Promise<Tooltip | null> => {
-    const hoverData = await worker.getHover({
-      path,
+    const config = view.state.facet(tsFacetWorker);
+    if (!config) return null;
+    const hoverData = await config.worker.getHover({
+      path: config.path,
       pos,
     });
 

src/index.ts

@@ -12,3 +12,6 @@ export * from "./lint/getLints.js";
 export * from "./hover/tsHover.js";
 export * from "./hover/tsHoverWorker.js";
 export * from "./hover/getHover.js";
+
+export * from "./facet/tsFacet.js";
+export * from "./facet/tsFacetWorker.js";