resolve TODO in Actions tutorial

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte

@@ -1,70 +1,27 @@
 <script>
-	let language = "english";
+	import Converter from './Converter.svelte';
 
-	const translations = {
+	let value = 'Every word in this input gets converted into symbol on hover';
-		english: {
+</script>
-			tooltip: "Switch Languages",
-		},
-		latin: {
-			tooltip: "Itchsway Anguageslay",
-		}
-	};
-
-	function tooltip(node, text) {
-		const tooltip = document.createElement('div');
-		tooltip.textContent = text;
-
-		Object.assign(tooltip.style, {
-			position: 'absolute',
-			background: 'black',
-			color: 'white',
-			padding: '0.5em 1em',
-			fontSize: '12px',
-			pointerEvents: 'none',
-			transform: 'translate(5px, -50%)',
-			borderRadius: '2px',
-			transition: 'opacity 0.4s'
-		});
-
-		function position() {
-			const { top, right, bottom } = node.getBoundingClientRect();
-			tooltip.style.top = `${(top + bottom) / 2}px`;
-			tooltip.style.left = `${right}px`;
-		}
 
-		function append() {
+<style>
-			document.body.appendChild(tooltip);
+	input {
-			tooltip.style.opacity = 0;
+		width: 500px;
-			setTimeout(() => tooltip.style.opacity = 1);
-			position();
 	}
-
+	section {
-		function remove() {
+		display: flex;
-			tooltip.remove();
+		flex-direction: row;
+		justify-content: space-between;
+		width: 200px;
 	}
+</style>
 
-		node.addEventListener('mouseenter', append);
+<input bind:value placeholder="Write something" />
-		node.addEventListener('mouseleave', remove);
 
-		return {
+<h1>Hover us</h1>
-			update(text) {
-				tooltip.textContent = text;
-				position();
-			},
-
-			destroy() {
-				tooltip.remove();
-				node.removeEventListener('mouseenter', append);
-				node.removeEventListener('mouseleave', remove);
-			}
-		};
-	}
-
-	function toggleLanguage() {
-		language = language === 'english' ? 'latin' : 'english'
-	}
-</script>
 
-<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
+<section>
-	{language}
+	<Converter symbol="🍕" text={value} />
-</button>
+	<Converter symbol="🙈" text={value} />
+	<Converter symbol="🥔" text={value} />
+</section>

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/Converter.svelte

@@ -0,0 +1,33 @@
+<script>
+	export let symbol;
+	export let text;
+</script>
+
+<style>
+	div {
+		align-items: center;
+		background-color: #fafafa;
+		border: 1px solid #bfbfbf;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+		cursor: default;
+		display: flex;
+		height: 50px;
+		justify-content: center;
+		transition: box-shadow 0.3s ease-in-out, transform 0.3s;
+		width: 50px;
+	}
+
+	div:hover {
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+		transform: scale(1.1, 1.1);
+	}
+
+	span {
+		cursor: default;
+		font-size: 25px;
+	}
+</style>
+
+<div>
+	<span>{symbol}</span>
+</div>

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/convertable.js

@@ -0,0 +1,51 @@
+function convertText (text, symbol) {
+  return text
+    .split(' ')
+    .map(word => word && symbol)
+    .join(' ')
+}
+
+export function convertable (node, { symbol, text }) {
+  const tooltip = document.createElement('div')
+  tooltip.textContent = convertText(text, symbol)
+
+  Object.assign(tooltip.style, {
+    position: 'absolute',
+    background: 'black',
+    color: 'white',
+    padding: '0.5em 1em',
+    fontSize: '15px',
+    pointerEvents: 'none',
+    transform: 'translate(5px, -50%)',
+    borderRadius: '2px',
+    transition: 'opacity 0.4s'
+  })
+
+  function position () {
+    const { top, right, bottom, left } = node.getBoundingClientRect()
+    tooltip.style.top = `${bottom + 35}px`
+    tooltip.style.left = `${left}px`
+  }
+
+  function append () {
+    document.body.appendChild(tooltip)
+    tooltip.style.opacity = 0
+    setTimeout(() => (tooltip.style.opacity = 1))
+    position()
+  }
+
+  function remove () {
+    tooltip.remove()
+  }
+
+  node.addEventListener('mouseenter', append)
+  node.addEventListener('mouseleave', remove)
+
+  return {
+    destroy () {
+      tooltip.remove()
+      node.removeEventListener('mouseenter', append)
+      node.removeEventListener('mouseleave', remove)
+    }
+  }
+}

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte

@@ -1,70 +1,27 @@
 <script>
-	let language = "english";
+	import Converter from './Converter.svelte';
 
-	const translations = {
+	let value = 'Every word in this input gets converted into symbol on hover';
-		english: {
+</script>
-			tooltip: "Switch Languages",
-		},
-		latin: {
-			tooltip: "Itchsway Anguageslay",
-		}
-	};
-
-	function tooltip(node, text) {
-		const tooltip = document.createElement('div');
-		tooltip.textContent = text;
-
-		Object.assign(tooltip.style, {
-			position: 'absolute',
-			background: 'black',
-			color: 'white',
-			padding: '0.5em 1em',
-			fontSize: '12px',
-			pointerEvents: 'none',
-			transform: 'translate(5px, -50%)',
-			borderRadius: '2px',
-			transition: 'opacity 0.4s'
-		});
-
-		function position() {
-			const { top, right, bottom } = node.getBoundingClientRect();
-			tooltip.style.top = `${(top + bottom) / 2}px`;
-			tooltip.style.left = `${right}px`;
-		}
 
-		function append() {
+<style>
-			document.body.appendChild(tooltip);
+	input {
-			tooltip.style.opacity = 0;
+		width: 500px;
-			setTimeout(() => tooltip.style.opacity = 1);
-			position();
 	}
-
+	section {
-		function remove() {
+		display: flex;
-			tooltip.remove();
+		flex-direction: row;
+		justify-content: space-between;
+		width: 200px;
 	}
+</style>
 
-		node.addEventListener('mouseenter', append);
+<input bind:value placeholder="Write something" />
-		node.addEventListener('mouseleave', remove);
 
-		return {
+<h1>Hover us</h1>
-			update(text) {
-				tooltip.textContent = text;
-				position();
-			},
-
-			destroy() {
-				tooltip.remove();
-				node.removeEventListener('mouseenter', append);
-				node.removeEventListener('mouseleave', remove);
-			}
-		};
-	}
-
-	function toggleLanguage() {
-		language = language === 'english' ? 'latin' : 'english'
-	}
-</script>
 
-<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
+<section>
-	{language}
+	<Converter symbol="🍕" text={value} />
-</button>
+	<Converter symbol="🙈" text={value} />
+	<Converter symbol="🥔" text={value} />
+</section>

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/Converter.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { convertable } from './convertable.js';
+
+	export let symbol;
+	export let text;
+</script>
+
+<style>
+	div {
+		align-items: center;
+		background-color: #fafafa;
+		border: 1px solid #bfbfbf;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+		cursor: default;
+		display: flex;
+		height: 50px;
+		justify-content: center;
+		transition: box-shadow 0.3s ease-in-out, transform 0.3s;
+		width: 50px;
+	}
+
+	div:hover {
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+		transform: scale(1.1, 1.1);
+	}
+
+	span {
+		cursor: default;
+		font-size: 25px;
+	}
+</style>
+
+<div use:convertable={{ symbol, text }}>
+	<span>{symbol}</span>
+</div>

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/convertable.js

@@ -0,0 +1,55 @@
+function convertText (text, symbol) {
+  return text
+    .split(' ')
+    .map(word => word && symbol)
+    .join(' ')
+}
+
+export function convertable (node, { symbol, text }) {
+  const tooltip = document.createElement('div')
+  tooltip.textContent = convertText(text, symbol)
+
+  Object.assign(tooltip.style, {
+    position: 'absolute',
+    background: 'black',
+    color: 'white',
+    padding: '0.5em 1em',
+    fontSize: '15px',
+    pointerEvents: 'none',
+    transform: 'translate(5px, -50%)',
+    borderRadius: '2px',
+    transition: 'opacity 0.4s'
+  })
+
+  function position () {
+    const { top, right, bottom, left } = node.getBoundingClientRect()
+    tooltip.style.top = `${bottom + 35}px`
+    tooltip.style.left = `${left}px`
+  }
+
+  function append () {
+    document.body.appendChild(tooltip)
+    tooltip.style.opacity = 0
+    setTimeout(() => (tooltip.style.opacity = 1))
+    position()
+  }
+
+  function remove () {
+    tooltip.remove()
+  }
+
+  node.addEventListener('mouseenter', append)
+  node.addEventListener('mouseleave', remove)
+
+  return {
+    update ({ symbol, text }) {
+      tooltip.textContent = convertText(text, symbol)
+    },
+
+    destroy () {
+      tooltip.remove()
+      node.removeEventListener('mouseenter', append)
+      node.removeEventListener('mouseleave', remove)
+    }
+  }
+}

site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md

@@ -2,4 +2,45 @@
 title: Adding parameters
 ---
 
-TODO come up with a better example
+An Action can also accept parameters. This is useful when we want to work with variables inside the Action.
+
+In this app we want to convert the text in the input field into specified symbol once you hover over it. In order to do so we must firstly import the `convertable` function into `Converter.svelte`
+
+```html
+<script>
+	import { convertable } from './convertable.js';
+
+	export let symbol;
+	export let text;
+</script>
+```
+
+We can now use it with the element:
+
+```html
+<div use:convertable={{ symbol, text }}>
+	<span>{symbol}</span>
+</div>
+```
+
+Hover over the symbols now and behold the magic of converting text into emojis. 🎉
+
+You might notice that when you change the text in the input, the amount of symbols in the popup doesn't change. Fortunately we have an easy way to **update** the Action every time the parameters change. We can do so by adding an `update` function into the object returned by the Action. This function is called with updated parameters every time they change.
+
+Update the return value of `convertable` function in `convertable.js`:
+
+```js
+return {
+	update ({ symbol, text }) {
+		tooltip.textContent = convertText(text, symbol)
+	},
+
+	destroy () {
+		tooltip.remove()
+		node.removeEventListener('mouseenter', append)
+		node.removeEventListener('mouseleave', remove)
+	}
+}
+```
+
+If you change the text now and hover over the symbols, you will see the amount changing properly.