From 4ee8207d4cc5b2f65b71efad2dc3c6e750814c2b Mon Sep 17 00:00:00 2001 From: Patrick Hintermayer Date: Wed, 19 Jul 2023 18:45:01 +0200 Subject: [PATCH 1/2] docs: apply fail fast for keydown function handler --- .../07-api-routes/02-post-handlers/README.md | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) 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 d85a3f2f2..63eb65b35 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://httpstatusdogs.com/201-c 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 = ''; }} /> ``` From f959da82326dfb9b3085de227105ad777d3809f2 Mon Sep 17 00:00:00 2001 From: Patrick Hintermayer Date: Wed, 19 Jul 2023 16:54:41 +0000 Subject: [PATCH 2/2] style: apply fail fast for if condition --- .../app-a/src/lib/App.svelte | 8 ++--- .../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 ++--- 5 files changed, 51 insertions(+), 51 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/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(); }} />