create-svelte - npm Package Compare versions

Comparing version 2.0.0-next.61 to 2.0.0-next.62

CHANGELOG.md

 # create-svelte
 
+## 2.0.0-next.62
+
+### Patch Changes
+
+- c44f231: Improve a11y on to-do list in template
+
 ## 2.0.0-next.61
@@ -4,0 +10,0 @@

dist/templates/default/files.js.json

@@ -48,4 +48,4 @@ [
 		"name": "src/routes/todos/index.svelte",
-		"contents": "<script context=\"module\">\n\timport { enhance } from '$lib/form';\n\t\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\t\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\t\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\t\n\t\tconst { message } = await res.json();\n\t\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t};\n</script>\n\n<script>\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\t\n\texport let todos;\n\t\n\tasync function patch(res) {\n\t\tconst todo = await res.json();\n\t\n\t\ttodos = todos.map((t) => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form class=\"new\" action=\"/todos.json\" method=\"post\" use:enhance={{\n\t\tresult: async (res, form) => {\n\t\t\tconst created = await res.json();\n\t\t\ttodos = [...todos, created]\n\n\t\t\tform.reset();\n\t\t}\n\t}}>\n\t\t<input name=\"text\" placeholder=\"+ tap to add a todo\">\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div class=\"todo\" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tpending: (data) => {\n\t\t\t\t\ttodo.done = !!data.get('done');\n\t\t\t\t},\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'}>\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\"/>\n\t\t\t</form>\n\n\t\t\t<form class=\"text\" action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"text\" name=\"text\" value={todo.text}>\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\"/>\n\t\t\t</form>\n\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=delete\" method=\"post\" use:enhance={{\n\t\t\t\tresult: () => {\n\t\t\t\t\ttodos = todos.filter(t => t.uid !== todo.uid);\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\"/>\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255,255,255,0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0,0,0,0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>\n"
+		"contents": "<script context=\"module\">\n\timport { enhance } from '$lib/form';\n\t\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\t\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\t\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\t\n\t\tconst { message } = await res.json();\n\t\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t};\n</script>\n\n<script>\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\t\n\texport let todos;\n\t\n\tasync function patch(res) {\n\t\tconst todo = await res.json();\n\t\n\t\ttodos = todos.map((t) => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form class=\"new\" action=\"/todos.json\" method=\"post\" use:enhance={{\n\t\tresult: async (res, form) => {\n\t\t\tconst created = await res.json();\n\t\t\ttodos = [...todos, created]\n\n\t\t\tform.reset();\n\t\t}\n\t}}>\n\t\t<input name=\"text\" aria-label=\"Add todo\" placeholder=\"+ tap to add a todo\">\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div class=\"todo\" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tpending: (data) => {\n\t\t\t\t\ttodo.done = !!data.get('done');\n\t\t\t\t},\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'}>\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\"/>\n\t\t\t</form>\n\n\t\t\t<form class=\"text\" action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input aria-label=\"Edit todo\" type=\"text\" name=\"text\" value={todo.text}>\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\"/>\n\t\t\t</form>\n\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=delete\" method=\"post\" use:enhance={{\n\t\t\t\tresult: () => {\n\t\t\t\t\ttodos = todos.filter(t => t.uid !== todo.uid);\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\"/>\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255,255,255,0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0,0,0,0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover,\n\t.delete:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save,\n\t.save:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>\n"
 	}
 ]

dist/templates/default/files.ts.json

@@ -48,4 +48,4 @@ [
 		"name": "src/routes/todos/index.svelte",
-		"contents": "<script context=\"module\" lang=\"ts\">\n\timport { enhance } from '$lib/form';\n\timport type { Load } from '@sveltejs/kit';\n\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load: Load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\n\t\tconst { message } = await res.json();\n\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t}\n</script>\n\n<script lang=\"ts\">\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\n\ttype Todo = {\n\t\tuid: string;\n\t\tcreated_at: Date;\n\t\ttext: string;\n\t\tdone: boolean;\n\t};\n\n\texport let todos: Todo[];\n\n\tasync function patch(res: Response) {\n\t\tconst todo = await res.json();\n\n\t\ttodos = todos.map(t => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form class=\"new\" action=\"/todos.json\" method=\"post\" use:enhance={{\n\t\tresult: async (res, form) => {\n\t\t\tconst created = await res.json();\n\t\t\ttodos = [...todos, created]\n\n\t\t\tform.reset();\n\t\t}\n\t}}>\n\t\t<input name=\"text\" placeholder=\"+ tap to add a todo\">\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div class=\"todo\" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tpending: (data) => {\n\t\t\t\t\ttodo.done = !!data.get('done');\n\t\t\t\t},\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'}>\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\"/>\n\t\t\t</form>\n\n\t\t\t<form class=\"text\" action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"text\" name=\"text\" value={todo.text}>\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\"/>\n\t\t\t</form>\n\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=delete\" method=\"post\" use:enhance={{\n\t\t\t\tresult: () => {\n\t\t\t\t\ttodos = todos.filter(t => t.uid !== todo.uid);\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\"/>\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255,255,255,0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0,0,0,0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>\n"
+		"contents": "<script context=\"module\" lang=\"ts\">\n\timport { enhance } from '$lib/form';\n\timport type { Load } from '@sveltejs/kit';\n\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load: Load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\n\t\tconst { message } = await res.json();\n\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t}\n</script>\n\n<script lang=\"ts\">\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\n\ttype Todo = {\n\t\tuid: string;\n\t\tcreated_at: Date;\n\t\ttext: string;\n\t\tdone: boolean;\n\t};\n\n\texport let todos: Todo[];\n\n\tasync function patch(res: Response) {\n\t\tconst todo = await res.json();\n\n\t\ttodos = todos.map(t => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form class=\"new\" action=\"/todos.json\" method=\"post\" use:enhance={{\n\t\tresult: async (res, form) => {\n\t\t\tconst created = await res.json();\n\t\t\ttodos = [...todos, created]\n\n\t\t\tform.reset();\n\t\t}\n\t}}>\n\t\t<input name=\"text\" aria-label=\"Add todo\" placeholder=\"+ tap to add a todo\">\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div class=\"todo\" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tpending: (data) => {\n\t\t\t\t\ttodo.done = !!data.get('done');\n\t\t\t\t},\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'}>\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\"/>\n\t\t\t</form>\n\n\t\t\t<form class=\"text\" action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input aria-label=\"Edit todo\" type=\"text\" name=\"text\" value={todo.text}>\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\"/>\n\t\t\t</form>\n\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=delete\" method=\"post\" use:enhance={{\n\t\t\t\tresult: () => {\n\t\t\t\t\ttodos = todos.filter(t => t.uid !== todo.uid);\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\"/>\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255,255,255,0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0,0,0,0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover,\n\t.delete:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save,\n\t.save:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>\n"
 	}
 ]

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

545564

increased by0.05%

Lines of code

762

increased by0.13%

No dependency changes