├── .gitignore
├── README.md
├── chart.png
├── compress.js
├── package.json
├── svelte-todomvc
    ├── index.html
    ├── main.js
    ├── package.json
    └── vite.config.js
├── todomvc.svelte
├── todomvc.svelte.hydratable.js
├── todomvc.svelte.hydratable.min.js
├── todomvc.svelte.hydratable.min.js.brotli
├── todomvc.svelte.hydratable.min.js.gz
├── todomvc.svelte.js
├── todomvc.svelte.min.js
├── todomvc.svelte.min.js.brotli
├── todomvc.svelte.min.js.gz
├── todomvc.vue
├── todomvc.vue.js
├── todomvc.vue.min.js
├── todomvc.vue.min.js.brotli
├── todomvc.vue.min.js.gz
├── vue-todomvc
    ├── index.html
    ├── main.js
    ├── package.json
    └── vite.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Comparing generated code size of Vue and Svelte components
 2 | 
 3 | ## TL;DR
 4 | 
 5 | 1. Compiled Svelte component code is **70%** heavier than Vue 3 equivalent, and **110%** heavier in SSR mode.
 6 | 2. It takes ~**19** TodoMVC-sized components (**13** in SSR scenarios) to offset the framework base runtime size difference between Vue and Svelte.
 7 | 
 8 | ## Methodology
 9 | 
