Version Packages (next)

.changeset/pre.json

@@ -27,6 +27,7 @@
     "beige-bananas-press",
     "beige-grapes-love",
     "beige-teachers-end",
+    "big-garlics-complain",
     "blue-apes-type",
     "blue-cats-mate",
     "blue-poets-jam",
@@ -48,6 +49,7 @@
     "chatty-steaks-yell",
     "chilled-books-dress",
     "chilled-starfishes-jog",
+    "chilled-zebras-check",
     "chilly-files-greet",
     "chilly-flowers-design",
     "clever-dolls-poke",
@@ -58,6 +60,7 @@
     "cold-llamas-brake",
     "cold-panthers-learn",
     "cold-pants-unite",
+    "cool-hounds-divide",
     "cool-spoons-dress",
     "curvy-sloths-brake",
     "cyan-roses-act",
@@ -76,6 +79,7 @@
     "few-rockets-think",
     "few-singers-pump",
     "fifty-turtles-joke",
+    "five-shirts-allow",
     "flat-cameras-build",
     "flat-ducks-impress",
     "flat-parrots-juggle",
@@ -131,6 +135,7 @@
     "light-kangaroos-tie",
     "light-keys-mix",
     "light-roses-teach",
+    "little-shirts-happen",
     "long-bulldogs-invent",
     "long-moles-fold",
     "loud-seals-remember",
@@ -139,6 +144,7 @@
     "mean-bananas-live",
     "metal-nails-divide",
     "metal-tigers-kiss",
+    "mighty-carrots-switch",
     "mighty-garlics-pretend",
     "mighty-pumpkins-stare",
     "modern-boats-lie",

packages/adapter-begin/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sveltejs/adapter-begin
 
+## 1.0.0-next.9
+
+### Patch Changes
+
+- 1ba1784: Prevent adapter from splitting query params if they contain commas
+
 ## 1.0.0-next.8
 
 ### Patch Changes

