mirror of
https://github.com/facebook/react.git
synced 2026-02-24 04:33:04 +00:00
c998bb1ed4
After this is merged, I'll add it to .git-blame-ignore-revs. I can't do
it now as the hash will change after ghstack lands this stack.
ghstack-source-id: 054ca869b7
Pull Request resolved: https://github.com/facebook/react/pull/29214
90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
import { Monaco } from "@monaco-editor/react";
|
|
import {
|
|
CompilerErrorDetail,
|
|
ErrorSeverity,
|
|
} from "babel-plugin-react-compiler/src";
|
|
import { MarkerSeverity, type editor } from "monaco-editor";
|
|
|
|
function mapReactCompilerSeverityToMonaco(
|
|
level: ErrorSeverity,
|
|
monaco: Monaco
|
|
): MarkerSeverity {
|
|
switch (level) {
|
|
case ErrorSeverity.Todo:
|
|
return monaco.MarkerSeverity.Warning;
|
|
default:
|
|
return monaco.MarkerSeverity.Error;
|
|
}
|
|
}
|
|
|
|
function mapReactCompilerDiagnosticToMonacoMarker(
|
|
detail: CompilerErrorDetail,
|
|
monaco: Monaco
|
|
): editor.IMarkerData | null {
|
|
if (detail.loc == null || typeof detail.loc === "symbol") {
|
|
return null;
|
|
}
|
|
const severity = mapReactCompilerSeverityToMonaco(detail.severity, monaco);
|
|
let message = detail.printErrorMessage();
|
|
return {
|
|
severity,
|
|
message,
|
|
startLineNumber: detail.loc.start.line,
|
|
startColumn: detail.loc.start.column + 1,
|
|
endLineNumber: detail.loc.end.line,
|
|
endColumn: detail.loc.end.column + 1,
|
|
};
|
|
}
|
|
|
|
type ReactCompilerMarkerConfig = {
|
|
monaco: Monaco;
|
|
model: editor.ITextModel;
|
|
details: CompilerErrorDetail[];
|
|
};
|
|
let decorations: string[] = [];
|
|
export function renderReactCompilerMarkers({
|
|
monaco,
|
|
model,
|
|
details,
|
|
}: ReactCompilerMarkerConfig): void {
|
|
let markers = [];
|
|
for (const detail of details) {
|
|
const marker = mapReactCompilerDiagnosticToMonacoMarker(detail, monaco);
|
|
if (marker == null) {
|
|
continue;
|
|
}
|
|
markers.push(marker);
|
|
}
|
|
if (markers.length > 0) {
|
|
monaco.editor.setModelMarkers(model, "owner", markers);
|
|
const newDecorations = markers.map((marker) => {
|
|
return {
|
|
range: new monaco.Range(
|
|
marker.startLineNumber,
|
|
marker.startColumn,
|
|
marker.endLineNumber,
|
|
marker.endColumn
|
|
),
|
|
options: {
|
|
isWholeLine: true,
|
|
glyphMarginClassName: "bg-red-300",
|
|
},
|
|
};
|
|
});
|
|
decorations = model.deltaDecorations(decorations, newDecorations);
|
|
} else {
|
|
monaco.editor.setModelMarkers(model, "owner", []);
|
|
decorations = model.deltaDecorations(
|
|
model.getAllDecorations().map((d) => d.id),
|
|
[]
|
|
);
|
|
}
|
|
}
|