From 12ec75b36bbb2a7b2ddce0383cabf813bd26fbea Mon Sep 17 00:00:00 2001
From: Shoota Kumano <shoota.dev@gmail.com>
Date: Thu, 29 Jul 2021 13:31:30 +0900
Subject: [PATCH 1/3] export count as props

---
 svelte/src/App.svelte     | 5 +++--
 svelte/src/Counter.svelte | 5 ++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/svelte/src/App.svelte b/svelte/src/App.svelte
index fa3be0f..ab4f09e 100644
--- a/svelte/src/App.svelte
+++ b/svelte/src/App.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
 	export let name: string;
-	import Counter from './/Counter.svelte';
+	import Counter from './Counter.svelte';
+  const p = {count: 20000,}
 </script>
 
 <main>
 	<h1>Hello {name}!</h1>
 	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
 </main>
-<Counter />
+<Counter {...p} />
 
 <style>
 	main {
diff --git a/svelte/src/Counter.svelte b/svelte/src/Counter.svelte
index 4cbd581..59d69f6 100644
--- a/svelte/src/Counter.svelte
+++ b/svelte/src/Counter.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	let count = 0;
-
-	const onDecreaseClick = () => (count -= 1)
+	export let count = 0;
+	export const onDecreaseClick = () => (count -= 1)
   const onIncreaseClick = () => (count += 1)
 </script>
 

From 2c987048879035c15d4c63370c430a039b3ff327 Mon Sep 17 00:00:00 2001
From: Shoota Kumano <shoota.dev@gmail.com>
Date: Thu, 29 Jul 2021 13:37:13 +0900
Subject: [PATCH 2/3] feat: add if statement on view

---
 svelte/src/App.svelte     | 2 +-
 svelte/src/Counter.svelte | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/svelte/src/App.svelte b/svelte/src/App.svelte
index ab4f09e..5adbe16 100644
--- a/svelte/src/App.svelte
+++ b/svelte/src/App.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	export let name: string;
 	import Counter from './Counter.svelte';
-  const p = {count: 20000,}
+  const p = {count: 20000, isHello: true}
 </script>
 
 <main>
diff --git a/svelte/src/Counter.svelte b/svelte/src/Counter.svelte
index 59d69f6..29b2f9b 100644
--- a/svelte/src/Counter.svelte
+++ b/svelte/src/Counter.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	export let count = 0;
+  export let isHello = true
 	export const onDecreaseClick = () => (count -= 1)
   const onIncreaseClick = () => (count += 1)
 </script>
@@ -16,4 +17,7 @@
 	<button on:click={onIncreaseClick} aria-label="Increase the counter by one">
 		+1
 	</button>
+  {#if isHello && count%2 === 0}
+    <p>Hello svelte logic</p>
+  {/if}
 </div>

From 1914e779c7aaf6490056d4fc9e6f5a2503b5fafb Mon Sep 17 00:00:00 2001
From: Ryoya HIRAYAMA <ryoya.hirayama@globis.co.jp>
Date: Thu, 29 Jul 2021 13:52:17 +0900
Subject: [PATCH 3/3] feat: Add each block

---
 svelte/src/App.svelte     | 10 +++++++++-
 svelte/src/Counter.svelte |  8 ++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/svelte/src/App.svelte b/svelte/src/App.svelte
index 5adbe16..e4e1199 100644
--- a/svelte/src/App.svelte
+++ b/svelte/src/App.svelte
@@ -1,7 +1,15 @@
 <script lang="ts">
 	export let name: string;
 	import Counter from './Counter.svelte';
-  const p = {count: 20000, isHello: true}
+  const p = {
+		count: 20000,
+		isHello: true,
+		cats: [
+			{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
+			{ id: 'z_AbfPXTKms', name: 'Maru' },
+			{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
+		]
+	}
 </script>
 
 <main>
diff --git a/svelte/src/Counter.svelte b/svelte/src/Counter.svelte
index 29b2f9b..ad2b57f 100644
--- a/svelte/src/Counter.svelte
+++ b/svelte/src/Counter.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
 	export let count = 0;
   export let isHello = true
+  export let cats = [{
+		id: 'default id',
+		name: 'default name',
+	}]
 	export const onDecreaseClick = () => (count -= 1)
   const onIncreaseClick = () => (count += 1)
 </script>
@@ -20,4 +24,8 @@
   {#if isHello && count%2 === 0}
     <p>Hello svelte logic</p>
   {/if}
+
+	{#each cats as {id, name}, index}
+		<p><span style="font-weight: bold;">{index + 1}.</span> ID:{id} Name:{name}</p>
+	{/each}
 </div>