Refactor demo code

ota-meshi · ota-meshi · commit 32650bd5f507 · 2021-07-21T11:59:54.000+09:00
diff --git a/explorer-v2/src/lib/ESLintEditor.svelte b/explorer-v2/src/lib/ESLintEditor.svelte
@@ -1,6 +1,6 @@
 <script>
 	import MonacoEditor from './MonacoEditor.svelte';
-	import { monacoEditorLoad } from './scripts/monaco-loader';
+	import { loadMonacoEditor } from './scripts/monaco-loader';
 	import { createEventDispatcher, onMount } from 'svelte';
 
 	const dispatch = createEventDispatcher();
@@ -14,6 +14,8 @@
 	let leftMarkers = [];
 	let rightMarkers = [];
 
+	let messageMap = new Map();
+
 	$: {
 		lint(linter, code, config, options);
 	}
@@ -23,6 +25,7 @@
 	});
 
 	async function lint(linter, code, config, options) {
+		messageMap.clear();
 		/* eslint-disable no-param-reassign -- ignore */
 		linter = await linter;
 		if (!linter) {
@@ -49,13 +52,13 @@
 			fixedMessages: fixResult.messages
 		});
 
-		leftMarkers = await Promise.all(messages.map(messageToMarker));
-		rightMarkers = await Promise.all(fixResult.messages.map(messageToMarker));
+		leftMarkers = await Promise.all(messages.map((m) => messageToMarker(m, messageMap)));
+		rightMarkers = await Promise.all(fixResult.messages.map((m) => messageToMarker(m)));
 	}
 
 	/** message to marker */
-	async function messageToMarker(message) {
-		const monaco = await monacoEditorLoad;
+	async function messageToMarker(message, messageMap) {
+		const monaco = await loadMonacoEditor();
 		const rule = message.ruleId && linter.getRules().get(message.ruleId);
 		const docUrl = rule && rule.meta && rule.meta.docs && rule.meta.docs.url;
 		const startLineNumber = ensurePositiveInt(message.line, 1);
@@ -65,7 +68,7 @@
 		const code = docUrl
 			? { value: message.ruleId, link: docUrl, target: docUrl }
 			: message.ruleId || 'FATAL';
-		return {
+		const marker = {
 			code,
 			severity: monaco.MarkerSeverity.Error,
 			source: 'ESLint',
@@ -75,6 +78,10 @@
 			endLineNumber,
 			endColumn
 		};
+		if (messageMap) {
+			messageMap.set(computeKey(marker), message);
+		}
+		return marker;
 	}
 
 	/**
@@ -86,6 +93,97 @@
 	function ensurePositiveInt(value, defaultValue) {
 		return Math.max(1, (value !== undefined ? value : defaultValue) | 0);
 	}
+
+	function provideCodeActions(model, _range, context) {
+		if (context.only !== 'quickfix') {
+			return {
+				actions: [],
+				dispose() {
+					/* nop */
+				}
+			};
+		}
+
+		const actions = [];
+		for (const marker of context.markers) {
+			const message = messageMap.get(computeKey(marker));
+			if (!message) {
+				continue;
+			}
+			if (message.fix) {
+				actions.push(
+					createQuickfixCodeAction(`Fix this ${message.ruleId} problem`, marker, model, message.fix)
+				);
+			}
+			if (message.suggestions) {
+				for (const suggestion of message.suggestions) {
+					actions.push(
+						createQuickfixCodeAction(
+							`${suggestion.desc} (${message.ruleId})`,
+							marker,
+							model,
+							suggestion.fix
+						)
+					);
+				}
+			}
+		}
+
+		return {
+			actions,
+			dispose() {
+				/* nop */
+			}
+		};
+	}
+
+	/**
+	 * Computes the key string from the given marker.
+	 * @param {import('monaco-editor').editor.IMarkerData} marker marker
+	 * @returns {string} the key string
+	 */
+	function computeKey(marker) {
+		const code =
+			(typeof marker.code === 'string' ? marker.code : marker.code && marker.code.value) || '';
+		return `[${marker.startLineNumber},${marker.startColumn},${marker.endLineNumber},${marker.endColumn}]-${code}`;
+	}
+	/**
+	 * Create quickfix code action.
+	 * @param {string} title title
+	 * @param {import('monaco-editor').editor.IMarkerData} marker marker
+	 * @param {import('monaco-editor').editor.ITextModel} model model
+	 * @param { { range: [number, number], text: string } } fix fix data
+	 * @returns {import('monaco-editor').languages.CodeAction} CodeAction
+	 */
+	function createQuickfixCodeAction(title, marker, model, fix) {
+		const start = model.getPositionAt(fix.range[0]);
+		const end = model.getPositionAt(fix.range[1]);
+		/**
+		 * @type {import('monaco-editor').IRange}
+		 */
+		const editRange = {
+			startLineNumber: start.lineNumber,
+			startColumn: start.column,
+			endLineNumber: end.lineNumber,
+			endColumn: end.column
+		};
+		return {
+			title,
+			diagnostics: [marker],
+			kind: 'quickfix',
+			edit: {
+				edits: [
+					{
+						resource: model.uri,
+						edit: {
+							range: editRange,
+							text: fix.text
+						}
+					}
+				]
+			}
+		};
+	}
 </script>
 
 <MonacoEditor
