From 220fb5e91213744dd1ca4aa9cd9b89378e1bbc7e Mon Sep 17 00:00:00 2001 From: broemp Date: Wed, 13 Nov 2024 22:35:21 +0100 Subject: [PATCH 001/170] docs: Fix Typo in advanced tutorial (#863) Update index.md Fix Typo --- .../01-advanced-reactivity/01-raw-state/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md index 937fa219d2..118197c26e 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md @@ -4,7 +4,7 @@ title: Raw state In previous exercises, we learned that state is [deeply reactive](deep-state) — if you (for example) change a property of an object, or push to an array, it will cause the UI to update. This works by creating a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) that intercepts reads and writes. -Occasionally, that's not what you want. If you're not changing individual properties, or if it's important to main referential equality, then you can use _raw state_ instead. +Occasionally, that's not what you want. If you're not changing individual properties, or if it's important to maintain referential equality, then you can use _raw state_ instead. In this example, we have a chart of Svelte's steadily increasing stock price. We want the chart to update when new data comes in, which we could achieve by turning `data` into state... From e88231b17657802b29931916806b8d29601fa3d2 Mon Sep 17 00:00:00 2001 From: Lael <127096683+laelhalawani@users.noreply.github.com> Date: Mon, 25 Nov 2024 18:05:13 +0100 Subject: [PATCH 002/170] docs: tweak tutorial (#879) clarified the code slightly by providing file names where the changes apply for context and an example of the last use --- .../01-svelte/03-props/03-spread-props/index.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md index daded48b5e..37ab21c616 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md @@ -2,7 +2,7 @@ title: Spread props --- -In this exercise, we've forgotten to pass the `name` prop expected by `PackageInfo.svelte`, meaning the `` element is empty and the npm link is broken. +In this exercise, in `App.svelte` we've forgotten to pass the `name` prop expected by `PackageInfo.svelte`, meaning the `` element is empty and the npm link is broken. We _could_ fix it by adding the prop... @@ -23,7 +23,7 @@ We _could_ fix it by adding the prop... ``` -> [!NOTE] Conversely, you can get an object containing all the props that were passed into a component using a rest property... +> [!NOTE] Conversely, in `PackageInfo.svelte` you can get an object containing all the props that were passed into a component using a rest property... > > ```js > let { name, ...stuff } = $props(); @@ -34,3 +34,9 @@ We _could_ fix it by adding the prop... > ```js > let stuff = $props(); > ``` +> +> ...in which case you can access the properties by their object paths: +> +> ```js +> console.log(stuff.name, stuff.version, stuff.description, stuff.website) +> ``` From 799fd0f718eb5d617ade842a79ac553a1217810c Mon Sep 17 00:00:00 2001 From: Konstantinos Kostarellis Date: Mon, 25 Nov 2024 18:10:54 +0100 Subject: [PATCH 003/170] fix: repl example '' (#871) Fixing the repl example '' Svelte Repl isn't working without `.toString()` on the selection. --- .../17-special-elements/04-svelte-document/+assets/App.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte b/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte index e3ea0002e4..822fd884a0 100644 --- a/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte +++ b/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte @@ -1,7 +1,7 @@ From 0b7a0cb49833e23b97e22353fdf62b1c022a1b64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 25 Nov 2024 18:12:26 +0100 Subject: [PATCH 004/170] fix: resolve `module` and `browser` conditions for fetched packages in REPL (#872) Resolve `module` and `browser` conditions for fetched packages in REPL --- packages/repl/src/lib/workers/bundler/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts index c241fa922d..1aae33b2a2 100644 --- a/packages/repl/src/lib/workers/bundler/index.ts +++ b/packages/repl/src/lib/workers/bundler/index.ts @@ -176,7 +176,7 @@ async function resolve_from_pkg( try { const resolved = resolve.exports(pkg, subpath, { browser: true, - conditions: ['svelte', 'development'] + conditions: ['svelte', 'module', 'browser', 'development'] }); return resolved?.[0]; From a9367a41c9afd93e56f1939cbed1ba36d4cc6b43 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 25 Nov 2024 12:14:48 -0500 Subject: [PATCH 005/170] feat: add vim mode via query param (#813) closes #570 --- packages/editor/src/lib/Workspace.svelte.ts | 38 +++++++++++---------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts index ce67848cc2..d73f4f65ea 100644 --- a/packages/editor/src/lib/Workspace.svelte.ts +++ b/packages/editor/src/lib/Workspace.svelte.ts @@ -52,31 +52,17 @@ function file_type(file: Item) { } const tab_behaviour = new Compartment(); +const vim_mode = new Compartment(); const default_extensions = [ basicSetup, EditorState.tabSize.of(2), tab_behaviour.of(keymap.of([{ key: 'Tab', run: acceptCompletion }])), indentUnit.of('\t'), - theme + theme, + vim_mode.of([]) ]; -// TODO add vim mode via a compartment (https://codemirror.net/examples/config/) -// let installed_vim = false; -// let should_install_vim = localStorage.getItem('vim') === 'true'; - -// const q = new URLSearchParams(location.search); -// if (q.has('vim')) { -// should_install_vim = q.get('vim') === 'true'; -// localStorage.setItem('vim', should_install_vim.toString()); -// } - -// if (!installed_vim && should_install_vim) { -// installed_vim = true; -// const { vim } = await import('@replit/codemirror-vim'); -// extensions.push(vim()); -// } - export interface ExposedCompilerOptions { generate: 'client' | 'server'; dev: boolean; @@ -243,11 +229,27 @@ export class Workspace { this.modified = {}; } - link(view: EditorView) { + async link(view: EditorView) { if (this.#view) throw new Error('view is already linked'); this.#view = view; view.setState(this.#get_state(untrack(() => this.#current))); + + let should_install_vim = localStorage.getItem('vim') === 'true'; + + const q = new URLSearchParams(location.search); + if (q.has('vim')) { + should_install_vim = q.get('vim') === 'true'; + localStorage.setItem('vim', should_install_vim.toString()); + } + + if (should_install_vim) { + const { vim } = await import('@replit/codemirror-vim'); + + this.#view?.dispatch({ + effects: vim_mode.reconfigure(vim()) + }); + } } move(from: Item, to: Item) { From d401d8c0d79c8411a7580957434b1ad90dd698e7 Mon Sep 17 00:00:00 2001 From: Thiago Lino Gomes Date: Tue, 26 Nov 2024 09:29:29 -0300 Subject: [PATCH 006/170] fix: update all $state.frozen autocomplete sugestions to $state.raw (#889) --- .../tutorial/01-svelte/03-props/03-spread-props/index.md | 2 +- .../src/lib/codemirror/autocompletionDataProvider.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md index 37ab21c616..adfcaacb66 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md @@ -38,5 +38,5 @@ We _could_ fix it by adding the prop... > ...in which case you can access the properties by their object paths: > > ```js -> console.log(stuff.name, stuff.version, stuff.description, stuff.website) +> console.log(stuff.name, stuff.version, stuff.description, stuff.website); > ``` diff --git a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js index 8cf10cea4d..3954def5d0 100644 --- a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js +++ b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js @@ -493,7 +493,7 @@ const is_state = (node) => { /** * Returns `true` if we're already in a valid call expression, e.g. - * changing an existing `$state()` to `$state.frozen()` + * changing an existing `$state()` to `$state.raw()` * @type {import("./types").Test} */ const is_state_call = (node) => { @@ -583,8 +583,8 @@ export const runes = [ { snippet: '$derived.by', test: is_state_call }, { snippet: '$effect(() => {\n\t${}\n});', test: is_statement }, { snippet: '$effect.pre(() => {\n\t${}\n});', test: is_statement }, - { snippet: '$state.frozen(${});', test: is_state }, - { snippet: '$state.frozen', test: is_state_call }, + { snippet: '$state.raw(${});', test: is_state }, + { snippet: '$state.raw', test: is_state_call }, { snippet: '$bindable()', test: is_bindable }, { snippet: '$effect.root(() => {\n\t${}\n})' }, { snippet: '$state.snapshot(${})' }, From e80d79d54c0b70e0c5ca560dc1e7b53cd64f0c0c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:55:38 +0100 Subject: [PATCH 007/170] Sync `svelte` docs (#826) sync svelte docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../svelte/03-template-syntax/06-snippet.md | 2 +- .../docs/svelte/06-runtime/01-stores.md | 22 +++++++++++++++++++ .../content/docs/svelte/07-misc/02-testing.md | 2 +- .../docs/svelte/07-misc/03-typescript.md | 4 ++-- .../svelte/07-misc/07-v5-migration-guide.md | 6 ++--- .../98-reference/.generated/compile-errors.md | 6 +++++ .../svelte/98-reference/21-svelte-legacy.md | 19 ++++++++++++++++ .../svelte/98-reference/30-compiler-errors.md | 6 +++++ 8 files changed, 60 insertions(+), 7 deletions(-) diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md index d4ec5a0cef..4bbc970c5d 100644 --- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md +++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md @@ -169,7 +169,7 @@ Any content inside the component tags that is _not_ a snippet declaration implic ```svelte - ``` ```svelte diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md index 8ea01e5314..9cff5a754f 100644 --- a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md +++ b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md @@ -38,6 +38,28 @@ Prior to Svelte 5, stores were the go-to solution for creating cross-component r - when extracting logic, it's better to take advantage of runes' universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a `.svelte.js` or `.svelte.ts` file ending) - when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state +```ts +/// file: state.svelte.js +export const userState = $state({ + name: 'name', + /* ... */ +}); +``` + +```svelte + + + +

User name: {userState.name}

+ +``` + Stores are still a good solution when you have complex asynchronous data streams or it's important to have more manual control over updating values or listening to changes. If you're familiar with RxJs and want to reuse that knowledge, the `$` also comes in handy for you. ## svelte/store diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md index 1c3d4ba6e1..c8774e341f 100644 --- a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md +++ b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md @@ -197,7 +197,7 @@ When writing component tests that involve two-way bindings, context or snippet p 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/). -To get start with Playwright, either let you guide by [their VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`. +To get started with Playwright, either install it via [the VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`. After you've done that, you should have a `tests` folder and a Playwright config. You may need to adjust that config to tell Playwright what to do before running the tests - mainly starting your application at a certain port: diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md index e02ac7b6b1..f4513a9a2d 100644 --- a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md +++ b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md @@ -142,7 +142,7 @@ In case you're writing a component that wraps a native element, you may want to ``` @@ -156,7 +156,7 @@ Not all elements have a dedicated type definition. For those without one, use `S
- {@render children()} + {@render children?.()}
``` diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md index 4ebfb5f905..687f8e93b1 100644 --- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md +++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md @@ -169,11 +169,11 @@ This function is deprecated in Svelte 5. Instead, components should accept _call { - size += power---.details---; + size += power---.detail---; if (size > 75) burst = true; }} ---on:---deflate={(power) => { - if (size > 0) size -= power---.details---; + if (size > 0) size -= power---.detail---; }} /> @@ -317,7 +317,7 @@ When spreading props, local event handlers must go _after_ the spread, or they r > - import the function > - call the function to get a dispatch function > - call said dispatch function with a string and possibly a payload -> - retrieve said payload on the other end through a `.details` property, because the event itself was always a `CustomEvent` +> - retrieve said payload on the other end through a `.detail` property, because the event itself was always a `CustomEvent` > > It was always possible to use component callback props, but because you had to listen to DOM events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way around: Callback props are now the more sensible thing to do. > diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md index b32bc6b89c..16cd361e52 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md @@ -412,6 +412,12 @@ Expected whitespace `$host()` can only be used inside custom element component instances ``` +### illegal_element_attribute + +``` +`<%name%>` does not support non-event attributes or spread attributes +``` + ### import_svelte_internal_forbidden ``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md index 51059bd576..45f2e3b65c 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md @@ -281,4 +281,23 @@ function trusted( +## LegacyComponentType + +Support using the component as both a class and function during the transition period + +
+ +```dts +type LegacyComponentType = { + new (o: ComponentConstructorOptions): SvelteComponent; + ( + ...args: Parameters>> + ): ReturnType< + Component, Record> + >; +}; +``` + +
+ diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md index b9b3c8f7a3..5bd6e6eef2 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md @@ -416,6 +416,12 @@ Expected whitespace `$host()` can only be used inside custom element component instances ``` +### illegal_element_attribute + +``` +`<%name%>` does not support non-event attributes or spread attributes +``` + ### import_svelte_internal_forbidden ``` From 1b686b8bb2d85ceb0148343d37aa0335d2c4750d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:56:26 +0100 Subject: [PATCH 008/170] Sync `kit` docs (#828) sync kit docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../content/docs/kit/20-core-concepts/10-routing.md | 2 +- apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md | 2 +- .../content/docs/kit/20-core-concepts/30-form-actions.md | 4 ++-- .../docs/kit/25-build-and-deploy/60-adapter-cloudflare.md | 2 +- .../kit/25-build-and-deploy/70-adapter-cloudflare-workers.md | 2 +- .../content/docs/kit/25-build-and-deploy/90-adapter-vercel.md | 4 ++-- apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md | 2 +- .../content/docs/kit/30-advanced/67-shallow-routing.md | 4 ++-- apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md | 4 ---- .../content/docs/kit/60-appendix/20-integrations.md | 4 +++- apps/svelte.dev/content/docs/kit/98-reference/54-types.md | 2 +- 11 files changed, 15 insertions(+), 17 deletions(-) diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md index 78c2b0ac71..3cb2ba3ef3 100644 --- a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md +++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md @@ -330,7 +330,7 @@ By exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD` handlers, `+server.j = {total} - + ``` ```js diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md index 7231b588d0..bba63fd2be 100644 --- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md +++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md @@ -661,7 +661,7 @@ export async function load({ fetch, depends }) {

random number: {data.number}

- + ``` ### When do load functions rerun? diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md index dddae80da9..74d08c9fdc 100644 --- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md +++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md @@ -451,7 +451,7 @@ We can also implement progressive enhancement ourselves, without `use:enhance`, } -
+
``` @@ -484,7 +484,7 @@ Form actions are the preferred way to send data to the server, since they can be } - + ``` ```js diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md index b1dea91bdd..3704dc0454 100644 --- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md +++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md @@ -84,7 +84,7 @@ export async function POST({ request, platform }) { To include type declarations for your bindings, reference them in your `src/app.d.ts`: -```dts +```ts /// file: src/app.d.ts declare global { namespace App { diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md index 6635f566d3..b4e270f622 100644 --- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md +++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md @@ -105,7 +105,7 @@ export async function POST({ request, platform }) { To include type declarations for your bindings, reference them in your `src/app.d.ts`: -```dts +```ts /// file: src/app.d.ts declare global { namespace App { diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md index 57867ce7c9..f8150c0fd7 100644 --- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md +++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md @@ -44,13 +44,13 @@ export const config = { /// file: admin/+layout.js /** @type {import('@sveltejs/adapter-vercel').Config} */ export const config = { - runtime: 'nodejs18.x' + runtime: 'nodejs22.x' }; ``` The following options apply to all functions: -- `runtime`: `'edge'`, `'nodejs18.x'` or `'nodejs20.x'`. By default, the adapter will select the `'nodejs.x'` corresponding to the Node version your project is configured to use on the Vercel dashboard +- `runtime`: `'edge'`, `'nodejs18.x'`, `'nodejs20.x'` or `'nodejs22.x'`. By default, the adapter will select the `'nodejs.x'` corresponding to the Node version your project is configured to use on the Vercel dashboard - `regions`: an array of [edge network regions](https://vercel.com/docs/concepts/edge-network/regions) (defaulting to `["iad1"]` for serverless functions) or `'all'` if `runtime` is `edge` (its default). Note that multiple regions for serverless functions are only supported on Enterprise plans - `split`: if `true`, causes a route to be deployed as an individual function. If `split` is set to `true` at the adapter level, all routes will be deployed as individual functions diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md index 7449b51377..5fd17455ad 100644 --- a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md +++ b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md @@ -126,7 +126,7 @@ The exception is when the error occurs inside the root `+layout.js` or `+layout. If you're using TypeScript and need to customize the shape of errors, you can do so by declaring an `App.Error` interface in your app (by convention, in `src/app.d.ts`, though it can live anywhere that TypeScript can 'see'): -```dts +```ts /// file: src/app.d.ts declare global { namespace App { diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md b/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md index f10edd0ad5..af7d389599 100644 --- a/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md +++ b/apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md @@ -57,7 +57,7 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c {#each data.thumbnails as thumbnail} { + onclick={async (e) => { if (innerWidth < 640 // bail if the screen is too small || e.shiftKey // or the link is opened in a new window || e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey) @@ -86,7 +86,7 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c {/each} {#if $page.state.selected} - history.back()}> + history.back()}> diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md index 4e0b2d536c..89e3db4b14 100644 --- a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md +++ b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md @@ -27,10 +27,6 @@ In order to support SSR, a JS backend — such as Node.js or Deno-based server, It is also possible to write custom adapters or leverage community adapters to deploy SvelteKit to more platforms such as specialized server environments, browser extensions, or native applications. See [integrations](./integrations) for more examples and integrations. -## How do I use HMR with SvelteKit? - -SvelteKit has HMR enabled by default powered by [svelte-hmr](https://github.com/sveltejs/svelte-hmr). If you saw [Rich's presentation at the 2020 Svelte Summit](/blog/whats-the-deal-with-sveltekit), you may have seen a more powerful-looking version of HMR presented. This demo had `svelte-hmr`'s `preserveLocalState` flag on. This flag is now off by default because it may lead to unexpected behaviour and edge cases. But don't worry, you are still getting HMR with SvelteKit! If you'd like to preserve local state you can use the `@hmr:keep` or `@hmr:keep-all` directives as documented on the [svelte-hmr](https://github.com/sveltejs/svelte-hmr) page. - ## How do I include details from package.json in my application? You cannot directly require JSON files, since SvelteKit expects [`svelte.config.js`](./configuration) to be an ES module. If you'd like to include your application's version number or other information from `package.json` in your application, you can load JSON like so: diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md b/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md index d3d9a8fcf7..63e3fa5ad5 100644 --- a/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md +++ b/apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md @@ -4,7 +4,7 @@ title: Integrations ## `vitePreprocess` -Including [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) in your project will allow you to use the various flavors of JS and CSS that Vite supports: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default: +Including [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) in your project will allow you to use the various flavors of CSS that Vite supports: PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default: ```js // svelte.config.js @@ -15,6 +15,8 @@ export default { }; ``` +You will also need to use a preprocessor if you're using TypeScript with Svelte 4. TypeScript is supported natively in Svelte 5 if you're using only the type syntax. To use more complex TypeScript syntax in Svelte 5, you will need still need a preprocessor and can use `vitePreprocess({ script: true })`. + ## Adders Run `npx sv add` to setup many different complex integrations with a single command including: diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md index 6e22a754dd..b8211dbc4e 100644 --- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md +++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md @@ -25,7 +25,7 @@ To solve this problem, SvelteKit generates `.d.ts` files for each of your endpoi ```ts /// file: .svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d.ts -/// link: false +/// link: true import type * as Kit from '@sveltejs/kit'; type RouteParams = { From 8aa34c1addc7f52e7c08ccd719209ea964ba48f2 Mon Sep 17 00:00:00 2001 From: Vhtmui <46163279+vhtmui@users.noreply.github.com> Date: Sat, 30 Nov 2024 02:04:29 +0800 Subject: [PATCH 009/170] fix: incorrect value in element. Co-authored-by: 15363205631 --- apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte index c883dcb501..14ff90479d 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte @@ -17,7 +17,7 @@ // TODO this really sucks, why is `exercise.slug` not the slug? let actual_slug = $derived.by(() => { const parts = exercise.slug.split('/'); - return `${parts[1]}/${parts[3]}`; + return `${parts[1].includes('kit') ? 'kit' : 'svelte'}/${parts[3]}`; }); From 0b3567e0eaaa235ee88e09619aa330958508d2d7 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 30 Nov 2024 12:25:55 -0500 Subject: [PATCH 010/170] Sync `kit` docs (#897) sync kit docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../content/docs/kit/98-reference/10-@sveltejs-kit.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md index 0eb8a5b8c6..973c5252e2 100644 --- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md +++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md @@ -94,9 +94,7 @@ Checks whether this is an action failure thrown by `fail`.
```dts -function isActionFailure( - e: unknown -): e is ActionFailure; +function isActionFailure(e: unknown): e is ActionFailure; ```
From 4486c859229d07a99b138b192928948aa4fe7521 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 30 Nov 2024 12:26:33 -0500 Subject: [PATCH 011/170] Sync `cli` docs (#898) sync cli docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md index 8db5eb3b16..f0cdf18380 100644 --- a/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md +++ b/apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md @@ -2,7 +2,7 @@ title: sv migrate --- -`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://github.com/sveltejs/kit/blob/main/packages/migrate) package. +`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://www.npmjs.com/package/svelte-migrate) package. Some migrations may annotate your codebase with tasks for completion that you can find by searching for `@migration`. From 9d357d29e5c812e26627494fa747560ac446b280 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 30 Nov 2024 12:27:32 -0500 Subject: [PATCH 012/170] Sync `svelte` docs (#901) sync svelte docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../content/docs/svelte/98-reference/21-svelte-transition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md index a555815ddf..5a3848c8ac 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md @@ -143,7 +143,7 @@ function fly( ## scale -Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values. +Animates the opacity and scale of an element. `in` transitions animate from the provided values, passed as parameters, to an element's current (default) values. `out` transitions animate from an element's default values to the provided values.
From 229e7b13c3c0e7ee2e29789c194f6f86ec5a7c1c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 1 Dec 2024 09:05:32 -0500 Subject: [PATCH 013/170] Sync `svelte` docs (#903) sync svelte docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../05-special-elements/01-svelte-boundary.md | 79 +++++++++++++++++++ ...1-svelte-window.md => 02-svelte-window.md} | 0 ...elte-document.md => 03-svelte-document.md} | 0 .../{03-svelte-body.md => 04-svelte-body.md} | 0 .../{04-svelte-head.md => 05-svelte-head.md} | 0 ...svelte-element.md => 06-svelte-element.md} | 0 ...svelte-options.md => 07-svelte-options.md} | 0 .../98-reference/.generated/compile-errors.md | 12 +++ .../svelte/98-reference/21-svelte-compiler.md | 5 ++ .../svelte/98-reference/30-compiler-errors.md | 12 +++ 10 files changed, 108 insertions(+) create mode 100644 apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md rename apps/svelte.dev/content/docs/svelte/05-special-elements/{01-svelte-window.md => 02-svelte-window.md} (100%) rename apps/svelte.dev/content/docs/svelte/05-special-elements/{02-svelte-document.md => 03-svelte-document.md} (100%) rename apps/svelte.dev/content/docs/svelte/05-special-elements/{03-svelte-body.md => 04-svelte-body.md} (100%) rename apps/svelte.dev/content/docs/svelte/05-special-elements/{04-svelte-head.md => 05-svelte-head.md} (100%) rename apps/svelte.dev/content/docs/svelte/05-special-elements/{05-svelte-element.md => 06-svelte-element.md} (100%) rename apps/svelte.dev/content/docs/svelte/05-special-elements/{06-svelte-options.md => 07-svelte-options.md} (100%) diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md new file mode 100644 index 0000000000..2e9f85c83a --- /dev/null +++ b/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md @@ -0,0 +1,79 @@ +--- +title: +--- + +```svelte +... +``` + +Boundaries allow you to guard against errors in part of your app from breaking the app as a whole, and to recover from those errors. + +If an error occurs while rendering or updating the children of a ``, or running any [`$effect`]($effect) functions contained therein, the contents will be removed. + +Errors occurring outside the rendering process (for example, in event handlers) are _not_ caught by error boundaries. + +## Properties + +For the boundary to do anything, one or both of `failed` and `onerror` must be provided. + +### `failed` + +If an `failed` snippet is provided, it will be rendered with the error that was thrown, and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)): + +```svelte + + + + {#snippet failed(error, reset)} + + {/snippet} + +``` + +> [!NOTE] +> As with [snippets passed to components](snippet#Passing-snippets-to-components), the `failed` snippet can be passed explicitly as a property... +> +> ```svelte +> ... +> ``` +> +> ...or implicitly by declaring it directly inside the boundary, as in the example above. + +### `onerror` + +If an `onerror` function is provided, it will be called with the same two `error` and `reset` arguments. This is useful for tracking the error with an error reporting service... + +```svelte + report(e)}> + ... + +``` + +...or using `error` and `reset` outside the boundary itself: + +```svelte + + + + + + +{#if error} + +{/if} +``` + +If an error occurs inside the `onerror` function (or if you rethrow the error), it will be handled by a parent boundary if such exists. diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-window.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-window.md similarity index 100% rename from apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-window.md rename to apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-window.md diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-document.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-document.md similarity index 100% rename from apps/svelte.dev/content/docs/svelte/05-special-elements/02-svelte-document.md rename to apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-document.md diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-body.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md similarity index 100% rename from apps/svelte.dev/content/docs/svelte/05-special-elements/03-svelte-body.md rename to apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-body.md diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-head.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-head.md similarity index 100% rename from apps/svelte.dev/content/docs/svelte/05-special-elements/04-svelte-head.md rename to apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-head.md diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-element.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-element.md similarity index 100% rename from apps/svelte.dev/content/docs/svelte/05-special-elements/05-svelte-element.md rename to apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-element.md diff --git a/apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-options.md b/apps/svelte.dev/content/docs/svelte/05-special-elements/07-svelte-options.md similarity index 100% rename from apps/svelte.dev/content/docs/svelte/05-special-elements/06-svelte-options.md rename to apps/svelte.dev/content/docs/svelte/05-special-elements/07-svelte-options.md diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md index 16cd361e52..77166097a2 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md @@ -762,6 +762,18 @@ A component can have a single top-level ` diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-b/src/lib/App.svelte new file mode 100644 index 0000000000..9f91b29859 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-b/src/lib/App.svelte @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/index.md similarity index 54% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/index.md index 04cfc2751a..ea945ff563 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/index.md @@ -2,28 +2,53 @@ title: Tweened values --- -Alongside the `writable` and `readable` stores, Svelte ships stores for adding motion to your user interfaces. +Often, a good way to communicate that a value is changing is to use _motion_. Svelte ships classes for adding motion to your user interfaces. -Let's start by changing the `progress` store to a `tweened` store: +Import the `Tween` class from `svelte/motion`: ```svelte /// file: App.svelte ``` +Turn `progress` into an instance of `Tween`: + +```svelte +/// file: App.svelte + +``` + +The `Tween` class has a writable `target` property and a readonly `current` property — update the `` element... + +```svelte + +``` + +...and each of the event handlers: + +```svelte + +``` + Clicking the buttons causes the progress bar to animate to its new value. It's a bit robotic and unsatisfying though. We need to add an easing function: ```svelte /// file: App.svelte { - coords.set({ x: e.clientX, y: e.clientY }); + coords = { x: e.clientX, y: e.clientY }; }} - onmousedown={() => size.set(30)} - onmouseup={() => size.set(10)} + onmousedown={() => (size = 30)} + onmouseup={() => (size = 10)} role="presentation" > + cx={coords.x} + cy={coords.y} + r={size} + >
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-b/src/lib/App.svelte similarity index 71% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-b/src/lib/App.svelte index 4f9169b321..380a9bdcd2 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-b/src/lib/App.svelte @@ -1,26 +1,26 @@ { - coords.set({ x: e.clientX, y: e.clientY }); + coords.target = { x: e.clientX, y: e.clientY }; }} - onmousedown={() => size.set(30)} - onmouseup={() => size.set(10)} + onmousedown={() => (size.target = 30)} + onmouseup={() => (size.target = 10)} role="presentation" > diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md new file mode 100644 index 0000000000..ae3d828e5a --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md @@ -0,0 +1,52 @@ +--- +title: Springs +--- + +The `Spring` class is an alternative to `Tween` that often works better for values that are frequently changing. + +In this example we have a circle that follows the mouse, and two values — the circle's coordinates, and its size. Let's convert them to springs: + +```svelte +/// file: App.svelte + +``` + +As with `Tween`, springs have a writable `target` property and a readonly `current` property. Update the event handlers... + +```svelte + { + coords.+++target+++ = { x: e.clientX, y: e.clientY }; + }} + onmousedown={() => (size.+++target+++ = 30)} + onmouseup={() => (size.+++target+++ = 10)} + role="presentation" +> +``` + +...and the `` attributes: + +```svelte + +``` + +Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values: + +```js +/// file: App.svelte +let coords = new Spring({ x: 50, y: 50 }, +++{ + stiffness: 0.1, + damping: 0.25 +}+++); +``` + +Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion. diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/index.md similarity index 85% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/index.md index 4650becb32..9876cf5c14 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/index.md @@ -1,5 +1,5 @@ --- -title: Stores +title: Motion scope: { 'prefix': '/src/lib/', 'name': 'src' } focus: /src/lib/App.svelte --- diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte deleted file mode 100644 index d32c05b8da..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte deleted file mode 100644 index 661576c6ac..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md deleted file mode 100644 index 7af895fb6b..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Springs ---- - -The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing. - -In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs: - -```svelte -/// file: App.svelte - -``` - -Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values: - -```js -/// file: App.svelte -let coords = spring({ x: 50, y: 50 }, +++{ - stiffness: 0.1, - damping: 0.25 -}+++); -``` - -Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion. diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts index f69d91c964..62c15ca1bd 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts @@ -9,7 +9,8 @@ const redirects = new Map([ ['reactive-statements', 'svelte/effects'], ['updating-arrays-and-objects', 'svelte/deep-state'], ['event-modifiers', 'svelte/capturing'], - ['dom-event-forwarding', 'svelte/spreading-events'] + ['dom-event-forwarding', 'svelte/spreading-events'], + ['svelte/introducing-stores', 'stores'] ]); export async function load({ params }) { From fb5eb6d11fce9e2c50a1df3c14b469c0beffbdad Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 6 Dec 2024 10:08:05 -0500 Subject: [PATCH 050/170] Sync `svelte` docs (#946) sync svelte docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../docs/svelte/06-runtime/01-stores.md | 2 +- .../docs/svelte/06-runtime/02-context.md | 2 +- .../svelte/98-reference/21-svelte-motion.md | 293 +++++++++++++++++- 3 files changed, 292 insertions(+), 5 deletions(-) diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md index 9cff5a754f..12d5576b40 100644 --- a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md +++ b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md @@ -49,7 +49,7 @@ export const userState = $state({ ```svelte

User name: {userState.name}

diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md index 62dd0c6a9e..30799215b6 100644 --- a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md +++ b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md @@ -22,7 +22,7 @@ export const myGlobalState = $state({ ```svelte ``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md index 39d91f95ff..c8593b251c 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md @@ -6,9 +6,259 @@ title: svelte/motion ```js // @noErrors -import { prefersReducedMotion, spring, tweened } from 'svelte/motion'; +import { + Spring, + Tween, + prefersReducedMotion, + spring, + tweened +} from 'svelte/motion'; ``` +## Spring + +A wrapper for a value that behaves in a spring-like fashion. Changes to `spring.target` will cause `spring.current` to +move towards it over time, taking account of the `spring.stiffness` and `spring.damping` parameters. + +```svelte + + + + +``` + +
+ +```dts +class Spring {/*…*/} +``` + +
+ +```dts +constructor(value: T, options?: SpringOpts); +``` + +
+
+ +
+ +```dts +static of(fn: () => U, options?: SpringOpts): Spring; +``` + +
+ +Create a spring whose value is bound to the return value of `fn`. This must be called +inside an effect root (for example, during component initialisation). + +```svelte + +``` + +
+
+ +
+ +```dts +set(value: T, options?: SpringUpdateOpts): Promise; +``` + +
+ +Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it. + +If `options.instant` is `true`, `spring.current` immediately matches `spring.target`. + +If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for +the specified number of milliseconds. This is useful for things like 'fling' gestures. + +
+
+ +
+ +```dts +damping: number; +``` + +
+
+ +
+ +```dts +precision: number; +``` + +
+
+ +
+ +```dts +stiffness: number; +``` + +
+
+ +
+ +```dts +target: T; +``` + +
+ +The end value of the spring. +This property only exists on the `Spring` class, not the legacy `spring` store. + +
+
+ +
+ +```dts +get current(): T; +``` + +
+ +The current value of the spring. +This property only exists on the `Spring` class, not the legacy `spring` store. + +
+
+ + + +## Tween + +
+ +Available since 5.8.0 + +
+ +A wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to +move towards it over time, taking account of the `delay`, `duration` and `easing` options. + +```svelte + + + + +``` + +
+ +```dts +class Tween {/*…*/} +``` + +
+ +```dts +static of(fn: () => U, options?: TweenedOptions | undefined): Tween; +``` + +
+ +Create a tween whose value is bound to the return value of `fn`. This must be called +inside an effect root (for example, during component initialisation). + +```svelte + +``` + +
+
+ +
+ +```dts +constructor(value: T, options?: TweenedOptions); +``` + +
+
+ +
+ +```dts +set(value: T, options?: TweenedOptions | undefined): Promise; +``` + +
+ +Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it. + +If `options` are provided, they will override the tween's defaults. + +
+
+ +
+ +```dts +get current(): T; +``` + +
+
+ +
+ +```dts +set target(v: T); +``` + +
+
+ +
+ +```dts +get target(): T; +``` + +
+
+ +
+ +```dts +#private; +``` + +
+
+ + + ## prefersReducedMotion
@@ -50,6 +300,12 @@ const prefersReducedMotion: MediaQuery; ## spring +
+ +Use [`Spring`](/docs/svelte/svelte-motion#Spring) instead + +
+ The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it "bounces" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.
@@ -67,6 +323,12 @@ function spring( ## tweened +
+ +Use [`Tween`](/docs/svelte/svelte-motion#Tween) instead + +
+ A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
@@ -93,7 +355,7 @@ interface Spring extends Readable {/*…*/}
```dts -set: (new_value: T, opts?: SpringUpdateOpts) => Promise; +set(new_value: T, opts?: SpringUpdateOpts): Promise; ```
@@ -105,7 +367,32 @@ set: (new_value: T, opts?: SpringUpdateOpts) => Promise; update: (fn: Updater, opts?: SpringUpdateOpts) => Promise; ``` -
+
+ +
+ +- deprecated Only exists on the legacy `spring` store, not the `Spring` class + +
+ +
+
+ +
+ +```dts +subscribe(fn: (value: T) => void): Unsubscriber; +``` + +
+ +
+ +- deprecated Only exists on the legacy `spring` store, not the `Spring` class + +
+ +
From 16aab595589f8ed839bdbf0e71b20786f1ad772f Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 6 Dec 2024 10:16:15 -0500 Subject: [PATCH 051/170] day 6 (#950) --- .../content/blog/2024-12-01-advent-of-svelte.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md index 82139809af..a1bbda0946 100644 --- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md +++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md @@ -49,9 +49,14 @@ It's a three-in-one kind of day. `new MediaQuery(...)` gives you an object with - [`prefersReducedMotion` docs](/docs/svelte/svelte-motion#prefersReducedMotion) - [demo](/playground/89f6f3bb738149fcb6e708cfce878e0f) -## Day 6 +## Day 6: `Spring` and `Tween` -Coming soon! +We now have modern state-based alternatives to the `spring` and `tweened` stores of old. Smooth! + +- [`Tween` tutorial](/tutorial/svelte/tweens) +- [`Spring` tutorial](/tutorial/svelte/springs) +- [docs](/docs/svelte/svelte-motion) +- [demo](/playground/8a021b2ec2064230bde4a10b08464876?version=5.8.0) ## Day 7 From 4bafbe68e16e7995a99a2c8c52024a80afbeec99 Mon Sep 17 00:00:00 2001 From: Thiago Lino Gomes Date: Sat, 7 Dec 2024 05:38:30 -0300 Subject: [PATCH 052/170] docs: Remove duplicate info about {#each} block (#953) --- .../content/docs/svelte/03-template-syntax/03-each.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md index df0ba4d8f5..70666f6a57 100644 --- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md +++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md @@ -23,8 +23,6 @@ Iterating over values can be done with an each block. The values in question can ``` -You can use each blocks to iterate over any array or array-like value — that is, any object with a `length` property. - An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback: ```svelte From b1cb6c7da377fa542f548328efce7f57c589e240 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 7 Dec 2024 10:38:21 -0500 Subject: [PATCH 053/170] better nav (#933) * WIP better nav * fixes * fix * arrow key controls * rename, fix * fix --- .../src/lib/components/ModalDropdown.svelte | 142 ++++++++++++++++++ .../src/lib/components/SelectIcon.svelte | 60 -------- .../playground/[id]/AppControls.svelte | 48 ++++-- .../routes/tutorial/[...slug]/Controls.svelte | 56 ++++--- packages/site-kit/src/lib/actions/focus.ts | 8 +- packages/site-kit/src/lib/styles/index.css | 1 + .../site-kit/src/lib/styles/utils/nav.css | 53 +++++++ 7 files changed, 265 insertions(+), 103 deletions(-) create mode 100644 apps/svelte.dev/src/lib/components/ModalDropdown.svelte delete mode 100644 apps/svelte.dev/src/lib/components/SelectIcon.svelte create mode 100644 packages/site-kit/src/lib/styles/utils/nav.css diff --git a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte new file mode 100644 index 0000000000..c5456c24ae --- /dev/null +++ b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte @@ -0,0 +1,142 @@ + + + { + if (e.key === 'Escape') { + open = false; + } + }} +/> + + +
{ + const details = e.target as HTMLDetailsElement; + + if (details === e.currentTarget || !details.open) { + return; + } + + details.scrollIntoView(); + }} + ontoggle={(e) => { + const details = e.currentTarget; + if (!details.open) return; + + // close all details elements... + for (const child of details.querySelectorAll('details[open]')) { + (child as HTMLDetailsElement).open = false; + } + + // except parents of the current one + const current = details.querySelector(`[href="${$page.url.pathname}"]`) as HTMLAnchorElement | null; + if (!current) return; + + let node = current as Element; + + while ((node = (node.parentNode) as Element) && node !== details) { + if (node.nodeName === 'DETAILS') { + (node as HTMLDetailsElement).open = true; + } + } + + current.scrollIntoView(); + current.focus(); + }} + onkeydown={(e) => { + if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { + const children = focusable_children(e.currentTarget); + + if (e.key === 'ArrowDown') { + children.next(); + } else { + children.prev(); + } + } + + if (document.activeElement?.nodeName === 'SUMMARY' && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) { + (document.activeElement.parentNode as HTMLDetailsElement).open = e.key === 'ArrowRight'; + } + }} +> + + +
+ {@render children()} +
+
+ + diff --git a/apps/svelte.dev/src/lib/components/SelectIcon.svelte b/apps/svelte.dev/src/lib/components/SelectIcon.svelte deleted file mode 100644 index 991221459b..0000000000 --- a/apps/svelte.dev/src/lib/components/SelectIcon.svelte +++ /dev/null @@ -1,60 +0,0 @@ - - -
- - -
- - diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 7a894ffc35..a1b6917141 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -1,12 +1,12 @@ - { - goto(`/tutorial/${e.currentTarget.value}`); - }} - > - {#each index as part} - - {#each part.chapters as chapter} - + +
+ {#each index as part} +
+ {part.title} + + {#each part.chapters as chapter} +
+ {chapter.title} - {#each chapter.exercises as exercise} - + +
{/each} - {/each} - - {/each} - +
+ {/each} +
+ elements, + // except for the elements that are their direct children node.querySelectorAll( - 'a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])' + ':where(a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):not(details:not([open]) *), summary:not(details:not([open]) details *)' ) ); @@ -31,10 +33,6 @@ export function focusable_children(node: HTMLElement) { while ((node = reordered[i])) { i += d; - if (node.matches('details:not([open]) *')) { - continue; - } - if (!selector || node.matches(selector)) { node.focus(); return; diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css index e336fe3089..af9bf0c95a 100644 --- a/packages/site-kit/src/lib/styles/index.css +++ b/packages/site-kit/src/lib/styles/index.css @@ -12,4 +12,5 @@ @import './text.css'; @import './utils/buttons.css'; @import './utils/dividers.css'; +@import './utils/nav.css'; @import './utils/twoslash.css'; diff --git a/packages/site-kit/src/lib/styles/utils/nav.css b/packages/site-kit/src/lib/styles/utils/nav.css new file mode 100644 index 0000000000..f5ef788bd4 --- /dev/null +++ b/packages/site-kit/src/lib/styles/utils/nav.css @@ -0,0 +1,53 @@ +.secondary-nav-dropdown { + max-height: 50rem; + width: 30rem; + max-width: calc(100vw - 2 * var(--sk-page-padding-side) - 2rem); + font: var(--sk-font-ui-medium); + + details { + padding-left: 1rem; + + summary { + position: relative; + font: inherit; + display: block; + user-select: none; + + &::before { + content: ''; + position: absolute; + top: 0.3rem; + left: -2rem; + width: 1.8rem; + height: 1.8rem; + background: url($lib/icons/chevron.svg) no-repeat 50% 50%; + background-size: 100%; + rotate: -90deg; + } + + [open] > &::before { + rotate: none; + } + } + + ul { + font: inherit; + list-style: none; + margin: 0; + padding-left: 1rem; + } + } + + & > details { + padding-left: 2rem; + } + + a:not([aria-current='page']) { + color: inherit; + } + + /* necessary for reasons i don't fully understand */ + & > details[open]:last-child:not(:has([aria-current='page'])) { + padding-bottom: 1rem; + } +} From 2f4404556ce6995aec192ca9ff81ec6b786f51de Mon Sep 17 00:00:00 2001 From: Vanceagher <48972091+Vanceagher@users.noreply.github.com> Date: Sat, 7 Dec 2024 10:40:40 -0500 Subject: [PATCH 054/170] Fix: grammar fix in index.md (#948) Update index.md Fix grammar. "There's a" => "There are a" --- .../01-svelte/02-reactivity/04-inspecting-state/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md index eb06a46466..7ca390ef1c 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md @@ -6,7 +6,7 @@ It's often useful to be able to track the value of a piece of state as it change Inside the `addNumber` function, we've added a `console.log` statement. But if you click the button and open the console drawer (using the button to the right of the URL bar), you'll see a warning, and a message saying the message could not be cloned. -That's because `numbers` is a reactive [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). There's a couple of things we can do. Firstly, we can create a non-reactive _snapshot_ of the state with `$state.snapshot(...)`: +That's because `numbers` is a reactive [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). There are a couple of things we can do. Firstly, we can create a non-reactive _snapshot_ of the state with `$state.snapshot(...)`: ```js /// file: App.svelte From 7b7abe97fd7696933adab104eda335600a75d9c9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 7 Dec 2024 10:41:17 -0500 Subject: [PATCH 055/170] Sync `svelte` docs (#951) sync svelte docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../content/docs/svelte/98-reference/21-svelte-motion.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md index c8593b251c..d37c7bf8bd 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md @@ -17,6 +17,12 @@ import { ## Spring +
+ +Available since 5.8.0 + +
+ A wrapper for a value that behaves in a spring-like fashion. Changes to `spring.target` will cause `spring.current` to move towards it over time, taking account of the `spring.stiffness` and `spring.damping` parameters. From 808116b653c10589f38b114533a19bc2cda9fbc8 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 7 Dec 2024 10:41:46 -0500 Subject: [PATCH 056/170] Sync `kit` docs (#952) sync kit docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../content/docs/kit/98-reference/10-@sveltejs-kit.md | 6 ++++++ .../content/docs/kit/98-reference/15-@sveltejs-kit-node.md | 6 ++++++ .../content/docs/kit/98-reference/20-$app-server.md | 6 ++++++ 3 files changed, 18 insertions(+) diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md index 2c13be6219..afbf2ca54e 100644 --- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md +++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md @@ -2075,6 +2075,12 @@ type RequestHandler< ## Reroute +
+ +Available since 2.3.0 + +
+ The [`reroute`](/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modify the URL before it is used to determine which route to render.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md index 37a0ea2a28..c96e57ee4c 100644 --- a/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md +++ b/apps/svelte.dev/content/docs/kit/98-reference/15-@sveltejs-kit-node.md @@ -15,6 +15,12 @@ import { ## createReadableStream +
+ +Available since 2.4.0 + +
+ Converts a file on disk to a readable stream
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md index 32ba649b36..f3d534ea8e 100644 --- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md +++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md @@ -11,6 +11,12 @@ import { read } from '$app/server'; ## read +
+ +Available since 2.4.0 + +
+ Read the contents of an imported asset from the filesystem ```js From 46bd8b9797c7b79f88ef8df33752f7528c4dcb79 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 7 Dec 2024 16:13:12 -0500 Subject: [PATCH 057/170] Advent of svelte day 7 (#956) * day 7 * lowercase --- apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md index a1bbda0946..8198f95b33 100644 --- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md +++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md @@ -58,9 +58,11 @@ We now have modern state-based alternatives to the `spring` and `tweened` stores - [docs](/docs/svelte/svelte-motion) - [demo](/playground/8a021b2ec2064230bde4a10b08464876?version=5.8.0) -## Day 7 +## Day 7: better tutorial navigation -Coming soon! +A lot of you disliked the dropdown navigation for the tutorial — essentially a giant, unwieldy ` ``` + Svelte creates an event listener that updates the bound value. If an element already has a listener for the same event, that listener will be fired before the bound value is updated. Most bindings are _two-way_, meaning that changes to the value will affect the element and vice versa. A few bindings are _readonly_, meaning that changing their value will have no effect on the element. +## Function bindings + +You can also use `bind:property={get, set}`, where `get` and `set` are functions, allowing you to perform validation and transformation: + +```svelte + value, + (v) => value = v.toLowerCase()} +/> +``` + +In the case of readonly bindings like [dimension bindings](#Dimensions), the `get` value should be `null`: + +```svelte +
...
+``` + +> [!NOTE] +> Function bindings are available in Svelte 5.9.0 and newer. + ## `` A `bind:value` directive on an `` element binds the input's `value` property: diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md index 3bd162d8d7..d726d25fa1 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md @@ -78,10 +78,16 @@ Sequence expressions are not allowed as attribute/directive values in runes mode Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression ``` +### bind_group_invalid_expression + +``` +`bind:group` can only bind to an Identifier or MemberExpression +``` + ### bind_invalid_expression ``` -Can only bind to an Identifier or MemberExpression +Can only bind to an Identifier or MemberExpression or a `{get, set}` pair ``` ### bind_invalid_name @@ -94,6 +100,12 @@ Can only bind to an Identifier or MemberExpression `bind:%name%` is not a valid binding. %explanation% ``` +### bind_invalid_parens + +``` +`bind:%name%={get, set}` must not have surrounding parentheses +``` + ### bind_invalid_target ``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md index 14190e6bbe..1b9c7714bc 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md @@ -320,7 +320,10 @@ namespace AST { /** The 'x' in `bind:x` */ name: string; /** The y in `bind:x={y}` */ - expression: Identifier | MemberExpression; + expression: + | Identifier + | MemberExpression + | SequenceExpression; } /** A `class:` directive */ diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md index 27d00875f6..dad143bf75 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md @@ -82,10 +82,16 @@ Sequence expressions are not allowed as attribute/directive values in runes mode Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression ``` +### bind_group_invalid_expression + +``` +`bind:group` can only bind to an Identifier or MemberExpression +``` + ### bind_invalid_expression ``` -Can only bind to an Identifier or MemberExpression +Can only bind to an Identifier or MemberExpression or a `{get, set}` pair ``` ### bind_invalid_name @@ -98,6 +104,12 @@ Can only bind to an Identifier or MemberExpression `bind:%name%` is not a valid binding. %explanation% ``` +### bind_invalid_parens + +``` +`bind:%name%={get, set}` must not have surrounding parentheses +``` + ### bind_invalid_target ``` From d964e0b1e5fbd024b35620f7e170dead88f896a7 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 8 Dec 2024 11:20:20 -0500 Subject: [PATCH 061/170] docs: Advent day 8 (#960) --- .../svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md index 8198f95b33..176f506d50 100644 --- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md +++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md @@ -64,9 +64,12 @@ A lot of you disliked the dropdown navigation for the tutorial — essentially a - [tutorial](/tutorial/svelte/welcome-to-svelte) -## Day 8 +## Day 8: functional bindings -Coming soon! +You can now do `bind:value={get, set}` to validate and transform bound values. This works for all bindings, even on components. + +- [docs](/docs/svelte/bind#Function-bindings) +- [demo](/playground/1ddd82f573b94201b3c8fcab33bf0a46?version=5.9.0) ## Day 9 From c917b47d9a79c899ee3016c8b4c0ca093d5e16bf Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 8 Dec 2024 17:10:53 -0500 Subject: [PATCH 062/170] oops i meant to say this --- apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md index 176f506d50..912cbdf9e9 100644 --- a/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md +++ b/apps/svelte.dev/content/blog/2024-12-01-advent-of-svelte.md @@ -64,7 +64,7 @@ A lot of you disliked the dropdown navigation for the tutorial — essentially a - [tutorial](/tutorial/svelte/welcome-to-svelte) -## Day 8: functional bindings +## Day 8: function bindings You can now do `bind:value={get, set}` to validate and transform bound values. This works for all bindings, even on components. From b53b691a75d242aabc1bdfc21c0732aefc189161 Mon Sep 17 00:00:00 2001 From: ajatamayo Date: Mon, 9 Dec 2024 21:03:03 +0800 Subject: [PATCH 063/170] chore: Update comments on utils.js for clarity and accuracy (#963) Update comments on utils.js for clarity and accuracy --- .../04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js index 0bc02b4934..f2216d52d2 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js +++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/+assets/app-a/src/lib/utils.js @@ -1,5 +1,5 @@ export async function roll() { - // Fetch a random number between 0 and 6 + // Fetch a random number from 1 to 6 // (with a delay, so that we can see it) return new Promise((fulfil, reject) => { setTimeout(() => { From d697639cfb2134f3f2ade334735c7917b33dc577 Mon Sep 17 00:00:00 2001 From: Bernie Sumption Date: Mon, 9 Dec 2024 13:03:52 +0000 Subject: [PATCH 064/170] fix: make Safari rendering of summary elements the same as other browsers (#964) Hide details summary arrow on Safari --- apps/svelte.dev/src/lib/components/ModalDropdown.svelte | 4 ++++ packages/site-kit/src/lib/components/Text.svelte | 4 ++++ packages/site-kit/src/lib/search/SearchResultList.svelte | 4 ++++ packages/site-kit/src/lib/styles/utils/nav.css | 4 ++++ 4 files changed, 16 insertions(+) diff --git a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte index c5456c24ae..7a8f1b4cea 100644 --- a/apps/svelte.dev/src/lib/components/ModalDropdown.svelte +++ b/apps/svelte.dev/src/lib/components/ModalDropdown.svelte @@ -102,6 +102,10 @@ align-items: center; justify-content: center; user-select: none; + + &::-webkit-details-marker { + display: none; + } } details[open] summary::before { diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 22ba0189d8..9e58b9dd62 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -523,6 +523,10 @@ font: var(--sk-font-body-small); user-select: none; + &::-webkit-details-marker { + display: none; + } + .legacy &::after { position: absolute; display: flex; diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte index 9ce7ac1e3f..6f66c40240 100644 --- a/packages/site-kit/src/lib/search/SearchResultList.svelte +++ b/packages/site-kit/src/lib/search/SearchResultList.svelte @@ -111,6 +111,10 @@ span:not(:last-child)::after { content: ' • '; } + + &::-webkit-details-marker { + display: none; + } } } diff --git a/packages/site-kit/src/lib/styles/utils/nav.css b/packages/site-kit/src/lib/styles/utils/nav.css index f5ef788bd4..08da0a172b 100644 --- a/packages/site-kit/src/lib/styles/utils/nav.css +++ b/packages/site-kit/src/lib/styles/utils/nav.css @@ -13,6 +13,10 @@ display: block; user-select: none; + &::-webkit-details-marker { + display: none; + } + &::before { content: ''; position: absolute; From 337799e60429c391cbeff3b00e0820c80c86a584 Mon Sep 17 00:00:00 2001 From: GwangJin Kim Date: Mon, 9 Dec 2024 22:06:43 +0900 Subject: [PATCH 065/170] fix: Update package version of codemirror/view to fix carret low contrast (#947) Update package version of codemirror/view (#925) * Update codemirror/view package version to fix low caret contrast on mobile safari --- packages/editor/package.json | 2 +- packages/repl/package.json | 2 +- packages/site-kit/package.json | 2 +- pnpm-lock.yaml | 86 +++++++++++++++++----------------- 4 files changed, 46 insertions(+), 46 deletions(-) diff --git a/packages/editor/package.json b/packages/editor/package.json index 57aa323ae3..00c9cc95b8 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -42,7 +42,7 @@ "@codemirror/lint": "^6.8.2", "@codemirror/search": "^6.5.6", "@codemirror/state": "^6.4.1", - "@codemirror/view": "^6.34.1", + "@codemirror/view": "^6.35.1", "@replit/codemirror-lang-svelte": "^6.0.0", "@replit/codemirror-vim": "^6.0.14", "@sveltejs/adapter-auto": "^3.0.0", diff --git a/packages/repl/package.json b/packages/repl/package.json index e32aeeac1b..2959bd2f3d 100644 --- a/packages/repl/package.json +++ b/packages/repl/package.json @@ -71,7 +71,7 @@ "@codemirror/language": "^6.10.1", "@codemirror/lint": "^6.7.0", "@codemirror/state": "^6.4.1", - "@codemirror/view": "^6.26.3", + "@codemirror/view": "^6.35.1", "@jridgewell/sourcemap-codec": "^1.4.15", "@replit/codemirror-lang-svelte": "^6.0.0", "@replit/codemirror-vim": "^6.0.14", diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index 84abf82b95..26b0817369 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -31,7 +31,7 @@ "@codemirror/lint": "^6.4.1", "@codemirror/search": "^6.5.2", "@codemirror/state": "^6.2.1", - "@codemirror/view": "^6.17.1", + "@codemirror/view": "^6.35.1", "@fontsource/atkinson-hyperlegible": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/eb-garamond": "^5.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 65b17938ae..63b89c9313 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -213,13 +213,13 @@ importers: devDependencies: '@codemirror/autocomplete': specifier: ^6.9.0 - version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2) + version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2) '@codemirror/commands': specifier: ^6.2.5 version: 6.5.0 '@codemirror/lang-css': specifier: ^6.2.1 - version: 6.2.1(@codemirror/view@6.34.1) + version: 6.2.1(@codemirror/view@6.35.1) '@codemirror/lang-html': specifier: ^6.4.6 version: 6.4.9 @@ -239,14 +239,14 @@ importers: specifier: ^6.4.1 version: 6.4.1 '@codemirror/view': - specifier: ^6.34.1 - version: 6.34.1 + specifier: ^6.35.1 + version: 6.35.1 '@replit/codemirror-lang-svelte': specifier: ^6.0.0 - version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1) + version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1) '@replit/codemirror-vim': specifier: ^6.0.14 - version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1) + version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1) '@sveltejs/adapter-auto': specifier: ^3.0.0 version: 3.2.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.1.11)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))) @@ -294,13 +294,13 @@ importers: dependencies: '@codemirror/autocomplete': specifier: ^6.16.0 - version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2) + version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2) '@codemirror/commands': specifier: ^6.5.0 version: 6.5.0 '@codemirror/lang-css': specifier: ^6.2.1 - version: 6.2.1(@codemirror/view@6.34.1) + version: 6.2.1(@codemirror/view@6.35.1) '@codemirror/lang-javascript': specifier: ^6.2.2 version: 6.2.2 @@ -320,17 +320,17 @@ importers: specifier: ^6.4.1 version: 6.4.1 '@codemirror/view': - specifier: ^6.26.3 - version: 6.34.1 + specifier: ^6.35.1 + version: 6.35.1 '@jridgewell/sourcemap-codec': specifier: ^1.4.15 version: 1.5.0 '@replit/codemirror-lang-svelte': specifier: ^6.0.0 - version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1) + version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1) '@replit/codemirror-vim': specifier: ^6.0.14 - version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1) + version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1) '@rich_harris/svelte-split-pane': specifier: ^1.1.3 version: 1.1.3(svelte@5.1.11) @@ -412,13 +412,13 @@ importers: dependencies: '@codemirror/autocomplete': specifier: ^6.9.0 - version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2) + version: 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2) '@codemirror/commands': specifier: ^6.2.5 version: 6.5.0 '@codemirror/lang-css': specifier: ^6.2.1 - version: 6.2.1(@codemirror/view@6.34.1) + version: 6.2.1(@codemirror/view@6.35.1) '@codemirror/lang-html': specifier: ^6.4.6 version: 6.4.9 @@ -438,8 +438,8 @@ importers: specifier: ^6.2.1 version: 6.4.1 '@codemirror/view': - specifier: ^6.17.1 - version: 6.34.1 + specifier: ^6.35.1 + version: 6.35.1 '@fontsource/atkinson-hyperlegible': specifier: ^5.1.0 version: 5.1.0 @@ -460,7 +460,7 @@ importers: version: 1.2.2 '@replit/codemirror-lang-svelte': specifier: ^6.0.0 - version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1) + version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1) '@shikijs/twoslash': specifier: ^1.22.0 version: 1.22.0(typescript@5.5.4) @@ -629,8 +629,8 @@ packages: '@codemirror/state@6.4.1': resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==} - '@codemirror/view@6.34.1': - resolution: {integrity: sha512-t1zK/l9UiRqwUNPm+pdIT0qzJlzuVckbTEMVNFhfWkGiBQClstzg+78vedCvLSX0xJEZ6lwZbPpnljL7L6iwMQ==} + '@codemirror/view@6.35.1': + resolution: {integrity: sha512-OUs9Z2UabSfJxSoEnuHUzGF0wHpWiJ/3IW/cgrKBqbp5Yj7XTYXQAQaLHZUP48ctRMvxgarEXTginrocUG8J7A==} '@emnapi/runtime@1.2.0': resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==} @@ -3455,23 +3455,23 @@ snapshots: '@cloudflare/workers-types@4.20241127.0': {} - '@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)': + '@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)': dependencies: '@codemirror/language': 6.10.3 '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 '@lezer/common': 1.2.2 '@codemirror/commands@6.5.0': dependencies: '@codemirror/language': 6.10.3 '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 '@lezer/common': 1.2.2 - '@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1)': + '@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1)': dependencies: - '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2) + '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2) '@codemirror/language': 6.10.3 '@codemirror/state': 6.4.1 '@lezer/common': 1.2.2 @@ -3481,23 +3481,23 @@ snapshots: '@codemirror/lang-html@6.4.9': dependencies: - '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2) - '@codemirror/lang-css': 6.2.1(@codemirror/view@6.34.1) + '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2) + '@codemirror/lang-css': 6.2.1(@codemirror/view@6.35.1) '@codemirror/lang-javascript': 6.2.2 '@codemirror/language': 6.10.3 '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 '@lezer/common': 1.2.2 '@lezer/css': 1.1.8 '@lezer/html': 1.3.9 '@codemirror/lang-javascript@6.2.2': dependencies: - '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2) + '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2) '@codemirror/language': 6.10.3 '@codemirror/lint': 6.8.2 '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 '@lezer/common': 1.2.2 '@lezer/javascript': 1.4.17 @@ -3508,18 +3508,18 @@ snapshots: '@codemirror/lang-markdown@6.2.5': dependencies: - '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2) + '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2) '@codemirror/lang-html': 6.4.9 '@codemirror/language': 6.10.3 '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 '@lezer/common': 1.2.2 '@lezer/markdown': 1.3.0 '@codemirror/language@6.10.3': dependencies: '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 '@lezer/common': 1.2.2 '@lezer/highlight': 1.2.1 '@lezer/lr': 1.4.1 @@ -3528,18 +3528,18 @@ snapshots: '@codemirror/lint@6.8.2': dependencies: '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 crelt: 1.0.6 '@codemirror/search@6.5.6': dependencies: '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 crelt: 1.0.6 '@codemirror/state@6.4.1': {} - '@codemirror/view@6.34.1': + '@codemirror/view@6.35.1': dependencies: '@codemirror/state': 6.4.1 style-mod: 4.1.2 @@ -4064,27 +4064,27 @@ snapshots: '@polka/url@1.0.0-next.28': {} - '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)': + '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.1))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)': dependencies: - '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2) - '@codemirror/lang-css': 6.2.1(@codemirror/view@6.34.1) + '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2) + '@codemirror/lang-css': 6.2.1(@codemirror/view@6.35.1) '@codemirror/lang-html': 6.4.9 '@codemirror/lang-javascript': 6.2.2 '@codemirror/language': 6.10.3 '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 '@lezer/common': 1.2.2 '@lezer/highlight': 1.2.1 '@lezer/javascript': 1.4.17 '@lezer/lr': 1.4.1 - '@replit/codemirror-vim@6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)': + '@replit/codemirror-vim@6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)': dependencies: '@codemirror/commands': 6.5.0 '@codemirror/language': 6.10.3 '@codemirror/search': 6.5.6 '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 '@resvg/resvg-js-android-arm-eabi@2.6.2': optional: true @@ -4732,13 +4732,13 @@ snapshots: codemirror@6.0.1(@lezer/common@1.2.2): dependencies: - '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2) + '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.1)(@lezer/common@1.2.2) '@codemirror/commands': 6.5.0 '@codemirror/language': 6.10.3 '@codemirror/lint': 6.8.2 '@codemirror/search': 6.5.6 '@codemirror/state': 6.4.1 - '@codemirror/view': 6.34.1 + '@codemirror/view': 6.35.1 transitivePeerDependencies: - '@lezer/common' From 2f514738823b7359bff36ebadd0e440a227135d2 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Mon, 9 Dec 2024 16:03:58 +0100 Subject: [PATCH 066/170] feat: add stable route for all warning/error codes (#965) * feat: add stable route for all warning/error codes This establishes a new route `e/[code]` which serves as a stable reference for all of our warning/error codes. All links to warnings/errors from the Svelte compiler/runtime should go through this route in order to have stable references. That way we can move codes between warnings/errors/different pages or even adjust codes without breaking links. Part of https://github.com/sveltejs/svelte/issues/11305 * prerender entries * work around Vercel's route limitation * another workaround --- apps/svelte.dev/src/lib/server/content.ts | 8 ++-- .../src/routes/e/[code]/+page.server.ts | 40 +++++++++++++++++++ .../src/routes/e/tmp/codes.json/+server.ts | 39 ++++++++++++++++++ 3 files changed, 83 insertions(+), 4 deletions(-) create mode 100644 apps/svelte.dev/src/routes/e/[code]/+page.server.ts create mode 100644 apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts diff --git a/apps/svelte.dev/src/lib/server/content.ts b/apps/svelte.dev/src/lib/server/content.ts index faa960ec07..45f0d4b0b2 100644 --- a/apps/svelte.dev/src/lib/server/content.ts +++ b/apps/svelte.dev/src/lib/server/content.ts @@ -60,16 +60,16 @@ export const blog_posts = index.blog.children return a.date < b.date ? 1 : -1; }); +export function remove_section(slug: string) { + return slug.replace(/\/[^/]+(\/[^/]+)$/g, '$1'); +} + /** * Create docs index, which is basically the same structure as the original index * but with adjusted slugs (the section part is omitted for cleaner URLs), separated * topics/pages and next/prev adjusted so that they don't point to different topics. */ function create_docs() { - function remove_section(slug: string) { - return slug.replace(/\/[^/]+(\/[^/]+)$/g, '$1'); - } - let docs: { /** The top level entries/packages: svelte/kit/etc. Key is the topic */ topics: Record; diff --git a/apps/svelte.dev/src/routes/e/[code]/+page.server.ts b/apps/svelte.dev/src/routes/e/[code]/+page.server.ts new file mode 100644 index 0000000000..a564c600f0 --- /dev/null +++ b/apps/svelte.dev/src/routes/e/[code]/+page.server.ts @@ -0,0 +1,40 @@ +import { remove_section } from '$lib/server/content'; +import { error, redirect } from '@sveltejs/kit'; + +// All links to warnings/errors from the Svelte compiler/runtime go through this page in order to have stable references +// (i.e. we can move codes between warnings/errors/different pages or even adjust codes without breaking links). + +// Right now we can't prerender this because we would hit a "too many routes" error on Vercel, +// for which we need to implement https://github.com/sveltejs/kit/issues/9032 +// const reference = index['docs/svelte/reference'].children.filter( +// (child) => child.slug.endsWith('-errors') || child.slug.endsWith('-warnings') +// ); +// +// export const prerender = true; +// +// export function entries() { +// return reference.flatMap((page) => +// [...page.body.matchAll(/(^|\n)### (\w+)/g)].map(([, , code]) => ({ code })) +// ); +// } + +export async function load({ params, fetch }) { + const codes: Record> = await fetch('/e/tmp/codes.json').then( + (r) => r.json() + ); + + for (const url of Object.keys(codes)) { + const page = codes[url]; + for (const [h2, h3] of Object.entries(page)) { + if (h3.includes(params.code)) { + if (h2) { + redirect(307, `/${remove_section(url)}#${h2}-${params.code}`); + } else { + redirect(307, `/${remove_section(url)}#${params.code}`); + } + } + } + } + + error(404, 'Not found'); +} diff --git a/apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts b/apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts new file mode 100644 index 0000000000..05685f33e0 --- /dev/null +++ b/apps/svelte.dev/src/routes/e/tmp/codes.json/+server.ts @@ -0,0 +1,39 @@ +import { index } from '$lib/server/content'; +import { json } from '@sveltejs/kit'; + +// Temporary workaround for the problem described in [code]/+page.server.ts +// In a nested folder because of https://github.com/sveltejs/kit/issues/12778 + +const reference = index['docs/svelte/reference'].children.filter( + (child) => child.slug.endsWith('-errors') || child.slug.endsWith('-warnings') +); + +// Since codes are not top level section we gotta jump through some hoops to get the right hash + +const codes: Record> = {}; + +for (const page of reference) { + const grouped: Record = {}; + const sections = page.body.split(/(^|\n)## /g).slice(1); + + for (const section of sections) { + const lines = section.slice(section.startsWith('\n') ? 1 : 0).split('\n'); + const h2 = lines.shift()?.trim(); + + const h3_titles = lines + .filter((line) => line.startsWith('### ')) + .map((line) => line.slice(4).trim()); + + if (h3_titles.length > 0) { + grouped[page.sections.find((s) => s.title === h2)?.slug ?? ''] = h3_titles; + } + } + + codes[page.slug] = grouped; +} + +export const prerender = true; + +export function GET() { + return json(codes); +} From a82171f533d76b202c65b47f1d734c7f414a015c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 9 Dec 2024 13:41:33 -0500 Subject: [PATCH 067/170] Sync `svelte` docs (#968) sync svelte docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../.generated/client-warnings.md | 84 +++++++++++++ .../.generated/compile-warnings.md | 117 ++++++++++++++++++ .../98-reference/.generated/server-errors.md | 2 + .../98-reference/.generated/shared-errors.md | 42 +++++++ .../.generated/shared-warnings.md | 9 ++ .../98-reference/30-compiler-warnings.md | 117 ++++++++++++++++++ .../svelte/98-reference/30-runtime-errors.md | 44 +++++++ .../98-reference/30-runtime-warnings.md | 93 ++++++++++++++ 8 files changed, 508 insertions(+) diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md index ef19a28994..b0490b84ff 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md @@ -66,6 +66,31 @@ The easiest way to log a value as it changes over time is to use the [`$inspect` The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value ``` +Certain attributes like `src` on an `` element will not be repaired during hydration, i.e. the server value will be kept. That's because updating these attributes can cause the image to be refetched (or in the case of an `