[Beta] Load CodeMirror linter plugin lazily (#4678)

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",

beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.0.patch → 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 = {

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,10 +16,13 @@ export type LintDiagnostic = {
 
 export const useSandpackLint = () => {
   const [lintErrors, setLintErrors] = useState<LintDiagnostic>([]);
-
-  // 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 [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);
@@ -29,6 +31,10 @@ export const useSandpackLint = () => {
         setLintErrors(errors.filter(isReactRuleError));
         return codeMirrorErrors.filter(isReactRuleError);
       });
+      setLintExtensions([onLint]);
+    };
 
-  return {lintErrors, lintExtensions: [onLint]};
+    loadLinter();
+  }, []);
+  return {lintErrors, lintExtensions};
 };

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"