@@ -95,6 +193,7 @@
 	diffEditor
 	markers={leftMarkers}
 	{rightMarkers}
+	{provideCodeActions}
 />
 
 <style></style>
diff --git a/explorer-v2/src/lib/ESLintPlayground.svelte b/explorer-v2/src/lib/ESLintPlayground.svelte
@@ -111,9 +111,9 @@
 			See result of
 			<a href="https://github.com/sveltejs/eslint-plugin-svelte3">eslint-plugin-svelte3</a>.
 		</label>
-		<template v-if="useEslintPluginSvelte3">
+		{#if useEslintPluginSvelte3}
 			<span style="color: red">svelte-eslint-parser is not used.</span>
-		</template>
+		{/if}
 		<span style="margin-left: 16px">{time}</span>
 	</div>
 	<div class="playground-content">
diff --git a/explorer-v2/src/lib/MonacoEditor.svelte b/explorer-v2/src/lib/MonacoEditor.svelte
@@ -3,16 +3,24 @@
 
 	const dispatch = createEventDispatcher();
 
-	import { monacoEditorLoad } from './scripts/monaco-loader';
+	import { loadMonacoEditor } from './scripts/monaco-loader';
 	export let code = '';
 	export let rightCode = '';
-	export let language = 'json';
+	export let language = 'javascript';
 	export let readOnly = false;
 	export let diffEditor = false;
 	export let markers = [];
 	export let rightMarkers = [];
+	export let provideCodeActions = null;
 
-	let rootElement, editor, setLeftValue, setRightValue, setLeftMarkers, setRightMarkers;
+	let rootElement,
+		editor,
+		setLeftValue,
+		setRightValue,
+		setLeftMarkers,
+		setRightMarkers,
+		getLeftEditor,
+		codeActionProviderDisposable;
 	$: {
 		if (setLeftValue) {
 			setLeftValue(code);
@@ -33,9 +41,30 @@
 			setRightMarkers(rightMarkers);
 		}
 	}
+	$: {
+		disposeCodeActionProvider();
+		if (provideCodeActions) {
+			loadMonacoEditor().then((monaco) => {
+				codeActionProviderDisposable = monaco.languages.registerCodeActionProvider(language, {
+					provideCodeActions(model, range, context) {
+						const editor = getLeftEditor?.();
+						if (editor?.getModel().url !== model.url) {
+							return {
+								actions: [],
+								dispose() {
+									/* nop */
+								}
+							};
+						}
+						return provideCodeActions(model, range, context);
+					}
+				});
+			});
+		}
+	}
 
 	onMount(async () => {
-		const monaco = await monacoEditorLoad;
+		const monaco = await loadMonacoEditor();
 		const options = {
 			value: code,
 			readOnly,
@@ -88,6 +117,7 @@
 			setRightMarkers = (markers) => {
 				updateMarkers(rightEditor, markers);
 			};
+			getLeftEditor = () => leftEditor;
 
 			setLeftMarkers(markers);
 			setRightMarkers(rightMarkers);
@@ -118,11 +148,13 @@
 			setRightMarkers = () => {
 				/* noop */
 			};
+			getLeftEditor = () => editor;
 
 			setLeftMarkers(markers);
 		}
 	});
 	onDestroy(() => {
+		disposeCodeActionProvider();
 		dispose(editor);
 		// rootElement.innerHTML = ""
 		editor = null;
@@ -140,7 +172,7 @@
 		}
 	}
 	async function updateMarkers(editor, markers) {
-		const monaco = await monacoEditorLoad;
+		const monaco = await loadMonacoEditor();
 		const model = editor.getModel();
 		const id = editor.getId();
 		monaco.editor.setModelMarkers(model, id, JSON.parse(JSON.stringify(markers)));
@@ -168,6 +200,12 @@
 			x.dispose();
 		}
 	}
