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 = {
-		english: {
-			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() {
-			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(text) {
-				tooltip.textContent = text;
-				position();
-			},
+	let value = 'Every word in this input gets converted into symbol on hover';
+</script>
 
-			destroy() {
-				tooltip.remove();
-				node.removeEventListener('mouseenter', append);
-				node.removeEventListener('mouseleave', remove);
-			}
-		};
+<style>
+	input {
+		width: 500px;
 	}
-
-	function toggleLanguage() {
-		language = language === 'english' ? 'latin' : 'english'
+	section {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		width: 200px;
 	}
-</script>
+</style>
+
+<input bind:value placeholder="Write something" />
+
+<h1>Hover us</h1>
 
-<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
-	{language}
-</button>
+<section>
+	<Converter symbol="🍕" text={value} />
+	<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 = {
-		english: {
-			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() {
-			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(text) {
-				tooltip.textContent = text;
-				position();
-			},
+	let value = 'Every word in this input gets converted into symbol on hover';
+</script>
 
-			destroy() {
-				tooltip.remove();
-				node.removeEventListener('mouseenter', append);
-				node.removeEventListener('mouseleave', remove);
-			}
-		};
+<style>
+	input {
+		width: 500px;
 	}
-
-	function toggleLanguage() {
-		language = language === 'english' ? 'latin' : 'english'
+	section {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		width: 200px;
 	}
-</script>
+</style>
+
+<input bind:value placeholder="Write something" />
+
+<h1>Hover us</h1>
 
-<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
-	{language}
-</button>
+<section>
+	<Converter symbol="🍕" text={value} />
+	<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)
+    }
+  }
+}