From 4efc1a7f28d5bcb4bb64d6868e5ce20835fc74ae Mon Sep 17 00:00:00 2001
From: babakfp <babak.bxf@gmail.com>
Date: Sat, 19 Feb 2022 08:34:17 -0800
Subject: [PATCH] Added Reactive ContextAPI

---
 site/content/docs/03-run-time.md              | 16 +++++++++++
 .../02-reactive-contextapi/app-a/App.svelte   |  8 ++++++
 .../02-reactive-contextapi/app-a/Child.svelte |  8 ++++++
 .../app-a/Parent.svelte                       | 10 +++++++
 .../02-reactive-contextapi/app-b/App.svelte   |  8 ++++++
 .../02-reactive-contextapi/app-b/Child.svelte |  8 ++++++
 .../app-b/Parent.svelte                       | 11 ++++++++
 .../15-context/02-reactive-contextapi/text.md | 28 +++++++++++++++++++
 8 files changed, 97 insertions(+)
 create mode 100644 site/content/tutorial/15-context/02-reactive-contextapi/app-a/App.svelte
 create mode 100644 site/content/tutorial/15-context/02-reactive-contextapi/app-a/Child.svelte
 create mode 100644 site/content/tutorial/15-context/02-reactive-contextapi/app-a/Parent.svelte
 create mode 100644 site/content/tutorial/15-context/02-reactive-contextapi/app-b/App.svelte
 create mode 100644 site/content/tutorial/15-context/02-reactive-contextapi/app-b/Child.svelte
 create mode 100644 site/content/tutorial/15-context/02-reactive-contextapi/app-b/Parent.svelte
 create mode 100644 site/content/tutorial/15-context/02-reactive-contextapi/text.md

diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index 636a98834d..af5b9aedbd 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -162,6 +162,22 @@ Like lifecycle functions, this must be called during component initialisation.
 
 > Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which *will* be reactive.
 
+#### Reactive ContextAPI
+
+```
+<script>
+	import { setContext } from 'svelte'
+	import { writable } from 'svelte/store'
+
+	let count = writable(0)
+	setContext('count', count)
+</script>
+
+Count is: {$count}
+```
+
+More about [Reactive ContextAPI in the tutorial](https://svelte.dev/tutorial/reactive-contextapi)
+
 #### `getContext`
 
 ```js
diff --git a/site/content/tutorial/15-context/02-reactive-contextapi/app-a/App.svelte b/site/content/tutorial/15-context/02-reactive-contextapi/app-a/App.svelte
new file mode 100644
index 0000000000..54a08ca153
--- /dev/null
+++ b/site/content/tutorial/15-context/02-reactive-contextapi/app-a/App.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Parent from './Parent.svelte'
+	import Child from './Child.svelte'
+</script>
+
+<Parent>
+	<Child />
+</Parent>
diff --git a/site/content/tutorial/15-context/02-reactive-contextapi/app-a/Child.svelte b/site/content/tutorial/15-context/02-reactive-contextapi/app-a/Child.svelte
new file mode 100644
index 0000000000..bb8101a840
--- /dev/null
+++ b/site/content/tutorial/15-context/02-reactive-contextapi/app-a/Child.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { getContext } from 'svelte'
+	let count = getContext('count')
+</script>
+
+<p>Child's count is: {count}</p>
+
+<button on:click={_=> count++}>Add Count</button>
diff --git a/site/content/tutorial/15-context/02-reactive-contextapi/app-a/Parent.svelte b/site/content/tutorial/15-context/02-reactive-contextapi/app-a/Parent.svelte
new file mode 100644
index 0000000000..06f392398e
--- /dev/null
+++ b/site/content/tutorial/15-context/02-reactive-contextapi/app-a/Parent.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { setContext } from 'svelte'
+
+	let count = 0
+	setContext('count', count)
+</script>
+
+<p>Parent's count is: {count}</p>
+
+<slot />
diff --git a/site/content/tutorial/15-context/02-reactive-contextapi/app-b/App.svelte b/site/content/tutorial/15-context/02-reactive-contextapi/app-b/App.svelte
new file mode 100644
index 0000000000..54a08ca153
--- /dev/null
+++ b/site/content/tutorial/15-context/02-reactive-contextapi/app-b/App.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Parent from './Parent.svelte'
+	import Child from './Child.svelte'
+</script>
+
+<Parent>
+	<Child />
+</Parent>
diff --git a/site/content/tutorial/15-context/02-reactive-contextapi/app-b/Child.svelte b/site/content/tutorial/15-context/02-reactive-contextapi/app-b/Child.svelte
new file mode 100644
index 0000000000..8e857e1de0
--- /dev/null
+++ b/site/content/tutorial/15-context/02-reactive-contextapi/app-b/Child.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { getContext } from 'svelte'
+	let count = getContext('count')
+</script>
+
+<p>Child's count is: {$count}</p>
+
+<button on:click={_=> $count++}>Add Count</button>
diff --git a/site/content/tutorial/15-context/02-reactive-contextapi/app-b/Parent.svelte b/site/content/tutorial/15-context/02-reactive-contextapi/app-b/Parent.svelte
new file mode 100644
index 0000000000..08955451b6
--- /dev/null
+++ b/site/content/tutorial/15-context/02-reactive-contextapi/app-b/Parent.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { setContext } from 'svelte'
+	import { writable } from 'svelte/store'
+
+	let count = writable(0)
+	setContext('count', count)
+</script>
+
+<p>Parent's count is: {$count}</p>
+
+<slot />
diff --git a/site/content/tutorial/15-context/02-reactive-contextapi/text.md b/site/content/tutorial/15-context/02-reactive-contextapi/text.md
new file mode 100644
index 0000000000..ddb825d36d
--- /dev/null
+++ b/site/content/tutorial/15-context/02-reactive-contextapi/text.md
@@ -0,0 +1,28 @@
+---
+title: Reactive ContextAPI
+---
+
+Context isn't inherently reactive. If we want reactive values in context then we need to combine it with a store. In this tutorial we are going to create a reactive value with the ContextAPI.
+
+Click on the "Add Count" button. You will see only the child's count will get increased and the parent's count stays the same.
+
+To make it reactive, we need to convert the initial value of the `count` to a readable store.
+
+```HTML
+<!-- Parent.svelte -->
+<script>
+	import { writable } from 'svelte/store'
+	let count = writable(0)
+</script>
+```
+
+Now we have a writable store called `count`, so we need to use it like `$count` as it's explained in the [writable stores tutorial](https://svelte.dev/tutorial/writable-stores).
+
+```HTML
+<!-- Parent.svelte -->
+<p>Parent's count is: {$count}</p>
+
+<!-- Child.svelte -->
+<p>Child's count is: {$count}</p>
+<button on:click={_=> $count++}>Add Count</button>
+```