create-svelte - npm Package Compare versions

Comparing version 2.0.0-next.74 to 2.0.0-next.75

CHANGELOG.md

 # create-svelte
 
+## 2.0.0-next.75
+
+### Patch Changes
+
+- fe68e13: Simplify component file names
+
 ## 2.0.0-next.74
@@ -4,0 +10,0 @@

dist/templates/default/files.js.json

@@ -11,10 +11,6 @@ [
 	{
-		"name": "src/lib/Counter/index.svelte",
+		"name": "src/lib/Counter.svelte",
 		"contents": "<script>\n\timport { spring } from 'svelte/motion';\n\n\tlet count = 0;\n\n\tconst displayed_count = spring();\n\t$: displayed_count.set(count);\n\t$: offset = modulo($displayed_count, 1);\n\n\tfunction modulo(n, m) {\n\t\t// handle negative numbers\n\t\treturn ((n % m) + m) % m;\n\t}\n</script>\n\n<div class=\"counter\">\n\t<button on:click={() => (count -= 1)} aria-label=\"Decrease the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5\" />\n\t\t</svg>\n\t</button>\n\n\t<div class=\"counter-viewport\">\n\t\t<div class=\"counter-digits\" style=\"transform: translate(0, {100 * offset}%)\">\n\t\t\t<strong style=\"top: -100%\" aria-hidden=\"true\">{Math.floor($displayed_count + 1)}</strong>\n\t\t\t<strong>{Math.floor($displayed_count)}</strong>\n\t\t</div>\n\t</div>\n\n\t<button on:click={() => (count += 1)} aria-label=\"Increase the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5 M0.5,0 L0.5,1\" />\n\t\t</svg>\n\t</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\tborder-top: 1px solid rgba(0, 0, 0, 0.1);\n\t\tborder-bottom: 1px solid rgba(0, 0, 0, 0.1);\n\t\tmargin: 1rem 0;\n\t}\n\n\t.counter button {\n\t\twidth: 2em;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 0;\n\t\tbackground-color: transparent;\n\t\tcolor: var(--text-color);\n\t\tfont-size: 2rem;\n\t}\n\n\t.counter button:hover {\n\t\tbackground-color: var(--secondary-color);\n\t}\n\n\tsvg {\n\t\twidth: 25%;\n\t\theight: 25%;\n\t}\n\n\tpath {\n\t\tvector-effect: non-scaling-stroke;\n\t\tstroke-width: 2px;\n\t\tstroke: var(--text-color);\n\t}\n\n\t.counter-viewport {\n\t\twidth: 8em;\n\t\theight: 4em;\n\t\toverflow: hidden;\n\t\ttext-align: center;\n\t\tposition: relative;\n\t}\n\n\t.counter-viewport strong {\n\t\tposition: absolute;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfont-weight: 400;\n\t\tcolor: var(--accent-color);\n\t\tfont-size: 4rem;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.counter-digits {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n</style>\n"
 	},
 	{
-		"name": "src/lib/Header/index.svelte",
-		"contents": "<script>\n\timport { page } from '$app/stores';\n\timport logo from './svelte-logo.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://kit.svelte.dev\">\n\t\t\t<img src={logo} alt=\"SvelteKit\" />\n\t\t</a>\n\t</div>\n\n\t<nav>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z\" />\n\t\t</svg>\n\t\t<ul>\n\t\t\t<li class:active={$page.path === '/'}><a sveltekit:prefetch href=\"/\">Home</a></li>\n\t\t\t<li class:active={$page.path === '/about'}><a sveltekit:prefetch href=\"/about\">About</a></li>\n\t\t\t<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href=\"/todos\">Todos</a></li>\n\t\t</ul>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z\" />\n\t\t</svg>\n\t</nav>\n\n\t<div class=\"corner\">\n\t\t<!-- TODO put something else here? github link? -->\n\t</div>\n</header>\n\n<style>\n\theader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.corner {\n\t\twidth: 3em;\n\t\theight: 3em;\n\t}\n\n\t.corner a {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.corner img {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tobject-fit: contain;\n\t}\n\n\tnav {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\t--background: rgba(255, 255, 255, 0.7);\n\t}\n\n\tsvg {\n\t\twidth: 2em;\n\t\theight: 3em;\n\t\tdisplay: block;\n\t}\n\n\tpath {\n\t\tfill: var(--background);\n\t}\n\n\tul {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\theight: 3em;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tlist-style: none;\n\t\tbackground: var(--background);\n\t\tbackground-size: contain;\n\t}\n\n\tli {\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\n\tli.active::before {\n\t\t--size: 6px;\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: calc(50% - var(--size));\n\t\tborder: var(--size) solid transparent;\n\t\tborder-top: var(--size) solid var(--accent-color);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 1em;\n\t\tcolor: var(--heading-color);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 10%;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--accent-color);\n\t}\n</style>\n"
-	},
-	{
 		"name": "src/lib/form.js",
@@ -24,4 +20,8 @@ "contents": "// this action (https://svelte.dev/tutorial/actions) allows us to\n// progressively enhance a <form> that already works without JS\nexport function enhance(form, { pending, error, result }) {\n\tlet current_token;\n\n\tasync function handle_submit(e) {\n\t\tconst token = (current_token = {});\n\n\t\te.preventDefault();\n\n\t\tconst body = new FormData(form);\n\n\t\tif (pending) pending(body, form);\n\n\t\ttry {\n\t\t\tconst res = await fetch(form.action, {\n\t\t\t\tmethod: form.method,\n\t\t\t\theaders: {\n\t\t\t\t\taccept: 'application/json'\n\t\t\t\t},\n\t\t\t\tbody\n\t\t\t});\n\n\t\t\tif (token !== current_token) return;\n\n\t\t\tif (res.ok) {\n\t\t\t\tresult(res, form);\n\t\t\t} else if (error) {\n\t\t\t\terror(res, null, form);\n\t\t\t} else {\n\t\t\t\tconsole.error(await res.text());\n\t\t\t}\n\t\t} catch (e) {\n\t\t\tif (error) {\n\t\t\t\terror(null, e, form);\n\t\t\t} else {\n\t\t\t\tthrow e;\n\t\t\t}\n\t\t}\n\t}\n\n\tform.addEventListener('submit', handle_submit);\n\n\treturn {\n\t\tdestroy() {\n\t\t\tform.removeEventListener('submit', handle_submit);\n\t\t}\n\t};\n}\n"
 	{
+		"name": "src/lib/header/Header.svelte",
+		"contents": "<script>\n\timport { page } from '$app/stores';\n\timport logo from './svelte-logo.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://kit.svelte.dev\">\n\t\t\t<img src={logo} alt=\"SvelteKit\" />\n\t\t</a>\n\t</div>\n\n\t<nav>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z\" />\n\t\t</svg>\n\t\t<ul>\n\t\t\t<li class:active={$page.path === '/'}><a sveltekit:prefetch href=\"/\">Home</a></li>\n\t\t\t<li class:active={$page.path === '/about'}><a sveltekit:prefetch href=\"/about\">About</a></li>\n\t\t\t<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href=\"/todos\">Todos</a></li>\n\t\t</ul>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z\" />\n\t\t</svg>\n\t</nav>\n\n\t<div class=\"corner\">\n\t\t<!-- TODO put something else here? github link? -->\n\t</div>\n</header>\n\n<style>\n\theader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.corner {\n\t\twidth: 3em;\n\t\theight: 3em;\n\t}\n\n\t.corner a {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.corner img {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tobject-fit: contain;\n\t}\n\n\tnav {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\t--background: rgba(255, 255, 255, 0.7);\n\t}\n\n\tsvg {\n\t\twidth: 2em;\n\t\theight: 3em;\n\t\tdisplay: block;\n\t}\n\n\tpath {\n\t\tfill: var(--background);\n\t}\n\n\tul {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\theight: 3em;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tlist-style: none;\n\t\tbackground: var(--background);\n\t\tbackground-size: contain;\n\t}\n\n\tli {\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\n\tli.active::before {\n\t\t--size: 6px;\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: calc(50% - var(--size));\n\t\tborder: var(--size) solid transparent;\n\t\tborder-top: var(--size) solid var(--accent-color);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 1em;\n\t\tcolor: var(--heading-color);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 10%;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--accent-color);\n\t}\n</style>\n"
+	},
+	{
 		"name": "src/routes/__layout.svelte",
-		"contents": "<script>\n\timport Header from '$lib/Header/index.svelte';\n\timport '../app.css';\n</script>\n\n<Header />\n\n<main>\n\t<slot />\n</main>\n\n<footer>\n\t<p>visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to learn SvelteKit</p>\n</footer>\n\n<style>\n\tmain {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 1rem;\n\t\twidth: 100%;\n\t\tmax-width: 1024px;\n\t\tmargin: 0 auto;\n\t\tbox-sizing: border-box;\n\t}\n\n\tfooter {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 40px;\n\t}\n\n\tfooter a {\n\t\tfont-weight: bold;\n\t}\n\n\t@media (min-width: 480px) {\n\t\tfooter {\n\t\t\tpadding: 40px 0;\n\t\t}\n\t}\n</style>\n"
+		"contents": "<script>\n\timport Header from '$lib/header/Header.svelte';\n\timport '../app.css';\n</script>\n\n<Header />\n\n<main>\n\t<slot />\n</main>\n\n<footer>\n\t<p>visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to learn SvelteKit</p>\n</footer>\n\n<style>\n\tmain {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 1rem;\n\t\twidth: 100%;\n\t\tmax-width: 1024px;\n\t\tmargin: 0 auto;\n\t\tbox-sizing: border-box;\n\t}\n\n\tfooter {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 40px;\n\t}\n\n\tfooter a {\n\t\tfont-weight: bold;\n\t}\n\n\t@media (min-width: 480px) {\n\t\tfooter {\n\t\t\tpadding: 40px 0;\n\t\t}\n\t}\n</style>\n"
 	},
@@ -34,3 +34,3 @@ {
 		"name": "src/routes/index.svelte",
-		"contents": "<script context=\"module\">\n\texport const prerender = true;\n</script>\n\n<script>\n\timport Counter from '$lib/Counter/index.svelte';\n</script>\n\n<svelte:head>\n\t<title>Home</title>\n</svelte:head>\n\n<section>\n\t<h1>\n\t\t<div class=\"welcome\">\n\t\t\t<picture>\n\t\t\t\t<source srcset=\"svelte-welcome.webp\" type=\"image/webp\" />\n\t\t\t\t<img src=\"svelte-welcome.png\" alt=\"Welcome\" />\n\t\t\t</picture>\n\t\t</div>\n\n\t\tto your new<br />SvelteKit app\n\t</h1>\n\n\t<h2>\n\t\ttry editing <strong>src/routes/index.svelte</strong>\n\t</h2>\n\n\t<Counter />\n</section>\n\n<style>\n\tsection {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\th1 {\n\t\twidth: 100%;\n\t}\n\n\t.welcome {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tpadding: 0 0 calc(100% * 495 / 2048) 0;\n\t}\n\n\t.welcome img {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttop: 0;\n\t\tdisplay: block;\n\t}\n</style>\n"
+		"contents": "<script context=\"module\">\n\texport const prerender = true;\n</script>\n\n<script>\n\timport Counter from '$lib/Counter.svelte';\n</script>\n\n<svelte:head>\n\t<title>Home</title>\n</svelte:head>\n\n<section>\n\t<h1>\n\t\t<div class=\"welcome\">\n\t\t\t<picture>\n\t\t\t\t<source srcset=\"svelte-welcome.webp\" type=\"image/webp\" />\n\t\t\t\t<img src=\"svelte-welcome.png\" alt=\"Welcome\" />\n\t\t\t</picture>\n\t\t</div>\n\n\t\tto your new<br />SvelteKit app\n\t</h1>\n\n\t<h2>\n\t\ttry editing <strong>src/routes/index.svelte</strong>\n\t</h2>\n\n\t<Counter />\n</section>\n\n<style>\n\tsection {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\th1 {\n\t\twidth: 100%;\n\t}\n\n\t.welcome {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tpadding: 0 0 calc(100% * 495 / 2048) 0;\n\t}\n\n\t.welcome img {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttop: 0;\n\t\tdisplay: block;\n\t}\n</style>\n"
 	},
@@ -37,0 +37,0 @@ {

dist/templates/default/files.ts.json

@@ -11,10 +11,6 @@ [
 	{
-		"name": "src/lib/Counter/index.svelte",
+		"name": "src/lib/Counter.svelte",
 		"contents": "<script lang=\"ts\">\n\timport { spring } from 'svelte/motion';\n\n\tlet count = 0;\n\n\tconst displayed_count = spring();\n\t$: displayed_count.set(count);\n\t$: offset = modulo($displayed_count, 1);\n\n\tfunction modulo(n: number, m: number) {\n\t\t// handle negative numbers\n\t\treturn ((n % m) + m) % m;\n\t}\n</script>\n\n<div class=\"counter\">\n\t<button on:click={() => (count -= 1)} aria-label=\"Decrease the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5\" />\n\t\t</svg>\n\t</button>\n\n\t<div class=\"counter-viewport\">\n\t\t<div class=\"counter-digits\" style=\"transform: translate(0, {100 * offset}%)\">\n\t\t\t<strong style=\"top: -100%\" aria-hidden=\"true\">{Math.floor($displayed_count + 1)}</strong>\n\t\t\t<strong>{Math.floor($displayed_count)}</strong>\n\t\t</div>\n\t</div>\n\n\t<button on:click={() => (count += 1)} aria-label=\"Increase the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5 M0.5,0 L0.5,1\" />\n\t\t</svg>\n\t</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\tborder-top: 1px solid rgba(0, 0, 0, 0.1);\n\t\tborder-bottom: 1px solid rgba(0, 0, 0, 0.1);\n\t\tmargin: 1rem 0;\n\t}\n\n\t.counter button {\n\t\twidth: 2em;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 0;\n\t\tbackground-color: transparent;\n\t\tcolor: var(--text-color);\n\t\tfont-size: 2rem;\n\t}\n\n\t.counter button:hover {\n\t\tbackground-color: var(--secondary-color);\n\t}\n\n\tsvg {\n\t\twidth: 25%;\n\t\theight: 25%;\n\t}\n\n\tpath {\n\t\tvector-effect: non-scaling-stroke;\n\t\tstroke-width: 2px;\n\t\tstroke: var(--text-color);\n\t}\n\n\t.counter-viewport {\n\t\twidth: 8em;\n\t\theight: 4em;\n\t\toverflow: hidden;\n\t\ttext-align: center;\n\t\tposition: relative;\n\t}\n\n\t.counter-viewport strong {\n\t\tposition: absolute;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfont-weight: 400;\n\t\tcolor: var(--accent-color);\n\t\tfont-size: 4rem;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.counter-digits {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n</style>\n"
 	},
 	{
-		"name": "src/lib/Header/index.svelte",
-		"contents": "<script lang=\"ts\">\n\timport { page } from '$app/stores';\n\timport logo from './svelte-logo.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://kit.svelte.dev\">\n\t\t\t<img src={logo} alt=\"SvelteKit\" />\n\t\t</a>\n\t</div>\n\n\t<nav>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z\" />\n\t\t</svg>\n\t\t<ul>\n\t\t\t<li class:active={$page.path === '/'}><a sveltekit:prefetch href=\"/\">Home</a></li>\n\t\t\t<li class:active={$page.path === '/about'}><a sveltekit:prefetch href=\"/about\">About</a></li>\n\t\t\t<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href=\"/todos\">Todos</a></li>\n\t\t</ul>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z\" />\n\t\t</svg>\n\t</nav>\n\n\t<div class=\"corner\">\n\t\t<!-- TODO put something else here? github link? -->\n\t</div>\n</header>\n\n<style>\n\theader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.corner {\n\t\twidth: 3em;\n\t\theight: 3em;\n\t}\n\n\t.corner a {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.corner img {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tobject-fit: contain;\n\t}\n\n\tnav {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\t--background: rgba(255, 255, 255, 0.7);\n\t}\n\n\tsvg {\n\t\twidth: 2em;\n\t\theight: 3em;\n\t\tdisplay: block;\n\t}\n\n\tpath {\n\t\tfill: var(--background);\n\t}\n\n\tul {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\theight: 3em;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tlist-style: none;\n\t\tbackground: var(--background);\n\t\tbackground-size: contain;\n\t}\n\n\tli {\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\n\tli.active::before {\n\t\t--size: 6px;\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: calc(50% - var(--size));\n\t\tborder: var(--size) solid transparent;\n\t\tborder-top: var(--size) solid var(--accent-color);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 1em;\n\t\tcolor: var(--heading-color);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 10%;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--accent-color);\n\t}\n</style>\n"
-	},
-	{
 		"name": "src/lib/form.ts",
@@ -24,2 +20,6 @@ "contents": "// this action (https://svelte.dev/tutorial/actions) allows us to\n// progressively enhance a <form> that already works without JS\nexport function enhance(\n\tform: HTMLFormElement,\n\t{\n\t\tpending,\n\t\terror,\n\t\tresult\n\t}: {\n\t\tpending?: (data: FormData, form: HTMLFormElement) => void;\n\t\terror?: (res: Response, error: Error, form: HTMLFormElement) => void;\n\t\tresult: (res: Response, form: HTMLFormElement) => void;\n\t}\n) {\n\tlet current_token: {};\n\n\tasync function handle_submit(e: Event) {\n\t\tconst token = (current_token = {});\n\n\t\te.preventDefault();\n\n\t\tconst body = new FormData(form);\n\n\t\tif (pending) pending(body, form);\n\n\t\ttry {\n\t\t\tconst res = await fetch(form.action, {\n\t\t\t\tmethod: form.method,\n\t\t\t\theaders: {\n\t\t\t\t\taccept: 'application/json'\n\t\t\t\t},\n\t\t\t\tbody\n\t\t\t});\n\n\t\t\tif (token !== current_token) return;\n\n\t\t\tif (res.ok) {\n\t\t\t\tresult(res, form);\n\t\t\t} else if (error) {\n\t\t\t\terror(res, null, form);\n\t\t\t} else {\n\t\t\t\tconsole.error(await res.text());\n\t\t\t}\n\t\t} catch (e) {\n\t\t\tif (error) {\n\t\t\t\terror(null, e, form);\n\t\t\t} else {\n\t\t\t\tthrow e;\n\t\t\t}\n\t\t}\n\t}\n\n\tform.addEventListener('submit', handle_submit);\n\n\treturn {\n\t\tdestroy() {\n\t\t\tform.removeEventListener('submit', handle_submit);\n\t\t}\n\t};\n}\n"
 	{
+		"name": "src/lib/header/Header.svelte",
+		"contents": "<script lang=\"ts\">\n\timport { page } from '$app/stores';\n\timport logo from './svelte-logo.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://kit.svelte.dev\">\n\t\t\t<img src={logo} alt=\"SvelteKit\" />\n\t\t</a>\n\t</div>\n\n\t<nav>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z\" />\n\t\t</svg>\n\t\t<ul>\n\t\t\t<li class:active={$page.path === '/'}><a sveltekit:prefetch href=\"/\">Home</a></li>\n\t\t\t<li class:active={$page.path === '/about'}><a sveltekit:prefetch href=\"/about\">About</a></li>\n\t\t\t<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href=\"/todos\">Todos</a></li>\n\t\t</ul>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z\" />\n\t\t</svg>\n\t</nav>\n\n\t<div class=\"corner\">\n\t\t<!-- TODO put something else here? github link? -->\n\t</div>\n</header>\n\n<style>\n\theader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.corner {\n\t\twidth: 3em;\n\t\theight: 3em;\n\t}\n\n\t.corner a {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.corner img {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tobject-fit: contain;\n\t}\n\n\tnav {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\t--background: rgba(255, 255, 255, 0.7);\n\t}\n\n\tsvg {\n\t\twidth: 2em;\n\t\theight: 3em;\n\t\tdisplay: block;\n\t}\n\n\tpath {\n\t\tfill: var(--background);\n\t}\n\n\tul {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\theight: 3em;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tlist-style: none;\n\t\tbackground: var(--background);\n\t\tbackground-size: contain;\n\t}\n\n\tli {\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\n\tli.active::before {\n\t\t--size: 6px;\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: calc(50% - var(--size));\n\t\tborder: var(--size) solid transparent;\n\t\tborder-top: var(--size) solid var(--accent-color);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 1em;\n\t\tcolor: var(--heading-color);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 10%;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--accent-color);\n\t}\n</style>\n"
+	},
+	{
 		"name": "src/lib/types.d.ts",
@@ -30,3 +30,3 @@ "contents": "/**\n * Can be made globally available by placing this\n * inside `global.d.ts` and removing `export` keyword\n */\nexport interface Locals {\n\tuserid: string;\n}\n"
 		"name": "src/routes/__layout.svelte",
-		"contents": "<script lang=\"ts\">\n\timport Header from '$lib/Header/index.svelte';\n\timport '../app.css';\n</script>\n\n<Header />\n\n<main>\n\t<slot />\n</main>\n\n<footer>\n\t<p>visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to learn SvelteKit</p>\n</footer>\n\n<style>\n\tmain {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 1rem;\n\t\twidth: 100%;\n\t\tmax-width: 1024px;\n\t\tmargin: 0 auto;\n\t\tbox-sizing: border-box;\n\t}\n\n\tfooter {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 40px;\n\t}\n\n\tfooter a {\n\t\tfont-weight: bold;\n\t}\n\n\t@media (min-width: 480px) {\n\t\tfooter {\n\t\t\tpadding: 40px 0;\n\t\t}\n\t}\n</style>\n"
+		"contents": "<script lang=\"ts\">\n\timport Header from '$lib/header/Header.svelte';\n\timport '../app.css';\n</script>\n\n<Header />\n\n<main>\n\t<slot />\n</main>\n\n<footer>\n\t<p>visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to learn SvelteKit</p>\n</footer>\n\n<style>\n\tmain {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 1rem;\n\t\twidth: 100%;\n\t\tmax-width: 1024px;\n\t\tmargin: 0 auto;\n\t\tbox-sizing: border-box;\n\t}\n\n\tfooter {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 40px;\n\t}\n\n\tfooter a {\n\t\tfont-weight: bold;\n\t}\n\n\t@media (min-width: 480px) {\n\t\tfooter {\n\t\t\tpadding: 40px 0;\n\t\t}\n\t}\n</style>\n"
 	},
@@ -39,3 +39,3 @@ {
 		"name": "src/routes/index.svelte",
-		"contents": "<script context=\"module\" lang=\"ts\">\n\texport const prerender = true;\n</script>\n\n<script lang=\"ts\">\n\timport Counter from '$lib/Counter/index.svelte';\n</script>\n\n<svelte:head>\n\t<title>Home</title>\n</svelte:head>\n\n<section>\n\t<h1>\n\t\t<div class=\"welcome\">\n\t\t\t<picture>\n\t\t\t\t<source srcset=\"svelte-welcome.webp\" type=\"image/webp\" />\n\t\t\t\t<img src=\"svelte-welcome.png\" alt=\"Welcome\" />\n\t\t\t</picture>\n\t\t</div>\n\n\t\tto your new<br />SvelteKit app\n\t</h1>\n\n\t<h2>\n\t\ttry editing <strong>src/routes/index.svelte</strong>\n\t</h2>\n\n\t<Counter />\n</section>\n\n<style>\n\tsection {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\th1 {\n\t\twidth: 100%;\n\t}\n\n\t.welcome {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tpadding: 0 0 calc(100% * 495 / 2048) 0;\n\t}\n\n\t.welcome img {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttop: 0;\n\t\tdisplay: block;\n\t}\n</style>\n"
+		"contents": "<script context=\"module\" lang=\"ts\">\n\texport const prerender = true;\n</script>\n\n<script lang=\"ts\">\n\timport Counter from '$lib/Counter.svelte';\n</script>\n\n<svelte:head>\n\t<title>Home</title>\n</svelte:head>\n\n<section>\n\t<h1>\n\t\t<div class=\"welcome\">\n\t\t\t<picture>\n\t\t\t\t<source srcset=\"svelte-welcome.webp\" type=\"image/webp\" />\n\t\t\t\t<img src=\"svelte-welcome.png\" alt=\"Welcome\" />\n\t\t\t</picture>\n\t\t</div>\n\n\t\tto your new<br />SvelteKit app\n\t</h1>\n\n\t<h2>\n\t\ttry editing <strong>src/routes/index.svelte</strong>\n\t</h2>\n\n\t<Counter />\n</section>\n\n<style>\n\tsection {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\th1 {\n\t\twidth: 100%;\n\t}\n\n\t.welcome {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tpadding: 0 0 calc(100% * 495 / 2048) 0;\n\t}\n\n\t.welcome img {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttop: 0;\n\t\tdisplay: block;\n\t}\n</style>\n"
 	},
@@ -42,0 +42,0 @@ {

package.json

 {
 	"name": "create-svelte",
-	"version": "2.0.0-next.74",
+	"version": "2.0.0-next.75",
 	"bin": "./bin.js",
@@ -10,3 +10,3 @@ "dependencies": {
 	"devDependencies": {
-		"@sveltejs/kit": "1.0.0-next.124",
+		"@sveltejs/kit": "1.0.0-next.125",
 		"@types/gitignore-parser": "^0.0.0",
@@ -13,0 +13,0 @@ "@types/prettier": "^2.2.3",

No alert changes

Improved metrics

Total package byte prevSize

550149

increased by0.01%

No dependency changes