Merge pull request #3722 from tamayika/feature/website-playground-examples-type-check

Fix playground samples type errors and add CI test

.github/workflows/ci.yml

@@ -69,3 +69,7 @@ jobs:
       - name: Build website
         working-directory: website
         run: yarn run build
+
+      - name: Test website
+        working-directory: website
+        run: yarn test

website/package.json

@@ -6,7 +6,8 @@
 		"build-webpack": "webpack --mode production",
 		"build": "yarn typedoc && yarn build-webpack",
 		"dev-disk": "webpack --mode development --watch",
-		"typedoc": "typedoc --options ./typedoc/typedoc.json"
+		"typedoc": "typedoc --options ./typedoc/typedoc.json",
+		"test": "yarn ts-node scripts/check-playground-samples-js.ts"
 	},
 	"dependencies": {
 		"@popperjs/core": "^2.11.5",
@@ -31,6 +32,7 @@
 	},
 	"devDependencies": {
 		"@types/classnames": "^2.3.1",
+		"@types/glob": "^8.1.0",
 		"@types/html-webpack-plugin": "^3.2.2",
 		"@types/react": "^17.0.3",
 		"@types/react-dom": "^17.0.3",
@@ -39,6 +41,7 @@
 		"copy-webpack-plugin": "^11.0.0",
 		"css-loader": "^3.5.1",
 		"file-loader": "^6.0.0",
+		"glob": "^9.2.1",
 		"html-webpack-plugin": "^5.5.0",
 		"raw-loader": "^4.0.2",
 		"sass": "^1.32.8",

website/scripts/check-playground-samples-js.ts

@@ -0,0 +1,56 @@
+import { spawn } from "child_process";
+import { globSync } from "glob";
+import { exit } from "process";
+
+(async () => {
+	let someFileError = false;
+	const files = globSync("src/website/data/playground-samples/*/*/*.js");
+	type Result = { file: string; status: number; stdout: string };
+	const promises: Promise<Result>[] = [];
+	for (const file of files) {
+		promises.push(
+			new Promise<Result>((resolve) => {
+				const process = spawn(
+					"yarn",
+					[
+						"tsc",
+						"--noEmit",
+						"--allowJs",
+						"--checkJs",
+						"--skipLibCheck",
+						"../out/monaco-editor/monaco.d.ts",
+						file,
+					],
+					{ shell: true }
+				);
+				let buffer = "";
+				process.on("exit", () => {
+					resolve({
+						file: file,
+						status: process.exitCode ?? 1,
+						stdout: buffer,
+					});
+				});
+				process.stdout.on("data", (data) => {
+					buffer += data.toString();
+				});
+				process.stderr.on("data", (data) => {
+					buffer += data.toString();
+				});
+			})
+		);
+	}
+	for (const promise of promises) {
+		const result = await promise;
+		console.log(result.file);
+		if (result.status != 0) {
+			console.log(result.stdout.toString());
+			someFileError = true;
+		}
+	}
+
+	if (someFileError) {
+		console.error("Some files had type errors.");
+		exit(1);
+	}
+})();

website/src/website/data/playground-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.js

@@ -1,4 +1,4 @@
 // The colorizeElement-function will read the data-lang-attribute
 // from the element to select the correct language mode. In this
 // sample it is text/css.
-monaco.editor.colorizeElement(document.getElementById("code"));
+monaco.editor.colorizeElement(document.getElementById("code"), {});

website/src/website/data/playground-samples/customizing-the-appearence/exposed-colors/sample.js

@@ -3,7 +3,7 @@
 monaco.editor.defineTheme("myTheme", {
 	base: "vs",
 	inherit: true,
-	rules: [{ background: "EDF9FA" }],
+	rules: [],
 	colors: {
 		"editor.foreground": "#000000",
 		"editor.background": "#EDF9FA",

website/src/website/data/playground-samples/extending-language-services/configure-javascript-defaults/sample.js

@@ -11,7 +11,7 @@ monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
 
 // compiler options
 monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-	target: monaco.languages.typescript.ScriptTarget.ES6,
+	target: monaco.languages.typescript.ScriptTarget.ES2015,
 	allowNonTsExtensions: true,
 });
 

website/src/website/data/playground-samples/extending-language-services/custom-languages/sample.js

@@ -30,12 +30,20 @@ monaco.editor.defineTheme("myCoolTheme", {
 
 // Register a completion item provider for the new language
 monaco.languages.registerCompletionItemProvider("mySpecialLanguage", {
-	provideCompletionItems: () => {
+	provideCompletionItems: (model, position) => {
+		var word = model.getWordUntilPosition(position);
+		var range = {
+			startLineNumber: position.lineNumber,
+			endLineNumber: position.lineNumber,
+			startColumn: word.startColumn,
+			endColumn: word.endColumn,
+		};
 		var suggestions = [
 			{
 				label: "simpleText",
 				kind: monaco.languages.CompletionItemKind.Text,
 				insertText: "simpleText",
+				range: range,
 			},
 			{
 				label: "testing",
@@ -44,6 +52,7 @@ monaco.languages.registerCompletionItemProvider("mySpecialLanguage", {
 				insertTextRules:
 					monaco.languages.CompletionItemInsertTextRule
 						.InsertAsSnippet,
+				range: range,
 			},
 			{
 				label: "ifelse",
@@ -59,6 +68,7 @@ monaco.languages.registerCompletionItemProvider("mySpecialLanguage", {
 					monaco.languages.CompletionItemInsertTextRule
 						.InsertAsSnippet,
 				documentation: "If-Else Statement",
+				range: range,
 			},
 		];
 		return { suggestions: suggestions };

website/src/website/data/playground-samples/extending-language-services/inlay-hints-provider-example/sample.js

@@ -11,34 +11,37 @@ const editor = monaco.editor.create(document.getElementById("container"), {
 
 monaco.languages.registerInlayHintsProvider("javascript", {
 	provideInlayHints(model, range, token) {
-		return [
+		return {
-			{
+			hints: [
-				kind: monaco.languages.InlayHintKind.Type,
+				{
-				position: { column: 13, lineNumber: 4 },
+					kind: monaco.languages.InlayHintKind.Type,
-				text: `: Number`,
+					position: { column: 13, lineNumber: 4 },
-			},
+					label: `: Number`,
-			{
+				},
-				kind: monaco.languages.InlayHintKind.Type,
+				{
-				position: { column: 13, lineNumber: 2 },
+					kind: monaco.languages.InlayHintKind.Type,
-				text: `: Number`,
+					position: { column: 13, lineNumber: 2 },
-			},
+					label: `: Number`,
-			{
+				},
-				kind: monaco.languages.InlayHintKind.Type,
+				{
-				position: { column: 16, lineNumber: 2 },
+					kind: monaco.languages.InlayHintKind.Type,
-				text: `: Number`,
+					position: { column: 16, lineNumber: 2 },
-				whitespaceBefore: true, // see difference between a and b parameter
+					label: `: Number`,
-			},
+					whitespaceBefore: true, // see difference between a and b parameter
-			{
+				},
-				kind: monaco.languages.InlayHintKind.Parameter,
+				{
-				position: { column: 18, lineNumber: 4 },
+					kind: monaco.languages.InlayHintKind.Parameter,
-				text: `a:`,
+					position: { column: 18, lineNumber: 4 },
-			},
+					label: `a:`,
-			{
+				},
-				kind: monaco.languages.InlayHintKind.Parameter,
+				{
-				position: { column: 21, lineNumber: 4 },
+					kind: monaco.languages.InlayHintKind.Parameter,
-				text: `b:`,
+					position: { column: 21, lineNumber: 4 },
-				whitespaceAfter: true, // similar to whitespaceBefore
+					label: `b:`,
-			},
+					whitespaceAfter: true, // similar to whitespaceBefore
-		];
+				},
+			],
+			dispose: () => {},
+		};
 	},
 });

website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.js

@@ -32,11 +32,12 @@ editor.addCommand(
 	},
 	"myCondition1 && myCondition2"
 );
-
+// @ts-ignore
 myCondition1.set(true);
 
 setTimeout(function () {
 	alert("now enabling also myCondition2, try pressing Tab!");
+	// @ts-ignore
 	myCondition2.set(true);
 	// you can use myCondition2.reset() to go back to the default
 }, 2000);

website/src/website/data/playground-samples/interacting-with-the-editor/listening-to-mouse-events/sample.js

@@ -45,16 +45,16 @@ editor.changeViewZones(function (changeAccessor) {
 
 // Add a content widget (scrolls inline with text)
 var contentWidget = {
-	domNode: null,
+	domNode: (function () {
+		var domNode = document.createElement("div");
+		domNode.innerHTML = "My content widget";
+		domNode.style.background = "grey";
+		return domNode;
+	})(),
 	getId: function () {
 		return "my.content.widget";
 	},
 	getDomNode: function () {
-		if (!this.domNode) {
-			this.domNode = document.createElement("div");
-			this.domNode.innerHTML = "My content widget";
-			this.domNode.style.background = "grey";
-		}
 		return this.domNode;
 	},
 	getPosition: function () {
@@ -74,18 +74,18 @@ editor.addContentWidget(contentWidget);
 
 // Add an overlay widget
 var overlayWidget = {
-	domNode: null,
+	domNode: (function () {
+		var domNode = document.createElement("div");
+		domNode.innerHTML = "My overlay widget";
+		domNode.style.background = "grey";
+		domNode.style.right = "30px";
+		domNode.style.top = "50px";
+		return domNode;
+	})(),
 	getId: function () {
 		return "my.overlay.widget";
 	},
 	getDomNode: function () {
-		if (!this.domNode) {
-			this.domNode = document.createElement("div");
-			this.domNode.innerHTML = "My overlay widget";
-			this.domNode.style.background = "grey";
-			this.domNode.style.right = "30px";
-			this.domNode.style.top = "50px";
-		}
 		return this.domNode;
 	},
 	getPosition: function () {

website/yarn.lock

@@ -264,6 +264,14 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/glob@^8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-8.1.0.tgz#b63e70155391b0584dce44e7ea25190bbc38f2fc"
+  integrity sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==
+  dependencies:
+    "@types/minimatch" "^5.1.2"
+    "@types/node" "*"
+
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -309,6 +317,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
   integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
 
+"@types/minimatch@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
+  integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
+
 "@types/node@*", "@types/node@^18.6.1":
   version "18.6.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.1.tgz#828e4785ccca13f44e2fb6852ae0ef11e3e20ba5"
@@ -1515,6 +1528,16 @@ glob@^7.0.3, glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^9.2.1:
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-9.2.1.tgz#f47e34e1119e7d4f93a546e75851ba1f1e68de50"
+  integrity sha512-Pxxgq3W0HyA3XUvSXcFhRSs+43Jsx0ddxcFrbjxNGkL2Ak5BAUBxLqI5G6ADDeCHLfzzXFhe0b1yYcctGmytMA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    minimatch "^7.4.1"
+    minipass "^4.2.4"
+    path-scurry "^1.6.1"
+
 globby@^13.1.1:
   version "13.1.3"
   resolved "https://registry.yarnpkg.com/globby/-/globby-13.1.3.tgz#f62baf5720bcb2c1330c8d4ef222ee12318563ff"
@@ -1967,6 +1990,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lru-cache@^7.14.1:
+  version "7.18.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.1.tgz#4716408dec51d5d0104732647f584d1f6738b109"
+  integrity sha512-8/HcIENyQnfUTCDizRu9rrDyG6XG/21M4X7/YEGZeD76ZJilFPAUVb/2zysFf7VVO1LEjCDFyHp8pMMvozIrvg==
+
 lunr@^2.3.9:
   version "2.3.9"
   resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
@@ -2080,11 +2108,23 @@ minimatch@^5.1.2:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^7.4.1:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-7.4.2.tgz#157e847d79ca671054253b840656720cb733f10f"
+  integrity sha512-xy4q7wou3vUoC9k1xGTXc+awNdGaGVHtFUaey8tiX4H1QRc04DZ/rmDFwNm2EBsuYEhAZ6SgMmYf3InGY6OauA==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+minipass@^4.0.2, minipass@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-4.2.4.tgz#7d0d97434b6a19f59c5c3221698b48bbf3b2cd06"
+  integrity sha512-lwycX3cBMTvcejsHITUgYj6Gy6A7Nh4Q6h9NP4sTHY1ccJlC7yKzDmiShEHsJ16Jf1nKGDEaiHxiltsJEvk0nQ==
+
 mobx-react-lite@^2.2.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-2.2.2.tgz#87c217dc72b4e47b22493daf155daf3759f868a6"
@@ -2315,6 +2355,14 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path-scurry@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.6.1.tgz#dab45f7bb1d3f45a0e271ab258999f4ab7e23132"
+  integrity sha512-OW+5s+7cw6253Q4E+8qQ/u1fVvcJQCJo/VFD8pje+dbJCF1n5ZRMV2AEHbGp+5Q7jxQIYJxkHopnj6nzdGeZLA==
+  dependencies:
+    lru-cache "^7.14.1"
+    minipass "^4.0.2"
+
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"