Merge pull request #86 from remcohaszing/example-typescript

Show problems panel in example

examples/webpack/package.json

@@ -14,6 +14,8 @@
     "mini-css-extract-plugin": "^2.2.0",
     "monaco-editor": "^0.27.0",
     "monaco-yaml": "file:../..",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.3.5",
     "webpack": "^5.48.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2"

examples/webpack/src/index.css

@@ -1,15 +1,19 @@
 :root {
   --background-color: hsl(0, 0%, 96%);
   --editor-background: hsl(60, 100%, 100%);
+  --foreground-color: hsl(0, 0%, 0%);
   --primary-color: hsl(189, 100%, 63%);
   --shadow-color: hsla(0, 0%, 27%, 0.239);
+  --warning-color: hsl(49, 100%, 40%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background-color: hsl(0, 0%, 23%);
     --editor-background: hsl(0, 0%, 12%);
+    --foreground-color: hsl(0, 0%, 100%);
     --shadow-color: hsl(0, 0%, 43%);
+    --warning-color: hsl(49, 100%, 40%);
   }
 }
 
@@ -47,12 +51,40 @@ nav {
 }
 
 .editor-wrapper {
+  background: var(--editor-background);
+  box-shadow: 0 0 10px var(--shadow-color);
+  display: flex;
   flex: 1 1 auto;
-  padding: 1.5rem;
+  flex-flow: column;
+  margin: 1.5rem;
 }
 
 #editor {
-  background: var(--editor-background);
+  flex: 1 1 auto;
-  height: 100%;
+}
-  box-shadow: 0 0 10px var(--shadow-color);
+
+#problems {
+  border-top: 1px solid var(--shadow-color);
+  flex: 0 0 20vh;
+  color: var(--foreground-color);
+  overflow-y: scroll;
+}
+
+.problem {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 0.25rem;
+}
+
+.problem:hover {
+  background-color: var(--shadow-color);
+}
+
+.problem-text {
+  margin-left: 0.5rem;
+}
+
+.problem .codicon-warning {
+  color: var(--warning-color);
 }

examples/webpack/src/index.ejs

@@ -25,6 +25,7 @@
     </nav>
     <div class="editor-wrapper">
       <div id="editor"></div>
+      <div id="problems"></div>
     </div>
   </body>
 </html>

examples/webpack/src/index.ts

@@ -1,12 +1,18 @@
 import './index.css';
 
-import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import { editor, Environment } from 'monaco-editor/esm/vs/editor/editor.api';
 import { setDiagnosticsOptions } from 'monaco-yaml';
 
 // NOTE: This will give you all editor featues. If you would prefer to limit to only the editor
 // features you want to use, import them each individually. See this example: (https://github.com/microsoft/monaco-editor-samples/blob/main/browser-esm-webpack-small/index.js#L1-L91)
 import 'monaco-editor';
 
