amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dan
2022-05-23 18:57:51 +01:00
committed by GitHub
parent 79d50e03c4
commit 2ece592999
4 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
beta/package.json
View File

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

2
beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.0.patch → beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch
View File

@@ -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 = {

36
beta/src/components/MDX/Sandpack/useSandpackLint.tsx
View File

@@ -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};
};

18
beta/yarn.lock
View File

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