update class tutorial (#1063)

Rich-Harris · Conduitry · web-flow · commit 037f04649358 · 2024-12-24T10:25:24.000-05:00
* update class tutorial

* update

* more

* more

* rename exercise

* Update apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md

Co-authored-by: Conduitry &lt;git@chor.date&gt;

* Update apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md

Co-authored-by: Conduitry &lt;git@chor.date&gt;

---------

Co-authored-by: Conduitry &lt;git@chor.date&gt;
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte
@@ -5,8 +5,7 @@
 <div class="container">
 	Flip the card
 	<button
-		class="card"
-		class:flipped={flipped}
+		class={["card", { flipped }]}
 		onclick={() => flipped = !flipped}
 	>
 		<div class="front">
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md
@@ -1,5 +1,5 @@
 ---
-title: The class directive
+title: The class attribute
 ---
 
 Like any other attribute, you can specify classes with a JavaScript attribute. Here, we could add a `flipped` class to the card:
@@ -14,15 +14,16 @@ Like any other attribute, you can specify classes with a JavaScript attribute. H
 
 This works as expected — if you click on the card now, it'll flip.
 
-We can make it nicer though. Adding or removing a class based on some condition is such a common pattern in UI development that Svelte includes a special directive to simplify it:
+We can make it nicer though. Adding or removing a class based on some condition is such a common pattern in UI development that Svelte allows you to pass an object or array that is converted to a string by [clsx](https://github.com/lukeed/clsx).
 
 ```svelte
 /// file: App.svelte
 <button
-	class="card"
-	+++class:flipped={flipped}+++
+	+++class={["card", { flipped }]}+++
 	onclick={() => flipped = !flipped}
 >
 ```
 
-This directive means 'add the `flipped` class whenever `flipped` is truthy'.
+This means 'always add the `card` class, and add the `flipped` class whenever `flipped` is truthy'.
+
+For more examples of how to combine conditional classes, [consult the `class` documentation](/docs/svelte/class).
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/index.md
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/index.md
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/Box.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/Box.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/Box.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/Box.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
@@ -24,7 +24,7 @@
 
 	<ul class="todos">
 		{#each todos as todo}
-			<li class:done={todo.done}>
+			<li class={{ done: todo.done }}>
 				<input
 					type="checkbox"
 					checked={todo.done}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
@@ -24,7 +24,7 @@
 
 	<ul class="todos">
 		{#each todos as todo}
-			<li class:done={todo.done}>
+			<li class={{ done: todo.done }}>
 				<input
 					type="checkbox"
 					bind:checked={todo.done}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md
@@ -7,7 +7,7 @@ You can bind to properties inside an `each` block.
 ```svelte
 /// file: App.svelte
 {#each todos as todo}
-	<li class:done={todo.done}>
+	<li class={{ done: todo.done }}>
 		<input
 			type="checkbox"
 			+++bind:+++checked={todo.done}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<button
 		class="play"
 		aria-label={paused ? 'play' : 'pause'}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md
@@ -8,7 +8,7 @@ First, add the `<audio>` element along with its bindings (we'll use the shorthan
 
 ```svelte
 /// file: AudioPlayer.svelte
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 +++	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
@@ -5,7 +5,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 		>
 			<label>
 				<input type="checkbox" bind:checked={todo.done}/>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
@@ -7,7 +7,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}
 			out:send={{ key: todo.id }}
 		>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
@@ -24,7 +24,7 @@ Then, add them to the `<li>` element, using the `todo.id` property as a key to m
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	+++in:receive={{ key: todo.id }}+++
 	+++out:send={{ key: todo.id }}+++
 >
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
@@ -8,7 +8,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}
 			out:send={{ key: todo.id }}
 			animate:flip={{ duration: 200 }}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
@@ -23,7 +23,7 @@ Then add it to the `<li>` elements:
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	+++animate:flip+++
@@ -35,7 +35,7 @@ The movement is a little slow in this case, so we can add a `duration` parameter
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	animate:flip+++={{ duration: 200 }}+++
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
@@ -8,7 +8,7 @@
 
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
 <img
-	class:curious={hereKitty}
+	class={{ curious: hereKitty }}
 	alt="Kitten wants to know what's going on"
 	src={kitten}
 />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
@@ -11,7 +11,7 @@
 
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
 <img
-	class:curious={hereKitty}
+	class={{ curious: hereKitty }}
 	alt="Kitten wants to know what's going on"
 	src={kitten}
 />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -19,7 +19,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -23,7 +23,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
@@ -8,7 +8,7 @@
 	}
 </script>
 
-<button class:expanded onclick={toggle}>{name}</button>
+<button class={{ expanded }} onclick={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
@@ -9,7 +9,7 @@
 	}
 </script>
 
-<button class:expanded onclick={toggle}>{name}</button>
+<button class={{ expanded }} onclick={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <nav
-	class:has-color={!!page.data.color}
+	class={[page.data.color && 'has-color']}
 	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="/">home</a>
@@ -21,4 +21,4 @@
 	nav.has-color a {
 		color: white;
 	}
-</style>
+</style>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <nav
-	class:has-color={!!page.data.color}
+	class={[page.data.color && 'has-color']}
 	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="/">home</a>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
@@ -20,7 +20,7 @@ We can now use the `component` returned from these `load` functions like any oth
 ```svelte
 /// file: src/routes/+layout.svelte
 <nav
-	class:has-color={!!page.data.color}
+	class={[page.data.color && 'has-color']}
 	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="/">home</a>
