Merge pull request solidjs#120 from joshwilsonvu/master

Add ESLint support

Author: Milo

.gitignore

@@ -6,4 +6,6 @@ lib
 
 .yarn*
 yarn.lock
-package-lock.json
+package-lock.json
+
+.DS_Store

package.json

@@ -60,6 +60,7 @@
     "@solid-primitives/scheduled": "^1.0.0",
     "babel-preset-solid": "1.4.8",
     "dedent": "^0.7.0",
+    "eslint-solid-standalone": "^0.1.5",
     "jszip": "^3.10.1",
     "monaco-editor-textmate": "^3.0.0",
     "monaco-textmate": "^3.0.1",

playground/pages/edit.tsx

@@ -3,6 +3,7 @@ import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
 import CompilerWorker from '../../src/workers/compiler?worker';
 import FormatterWorker from '../../src/workers/formatter?worker';
+import LinterWorker from '../../src/workers/linter?worker';
 import onigasm from 'onigasm/lib/onigasm.wasm?url';
 import { batch, createResource, createSignal, lazy, onCleanup, Show, Suspense } from 'solid-js';
 import { useMatch, useNavigate, useParams } from '@solidjs/router';
@@ -39,6 +40,7 @@ export const Edit = (props: { horizontal: boolean }) => {
   const scratchpad = useMatch(() => '/scratchpad');
   const compiler = new CompilerWorker();
   const formatter = new FormatterWorker();
+  const linter = new LinterWorker();
 
   const params = useParams();
   const context = useAppContext()!;
@@ -214,6 +216,7 @@ export const Edit = (props: { horizontal: boolean }) => {
           <Repl
             compiler={compiler}
             formatter={formatter}
+            linter={linter}
             isHorizontal={props.horizontal}
             dark={context.dark()}
             tabs={tabs()}

pnpm-lock.yaml

@@ -110,7 +110,13 @@ const preppy = {
 };
 
 rollup({
-  input: ['src/index.ts', 'src/workers/compiler.ts', 'src/workers/formatter.ts', 'src/components/repl.tsx'],
+  input: [
+    'src/index.ts',
+    'src/workers/compiler.ts',
+    'src/workers/formatter.ts',
+    'src/workers/linter.ts',
+    'src/components/repl.tsx',
+  ],
   external: ['solid-js', 'solid-js/web', 'solid-js/store', 'monaco-editor'],
   acornInjectPlugins: [jsx()],
   plugins: [

rollup.config.js

@@ -1,16 +1,20 @@
-import { Component, createEffect, onMount, onCleanup } from 'solid-js';
+import { Component, createEffect, onMount, onCleanup, on } from 'solid-js';
 import { Uri, languages, editor as mEditor, KeyMod, KeyCode } from 'monaco-editor';
 import { liftOff } from './setupSolid';
 import { useZoom } from '../../hooks/useZoom';
 import type { Repl } from 'solid-repl/lib/repl';
+import type { LinterWorkerPayload, LinterWorkerResponse } from '../../workers/linter';
+import { throttle } from '@solid-primitives/scheduled';
 
 const Editor: Component<{
   url: string;
   disabled?: true;
   isDark?: boolean;
   withMinimap?: boolean;
   formatter?: Worker;
+  linter?: Worker;
   displayErrors?: boolean;
+  displayLintMessages?: boolean;
   onDocChange?: (code: string) => void;
   onEditorReady?: Parameters<Repl>[0]['onEditorReady'];
 }> = (props) => {
@@ -47,6 +51,33 @@ const Editor: Component<{
       },
     });
   }
+  if (props.linter) {
+    const listener = ({ data }: MessageEvent<LinterWorkerResponse>) => {
+      if (props.displayLintMessages) {
+        const { event } = data;
+        if (event === 'LINT') {
+          const m = model();
+          m && mEditor.setModelMarkers(m, 'eslint', data.markers);
+        } else if (event === 'FIX') {
+          const m = model();
+          m && mEditor.setModelMarkers(m, 'eslint', data.markers);
+          data.fixed && model()?.setValue(data.output);
+        }
+      }
+    };
+    props.linter.addEventListener('message', listener);
+    onCleanup(() => props.linter?.removeEventListener('message', listener));
+  }
+
+  const runLinter = throttle((code: string) => {
+    if (props.linter && props.displayLintMessages) {
+      const payload: LinterWorkerPayload = {
+        event: 'LINT',
+        code,
+      };
+      props.linter.postMessage(payload);
+    }
+  }, 250);
 
   // Initialize Monaco
   onMount(() => {
@@ -63,13 +94,39 @@ const Editor: Component<{
       },
     });
 
+    if (props.linter) {
+      editor.addAction({
+        id: 'eslint.executeAutofix',
+        label: 'Fix all auto-fixable problems',
+        contextMenuGroupId: '1_modification',
+        contextMenuOrder: 3.5,
+        run: (ed) => {
+          const code = ed.getValue();
+          if (code) {
+            const payload: LinterWorkerPayload = {
+              event: 'FIX',
+              code,
+            };
+            props.linter?.postMessage(payload);
+          }
+        },
+      });
+    }
+
     editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, () => {
-      editor?.getAction('editor.action.formatDocument').run();
-      editor?.focus();
+      if (editor) {
+        // auto-format
+        editor.getAction('editor.action.formatDocument')?.run();
+        // auto-fix problems
+        props.displayLintMessages && editor.getAction('eslint.executeAutofix')?.run();
+        editor.focus();
+      }
     });
 
     editor.onDidChangeModelContent(() => {
-      props.onDocChange?.(editor.getValue());
+      const code = editor.getValue();
+      props.onDocChange?.(code);
+      runLinter(code);
     });
   });
   onCleanup(() => editor?.dispose());
