From 2ece592999e95119c798eaeca784b06853c03ef5 Mon Sep 17 00:00:00 2001 From: dan Date: Mon, 23 May 2022 18:57:51 +0100 Subject: [PATCH] [Beta] Load CodeMirror linter plugin lazily (#4678) --- beta/package.json | 2 +- ...andpack-react+0.19.8-experimental.4.patch} | 2 +- .../MDX/Sandpack/useSandpackLint.tsx | 36 +++++++++++-------- beta/yarn.lock | 18 +++++----- 4 files changed, 32 insertions(+), 26 deletions(-) rename beta/patches/{@codesandbox+sandpack-react+0.19.8-experimental.0.patch => @codesandbox+sandpack-react+0.19.8-experimental.4.patch} (97%) diff --git a/beta/package.json b/beta/package.json index d2fe90cb..5be9b81f 100644 --- a/beta/package.json +++ b/beta/package.json @@ -22,7 +22,7 @@ "check-all": "npm-run-all prettier lint:fix tsc" }, "dependencies": { - "@codesandbox/sandpack-react": "v0.19.8-experimental.0", + "@codesandbox/sandpack-react": "v0.19.8-experimental.4", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.3.0", diff --git a/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.0.patch b/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch similarity index 97% rename from beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.0.patch rename to beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch index 77ad867f..2298cbd1 100644 --- a/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.0.patch +++ b/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch @@ -1,5 +1,5 @@ diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js -index e6e5787..712a70d 100644 +index ced9bd3..7e5e366 100644 --- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js +++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js @@ -566,17 +566,16 @@ var REACT_TEMPLATE = { diff --git a/beta/src/components/MDX/Sandpack/useSandpackLint.tsx b/beta/src/components/MDX/Sandpack/useSandpackLint.tsx index 3455eab9..ec05fbe0 100644 --- a/beta/src/components/MDX/Sandpack/useSandpackLint.tsx +++ b/beta/src/components/MDX/Sandpack/useSandpackLint.tsx @@ -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([]); + const [lintExtensions, setLintExtensions] = useState([]); + 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}; }; diff --git a/beta/yarn.lock b/beta/yarn.lock index 0d745d91..2019ceb2 100644 --- a/beta/yarn.lock +++ b/beta/yarn.lock @@ -547,18 +547,18 @@ style-mod "^4.0.0" w3c-keyname "^2.2.4" -"@codesandbox/sandpack-client@^0.19.8-experimental.0": - version "0.19.8-experimental.0" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-0.19.8-experimental.0.tgz#044afb1efce0356e18b6d644960694c817012a2a" - integrity sha512-u9/mqJ/k+dv/R2bHuVYoW3wXx5D3vLGnqbRKsGYIBDY/9xV7W3gFGY9ZgbcAbiw64qBAgiId1tzgaIwNcxNEsA== +"@codesandbox/sandpack-client@^0.19.8-experimental.2": + version "0.19.9" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-0.19.9.tgz#29fded94a3087de155035634d596651268e27797" + integrity sha512-/PPFqAJ8NSlP1jpWjQtwvmVS5o1xLRVqdbzXF7Num7zVUdYLZAbpzT7KijneZSmdcJHOvCCAYGLKJg+TcgmLjw== dependencies: codesandbox-import-utils "^1.2.3" lodash.isequal "^4.5.0" -"@codesandbox/sandpack-react@v0.19.8-experimental.0": - version "0.19.8-experimental.0" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-0.19.8-experimental.0.tgz#0a86971be53f5d177d61796d4e048998c2dcc271" - integrity sha512-LyEqxlH1LoHLrNKK/Ge0rumLriOiS4Hhy8M9NPgx0f4wCJjQQ9NW8lHzkOwCo3NonWOq5ZsIXSVQAqiWxFz1Bg== +"@codesandbox/sandpack-react@v0.19.8-experimental.4": + version "0.19.8-experimental.4" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-0.19.8-experimental.4.tgz#fb170bcca42b0e68175edd1510973b779504d416" + integrity sha512-SyfKEb6iPT4ZqQJ3wzf96OgDj1WmfvZs9tt0HHzA8InwGCPm9QWcJcQbKatEvu+S7sOBt2rxcETelLYhddn9nA== dependencies: "@code-hike/classer" "^0.0.0-aa6efee" "@codemirror/closebrackets" "^0.19.0" @@ -574,7 +574,7 @@ "@codemirror/matchbrackets" "^0.19.3" "@codemirror/state" "^0.19.6" "@codemirror/view" "^0.19.32" - "@codesandbox/sandpack-client" "^0.19.8-experimental.0" + "@codesandbox/sandpack-client" "^0.19.8-experimental.2" "@react-hook/intersection-observer" "^3.1.1" codesandbox-import-util-types "^2.2.3" lodash.isequal "^4.5.0"