packages/adapter-begin/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sveltejs/adapter-begin",
-	"version": "1.0.0-next.8",
+	"version": "1.0.0-next.9",
 	"main": "index.cjs",
 	"types": "index.d.ts",
 	"scripts": {

packages/adapter-netlify/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sveltejs/adapter-netlify
 
+## 1.0.0-next.14
+
+### Patch Changes
+
+- f59530f: Allow custom redirects for Netlify Adapter
+- 1ba1784: Prevent adapter from splitting query params if they contain commas
+- Updated dependencies [261ee1c]
+- Updated dependencies [ec156c6]
+- Updated dependencies [586785d]
+  - @sveltejs/[email protected]
+
 ## 1.0.0-next.13
 
 ### Patch Changes

packages/adapter-netlify/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sveltejs/adapter-netlify",
-	"version": "1.0.0-next.13",
+	"version": "1.0.0-next.14",
 	"type": "module",
 	"exports": {
 		"import": "./index.js"

packages/create-svelte/templates/default/i18n.config.js

@@ -0,0 +1,37 @@
+import locales from './locales.js';
+
+export const defaultLocale = locales[0];
+
+/** @typedef {{
+ *   content: string;
+ *   dynamic: boolean;
+ *   spread: boolean;
+ * }} Part */
+
+/**
+ * Create localized routes prefixed with locale
+ * @param {Part[][]} segments
+ * @param {'page' | 'endpoint'} type
+ * @returns {Part[][][]}
+ */
+export function localizeRoutes(segments, type) {
+	if (type === 'endpoint') return [segments];
+	return locales.map((locale) =>
+		locale === defaultLocale
+			? segments
+			: [
+					[{ content: locale, dynamic: false, spread: false }],
+					...segments.map((segment) => segment.map((part) => translate(part)))
+			  ]
+	);
+}
+
+/**
+ * Translate part of a route segment
+ * @param {Part} part
+ * @returns {Part}
+ */
+function translate(part) {
+	if (part.content === 'about') return { ...part, content: 'ueber' };
+	return part;
+}

packages/create-svelte/templates/default/locales.js

@@ -0,0 +1 @@
+export default ['en', 'de'];

packages/create-svelte/templates/default/src/lib/Header/index.svelte

@@ -1,8 +1,21 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import logo from './svelte-logo.svg';
+	import { l, localizedPaths, locale as currentLocale, defaultLocale } from '$lib/i18n';
+
+	$: alternatePaths = $localizedPaths($page.path) || {};
+	$: defaultPath = alternatePaths[defaultLocale];
 </script>
 
+<svelte:head>
+	{#if defaultPath}
+		<link rel="alternate" hreflang="x-default" href={defaultPath} />
+	{/if}
+	{#each Object.entries(alternatePaths) as [locale, path]}
+		<link rel="alternate" hreflang={locale} href={path} />
+	{/each}
+</svelte:head>
+
 <header>
 	<div class="corner">
 		<a href="https://kit.svelte.dev">
@@ -15,9 +28,13 @@
 			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
 		</svg>
 		<ul>
-			<li class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
-			<li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
-			<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href="/todos">Todos</a></li>
+			<li class:active={$page.path === $l('/')}><a sveltekit:prefetch href={$l('/')}>Home</a></li>
+			<li class:active={$page.path === $l('/about')}>
+				<a sveltekit:prefetch href={$l('/about')}>About</a>
+			</li>
+			<li class:active={$page.path === $l('/todos')}>
+				<a sveltekit:prefetch href={$l('/todos')}>Todos</a>
+			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
 			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
@@ -26,6 +43,11 @@
 
 	<div class="corner">
 		<!-- TODO put something else here? github link? -->
+		<nav>
+			{#each Object.entries(alternatePaths) as [locale, path]}
+				<a class:active={$currentLocale === locale} href={path}>{locale}</a>
+			{/each}
+		</nav>
 	</div>
 </header>
 
@@ -36,7 +58,7 @@
 	}
 
 	.corner {
-		width: 3em;
+		display: flex;
 		height: 3em;
 	}
 
@@ -46,6 +68,23 @@
 		justify-content: center;
 		width: 100%;
 		height: 100%;
+		text-transform: uppercase;
+	}
+
+	.corner nav a {
+		position: relative;
+	}
+
+	.corner a.active::before {
+		--size: 6px;
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 0;
+		left: calc(50% - var(--size));
+		border: var(--size) solid transparent;
+		border-top: var(--size) solid var(--accent-color);
 	}
 
 	.corner img {

packages/create-svelte/templates/default/src/lib/i18n.ts

@@ -0,0 +1,26 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+import { alternates } from '$app/navigation';
+
+import locales from '../../locales';
+
+export const defaultLocale = locales[0];
+
+export const locale = derived(
+	page,
+	(page) => page.path.match(/^\/([a-z]{2})(\/|$)/)?.[1] || defaultLocale
+);
+
+export const localizedPaths = derived(page, (page) => (path: string): Record<string, string> =>
+	alternates(path)?.reduce((result, alt) => {
+		result[alt.match(/^\/([a-z]{2})(\/|$)/)?.[1] || defaultLocale] = alt;
+		return result;
+	}, {})
+);
+
+export const l = derived(
+	[localizedPaths, locale],
+	([localizedPaths, locale]) => (path: string): string => localizedPaths(path)?.[locale] || path
+);
+
+export { l as localize };

packages/create-svelte/templates/default/svelte.config.js

@@ -1,4 +1,5 @@
 import preprocess from 'svelte-preprocess';
+import { localizeRoutes } from './i18n.config.js';
 
 const adapter = process.env.ADAPTER;
 const options = JSON.parse(process.env.OPTIONS || '{}');
@@ -11,7 +12,9 @@ const config = {
 
 	kit: {
 		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
+		target: '#svelte',
+
+		alternateRoutes: localizeRoutes
 	}
 };
 

packages/kit/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sveltejs/kit
 
+## 1.0.0-next.109
+
+### Patch Changes
+
+- 261ee1c: Update compatible Node versions
+- ec156c6: let hash only changes be handled by router
+- 586785d: Allow passing HTTPS key pair in Vite section of config
+
 ## 1.0.0-next.108
 
 ### Patch Changes

packages/kit/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sveltejs/kit",
-	"version": "1.0.0-next.108",
+	"version": "1.0.0-next.109",
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.10",

packages/kit/src/core/build/index.js

@@ -337,6 +337,7 @@ async function build_server(
 						const params = get_params(route.params);
 
 						return `{
+									id: ${s(route.id)},
 									type: 'page',
 									pattern: ${route.pattern},
 									params: ${params},

packages/kit/src/core/create_app/index.js

@@ -86,7 +86,8 @@ function generate_client_manifest(manifest_data, base) {
 							'})';
 
 					const tuple = [route.pattern, get_indices(route.a), get_indices(route.b)];
-					if (params) tuple.push(params);
+					tuple.push(params);
+					tuple.push(route.id);
 
 					return `// ${route.a[route.a.length - 1]}\n\t\t[${tuple.join(', ')}]`;
 				} else {
@@ -149,6 +150,7 @@ function generate_app(manifest_data, base) {
 			// stores
 			export let stores;
 			export let page;
+			export let routes;
 
 			export let components;
 			${levels.map((l) => `export let props_${l} = null;`).join('\n\t\t\t')}
@@ -158,6 +160,8 @@ function generate_app(manifest_data, base) {
 			$: stores.page.set(page);
 			afterUpdate(stores.page.notify);
 
+			if (routes) setContext('__svelte_routes__', routes);
+
 			let mounted = false;
 			let navigated = false;
 			let title = null;