Merge branch 'main' into gh-694

Author: Rich-Harris

apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md

@@ -2,7 +2,7 @@
 title: Dimensions
 ---
 
-You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings to any element:
+You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings to any element, and Svelte will update the bound values using a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver):
 
 ```svelte
 /// file: App.svelte
@@ -13,3 +13,5 @@ You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bind
 ```
 
 These bindings are readonly — changing the values of `w` and `h` won't have any effect on the element.
+
+> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.

apps/svelte.dev/package.json

@@ -28,6 +28,7 @@
 		"@testing-library/svelte": "^5.2.3",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/d3-geo": "^3.1.0",
+		"@vercel/analytics": "^1.3.2",
 		"@vercel/speed-insights": "^1.0.0",
 		"@webcontainer/api": "^1.1.5",
 		"adm-zip": "^0.5.10",

apps/svelte.dev/src/lib/db/client.js

@@ -1,16 +1,22 @@
-import { dev } from '$app/environment';
-import { SUPABASE_URL, SUPABASE_KEY } from '$env/static/private';
+import { building } from '$app/environment';
+import { env } from '$env/dynamic/private';
 import { createClient } from '@supabase/supabase-js';
 
-const client_enabled = !!(!dev || (SUPABASE_URL && SUPABASE_KEY));
+const enabled = !building && env.SUPABASE_URL && env.SUPABASE_KEY;
+
+if (!enabled) {
+	console.warn(
+		`Missing SUPABASE_URL and SUPABASE_KEY environment variables. Loading and saving in the playground is disabled`
+	);
+}
 
 /**
  * @type {import('@supabase/supabase-js').SupabaseClient<any, "public", any>}
  */
 // @ts-ignore-line
 export const client =
-	client_enabled &&
-	createClient(SUPABASE_URL, SUPABASE_KEY, {
+	enabled &&
+	createClient(env.SUPABASE_URL, env.SUPABASE_KEY, {
 		global: { fetch },
 		auth: { persistSession: false }
 	});

apps/svelte.dev/src/lib/db/session.js

@@ -1,6 +1,7 @@
 import * as cookie from 'cookie';
 import flru from 'flru';
 import { client } from './client.js';
+import { error } from '@sveltejs/kit';
 
 /** @typedef {import('./types').User} User */
 
@@ -13,27 +14,31 @@ const session_cache = flru(1000);
  * @param {import('./types').GitHubUser} user
  */
 export async function create(user) {
-	const { data, error } = await client.rpc('login', {
+	if (!client) {
+		error(500, 'Database client is not configured');
+	}
+
+	const result = await client.rpc('login', {
 		user_github_id: user.github_id,
 		user_github_name: user.github_name,
 		user_github_login: user.github_login,
 		user_github_avatar_url: user.github_avatar_url
 	});
 
-	if (error) {
-		throw new Error(error.message);
+	if (result.error) {
+		throw new Error(result.error.message);
 	}
 
-	session_cache.set(data.sessionid, {
-		id: data.userid,
+	session_cache.set(result.data.sessionid, {
+		id: result.data.userid,
 		github_name: user.github_name,
 		github_login: user.github_login,
 		github_avatar_url: user.github_avatar_url
 	});
 
 	return {
-		sessionid: data.sessionid,
-		expires: new Date(data.expires)
+		sessionid: result.data.sessionid,
+		expires: new Date(result.data.expires)
 	};
 }
 
@@ -42,7 +47,7 @@ export async function create(user) {
  * @returns {Promise<User | null>}
  */
 export async function read(sessionid) {
-	if (!sessionid) return null;
+	if (!sessionid || !client) return null;
 
 	if (!session_cache.get(sessionid)) {
 		session_cache.set(
@@ -63,10 +68,14 @@ export async function read(sessionid) {
 
 /** @param {string} sessionid */
 export async function destroy(sessionid) {
-	const { error } = await client.rpc('logout', { sessionid });
+	if (!client) {
+		error(500, 'Database client is not configured');
+	}
+
+	const result = await client.rpc('logout', { sessionid });
 
-	if (error) {
-		throw new Error(error.message);
+	if (result.error) {
+		throw new Error(result.error.message);
 	}
 
 	session_cache.set(sessionid, null);

apps/svelte.dev/src/routes/+layout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import '@sveltejs/site-kit/styles/index.css';
-	import { browser } from '$app/environment';
+	import { browser, dev } from '$app/environment';
 	import { page } from '$app/stores';
 	import { Shell, Banner } from '@sveltejs/site-kit/components';
 	import { Nav } from '@sveltejs/site-kit/nav';
 	import { SearchBox } from '@sveltejs/site-kit/search';
 	import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
+	import { inject } from '@vercel/analytics';
 	import { beforeNavigate } from '$app/navigation';
 
 	injectSpeedInsights();
+	inject({ mode: dev ? 'development' : 'production' });
 
 	// Make all navigations between SvelteKit-tutorial and non-SvelteKit-tutorial pages (and vice versa)
 	// a full page navigation to ensure webcontainers get the correct origin restriction headers while

apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts

@@ -8,8 +8,13 @@ import Card from './Card.svelte';
 import DMSerifDisplay from './DMSerifDisplay-Regular.ttf?url';
 import FiraSans from './FiraSans-Regular.ttf?url';
 import { blog_posts } from '$lib/server/content';
+import type { ServerlessConfig } from '@sveltejs/adapter-vercel';
 
-export const prerender = true;
+export const config: ServerlessConfig = {
+	isr: {
+		expiration: false
+	}
+};
 
 export function entries() {
 	return blog_posts.map((post) => ({