+declare global {
+  interface Window {
+    MonacoEnvironment: Environment;
+  }
+}
+
 window.MonacoEnvironment = {
   getWorker(moduleId, label) {
     switch (label) {
@@ -128,9 +134,37 @@ formatting:       Formatting is supported too! Under the hood this is powered by
 
 `.replace(/:$/m, ': ');
 
-editor.create(document.getElementById('editor'), {
+const ed = editor.create(document.getElementById('editor'), {
   automaticLayout: true,
   value,
   language: 'yaml',
   theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'vs-dark' : 'vs-light',
 });
+
+editor.onDidChangeMarkers(([resource]) => {
+  const problems = document.getElementById('problems');
+  const markers = editor.getModelMarkers({ resource });
+  while (problems.lastChild) {
+    problems.lastChild.remove();
+  }
+  for (const marker of markers) {
+    const wrapper = document.createElement('div');
+    wrapper.setAttribute('role', 'button');
+    const codicon = document.createElement('div');
+    const text = document.createElement('div');
+    wrapper.classList.add('problem');
+    codicon.classList.add('codicon', 'codicon-warning');
+    text.classList.add('problem-text');
+    text.textContent = marker.message;
+    wrapper.append(codicon, text);
+    wrapper.addEventListener(
+      'click',
+      () => {
+        ed.setPosition({ lineNumber: marker.startLineNumber, column: marker.startColumn });
+        ed.focus();
+      },
+      false,
+    );
+    problems.append(wrapper);
+  }
+});

examples/webpack/webpack.config.js

@@ -7,6 +7,7 @@ module.exports = {
     filename: '[contenthash].js',
   },
   resolve: {
+    extensions: ['.mjs', '.js', '.ts'],
     fallback: {
       // Yaml-ast-parser-custom-tags imports buffer. This can be omitted safely.
       buffer: false,
@@ -23,6 +24,11 @@ module.exports = {
         test: /\.(svg|ttf)$/,
         type: 'asset',
       },
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        options: { transpileOnly: true },
+      },
     ],
   },
   optimization: {

package-lock.json

@@ -8,7 +8,6 @@
     "": {
       "name": "monaco-yaml",
       "version": "3.0.1",
-      "dev": true,
       "license": "MIT",
       "workspaces": [
         "examples/*"
@@ -46,6 +45,8 @@
         "mini-css-extract-plugin": "^2.2.0",
         "monaco-editor": "^0.27.0",
         "monaco-yaml": "file:../..",
+        "ts-loader": "^9.2.5",
+        "typescript": "^4.3.5",
         "webpack": "^5.48.0",
         "webpack-cli": "^4.7.2",
         "webpack-dev-server": "^3.11.2"
@@ -10492,6 +10493,25 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/ts-loader": {
+      "version": "9.2.5",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.2.5.tgz",
+      "integrity": "sha512-al/ATFEffybdRMUIr5zMEWQdVnCGMUA9d3fXJ8dBVvBlzytPvIszoG9kZoR+94k6/i293RnVOXwMaWbXhNy9pQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "typescript": "*",
+        "webpack": "^5.0.0"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.10.1.tgz",
@@ -25134,6 +25154,18 @@
           "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
           "dev": true
         },
+        "ts-loader": {
+          "version": "9.2.5",
+          "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.2.5.tgz",
+          "integrity": "sha512-al/ATFEffybdRMUIr5zMEWQdVnCGMUA9d3fXJ8dBVvBlzytPvIszoG9kZoR+94k6/i293RnVOXwMaWbXhNy9pQ==",
+          "dev": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "enhanced-resolve": "^5.0.0",
+            "micromatch": "^4.0.0",
+            "semver": "^7.3.4"
+          }
+        },
         "tsconfig-paths": {
           "version": "3.10.1",
           "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.10.1.tgz",
@@ -25779,6 +25811,8 @@
             "mini-css-extract-plugin": "^2.2.0",
             "monaco-editor": "^0.27.0",
             "monaco-yaml": "file:../..",
+            "ts-loader": "^9.2.5",
+            "typescript": "^4.3.5",
             "webpack": "^5.48.0",
             "webpack-cli": "^4.7.2",
             "webpack-dev-server": "^3.11.2"
@@ -28815,6 +28849,18 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
       "dev": true
     },
+    "ts-loader": {
+      "version": "9.2.5",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.2.5.tgz",
+      "integrity": "sha512-al/ATFEffybdRMUIr5zMEWQdVnCGMUA9d3fXJ8dBVvBlzytPvIszoG9kZoR+94k6/i293RnVOXwMaWbXhNy9pQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4"
+      }
+    },
     "tsconfig-paths": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.10.1.tgz",
@@ -29460,6 +29506,8 @@
         "mini-css-extract-plugin": "^2.2.0",
         "monaco-editor": "^0.27.0",
         "monaco-yaml": "file:../..",
+        "ts-loader": "^9.2.5",
+        "typescript": "^4.3.5",
         "webpack": "^5.48.0",
         "webpack-cli": "^4.7.2",
         "webpack-dev-server": "^3.11.2"

tsconfig.json

@@ -3,7 +3,7 @@
     "declaration": true,
     "forceConsistentCasingInFileNames": true,
     "downlevelIteration": true,
-    "lib": ["dom", "es2017"],
+    "lib": ["dom", "dom.iterable", "es2017"],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,