Format template (#1364)

* format source files * use template config for formatting generated files, prevent whitespace-only lines * changeset
sveltejs · May 6, 2021 · 9cc2508 · 9cc2508
1 parent 8a402a9
commit 9cc2508
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 59 deletions.
diff --git a/.changeset/calm-walls-happen.md b/.changeset/calm-walls-happen.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Ensure template files match Prettier settings
diff --git a/packages/create-svelte/package.json b/packages/create-svelte/package.json
@@ -20,11 +20,11 @@
 		"typescript": "^4.2.4"
 	},
 	"scripts": {
-		"build": "node scripts/build-templates",
+		"build": "npm run format && node scripts/build-templates",
 		"check": "tsc",
 		"lint": "eslint --ignore-path .gitignore --ignore-path ../../.gitignore \"./*.js\" && npm run check-format",
-		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore --ignore-path ../../.gitignore",
-		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path ../../.gitignore --ignore-path .gitignore",
+		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore --ignore-path ../../.gitignore --plugin prettier-plugin-svelte",
+		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path ../../.gitignore --ignore-path .gitignore --plugin prettier-plugin-svelte",
 		"prepublishOnly": "npm run build"
 	},
 	"files": [

diff --git a/packages/create-svelte/scripts/build-templates.js b/packages/create-svelte/scripts/build-templates.js
@@ -78,7 +78,8 @@ async function generate_templates(shared) {
 					parser: 'babel',
 					useTabs: true,
 					singleQuote: true,
-					trailingComma: 'none'
+					trailingComma: 'none',
+					printWidth: 100
 				});
 
 				js.push({
@@ -119,13 +120,13 @@ async function generate_templates(shared) {
 								parser: 'babel',
 								useTabs: true,
 								singleQuote: true,
-								trailingComma: 'none'
+								trailingComma: 'none',
+								printWidth: 100
 							})
 							.trim()
-							.split('\n')
-							.join('\n\t');
+							.replace(/^(.)/gm, '\t$1');
 
-						return `<script${attrs.replace(' lang="ts"', '')}>\n\t${contents}\n</script>`;
+						return `<script${attrs.replace(' lang="ts"', '')}>\n${contents}\n</script>`;
 					}
 				);
 

diff --git a/packages/create-svelte/templates/default/src/lib/Counter/index.svelte b/packages/create-svelte/templates/default/src/lib/Counter/index.svelte
@@ -16,7 +16,7 @@
 <div class="counter">
 	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
 		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5"></path>
+			<path d="M0,0.5 L1,0.5" />
 		</svg>
 	</button>
 
@@ -29,23 +29,19 @@
 
 	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
 		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1"></path>
+			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
 		</svg>
 	</button>
 </div>
 
 <style>
 	.counter {
 		display: flex;
-		border-top: 1px solid rgba(0,0,0,0.1);
-		border-bottom: 1px solid rgba(0,0,0,0.1);
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 		margin: 1rem 0;
 	}
 
-	.counter button.disabled {
-		opacity: 0.3;
-	}
-
 	.counter button {
 		width: 2em;
 		padding: 0;

diff --git a/packages/create-svelte/templates/default/src/lib/Header/index.svelte b/packages/create-svelte/templates/default/src/lib/Header/index.svelte
@@ -12,15 +12,15 @@
 
 	<nav>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
-			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z"/>
+			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
 		</svg>
 		<ul>
 			<li class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
 			<li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
 			<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href="/todos">Todos</a></li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
-			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z"/>
+			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
 		</svg>
 	</nav>
 
@@ -57,7 +57,7 @@
 	nav {
 		display: flex;
 		justify-content: center;
-		--background: rgba(255,255,255,0.7);
+		--background: rgba(255, 255, 255, 0.7);
 	}
 
 	svg {

diff --git a/packages/create-svelte/templates/default/src/routes/index.svelte b/packages/create-svelte/templates/default/src/routes/index.svelte
@@ -14,8 +14,8 @@
 	<h1>
 		<div class="welcome">
 			<picture>
-				<source srcset="svelte-welcome.webp" type="image/webp">
-				<img src="svelte-welcome.png" alt="Welcome"/>
+				<source srcset="svelte-welcome.webp" type="image/webp" />
+				<img src="svelte-welcome.png" alt="Welcome" />
 			</picture>
 		</div>
 

diff --git a/packages/create-svelte/templates/default/src/routes/todos/index.svelte b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
@@ -19,7 +19,7 @@
 		return {
 			error: new Error(message)
 		};
-	}
+	};
 </script>
 
 <script lang="ts">