+
+	function disposeCodeActionProvider() {
+		if (codeActionProviderDisposable) {
+			codeActionProviderDisposable.dispose();
+		}
+	}
 </script>
 
 <div bind:this={rootElement} class="root" />
diff --git a/explorer-v2/src/lib/scripts/monaco-loader.js b/explorer-v2/src/lib/scripts/monaco-loader.js
@@ -1,24 +1,55 @@
-if (typeof window !== 'undefined') {
-	const monacoScript = Array.from(document.head.querySelectorAll('script')).find(
-		(script) => script.src && script.src.includes('monaco')
-	);
-	window.require.config({
-		paths: {
-			vs: monacoScript.src.replace(/\/vs\/.*$/u, '/vs')
-		},
-		'vs/nls': {
-			availableLanguages: {
-				'*': 'ja'
+async function setupMonaco() {
+	if (typeof window !== 'undefined') {
+		const monacoScript =
+			Array.from(document.head.querySelectorAll('script')).find(
+				(script) => script.src && script.src.includes('monaco') && script.src.includes('vs/loader')
+			) || (await appendMonacoEditorScript());
+		window.require.config({
+			paths: {
+				vs: monacoScript.src.replace(/\/vs\/.*$/u, '/vs')
+			},
+			'vs/nls': {
+				availableLanguages: {
+					'*': 'ja'
+				}
 			}
-		}
+		});
+	}
+}
+
+function appendMonacoEditorScript() {
+	return new Promise((resolve) => {
+		const script = document.createElement('script');
+		script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js';
+		script.onload = () => {
+			script.onload = null;
+
+			watch();
+
+			function watch() {
+				if (window.require) {
+					resolve(script);
+					return;
+				}
+				setTimeout(watch, 200);
+			}
+		};
+		document.head.append(script);
 	});
 }
-const editorLoaded = new Promise((resolve) => {
-	if (typeof window !== 'undefined')
-		// eslint-disable-next-line node/no-missing-require -- ignore
-		window.require(['vs/editor/editor.main'], (r) => {
-			resolve(r);
-		});
-});
 
-export const monacoEditorLoad = editorLoaded;
+let setupedMonaco = null;
+let editorLoaded = null;
+
+export async function loadMonacoEditor() {
+	await (setupedMonaco || (setupedMonaco = setupMonaco()));
+	return (
+		editorLoaded ||
+		(editorLoaded = new Promise((resolve) => {
+			// eslint-disable-next-line node/no-missing-require -- ignore
+			window.require(['vs/editor/editor.main'], (r) => {
+				resolve(r);
+			});
+		}))
+	);
+}
