Refactor demo code

Author: ota-meshi

explorer-v2/src/lib/AstExplorer.svelte

@@ -173,18 +173,18 @@
 </script>
 
 <div class="ast-explorer-root">
-	<div class="ast-tools">{time}<AstOptions bind:modelValue={options} /></div>
+	<div class="ast-tools">{time}<AstOptions bind:options /></div>
 	<div class="ast-explorer">
 		<MonacoEditor
 			bind:this={sourceEditor}
-			bind:modelValue={svelteValue}
+			bind:code={svelteValue}
 			language="html"
 			on:focusEditorText={() => handleFocus('source')}
 			on:changeCursorPosition={(e) => handleCursor(e.detail, 'source')}
 		/>
 		<MonacoEditor
 			bind:this={jsonEditor}
-			modelValue={astJson.json}
+			code={astJson.json}
 			language="json"
 			readOnly
 			on:focusEditorText={() => handleFocus('json')}

explorer-v2/src/lib/AstOptions.svelte

@@ -1,8 +1,8 @@
 <script>
-	export let modelValue = {};
+	export let options = {};
 	function updateShowLocations(newValue) {
-		modelValue = {
-			...modelValue,
+		options = {
+			...options,
 			showLocations: newValue
 		};
 	}
@@ -11,7 +11,7 @@
 <label class="ast-options"
 	><input
 		type="checkbox"
-		checked={modelValue.showLocations}
+		checked={options.showLocations}
 		on:change={(e) => updateShowLocations(e.target.checked)}
 	/>Locations</label
 >

explorer-v2/src/lib/ESLintEditor.svelte

@@ -1,65 +1,54 @@
 <script>
-	import Linter from 'eslint4b';
 	import MonacoEditor from './MonacoEditor.svelte';
-	import * as svelteEslintParser from 'svelte-eslint-parser';
 	import { monacoEditorLoad } from './scripts/monaco-loader';
 	import { createEventDispatcher, onMount } from 'svelte';
 
 	const dispatch = createEventDispatcher();
 
-	const linter = new Linter();
-	linter.defineParser('svelte-eslint-parser', svelteEslintParser);
+	export let linter = null;
+	export let code = '';
+	export let config = {};
+	export let options = {};
 
-	export let modelValue = '';
-	export let rules = {};
-	export let useEslintPluginSvelte3 = false;
-
-	let fixedValue = modelValue;
+	let fixedValue = code;
 	let leftMarkers = [];
 	let rightMarkers = [];
 
 	$: {
-		lint(modelValue, useEslintPluginSvelte3, rules);
+		lint(linter, code, config, options);
 	}
 
 	onMount(() => {
-		lint(modelValue, useEslintPluginSvelte3, rules);
+		lint(linter, code, config, options);
 	});
 
-	async function getEslintPluginSvelte3Options() {
-		const pluginSvelte3 = await import('eslint-plugin-svelte3');
-		return {
-			preprocess: pluginSvelte3.processors.svelte3.preprocess,
-			postprocess: pluginSvelte3.processors.svelte3.postprocess
-		};
-	}
-
-	async function lint(code, useEslintPluginSvelte3, rules) {
-		const config = {
-			parser: useEslintPluginSvelte3 ? undefined : 'svelte-eslint-parser',
-			parserOptions: {
-				ecmaVersion: 2020,
-				sourceType: 'module'
-			},
-			rules,
-			env: {
-				browser: true,
-				es2021: true
-			}
-		};
-		const options = useEslintPluginSvelte3 ? await getEslintPluginSvelte3Options() : {};
+	async function lint(linter, code, config, options) {
+		/* eslint-disable no-param-reassign -- ignore */
+		linter = await linter;
+		if (!linter) {
+			return;
+		}
+		code = await code;
+		config = await config;
+		options = await options;
+		/* eslint-enable no-param-reassign -- ignore */
 
 		const start = Date.now();
 		const messages = linter.verify(code, config, options);
 		const time = Date.now() - start;
 
 		dispatch('time', time);
 
-		dispatch('updateMessages', messages);
-
 		const fixResult = linter.verifyAndFix(code, config, options);
 		fixedValue = fixResult.output;
 
+		dispatch('result', {
+			messages,
+			time,
+			output: fixResult.output,
+			fixedMessages: fixResult.messages
+		});
+
 		leftMarkers = await Promise.all(messages.map(messageToMarker));
 		rightMarkers = await Promise.all(fixResult.messages.map(messageToMarker));
 	}
@@ -100,8 +89,8 @@
 </script>
 
 <MonacoEditor
-	bind:modelValue
-	bind:rightValue={fixedValue}
+	bind:code
+	bind:rightCode={fixedValue}
 	language="html"
 	diffEditor
 	markers={leftMarkers}

explorer-v2/src/lib/ESLintPlayground.svelte

@@ -1,11 +1,15 @@
 <script>
 	import { onDestroy, onMount } from 'svelte';
-
+	import Linter from 'eslint4b';
+	import * as svelteEslintParser from 'svelte-eslint-parser';
 	import ESLintEditor from './ESLintEditor.svelte';
 	import RulesSettings from './RulesSettings.svelte';
 	import { deserializeState, serializeState } from './scripts/state';
 	import { DEFAULT_RULES_CONFIG, getURL } from './scripts/rules.js';
 
+	const linter = new Linter();
+	linter.defineParser('svelte-eslint-parser', svelteEslintParser);
+
 	const DEFAULT_CODE =
 		`<script>
     let a = 1;
@@ -28,6 +32,18 @@
 	let messages = [];
 	let useEslintPluginSvelte3 = Boolean(state.useEslintPluginSvelte3);
 	let time = '';
+	let options = {};
+
+	$: {
+		options = useEslintPluginSvelte3 ? getEslintPluginSvelte3Options() : {};
+	}
+	async function getEslintPluginSvelte3Options() {
+		const pluginSvelte3 = await import('eslint-plugin-svelte3');
+		return {
+			preprocess: pluginSvelte3.processors.svelte3.preprocess,
+			postprocess: pluginSvelte3.processors.svelte3.postprocess
+		};
+	}
 
 	// eslint-disable-next-line no-use-before-define -- false positive
 	$: serializedString = (() => {
@@ -56,8 +72,9 @@
 			window.removeEventListener('hashchange', onUrlHashChange);
 		}
 	});
-	function onUpdateMessages(msgs) {
-		messages = msgs.detail;
+	function onLintedResult(evt) {
+		messages = evt.detail.messages;
+		time = `${evt.detail.time}ms`;
 	}
 	function onUrlHashChange() {
 		const newSerializedString =
@@ -103,12 +120,23 @@
 		<RulesSettings bind:rules class="rules-settings" />
 		<div class="editor-content">
 			<ESLintEditor
-				bind:modelValue={code}
-				bind:rules
-				bind:useEslintPluginSvelte3
+				{linter}
+				bind:code
+				config={{
+					parser: useEslintPluginSvelte3 ? undefined : 'svelte-eslint-parser',
+					parserOptions: {
+						ecmaVersion: 2020,
+						sourceType: 'module'
+					},
+					rules,
+					env: {
+						browser: true,
+						es2021: true
+					}
+				}}
+				{options}
 				class="eslint-playground"
-				on:updateMessages={onUpdateMessages}
-				on:time={(t) => (time = `${t.detail}ms`)}
+				on:result={onLintedResult}
 			/>
 			<div class="messages">
 				<ol>

explorer-v2/src/lib/MonacoEditor.svelte

@@ -4,8 +4,8 @@
 	const dispatch = createEventDispatcher();
 
 	import { monacoEditorLoad } from './scripts/monaco-loader';
-	export let modelValue = '';
-	export let rightValue = '';
+	export let code = '';
+	export let rightCode = '';
 	export let language = 'json';
 	export let readOnly = false;
 	export let diffEditor = false;
@@ -15,12 +15,12 @@
 	let rootElement, editor, setLeftValue, setRightValue, setLeftMarkers, setRightMarkers;
 	$: {
 		if (setLeftValue) {
-			setLeftValue(modelValue);
+			setLeftValue(code);
 		}
 	}
 	$: {
 		if (setRightValue) {
-			setRightValue(rightValue);
+			setRightValue(rightCode);
 		}
 	}
 	$: {
@@ -37,7 +37,7 @@
 	onMount(async () => {
 		const monaco = await monacoEditorLoad;
 		const options = {
-			value: modelValue,
+			value: code,
 			readOnly,
 			theme: 'vs-dark',
 			language,
@@ -59,27 +59,27 @@
 				originalEditable: true,
 				...options
 			});
-			const original = monaco.editor.createModel(modelValue, language);
-			const modified = monaco.editor.createModel(rightValue, language);
+			const original = monaco.editor.createModel(code, language);
+			const modified = monaco.editor.createModel(rightCode, language);
 			const leftEditor = editor.getOriginalEditor();
 			const rightEditor = editor.getModifiedEditor();
 			rightEditor.updateOptions({ readOnly: true });
 			editor.setModel({ original, modified });
 			original.onDidChangeContent(() => {
 				const value = original.getValue();
-				modelValue = value;
+				code = value;
 			});
 
-			setLeftValue = (modelValue) => {
+			setLeftValue = (code) => {
 				const value = original.getValue();
-				if (modelValue !== value) {
-					original.setValue(modelValue);
+				if (code !== value) {
+					original.setValue(code);
 				}
 			};
-			setRightValue = (modelValue) => {
+			setRightValue = (code) => {
 				const value = modified.getValue();
-				if (modelValue !== value) {
-					modified.setValue(modelValue);
+				if (code !== value) {
+					modified.setValue(code);
 				}
 			};
 			setLeftMarkers = (markers) => {
@@ -95,18 +95,18 @@
 			editor = monaco.editor.create(rootElement, options);
 			editor.onDidChangeModelContent(() => {
 				const value = editor.getValue();
-				modelValue = value;
+				code = value;
 			});
 			editor.onDidChangeCursorPosition((evt) => {
 				dispatch('changeCursorPosition', evt);
 			});
 			editor.onDidFocusEditorText((evt) => {
 				dispatch('focusEditorText', evt);
 			});
-			setLeftValue = (modelValue) => {
+			setLeftValue = (code) => {
 				const value = editor.getValue();
-				if (modelValue !== value) {
-					editor.setValue(modelValue);
+				if (code !== value) {
+					editor.setValue(code);
 				}
 			};
 			setRightValue = () => {

explorer-v2/src/lib/ScopeExplorer.svelte

@@ -285,18 +285,18 @@
 </script>
 
 <div class="ast-explorer-root">
-	<div class="ast-tools">{time}<AstOptions bind:modelValue={options} /></div>
+	<div class="ast-tools">{time}<AstOptions bind:options /></div>
 	<div class="ast-explorer">
 		<MonacoEditor
 			bind:this={sourceEditor}
-			bind:modelValue={svelteValue}
+			bind:code={svelteValue}
 			language="html"
 			on:focusEditorText={() => handleFocus('source')}
 			on:changeCursorPosition={(e) => handleCursor(e.detail, 'source')}
 		/>
 		<MonacoEditor
 			bind:this={jsonEditor}
-			modelValue={scopeJson.json}
+			code={scopeJson.json}
 			language="json"
 			readOnly
 			on:focusEditorText={() => handleFocus('json')}