more

Rich-Harris · Rich-Harris · commit b16e367fe349 · 2024-12-23T13:43:58.000-05:00
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/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>

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`}`
`9`	`9`	`</script>`
`10`	`10`
`11`		`-<button class:expanded onclick={toggle}>{name}</button>`
	`11`	`+<button class={{ expanded }} onclick={toggle}>{name}</button>`
`12`	`12`
`13`	`13`	`{#if expanded}`
`14`	`14`	`<ul>`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`}`
`10`	`10`	`</script>`
`11`	`11`
`12`		`-<button class:expanded onclick={toggle}>{name}</button>`
	`12`	`+<button class={{ expanded }} onclick={toggle}>{name}</button>`
`13`	`13`
`14`	`14`	`{#if expanded}`
`15`	`15`	`<ul>`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`</script>`
`6`	`6`
`7`	`7`	`<nav`
`8`		`- class:has-color={!!page.data.color}`
	`8`	`+ class={[page.data.color && 'has-color']}`
`9`	`9`	`style:background={page.data.color ?? 'var(--bg-2)'}`
`10`	`10`	`>`
`11`	`11`	`<a href="/">home</a>`
`@@ -21,4 +21,4 @@`
`21`	`21`	`nav.has-color a {`
`22`	`22`	`color: white;`
`23`	`23`	`}`
`24`		`-</style>`
	`24`	`+</style>`
Original file line number	Diff line number	Diff line change
@@ -20,7 +20,7 @@ We can now use the `component` returned from these `load` functions like any oth
`20`	`20`	```svelte
`21`	`21`	`/// file: src/routes/+layout.svelte`
`22`	`22`	`<nav`
`23`		`- class:has-color={!!page.data.color}`
	`23`	`+ class={[page.data.color && 'has-color']}`
`24`	`24`	`style:background={page.data.color ?? 'var(--bg-2)'}`
`25`	`25`	`>`
`26`	`26`	`<a href="/">home</a>`