|
|
@ -4,8 +4,7 @@ |
|
|
|
|
|
|
|
// @ts-nocheck
|
|
|
|
|
|
|
|
import {useState} from 'react'; |
|
|
|
import {linter} from '@codemirror/lint'; |
|
|
|
import {useState, useEffect} from 'react'; |
|
|
|
import type {EditorView} from '@codemirror/view'; |
|
|
|
|
|
|
|
export type LintDiagnostic = { |
|
|
@ -17,18 +16,25 @@ export type LintDiagnostic = { |
|
|
|
|
|
|
|
export const useSandpackLint = () => { |
|
|
|
const [lintErrors, setLintErrors] = useState<LintDiagnostic>([]); |
|
|
|
const [lintExtensions, setLintExtensions] = useState<any>([]); |
|
|
|
useEffect(() => { |
|
|
|
const loadLinter = async () => { |
|
|
|
const {linter} = await import('@codemirror/lint'); |
|
|
|
const onLint = linter(async (props: EditorView) => { |
|
|
|
// This is intentionally delayed until CodeMirror calls it
|
|
|
|
// so that we don't take away bandwidth from things loading early.
|
|
|
|
const {runESLint} = await import('./runESLint'); |
|
|
|
const editorState = props.state.doc; |
|
|
|
let {errors, codeMirrorErrors} = runESLint(editorState); |
|
|
|
// Ignore parsing or internal linter errors.
|
|
|
|
const isReactRuleError = (error: any) => error.ruleId != null; |
|
|
|
setLintErrors(errors.filter(isReactRuleError)); |
|
|
|
return codeMirrorErrors.filter(isReactRuleError); |
|
|
|
}); |
|
|
|
setLintExtensions([onLint]); |
|
|
|
}; |
|
|
|
|
|
|
|
// TODO: ideally @codemirror/linter would be code-split too but I don't know how
|
|
|
|
// because Sandpack seems to ignore updates to the "extensions" prop.
|
|
|
|
const onLint = linter(async (props: EditorView) => { |
|
|
|
const {runESLint} = await import('./runESLint'); |
|
|
|
const editorState = props.state.doc; |
|
|
|
let {errors, codeMirrorErrors} = runESLint(editorState); |
|
|
|
// Ignore parsing or internal linter errors.
|
|
|
|
const isReactRuleError = (error: any) => error.ruleId != null; |
|
|
|
setLintErrors(errors.filter(isReactRuleError)); |
|
|
|
return codeMirrorErrors.filter(isReactRuleError); |
|
|
|
}); |
|
|
|
|
|
|
|
return {lintErrors, lintExtensions: [onLint]}; |
|
|
|
loadLinter(); |
|
|
|
}, []); |
|
|
|
return {lintErrors, lintExtensions}; |
|
|
|
}; |
|
|
|