diff --git a/examples/webpack/package.json b/examples/webpack/package.json index 663370f..ed7be74 100644 --- a/examples/webpack/package.json +++ b/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" diff --git a/examples/webpack/src/index.css b/examples/webpack/src/index.css index d37986f..152459d 100644 --- a/examples/webpack/src/index.css +++ b/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); - height: 100%; - box-shadow: 0 0 10px var(--shadow-color); + flex: 1 1 auto; +} + +#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); } diff --git a/examples/webpack/src/index.ejs b/examples/webpack/src/index.ejs index 458d356..db7ca97 100644 --- a/examples/webpack/src/index.ejs +++ b/examples/webpack/src/index.ejs @@ -25,6 +25,7 @@
+
diff --git a/examples/webpack/src/index.js b/examples/webpack/src/index.ts similarity index 75% rename from examples/webpack/src/index.js rename to examples/webpack/src/index.ts index 3cf212a..15fdd8d 100644 --- a/examples/webpack/src/index.js +++ b/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); + } +}); diff --git a/examples/webpack/webpack.config.js b/examples/webpack/webpack.config.js index 83b4824..2aa5c97 100644 --- a/examples/webpack/webpack.config.js +++ b/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: { diff --git a/package-lock.json b/package-lock.json index aa1fb05..b908f25 100644 --- a/package-lock.json +++ b/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" diff --git a/tsconfig.json b/tsconfig.json index 783e3fc..dd83bc7 100644 --- a/tsconfig.json +++ b/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,