experiment with getting node_modules to work

Author: Rich-Harris

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
-node_modules
+/node_modules
 /build
 /.svelte-kit
 /package

content/tutorial/01-svelte/07-lifecycle/03-update/app-a/node_modules/.modules.yaml

@@ -0,0 +1,6 @@
+{
+	"dependencies": {
+		"elizabot": "^0.0.3"
+	},
+	"type": "module"
+}

content/tutorial/01-svelte/07-lifecycle/03-update/app-a/node_modules/.pnpm/elizabot@0.0.3/node_modules/elizabot/.eslintrc.json

@@ -15,9 +15,7 @@
 
 	const eliza = new Eliza();
 
-	let comments = [
-		{ author: 'eliza', text: eliza.getInitial() }
-	];
+	let comments = [{ author: 'eliza', text: eliza.getInitial() }];
 
 	function handleKeydown(event) {
 		if (event.key === 'Enter') {
@@ -41,16 +39,32 @@
 				});
 
 				setTimeout(() => {
-					comments = comments.filter(comment => !comment.placeholder).concat({
-						author: 'eliza',
-						text: reply
-					});
+					comments = comments
+						.filter((comment) => !comment.placeholder)
+						.concat({
+							author: 'eliza',
+							text: reply
+						});
 				}, 500 + Math.random() * 500);
 			}, 200 + Math.random() * 200);
 		}
 	}
 </script>
 
+<div class="chat">
+	<h1>Eliza</h1>
+
+	<div class="scrollable" bind:this={div}>
+		{#each comments as comment}
+			<article class={comment.author}>
+				<span>{comment.text}</span>
+			</article>
+		{/each}
+	</div>
+
+	<input on:keydown={handleKeydown} />
+</div>
+
 <style>
 	.chat {
 		display: flex;
@@ -85,23 +99,9 @@
 	}
 
 	.user span {
-		background-color: #0074D9;
+		background-color: #0074d9;
 		color: white;
 		border-radius: 1em 1em 0 1em;
 		word-break: break-all;
 	}
 </style>
-
-<div class="chat">
-	<h1>Eliza</h1>
-
-	<div class="scrollable" bind:this={div}>
-		{#each comments as comment}
-			<article class={comment.author}>
-				<span>{comment.text}</span>
-			</article>
-		{/each}
-	</div>
-
-	<input on:keydown={handleKeydown}>
-</div>

content/tutorial/01-svelte/07-lifecycle/03-update/app-a/node_modules/.pnpm/elizabot@0.0.3/node_modules/elizabot/README.md

@@ -0,0 +1,16 @@
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter(),
+
+		vite: {
+			optimizeDeps: {
+				include: ['elizabot']
+			}
+		}
+	}
+};
+
+export default config;

content/tutorial/01-svelte/07-lifecycle/03-update/app-a/node_modules/.pnpm/elizabot@0.0.3/node_modules/elizabot/elizabot.js

@@ -6,7 +6,7 @@
 	let autoscroll;
 
 	beforeUpdate(() => {
-		autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
+		autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
 	});
 
 	afterUpdate(() => {
@@ -15,9 +15,7 @@
 
 	const eliza = new Eliza();
 
-	let comments = [
-		{ author: 'eliza', text: eliza.getInitial() }
-	];
+	let comments = [{ author: 'eliza', text: eliza.getInitial() }];
 
 	function handleKeydown(event) {
 		if (event.key === 'Enter') {
@@ -41,16 +39,32 @@
 				});
 
 				setTimeout(() => {
-					comments = comments.filter(comment => !comment.placeholder).concat({
-						author: 'eliza',
-						text: reply
-					});
+					comments = comments
+						.filter((comment) => !comment.placeholder)
+						.concat({
+							author: 'eliza',
+							text: reply
+						});
 				}, 500 + Math.random() * 500);
 			}, 200 + Math.random() * 200);
 		}
 	}
 </script>
 
+<div class="chat">
+	<h1>Eliza</h1>
+
+	<div class="scrollable" bind:this={div}>
+		{#each comments as comment}
+			<article class={comment.author}>
+				<span>{comment.text}</span>
+			</article>
+		{/each}
+	</div>
+
+	<input on:keydown={handleKeydown} />
+</div>
+
 <style>
 	.chat {
 		display: flex;
@@ -85,23 +99,9 @@
 	}
 
 	.user span {
-		background-color: #0074D9;
+		background-color: #0074d9;
 		color: white;
 		border-radius: 1em 1em 0 1em;
 		word-break: break-all;
 	}
 </style>
-
-<div class="chat">
-	<h1>Eliza</h1>
-
-	<div class="scrollable" bind:this={div}>
-		{#each comments as comment}
-			<article class={comment.author}>
-				<span>{comment.text}</span>
-			</article>
-		{/each}
-	</div>
-
-	<input on:keydown={handleKeydown}>
-</div>