From 9db0693e5e1a79fed6115d5646958bc56977661a Mon Sep 17 00:00:00 2001
From: "Azat S." <to@azat.io>
Date: Sat, 30 Nov 2024 20:21:38 +0300
Subject: [PATCH] docs: run eslint in playground

---
 docs/components/Editor/Editor.svelte       |  98 +---------
 docs/components/Editor/EditorMonaco.svelte | 202 +++++++++++++++++++++
 docs/utils/eslint-worker.ts                |  30 +++
 package.json                               |   1 +
 pnpm-lock.yaml                             |   8 +
 5 files changed, 245 insertions(+), 94 deletions(-)
 create mode 100644 docs/components/Editor/EditorMonaco.svelte

diff --git a/docs/components/Editor/Editor.svelte b/docs/components/Editor/Editor.svelte
index 1ccccf176..198bbee19 100644
--- a/docs/components/Editor/Editor.svelte
+++ b/docs/components/Editor/Editor.svelte
@@ -1,98 +1,15 @@
 <script lang="ts">
-  import * as monaco from 'monaco-editor'
-  import { formatHex } from 'culori'
-  import { onMount } from 'svelte'
+  import type { Linter } from 'eslint'
 
-  import { colorTheme } from '../../utils/shiki-theme'
+  import EditorMonaco from './EditorMonaco.svelte'
   import Button from '../Button.svelte'
 
-  let editor: monaco.editor.IStandaloneCodeEditor | null = null
-
-  let toRgb = (color: string): string => {
-    if (!color) {
-      return color
-    }
-    let hex = formatHex(color)
-    if (!hex) {
-      throw new Error(`Could not convert ${JSON.stringify(color)} to RGB`)
-    }
-    return hex
-  }
-
-  let resolveCssVariable = (variable: string): string => {
-    if (!variable) {
-      return variable
-    }
-    let styles = getComputedStyle(document.documentElement)
-    let cleanVariable = variable.replace(/^var\(/u, '').replace(/\)$/u, '')
-    return styles.getPropertyValue(cleanVariable).trim()
-  }
-
-  let defineMonacoTheme = (themeName: string): void => {
-    monaco.editor.defineTheme(themeName, {
-      rules: colorTheme.tokenColors
-        ?.flatMap(token =>
-          (Array.isArray(token.scope) ? token.scope : [token.scope]).map(
-            scope => ({
-              foreground: toRgb(
-                resolveCssVariable(
-                  token.settings.foreground ??
-                    colorTheme.colors!['editor.foreground']!,
-                ),
-              ),
-              fontStyle: token.settings.fontStyle ?? 'normal',
-              token: scope,
-            }),
-          ),
-        )
-        .filter(
-          ({ foreground }) => !!foreground,
-        ) as monaco.editor.ITokenThemeRule[],
-      colors: Object.fromEntries(
-        Object.entries(colorTheme.colors!)
-          .map(([key, value]) => [key, toRgb(resolveCssVariable(value))])
-          .filter(([_, value]) => !!value),
-      ),
-      base: 'vs-dark',
-      inherit: false,
-    })
-  }
-
-  onMount(() => {
-    let container: HTMLElement | null = document.querySelector('.monaco')
-    if (container) {
-      defineMonacoTheme('css-variables')
-
-      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: true,
-        noSyntaxValidation: true,
-      })
-
-      editor = monaco.editor.create(container, {
-        minimap: {
-          enabled: false,
-        },
-        // @ts-ignore
-        'bracketPairColorization.enabled': false,
-        fontFamily: 'var(--font-family-code)',
-        language: 'typescript',
-        matchBrackets: 'never',
-        automaticLayout: true,
-        value: 'const a = 3',
-        lineHeight: 1.7,
-        fontSize: 15,
-      })
-
-      monaco.editor.setTheme('css-variables')
-
-      editor.onDidChangeModelContent(() => {})
-    }
-  })
+  let config: Linter.Config[] = []
 </script>
 
 <div class="wrapper">
   <Button color="primary" content="Fix ESLint problems" />
-  <div class="monaco" />
+  <EditorMonaco {config} />
 </div>
 
 <style>
@@ -101,11 +18,4 @@
     flex-direction: column;
     gap: var(--space-l);
   }
-
-  .monaco {
-    inline-size: 100%;
-    block-size: 600px;
-    overflow: hidden;
-    border-radius: var(--border-radius);
-  }
 </style>
