mirror of
https://github.com/facebook/react.git
synced 2026-02-24 04:33:04 +00:00
db240980a3
Currently the playground is setup as a linked workspace for the
compiler which complicates our yarn workspace setup and means that snap
can sometimes pull in a different version of react than was otherwise
specified.
There's no real reason to have these workspaces combined so let's split
them up.
ghstack-source-id: 56ab064b2f
Pull Request resolved: https://github.com/facebook/react/pull/31081
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: Array<CompilerErrorDetail>;
|
|
};
|
|
let decorations: Array<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),
|
|
[],
|
|
);
|
|
}
|
|
}
|