TodoMVC.svelte

<script>
	const ENTER_KEY = 13;
	const ESCAPE_KEY = 27;
	let currentFilter = 'all';
	let items = [];
	let editing = null;
	try {
		items = JSON.parse(localStorage.getItem('todos-svelte')) || [];
	} catch (err) {
		items = [];
	}
	const updateView = () => {
		currentFilter = 'all';
		if (window.location.hash === '#/active') {
			currentFilter = 'active';
		} else if (window.location.hash === '#/completed') {
			currentFilter = 'completed';
		}
	};
	window.addEventListener('hashchange', updateView);
	updateView();
	function clearCompleted() {
		items = items.filter(item => !item.completed);
	}
	function remove(index) {
		items = items.slice(0, index).concat(items.slice(index + 1));
	}
	function toggleAll(event) {
		items = items.map(item => ({
			id: item.id,
			description: item.description,
			completed: event.target.checked
		}));
	}
	function createNew(event) {
		if (event.which === ENTER_KEY) {
			items = items.concat({
				id: uuid(),
				description: event.target.value,
				completed: false
			});
			event.target.value = '';
		}
	}
	function handleEdit(event) {
		if (event.which === ENTER_KEY) event.target.blur();
		else if (event.which === ESCAPE_KEY) editing = null;
	}
	function submit(event) {
		items[editing].description = event.target.value;
		editing = null;
	}
	function uuid() {
		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
			var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
			return v.toString(16);
		});
	}
	$: filtered = currentFilter === 'all'
		? items
		: currentFilter === 'completed'
			? items.filter(item => item.completed)
			: items.filter(item => !item.completed);
	$: numActive = items.filter(item => !item.completed).length;
	$: numCompleted = items.filter(item => item.completed).length;
	$: try {
		localStorage.setItem('todos-svelte', JSON.stringify(items));
	} catch (err) {
		// noop
	}
</script>

<header class="header">
	<h1>todos</h1>
	<input
		class="new-todo"
		on:keydown={createNew}
		placeholder="What needs to be done?"
		autofocus
	>
</header>

{#if items.length > 0}
	<section class="main">
		<input id="toggle-all" class="toggle-all" type="checkbox" on:change={toggleAll} checked="{numCompleted === items.length}">
		<label for="toggle-all">Mark all as complete</label>

		<ul class="todo-list">
			{#each filtered as item, index (item.id)}
				<li class="{item.completed ? 'completed' : ''} {editing === index ? 'editing' : ''}">
					<div class="view">
						<input class="toggle" type="checkbox" bind:checked={item.completed}>
						<label on:dblclick="{() => editing = index}">{item.description}</label>
						<button on:click="{() => remove(index)}" class="destroy"></button>
					</div>

					{#if editing === index}
						<input
							value='{item.description}'
							id="edit"
							class="edit"
							on:keydown={handleEdit}
							on:blur={submit}
							autofocus
						>
					{/if}
				</li>
			{/each}
		</ul>

		<footer class="footer">
			<span class="todo-count">
				<strong>{numActive}</strong> {numActive === 1 ? 'item' : 'items'} left
			</span>

			<ul class="filters">
				<li><a class="{currentFilter === 'all' ? 'selected' : ''}" href="#/">All</a></li>
				<li><a class="{currentFilter === 'active' ? 'selected' : ''}" href="#/active">Active</a></li>
				<li><a class="{currentFilter === 'completed' ? 'selected' : ''}" href="#/completed">Completed</a></li>
			</ul>

			{#if numCompleted}
				<button class="clear-completed" on:click={clearCompleted}>
					Clear completed
				</button>
			{/if}
		</footer>
	</section>
{/if}