improve code somewhat

Author: Rich Harris

content/tutorial/01-svelte/07-lifecycle/03-update/README.md

@@ -11,14 +11,16 @@ This [Eliza](https://en.wikipedia.org/wiki/ELIZA) chatbot is annoying to use, be
 ```js
 /// file: App.svelte
 let div;
-let autoscroll;
++++let autoscroll = false;+++
 
 beforeUpdate(() => {
-	autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
+	+++autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;+++
 });
 
 afterUpdate(() => {
-	if (autoscroll) div.scrollTo(0, div.scrollHeight);
++++	if (autoscroll) {
+		div.scrollTo(0, div.scrollHeight);
+	}+++
 });
 ```
 

content/tutorial/01-svelte/07-lifecycle/03-update/app-a/src/lib/App.svelte

@@ -17,43 +17,35 @@
 	});
 
 	const eliza = new Eliza();
+	const pause = (ms) => new Promise((fulfil) => setTimeout(fulfil, ms));
+
+	const typing = { author: 'eliza', text: '...' };
 
 	let comments = [
 		{ author: 'eliza', text: eliza.getInitial() }
 	];
 
-	function handleKeydown(event) {
-		if (event.key === 'Enter') {
-			const text = event.target.value;
-			if (!text) return;
+	async function handleKeydown(event) {
+		if (event.key === 'Enter' && event.target.value) {
+			event.target.value = '';
 
-			comments = comments.concat({
+			const comment = {
 				author: 'user',
-				text
-			});
+				text: event.target.value
+			};
 
-			event.target.value = '';
+			const reply = {
+				author: 'eliza',
+				text: eliza.transform(comment.text)
+			};
+
+			comments = [...comments, comment];
+
+			await pause(200 * (1 + Math.random()));
+			comments = [...comments, typing];
 
-			const reply = eliza.transform(text);
-
-			setTimeout(() => {
-				comments = comments.concat({
-					author: 'eliza',
-					text: '...',
-					placeholder: true
-				});
-
-				setTimeout(() => {
-					comments = comments
-						.filter(
-							(comment) => !comment.placeholder
-						)
-						.concat({
-							author: 'eliza',
-							text: reply
-						});
-				}, 500 + Math.random() * 500);
-			}, 200 + Math.random() * 200);
+			await pause(500 * (1 + Math.random()));
+			comments = [...comments, reply].filter(comment => comment !== typing);
 		}
 	}
 </script>

content/tutorial/01-svelte/07-lifecycle/03-update/app-b/src/lib/App.svelte

@@ -6,58 +6,48 @@
 	} from 'svelte';
 
 	let div;
-	let autoscroll;
+	let autoscroll = false;
 
 	beforeUpdate(() => {
-		autoscroll =
-			div &&
-			div.offsetHeight + div.scrollTop >
-				div.scrollHeight - 20;
+		autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
 	});
 
 	afterUpdate(() => {
-		if (autoscroll)
+		if (autoscroll) {
 			div.scrollTo(0, div.scrollHeight);
+		}
 	});
 
 	const eliza = new Eliza();
+	const pause = (ms) => new Promise((fulfil) => setTimeout(fulfil, ms));
+
+	const typing = { author: 'eliza', text: '...' };
 
 	let comments = [
 		{ author: 'eliza', text: eliza.getInitial() }
 	];
 
-	function handleKeydown(event) {
-		if (event.key === 'Enter') {
-			const text = event.target.value;
-			if (!text) return;
+	async function handleKeydown(event) {
+		if (event.key === 'Enter' && event.target.value) {
+			event.target.value = '';
 
-			comments = comments.concat({
+			const comment = {
 				author: 'user',
-				text
-			});
+				text: event.target.value
+			};
 
-			event.target.value = '';
+			const reply = {
+				author: 'eliza',
+				text: eliza.transform(comment.text)
+			};
+
+			comments = [...comments, comment];
+
+			await pause(200 * (1 + Math.random()));
+			comments = [...comments, typing];
 
-			const reply = eliza.transform(text);
-
-			setTimeout(() => {
-				comments = comments.concat({
-					author: 'eliza',
-					text: '...',
-					placeholder: true
-				});
-
-				setTimeout(() => {
-					comments = comments
-						.filter(
-							(comment) => !comment.placeholder
-						)
-						.concat({
-							author: 'eliza',
-							text: reply
-						});
-				}, 500 + Math.random() * 500);
-			}, 200 + Math.random() * 200);
+			await pause(500 * (1 + Math.random()));
+			comments = [...comments, reply].filter(comment => comment !== typing);
 		}
 	}
 </script>