v0.2.3. Updates monaco to 0.25.2, adds json schema validation.

2021-06-19 15:35:33 +02:00
parent b6bf5feee0
commit 4cab6cc1b5
7 changed files with 91 additions and 22 deletions
--- a/playground/package.json
+++ b/playground/package.json
@@ -17,13 +17,13 @@
 		"classnames": "^2.2.6",
 		"mobx": "^5.15.4",
 		"mobx-react": "^6.1.8",
-		"monaco-editor": "^0.20.0",
+		"monaco-editor": "^0.25.2",
 		"react": "^16.12.0",
 		"react-dom": "^16.12.0",
 		"messagepack": "^1.1.10",
 		"base64-js": "^1.3.1",
 		"lzma": "^2.3.2",
-		"@hediet/monaco-editor-react": "^0.1.1"
+		"@hediet/monaco-editor-react": "^0.2.0"
 	},
 	"devDependencies": {
 		"gh-pages": "^2.2.0",
--- a/playground/src/visualizations.ts
+++ b/playground/src/visualizations.ts
@@ -12,7 +12,7 @@
 // import "@hediet/visualization-bundle/dist/visualizers/perspective-table-visualizer" /*
 // import "@hediet/visualization-bundle/dist/visualizers/plotly-visualizer" /*
 // import "@hediet/visualization-bundle/dist/visualizers/simple-text-visualizer"; /*
-// import "@hediet/visualization-bundle/dist/visualizers/source-visualizer" /*
+import "@hediet/visualization-bundle/dist/visualizers/source-visualizer"; /*
 // import "@hediet/visualization-bundle/dist/visualizers/svg-visualizer" /*
 // import "@hediet/visualization-bundle/dist/visualizers/tree-visualizer"; /*

--- a/visualization-bundle/package.json
+++ b/visualization-bundle/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@hediet/visualization-bundle",
 	"description": "Bundles several visualizers",
-	"version": "0.2.1",
+	"version": "0.2.3",
 	"license": "MIT",
 	"scripts": {
 		"dev": "tsc --watch",
@@ -23,14 +23,14 @@
 		"@finos/perspective-viewer": "^0.5.2",
 		"@finos/perspective-viewer-d3fc": "^0.5.2",
 		"@finos/perspective-viewer-datagrid": "^0.5.2",
-		"@hediet/monaco-editor-react": "^0.1.1",
+		"@hediet/monaco-editor-react": "^0.2.0",
 		"@hediet/semantic-json": "^0.3.15",
 		"@hediet/std": "^0.6.0",
 		"classnames": "^2.2.6",
 		"line-column": "^1.0.2",
 		"mobx": "^5.15.4",
 		"mobx-react": "^6.1.8",
-		"monaco-editor": "^0.20.0",
+		"monaco-editor": "^0.25.2",
 		"plotly.js": "^1.54.7",
 		"react": "^16.12.0",
 		"react-dom": "^16.12.0",
--- a/visualization-bundle/src/visualizers/monaco-text-visualizer/MonacoEditor.tsx
+++ b/visualization-bundle/src/visualizers/monaco-text-visualizer/MonacoEditor.tsx
@@ -17,7 +17,10 @@ export class MonacoEditor extends React.Component<{
 	theme: Theme;
 	fileName?: string;
 	decorations?: Decoration[];
+	jsonSchemas?: { schema: unknown }[];
 }> {
+	public static nextId = 0;
+
 	@observable private editor:
 		| monacoTypes.editor.IStandaloneCodeEditor
 		| undefined;
@@ -42,9 +45,8 @@ export class MonacoEditor extends React.Component<{
 	@disposeOnUnmount
 	private _updateText = autorun(() => {
 		if (this.editor) {
-			const decorations = new Array<
-				monacoTypes.editor.IModelDeltaDecoration
-			>();
+			const decorations =
+				new Array<monacoTypes.editor.IModelDeltaDecoration>();
 			const propDecorations = this.props.decorations || [];
 			const lines = this.props.text.split("\n");
 			const mappedLines = lines.map((l, idx) => {
@@ -54,7 +56,7 @@ export class MonacoEditor extends React.Component<{

 				if (
 					!propDecorations.some(
-						d =>
+						(d) =>
 							((d.range.endLineNumber === idx + 2 &&
 								d.range.endColumn === 1) ||
 								(d.range.startLineNumber === idx + 1 &&
@@ -82,19 +84,48 @@ export class MonacoEditor extends React.Component<{
 			});
 			const text = mappedLines.join("\n");

+			const modelId = MonacoEditor.nextId++;
+
 			const model = getLoadedMonaco().editor.createModel(
 				text,
 				this.languageId,
-				undefined
+				getLoadedMonaco().Uri.parse(
+					`inmemory://inmemory/model${modelId}`
+				)
 			);

 			this.editor.setModel(model);

+			if (this.props.jsonSchemas) {
+				const existingSchemas =
+					getLoadedMonaco().languages.json.jsonDefaults
+						.diagnosticsOptions.schemas || [];
+
+				getLoadedMonaco().languages.json.jsonDefaults.setDiagnosticsOptions(
+					{
+						validate: true,
+						schemas: [
+							...existingSchemas.filter(
+								(s) =>
+									!s.uri.startsWith(
+										"https://example.org/schemas/temp/"
+									)
+							),
+							...this.props.jsonSchemas.map((s, idx) => ({
+								uri: "https://example.org/schemas/temp/" + idx,
+								fileMatch: [`model${modelId}`],
+								schema: s.schema,
+							})),
+						],
+					}
+				);
+			}
+
 			this.prevDecorations = this.editor.deltaDecorations(
 				[],
 				[
 					...decorations,
-					...propDecorations.map(d => {
+					...propDecorations.map((d) => {
 						const r = getLoadedMonaco().Range.lift(d.range);
 						return {
 							range: r,
@@ -143,6 +174,7 @@ export class MonacoEditor extends React.Component<{
 			readOnly: true,
 			theme: this.props.theme.kind === "dark" ? "vs-dark" : "vs",
 			renderWhitespace: "all",
+			renderValidationDecorations: "on",
 		});
 	};

--- a/visualization-bundle/src/visualizers/monaco-text-visualizer/index.tsx
+++ b/visualization-bundle/src/visualizers/monaco-text-visualizer/index.tsx
@@ -7,6 +7,7 @@ import {
 	sArrayOf,
 	sNumber,
 	sUnion,
+	sAny,
 } from "@hediet/semantic-json";
 import * as React from "react";
 import {
@@ -57,6 +58,20 @@ export const monacoTextVisualizer = createVisualizer({
 				})
 			)
 		),
+		jsonSchemas: sOptionalProp(
+			sArrayOf(
+				sOpenObject({
+					schema: sProp(sAny(), {
+						description:
+							"A json schema object that is applied when the fileName indicates a JSON document.",
+					}),
+				})
+			),
+			{
+				description:
+					"An array of schemas used to validate JSON documents.",
+			}
+		),
 		fileName: sOptionalProp(sString(), {
 			description:
 				"An optional filename that might be used for chosing a syntax highlighter",
@@ -66,9 +81,9 @@ export const monacoTextVisualizer = createVisualizer({
 		createReactVisualization(
 			self,
 			{ priority: 500, preload: MonacoEditorLazyLoadable.preload },
-			function({ theme }) {
+			function ({ theme }) {
 				const decorations = data.decorations
-					? data.decorations.map<Decoration>(d => ({
+					? data.decorations.map<Decoration>((d) => ({
 							label: d.label,
 							range: {
 								startLineNumber: d.range.start.line + 1,
@@ -85,6 +100,7 @@ export const monacoTextVisualizer = createVisualizer({
 						fileName={data.fileName}
 						theme={theme}
 						decorations={decorations}
+						jsonSchemas={data.jsonSchemas}
 					/>
 				);
 			}
--- a/visualization-bundle/src/visualizers/source-visualizer/index.tsx
+++ b/visualization-bundle/src/visualizers/source-visualizer/index.tsx
@@ -1,4 +1,4 @@
-import { sOpenObject } from "@hediet/semantic-json";
+import { JsonSchemaGenerator, sOpenObject } from "@hediet/semantic-json";
 import * as React from "react";
 import {
 	createReactVisualization,
@@ -15,13 +15,24 @@ export const sourceVisualizer = createVisualizer({
 		kind: sOpenObject({}),
 	}).defineAs(visualizationNs("SourceVisualizationData")),
 	getVisualization: (data, self) =>
-		createReactVisualization(self, { priority: -100 }, ({ theme }) => (
-			<MonacoEditorLazyLoadable
-				text={JSON.stringify(data, undefined, 4)}
-				fileName={"main.json"}
-				theme={theme}
-			/>
-		)),
+		createReactVisualization(self, { priority: -100 }, ({ theme }) => {
+			const s = new JsonSchemaGenerator();
+
+			return (
+				<MonacoEditorLazyLoadable
+					text={JSON.stringify(data, undefined, 4)}
+					fileName={"main.json"}
+					theme={theme}
+					jsonSchemas={[
+						{
+							schema: s.getJsonSchemaWithDefinitions(
+								globalVisualizationFactory.getSerializer()
+							),
+						},
+					]}
+				/>
+			);
+		}),
 });

 globalVisualizationFactory.addHiddenVisualizer(sourceVisualizer);
--- a/yarn.lock
+++ b/yarn.lock
@@ -302,6 +302,11 @@
  resolved "https://registry.yarnpkg.com/@hediet/monaco-editor-react/-/monaco-editor-react-0.1.1.tgz#041f805aeb188403c7876f0f364d2a429e706031"
  integrity sha512-0DZZfLcFNuc3Wrn+2eztnRloCBe6GV8zIrGT3LPdZlWYEigJT+Qh7ANvRHF0tCS5YPAFGQNZJcfzKbBfqRGo4w==

+"@hediet/monaco-editor-react@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@hediet/monaco-editor-react/-/monaco-editor-react-0.2.0.tgz#4a98102baf1942f210fc19fd406b6c82da3bf583"
+  integrity sha512-EA71+iv9sV25+YgBQDJ4Ou17sOJCXQat7r5AOD5STZHcUQdSuQufI2t9ue+wJIm4048P9sQ/ruW3pYmwxF9Amw==
+
 "@hediet/semantic-json@^0.3.14", "@hediet/semantic-json@^0.3.15":
  version "0.3.15"
  resolved "https://registry.yarnpkg.com/@hediet/semantic-json/-/semantic-json-0.3.15.tgz#e38f799b1a7dd2624a3ee2e05bca58cfe76cb58d"
@@ -5488,6 +5493,11 @@ monaco-editor@^0.20.0:
  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.20.0.tgz#5d5009343a550124426cb4d965a4d27a348b4dea"
  integrity sha512-hkvf4EtPJRMQlPC3UbMoRs0vTAFAYdzFQ+gpMb8A+9znae1c43q8Mab9iVsgTcg/4PNiLGGn3SlDIa8uvK1FIQ==

+monaco-editor@^0.25.2:
+  version "0.25.2"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.25.2.tgz#119e2b15bbd968a1a99c03cac9c329316d7c37e9"
+  integrity sha512-5iylzSJevCnzJn9UVsW8yOZ3yHjmAs4TfvH3zsbftKiFKmHG0xirGN6DK9Kk04VSWxYCZZAIafYJoNJJMAU1KA==
+
 monotone-convex-hull-2d@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/monotone-convex-hull-2d/-/monotone-convex-hull-2d-1.0.1.tgz#47f5daeadf3c4afd37764baa1aa8787a40eee08c"