ESlint Pass

src/app.postcss

@@ -9,3 +9,6 @@
 .btn {
 	@apply bg-indigo-500 hover:bg-indigo-700 rounded px-4 shadow;
 }
+.action-btn {
+	@apply rounded p-2 bg-indigo-400 shadow flex-auto text-white hover:bg-indigo-500;
+}

src/lib/components/actions.svelte

@@ -20,7 +20,6 @@
 	const exportImage = (event: Event, exporter: Exporter) => {
 		const canvas: HTMLCanvasElement = document.createElement('canvas');
 		const svg: HTMLElement = document.querySelector('#container svg');
-		debugger;
 		const box: DOMRect = svg.getBoundingClientRect();
 		canvas.width = box.width;
 		canvas.height = box.height;
@@ -63,7 +62,7 @@
 	};
 
 	const isClipboardAvailable = () => {
-		return window?.hasOwnProperty('ClipboardItem');
+		return Object.prototype.hasOwnProperty.call(window, 'ClipboardItem');
 	};
 
 	const clipboardCopy: Exporter = (canvas, context, image) => {
@@ -72,9 +71,10 @@
 
 			canvas.toBlob((blob) => {
 				try {
-					// @ts-ignore
+					// @ts-ignore: https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1004/files
 					navigator.clipboard.write([
-						// @ts-ignore
+						/* eslint-disable no-undef */
+						// @ts-ignore: https://github.com/microsoft/TypeScript/issues/43821
 						new ClipboardItem({
 							[blob.type]: blob
 						})
@@ -86,15 +86,15 @@
 		};
 	};
 
-	const onCopyClipboard = (event) => {
+	const onCopyClipboard = (event: Event) => {
 		exportImage(event, clipboardCopy);
 	};
 
-	const onDownloadPNG = (event) => {
+	const onDownloadPNG = (event: Event) => {
 		exportImage(event, downloadImage);
 	};
 
-	const onDownloadSVG = (event) => {
+	const onDownloadSVG = () => {
 		simulateDownload(
 			`mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.svg`,
 			`data:image/svg+xml;base64,${getBase64SVG()}`
@@ -106,13 +106,13 @@
 		document.execCommand('Copy');
 	};
 
-	let iUrl;
-	let svgUrl;
-	let mdCode;
+	let iUrl: string;
+	let svgUrl: string;
+	let mdCode: string;
 	let imagemodeselected = 'auto';
 	let userimagesize = 1080;
 
-	const unsubscribe = base64State.subscribe((b64Code) => {
+	base64State.subscribe((b64Code) => {
 		iUrl = `https://mermaid.ink/img/${b64Code}`;
 		svgUrl = `https://mermaid.ink/svg/${b64Code}`;
 		mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}/edit#${b64Code})`;
@@ -122,21 +122,21 @@
 <Card title="Actions" isOpen={false}>
 	<div class="flex flex-wrap gap-2 m-2">
 		{#if isClipboardAvailable()}
-			<button class="btn w-full" on:click={onCopyClipboard}
+			<button class="action-btn w-full" on:click={onCopyClipboard}
 				><i class="far fa-copy" /> Copy Image to clipboard
 			</button>
 		{/if}
-		<button class="btn flex-auto" on:click={onDownloadPNG}>
+		<button class="action-btn flex-auto" on:click={onDownloadPNG}>
 			<i class="fas fa-download" /> PNG
 		</button>
-		<button class="btn flex-auto" on:click={onDownloadSVG}>
+		<button class="action-btn flex-auto" on:click={onDownloadSVG}>
 			<i class="fas fa-download" /> SVG
 		</button>
-		<button class="btn flex-auto">
+		<button class="action-btn flex-auto">
 			<a class="link-style" target="_blank" href={iUrl}
 				><i class="fas fa-external-link-alt" /> PNG</a>
 		</button>
-		<button class="btn flex-auto">
+		<button class="action-btn flex-auto">
 			<a class="link-style" target="_blank" href={svgUrl}
 				><i class="fas fa-external-link-alt" /> SVG</a>
 		</button>
@@ -160,9 +160,3 @@
 		</div>
 	</div>
 </Card>
-
-<style>
-	.btn {
-		@apply rounded p-2 bg-indigo-400 shadow flex-auto text-white hover:bg-indigo-500;
-	}
-</style>

src/lib/components/editor/util.ts

@@ -1,4 +1,5 @@
-export const initEditor = (monaco) => {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const initEditor = (monaco): void => {
 	monaco.languages.register({ id: 'mermaid' });
 
 	// Register a tokens provider for the language
@@ -47,7 +48,7 @@ export const initEditor = (monaco) => {
 	// Register a completion item provider for the new language
 	monaco.languages.registerCompletionItemProvider('mermaid', {
 		provideCompletionItems: () => {
-			var suggestions = [
+			const suggestions = [
 				{
 					label: 'simpleText',
 					kind: monaco.languages.CompletionItemKind.Text,

src/lib/components/view.svelte

@@ -6,11 +6,11 @@
 	import type { Mermaid } from 'mermaid';
 
 	const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid;
-	let code: string = '';
+	let code = '';
 	let container: HTMLDivElement;
-	let error: boolean = false;
-	let outOfSync: boolean = false;
-	let manualUpdate: boolean = true;
+	let error = false;
+	let outOfSync = false;
+	let manualUpdate = true;
 	onMount(async () => {
 		codeStore.subscribe((state) => {
 			try {
@@ -27,7 +27,7 @@
 					delete container.dataset.processed;
 					mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid)));
 					mermaid.init(container);
-					mermaid.render('graph-div', code, insertSvg);
+					mermaid.render('graph-div', code);
 					container.parentElement.parentElement.parentElement.scrollTop = scroll;
 				} else if (manualUpdate) {
 					manualUpdate = false;
@@ -48,7 +48,6 @@
 			}
 		});
 	});
-	const insertSvg = (svgCode, bindFunctions) => {};
 </script>
 
 <div id="view" class="p-2" class:error class:outOfSync>

src/lib/form.ts

@@ -1,60 +0,0 @@
-// this action (https://svelte.dev/tutorial/actions) allows us to
-// progressively enhance a <form> that already works without JS
-export function enhance(
-	form: HTMLFormElement,
-	{
-		pending,
-		error,
-		result
-	}: {
-		pending?: (data: FormData, form: HTMLFormElement) => void;
-		error?: (res: Response, error: Error, form: HTMLFormElement) => void;
-		result: (res: Response, form: HTMLFormElement) => void;
-	}
-) {
-	let current_token: {};
-
-	async function handle_submit(e: Event) {
-		const token = (current_token = {});
-
-		e.preventDefault();
-
-		const body = new FormData(form);
-
-		if (pending) pending(body, form);
-
-		try {
-			const res = await fetch(form.action, {
-				method: form.method,
-				headers: {
-					accept: 'application/json'
-				},
-				body
-			});
-
-			if (token !== current_token) return;
-
-			if (res.ok) {
-				result(res, form);
-			} else if (error) {
-				error(res, null, form);
-			} else {
-				console.error(await res.text());
-			}
-		} catch (e) {
-			if (error) {
-				error(null, e, form);
-			} else {
-				throw e;
-			}
-		}
-	}
-
-	form.addEventListener('submit', handle_submit);
-
-	return {
-		destroy() {
-			form.removeEventListener('submit', handle_submit);
-		}
-	};
-}