Fix types

src/global.d.ts

@@ -1,33 +1 @@
 /// <reference types="@sveltejs/kit" />
-
-interface EditorUpdateEvent {
-	text: string;
-}
-interface EditorEvents {
-	update: EditorUpdateEvent;
-}
-
-interface TabEvents {
-	select: Tab;
-}
-
-interface Tab {
-	id: string;
-	title: string;
-	icon: string;
-}
-
-interface State {
-	code: string;
-	mermaid: string;
-	updateEditor: boolean;
-	updateDiagram: boolean;
-	autoSync: boolean;
-}
-
-interface HistoryEntry {
-	state: State;
-	time: number;
-	name?: string;
-	auto: boolean;
-}

src/lib/components/card/card.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import type { Tab } from '$lib/types';
+
 	import { slide } from 'svelte/transition';
 	import Tabs from './tabs.svelte';
-	export let isCloseable: boolean = true;
-	export let isOpen: boolean = true;
+	export let isCloseable = true;
+	export let isOpen = true;
 	export let tabs: Tab[] = [];
 	export let title: string;
 	$: isOpen = isCloseable ? isOpen : true;

src/lib/components/card/tabs.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import type { Tab, TabEvents } from '$lib/types';
+
 	import { createEventDispatcher } from 'svelte';
 	import { fade } from 'svelte/transition';
-	export let isCloseable: boolean = true;
+	export let isCloseable = true;
 	export let tabs: Tab[] = [];
 	export let title: string;
 	export let isOpen = false;
@@ -15,6 +17,13 @@
 	};
 </script>
 
+<style>
+	.isOpen {
+		transform: rotate(-90deg);
+		transition-duration: 0.5s;
+	}
+</style>
+
 <div class="flex cursor-default">
 	<span class="text-white mr-2 font-semibold" on:click|stopPropagation={() => (isOpen = !isOpen)}>
 		{#if isCloseable}
@@ -55,10 +64,3 @@
 		</ul>
 	{/if}
 </div>
-
-<style>
-	.isOpen {
-		transform: rotate(-90deg);
-		transition-duration: 0.5s;
-	}
-</style>

src/lib/components/editor/editor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { EditorEvents } from '$lib/types';
 	import type monaco from 'monaco-editor';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { initEditor } from './util';
@@ -28,8 +29,8 @@
 	const dispatch = createEventDispatcher<EditorEvents>();
 
 	onMount(async () => {
-		//@ts-ignore
-		Monaco = monaco; // This is a hack to handle a svelte-kit error when importing monaco.
+		//@ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
+		Monaco = monaco;
 		initEditor(Monaco);
 
 		editor = Monaco.editor.create(divEl, editorOptions);

src/lib/components/history/history.svelte

@@ -11,6 +11,7 @@
 	import { notify, prompt } from '$lib/util/notify';
 	import { onMount } from 'svelte';
 	import moment from 'moment';
+	import type { State, Tab } from '$lib/types';
 
 	const HISTORY_SAVE_INTERVAL: number = 60000;
 
@@ -70,6 +71,12 @@
 	let isOpen = true;
 </script>
 
+<style lang="postcss">
+	.btn {
+		@apply bg-indigo-500 hover:bg-indigo-700 rounded px-4 shadow;
+	}
+</style>
+
 <Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
 	<div slot="actions">
 		<button class="btn" on:click|stopPropagation={() => saveHistory()} title="Save current state"
@@ -102,9 +109,3 @@
 		{/each}
 	</ul>
 </Card>
-
-<style lang="postcss">
-	.btn {
-		@apply bg-indigo-500 hover:bg-indigo-700 rounded px-4 shadow;
-	}
-</style>

src/lib/components/history/history.ts

@@ -1,6 +1,7 @@
 import { derived, Readable, Writable, writable, get } from 'svelte/store';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
 import { generateSlug } from 'random-word-slugs';
+import type { HistoryEntry } from '../../types';
 
 const MAX_AUTO_HISTORY_LENGTH = 30;
 

src/lib/types.d.ts

@@ -5,3 +5,35 @@
 export interface Locals {
 	userid: string;
 }
+
+export interface EditorUpdateEvent {
+	text: string;
+}
+export interface EditorEvents {
+	update: EditorUpdateEvent;
+}
+
+export interface TabEvents {
+	select: Tab;
+}
+
+export interface Tab {
+	id: string;
+	title: string;
+	icon: string;
+}
+
+export interface State {
+	code: string;
+	mermaid: string;
+	updateEditor: boolean;
+	updateDiagram: boolean;
+	autoSync: boolean;
+}
+
+export interface HistoryEntry {
+	state: State;
+	time: number;
+	name?: string;
+	auto: boolean;
+}

src/lib/util/state.ts

@@ -1,6 +1,7 @@
 import { writable, get, derived } from 'svelte/store';
 import { toBase64, fromBase64 } from 'js-base64';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
+import type { State } from '$lib/types';
 
 const defaultState: State = {
 	code: `graph TD

src/routes/edit.svelte

@@ -13,6 +13,7 @@
 	import type monaco from 'monaco-editor';
 	import type { Mermaid } from 'mermaid';
 	import { goto } from '$app/navigation';
+	import type { EditorUpdateEvent, Tab } from '$lib/types';
 
 	const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid;
 
@@ -21,7 +22,7 @@
 		code: 'mermaid',
 		config: 'json'
 	};
-	let text: string = '';
+	let text = '';
 	let language: 'mermaid' | 'json' = 'mermaid';
 	let errorMarkers: monaco.editor.IMarkerData[] = [];
 	$: language = languageMap[selectedMode];
@@ -133,7 +134,7 @@
 			<Card title="Diagram" isCloseable={false}>
 				<button
 					slot="actions"
-					class="rounded shadow px-2 bg-indigo-500 hover:bg-indigo-700"
+					class="rounded shadow px-2 bg-indigo-500 hover:bg-indigo-700 hidden"
 					title="View diagram in new page"
 					on:click|stopPropagation={() => viewDiagram()}><i class="far fa-eye" /> View</button>