@@ -38,7 +38,7 @@
 	async function patch(res: Response) {
 		const todo = await res.json();
 
-		todos = todos.map(t => {
+		todos = todos.map((t) => {
 			if (t.uid === todo.uid) return todo;
 			return t;
 		});
@@ -52,42 +52,65 @@
 <div class="todos">
 	<h1>Todos</h1>
 
-	<form class="new" action="/todos.json" method="post" use:enhance={{
-		result: async (res, form) => {
-			const created = await res.json();
-			todos = [...todos, created]
-
-			form.reset();
-		}
-	}}>
-		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo">
+	<form
+		class="new"
+		action="/todos.json"
+		method="post"
+		use:enhance={{
+			result: async (res, form) => {
+				const created = await res.json();
+				todos = [...todos, created];
+
+				form.reset();
+			}
+		}}
+	>
+		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
 	</form>
 
 	{#each todos as todo (todo.uid)}
-		<div class="todo" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>
-			<form action="/todos/{todo.uid}.json?_method=patch" method="post" use:enhance={{
-				pending: (data) => {
-					todo.done = !!data.get('done');
-				},
-				result: patch
-			}}>
-				<input type="hidden" name="done" value={todo.done ? '' : 'true'}>
-				<button class="toggle" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}"/>
+		<div
+			class="todo"
+			class:done={todo.done}
+			transition:scale|local={{ start: 0.7 }}
+			animate:flip={{ duration: 200 }}
+		>
+			<form
+				action="/todos/{todo.uid}.json?_method=patch"
+				method="post"
+				use:enhance={{
+					pending: (data) => {
+						todo.done = !!data.get('done');
+					},
+					result: patch
+				}}
+			>
+				<input type="hidden" name="done" value={todo.done ? '' : 'true'} />
+				<button class="toggle" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" />
 			</form>
 
-			<form class="text" action="/todos/{todo.uid}.json?_method=patch" method="post" use:enhance={{
-				result: patch
-			}}>
-				<input aria-label="Edit todo" type="text" name="text" value={todo.text}>
-				<button class="save" aria-label="Save todo"/>
+			<form
+				class="text"
+				action="/todos/{todo.uid}.json?_method=patch"
+				method="post"
+				use:enhance={{
+					result: patch
+				}}
+			>
+				<input aria-label="Edit todo" type="text" name="text" value={todo.text} />
+				<button class="save" aria-label="Save todo" />
 			</form>
 
-			<form action="/todos/{todo.uid}.json?_method=delete" method="post" use:enhance={{
-				result: () => {
-					todos = todos.filter(t => t.uid !== todo.uid);
-				}
-			}}>
-				<button class="delete" aria-label="Delete todo"/>
+			<form
+				action="/todos/{todo.uid}.json?_method=delete"
+				method="post"
+				use:enhance={{
+					result: () => {
+						todos = todos.filter((t) => t.uid !== todo.uid);
+					}
+				}}
+			>
+				<button class="delete" aria-label="Delete todo" />
 			</form>
 		</div>
 	{/each}
@@ -110,7 +133,7 @@
 	}
 
 	input:focus-visible {
-		box-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);
+		box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
 		border: 1px solid #ff3e00 !important;
 		outline: none;
 	}
@@ -120,7 +143,7 @@
 		width: 100%;
 		padding: 0.5em 1em 0.3em 1em;
 		box-sizing: border-box;
-		background: rgba(255,255,255,0.05);
+		background: rgba(255, 255, 255, 0.05);
 		border-radius: 8px;
 		text-align: center;
 	}
@@ -134,16 +157,15 @@
 		padding: 0.5rem;
 		background-color: white;
 		border-radius: 8px;
-		filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));
+		filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
 		transform: translate(-1px, -1px);
 		transition: filter 0.2s, transform 0.2s;
 	}
 
-
 	.done {
 		transform: none;
 		opacity: 0.4;
-		filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));
+		filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
 	}
 
 	form.text {
@@ -169,7 +191,7 @@
 	}
 
 	button.toggle {
-		border: 1px solid rgba(0,0,0,0.2);
+		border: 1px solid rgba(0, 0, 0, 0.2);
 		border-radius: 50%;
 		box-sizing: border-box;
 		background-size: 1em auto;

diff --git a/packages/create-svelte/templates/skeleton/src/routes/index.svelte b/packages/create-svelte/templates/skeleton/src/routes/index.svelte
@@ -1,2 +1,2 @@
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>