diff --git a/docs/components/Editor/EditorMonaco.svelte b/docs/components/Editor/EditorMonaco.svelte
new file mode 100644
index 000000000..6f71208ad
--- /dev/null
+++ b/docs/components/Editor/EditorMonaco.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+  import type { Linter as BrowserLinter } from 'eslint-linter-browserify'
+  import type { Linter } from 'eslint'
+
+  import * as monaco from 'monaco-editor'
+  import { formatHex } from 'culori'
+  import { dedent } from 'ts-dedent'
+  import { onMount } from 'svelte'
+
+  import ESLintWorker from '../../utils/eslint-worker?worker'
+  import { colorTheme } from '../../utils/shiki-theme'
+
+  export let config: Linter.Config[] = []
+
+  let editor: monaco.editor.IStandaloneCodeEditor | null = null
+  let eslintWorker = new ESLintWorker()
+
+  let baseValue = dedent`
+    import Button from '~/components/Button'
+    import type { FC } from 'react'
+
+    import {
+      useId,
+      useCallback,
+      useState,
+      useEffect,
+    } from 'react'
+
+    import Form from '~/component/Form'
+
+    import './style.css'
+    import Input from '~/components/Input'
+    import { FormValues } from '~/stores/auth'
+
+    interface Props {
+      className?: string
+      onSubmit: (values: FormValues) => void
+      id: string
+      resetFormValues: () => void
+      title: string
+    }
+
+    export const Auth: FC<Props> => (props) => (
+      <Form {...props}>
+        <Input
+          placeholder="Enter your email"
+          full
+          name="user-email"
+          validation={/^[^s@]+@[^s@]+.[^s@]+$/i}
+          type="email"
+          label="Email address"
+        />
+        <Button
+          type="submit"
+          className="submit-button"
+          size="l"
+          color="secondary"
+        >
+          Submit
+        </Button>
+      </Form>
+    )
+  `
+
+  let toRgb = (color: string): string => {
+    if (!color) {
+      return color
+    }
+    let hex = formatHex(color)
+    if (!hex) {
+      throw new Error(`Could not convert ${JSON.stringify(color)} to RGB`)
+    }
+    return hex
+  }
+
+  let resolveCssVariable = (variable: string): string => {
+    if (!variable) {
+      return variable
+    }
+    let styles = getComputedStyle(document.documentElement)
+    let cleanVariable = variable.replace(/^var\(/u, '').replace(/\)$/u, '')
+    return styles.getPropertyValue(cleanVariable).trim()
+  }
+
+  let lintCode = (
+    code: string,
+    eslintConfig: Linter.Config[],
+  ): Promise<BrowserLinter.LintMessage[] | undefined> =>
+    new Promise(resolve => {
+      eslintWorker.addEventListener('message', (event: MessageEvent) => {
+        resolve(event.data as BrowserLinter.LintMessage[] | undefined)
+      })
+
+      eslintWorker.postMessage({
+        config: eslintConfig,
+        code,
+      })
+    })
+
+  let defineMonacoTheme = (themeName: string): void => {
+    monaco.editor.defineTheme(themeName, {
+      rules: colorTheme.tokenColors
+        ?.flatMap(token =>
+          (Array.isArray(token.scope) ? token.scope : [token.scope]).map(
+            scope => ({
+              foreground: toRgb(
+                resolveCssVariable(
+                  token.settings.foreground ??
+                    colorTheme.colors!['editor.foreground']!,
+                ),
+              ),
+              fontStyle: token.settings.fontStyle ?? 'normal',
+              token: scope,
+            }),
+          ),
+        )
+        .filter(
+          ({ foreground }) => !!foreground,
+        ) as monaco.editor.ITokenThemeRule[],
+      colors: Object.fromEntries(
+        Object.entries(colorTheme.colors!)
+          .map(([key, value]) => [key, toRgb(resolveCssVariable(value))])
+          .filter(([_, value]) => !!value),
+      ),
+      base: 'vs-dark',
+      inherit: false,
+    })
+  }
+
+  onMount(() => {
+    let container: HTMLElement | null = document.querySelector('.monaco')
+    if (container) {
+      defineMonacoTheme('css-variables')
+
+      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: true,
+        noSyntaxValidation: true,
+      })
+
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+        target: monaco.languages.typescript.ScriptTarget.ESNext,
+        jsx: monaco.languages.typescript.JsxEmit.React,
+        allowNonTsExtensions: true,
+      })
+
+      editor = monaco.editor.create(container, {
+        minimap: {
+          enabled: false,
+        },
+        // @ts-ignore
+        'bracketPairColorization.enabled': false,
+        fontFamily: 'var(--font-family-code)',
+        language: 'typescript',
+        matchBrackets: 'never',
+        automaticLayout: true,
+        value: baseValue,
+        lineHeight: 1.7,
+        fontSize: 15,
+      })
+
+      monaco.editor.setTheme('css-variables')
+
+      let validateCode = async (): Promise<void> => {
+        let code = editor?.getValue() ?? ''
+
+        let lintResults = (await lintCode(code, config)) ?? []
+
+        let markers = lintResults.map(result => ({
+          severity:
+            result.severity === 2
+              ? monaco.MarkerSeverity.Error
+              : monaco.MarkerSeverity.Warning,
+          endColumn: result.endColumn ?? result.column + 1,
+          endLineNumber: result.endLine ?? result.line,
+          startLineNumber: result.line,
+          startColumn: result.column,
+          message: result.message,
+        }))
+
+        let model = editor?.getModel()
+
+        if (model) {
+          monaco.editor.setModelMarkers(model, 'eslint', markers)
+        }
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      validateCode()
+
+      editor.onDidChangeModelContent(validateCode)
+    }
+  })
+</script>
+
+<div class="monaco" />
+
+<style>
+  .monaco {
+    inline-size: 100%;
+    block-size: 600px;
+  }
+</style>
diff --git a/docs/utils/eslint-worker.ts b/docs/utils/eslint-worker.ts
index e69de29bb..ac79f9843 100644
--- a/docs/utils/eslint-worker.ts
+++ b/docs/utils/eslint-worker.ts
@@ -0,0 +1,30 @@
+import type { Linter } from 'eslint-linter-browserify'
+import type { Linter as TLinter } from 'eslint'
+
+import * as ESLint from 'eslint-linter-browserify'
+
+interface Data {
+  config: TLinter.Config
+  code: string
+}
+
+let eslint: Linter | null = null
+
+self.addEventListener('message', (event: MessageEvent<Data>): void => {
+  let { config, code } = event.data
+  if (!eslint) {
+    eslint = new ESLint.Linter({
+      configType: 'flat',
+    })
+  }
+  try {
+    if (typeof code !== 'string') {
+      throw new TypeError('Code must be a string')
+    }
+    let messages = eslint.verify(code, config)
+    postMessage(messages)
+  } catch (error) {
+    console.error('ESLint Worker Error:', error)
+    postMessage([])
+  }
+})
diff --git a/package.json b/package.json
index 36fd57e7e..918586f10 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
     "cspell": "^8.16.1",
     "culori": "^4.0.1",
     "eslint": "^9.15.0",