@@ -95,6 +152,17 @@ const Editor: Component<{
     });
   });
 
+  createEffect(() => {
+    if (props.displayLintMessages) {
+      // run on mount and when displayLintMessages is turned on
+      runLinter(editor.getValue());
+    } else {
+      // reset eslint markers when displayLintMessages is turned off
+      const m = model();
+      m && mEditor.setModelMarkers(m, 'eslint', []);
+    }
+  });
+
   onMount(() => {
     props.onEditorReady?.(editor, { Uri, editor: mEditor });
   });

src/components/editor/index.tsx

@@ -22,7 +22,7 @@ const compileMode = {
 } as const;
 
 const Repl: ReplProps = (props) => {
-  const { compiler, formatter } = props;
+  const { compiler, formatter, linter } = props;
   let now: number;
 
   const tabRefs = new Map<string, HTMLSpanElement>();
@@ -166,6 +166,7 @@ const Repl: ReplProps = (props) => {
   const [reloadSignal, reload] = createSignal(false, { equals: false });
   const [devtoolsOpen, setDevtoolsOpen] = createSignal(true);
   const [displayErrors, setDisplayErrors] = createSignal(true);
+  const [displayLintMessages, setDisplayLintMessages] = createSignal(true);
 
   return (
     <div
@@ -251,6 +252,17 @@ const Repl: ReplProps = (props) => {
               <span>Display Errors</span>
             </label>
           </TabItem>
+          <TabItem class="justify-self-end">
+            <label class="space-x-2 px-3 py-2 cursor-pointer">
+              <input
+                type="checkbox"
+                name="run-linter"
+                checked={displayLintMessages()}
+                onChange={(event) => setDisplayLintMessages(event.currentTarget.checked)}
+              />
+              <span>Run Linter</span>
+            </label>
+          </TabItem>
         </TabList>
 
         <MonacoTabs tabs={props.tabs} folder={props.id} />
@@ -260,10 +272,12 @@ const Repl: ReplProps = (props) => {
             url={`file:///${props.id}/${props.current}`}
             onDocChange={() => compile()}
             formatter={formatter}
+            linter={linter}
             isDark={props.dark}
             withMinimap={false}
             onEditorReady={props.onEditorReady}
             displayErrors={displayErrors()}
+            displayLintMessages={displayLintMessages()}
           />
         </Show>
 

src/components/repl.tsx

@@ -123,7 +123,7 @@ self.addEventListener('message', async ({ data }) => {
   try {
     if (event === 'BABEL') {
       self.postMessage(await babel(tab, compileOpts));
-    } else {
+    } else if (event === 'ROLLUP') {
       self.postMessage(await compile(tabs, event));
     }
   } catch (e) {

src/workers/compiler.ts

@@ -0,0 +1,64 @@
+import { verify, verifyAndFix } from 'eslint-solid-standalone';
+import type { Linter } from 'eslint-solid-standalone';
+import type { editor } from 'monaco-editor';
+
+type RuleSeverityOverrides = Parameters<typeof verify>[1];
+export interface LinterWorkerPayload {
+  event: 'LINT' | 'FIX';
+  code: string;
+  ruleSeverityOverrides?: RuleSeverityOverrides;
+}
+
+const messagesToMarkers = (messages: Array<Linter.LintMessage>): Array<editor.IMarkerData> => {
+  if (messages.some((m) => m.fatal)) return []; // no need for any extra highlights on parse errors
+  return messages.map((m) => ({
+    startLineNumber: m.line,
+    endLineNumber: m.endLine ?? m.line,
+    startColumn: m.column,
+    endColumn: m.endColumn ?? m.column,
+    message: `${m.message}\neslint(${m.ruleId})`,
+    severity: m.severity === 2 ? 8 /* error */ : 4 /* warning */,
+  }));
+};
+
+async function lintResponse(code: string, ruleSeverityOverrides?: RuleSeverityOverrides) {
+  return {
+    event: 'LINT' as const,
+    markers: messagesToMarkers(await verify(code, ruleSeverityOverrides)),
+  };
+}
+
+async function fixResponse(code: string, ruleSeverityOverrides?: RuleSeverityOverrides) {
+  const fixReport = await verifyAndFix(code, ruleSeverityOverrides);
+  return {
+    event: 'FIX' as const,
+    markers: messagesToMarkers(fixReport.messages),
+    output: fixReport.output,
+    fixed: fixReport.fixed,
+  };
+}
+
+function errorResponse(e: any) {
+  return { event: 'ERROR' as const, error: (e as Error).message };
+}
+
+self.addEventListener('message', async ({ data }: MessageEvent<LinterWorkerPayload>) => {
+  const { event } = data;
+  try {
+    if (event === 'LINT') {
+      const { code, ruleSeverityOverrides } = data;
+      self.postMessage(await lintResponse(code, ruleSeverityOverrides));
+    } else if (event === 'FIX') {
+      const { code, ruleSeverityOverrides } = data;
+      self.postMessage(await fixResponse(code, ruleSeverityOverrides));
+    }
+  } catch (e) {
+    console.error(e);
+    self.postMessage(errorResponse(e));
+  }
+});
+
+type LintResponse = Awaited<ReturnType<typeof lintResponse>>;
+type FixResponse = Awaited<ReturnType<typeof fixResponse>>;
+type ErrorResponse = ReturnType<typeof errorResponse>;
+export type LinterWorkerResponse = LintResponse | FixResponse | ErrorResponse;

src/workers/linter.ts

@@ -10,7 +10,8 @@ declare module 'solid-repl' {
 declare module 'solid-repl/lib/repl' {
   export type Repl = import('solid-js').Component<{
     compiler: Worker;
-    formatter?: Worker;
+    formatter: Worker;
+    linter: Worker;
     isHorizontal: boolean;
     dark: boolean;
     tabs: Tab[];