docs/tests: use event.key instead of event.which (#4758)

site/content/examples/06-lifecycle/02-update/App.svelte

@@ -20,7 +20,7 @@
 	];
 
 	function handleKeydown(event) {
-		if (event.which === 13) {
+		if (event.key === 'Enter') {
 			const text = event.target.value;
 			if (!text) return;
 
@@ -103,4 +103,4 @@
 	</div>
 
 	<input on:keydown={handleKeydown}>
-</div>
+</div>

site/content/examples/06-lifecycle/03-tick/App.svelte

@@ -4,7 +4,7 @@
 	let text = `Select some text and hit the tab key to toggle uppercase`;
 
 	async function handleKeydown(event) {
-		if (event.which !== 9) return;
+		if (event.key !== 'Tab') return;
 
 		event.preventDefault();
 
@@ -34,4 +34,4 @@
 	}
 </style>
 
-<textarea value={text} on:keydown={handleKeydown}></textarea>
+<textarea value={text} on:keydown={handleKeydown}></textarea>

site/content/examples/10-animations/00-animate/App.svelte

@@ -112,7 +112,7 @@
 	<input
 		class="new-todo"
 		placeholder="what needs to be done?"
-		on:keydown="{event => event.which === 13 && add(event.target)}"
+		on:keydown="{event => event.key === 'Enter' && add(event.target)}"
 	>
 
 	<div class='left'>

site/content/tutorial/07-lifecycle/03-update/app-a/App.svelte

@@ -20,7 +20,7 @@
 	];
 
 	function handleKeydown(event) {
-		if (event.which === 13) {
+		if (event.key === 'Enter') {
 			const text = event.target.value;
 			if (!text) return;
 
@@ -104,4 +104,4 @@
 	</div>
 
 	<input on:keydown={handleKeydown}>
-</div>
+</div>

site/content/tutorial/07-lifecycle/03-update/app-b/App.svelte

@@ -20,7 +20,7 @@
 	];
 
 	function handleKeydown(event) {
-		if (event.which === 13) {
+		if (event.key === 'Enter') {
 			const text = event.target.value;
 			if (!text) return;
 
@@ -104,4 +104,4 @@
 	</div>
 
 	<input on:keydown={handleKeydown}>
-</div>
+</div>

site/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte

@@ -2,7 +2,7 @@
 	let text = `Select some text and hit the tab key to toggle uppercase`;
 
 	async function handleKeydown(event) {
-		if (event.which !== 9) return;
+		if (event.key !== 'Tab') return;
 
 		event.preventDefault();
 
@@ -32,4 +32,4 @@
 	}
 </style>
 
-<textarea value={text} on:keydown={handleKeydown}></textarea>
+<textarea value={text} on:keydown={handleKeydown}></textarea>

site/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte

@@ -4,7 +4,7 @@
 	let text = `Select some text and hit the tab key to toggle uppercase`;
 
 	async function handleKeydown(event) {
-		if (event.which !== 9) return;
+		if (event.key !== 'Tab') return;
 
 		event.preventDefault();
 
@@ -34,4 +34,4 @@
 	}
 </style>
 
-<textarea value={text} on:keydown={handleKeydown}></textarea>
+<textarea value={text} on:keydown={handleKeydown}></textarea>

site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte

@@ -56,7 +56,7 @@
 <div class='board'>
 	<input
 		placeholder="what needs to be done?"
-		on:keydown={e => e.which === 13 && add(e.target)}
+		on:keydown={e => e.key === 'Enter' && add(e.target)}
 	>
 
 	<div class='left'>
@@ -145,4 +145,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>

site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte

@@ -56,7 +56,7 @@
 <div class='board'>
 	<input
 		placeholder="what needs to be done?"
-		on:keydown={e => e.which === 13 && add(e.target)}
+		on:keydown={e => e.key === 'Enter' && add(e.target)}
 	>
 
 	<div class='left'>
@@ -152,4 +152,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>

site/content/tutorial/11-animations/01-animate/app-a/App.svelte

@@ -56,7 +56,7 @@
 <div class='board'>
 	<input
 		placeholder="what needs to be done?"
-		on:keydown={e => e.which === 13 && add(e.target)}
+		on:keydown={e => e.key === 'Enter' && add(e.target)}
 	>
 
 	<div class='left'>
@@ -152,4 +152,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>

site/content/tutorial/11-animations/01-animate/app-b/App.svelte

@@ -57,7 +57,7 @@
 <div class='board'>
 	<input
 		placeholder="what needs to be done?"
-		on:keydown={e => e.which === 13 && add(e.target)}
+		on:keydown={e => e.key === 'Enter' && add(e.target)}
 	>
 
 	<div class='left'>
@@ -155,4 +155,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>

site/src/routes/repl/[id]/_components/AppControls/index.svelte

@@ -30,7 +30,7 @@
 	$: canSave = $session.user && gist && gist.owner === $session.user.uid;
 
 	function handleKeydown(event) {
-		if (event.which === 83 && (isMac ? event.metaKey : event.ctrlKey)) {
+		if (event.key === 's' && (isMac ? event.metaKey : event.ctrlKey)) {
 			event.preventDefault();
 			save();
 		}

test/runtime/samples/action-custom-event-handler-this/_config.js

@@ -4,7 +4,7 @@ export default {
 	test({ assert, component, target, window }) {
 		const input = target.querySelector('input');
 		const event = new window.KeyboardEvent('keydown', {
-			which: 13
+			key: 'Enter'
 		});
 
 		let blurred = false;

test/runtime/samples/action-custom-event-handler-this/main.svelte

@@ -1,7 +1,7 @@
 <script>
 	function enter(node, callback) {
 		function handleKeydown(event) {
-			if (event.which === 13) {
+			if (event.key === 'Enter') {
 				callback(event);
 			}
 		}
@@ -16,4 +16,4 @@
 	}
 </script>
 
-<input use:enter='{e => e.target.blur()}'>
+<input use:enter='{e => e.target.blur()}'>

test/runtime/samples/window-event-custom/_config.js

@@ -3,7 +3,7 @@ export default {
 
 	async test({ assert, component, target, window }) {
 		const event = new window.KeyboardEvent('keydown', {
-			which: 27
+			key: 'Escape'
 		});
 
 		await window.dispatchEvent(event);

test/runtime/samples/window-event-custom/main.svelte

@@ -3,7 +3,7 @@
 
 	function esc(node, callback) {
 		function onKeyDown(event) {
-			if (event.which === 27) callback(event);
+			if (event.key === 'Escape') callback(event);
 		}
 		node.addEventListener('keydown', onKeyDown);
 		return {
@@ -16,4 +16,4 @@
 
 <svelte:window use:esc="{() => escaped = true}" />
 
-<p>escaped: {escaped}</p>
+<p>escaped: {escaped}</p>