Merge branch 'main' into fix-smart-quotes

Author: teemingc

apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md

@@ -140,7 +140,7 @@ Setting the `sideEffects` field in `package.json` can help the bundler to be mor
 }
 ```
 
-> If the scripts in your library have side effects, ensure that you update the `sideEffects` field. All scripts are marked as side effect free by default in newly created projects. If a file with side effects is incorrectly marked as having no side effects, it can result in broken functionality.
+> [!NOTE] If the scripts in your library have side effects, ensure that you update the `sideEffects` field. All scripts are marked as side effect free by default in newly created projects. If a file with side effects is incorrectly marked as having no side effects, it can result in broken functionality.
 
 If your package has files with side effects, you can specify them in an array:
 

apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md

@@ -161,9 +161,9 @@ export function logger(getValue) {
 
 ### Component testing
 
-It is possible to test your components in isolation using Vitest.
+It is possible to test your components in isolation, which allows you to render them in a browser (real or simulated), simulate behavior, and make assertions, without spinning up your whole app.
 
-> [!NOTE] Before writing component tests, think about whether you actually need to test the component, or if it's more about the logic _inside_ the component. If so, consider extracting out that logic to test it in isolation, without the overhead of a component
+> [!NOTE] Before writing component tests, think about whether you actually need to test the component, or if it's more about the logic _inside_ the component. If so, consider extracting out that logic to test it in isolation, without the overhead of a component.
 
 To get started, install jsdom (a library that shims DOM APIs):
 
@@ -247,6 +247,48 @@ test('Component', async () => {
 
 When writing component tests that involve two-way bindings, context or snippet props, it's best to create a wrapper component for your specific test and interact with that. `@testing-library/svelte` contains some [examples](https://testing-library.com/docs/svelte-testing-library/example).
 
+### Component testing with Storybook
+
+[Storybook](https://storybook.js.org) is a tool for developing and documenting UI components, and it can also be used to test your components. They're run with Vitest's browser mode, which renders your components in a real browser for the most realistic testing environment.
+
+To get started, first install Storybook ([using Svelte's CLI](/docs/cli/storybook)) in your project via `npx sv add storybook` and choose the recommended configuration that includes testing features. If you're already using Storybook, and for more information on Storybook's testing capabilities, follow the [Storybook testing docs](https://storybook.js.org/docs/writing-tests?renderer=svelte) to get started.
+
+You can create stories for component variations and test interactions with the [play function](https://storybook.js.org/docs/writing-tests/interaction-testing?renderer=svelte#writing-interaction-tests), which allows you to simulate behavior and make assertions using the Testing Library and Vitest APIs. Here's an example of two stories that can be tested, one that renders an empty LoginForm component and one that simulates a user filling out the form:
+
+```svelte
+/// file: LoginForm.stories.svelte
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect, fn } from 'storybook/test';
+
+	import LoginForm from './LoginForm.svelte';
+
+	const { Story } = defineMeta({
+		component: LoginForm,
+		args: {
+			// Pass a mock function to the `onSubmit` prop
+			onSubmit: fn(),
+		}
+	});
+</script>
+ 
+<Story name="Empty Form" />
+ 
+<Story
+	name="Filled Form"
+	play={async ({ args, canvas, userEvent }) => {
+		// Simulate a user filling out the form
+		await userEvent.type(canvas.getByTestId('email'), '[email protected]');
+		await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+		await userEvent.click(canvas.getByRole('button'));
+
+		// Run assertions
+		await expect(args.onSubmit).toHaveBeenCalledTimes(1);
+		await expect(canvas.getByText('You’re in!')).toBeInTheDocument();
+	}}
+/>
+```
+
 ## E2E tests using Playwright
 
 E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).

apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-a/src/routes/+layout.svelte

@@ -11,7 +11,7 @@
 		if (navigating.to) {
 			start = Date.now();
 			end = null;
-			previous = navigating;
+			previous = { ...navigating };
 		} else {
 			end = Date.now();
 		}

apps/svelte.dev/content/tutorial/04-advanced-sveltekit/03-link-options/01-preload/+assets/app-b/src/routes/+layout.svelte

@@ -11,7 +11,7 @@
 		if (navigating.to) {
 			start = Date.now();
 			end = null;
-			previous = navigating;
+			previous = { ...navigating };
 		} else {
 			end = Date.now();
 		}

apps/svelte.dev/src/routes/(authed)/playground/[id]/gzip.js

@@ -6,7 +6,8 @@ export async function compress_and_encode_text(input) {
 		const { done, value } = await reader.read();
 		if (done) {
 			reader.releaseLock();
-			return btoa(buffer).replaceAll('+', '-').replaceAll('/', '_');
+			// Some sites like discord don't like it when links end with =
+			return btoa(buffer).replaceAll('+', '-').replaceAll('/', '_').replace(/=+$/, '');
 		} else {
 			for (let i = 0; i < value.length; i++) {
 				// decoding as utf-8 will make btoa reject the string

packages/site-kit/src/lib/codemirror/index.js

@@ -25,13 +25,18 @@ const logic_block_snippets = [
 		label: '#await :then',
 		type: 'keyword'
 	}),
-	snippetCompletion('#key ${}}\n\n{/key', { label: '#key', type: 'keyword' })
+	snippetCompletion('#key ${}}\n\n{/key', { label: '#key', type: 'keyword' }),
+	snippetCompletion('#snippet ${}()}\n\n{/snippet', {
+		label: '#snippet',
+		type: 'keyword'
+	})
 ];
 
 const special_tag_snippets = [
 	snippetCompletion('@html ${}', { label: '@html', type: 'keyword' }),
 	snippetCompletion('@debug ${}', { label: '@debug', type: 'keyword' }),
-	snippetCompletion('@const ${}', { label: '@const', type: 'keyword' })
+	snippetCompletion('@const ${}', { label: '@const', type: 'keyword' }),
+	snippetCompletion('@render ${}()', { label: '@render', type: 'keyword' })
 ];
 
 /**

packages/site-kit/src/lib/nav/MobileMenu.svelte

@@ -147,7 +147,9 @@
 						<ul>
 							<li><a href="/chat">Discord</a></li>
 							<li><a href="https://bsky.app/profile/svelte.dev">Bluesky</a></li>
-							<li><a href="https://github.com/sveltejs/svelte">GitHub</a></li>
+							<li>
+								<a href="https://github.com/sveltejs">GitHub</a>
+							</li>
 						</ul>
 					</div>
 				</div>

packages/site-kit/src/lib/nav/Nav.svelte

@@ -6,7 +6,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	import { overlay_open, on_this_page_open } from '../stores';
 	import { search } from '../state/search.svelte';
 	import Icon from '../components/Icon.svelte';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import ThemeToggle from '../components/ThemeToggle.svelte';
 	import MobileMenu from './MobileMenu.svelte';
 	import type { NavigationLink } from '../types';
@@ -86,7 +86,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 					<Dropdown>
 						<a
 							href="/{link.slug}"
-							aria-current={$page.url.pathname.startsWith(`/${link.slug}`) ? 'page' : undefined}
+							aria-current={page.url.pathname.startsWith(`/${link.slug}`) ? 'page' : undefined}
 						>
 							{link.title}
 
@@ -99,8 +99,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
 									<a
 										class="secondary"
 										href={section.path}
-										aria-current={$page.url.pathname === section.path ||
-										$page.url.pathname.startsWith(section.path!)
+										aria-current={page.url.pathname === section.path ||
+										page.url.pathname.startsWith(section.path!)
 											? 'page'
 											: undefined}
 									>
@@ -113,7 +113,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 				{:else}
 					<a
 						href="/{link.slug}"
-						aria-current={$page.url.pathname.startsWith(`/${link.slug}`) ? 'page' : null}
+						aria-current={page.url.pathname.startsWith(`/${link.slug}`) ? 'page' : null}
 					>
 						{link.title}
 					</a>
@@ -133,7 +133,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 					<span data-icon="bluesky"></span>
 				</a>
 
-				<a href="https://github.com/sveltejs/svelte" aria-label="GitHub Repo">
+				<a href="https://github.com/sveltejs" aria-label="GitHub Organization">
 					<span data-icon="github"></span>
 				</a>
 			</div>
@@ -169,7 +169,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 				open = !open;
 
 				if (open) {
-					const segment = $page.url.pathname.split('/')[1];
+					const segment = page.url.pathname.split('/')[1];
 					current = links.find((link) => link.slug === segment);
 				}
 			}}

packages/site-kit/src/lib/search/SearchBox.svelte

@@ -408,6 +408,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	.results {
 		overflow: auto;
 		overscroll-behavior-y: none;
+		scrollbar-color: var(--sk-scrollbar) var(--sk-bg-2);
 	}
 
 	.results-container {