From 9581a34bee9cf5de4ade604ad5375bbf94016101 Mon Sep 17 00:00:00 2001 From: Patrick Hintermayer Date: Thu, 14 Dec 2023 21:25:46 +0100 Subject: [PATCH] Use fail fast for keydown handler instead of having an additional level (#443) * docs: apply fail fast for keydown function handler * style: apply fail fast for if condition --- .../app-a/src/lib/App.svelte | 8 +-- .../07-api-routes/02-post-handlers/README.md | 70 +++++++++---------- .../app-a/src/routes/+page.svelte | 14 ++-- .../app-b/src/routes/+page.svelte | 36 +++++----- .../app-b/src/routes/+page.svelte | 36 +++++----- src/routes/tutorial/[slug]/Chrome.svelte | 8 +-- 6 files changed, 86 insertions(+), 86 deletions(-) diff --git a/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte index 1203bc69c..318366066 100644 --- a/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte @@ -16,10 +16,10 @@ { - if (e.key === 'Enter') { - todos.add(e.currentTarget.value); - e.currentTarget.value = ''; - } + if (e.key !== 'Enter') return; + + todos.add(e.currentTarget.value); + e.currentTarget.value = ''; }} /> diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md index 8df0f2de9..7be2a7929 100644 --- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md +++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md @@ -12,20 +12,20 @@ Inside the `keydown` event handler of the 'add a todo' ``, let's post som type="text" autocomplete="off" on:keydown={async (e) => { - if (e.key === 'Enter') { - const input = e.currentTarget; - const description = input.value; - -+++ const response = await fetch('/todo', { - method: 'POST', - body: JSON.stringify({ description }), - headers: { - 'Content-Type': 'application/json' - } - });+++ - - input.value = ''; - } + if (e.key !== 'Enter') return; + + const input = e.currentTarget; + const description = input.value; + ++++ const response = await fetch('/todo', { + method: 'POST', + body: JSON.stringify({ description }), + headers: { + 'Content-Type': 'application/json' + } + });+++ + + input.value = ''; }} /> ``` @@ -59,27 +59,27 @@ We're returning a response with a [201 Created](https://http.dog/201) status and type="text" autocomplete="off" on:keydown={async (e) => { - if (e.key === 'Enter') { - const input = e.currentTarget; - const description = input.value; - - const response = await fetch('/todo', { - method: 'POST', - body: JSON.stringify({ description }), - headers: { - 'Content-Type': 'application/json' - } - }); - -+++ const { id } = await response.json(); - - data.todos = [...data.todos, { - id, - description - }];+++ - - input.value = ''; - } + if (e.key !== 'Enter') return; + + const input = e.currentTarget; + const description = input.value; + + const response = await fetch('/todo', { + method: 'POST', + body: JSON.stringify({ description }), + headers: { + 'Content-Type': 'application/json' + } + }); + ++++ const { id } = await response.json(); + + data.todos = [...data.todos, { + id, + description + }];+++ + + input.value = ''; }} /> ``` diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte index d2a9e1c83..76c6e3156 100644 --- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte +++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte @@ -11,14 +11,14 @@ type="text" autocomplete="off" on:keydown={async (e) => { - if (e.key === 'Enter') { - const input = e.currentTarget; - const description = input.value; - - // TODO handle submit + if (e.key !== 'Enter') return; - input.value = ''; - } + const input = e.currentTarget; + const description = input.value; + + // TODO handle submit + + input.value = ''; }} /> diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte index 901216e14..58a6ad1e6 100644 --- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte +++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte @@ -11,27 +11,27 @@ type="text" autocomplete="off" on:keydown={async (e) => { - if (e.key === 'Enter') { - const input = e.currentTarget; - const description = input.value; - - const response = await fetch('/todo', { - method: 'POST', - body: JSON.stringify({ description }), - headers: { - 'Content-Type': 'application/json' - } - }); + if (e.key !== 'Enter') return; - const { id } = await response.json(); + const input = e.currentTarget; + const description = input.value; + + const response = await fetch('/todo', { + method: 'POST', + body: JSON.stringify({ description }), + headers: { + 'Content-Type': 'application/json' + } + }); - data.todos = [...data.todos, { - id, - description - }]; + const { id } = await response.json(); - input.value = ''; - } + data.todos = [...data.todos, { + id, + description + }]; + + input.value = ''; }} /> diff --git a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte index 009d8bcfd..3d4a5929a 100644 --- a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte +++ b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte @@ -11,27 +11,27 @@ type="text" autocomplete="off" on:keydown={async (e) => { - if (e.key === 'Enter') { - const input = e.currentTarget; - const description = input.value; - - const response = await fetch('/todo', { - method: 'POST', - body: JSON.stringify({ description }), - headers: { - 'Content-Type': 'application/json' - } - }); + if (e.key !== 'Enter') return; - const { id } = await response.json(); + const input = e.currentTarget; + const description = input.value; + + const response = await fetch('/todo', { + method: 'POST', + body: JSON.stringify({ description }), + headers: { + 'Content-Type': 'application/json' + } + }); - data.todos = [...data.todos, { - id, - description - }]; + const { id } = await response.json(); - input.value = ''; - } + data.todos = [...data.todos, { + id, + description + }]; + + input.value = ''; }} /> diff --git a/src/routes/tutorial/[slug]/Chrome.svelte b/src/routes/tutorial/[slug]/Chrome.svelte index 166b5c3ac..da76278ec 100644 --- a/src/routes/tutorial/[slug]/Chrome.svelte +++ b/src/routes/tutorial/[slug]/Chrome.svelte @@ -24,10 +24,10 @@ dispatch('change', { value: e.currentTarget.value }); }} on:keydown={(e) => { - if (e.key === 'Enter') { - dispatch('change', { value: e.currentTarget.value }); - e.currentTarget.blur(); - } + if (e.key !== 'Enter') return; + + dispatch('change', { value: e.currentTarget.value }); + e.currentTarget.blur(); }} />