typescript-eslint · armano2 · Apr 7, 2023 · Mar 31, 2023 · Apr 2, 2023 · Apr 2, 2023
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
diff --git a/packages/website/src/components/editor/loadSandbox.ts b/packages/website/src/components/editor/loadSandbox.ts
@@ -1,15 +1,15 @@
 import type MonacoEditor from 'monaco-editor';
 
 import type * as SandboxFactory from '../../vendor/sandbox';
-import type { LintUtils } from '../linter/WebLinter';
+import type { WebLinterModule } from '../linter/types';
 
 type Monaco = typeof MonacoEditor;
 type Sandbox = typeof SandboxFactory;
 
 export interface SandboxModel {
   main: Monaco;
   sandboxFactory: Sandbox;
-  lintUtils: LintUtils;
+  lintUtils: WebLinterModule;
 }
 
 function loadSandbox(tsVersion: string): Promise<SandboxModel> {
@@ -32,7 +32,7 @@ function loadSandbox(tsVersion: string): Promise<SandboxModel> {
       });
 
       // Grab a copy of monaco, TypeScript and the sandbox
-      window.require<[Monaco, Sandbox, LintUtils]>(
+      window.require<[Monaco, Sandbox, WebLinterModule]>(
         ['vs/editor/editor.main', 'sandbox/index', 'linter/index'],
         (main, sandboxFactory, lintUtils) => {
           resolve({ main, sandboxFactory, lintUtils });

diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
@@ -4,14 +4,15 @@ import { useEffect, useState } from 'react';
 
 import type { createTypeScriptSandbox } from '../../vendor/sandbox';
 import { createCompilerOptions } from '../lib/createCompilerOptions';
-import { WebLinter } from '../linter/WebLinter';
+import { createFileSystem } from '../linter/bridge';
+import { type CreateLinter, createLinter } from '../linter/createLinter';
+import type { PlaygroundSystem } from '../linter/types';
 import type { RuleDetails } from '../types';
 import { editorEmbedId } from './EditorEmbed';
 import { sandboxSingleton } from './loadSandbox';
 import type { CommonEditorProps } from './types';
 
 export interface SandboxServicesProps {
-  readonly jsx?: boolean;
   readonly onLoaded: (
     ruleDetails: RuleDetails[],
     tsVersions: readonly string[],
@@ -23,7 +24,8 @@ export type SandboxInstance = ReturnType<typeof createTypeScriptSandbox>;
 
 export interface SandboxServices {
   sandboxInstance: SandboxInstance;
-  webLinter: WebLinter;
+  system: PlaygroundSystem;
+  webLinter: CreateLinter;
 }
 
 export const useSandboxServices = (
@@ -67,22 +69,27 @@ export const useSandboxServices = (
           colorMode === 'dark' ? 'vs-dark' : 'vs-light',
         );
 
-        const libEntries = new Map<string, string>();
+        const system = createFileSystem(props, sandboxInstance.tsvfs);
+
         const worker = await sandboxInstance.getWorkerProcess();
         if (worker.getLibFiles) {
           const libs = await worker.getLibFiles();
           for (const [key, value] of Object.entries(libs)) {
-            libEntries.set('/' + key, value);
+            system.writeFile('/' + key, value);
           }
         }
 
-        const system = sandboxInstance.tsvfs.createSystem(libEntries);
+        window.system = system;
         window.esquery = lintUtils.esquery;
 
-        const webLinter = new WebLinter(system, compilerOptions, lintUtils);
+        const webLinter = createLinter(
+          system,
+          lintUtils,
+          sandboxInstance.tsvfs,
+        );
 
         onLoaded(
-          Array.from(webLinter.rulesMap.values()),
+          Array.from(webLinter.rules.values()),
           Array.from(
             new Set([...sandboxInstance.supportedVersions, window.ts.version]),
           )
@@ -91,8 +98,9 @@ export const useSandboxServices = (
         );
 
         setServices({
-          sandboxInstance,
+          system,
           webLinter,
+          sandboxInstance,
         });
       })
       .catch(setServices);

diff --git a/packages/website/src/components/lib/createEventsBinder.ts b/packages/website/src/components/lib/createEventsBinder.ts
@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createEventsBinder<T extends (...args: any[]) => void>(): {
+  trigger: (...args: Parameters<T>) => void;
+  register: (cb: T) => () => void;
+} {
+  const events = new Set<T>();
+
+  return {
+    trigger(...args: Parameters<T>): void {
+      events.forEach(cb => cb(...args));
+    },
+    register(cb: T): () => void {
+      events.add(cb);
+      return (): void => {
+        events.delete(cb);
+      };
+    },
+  };
+}
diff --git a/packages/website/src/components/lib/jsonSchema.ts b/packages/website/src/components/lib/jsonSchema.ts
@@ -1,16 +1,16 @@
 import type { JSONSchema4 } from '@typescript-eslint/utils/json-schema';
 import type * as ts from 'typescript';
 
-import type { WebLinter } from '../linter/WebLinter';
+import type { CreateLinter } from '../linter/createLinter';
 
 /**
  * Get the JSON schema for the eslint config
  * Currently we only support the rules and extends
  */
-export function getEslintJsonSchema(linter: WebLinter): JSONSchema4 {
+export function getEslintJsonSchema(linter: CreateLinter): JSONSchema4 {
   const properties: Record<string, JSONSchema4> = {};
 
-  for (const [, item] of linter.rulesMap) {
+  for (const [, item] of linter.rules) {
     properties[item.name] = {
       description: `${item.description}\n ${item.url}`,
       title: item.name.startsWith('@typescript') ? 'Rules' : 'Core rules',

diff --git a/packages/website/src/components/linter/CompilerHost.ts b/packages/website/src/components/linter/CompilerHost.ts
diff --git a/packages/website/src/components/linter/WebLinter.ts b/packages/website/src/components/linter/WebLinter.ts