merge main

Author: Rich-Harris

apps/svelte.dev/content/docs/kit/40-best-practices/06-icons.md

@@ -0,0 +1,12 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: Icons
+---
+
+## CSS
+
+A great way to use icons is to define them purely via CSS. Iconify offers support for [many popular icon sets](https://icon-sets.iconify.design/) that [can be included via CSS](https://iconify.design/docs/usage/css/). This method can also be used with popular CSS frameworks by leveraging the Iconify [Tailwind CSS plugin](https://iconify.design/docs/usage/css/tailwind/) or [UnoCSS plugin](https://iconify.design/docs/usage/css/unocss/). As opposed to libraries based on Svelte components, it doesn't require each icon to be imported into your `.svelte` file.
+
+## Svelte
+
+There are many [icon libraries for Svelte](https://www.sveltesociety.dev/packages?category=icons). When choosing an icon library, it is recommended to avoid those that provide a `.svelte` file per icon as these libraries can have thousands of `.svelte` files which really slow down [Vite's dependency optimization](https://vite.dev/guide/dep-pre-bundling.html). This can become especially pathological if the icons are imported both via an umbrella import and subpath import [as described in the `vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies).

apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md

@@ -153,12 +153,6 @@ Using a content delivery network (CDN) can allow you to optimize these images dy
 
 CDNs can generally be used without any need for a library. However, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://github.com/storyblok/storyblok-svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling.
 
-## Icons
-
-A great way to use icons is to define them purely in CSS. Iconify offers a huge set of icons [available via CSS](https://iconify.design/docs/usage/css/).
-
-For icons defined in `.svelte` files, it is recommended to avoid libraries that provide a `.svelte` file per icon. These libraries can have thousands of `.svelte` files which really slow down Vite's dependency optimization. This can become especially pathological if the icons are imported both via an umbrella import and subpath import [as described in the `vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies).
-
 ## Best practices
 
 - For each image type, use the appropriate solution from those discussed above. You can mix and match all three solutions in one project. For example, you may use Vite's built-in handling to provide images for `<meta>` tags, display images on your homepage with `@sveltejs/enhanced-img`, and display user-submitted content with a dynamic approach.

apps/svelte.dev/content/docs/kit/98-reference/[email protected]

@@ -497,7 +497,7 @@ type: Exclude<NavigationType, 'leave'>;
 <div class="ts-block-property-details">
 
 The type of navigation:
-- `enter`: The app has hydrated
+- `enter`: The app has hydrated/started
 - `form`: The user submitted a `<form>`
 - `link`: Navigation was triggered by a link click
 - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
@@ -1650,7 +1650,7 @@ The URL that is navigated to
 
 ## NavigationType
 
-- `enter`: The app has hydrated
+- `enter`: The app has hydrated/started
 - `form`: The user submitted a `<form>` with a GET method
 - `leave`: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
 - `link`: Navigation was triggered by a link click

apps/svelte.dev/content/docs/svelte/01-introduction/02-getting-started.md

@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: Getting started
 ---
 
-We recommend using [SvelteKit](../kit), the official application framework from the Svelte team powered by [Vite](https://vite.dev/):
+We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with:
 
 ```bash
 npx sv create myapp
@@ -16,7 +16,9 @@ Don't worry if you don't know Svelte yet! You can ignore all the nice features S
 
 ## Alternatives to SvelteKit
 
-You can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#Is-there-a-router) as well.
+You can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS, and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#Is-there-a-router) as well.
+
+>[!NOTE] Vite is often used in standalone mode to build [single page apps (SPAs)](../kit/glossary#SPA), which you can also [build with SvelteKit](../kit/single-page-apps).
 
 There are also plugins for [Rollup](https://github.com/sveltejs/rollup-plugin-svelte), [Webpack](https://github.com/sveltejs/svelte-loader) [and a few others](https://sveltesociety.dev/packages?category=build-plugins), but we recommend Vite.
 

apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md

@@ -97,7 +97,7 @@ However, you can use any router library. A lot of people use [page.js](https://g
 
 If you prefer a declarative HTML approach, there's the isomorphic [svelte-routing](https://github.com/EmilTholin/svelte-routing) library and a fork of it called [svelte-navigator](https://github.com/mefechoel/svelte-navigator) containing some additional functionality.
 
-If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
+If you need hash-based routing on the client side, check out the [hash option](https://svelte.dev/docs/kit/configuration#router) in SvelteKit, [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router), or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
 
 [Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
 

apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md

@@ -660,6 +660,12 @@ Cannot access a computed property of a rune
 `%name%` is not a valid rune
 ```
 
+### rune_invalid_spread
+
+```
+`%rune%` cannot be called with a spread argument
+```
+
 ### rune_invalid_usage
 
 ```

apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md

@@ -665,6 +665,12 @@ Cannot access a computed property of a rune
 `%name%` is not a valid rune
 ```
 
+### rune_invalid_spread
+
+```
+`%rune%` cannot be called with a spread argument
+```
+
 ### rune_invalid_usage
 
 ```

apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts

@@ -45,7 +45,7 @@ export async function create(): Promise<Adapter> {
 				.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')
 				.map((f) => ({ ...f, name: f.name.slice(9) })),
 			{
-				runes: true
+				// TODO support Tailwind here?
 			}
 		);
 	}

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -72,7 +72,8 @@
 		if (!hash && !saved) {
 			repl?.set({
 				// TODO make this munging unnecessary (using JSON instead of structuredClone for better browser compat)
-				files: JSON.parse(JSON.stringify(data.gist.components)).map(munge)
+				files: JSON.parse(JSON.stringify(data.gist.components)).map(munge),
+				tailwind: false // TODO
 			});
 
 			modified = false;
@@ -92,7 +93,7 @@
 				name = recovered.name;
 			}
 
-			repl.set({ files });
+			repl.set({ files, tailwind: recovered.tailwind ?? false });
 		} catch {
 			alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`);
 		}
@@ -155,7 +156,8 @@
 	async function update_hash() {
 		// Only change hash when necessary to avoid polluting everyone's browser history
 		if (modified) {
-			const json = JSON.stringify({ name, files: repl.toJSON().files });
+			const { files, tailwind } = repl.toJSON();
+			const json = JSON.stringify({ name, files, tailwind });
 			await set_hash(json);
 		}
 	}
@@ -210,7 +212,8 @@
 		if (modified) {
 			// we can't save to the hash because it's an async operation, so we use
 			// a short-lived sessionStorage value instead
-			const json = JSON.stringify({ name, files: repl.toJSON().files });
+			const { files, tailwind } = repl.toJSON();
+			const json = JSON.stringify({ name, files, tailwind });
 			sessionStorage.setItem(STORAGE_KEY, json);
 		}
 	}}

apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte

@@ -5,6 +5,8 @@
 	import { Repl } from '@sveltejs/repl';
 	import { mapbox_setup } from '../../../../../config.js';
 	import { page } from '$app/state';
+	import { decode_and_decompress_text } from '../gzip.js';
+	import type { File } from 'editor';
 
 	let { data } = $props();
 
@@ -25,10 +27,41 @@
 		});
 	}
 
+	// TODO make this munging unnecessary
+	function munge(data: any): File {
+		const basename = `${data.name}.${data.type}`;
+
+		return {
+			type: 'file',
+			name: basename,
+			basename,
+			contents: data.source,
+			text: true
+		};
+	}
+
+	async function set_files() {
+		const hash = location.hash.slice(1);
+
+		if (!hash) {
+			repl?.set({
+				files: data.gist.components.map(munge),
+				tailwind: false // TODO
+			});
+
+			return;
+		}
+
+		try {
+			const recovered = JSON.parse(await decode_and_decompress_text(hash));
+			repl.set({ files: recovered.files, tailwind: recovered.tailwind ?? false });
+		} catch {
+			alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`);
+		}
+	}
+
 	afterNavigate(() => {
-		repl?.set({
-			files: data.gist.components
-		});
+		set_files();
 	});
 
 	const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
@@ -51,7 +84,7 @@
 			can_escape
 			injectedJS={mapbox_setup}
 			previewTheme={theme.current}
-			embedded
+			embedded={page.url.searchParams.has('output-only') ? 'output-only' : true}
 		/>
 	{/if}
 </div>