10 | 1. Both frameworks are used to implement a single spec-compliant, functionally-equivalent TodoMVC component.
11 | 
12 |    - Vue: [todomvc.vue](./todomvc.vue) (using `<script setup>` syntax)
13 |    - Svelte: [todomvc.svelte](./todomvc.svelte) (based on [the official implementation](https://github.com/sveltejs/svelte-todomvc/blob/master/src/TodoMVC.svelte), removed the `uuid` function for fairness)
14 | 
15 | 2. Components are compiled in isolation using each framework's online SFC compilers
16 | 
17 |    - Vue: [sfc.vuejs.org](https://sfc.vuejs.org/) @3.1.4 -> `todomvc.vue.js`
18 |    - Svelte: [svelte.dev/repl](https://svelte.dev/repl) @3.38.3 -> `todomvc.svelte.js`
19 | 
20 | 3. Compiled files are minified using [Terser REPL](https://try.terser.org/), and then have the ES imports and exports removed. This is because in a bundled app these imports/exports are either not needed or shared between multiple components.
21 | 
22 |    - Vue: `todomvc.vue.min.js`
23 |    - Svelte: `todomvc.svelte.min.js`
24 | 
25 | 4. Minified files are then compressed w/ gzip and brotli.
26 | 
27 |    - Vue: `todomvc.vue.min.js.gz` / `todomvc.vue.min.js.brotli`
28 |    - Svelte: `todomvc.svelte.min.js.gz` / `todomvc.svelte.min.js.brotli`
29 | 
30 | 5. In addition, in an SSR setting, Svelte needs to compile its components in "hydratable" mode, which results in additional generated code. Steps 2-4 are repeated for Svelte with "hydratable: true" compiler options.
31 | 
32 |    Vue produces exactly the same code in SSR settings, but imports some additional hydration-specific runtime code (~0.89kb min+brotli).
33 | 
34 | 6. For each framework, a default Vite app using the component is created and the production build is run (svelte w/ `hydratable: false`). Each app is also built another time using SSR-enabled settings.
35 | 
36 |    The default Vite build splits a vendor chunk (= framework runtime code) and an index chunk (= component code).
37 | 
38 | ## Results
39 | 
40 | |                                   | Vue     | Vue (SSR) | Svelte           | Svelte (SSR)     |
41 | | --------------------------------- | ------- | --------- | ---------------- | ---------------- |
42 | | Source                            | 3.93kb  | -         | 3.31kb           | -                |
43 | | Compiled w/o imports (min)        | 2.73kb  | -         | 5.01kb (183.52%) | 6.59kb (241.39%) |
44 | | Compiled w/o imports (min+gz)     | 1.25kb  | -         | 2.13kb (170.40%) | 2.68kb (214.40%) |
45 | | Compiled w/o imports (min+brotli) | 1.10kb  | -         | 1.88kb (170.91%) | 2.33kb (211.82%) |
46 | | Vite component chunk (min+brotli) | 1.13kb  | -         | 1.95kb (172.26%) | 2.41kb (213.27%) |
47 | | Vite vendor chunk (min+brotli)    | 16.89kb | 17.78kb   | 1.85kb           | 2.13kb           |
48 | 
49 | <img src="./chart.png" width="600px">
50 | 
51 | ## Analysis
52 | 
53 | In client-only mode, the Svelte app imported 1.85kb min+brotli framework code, which is **15.04kb** lighter than Vue. This is the base size difference.
54 | 
55 | However, for the component code, Svelte's min + compressed output size is **~1.7x** of the Vue equivalent. In this case, a single component results in **0.78kb** of size difference. In SSR scenarios, this ratio goes up further to **~2.1x** where a single component results in a **1.23kb** size difference.
56 | 
57 | TodoMVC covers a pretty decent feature range and is generally representative of the components most users build in typical apps. We can reasonably assume that similar size difference would be found in real world scenarios. That is to say, in theory, if an app contains more than 15.04 / 0.78 ~= **19** TodoMVC-sized components, the Svelte app would end up being heavier than the Vue app.
58 | 
59 | This threshold is even lower in SSR scenarios. In SSR mode, the base difference is **15.65kb** but the component count threshold is down to 15.65 / 1.23 ~= **13**!
60 | 
61 | Obviously in real world apps there are many other factors at play: more features would be imported from the frameworks and 3rd party libraries will be used. The size curve would be affected by the percentage of pure component code in a project. However, it would be safe to assume that the more an app is over the 19-components threshold (or 13 in SSR mode, which most non-trivial apps would probably cross), the less likely it is for Svelte to have any real size advantage.
62 | 
63 | ## Takeaways
64 | 
65 | This study isn't meant to show which framework is better - it's strictly focused on analyzing bundle size implications of different framework implementation strategies.
66 | 
67 | As can be seen from the data, the two frameworks have different sweet spots in terms of bundle size - and it depends a lot on what kind of use case you have. Svelte is still great for one-off components (e.g. wrapped as a custom element), but its size is in fact a disadvantage in medium to large scale applications, especially with SSR.
68 | 
69 | In a broader sense, this study is meant to showcase how frameworks are picking different balance points on the compile-time vs. runtime spectrum: Vue performs a decent amount of compile-time optimizations on the source format, but opts for a heavier base runtime in return for smaller generated code. Svelte opts for a minimal runtime but with the cost of heavier generated code. Can Svelte further improve its codegen to reduce code output? Can Vue further improve the tree-shaking to make the baseline smaller? Can another framework find an even better balance point? The answer is probably yes to all of these questions - but as long as we can now acknowledge that "framework size" is a much more nuanced topic than comparing the size of Hello World apps, this study has served its purpose.
70 | 


--------------------------------------------------------------------------------
/chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yyx990803/vue-svelte-size-analysis/7bb60ff681a3f5016e8af26084e72100cd37a876/chart.png


--------------------------------------------------------------------------------
/compress.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const zlib = require('zlib')
 3 | 
 4 | function compress(fw) {
 5 |   const file = `todomvc.${fw}.min.js`
 6 |   const src = fs.readFileSync(file)
 7 |   fs.writeFileSync(`${file}.brotli`, zlib.brotliCompressSync(src))
 8 |   fs.writeFileSync(`${file}.gz`, zlib.gzipSync(src))
 9 | }
10 | 
11 | compress('vue')
12 | compress('svelte')
13 | compress('svelte.hydratable')
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "workspaces": [
4 |     "svelte-todomvc",
5 |     "vue-todomvc"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/svelte-todomvc/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Svelte + Vite App</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="/main.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/svelte-todomvc/main.js:
--------------------------------------------------------------------------------
1 | import App from '../todomvc.svelte'
2 | 
3 | const app = new App({
4 |   target: document.getElementById('app')
5 | })
6 | 
7 | export default app
8 | 


--------------------------------------------------------------------------------
/svelte-todomvc/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.0.0",
 3 |   "name": "svelte-todomvc",
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vite build",
 8 |     "serve": "vite preview"
 9 |   },
10 |   "devDependencies": {
11 |     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.11",
12 |     "svelte": "^3.37.0",
13 |     "vite": "^2.3.8"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/svelte-todomvc/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import { svelte } from '@sveltejs/vite-plugin-svelte'
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [svelte({
 7 |     compilerOptions: {
 8 |       // vite-plugin-svlete compiles in hydratable mode by default
 9 |       hydratable: false
10 |     }
11 |   })]
12 | })
13 | 


--------------------------------------------------------------------------------
/todomvc.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	const ENTER_KEY = 13;
  3 | 	const ESCAPE_KEY = 27;
  4 | 
  5 | 	let currentFilter = 'all';
  6 | 	let items = [];
  7 | 	let editing = null;
  8 | 
  9 | 	try {
 10 | 		items = JSON.parse(localStorage.getItem('todos-svelte')) || [];
 11 | 	} catch (err) {
 12 | 		items = [];
 13 | 	}
 14 | 
 15 | 	const updateView = () => {
 16 | 		currentFilter = 'all';
 17 | 		if (window.location.hash === '#/active') {
 18 | 			currentFilter = 'active';
 19 | 		} else if (window.location.hash === '#/completed') {
 20 | 			currentFilter = 'completed';
 21 | 		}
 22 | 	};
 23 | 
 24 | 	window.addEventListener('hashchange', updateView);
 25 | 	updateView();
 26 | 
 27 | 	function clearCompleted() {
 28 | 		items = items.filter(item => !item.completed);
 29 | 	}
 30 | 
 31 | 	function remove(index) {
 32 | 		items = items.slice(0, index).concat(items.slice(index + 1));
 33 | 	}
 34 | 
 35 | 	function toggleAll(event) {
 36 | 		items = items.map(item => ({
 37 | 			id: item.id,
 38 | 			description: item.description,
 39 | 			completed: event.target.checked
 40 | 		}));
 41 | 	}
 42 | 
 43 | 	function createNew(event) {
 44 | 		if (event.which === ENTER_KEY) {
 45 | 			items = items.concat({
 46 | 				id: Date.now(),
 47 | 				description: event.target.value,
 48 | 				completed: false
 49 | 			});
 50 | 			event.target.value = '';
 51 | 		}
 52 | 	}
 53 | 
 54 | 	function handleEdit(event) {
 55 | 		if (event.which === ENTER_KEY) event.target.blur();
 56 | 		else if (event.which === ESCAPE_KEY) editing = null;
 57 | 	}
 58 | 
 59 | 	function submit(event) {
 60 | 		items[editing].description = event.target.value;
 61 | 		editing = null;
 62 | 	}
 63 | 	
 64 | 	$: filtered = currentFilter === 'all'
 65 | 		? items
 66 | 		: currentFilter === 'completed'
 67 | 			? items.filter(item => item.completed)
 68 | 			: items.filter(item => !item.completed);
 69 | 
 70 | 	$: numActive = items.filter(item => !item.completed).length;
 71 | 	$: numCompleted = items.filter(item => item.completed).length;
 72 | 
 73 | 	$: try {
 74 | 		localStorage.setItem('todos-svelte', JSON.stringify(items));
 75 | 	} catch (err) {
 76 | 		// noop
 77 | 	}
 78 | </script>
 79 | 
 80 | <header class="header">
 81 | 	<h1>todos</h1>
 82 | 	<input
 83 | 		class="new-todo"
 84 | 		on:keydown={createNew}
 85 | 		placeholder="What needs to be done?"
 86 | 		autofocus
 87 | 	>
 88 | </header>
 89 | 
 90 | {#if items.length > 0}
 91 | 	<section class="main">
 92 | 		<input id="toggle-all" class="toggle-all" type="checkbox" on:change={toggleAll} checked="{numCompleted === items.length}">
 93 | 		<label for="toggle-all">Mark all as complete</label>
 94 | 
 95 | 		<ul class="todo-list">
 96 | 			{#each filtered as item, index (item.id)}
 97 | 				<li class="{item.completed ? 'completed' : ''} {editing === index ? 'editing' : ''}">
 98 | 					<div class="view">
 99 | 						<input class="toggle" type="checkbox" bind:checked={item.completed}>
100 | 						<label on:dblclick="{() => editing = index}">{item.description}</label>
101 | 						<button on:click="{() => remove(index)}" class="destroy"></button>
102 | 					</div>
103 | 
104 | 					{#if editing === index}
105 | 						<input
106 | 							value='{item.description}'
107 | 							id="edit"
108 | 							class="edit"
109 | 							on:keydown={handleEdit}
110 | 							on:blur={submit}
111 | 							autofocus
112 | 						>
113 | 					{/if}
114 | 				</li>
115 | 			{/each}
116 | 		</ul>
117 | 
118 | 		<footer class="footer">
119 | 			<span class="todo-count">
120 | 				<strong>{numActive}</strong> {numActive === 1 ? 'item' : 'items'} left
121 | 			</span>
122 | 
123 | 			<ul class="filters">
124 | 				<li><a class="{currentFilter === 'all' ? 'selected' : ''}" href="#/">All</a></li>
125 | 				<li><a class="{currentFilter === 'active' ? 'selected' : ''}" href="#/active">Active</a></li>
126 | 				<li><a class="{currentFilter === 'completed' ? 'selected' : ''}" href="#/completed">Completed</a></li>
127 | 			</ul>
128 | 
129 | 			{#if numCompleted}
130 | 				<button class="clear-completed" on:click={clearCompleted}>
131 | 					Clear completed
132 | 				</button>
133 | 			{/if}
134 | 		</footer>
135 | 	</section>
136 | {/if}


--------------------------------------------------------------------------------
/todomvc.svelte.hydratable.js:
--------------------------------------------------------------------------------
  1 | /* App.svelte generated by Svelte v3.38.3 */
  2 | import {
  3 | 	SvelteComponent,
  4 | 	append,
  5 | 	attr,
  6 | 	children,
  7 | 	claim_element,
  8 | 	claim_space,
  9 | 	claim_text,
 10 | 	destroy_block,
 11 | 	detach,
 12 | 	element,
 13 | 	empty,
 14 | 	init,
 15 | 	insert,
 16 | 	listen,
 17 | 	noop,
 18 | 	run_all,
 19 | 	safe_not_equal,
 20 | 	set_data,
 21 | 	space,
 22 | 	text,
 23 | 	update_keyed_each
 24 | } from "svelte/internal";
 25 | 
 26 | function get_each_context(ctx, list, i) {
 27 | 	const child_ctx = ctx.slice();
 28 | 	child_ctx[16] = list[i];
 29 | 	child_ctx[17] = list;
 30 | 	child_ctx[18] = i;
 31 | 	return child_ctx;
 32 | }
 33 | 
 34 | // (90:0) {#if items.length > 0}
 35 | function create_if_block(ctx) {
 36 | 	let section;
 37 | 	let input;
 38 | 	let input_checked_value;
 39 | 	let t0;
 40 | 	let label;
 41 | 	let t1;
 42 | 	let t2;
 43 | 	let ul0;
 44 | 	let each_blocks = [];
 45 | 	let each_1_lookup = new Map();
 46 | 	let t3;
 47 | 	let footer;
 48 | 	let span;
 49 | 	let strong;
 50 | 	let t4;
 51 | 	let t5;
 52 | 	let t6_value = (/*numActive*/ ctx[4] === 1 ? "item" : "items") + "";
 53 | 	let t6;
 54 | 	let t7;
 55 | 	let t8;
 56 | 	let ul1;
 57 | 	let li0;
 58 | 	let a0;
 59 | 	let t9;
 60 | 	let a0_class_value;
 61 | 	let t10;
 62 | 	let li1;
 63 | 	let a1;
 64 | 	let t11;
 65 | 	let a1_class_value;
 66 | 	let t12;
 67 | 	let li2;
 68 | 	let a2;
 69 | 	let t13;
 70 | 	let a2_class_value;
 71 | 	let t14;
 72 | 	let mounted;
 73 | 	let dispose;
 74 | 	let each_value = /*filtered*/ ctx[3];
 75 | 	const get_key = ctx => /*item*/ ctx[16].id;
 76 | 
 77 | 	for (let i = 0; i < each_value.length; i += 1) {
 78 | 		let child_ctx = get_each_context(ctx, each_value, i);
 79 | 		let key = get_key(child_ctx);
 80 | 		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
 81 | 	}
 82 | 
 83 | 	let if_block = /*numCompleted*/ ctx[5] && create_if_block_1(ctx);
 84 | 
 85 | 	return {
 86 | 		c() {
 87 | 			section = element("section");
 88 | 			input = element("input");
 89 | 			t0 = space();
 90 | 			label = element("label");
 91 | 			t1 = text("Mark all as complete");
 92 | 			t2 = space();
 93 | 			ul0 = element("ul");
 94 | 
 95 | 			for (let i = 0; i < each_blocks.length; i += 1) {
 96 | 				each_blocks[i].c();
 97 | 			}
 98 | 
 99 | 			t3 = space();
100 | 			footer = element("footer");
101 | 			span = element("span");
102 | 			strong = element("strong");
103 | 			t4 = text(/*numActive*/ ctx[4]);
104 | 			t5 = space();
105 | 			t6 = text(t6_value);
106 | 			t7 = text(" left");
107 | 			t8 = space();
108 | 			ul1 = element("ul");
109 | 			li0 = element("li");
110 | 			a0 = element("a");
111 | 			t9 = text("All");
112 | 			t10 = space();
113 | 			li1 = element("li");
114 | 			a1 = element("a");
115 | 			t11 = text("Active");
116 | 			t12 = space();
117 | 			li2 = element("li");
118 | 			a2 = element("a");
119 | 			t13 = text("Completed");
120 | 			t14 = space();
121 | 			if (if_block) if_block.c();
122 | 			this.h();
123 | 		},
124 | 		l(nodes) {
125 | 			section = claim_element(nodes, "SECTION", { class: true });
126 | 			var section_nodes = children(section);
127 | 			input = claim_element(section_nodes, "INPUT", { id: true, class: true, type: true });
128 | 			t0 = claim_space(section_nodes);
129 | 			label = claim_element(section_nodes, "LABEL", { for: true });
130 | 			var label_nodes = children(label);
131 | 			t1 = claim_text(label_nodes, "Mark all as complete");
132 | 			label_nodes.forEach(detach);
133 | 			t2 = claim_space(section_nodes);
134 | 			ul0 = claim_element(section_nodes, "UL", { class: true });
135 | 			var ul0_nodes = children(ul0);
136 | 
137 | 			for (let i = 0; i < each_blocks.length; i += 1) {
138 | 				each_blocks[i].l(ul0_nodes);
139 | 			}
140 | 
141 | 			ul0_nodes.forEach(detach);
142 | 			t3 = claim_space(section_nodes);
143 | 			footer = claim_element(section_nodes, "FOOTER", { class: true });
144 | 			var footer_nodes = children(footer);
145 | 			span = claim_element(footer_nodes, "SPAN", { class: true });
146 | 			var span_nodes = children(span);
147 | 			strong = claim_element(span_nodes, "STRONG", {});
148 | 			var strong_nodes = children(strong);
149 | 			t4 = claim_text(strong_nodes, /*numActive*/ ctx[4]);
150 | 			strong_nodes.forEach(detach);
151 | 			t5 = claim_space(span_nodes);
152 | 			t6 = claim_text(span_nodes, t6_value);
153 | 			t7 = claim_text(span_nodes, " left");
154 | 			span_nodes.forEach(detach);
155 | 			t8 = claim_space(footer_nodes);
156 | 			ul1 = claim_element(footer_nodes, "UL", { class: true });
157 | 			var ul1_nodes = children(ul1);
158 | 			li0 = claim_element(ul1_nodes, "LI", {});
159 | 			var li0_nodes = children(li0);
160 | 			a0 = claim_element(li0_nodes, "A", { class: true, href: true });
161 | 			var a0_nodes = children(a0);
162 | 			t9 = claim_text(a0_nodes, "All");
163 | 			a0_nodes.forEach(detach);
164 | 			li0_nodes.forEach(detach);
165 | 			t10 = claim_space(ul1_nodes);
166 | 			li1 = claim_element(ul1_nodes, "LI", {});
167 | 			var li1_nodes = children(li1);
168 | 			a1 = claim_element(li1_nodes, "A", { class: true, href: true });
169 | 			var a1_nodes = children(a1);
170 | 			t11 = claim_text(a1_nodes, "Active");
171 | 			a1_nodes.forEach(detach);
172 | 			li1_nodes.forEach(detach);
173 | 			t12 = claim_space(ul1_nodes);
174 | 			li2 = claim_element(ul1_nodes, "LI", {});
175 | 			var li2_nodes = children(li2);
176 | 			a2 = claim_element(li2_nodes, "A", { class: true, href: true });
177 | 			var a2_nodes = children(a2);
178 | 			t13 = claim_text(a2_nodes, "Completed");
179 | 			a2_nodes.forEach(detach);
180 | 			li2_nodes.forEach(detach);
181 | 			ul1_nodes.forEach(detach);
182 | 			t14 = claim_space(footer_nodes);
183 | 			if (if_block) if_block.l(footer_nodes);
184 | 			footer_nodes.forEach(detach);
185 | 			section_nodes.forEach(detach);
186 | 			this.h();
187 | 		},
188 | 		h() {
189 | 			attr(input, "id", "toggle-all");
190 | 			attr(input, "class", "toggle-all");
191 | 			attr(input, "type", "checkbox");
192 | 			input.checked = input_checked_value = /*numCompleted*/ ctx[5] === /*items*/ ctx[1].length;
193 | 			attr(label, "for", "toggle-all");
194 | 			attr(ul0, "class", "todo-list");
195 | 			attr(span, "class", "todo-count");
196 | 			attr(a0, "class", a0_class_value = /*currentFilter*/ ctx[0] === "all" ? "selected" : "");
197 | 			attr(a0, "href", "#/");
198 | 			attr(a1, "class", a1_class_value = /*currentFilter*/ ctx[0] === "active" ? "selected" : "");
199 | 			attr(a1, "href", "#/active");
200 | 
201 | 			attr(a2, "class", a2_class_value = /*currentFilter*/ ctx[0] === "completed"
202 | 			? "selected"
203 | 			: "");
204 | 
205 | 			attr(a2, "href", "#/completed");
206 | 			attr(ul1, "class", "filters");
207 | 			attr(footer, "class", "footer");
208 | 			attr(section, "class", "main");
209 | 		},
210 | 		m(target, anchor) {
211 | 			insert(target, section, anchor);
212 | 			append(section, input);
213 | 			append(section, t0);
214 | 			append(section, label);
215 | 			append(label, t1);
216 | 			append(section, t2);
217 | 			append(section, ul0);
218 | 
219 | 			for (let i = 0; i < each_blocks.length; i += 1) {
220 | 				each_blocks[i].m(ul0, null);
221 | 			}
222 | 
223 | 			append(section, t3);
224 | 			append(section, footer);
225 | 			append(footer, span);
226 | 			append(span, strong);
227 | 			append(strong, t4);
228 | 			append(span, t5);
229 | 			append(span, t6);
230 | 			append(span, t7);
231 | 			append(footer, t8);
232 | 			append(footer, ul1);
233 | 			append(ul1, li0);
234 | 			append(li0, a0);
235 | 			append(a0, t9);
236 | 			append(ul1, t10);
237 | 			append(ul1, li1);
238 | 			append(li1, a1);
239 | 			append(a1, t11);
240 | 			append(ul1, t12);
241 | 			append(ul1, li2);
242 | 			append(li2, a2);
243 | 			append(a2, t13);
244 | 			append(footer, t14);
245 | 			if (if_block) if_block.m(footer, null);
246 | 
247 | 			if (!mounted) {
248 | 				dispose = listen(input, "change", /*toggleAll*/ ctx[8]);
249 | 				mounted = true;
250 | 			}
251 | 		},
252 | 		p(ctx, dirty) {
253 | 			if (dirty & /*numCompleted, items*/ 34 && input_checked_value !== (input_checked_value = /*numCompleted*/ ctx[5] === /*items*/ ctx[1].length)) {
254 | 				input.checked = input_checked_value;
255 | 			}
256 | 
257 | 			if (dirty & /*filtered, editing, handleEdit, submit, remove*/ 3212) {
258 | 				each_value = /*filtered*/ ctx[3];
259 | 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul0, destroy_block, create_each_block, null, get_each_context);
260 | 			}
261 | 
262 | 			if (dirty & /*numActive*/ 16) set_data(t4, /*numActive*/ ctx[4]);
263 | 			if (dirty & /*numActive*/ 16 && t6_value !== (t6_value = (/*numActive*/ ctx[4] === 1 ? "item" : "items") + "")) set_data(t6, t6_value);
264 | 
265 | 			if (dirty & /*currentFilter*/ 1 && a0_class_value !== (a0_class_value = /*currentFilter*/ ctx[0] === "all" ? "selected" : "")) {
266 | 				attr(a0, "class", a0_class_value);
267 | 			}
268 | 
269 | 			if (dirty & /*currentFilter*/ 1 && a1_class_value !== (a1_class_value = /*currentFilter*/ ctx[0] === "active" ? "selected" : "")) {
270 | 				attr(a1, "class", a1_class_value);
271 | 			}
272 | 
273 | 			if (dirty & /*currentFilter*/ 1 && a2_class_value !== (a2_class_value = /*currentFilter*/ ctx[0] === "completed"
274 | 			? "selected"
275 | 			: "")) {
276 | 				attr(a2, "class", a2_class_value);
277 | 			}
278 | 
279 | 			if (/*numCompleted*/ ctx[5]) {
280 | 				if (if_block) {
281 | 					if_block.p(ctx, dirty);
282 | 				} else {
283 | 					if_block = create_if_block_1(ctx);
284 | 					if_block.c();
285 | 					if_block.m(footer, null);
286 | 				}
287 | 			} else if (if_block) {
288 | 				if_block.d(1);
289 | 				if_block = null;
290 | 			}
291 | 		},
292 | 		d(detaching) {
293 | 			if (detaching) detach(section);
294 | 
295 | 			for (let i = 0; i < each_blocks.length; i += 1) {
296 | 				each_blocks[i].d();
297 | 			}
298 | 
299 | 			if (if_block) if_block.d();
300 | 			mounted = false;
301 | 			dispose();
302 | 		}
303 | 	};
304 | }
305 | 
306 | // (104:5) {#if editing === index}
307 | function create_if_block_2(ctx) {
308 | 	let input;
309 | 	let input_value_value;
310 | 	let mounted;
311 | 	let dispose;
312 | 
313 | 	return {
314 | 		c() {
315 | 			input = element("input");
316 | 			this.h();
317 | 		},
318 | 		l(nodes) {
319 | 			input = claim_element(nodes, "INPUT", { id: true, class: true });
320 | 			this.h();
321 | 		},
322 | 		h() {
323 | 			input.value = input_value_value = /*item*/ ctx[16].description;
324 | 			attr(input, "id", "edit");
325 | 			attr(input, "class", "edit");
326 | 			input.autofocus = true;
327 | 		},
328 | 		m(target, anchor) {
329 | 			insert(target, input, anchor);
330 | 			input.focus();
331 | 
332 | 			if (!mounted) {
333 | 				dispose = [
334 | 					listen(input, "keydown", /*handleEdit*/ ctx[10]),
335 | 					listen(input, "blur", /*submit*/ ctx[11])
336 | 				];
337 | 
338 | 				mounted = true;
339 | 			}
340 | 		},
341 | 		p(ctx, dirty) {
342 | 			if (dirty & /*filtered*/ 8 && input_value_value !== (input_value_value = /*item*/ ctx[16].description) && input.value !== input_value_value) {
343 | 				input.value = input_value_value;
344 | 			}
345 | 		},
346 | 		d(detaching) {
347 | 			if (detaching) detach(input);
348 | 			mounted = false;
349 | 			run_all(dispose);
350 | 		}
351 | 	};
352 | }
353 | 
354 | // (96:3) {#each filtered as item, index (item.id)}
355 | function create_each_block(key_1, ctx) {
356 | 	let li;
357 | 	let div;
358 | 	let input;
359 | 	let t0;
360 | 	let label;
361 | 	let t1_value = /*item*/ ctx[16].description + "";
362 | 	let t1;
363 | 	let t2;
364 | 	let button;
365 | 	let t3;
366 | 	let t4;
367 | 	let li_class_value;
368 | 	let mounted;
369 | 	let dispose;
370 | 
371 | 	function input_change_handler() {
372 | 		/*input_change_handler*/ ctx[12].call(input, /*each_value*/ ctx[17], /*index*/ ctx[18]);
373 | 	}
374 | 
375 | 	function dblclick_handler() {
376 | 		return /*dblclick_handler*/ ctx[13](/*index*/ ctx[18]);
377 | 	}
378 | 
379 | 	function click_handler() {
380 | 		return /*click_handler*/ ctx[14](/*index*/ ctx[18]);
381 | 	}
382 | 
383 | 	let if_block = /*editing*/ ctx[2] === /*index*/ ctx[18] && create_if_block_2(ctx);
384 | 
385 | 	return {
386 | 		key: key_1,
387 | 		first: null,
388 | 		c() {
389 | 			li = element("li");
390 | 			div = element("div");
391 | 			input = element("input");
392 | 			t0 = space();
393 | 			label = element("label");
394 | 			t1 = text(t1_value);
395 | 			t2 = space();
396 | 			button = element("button");
397 | 			t3 = space();
398 | 			if (if_block) if_block.c();
399 | 			t4 = space();
400 | 			this.h();
401 | 		},
402 | 		l(nodes) {
403 | 			li = claim_element(nodes, "LI", { class: true });
404 | 			var li_nodes = children(li);
405 | 			div = claim_element(li_nodes, "DIV", { class: true });
406 | 			var div_nodes = children(div);
407 | 			input = claim_element(div_nodes, "INPUT", { class: true, type: true });
408 | 			t0 = claim_space(div_nodes);
409 | 			label = claim_element(div_nodes, "LABEL", {});
410 | 			var label_nodes = children(label);
411 | 			t1 = claim_text(label_nodes, t1_value);
412 | 			label_nodes.forEach(detach);
413 | 			t2 = claim_space(div_nodes);
414 | 			button = claim_element(div_nodes, "BUTTON", { class: true });
415 | 			children(button).forEach(detach);
416 | 			div_nodes.forEach(detach);
417 | 			t3 = claim_space(li_nodes);
418 | 			if (if_block) if_block.l(li_nodes);
419 | 			t4 = claim_space(li_nodes);
420 | 			li_nodes.forEach(detach);
421 | 			this.h();
422 | 		},
423 | 		h() {
424 | 			attr(input, "class", "toggle");
425 | 			attr(input, "type", "checkbox");
426 | 			attr(button, "class", "destroy");
427 | 			attr(div, "class", "view");
428 | 
429 | 			attr(li, "class", li_class_value = "" + ((/*item*/ ctx[16].completed ? "completed" : "") + " " + (/*editing*/ ctx[2] === /*index*/ ctx[18]
430 | 			? "editing"
431 | 			: "")));
432 | 
433 | 			this.first = li;
434 | 		},
435 | 		m(target, anchor) {
436 | 			insert(target, li, anchor);
437 | 			append(li, div);
438 | 			append(div, input);
439 | 			input.checked = /*item*/ ctx[16].completed;
440 | 			append(div, t0);
441 | 			append(div, label);
442 | 			append(label, t1);
443 | 			append(div, t2);
444 | 			append(div, button);
445 | 			append(li, t3);
446 | 			if (if_block) if_block.m(li, null);
447 | 			append(li, t4);
448 | 
449 | 			if (!mounted) {
450 | 				dispose = [
451 | 					listen(input, "change", input_change_handler),
452 | 					listen(label, "dblclick", dblclick_handler),
453 | 					listen(button, "click", click_handler)
454 | 				];
455 | 
456 | 				mounted = true;
457 | 			}
458 | 		},
459 | 		p(new_ctx, dirty) {
460 | 			ctx = new_ctx;
461 | 
462 | 			if (dirty & /*filtered*/ 8) {
463 | 				input.checked = /*item*/ ctx[16].completed;
464 | 			}
465 | 
466 | 			if (dirty & /*filtered*/ 8 && t1_value !== (t1_value = /*item*/ ctx[16].description + "")) set_data(t1, t1_value);
467 | 
468 | 			if (/*editing*/ ctx[2] === /*index*/ ctx[18]) {
469 | 				if (if_block) {
470 | 					if_block.p(ctx, dirty);
471 | 				} else {
472 | 					if_block = create_if_block_2(ctx);
473 | 					if_block.c();
474 | 					if_block.m(li, t4);
475 | 				}
476 | 			} else if (if_block) {
477 | 				if_block.d(1);
478 | 				if_block = null;
479 | 			}
480 | 
481 | 			if (dirty & /*filtered, editing*/ 12 && li_class_value !== (li_class_value = "" + ((/*item*/ ctx[16].completed ? "completed" : "") + " " + (/*editing*/ ctx[2] === /*index*/ ctx[18]
482 | 			? "editing"
483 | 			: "")))) {
484 | 				attr(li, "class", li_class_value);
485 | 			}
486 | 		},
487 | 		d(detaching) {
488 | 			if (detaching) detach(li);
489 | 			if (if_block) if_block.d();
490 | 			mounted = false;
491 | 			run_all(dispose);
492 | 		}
493 | 	};
494 | }
495 | 
496 | // (129:3) {#if numCompleted}
497 | function create_if_block_1(ctx) {
498 | 	let button;
499 | 	let t;
500 | 	let mounted;
501 | 	let dispose;
502 | 
503 | 	return {
504 | 		c() {
505 | 			button = element("button");
506 | 			t = text("Clear completed");
507 | 			this.h();
508 | 		},
509 | 		l(nodes) {
510 | 			button = claim_element(nodes, "BUTTON", { class: true });
511 | 			var button_nodes = children(button);
512 | 			t = claim_text(button_nodes, "Clear completed");
513 | 			button_nodes.forEach(detach);
514 | 			this.h();
515 | 		},
516 | 		h() {
517 | 			attr(button, "class", "clear-completed");
518 | 		},
519 | 		m(target, anchor) {
520 | 			insert(target, button, anchor);
521 | 			append(button, t);
522 | 
523 | 			if (!mounted) {
524 | 				dispose = listen(button, "click", /*clearCompleted*/ ctx[6]);
525 | 				mounted = true;
526 | 			}
527 | 		},
528 | 		p: noop,
529 | 		d(detaching) {
530 | 			if (detaching) detach(button);
531 | 			mounted = false;
532 | 			dispose();
533 | 		}
534 | 	};
535 | }
536 | 
537 | function create_fragment(ctx) {
538 | 	let header;
539 | 	let h1;
540 | 	let t0;
541 | 	let t1;
542 | 	let input;
543 | 	let t2;
544 | 	let if_block_anchor;
545 | 	let mounted;
546 | 	let dispose;
547 | 	let if_block = /*items*/ ctx[1].length > 0 && create_if_block(ctx);
548 | 
549 | 	return {
550 | 		c() {
551 | 			header = element("header");
552 | 			h1 = element("h1");
553 | 			t0 = text("todos");
554 | 			t1 = space();
555 | 			input = element("input");
556 | 			t2 = space();
557 | 			if (if_block) if_block.c();
558 | 			if_block_anchor = empty();
559 | 			this.h();
560 | 		},
561 | 		l(nodes) {
562 | 			header = claim_element(nodes, "HEADER", { class: true });
563 | 			var header_nodes = children(header);
564 | 			h1 = claim_element(header_nodes, "H1", {});
565 | 			var h1_nodes = children(h1);
566 | 			t0 = claim_text(h1_nodes, "todos");
567 | 			h1_nodes.forEach(detach);
568 | 			t1 = claim_space(header_nodes);
569 | 			input = claim_element(header_nodes, "INPUT", { class: true, placeholder: true });
570 | 			header_nodes.forEach(detach);
571 | 			t2 = claim_space(nodes);
572 | 			if (if_block) if_block.l(nodes);
573 | 			if_block_anchor = empty();
574 | 			this.h();
575 | 		},
576 | 		h() {
577 | 			attr(input, "class", "new-todo");
578 | 			attr(input, "placeholder", "What needs to be done?");
579 | 			input.autofocus = true;
580 | 			attr(header, "class", "header");
581 | 		},
582 | 		m(target, anchor) {
583 | 			insert(target, header, anchor);
584 | 			append(header, h1);
585 | 			append(h1, t0);
586 | 			append(header, t1);
587 | 			append(header, input);
588 | 			insert(target, t2, anchor);
589 | 			if (if_block) if_block.m(target, anchor);
590 | 			insert(target, if_block_anchor, anchor);
591 | 			input.focus();
592 | 
593 | 			if (!mounted) {
594 | 				dispose = listen(input, "keydown", /*createNew*/ ctx[9]);
595 | 				mounted = true;
596 | 			}
597 | 		},
598 | 		p(ctx, [dirty]) {
599 | 			if (/*items*/ ctx[1].length > 0) {
600 | 				if (if_block) {
601 | 					if_block.p(ctx, dirty);
602 | 				} else {
603 | 					if_block = create_if_block(ctx);
604 | 					if_block.c();
605 | 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
606 | 				}
607 | 			} else if (if_block) {
608 | 				if_block.d(1);
609 | 				if_block = null;
610 | 			}
611 | 		},
612 | 		i: noop,
613 | 		o: noop,
614 | 		d(detaching) {
615 | 			if (detaching) detach(header);
616 | 			if (detaching) detach(t2);
617 | 			if (if_block) if_block.d(detaching);
618 | 			if (detaching) detach(if_block_anchor);
619 | 			mounted = false;
620 | 			dispose();
621 | 		}
622 | 	};
623 | }
624 | 
625 | const ENTER_KEY = 13;
626 | const ESCAPE_KEY = 27;
627 | 
628 | function instance($$self, $$props, $$invalidate) {
629 | 	let filtered;
630 | 	let numActive;
631 | 	let numCompleted;
632 | 	let currentFilter = "all";
633 | 	let items = [];
634 | 	let editing = null;
635 | 
636 | 	try {
637 | 		items = JSON.parse(localStorage.getItem("todos-svelte")) || [];
638 | 	} catch(err) {
639 | 		items = [];
640 | 	}
641 | 
642 | 	const updateView = () => {
643 | 		$$invalidate(0, currentFilter = "all");
644 | 
645 | 		if (window.location.hash === "#/active") {
646 | 			$$invalidate(0, currentFilter = "active");
647 | 		} else if (window.location.hash === "#/completed") {
648 | 			$$invalidate(0, currentFilter = "completed");
649 | 		}
650 | 	};
651 | 
652 | 	window.addEventListener("hashchange", updateView);
653 | 	updateView();
654 | 
655 | 	function clearCompleted() {
656 | 		$$invalidate(1, items = items.filter(item => !item.completed));
657 | 	}
658 | 
659 | 	function remove(index) {
660 | 		$$invalidate(1, items = items.slice(0, index).concat(items.slice(index + 1)));
661 | 	}
662 | 
663 | 	function toggleAll(event) {
664 | 		$$invalidate(1, items = items.map(item => ({
665 | 			id: item.id,
666 | 			description: item.description,
667 | 			completed: event.target.checked
668 | 		})));
669 | 	}
670 | 
671 | 	function createNew(event) {
672 | 		if (event.which === ENTER_KEY) {
673 | 			$$invalidate(1, items = items.concat({
674 | 				id: Date.now(),
675 | 				description: event.target.value,
676 | 				completed: false
677 | 			}));
678 | 
679 | 			event.target.value = "";
680 | 		}
681 | 	}
682 | 
683 | 	function handleEdit(event) {
684 | 		if (event.which === ENTER_KEY) event.target.blur(); else if (event.which === ESCAPE_KEY) $$invalidate(2, editing = null);
685 | 	}
686 | 
687 | 	function submit(event) {
688 | 		$$invalidate(1, items[editing].description = event.target.value, items);
689 | 		$$invalidate(2, editing = null);
690 | 	}
691 | 
692 | 	function input_change_handler(each_value, index) {
693 | 		each_value[index].completed = this.checked;
694 | 		(($$invalidate(3, filtered), $$invalidate(0, currentFilter)), $$invalidate(1, items));
695 | 	}
696 | 
697 | 	const dblclick_handler = index => $$invalidate(2, editing = index);
698 | 	const click_handler = index => remove(index);
699 | 
700 | 	$$self.$$.update = () => {
701 | 		if ($$self.$$.dirty & /*currentFilter, items*/ 3) {
702 | 			$: $$invalidate(3, filtered = currentFilter === "all"
703 | 			? items
704 | 			: currentFilter === "completed"
705 | 				? items.filter(item => item.completed)
706 | 				: items.filter(item => !item.completed));
707 | 		}
708 | 
709 | 		if ($$self.$$.dirty & /*items*/ 2) {
710 | 			$: $$invalidate(4, numActive = items.filter(item => !item.completed).length);
711 | 		}
712 | 
713 | 		if ($$self.$$.dirty & /*items*/ 2) {
714 | 			$: $$invalidate(5, numCompleted = items.filter(item => item.completed).length);
715 | 		}
716 | 
717 | 		if ($$self.$$.dirty & /*items*/ 2) {
718 | 			$: try {
719 | 				localStorage.setItem("todos-svelte", JSON.stringify(items));
720 | 			} catch(err) {
721 | 				
722 | 			} // noop
723 | 		}
724 | 	};
725 | 
726 | 	return [
727 | 		currentFilter,
728 | 		items,
729 | 		editing,
730 | 		filtered,
731 | 		numActive,
732 | 		numCompleted,
733 | 		clearCompleted,
734 | 		remove,
735 | 		toggleAll,
736 | 		createNew,
737 | 		handleEdit,
738 | 		submit,
739 | 		input_change_handler,
740 | 		dblclick_handler,
741 | 		click_handler
742 | 	];
743 | }
744 | 
745 | class App extends SvelteComponent {
746 | 	constructor(options) {
747 | 		super();
748 | 		init(this, options, instance, create_fragment, safe_not_equal, {});
749 | 	}
750 | }
751 | 
752 | export default App;


--------------------------------------------------------------------------------
/todomvc.svelte.hydratable.min.js:
--------------------------------------------------------------------------------
1 | function y(e,l,t){const c=e.slice();return c[16]=l[t],c[17]=l,c[18]=t,c}function I(e){let d,h,p,m,v,I,N,T,b,$,O,U,S,C,P,x,B,D,M,R,H,J,F,G,V,W,j,q,z,K,Q,X,Y,Z,_,ee=[],le=new Map,te=1===e[4]?"item":"items",ce=e[3];const ae=e=>e[16].id;for(let l=0;l<ce.length;l+=1){let t=y(e,ce,l),c=ae(t);le.set(c,ee[l]=A(c,t))}let se=e[5]&&L(e);return{c(){d=n("section"),h=n("input"),m=E(),v=n("label"),I=k("Mark all as complete"),N=E(),T=n("ul");for(let e=0;e<ee.length;e+=1)ee[e].c();b=E(),$=n("footer"),O=n("span"),U=n("strong"),S=k(e[4]),C=E(),P=k(te),x=k(" left"),B=E(),D=n("ul"),M=n("li"),R=n("a"),H=k("All"),F=E(),G=n("li"),V=n("a"),W=k("Active"),q=E(),z=n("li"),K=n("a"),Q=k("Completed"),Y=E(),se&&se.c(),this.h()},l(l){d=a(l,"SECTION",{class:!0});var t=c(d);h=a(t,"INPUT",{id:!0,class:!0,type:!0}),m=s(t),v=a(t,"LABEL",{for:!0});var r=c(v);I=o(r,"Mark all as complete"),r.forEach(i),N=s(t),T=a(t,"UL",{class:!0});var n=c(T);for(let e=0;e<ee.length;e+=1)ee[e].l(n);n.forEach(i),b=s(t),$=a(t,"FOOTER",{class:!0});var f=c($);O=a(f,"SPAN",{class:!0});var u=c(O);U=a(u,"STRONG",{});var p=c(U);S=o(p,e[4]),p.forEach(i),C=s(u),P=o(u,te),x=o(u," left"),u.forEach(i),B=s(f),D=a(f,"UL",{class:!0});var g=c(D);M=a(g,"LI",{});var E=c(M);R=a(E,"A",{class:!0,href:!0});var k=c(R);H=o(k,"All"),k.forEach(i),E.forEach(i),F=s(g),G=a(g,"LI",{});var w=c(G);V=a(w,"A",{class:!0,href:!0});var y=c(V);W=o(y,"Active"),y.forEach(i),w.forEach(i),q=s(g),z=a(g,"LI",{});var A=c(z);K=a(A,"A",{class:!0,href:!0});var L=c(K);Q=o(L,"Completed"),L.forEach(i),A.forEach(i),g.forEach(i),Y=s(f),se&&se.l(f),f.forEach(i),t.forEach(i),this.h()},h(){t(h,"id","toggle-all"),t(h,"class","toggle-all"),t(h,"type","checkbox"),h.checked=p=e[5]===e[1].length,t(v,"for","toggle-all"),t(T,"class","todo-list"),t(O,"class","todo-count"),t(R,"class",J="all"===e[0]?"selected":""),t(R,"href","#/"),t(V,"class",j="active"===e[0]?"selected":""),t(V,"href","#/active"),t(K,"class",X="completed"===e[0]?"selected":""),t(K,"href","#/completed"),t(D,"class","filters"),t($,"class","footer"),t(d,"class","main")},m(t,c){f(t,d,c),l(d,h),l(d,m),l(d,v),l(v,I),l(d,N),l(d,T);for(let e=0;e<ee.length;e+=1)ee[e].m(T,null);l(d,b),l(d,$),l($,O),l(O,U),l(U,S),l(O,C),l(O,P),l(O,x),l($,B),l($,D),l(D,M),l(M,R),l(R,H),l(D,F),l(D,G),l(G,V),l(V,W),l(D,q),l(D,z),l(z,K),l(K,Q),l($,Y),se&&se.m($,null),Z||(_=u(h,"change",e[8]),Z=!0)},p(e,l){34&l&&p!==(p=e[5]===e[1].length)&&(h.checked=p),3212&l&&(ce=e[3],ee=w(ee,l,ae,1,e,ce,le,T,r,A,null,y)),16&l&&g(S,e[4]),16&l&&te!==(te=1===e[4]?"item":"items")&&g(P,te),1&l&&J!==(J="all"===e[0]?"selected":"")&&t(R,"class",J),1&l&&j!==(j="active"===e[0]?"selected":"")&&t(V,"class",j),1&l&&X!==(X="completed"===e[0]?"selected":"")&&t(K,"class",X),e[5]?se?se.p(e,l):(se=L(e),se.c(),se.m($,null)):se&&(se.d(1),se=null)},d(e){e&&i(d);for(let e=0;e<ee.length;e+=1)ee[e].d();se&&se.d(),Z=!1,_()}}}function N(e){let l,c,s,o;return{c(){l=n("input"),this.h()},l(e){l=a(e,"INPUT",{id:!0,class:!0}),this.h()},h(){l.value=c=e[16].description,t(l,"id","edit"),t(l,"class","edit"),l.autofocus=!0},m(t,c){f(t,l,c),l.focus(),s||(o=[u(l,"keydown",e[10]),u(l,"blur",e[11])],s=!0)},p(e,t){8&t&&c!==(c=e[16].description)&&l.value!==c&&(l.value=c)},d(e){e&&i(l),s=!1,m(o)}}}function A(e,r){let d,h,p,v,w,y,I,A,L,T,b,$,O,U=r[16].description+"";function S(){r[12].call(p,r[17],r[18])}function C(){return r[13](r[18])}function P(){return r[14](r[18])}let x=r[2]===r[18]&&N(r);return{key:e,first:null,c(){d=n("li"),h=n("div"),p=n("input"),v=E(),w=n("label"),y=k(U),I=E(),A=n("button"),L=E(),x&&x.c(),T=E(),this.h()},l(e){d=a(e,"LI",{class:!0});var l=c(d);h=a(l,"DIV",{class:!0});var t=c(h);p=a(t,"INPUT",{class:!0,type:!0}),v=s(t),w=a(t,"LABEL",{});var r=c(w);y=o(r,U),r.forEach(i),I=s(t),A=a(t,"BUTTON",{class:!0}),c(A).forEach(i),t.forEach(i),L=s(l),x&&x.l(l),T=s(l),l.forEach(i),this.h()},h(){t(p,"class","toggle"),t(p,"type","checkbox"),t(A,"class","destroy"),t(h,"class","view"),t(d,"class",b=(r[16].completed?"completed":"")+" "+(r[2]===r[18]?"editing":"")),this.first=d},m(e,t){f(e,d,t),l(d,h),l(h,p),p.checked=r[16].completed,l(h,v),l(h,w),l(w,y),l(h,I),l(h,A),l(d,L),x&&x.m(d,null),l(d,T),$||(O=[u(p,"change",S),u(w,"dblclick",C),u(A,"click",P)],$=!0)},p(e,l){r=e,8&l&&(p.checked=r[16].completed),8&l&&U!==(U=r[16].description+"")&&g(y,U),r[2]===r[18]?x?x.p(r,l):(x=N(r),x.c(),x.m(d,T)):x&&(x.d(1),x=null),12&l&&b!==(b=(r[16].completed?"completed":"")+" "+(r[2]===r[18]?"editing":""))&&t(d,"class",b)},d(e){e&&i(d),x&&x.d(),$=!1,m(O)}}}function L(e){let s,r,d,h;return{c(){s=n("button"),r=k("Clear completed"),this.h()},l(e){s=a(e,"BUTTON",{class:!0});var l=c(s);r=o(l,"Clear completed"),l.forEach(i),this.h()},h(){t(s,"class","clear-completed")},m(t,c){f(t,s,c),l(s,r),d||(h=u(s,"click",e[6]),d=!0)},p:p,d(e){e&&i(s),d=!1,h()}}}function T(e){let r,h,m,v,g,w,y,N,A,L=e[1].length>0&&I(e);return{c(){r=n("header"),h=n("h1"),m=k("todos"),v=E(),g=n("input"),w=E(),L&&L.c(),y=d(),this.h()},l(e){r=a(e,"HEADER",{class:!0});var l=c(r);h=a(l,"H1",{});var t=c(h);m=o(t,"todos"),t.forEach(i),v=s(l),g=a(l,"INPUT",{class:!0,placeholder:!0}),l.forEach(i),w=s(e),L&&L.l(e),y=d(),this.h()},h(){t(g,"class","new-todo"),t(g,"placeholder","What needs to be done?"),g.autofocus=!0,t(r,"class","header")},m(t,c){f(t,r,c),l(r,h),l(h,m),l(r,v),l(r,g),f(t,w,c),L&&L.m(t,c),f(t,y,c),g.focus(),N||(A=u(g,"keydown",e[9]),N=!0)},p(e,[l]){e[1].length>0?L?L.p(e,l):(L=I(e),L.c(),L.m(y.parentNode,y)):L&&(L.d(1),L=null)},i:p,o:p,d(e){e&&i(r),e&&i(w),L&&L.d(e),e&&i(y),N=!1,A()}}}function b(e,l,t){let c,a,s,o="all",r=[],i=null;try{r=JSON.parse(localStorage.getItem("todos-svelte"))||[]}catch(e){r=[]}const n=()=>{t(0,o="all"),"#/active"===window.location.hash?t(0,o="active"):"#/completed"===window.location.hash&&t(0,o="completed")};function d(e){t(1,r=r.slice(0,e).concat(r.slice(e+1)))}window.addEventListener("hashchange",n),n();return e.$$.update=()=>{if(3&e.$$.dirty&&t(3,c="all"===o?r:"completed"===o?r.filter((e=>e.completed)):r.filter((e=>!e.completed))),2&e.$$.dirty&&t(4,a=r.filter((e=>!e.completed)).length),2&e.$$.dirty&&t(5,s=r.filter((e=>e.completed)).length),2&e.$$.dirty)try{localStorage.setItem("todos-svelte",JSON.stringify(r))}catch(e){}},[o,r,i,c,a,s,function(){t(1,r=r.filter((e=>!e.completed)))},d,function(e){t(1,r=r.map((l=>({id:l.id,description:l.description,completed:e.target.checked}))))},function(e){13===e.which&&(t(1,r=r.concat({id:Date.now(),description:e.target.value,completed:!1})),e.target.value="")},function(e){13===e.which?e.target.blur():27===e.which&&t(2,i=null)},function(e){t(1,r[i].description=e.target.value,r),t(2,i=null)},function(e,l){e[l].completed=this.checked,t(3,c),t(0,o),t(1,r)},e=>t(2,i=e),e=>d(e)]}export default class extends e{constructor(e){super(),h(this,e,b,T,v,{})}}


--------------------------------------------------------------------------------
/todomvc.svelte.hydratable.min.js.brotli:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yyx990803/vue-svelte-size-analysis/7bb60ff681a3f5016e8af26084e72100cd37a876/todomvc.svelte.hydratable.min.js.brotli


--------------------------------------------------------------------------------
/todomvc.svelte.hydratable.min.js.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yyx990803/vue-svelte-size-analysis/7bb60ff681a3f5016e8af26084e72100cd37a876/todomvc.svelte.hydratable.min.js.gz


--------------------------------------------------------------------------------
/todomvc.svelte.js:
--------------------------------------------------------------------------------
  1 | /* App.svelte generated by Svelte v3.38.3 */
  2 | import {
  3 | 	SvelteComponent,
  4 | 	append,
  5 | 	attr,
  6 | 	destroy_block,
  7 | 	detach,
  8 | 	element,
  9 | 	empty,
 10 | 	init,
 11 | 	insert,
 12 | 	listen,
 13 | 	noop,
 14 | 	run_all,
 15 | 	safe_not_equal,
 16 | 	set_data,
 17 | 	space,
 18 | 	text,
 19 | 	update_keyed_each
 20 | } from "svelte/internal";
 21 | 
 22 | function get_each_context(ctx, list, i) {
 23 | 	const child_ctx = ctx.slice();
 24 | 	child_ctx[16] = list[i];
 25 | 	child_ctx[17] = list;
 26 | 	child_ctx[18] = i;
 27 | 	return child_ctx;
 28 | }
 29 | 
 30 | // (77:0) {#if items.length > 0}
 31 | function create_if_block(ctx) {
 32 | 	let section;
 33 | 	let input;
 34 | 	let input_checked_value;
 35 | 	let t0;
 36 | 	let label;
 37 | 	let t2;
 38 | 	let ul0;
 39 | 	let each_blocks = [];
 40 | 	let each_1_lookup = new Map();
 41 | 	let t3;
 42 | 	let footer;
 43 | 	let span;
 44 | 	let strong;
 45 | 	let t4;
 46 | 	let t5;
 47 | 	let t6_value = (/*numActive*/ ctx[4] === 1 ? "item" : "items") + "";
 48 | 	let t6;
 49 | 	let t7;
 50 | 	let t8;
 51 | 	let ul1;
 52 | 	let li0;
 53 | 	let a0;
 54 | 	let t9;
 55 | 	let a0_class_value;
 56 | 	let t10;
 57 | 	let li1;
 58 | 	let a1;
 59 | 	let t11;
 60 | 	let a1_class_value;
 61 | 	let t12;
 62 | 	let li2;
 63 | 	let a2;
 64 | 	let t13;
 65 | 	let a2_class_value;
 66 | 	let t14;
 67 | 	let mounted;
 68 | 	let dispose;
 69 | 	let each_value = /*filtered*/ ctx[3];
 70 | 	const get_key = ctx => /*item*/ ctx[16].id;
 71 | 
 72 | 	for (let i = 0; i < each_value.length; i += 1) {
 73 | 		let child_ctx = get_each_context(ctx, each_value, i);
 74 | 		let key = get_key(child_ctx);
 75 | 		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
 76 | 	}
 77 | 
 78 | 	let if_block = /*numCompleted*/ ctx[5] && create_if_block_1(ctx);
 79 | 
 80 | 	return {
 81 | 		c() {
 82 | 			section = element("section");
 83 | 			input = element("input");
 84 | 			t0 = space();
 85 | 			label = element("label");
 86 | 			label.textContent = "Mark all as complete";
 87 | 			t2 = space();
 88 | 			ul0 = element("ul");
 89 | 
 90 | 			for (let i = 0; i < each_blocks.length; i += 1) {
 91 | 				each_blocks[i].c();
 92 | 			}
 93 | 
 94 | 			t3 = space();
 95 | 			footer = element("footer");
 96 | 			span = element("span");
 97 | 			strong = element("strong");
 98 | 			t4 = text(/*numActive*/ ctx[4]);
 99 | 			t5 = space();
100 | 			t6 = text(t6_value);
101 | 			t7 = text(" left");
102 | 			t8 = space();
103 | 			ul1 = element("ul");
104 | 			li0 = element("li");
105 | 			a0 = element("a");
106 | 			t9 = text("All");
107 | 			t10 = space();
108 | 			li1 = element("li");
109 | 			a1 = element("a");
110 | 			t11 = text("Active");
111 | 			t12 = space();
112 | 			li2 = element("li");
113 | 			a2 = element("a");
114 | 			t13 = text("Completed");
115 | 			t14 = space();
116 | 			if (if_block) if_block.c();
117 | 			attr(input, "id", "toggle-all");
118 | 			attr(input, "class", "toggle-all");
119 | 			attr(input, "type", "checkbox");
120 | 			input.checked = input_checked_value = /*numCompleted*/ ctx[5] === /*items*/ ctx[1].length;
121 | 			attr(label, "for", "toggle-all");
122 | 			attr(ul0, "class", "todo-list");
123 | 			attr(span, "class", "todo-count");
124 | 			attr(a0, "class", a0_class_value = /*currentFilter*/ ctx[0] === "all" ? "selected" : "");
125 | 			attr(a0, "href", "#/");
126 | 			attr(a1, "class", a1_class_value = /*currentFilter*/ ctx[0] === "active" ? "selected" : "");
127 | 			attr(a1, "href", "#/active");
128 | 
129 | 			attr(a2, "class", a2_class_value = /*currentFilter*/ ctx[0] === "completed"
130 | 			? "selected"
131 | 			: "");
132 | 
133 | 			attr(a2, "href", "#/completed");
134 | 			attr(ul1, "class", "filters");
135 | 			attr(footer, "class", "footer");
136 | 			attr(section, "class", "main");
137 | 		},
138 | 		m(target, anchor) {
139 | 			insert(target, section, anchor);
140 | 			append(section, input);
141 | 			append(section, t0);
142 | 			append(section, label);
143 | 			append(section, t2);
144 | 			append(section, ul0);
145 | 
146 | 			for (let i = 0; i < each_blocks.length; i += 1) {
147 | 				each_blocks[i].m(ul0, null);
148 | 			}
149 | 
150 | 			append(section, t3);
151 | 			append(section, footer);
152 | 			append(footer, span);
153 | 			append(span, strong);
154 | 			append(strong, t4);
155 | 			append(span, t5);
156 | 			append(span, t6);
157 | 			append(span, t7);
158 | 			append(footer, t8);
159 | 			append(footer, ul1);
160 | 			append(ul1, li0);
161 | 			append(li0, a0);
162 | 			append(a0, t9);
163 | 			append(ul1, t10);
164 | 			append(ul1, li1);
165 | 			append(li1, a1);
166 | 			append(a1, t11);
167 | 			append(ul1, t12);
168 | 			append(ul1, li2);
169 | 			append(li2, a2);
170 | 			append(a2, t13);
171 | 			append(footer, t14);
172 | 			if (if_block) if_block.m(footer, null);
173 | 
174 | 			if (!mounted) {
175 | 				dispose = listen(input, "change", /*toggleAll*/ ctx[8]);
176 | 				mounted = true;
177 | 			}
178 | 		},
179 | 		p(ctx, dirty) {
180 | 			if (dirty & /*numCompleted, items*/ 34 && input_checked_value !== (input_checked_value = /*numCompleted*/ ctx[5] === /*items*/ ctx[1].length)) {
181 | 				input.checked = input_checked_value;
182 | 			}
183 | 
184 | 			if (dirty & /*filtered, editing, handleEdit, submit, remove*/ 3212) {
185 | 				each_value = /*filtered*/ ctx[3];
186 | 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul0, destroy_block, create_each_block, null, get_each_context);
187 | 			}
188 | 
189 | 			if (dirty & /*numActive*/ 16) set_data(t4, /*numActive*/ ctx[4]);
190 | 			if (dirty & /*numActive*/ 16 && t6_value !== (t6_value = (/*numActive*/ ctx[4] === 1 ? "item" : "items") + "")) set_data(t6, t6_value);
191 | 
192 | 			if (dirty & /*currentFilter*/ 1 && a0_class_value !== (a0_class_value = /*currentFilter*/ ctx[0] === "all" ? "selected" : "")) {
193 | 				attr(a0, "class", a0_class_value);
194 | 			}
195 | 
196 | 			if (dirty & /*currentFilter*/ 1 && a1_class_value !== (a1_class_value = /*currentFilter*/ ctx[0] === "active" ? "selected" : "")) {
197 | 				attr(a1, "class", a1_class_value);
198 | 			}
199 | 
200 | 			if (dirty & /*currentFilter*/ 1 && a2_class_value !== (a2_class_value = /*currentFilter*/ ctx[0] === "completed"
201 | 			? "selected"
202 | 			: "")) {
203 | 				attr(a2, "class", a2_class_value);
204 | 			}
205 | 
206 | 			if (/*numCompleted*/ ctx[5]) {
207 | 				if (if_block) {
208 | 					if_block.p(ctx, dirty);
209 | 				} else {
210 | 					if_block = create_if_block_1(ctx);
211 | 					if_block.c();
212 | 					if_block.m(footer, null);
213 | 				}
214 | 			} else if (if_block) {
215 | 				if_block.d(1);
216 | 				if_block = null;
217 | 			}
218 | 		},
219 | 		d(detaching) {
220 | 			if (detaching) detach(section);
221 | 
222 | 			for (let i = 0; i < each_blocks.length; i += 1) {
223 | 				each_blocks[i].d();
224 | 			}
225 | 
226 | 			if (if_block) if_block.d();
227 | 			mounted = false;
228 | 			dispose();
229 | 		}
230 | 	};
231 | }
232 | 
233 | // (91:5) {#if editing === index}
234 | function create_if_block_2(ctx) {
235 | 	let input;
236 | 	let input_value_value;
237 | 	let mounted;
238 | 	let dispose;
239 | 
240 | 	return {
241 | 		c() {
242 | 			input = element("input");
243 | 			input.value = input_value_value = /*item*/ ctx[16].description;
244 | 			attr(input, "id", "edit");
245 | 			attr(input, "class", "edit");
246 | 			input.autofocus = true;
247 | 		},
248 | 		m(target, anchor) {
249 | 			insert(target, input, anchor);
250 | 			input.focus();
251 | 
252 | 			if (!mounted) {
253 | 				dispose = [
254 | 					listen(input, "keydown", /*handleEdit*/ ctx[10]),
255 | 					listen(input, "blur", /*submit*/ ctx[11])
256 | 				];
257 | 
258 | 				mounted = true;
259 | 			}
260 | 		},
261 | 		p(ctx, dirty) {
262 | 			if (dirty & /*filtered*/ 8 && input_value_value !== (input_value_value = /*item*/ ctx[16].description) && input.value !== input_value_value) {
263 | 				input.value = input_value_value;
264 | 			}
265 | 		},
266 | 		d(detaching) {
267 | 			if (detaching) detach(input);
268 | 			mounted = false;
269 | 			run_all(dispose);
270 | 		}
271 | 	};
272 | }
273 | 
274 | // (83:3) {#each filtered as item, index (item.id)}
275 | function create_each_block(key_1, ctx) {
276 | 	let li;
277 | 	let div;
278 | 	let input;
279 | 	let t0;
280 | 	let label;
281 | 	let t1_value = /*item*/ ctx[16].description + "";
282 | 	let t1;
283 | 	let t2;
284 | 	let button;
285 | 	let t3;
286 | 	let t4;
287 | 	let li_class_value;
288 | 	let mounted;
289 | 	let dispose;
290 | 
291 | 	function input_change_handler() {
292 | 		/*input_change_handler*/ ctx[12].call(input, /*each_value*/ ctx[17], /*index*/ ctx[18]);
293 | 	}
294 | 
295 | 	function dblclick_handler() {
296 | 		return /*dblclick_handler*/ ctx[13](/*index*/ ctx[18]);
297 | 	}
298 | 
299 | 	function click_handler() {
300 | 		return /*click_handler*/ ctx[14](/*index*/ ctx[18]);
301 | 	}
302 | 
303 | 	let if_block = /*editing*/ ctx[2] === /*index*/ ctx[18] && create_if_block_2(ctx);
304 | 
305 | 	return {
306 | 		key: key_1,
307 | 		first: null,
308 | 		c() {
309 | 			li = element("li");
310 | 			div = element("div");
311 | 			input = element("input");
312 | 			t0 = space();
313 | 			label = element("label");
314 | 			t1 = text(t1_value);
315 | 			t2 = space();
316 | 			button = element("button");
317 | 			t3 = space();
318 | 			if (if_block) if_block.c();
319 | 			t4 = space();
320 | 			attr(input, "class", "toggle");
321 | 			attr(input, "type", "checkbox");
322 | 			attr(button, "class", "destroy");
323 | 			attr(div, "class", "view");
324 | 
325 | 			attr(li, "class", li_class_value = "" + ((/*item*/ ctx[16].completed ? "completed" : "") + " " + (/*editing*/ ctx[2] === /*index*/ ctx[18]
326 | 			? "editing"
327 | 			: "")));
328 | 
329 | 			this.first = li;
330 | 		},
331 | 		m(target, anchor) {
332 | 			insert(target, li, anchor);
333 | 			append(li, div);
334 | 			append(div, input);
335 | 			input.checked = /*item*/ ctx[16].completed;
336 | 			append(div, t0);
337 | 			append(div, label);
338 | 			append(label, t1);
339 | 			append(div, t2);
340 | 			append(div, button);
341 | 			append(li, t3);
342 | 			if (if_block) if_block.m(li, null);
343 | 			append(li, t4);
344 | 
345 | 			if (!mounted) {
346 | 				dispose = [
347 | 					listen(input, "change", input_change_handler),
348 | 					listen(label, "dblclick", dblclick_handler),
349 | 					listen(button, "click", click_handler)
350 | 				];
351 | 
352 | 				mounted = true;
353 | 			}
354 | 		},
355 | 		p(new_ctx, dirty) {
356 | 			ctx = new_ctx;
357 | 
358 | 			if (dirty & /*filtered*/ 8) {
359 | 				input.checked = /*item*/ ctx[16].completed;
360 | 			}
361 | 
362 | 			if (dirty & /*filtered*/ 8 && t1_value !== (t1_value = /*item*/ ctx[16].description + "")) set_data(t1, t1_value);
363 | 
364 | 			if (/*editing*/ ctx[2] === /*index*/ ctx[18]) {
365 | 				if (if_block) {
366 | 					if_block.p(ctx, dirty);
367 | 				} else {
368 | 					if_block = create_if_block_2(ctx);
369 | 					if_block.c();
370 | 					if_block.m(li, t4);
371 | 				}
372 | 			} else if (if_block) {
373 | 				if_block.d(1);
374 | 				if_block = null;
375 | 			}
376 | 
377 | 			if (dirty & /*filtered, editing*/ 12 && li_class_value !== (li_class_value = "" + ((/*item*/ ctx[16].completed ? "completed" : "") + " " + (/*editing*/ ctx[2] === /*index*/ ctx[18]
378 | 			? "editing"
379 | 			: "")))) {
380 | 				attr(li, "class", li_class_value);
381 | 			}
382 | 		},
383 | 		d(detaching) {
384 | 			if (detaching) detach(li);
385 | 			if (if_block) if_block.d();
386 | 			mounted = false;
387 | 			run_all(dispose);
388 | 		}
389 | 	};
390 | }
391 | 
392 | // (116:3) {#if numCompleted}
393 | function create_if_block_1(ctx) {
394 | 	let button;
395 | 	let mounted;
396 | 	let dispose;
397 | 
398 | 	return {
399 | 		c() {
400 | 			button = element("button");
401 | 			button.textContent = "Clear completed";
402 | 			attr(button, "class", "clear-completed");
403 | 		},
404 | 		m(target, anchor) {
405 | 			insert(target, button, anchor);
406 | 
407 | 			if (!mounted) {
408 | 				dispose = listen(button, "click", /*clearCompleted*/ ctx[6]);
409 | 				mounted = true;
410 | 			}
411 | 		},
412 | 		p: noop,
413 | 		d(detaching) {
414 | 			if (detaching) detach(button);
415 | 			mounted = false;
416 | 			dispose();
417 | 		}
418 | 	};
419 | }
420 | 
421 | function create_fragment(ctx) {
422 | 	let header;
423 | 	let h1;
424 | 	let t1;
425 | 	let input;
426 | 	let t2;
427 | 	let if_block_anchor;
428 | 	let mounted;
429 | 	let dispose;
430 | 	let if_block = /*items*/ ctx[1].length > 0 && create_if_block(ctx);
431 | 
432 | 	return {
433 | 		c() {
434 | 			header = element("header");
435 | 			h1 = element("h1");
436 | 			h1.textContent = "todos";
437 | 			t1 = space();
438 | 			input = element("input");
439 | 			t2 = space();
440 | 			if (if_block) if_block.c();
441 | 			if_block_anchor = empty();
442 | 			attr(input, "class", "new-todo");
443 | 			attr(input, "placeholder", "What needs to be done?");
444 | 			input.autofocus = true;
445 | 			attr(header, "class", "header");
446 | 		},
447 | 		m(target, anchor) {
448 | 			insert(target, header, anchor);
449 | 			append(header, h1);
450 | 			append(header, t1);
451 | 			append(header, input);
452 | 			insert(target, t2, anchor);
453 | 			if (if_block) if_block.m(target, anchor);
454 | 			insert(target, if_block_anchor, anchor);
455 | 			input.focus();
456 | 
457 | 			if (!mounted) {
458 | 				dispose = listen(input, "keydown", /*createNew*/ ctx[9]);
459 | 				mounted = true;
460 | 			}
461 | 		},
462 | 		p(ctx, [dirty]) {
463 | 			if (/*items*/ ctx[1].length > 0) {
464 | 				if (if_block) {
465 | 					if_block.p(ctx, dirty);
466 | 				} else {
467 | 					if_block = create_if_block(ctx);
468 | 					if_block.c();
469 | 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
470 | 				}
471 | 			} else if (if_block) {
472 | 				if_block.d(1);
473 | 				if_block = null;
474 | 			}
475 | 		},
476 | 		i: noop,
477 | 		o: noop,
478 | 		d(detaching) {
479 | 			if (detaching) detach(header);
480 | 			if (detaching) detach(t2);
481 | 			if (if_block) if_block.d(detaching);
482 | 			if (detaching) detach(if_block_anchor);
483 | 			mounted = false;
484 | 			dispose();
485 | 		}
486 | 	};
487 | }
488 | 
489 | const ENTER_KEY = 13;
490 | const ESCAPE_KEY = 27;
491 | 
492 | function instance($$self, $$props, $$invalidate) {
493 | 	let filtered;
494 | 	let numActive;
495 | 	let numCompleted;
496 | 	let currentFilter = "all";
497 | 	let items = [];
498 | 	let editing = null;
499 | 
500 | 	try {
501 | 		items = JSON.parse(localStorage.getItem("todos-svelte")) || [];
502 | 	} catch(err) {
503 | 		items = [];
504 | 	}
505 | 
506 | 	const updateView = () => {
507 | 		$$invalidate(0, currentFilter = "all");
508 | 
509 | 		if (window.location.hash === "#/active") {
510 | 			$$invalidate(0, currentFilter = "active");
511 | 		} else if (window.location.hash === "#/completed") {
512 | 			$$invalidate(0, currentFilter = "completed");
513 | 		}
514 | 	};
515 | 
516 | 	window.addEventListener("hashchange", updateView);
517 | 	updateView();
518 | 
519 | 	function clearCompleted() {
520 | 		$$invalidate(1, items = items.filter(item => !item.completed));
521 | 	}
522 | 
523 | 	function remove(index) {
524 | 		$$invalidate(1, items = items.slice(0, index).concat(items.slice(index + 1)));
525 | 	}
526 | 
527 | 	function toggleAll(event) {
528 | 		$$invalidate(1, items = items.map(item => ({
529 | 			id: item.id,
530 | 			description: item.description,
531 | 			completed: event.target.checked
532 | 		})));
533 | 	}
534 | 
535 | 	function createNew(event) {
536 | 		if (event.which === ENTER_KEY) {
537 | 			$$invalidate(1, items = items.concat({
538 | 				id: Date.now(),
539 | 				description: event.target.value,
540 | 				completed: false
541 | 			}));
542 | 
543 | 			event.target.value = "";
544 | 		}
545 | 	}
546 | 
547 | 	function handleEdit(event) {
548 | 		if (event.which === ENTER_KEY) event.target.blur(); else if (event.which === ESCAPE_KEY) $$invalidate(2, editing = null);
549 | 	}
550 | 
551 | 	function submit(event) {
552 | 		$$invalidate(1, items[editing].description = event.target.value, items);
553 | 		$$invalidate(2, editing = null);
554 | 	}
555 | 
556 | 	function input_change_handler(each_value, index) {
557 | 		each_value[index].completed = this.checked;
558 | 		(($$invalidate(3, filtered), $$invalidate(0, currentFilter)), $$invalidate(1, items));
559 | 	}
560 | 
561 | 	const dblclick_handler = index => $$invalidate(2, editing = index);
562 | 	const click_handler = index => remove(index);
563 | 
564 | 	$$self.$$.update = () => {
565 | 		if ($$self.$$.dirty & /*currentFilter, items*/ 3) {
566 | 			$: $$invalidate(3, filtered = currentFilter === "all"
567 | 			? items
568 | 			: currentFilter === "completed"
569 | 				? items.filter(item => item.completed)
570 | 				: items.filter(item => !item.completed));
571 | 		}
572 | 
573 | 		if ($$self.$$.dirty & /*items*/ 2) {
574 | 			$: $$invalidate(4, numActive = items.filter(item => !item.completed).length);
575 | 		}
576 | 
577 | 		if ($$self.$$.dirty & /*items*/ 2) {
578 | 			$: $$invalidate(5, numCompleted = items.filter(item => item.completed).length);
579 | 		}
580 | 
581 | 		if ($$self.$$.dirty & /*items*/ 2) {
582 | 			$: try {
583 | 				localStorage.setItem("todos-svelte", JSON.stringify(items));
584 | 			} catch(err) {
585 | 				
586 | 			} // noop
587 | 		}
588 | 	};
589 | 
590 | 	return [
591 | 		currentFilter,
592 | 		items,
593 | 		editing,
594 | 		filtered,
595 | 		numActive,
596 | 		numCompleted,
597 | 		clearCompleted,
598 | 		remove,
599 | 		toggleAll,
600 | 		createNew,
601 | 		handleEdit,
602 | 		submit,
603 | 		input_change_handler,
604 | 		dblclick_handler,
605 | 		click_handler
606 | 	];
607 | }
608 | 
609 | class App extends SvelteComponent {
610 | 	constructor(options) {
611 | 		super();
612 | 		init(this, options, instance, create_fragment, safe_not_equal, {});
613 | 	}
614 | }
615 | 
616 | export default App;


--------------------------------------------------------------------------------
/todomvc.svelte.min.js:
--------------------------------------------------------------------------------
1 | function v(e,t,l){const c=e.slice();return c[16]=t[l],c[17]=t,c[18]=l,c}function k(e){let i,s,r,u,p,k,w,$,x,C,S,N,A,I,J,M,O,D,E,L,W,j,q,z,B,F,G,H,K,P,Q,R,T,U,V=[],X=new Map,Y=1===e[4]?"item":"items",Z=e[3];const _=e=>e[16].id;for(let t=0;t<Z.length;t+=1){let l=v(e,Z,t),c=_(l);X.set(c,V[t]=y(c,l))}let ee=e[5]&&b(e);return{c(){i=o("section"),s=o("input"),u=m(),p=o("label"),p.textContent="Mark all as complete",k=m(),w=o("ul");for(let e=0;e<V.length;e+=1)V[e].c();$=m(),x=o("footer"),C=o("span"),S=o("strong"),N=f(e[4]),A=m(),I=f(Y),J=f(" left"),M=m(),O=o("ul"),D=o("li"),E=o("a"),L=f("All"),j=m(),q=o("li"),z=o("a"),B=f("Active"),G=m(),H=o("li"),K=o("a"),P=f("Completed"),R=m(),ee&&ee.c(),l(s,"id","toggle-all"),l(s,"class","toggle-all"),l(s,"type","checkbox"),s.checked=r=e[5]===e[1].length,l(p,"for","toggle-all"),l(w,"class","todo-list"),l(C,"class","todo-count"),l(E,"class",W="all"===e[0]?"selected":""),l(E,"href","#/"),l(z,"class",F="active"===e[0]?"selected":""),l(z,"href","#/active"),l(K,"class",Q="completed"===e[0]?"selected":""),l(K,"href","#/completed"),l(O,"class","filters"),l(x,"class","footer"),l(i,"class","main")},m(l,c){d(l,i,c),t(i,s),t(i,u),t(i,p),t(i,k),t(i,w);for(let e=0;e<V.length;e+=1)V[e].m(w,null);t(i,$),t(i,x),t(x,C),t(C,S),t(S,N),t(C,A),t(C,I),t(C,J),t(x,M),t(x,O),t(O,D),t(D,E),t(E,L),t(O,j),t(O,q),t(q,z),t(z,B),t(O,G),t(O,H),t(H,K),t(K,P),t(x,R),ee&&ee.m(x,null),T||(U=a(s,"change",e[8]),T=!0)},p(e,t){34&t&&r!==(r=e[5]===e[1].length)&&(s.checked=r),3212&t&&(Z=e[3],V=g(V,t,_,1,e,Z,X,w,c,y,null,v)),16&t&&h(N,e[4]),16&t&&Y!==(Y=1===e[4]?"item":"items")&&h(I,Y),1&t&&W!==(W="all"===e[0]?"selected":"")&&l(E,"class",W),1&t&&F!==(F="active"===e[0]?"selected":"")&&l(z,"class",F),1&t&&Q!==(Q="completed"===e[0]?"selected":"")&&l(K,"class",Q),e[5]?ee?ee.p(e,t):(ee=b(e),ee.c(),ee.m(x,null)):ee&&(ee.d(1),ee=null)},d(e){e&&n(i);for(let e=0;e<V.length;e+=1)V[e].d();ee&&ee.d(),T=!1,U()}}}function w(e){let t,c,i,s;return{c(){t=o("input"),t.value=c=e[16].description,l(t,"id","edit"),l(t,"class","edit"),t.autofocus=!0},m(l,c){d(l,t,c),t.focus(),i||(s=[a(t,"keydown",e[10]),a(t,"blur",e[11])],i=!0)},p(e,l){8&l&&c!==(c=e[16].description)&&t.value!==c&&(t.value=c)},d(e){e&&n(t),i=!1,u(s)}}}function y(e,c){let i,s,r,p,g,v,k,y,b,$,x,C,S,N=c[16].description+"";function A(){c[12].call(r,c[17],c[18])}function I(){return c[13](c[18])}function J(){return c[14](c[18])}let M=c[2]===c[18]&&w(c);return{key:e,first:null,c(){i=o("li"),s=o("div"),r=o("input"),p=m(),g=o("label"),v=f(N),k=m(),y=o("button"),b=m(),M&&M.c(),$=m(),l(r,"class","toggle"),l(r,"type","checkbox"),l(y,"class","destroy"),l(s,"class","view"),l(i,"class",x=(c[16].completed?"completed":"")+" "+(c[2]===c[18]?"editing":"")),this.first=i},m(e,l){d(e,i,l),t(i,s),t(s,r),r.checked=c[16].completed,t(s,p),t(s,g),t(g,v),t(s,k),t(s,y),t(i,b),M&&M.m(i,null),t(i,$),C||(S=[a(r,"change",A),a(g,"dblclick",I),a(y,"click",J)],C=!0)},p(e,t){c=e,8&t&&(r.checked=c[16].completed),8&t&&N!==(N=c[16].description+"")&&h(v,N),c[2]===c[18]?M?M.p(c,t):(M=w(c),M.c(),M.m(i,$)):M&&(M.d(1),M=null),12&t&&x!==(x=(c[16].completed?"completed":"")+" "+(c[2]===c[18]?"editing":""))&&l(i,"class",x)},d(e){e&&n(i),M&&M.d(),C=!1,u(S)}}}function b(e){let t,c,i;return{c(){t=o("button"),t.textContent="Clear completed",l(t,"class","clear-completed")},m(l,n){d(l,t,n),c||(i=a(t,"click",e[6]),c=!0)},p:r,d(e){e&&n(t),c=!1,i()}}}function $(e){let c,s,u,p,h,f,g,v,w=e[1].length>0&&k(e);return{c(){c=o("header"),s=o("h1"),s.textContent="todos",u=m(),p=o("input"),h=m(),w&&w.c(),f=i(),l(p,"class","new-todo"),l(p,"placeholder","What needs to be done?"),p.autofocus=!0,l(c,"class","header")},m(l,n){d(l,c,n),t(c,s),t(c,u),t(c,p),d(l,h,n),w&&w.m(l,n),d(l,f,n),p.focus(),g||(v=a(p,"keydown",e[9]),g=!0)},p(e,[t]){e[1].length>0?w?w.p(e,t):(w=k(e),w.c(),w.m(f.parentNode,f)):w&&(w.d(1),w=null)},i:r,o:r,d(e){e&&n(c),e&&n(h),w&&w.d(e),e&&n(f),g=!1,v()}}}function x(e,t,l){let c,n,o,i="all",s=[],d=null;try{s=JSON.parse(localStorage.getItem("todos-svelte"))||[]}catch(e){s=[]}const a=()=>{l(0,i="all"),"#/active"===window.location.hash?l(0,i="active"):"#/completed"===window.location.hash&&l(0,i="completed")};function r(e){l(1,s=s.slice(0,e).concat(s.slice(e+1)))}window.addEventListener("hashchange",a),a();return e.$$.update=()=>{if(3&e.$$.dirty&&l(3,c="all"===i?s:"completed"===i?s.filter((e=>e.completed)):s.filter((e=>!e.completed))),2&e.$$.dirty&&l(4,n=s.filter((e=>!e.completed)).length),2&e.$$.dirty&&l(5,o=s.filter((e=>e.completed)).length),2&e.$$.dirty)try{localStorage.setItem("todos-svelte",JSON.stringify(s))}catch(e){}},[i,s,d,c,n,o,function(){l(1,s=s.filter((e=>!e.completed)))},r,function(e){l(1,s=s.map((t=>({id:t.id,description:t.description,completed:e.target.checked}))))},function(e){13===e.which&&(l(1,s=s.concat({id:Date.now(),description:e.target.value,completed:!1})),e.target.value="")},function(e){13===e.which?e.target.blur():27===e.which&&l(2,d=null)},function(e){l(1,s[d].description=e.target.value,s),l(2,d=null)},function(e,t){e[t].completed=this.checked,l(3,c),l(0,i),l(1,s)},e=>l(2,d=e),e=>r(e)]}class extends e{constructor(e){super(),s(this,e,x,$,p,{})}}


--------------------------------------------------------------------------------
/todomvc.svelte.min.js.brotli:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yyx990803/vue-svelte-size-analysis/7bb60ff681a3f5016e8af26084e72100cd37a876/todomvc.svelte.min.js.brotli


--------------------------------------------------------------------------------
/todomvc.svelte.min.js.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yyx990803/vue-svelte-size-analysis/7bb60ff681a3f5016e8af26084e72100cd37a876/todomvc.svelte.min.js.gz


--------------------------------------------------------------------------------
/todomvc.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { ref, computed, watchEffect } from 'vue'
  3 | 
  4 | const STORAGE_KEY = 'todos-petite-vue'
  5 | 
  6 | const filters = {
  7 |   all: (todos) => todos,
  8 |   active: (todos) => todos.filter((todo) => !todo.completed),
  9 |   completed: (todos) => todos.filter((todo) => todo.completed)
 10 | }
 11 | 
 12 | const todos = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'))
 13 | const visibility = ref('all')
 14 | const editedTodo = ref()
 15 | 
 16 | const filteredTodos = computed(() => filters[visibility.value](todos.value))
 17 | const remaining = computed(() => filters.active(todos.value).length)
 18 | 
 19 | function toggleAll(e) {
 20 |   todos.value.forEach((todo) => (todo.completed = e.target.checked))
 21 | }
 22 | 
 23 | function addTodo(e) {
 24 |   const value = e.target.value.trim()
 25 |   if (value) {
 26 |     todos.value.push({
 27 |       id: Date.now(),
 28 |       title: value,
 29 |       completed: false
 30 |     })
 31 |     e.target.value = ''
 32 |   }
 33 | }
 34 | 
 35 | function removeTodo(todo) {
 36 |   todos.value.splice(todos.value.indexOf(todo), 1)
 37 | }
 38 | 
 39 | let beforeEditCache = ''
 40 | 
 41 | function editTodo(todo) {
 42 |   beforeEditCache = todo.title
 43 |   editedTodo.value = todo
 44 | }
 45 | 
 46 | function cancelEdit(todo) {
 47 |   editedTodo.value = null
 48 |   todo.title = beforeEditCache
 49 | }
 50 | 
 51 | function doneEdit(todo) {
 52 |   if (editedTodo.value) {
 53 |     editedTodo.value = null
 54 |     todo.title = todo.title.trim()
 55 |     if (!todo.title) removeTodo(todo)
 56 |   }
 57 | }
 58 | 
 59 | function removeCompleted() {
 60 |   todos.value = filters.active(todos.value)
 61 | }
 62 | 
 63 | watchEffect(() => {
 64 |   localStorage.setItem(STORAGE_KEY, JSON.stringify(todos.value))
 65 | })
 66 | 
 67 | function onHashChange() {
 68 |   const route = window.location.hash.replace(/#\/?/, '')
 69 |   if (filters[route]) {
 70 |     visibility.value = route
 71 |   } else {
 72 |     window.location.hash = ''
 73 |     visibility.value = 'all'
 74 |   }
 75 | }
 76 | 
 77 | window.addEventListener('hashchange', onHashChange)
 78 | onHashChange()
 79 | </script>
 80 | 
 81 | <template>
 82 |   <div id="app">
 83 |     <section class="todoapp">
 84 |       <header class="header">
 85 |         <h1>todos</h1>
 86 |         <input
 87 |           class="new-todo"
 88 |           autofocus
 89 |           placeholder="What needs to be done?"
 90 |           @keyup.enter="addTodo"
 91 |         />
 92 |       </header>
 93 |       <section class="main" v-show="todos.length">
 94 |         <input
 95 |           id="toggle-all"
 96 |           class="toggle-all"
 97 |           type="checkbox"
 98 |           :checked="remaining === 0"
 99 |           @change="toggleAll"
100 |         />
101 |         <label for="toggle-all">Mark all as complete</label>
102 |         <ul class="todo-list">
103 |           <li
104 |             v-for="todo in filteredTodos"
105 |             class="todo"
106 |             :key="todo.id"
107 |             :class="{ completed: todo.completed, editing: todo === editedTodo }"
108 |           >
109 |             <div class="view">
110 |               <input class="toggle" type="checkbox" v-model="todo.completed" />
111 |               <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
112 |               <button class="destroy" @click="removeTodo(todo)"></button>
113 |             </div>
114 |             <input
115 |               v-if="todo === editedTodo"
116 |               class="edit"
117 |               type="text"
118 |               v-model="todo.title"
119 |               @vnode-mounted="({ el }) => el.focus()"
120 |               @blur="doneEdit(todo)"
121 |               @keyup.enter="doneEdit(todo)"
122 |               @keyup.escape="cancelEdit(todo)"
123 |             />
124 |           </li>
125 |         </ul>
126 |       </section>
127 |       <footer class="footer" v-show="todos.length">
128 |         <span class="todo-count">
129 |           <strong>{{ remaining }}</strong>
130 |           <span>{{ remaining === 1 ? 'item' : 'items' }} left</span>
131 |         </span>
132 |         <ul class="filters">
133 |           <li>
134 |             <a href="#/all" :class="{ selected: visibility === 'all' }">All</a>
135 |           </li>
136 |           <li>
137 |             <a href="#/active" :class="{ selected: visibility === 'active' }">Active</a>
138 |           </li>
139 |           <li>
140 |             <a href="#/completed" :class="{ selected: visibility === 'completed' }">Completed</a>
141 |           </li>
142 |         </ul>
143 |         <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
144 |           Clear completed
145 |         </button>
146 |       </footer>
147 |     </section>
148 |   </div>
149 | </template>
150 | 


--------------------------------------------------------------------------------
/todomvc.vue.js:
--------------------------------------------------------------------------------
  1 | import { createVNode as _createVNode, withKeys as _withKeys, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, vModelCheckbox as _vModelCheckbox, withDirectives as _withDirectives, toDisplayString as _toDisplayString, vModelText as _vModelText, createCommentVNode as _createCommentVNode, vShow as _vShow } from "vue"
  2 | 
  3 | const _hoisted_1 = { id: "app" }
  4 | const _hoisted_2 = { class: "todoapp" }
  5 | const _hoisted_3 = { class: "header" }
  6 | const _hoisted_4 = /*#__PURE__*/_createVNode("h1", null, "todos", -1 /* HOISTED */)
  7 | const _hoisted_5 = { class: "main" }
  8 | const _hoisted_6 = /*#__PURE__*/_createVNode("label", { for: "toggle-all" }, "Mark all as complete", -1 /* HOISTED */)
  9 | const _hoisted_7 = { class: "todo-list" }
 10 | const _hoisted_8 = { class: "view" }
 11 | const _hoisted_9 = { class: "footer" }
 12 | const _hoisted_10 = { class: "todo-count" }
 13 | const _hoisted_11 = { class: "filters" }
 14 | 
 15 | import { ref, computed, watchEffect } from 'vue'
 16 | 
 17 | 
 18 | const __sfc__ = {
 19 |   setup(__props) {
 20 | 
 21 | const STORAGE_KEY = 'todos-petite-vue'
 22 | 
 23 | const filters = {
 24 |   all: (todos) => todos,
 25 |   active: (todos) => todos.filter((todo) => !todo.completed),
 26 |   completed: (todos) => todos.filter((todo) => todo.completed)
 27 | }
 28 | 
 29 | const todos = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'))
 30 | const visibility = ref('all')
 31 | const editedTodo = ref()
 32 | 
 33 | const filteredTodos = computed(() => filters[visibility.value](todos.value))
 34 | const remaining = computed(() => filters.active(todos.value).length)
 35 | 
 36 | function toggleAll(e) {
 37 |   todos.value.forEach((todo) => (todo.completed = e.target.checked))
 38 | }
 39 | 
 40 | function addTodo(e) {
 41 |   const value = e.target.value.trim()
 42 |   if (value) {
 43 |     todos.value.push({
 44 |       id: Date.now(),
 45 |       title: value,
 46 |       completed: false
 47 |     })
 48 |     e.target.value = ''
 49 |   }
 50 | }
 51 | 
 52 | function removeTodo(todo) {
 53 |   todos.value.splice(todos.value.indexOf(todo), 1)
 54 | }
 55 | 
 56 | let beforeEditCache = ''
 57 | 
 58 | function editTodo(todo) {
 59 |   beforeEditCache = todo.title
 60 |   editedTodo.value = todo
 61 | }
 62 | 
 63 | function cancelEdit(todo) {
 64 |   editedTodo.value = null
 65 |   todo.title = beforeEditCache
 66 | }
 67 | 
 68 | function doneEdit(todo) {
 69 |   if (editedTodo.value) {
 70 |     editedTodo.value = null
 71 |     todo.title = todo.title.trim()
 72 |     if (!todo.title) removeTodo(todo)
 73 |   }
 74 | }
 75 | 
 76 | function removeCompleted() {
 77 |   todos.value = filters.active(todos.value)
 78 | }
 79 | 
 80 | watchEffect(() => {
 81 |   localStorage.setItem(STORAGE_KEY, JSON.stringify(todos.value))
 82 | })
 83 | 
 84 | function onHashChange() {
 85 |   const route = window.location.hash.replace(/#\/?/, '')
 86 |   if (filters[route]) {
 87 |     visibility.value = route
 88 |   } else {
 89 |     window.location.hash = ''
 90 |     visibility.value = 'all'
 91 |   }
 92 | }
 93 | 
 94 | window.addEventListener('hashchange', onHashChange)
 95 | onHashChange()
 96 | 
 97 | return (_ctx, _cache) => {
 98 |   return (_openBlock(), _createBlock("div", _hoisted_1, [
 99 |     _createVNode("section", _hoisted_2, [
100 |       _createVNode("header", _hoisted_3, [
101 |         _hoisted_4,
102 |         _createVNode("input", {
103 |           class: "new-todo",
104 |           autofocus: "",
105 |           placeholder: "What needs to be done?",
106 |           onKeyup: _withKeys(addTodo, ["enter"])
107 |         }, null, 40 /* PROPS, HYDRATE_EVENTS */, ["onKeyup"])
108 |       ]),
109 |       _withDirectives(_createVNode("section", _hoisted_5, [
110 |         _createVNode("input", {
111 |           id: "toggle-all",
112 |           class: "toggle-all",
113 |           type: "checkbox",
114 |           checked: _unref(remaining) === 0,
115 |           onChange: toggleAll
116 |         }, null, 40 /* PROPS, HYDRATE_EVENTS */, ["checked"]),
117 |         _hoisted_6,
118 |         _createVNode("ul", _hoisted_7, [
119 |           (_openBlock(true), _createBlock(_Fragment, null, _renderList(_unref(filteredTodos), (todo) => {
120 |             return (_openBlock(), _createBlock("li", {
121 |               class: ["todo", { completed: todo.completed, editing: todo === editedTodo.value }],
122 |               key: todo.id
123 |             }, [
124 |               _createVNode("div", _hoisted_8, [
125 |                 _withDirectives(_createVNode("input", {
126 |                   class: "toggle",
127 |                   type: "checkbox",
128 |                   "onUpdate:modelValue": $event => (todo.completed = $event)
129 |                 }, null, 8 /* PROPS */, ["onUpdate:modelValue"]), [
130 |                   [_vModelCheckbox, todo.completed]
131 |                 ]),
132 |                 _createVNode("label", {
133 |                   onDblclick: $event => (editTodo(todo))
134 |                 }, _toDisplayString(todo.title), 41 /* TEXT, PROPS, HYDRATE_EVENTS */, ["onDblclick"]),
135 |                 _createVNode("button", {
136 |                   class: "destroy",
137 |                   onClick: $event => (removeTodo(todo))
138 |                 }, null, 8 /* PROPS */, ["onClick"])
139 |               ]),
140 |               (todo === editedTodo.value)
141 |                 ? _withDirectives((_openBlock(), _createBlock("input", {
142 |                     key: 0,
143 |                     class: "edit",
144 |                     type: "text",
145 |                     "onUpdate:modelValue": $event => (todo.title = $event),
146 |                     onVnodeMounted: _cache[1] || (_cache[1] = ({ el }) => el.focus()),
147 |                     onBlur: $event => (doneEdit(todo)),
148 |                     onKeyup: [
149 |                       _withKeys($event => (doneEdit(todo)), ["enter"]),
150 |                       _withKeys($event => (cancelEdit(todo)), ["escape"])
151 |                     ]
152 |                   }, null, 40 /* PROPS, HYDRATE_EVENTS */, ["onUpdate:modelValue", "onBlur", "onKeyup"])), [
153 |                     [_vModelText, todo.title]
154 |                   ])
155 |                 : _createCommentVNode("v-if", true)
156 |             ], 2 /* CLASS */))
157 |           }), 128 /* KEYED_FRAGMENT */))
158 |         ])
159 |       ], 512 /* NEED_PATCH */), [
160 |         [_vShow, todos.value.length]
161 |       ]),
162 |       _withDirectives(_createVNode("footer", _hoisted_9, [
163 |         _createVNode("span", _hoisted_10, [
164 |           _createVNode("strong", null, _toDisplayString(_unref(remaining)), 1 /* TEXT */),
165 |           _createVNode("span", null, _toDisplayString(_unref(remaining) === 1 ? 'item' : 'items') + " left", 1 /* TEXT */)
166 |         ]),
167 |         _createVNode("ul", _hoisted_11, [
168 |           _createVNode("li", null, [
169 |             _createVNode("a", {
170 |               href: "#/all",
171 |               class: { selected: visibility.value === 'all' }
172 |             }, "All", 2 /* CLASS */)
173 |           ]),
174 |           _createVNode("li", null, [
175 |             _createVNode("a", {
176 |               href: "#/active",
177 |               class: { selected: visibility.value === 'active' }
178 |             }, "Active", 2 /* CLASS */)
179 |           ]),
180 |           _createVNode("li", null, [
181 |             _createVNode("a", {
182 |               href: "#/completed",
183 |               class: { selected: visibility.value === 'completed' }
184 |             }, "Completed", 2 /* CLASS */)
185 |           ])
186 |         ]),
187 |         _withDirectives(_createVNode("button", {
188 |           class: "clear-completed",
189 |           onClick: removeCompleted
190 |         }, " Clear completed ", 512 /* NEED_PATCH */), [
191 |           [_vShow, todos.value.length > _unref(remaining)]
192 |         ])
193 |       ], 512 /* NEED_PATCH */), [
194 |         [_vShow, todos.value.length]
195 |       ])
196 |     ])
197 |   ]))
198 | }
199 | }
200 | 
201 | }
202 | export default __sfc__


--------------------------------------------------------------------------------
/todomvc.vue.min.js:
--------------------------------------------------------------------------------
1 | const v={id:"app"},f={class:"todoapp"},m={class:"header"},h=e("h1",null,"todos",-1),g={class:"main"},k=e("label",{for:"toggle-all"},"Mark all as complete",-1),y={class:"todo-list"},w={class:"view"},b={class:"footer"},C={class:"todo-count"},x={class:"filters"};import{ref as V,computed as K,watchEffect as S}from"vue";const U={setup(U){const D="todos-petite-vue",E={all:e=>e,active:e=>e.filter((e=>!e.completed)),completed:e=>e.filter((e=>e.completed))},O=V(JSON.parse(localStorage.getItem(D)||"[]")),A=V("all"),B=V(),I=K((()=>E[A.value](O.value))),J=K((()=>E.active(O.value).length));function M(e){O.value.forEach((l=>l.completed=e.target.checked))}function N(e){const l=e.target.value.trim();l&&(O.value.push({id:Date.now(),title:l,completed:!1}),e.target.value="")}function L(e){O.value.splice(O.value.indexOf(e),1)}let W="";function j(e){B.value&&(B.value=null,e.title=e.title.trim(),e.title||L(e))}function q(){O.value=E.active(O.value)}function z(){const e=window.location.hash.replace(/#\/?/,"");E[e]?A.value=e:(window.location.hash="",A.value="all")}return S((()=>{localStorage.setItem(D,JSON.stringify(O.value))})),window.addEventListener("hashchange",z),z(),(V,K)=>(n(),c("div",v,[e("section",f,[e("header",m,[h,e("input",{class:"new-todo",autofocus:"",placeholder:"What needs to be done?",onKeyup:l(N,["enter"])},null,40,["onKeyup"])]),u(e("section",g,[e("input",{id:"toggle-all",class:"toggle-all",type:"checkbox",checked:0===t(J),onChange:M},null,40,["checked"]),k,e("ul",y,[(n(!0),c(o,null,a(t(I),(t=>(n(),c("li",{class:["todo",{completed:t.completed,editing:t===B.value}],key:t.id},[e("div",w,[u(e("input",{class:"toggle",type:"checkbox","onUpdate:modelValue":e=>t.completed=e},null,8,["onUpdate:modelValue"]),[[s,t.completed]]),e("label",{onDblclick:e=>function(e){W=e.title,B.value=e}(t)},i(t.title),41,["onDblclick"]),e("button",{class:"destroy",onClick:e=>L(t)},null,8,["onClick"])]),t===B.value?u((n(),c("input",{key:0,class:"edit",type:"text","onUpdate:modelValue":e=>t.title=e,onVnodeMounted:K[1]||(K[1]=({el:e})=>e.focus()),onBlur:e=>j(t),onKeyup:[l((e=>j(t)),["enter"]),l((e=>function(e){B.value=null,e.title=W}(t)),["escape"])]},null,40,["onUpdate:modelValue","onBlur","onKeyup"])),[[d,t.title]]):p("v-if",!0)],2)))),128))])],512),[[r,O.value.length]]),u(e("footer",b,[e("span",C,[e("strong",null,i(t(J)),1),e("span",null,i(1===t(J)?"item":"items")+" left",1)]),e("ul",x,[e("li",null,[e("a",{href:"#/all",class:{selected:"all"===A.value}},"All",2)]),e("li",null,[e("a",{href:"#/active",class:{selected:"active"===A.value}},"Active",2)]),e("li",null,[e("a",{href:"#/completed",class:{selected:"completed"===A.value}},"Completed",2)])]),u(e("button",{class:"clear-completed",onClick:q}," Clear completed ",512),[[r,O.value.length>t(J)]])],512),[[r,O.value.length]])])]))}};


--------------------------------------------------------------------------------
/todomvc.vue.min.js.brotli:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yyx990803/vue-svelte-size-analysis/7bb60ff681a3f5016e8af26084e72100cd37a876/todomvc.vue.min.js.brotli


--------------------------------------------------------------------------------
/todomvc.vue.min.js.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yyx990803/vue-svelte-size-analysis/7bb60ff681a3f5016e8af26084e72100cd37a876/todomvc.vue.min.js.gz


--------------------------------------------------------------------------------
/vue-todomvc/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vite App</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="/main.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/vue-todomvc/main.js:
--------------------------------------------------------------------------------
 1 | import App from '../todomvc.vue'
 2 | 
 3 | import { createApp } from 'vue'
 4 | createApp(App).mount('#app')
 5 | 
 6 | // for SSR scenarios
 7 | 
 8 | // import { createSSRApp } from 'vue'
 9 | // createSSRApp(App).mount('#app')
10 | 


--------------------------------------------------------------------------------
/vue-todomvc/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.0.0",
 3 |   "name": "vue-todomvc",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build",
 7 |     "serve": "vite preview"
 8 |   },
 9 |   "dependencies": {
10 |     "vue": "^3.0.5"
11 |   },
12 |   "devDependencies": {
13 |     "@vitejs/plugin-vue": "^1.2.3",
14 |     "@vue/compiler-sfc": "^3.0.5",
15 |     "vite": "^2.3.8"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/vue-todomvc/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 |   define: {
 8 |     // dropping options API can further reduce Vue baseline size
 9 |     // __VUE_OPTIONS_API__: false
10 |   }
11 | })
12 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
  1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
  2 | # yarn lockfile v1
  3 | 
  4 | 
  5 | "@babel/helper-validator-identifier@^7.14.5":
  6 |   version "7.14.5"
  7 |   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
  8 |   integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
  9 | 
 10 | "@babel/parser@^7.12.0", "@babel/parser@^7.13.9":
 11 |   version "7.14.7"
 12 |   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.7.tgz#6099720c8839ca865a2637e6c85852ead0bdb595"
 13 |   integrity sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==
 14 | 
 15 | "@babel/types@^7.12.0", "@babel/types@^7.13.0":
 16 |   version "7.14.5"
 17 |   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
 18 |   integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==
 19 |   dependencies:
 20 |     "@babel/helper-validator-identifier" "^7.14.5"
 21 |     to-fast-properties "^2.0.0"
 22 | 
 23 | "@rollup/pluginutils@^4.1.0":
 24 |   version "4.1.0"
 25 |   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838"
 26 |   integrity sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==
 27 |   dependencies:
 28 |     estree-walker "^2.0.1"
 29 |     picomatch "^2.2.2"
 30 | 
 31 | "@sveltejs/vite-plugin-svelte@^1.0.0-next.11":
 32 |   version "1.0.0-next.11"
 33 |   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.11.tgz#1a415a1c4b1642a452e073438c63a73cfd203b51"
 34 |   integrity sha512-EYR1I145k5rflVqhPwk3442m3bkYimTKSHM9uO5KdomXzt+GS9ZSBJQE3/wy1Di9V8OnGa3oKpckI3OZsHkTIA==
 35 |   dependencies:
 36 |     "@rollup/pluginutils" "^4.1.0"
 37 |     chalk "^4.1.1"
 38 |     debug "^4.3.2"
 39 |     require-relative "^0.8.7"
 40 |     svelte-hmr "^0.14.4"
 41 | 
 42 | "@types/estree@^0.0.48":
 43 |   version "0.0.48"
 44 |   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.48.tgz#18dc8091b285df90db2f25aa7d906cfc394b7f74"
 45 |   integrity sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==
 46 | 
 47 | "@vitejs/plugin-vue@^1.2.3":
 48 |   version "1.2.4"
 49 |   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.2.4.tgz#a7aa6e6a31c556a8b781de730316deeecf7f56f2"
 50 |   integrity sha512-D/3H9plevPQGgQGwmV6eecvOnooLTecPR63HPffVVWPEhbfvmtYLWgznzs456NBb2DItiRTCIa1yWxvGqC+I8A==
 51 | 
 52 | "@vue/compiler-core@3.1.4":
 53 |   version "3.1.4"
 54 |   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.1.4.tgz#a3a74cf52e8f01af386d364ac8a099cbeb260424"
 55 |   integrity sha512-TnUz+1z0y74O/A4YKAbzsdUfamyHV73MihrEfvettWpm9bQKVoZd1nEmR1cGN9LsXWlwAvVQBetBlWdOjmQO5Q==
 56 |   dependencies:
 57 |     "@babel/parser" "^7.12.0"
 58 |     "@babel/types" "^7.12.0"
 59 |     "@vue/shared" "3.1.4"
 60 |     estree-walker "^2.0.1"
 61 |     source-map "^0.6.1"
 62 | 
 63 | "@vue/compiler-dom@3.1.4":
 64 |   version "3.1.4"
 65 |   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.1.4.tgz#bf3795e1449f32c965d38c4ea6d808ca05fdfc97"
 66 |   integrity sha512-3tG2ScHkghhUBuFwl9KgyZhrS8CPFZsO7hUDekJgIp5b1OMkROr4AvxHu6rRMl4WkyvYkvidFNBS2VfOnwa6Kw==
 67 |   dependencies:
 68 |     "@vue/compiler-core" "3.1.4"
 69 |     "@vue/shared" "3.1.4"
 70 | 
 71 | "@vue/compiler-sfc@^3.0.5":
 72 |   version "3.1.4"
 73 |   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.1.4.tgz#93e87db950e0711339c18baa7bb7d28d3522d7bc"
 74 |   integrity sha512-4KDQg60Khy3SgnF+V/TB2NZqzmM4TyGRmzsxqG1SebGdMSecCweFDSlI/F1vDYk6dKiCHgmpoT9A1sLxswkJ0A==
 75 |   dependencies:
 76 |     "@babel/parser" "^7.13.9"
 77 |     "@babel/types" "^7.13.0"
 78 |     "@types/estree" "^0.0.48"
 79 |     "@vue/compiler-core" "3.1.4"
 80 |     "@vue/compiler-dom" "3.1.4"
 81 |     "@vue/compiler-ssr" "3.1.4"
 82 |     "@vue/shared" "3.1.4"
 83 |     consolidate "^0.16.0"
 84 |     estree-walker "^2.0.1"
 85 |     hash-sum "^2.0.0"
 86 |     lru-cache "^5.1.1"
 87 |     magic-string "^0.25.7"
 88 |     merge-source-map "^1.1.0"
 89 |     postcss "^8.1.10"
 90 |     postcss-modules "^4.0.0"
 91 |     postcss-selector-parser "^6.0.4"
 92 |     source-map "^0.6.1"
 93 | 
 94 | "@vue/compiler-ssr@3.1.4":
 95 |   version "3.1.4"
 96 |   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.1.4.tgz#7f6eaac5b1851fc15c82c083e8179eb1216b303c"
 97 |   integrity sha512-Box8fCuCFPp0FuimIswjDkjwiSDCBkHvt/xVALyFkYCiIMWv2eR53fIjmlsnEHhcBuZ+VgRC+UanCTcKvSA1gA==
 98 |   dependencies:
 99 |     "@vue/compiler-dom" "3.1.4"
100 |     "@vue/shared" "3.1.4"
101 | 
102 | "@vue/reactivity@3.1.4":
103 |   version "3.1.4"
104 |   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.4.tgz#d926ed46fb0d48582ccf8665b062d37b5d35ba99"
105 |   integrity sha512-YDlgii2Cr9yAoKVZFzgY4j0mYlVT73986X3e5SPp6ifqckSEoFSUWXZK2Tb53TB/9qO29BEEbspnKD3m3wAwkA==
106 |   dependencies:
107 |     "@vue/shared" "3.1.4"
108 | 
109 | "@vue/runtime-core@3.1.4":
110 |   version "3.1.4"
111 |   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.1.4.tgz#3e30ae6ecbfff06df5adc9414491143191a375ba"
112 |   integrity sha512-qmVJgJuFxfT7M4qHQ4M6KqhKC66fjuswK+aBivE8dWiZ2rtIGl9gtJGpwqwjQEcKEBTOfvvrtrwBncYArJUO8Q==
113 |   dependencies:
114 |     "@vue/reactivity" "3.1.4"
115 |     "@vue/shared" "3.1.4"
116 | 
117 | "@vue/runtime-dom@3.1.4":
118 |   version "3.1.4"
119 |   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.1.4.tgz#acfeee200d5c45fc2cbdf7058cda1498f9b45849"
120 |   integrity sha512-vbmwgTxku1BU87Kw7r29adv0OIrDXCW0PslOPQT0O/9R5SqcXgS94Yj6zsztDjvghegenwIAPNLlDR1Auh5s+w==
121 |   dependencies:
122 |     "@vue/runtime-core" "3.1.4"
123 |     "@vue/shared" "3.1.4"
124 |     csstype "^2.6.8"
125 | 
126 | "@vue/shared@3.1.4":
127 |   version "3.1.4"
128 |   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.4.tgz#c14c461ec42ea2c1556e86f60b0354341d91adc3"
129 |   integrity sha512-6O45kZAmkLvzGLToBxEz4lR2W6kXohCtebV2UxjH9GXjd8X9AhEn68FN9eNanFtWNzvgw1hqd6HkPRVQalqf7Q==
130 | 
131 | ansi-styles@^4.1.0:
132 |   version "4.3.0"
133 |   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
134 |   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
135 |   dependencies:
136 |     color-convert "^2.0.1"
137 | 
138 | big.js@^5.2.2:
139 |   version "5.2.2"
140 |   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
141 |   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
142 | 
143 | bluebird@^3.7.2:
144 |   version "3.7.2"
145 |   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
146 |   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
147 | 
148 | chalk@^4.1.1:
149 |   version "4.1.1"
150 |   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
151 |   integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==
152 |   dependencies:
153 |     ansi-styles "^4.1.0"
154 |     supports-color "^7.1.0"
155 | 
156 | color-convert@^2.0.1:
157 |   version "2.0.1"
158 |   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
159 |   integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
160 |   dependencies:
161 |     color-name "~1.1.4"
162 | 
163 | color-name@~1.1.4:
164 |   version "1.1.4"
165 |   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
166 |   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
167 | 
168 | colorette@^1.2.2:
169 |   version "1.2.2"
170 |   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
171 |   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
172 | 
173 | consolidate@^0.16.0:
174 |   version "0.16.0"
175 |   resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.16.0.tgz#a11864768930f2f19431660a65906668f5fbdc16"
176 |   integrity sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ==
177 |   dependencies:
178 |     bluebird "^3.7.2"
179 | 
180 | cssesc@^3.0.0:
181 |   version "3.0.0"
182 |   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
183 |   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
184 | 
185 | csstype@^2.6.8:
186 |   version "2.6.17"
187 |   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e"
188 |   integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==
189 | 
190 | debug@^4.3.2:
191 |   version "4.3.2"
192 |   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
193 |   integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
194 |   dependencies:
195 |     ms "2.1.2"
196 | 
197 | emojis-list@^3.0.0:
198 |   version "3.0.0"
199 |   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
200 |   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
201 | 
202 | esbuild@^0.12.8:
203 |   version "0.12.14"
204 |   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.14.tgz#43157dbd0b36d939247d4eb4909a4886ac40f82e"
205 |   integrity sha512-z8p+6FGiplR7a3pPonXREbm+8IeXjBGvDpVidZmGB/AJMsJSfGCU+n7KOMCazA9AwvagadRWBhiKorC0w9WJvw==
206 | 
207 | estree-walker@^2.0.1:
208 |   version "2.0.2"
209 |   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
210 |   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
211 | 
212 | fsevents@~2.3.2:
213 |   version "2.3.2"
214 |   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
215 |   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
216 | 
217 | function-bind@^1.1.1:
218 |   version "1.1.1"
219 |   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
220 |   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
221 | 
222 | generic-names@^2.0.1:
223 |   version "2.0.1"
224 |   resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872"
225 |   integrity sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ==
226 |   dependencies:
227 |     loader-utils "^1.1.0"
228 | 
229 | has-flag@^4.0.0:
230 |   version "4.0.0"
231 |   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
232 |   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
233 | 
234 | has@^1.0.3:
235 |   version "1.0.3"
236 |   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
237 |   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
238 |   dependencies:
239 |     function-bind "^1.1.1"
240 | 
241 | hash-sum@^2.0.0:
242 |   version "2.0.0"
243 |   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
244 |   integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
245 | 
246 | icss-replace-symbols@^1.1.0:
247 |   version "1.1.0"
248 |   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
249 |   integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
250 | 
251 | icss-utils@^5.0.0:
252 |   version "5.1.0"
253 |   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
254 |   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
255 | 
256 | is-core-module@^2.2.0:
257 |   version "2.4.0"
258 |   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
259 |   integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==
260 |   dependencies:
261 |     has "^1.0.3"
262 | 
263 | json5@^1.0.1:
264 |   version "1.0.1"
265 |   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
266 |   integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
267 |   dependencies:
268 |     minimist "^1.2.0"
269 | 
270 | loader-utils@^1.1.0:
271 |   version "1.4.0"
272 |   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
273 |   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
274 |   dependencies:
275 |     big.js "^5.2.2"
276 |     emojis-list "^3.0.0"
277 |     json5 "^1.0.1"
278 | 
279 | lodash.camelcase@^4.3.0:
280 |   version "4.3.0"
281 |   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
282 |   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
283 | 
284 | lru-cache@^5.1.1:
285 |   version "5.1.1"
286 |   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
287 |   integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
288 |   dependencies:
289 |     yallist "^3.0.2"
290 | 
291 | magic-string@^0.25.7:
292 |   version "0.25.7"
293 |   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
294 |   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
295 |   dependencies:
296 |     sourcemap-codec "^1.4.4"
297 | 
298 | merge-source-map@^1.1.0:
299 |   version "1.1.0"
300 |   resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
301 |   integrity sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==
302 |   dependencies:
303 |     source-map "^0.6.1"
304 | 
305 | minimist@^1.2.0:
306 |   version "1.2.5"
307 |   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
308 |   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
309 | 
310 | ms@2.1.2:
311 |   version "2.1.2"
312 |   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
313 |   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
314 | 
315 | nanoid@^3.1.23:
316 |   version "3.1.23"
317 |   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
318 |   integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
319 | 
320 | path-parse@^1.0.6:
321 |   version "1.0.7"
322 |   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
323 |   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
324 | 
325 | picomatch@^2.2.2:
326 |   version "2.3.0"
327 |   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
328 |   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
329 | 
330 | postcss-modules-extract-imports@^3.0.0:
331 |   version "3.0.0"
332 |   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
333 |   integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
334 | 
335 | postcss-modules-local-by-default@^4.0.0:
336 |   version "4.0.0"
337 |   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
338 |   integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
339 |   dependencies:
340 |     icss-utils "^5.0.0"
341 |     postcss-selector-parser "^6.0.2"
342 |     postcss-value-parser "^4.1.0"
343 | 
344 | postcss-modules-scope@^3.0.0:
345 |   version "3.0.0"
346 |   resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
347 |   integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
348 |   dependencies:
349 |     postcss-selector-parser "^6.0.4"
350 | 
351 | postcss-modules-values@^4.0.0:
352 |   version "4.0.0"
353 |   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
354 |   integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
355 |   dependencies:
356 |     icss-utils "^5.0.0"
357 | 
358 | postcss-modules@^4.0.0:
359 |   version "4.1.3"
360 |   resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-4.1.3.tgz#c4c4c41d98d97d24c70e88dacfc97af5a4b3e21d"
361 |   integrity sha512-dBT39hrXe4OAVYJe/2ZuIZ9BzYhOe7t+IhedYeQ2OxKwDpAGlkEN/fR0fGnrbx4BvgbMReRX4hCubYK9cE/pJQ==
362 |   dependencies:
363 |     generic-names "^2.0.1"
364 |     icss-replace-symbols "^1.1.0"
365 |     lodash.camelcase "^4.3.0"
366 |     postcss-modules-extract-imports "^3.0.0"
367 |     postcss-modules-local-by-default "^4.0.0"
368 |     postcss-modules-scope "^3.0.0"
369 |     postcss-modules-values "^4.0.0"
370 |     string-hash "^1.1.1"
371 | 
372 | postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
373 |   version "6.0.6"
374 |   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
375 |   integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
376 |   dependencies:
377 |     cssesc "^3.0.0"
378 |     util-deprecate "^1.0.2"
379 | 
380 | postcss-value-parser@^4.1.0:
381 |   version "4.1.0"
382 |   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
383 |   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
384 | 
385 | postcss@^8.1.10, postcss@^8.3.4:
386 |   version "8.3.5"
387 |   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
388 |   integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
389 |   dependencies:
390 |     colorette "^1.2.2"
391 |     nanoid "^3.1.23"
392 |     source-map-js "^0.6.2"
393 | 
394 | require-relative@^0.8.7:
395 |   version "0.8.7"
396 |   resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
397 |   integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
398 | 
399 | resolve@^1.20.0:
400 |   version "1.20.0"
401 |   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
402 |   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
403 |   dependencies:
404 |     is-core-module "^2.2.0"
405 |     path-parse "^1.0.6"
406 | 
407 | rollup@^2.38.5:
408 |   version "2.52.7"
409 |   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.52.7.tgz#e15a8bf734f6e4c204b7cdf33521151310250cb2"
410 |   integrity sha512-55cSH4CCU6MaPr9TAOyrIC+7qFCHscL7tkNsm1MBfIJRRqRbCEY0mmeFn4Wg8FKsHtEH8r389Fz38r/o+kgXLg==
411 |   optionalDependencies:
412 |     fsevents "~2.3.2"
413 | 
414 | source-map-js@^0.6.2:
415 |   version "0.6.2"
416 |   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
417 |   integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
418 | 
419 | source-map@^0.6.1:
420 |   version "0.6.1"
421 |   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
422 |   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
423 | 
424 | sourcemap-codec@^1.4.4:
425 |   version "1.4.8"
426 |   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
427 |   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
428 | 
429 | string-hash@^1.1.1:
430 |   version "1.1.3"
431 |   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
432 |   integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
433 | 
434 | supports-color@^7.1.0:
435 |   version "7.2.0"
436 |   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
437 |   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
438 |   dependencies:
439 |     has-flag "^4.0.0"
440 | 
441 | svelte-hmr@^0.14.4:
442 |   version "0.14.4"
443 |   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.4.tgz#b7ef2bfeef23916e0e912828c50645ca572ac355"
444 |   integrity sha512-kItFF7vqzStckSigoFmMnxJpTOdB9TWnQAW6Js+yAB4277tLbJIIE5KBlGHNmJNpA7MguqidsPB27Uw5UzQPCA==
445 | 
446 | svelte@^3.37.0:
447 |   version "3.38.3"
448 |   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.3.tgz#e15a1da98ee4b10162a6c8cb4c80aa86b2b589ed"
449 |   integrity sha512-N7bBZJH0iF24wsalFZF+fVYMUOigaAUQMIcEKHO3jstK/iL8VmP9xE+P0/a76+FkNcWt+TDv2Gx1taUoUscrvw==
450 | 
451 | to-fast-properties@^2.0.0:
452 |   version "2.0.0"
453 |   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
454 |   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
455 | 
456 | util-deprecate@^1.0.2:
457 |   version "1.0.2"
458 |   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
459 |   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
460 | 
461 | vite@^2.3.8:
462 |   version "2.3.8"
463 |   resolved "https://registry.yarnpkg.com/vite/-/vite-2.3.8.tgz#42e3e03953859fd410e4e6ab3d1cca0aab2adc3c"
464 |   integrity sha512-QiEx+iqNnJntSgSF2fWRQvRey9pORIrtNJzNyBJXwc+BdzWs83FQolX84cTBo393cfhObrtWa6180dAa4NLDiQ==
465 |   dependencies:
466 |     esbuild "^0.12.8"
467 |     postcss "^8.3.4"
468 |     resolve "^1.20.0"
469 |     rollup "^2.38.5"
470 |   optionalDependencies:
471 |     fsevents "~2.3.2"
472 | 
473 | vue@^3.0.5:
474 |   version "3.1.4"
475 |   resolved "https://registry.yarnpkg.com/vue/-/vue-3.1.4.tgz#120d6818c51eaa35d0879e5bc1cff60135bc69fd"
476 |   integrity sha512-p8dcdyeCgmaAiZsbLyDkmOLcFGZb/jEVdCLW65V68LRCXTNX8jKsgah2F7OZ/v/Ai2V0Fb1MNO0vz/GFqsPVMA==
477 |   dependencies:
478 |     "@vue/compiler-dom" "3.1.4"
479 |     "@vue/runtime-dom" "3.1.4"
480 |     "@vue/shared" "3.1.4"
481 | 
482 | yallist@^3.0.2:
483 |   version "3.1.1"
484 |   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
485 |   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
486 | 


--------------------------------------------------------------------------------