A Monaco Editor based tree view for presenting problems (i.e. diagnostics markers).
Installation
import '@nvidia-elements/monaco/problems/define.js';
<nve-monaco-problems></nve-monaco-problems>
<script type="module">
const problemsEl = document.querySelector("nve-monaco-problems");
problemsEl.problems = [
{
resource: "file:///src/components/Button.ts",
message: "Type 'string' is not assignable to type 'number'.",
severity: 8, // ProblemSeverity.Error
startLineNumber: 14,
startColumn: 8,
endLineNumber: 14,
endColumn: 24,
source: "ts",
code: "2322",
owner: "typescript",
},
{
resource: "file:///src/components/Button.ts",
message: "'index' is declared but its value is never read.",
severity: 4, // ProblemSeverity.Warning
startLineNumber: 16,
startColumn: 5,
endLineNumber: 16,
endColumn: 10,
source: "ts",
code: "6133",
owner: "typescript",
},
{
resource: "file:///src/utils/styles.css",
message: "Unknown property 'colr'. Did you mean 'color'?",
severity: 2, // ProblemSeverity.Info
startLineNumber: 40,
startColumn: 2,
endLineNumber: 40,
endColumn: 6,
source: "css",
owner: "css",
},
{
resource: "file:///src/utils/formatDate.ts",
message: "Convert 'var' to 'let' or 'const'.",
severity: 1, // ProblemSeverity.Hint
startLineNumber: 57,
startColumn: 1,
endLineNumber: 57,
endColumn: 4,
source: "eslint",
code: {
value: "no-var",
target: "https://eslint.org/docs/rules/no-var",
},
owner: "eslint",
},
];
problemsEl.addEventListener("problem-selected", (e) => {
console.log("problem-selected", e.detail.problem);
});
problemsEl.addEventListener("problem-activated", (e) => {
console.log("problem-activated", e.detail.problem);
});
problemsEl.addEventListener("problem-context-menu", (e) => {
console.log("problem-context-menu", e.detail.problem);
});
</script>
Empty
Monaco Problems element with the default message shown when no problems exist.
Custom Empty Slot
Monaco Problems element with a custom message in the empty slot shown when no problems exist.
Custom Empty Slot Content
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.