+    "eslint-linter-browserify": "^9.16.0",
     "eslint-plugin-eslint-plugin": "^6.3.2",
     "execa": "^9.5.1",
     "keyux": "^0.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5f9845431..5b0216670 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,6 +105,9 @@ importers:
       eslint:
         specifier: ^9.15.0
         version: 9.15.0(jiti@2.4.0)
+      eslint-linter-browserify:
+        specifier: ^9.16.0
+        version: 9.16.0
       eslint-plugin-eslint-plugin:
         specifier: ^6.3.2
         version: 6.3.2(eslint@9.15.0(jiti@2.4.0))
@@ -3261,6 +3264,9 @@ packages:
       eslint-plugin-import-x:
         optional: true
 
+  eslint-linter-browserify@9.16.0:
+    resolution: {integrity: sha512-0239dEGTm0rDPAE2IiI69HYlUQNU4ZcuH2L8Y/GZsjCZXOO48gcyYMEvSvtChECsdWFGweAHwGRw56LYVlg2eg==}
+
   eslint-module-utils@2.12.0:
     resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
     engines: {node: '>=4'}
@@ -10394,6 +10400,8 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
+  eslint-linter-browserify@9.16.0: {}
+
   eslint-module-utils@2.12.0(@typescript-eslint/parser@8.16.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.16.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.7.2))(eslint-plugin-import-x@4.4.3(eslint@9.15.0(jiti@2.4.0))(typescript@5.7.2))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.16.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.7.2))(eslint@9.15.0(jiti@2.4.0)))(eslint@9.15.0(jiti@2.4.0)))(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       debug: 3.2.7