From 5439714509f130d957fe23ea50d56bbbb3b4cf1f Mon Sep 17 00:00:00 2001 From: Puru Vijay Date: Thu, 22 Jun 2023 19:08:11 +0530 Subject: [PATCH 01/34] REPL default to v4 --- .../svelte.dev/src/routes/(authed)/repl/[id]/+page.server.js | 2 +- sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte | 2 +- .../src/routes/(authed)/repl/create.json/+server.js | 5 ++--- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.server.js b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.server.js index 12107d0dae43..5731e7930924 100644 --- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.server.js +++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.server.js @@ -11,6 +11,6 @@ export async function load({ fetch, params, url }) { return { gist, - version: url.searchParams.get('version') || '4.0.0-next.2' + version: url.searchParams.get('version') || '4' }; } diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte index 70cb2839acdb..47fdc9bab717 100644 --- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte +++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte @@ -32,7 +32,7 @@ onMount(() => { if (data.version !== 'local') { - fetch(`https://unpkg.com/svelte@${data.version || '4.0.0-next.2'}/package.json`) + fetch(`https://unpkg.com/svelte@${data.version || '4'}/package.json`) .then((r) => r.json()) .then((pkg) => { version = pkg.version; diff --git a/sites/svelte.dev/src/routes/(authed)/repl/create.json/+server.js b/sites/svelte.dev/src/routes/(authed)/repl/create.json/+server.js index 3e7245499515..bce3db03d8e8 100644 --- a/sites/svelte.dev/src/routes/(authed)/repl/create.json/+server.js +++ b/sites/svelte.dev/src/routes/(authed)/repl/create.json/+server.js @@ -1,7 +1,6 @@ -import { json } from '@sveltejs/kit'; -import * as session from '$lib/db/session'; import * as gist from '$lib/db/gist'; -import { error } from '@sveltejs/kit'; +import * as session from '$lib/db/session'; +import { error, json } from '@sveltejs/kit'; export async function POST({ request }) { const user = await session.from_cookie(request.headers.get('cookie')); From 936ce2bce37e507b34ed4127cb401d892b530659 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 22 Jun 2023 07:05:43 -0700 Subject: [PATCH 02/34] svelte 4 blog post --- .../2022-12-14-announcing-sveltekit-1.0.md | 1 + documentation/blog/2023-06-22-svelte-4.md | 59 +++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 documentation/blog/2023-06-22-svelte-4.md diff --git a/documentation/blog/2022-12-14-announcing-sveltekit-1.0.md b/documentation/blog/2022-12-14-announcing-sveltekit-1.0.md index 9ee3d38a3859..0b8f081ef732 100644 --- a/documentation/blog/2022-12-14-announcing-sveltekit-1.0.md +++ b/documentation/blog/2022-12-14-announcing-sveltekit-1.0.md @@ -2,6 +2,7 @@ title: Announcing SvelteKit 1.0 description: Web development, streamlined author: The Svelte team +authorURL: https://svelte.dev/ --- After two years in development, [SvelteKit](https://kit.svelte.dev) has finally reached 1.0. As of today, it’s the recommended way to build Svelte apps of all shapes and sizes. diff --git a/documentation/blog/2023-06-22-svelte-4.md b/documentation/blog/2023-06-22-svelte-4.md new file mode 100644 index 000000000000..d66e2bad6db9 --- /dev/null +++ b/documentation/blog/2023-06-22-svelte-4.md @@ -0,0 +1,59 @@ +--- +title: "Announcing Svelte 4" +description: 'Updated performance, developer experience, and site' +author: The Svelte team +authorURL: https://svelte.dev/ +--- + +After months in the making, we're excited to announce the stable release of Svelte 4. + +Time flies - Svelte 3 was released more than four years ago! In JavaScript-framework-time, that's eons. Svelte’s freshness has persisted throughout, but Node.js and browser APIs have evolved during that time and today we’re updating Svelte to take advantage of some of these improvements. Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas. It sets the stage for the next generation of Svelte to be released as Svelte 5 - we think you’ll love it. + +If you haven't tried Svelte yet, take it for a spin in our [interactive tutorial](https://learn.svelte.dev/), on [StackBlitz](https://sveltekit.new/), or locally with `npm create svelte@latest`. Svelte lets you easily put together web UIs leveraging the power of HTML, CSS, JS, and the Svelte compiler. Watch [Svelte Radio Live](https://www.youtube.com/watch?v=72TIVhRtyWE) to learn more about this release. + +## What's new + +### Performance + +This release results in smaller and faster hydration code. To see the impact, SvelteKit users can see their compiled output shrink in size by examining the `.svelte-kit/output/client/_app/immutable/nodes` folder. For example, on [kit.svelte.dev](https://kit.svelte.dev) the page JS was reduced in size by 12.7% (126.3 kB to 110.3 kB). + +Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on `npm install`. This improvement will be especially noticeable for users who are loading our interactive learning experience on [learn.svelte.dev](https://learn.svelte.dev) for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once [the eslint rewrite](https://github.com/eslint/eslint/discussions/16557) is completed the Svelte package size can drop by over another 50%. + +The number of dependencies in Svelte has been greatly reduced from 61 down to 16. This means faster downloads for our users as well as less susceptibility to supply chain attacks. We also slightly reduced the number of dependencies in the latest versions of SvelteKit as well. + +### Developer experience + +Svelte 4 makes the Svelte authoring experience more intuitive and consistent: `|local` is now the default for transitions to avoid animations blocking page transitions, preprocessors are now easier to write, and multiple fixes make CSP easier to set up and use. + +For users of web components, the largest change is an overhaul of the way you use Svelte to author custom elements. By changing the way they are generated, a whole class of bugs and inconsistencies was eliminated. + +Finally, we’ve also made several [improvements to the IDE authoring experience](https://github.com/sveltejs/svelte/pull/8702): +cmd+click in svelte modules now takes you to the implementation rather than a `.d.ts` file +imports from `svelte/internal` are now hidden and will not clutter autocomplete suggestions +auto-imports now work more reliably + +### Updated site, docs, and tutorial + +The official [svelte.dev](https://svelte.dev) site has gotten an overhaul. It’s now split into multiple pages with improved mobile nav, overhauled typescript docs, dark mode, and an enhanced REPL. The SvelteKit site is also being updated to match. And we’ve updated all the tutorial links to point to our new [learn.svelte.dev](https://learn.svelte.dev) experience. The old tutorial remains available for users of Safari 16.3 and earlier. + +Stay tuned for a more in-depth blog post about all the site changes in the coming days! + +## Migrating + +Most apps and libraries that are compatible with Svelte 3 should be compatible with Svelte 4. Library authors will need to update the version range to include Svelte 4 if `svelte` is specified in the `peerDependencies`. For application authors, the most common change required will be updating tooling to meet the new minimum version requirements such as Node.js 16. Many other migration steps can be handled with `npx svelte-migrate svelte-4`. + +Read the [migration guide](/docs/v4-migration-guide) for full details. + +## Svelte 5: the next generation of Svelte + +Svelte 5 will be a rewrite of the Svelte compiler and runtime. Svelte 4 was mainly about setting the ground for these future improvements by adopting modern tooling and dropping support for some legacy versions of various technologies such as older bundlers. These changes will help us in a number of ways such as being able to more easily compare the Svelte 5 and Svelte 4 codebases and being able to run the existing tests against the new implementation. Svelte 5 will bring major new features and performance improvements to Svelte. The changes are still baking and not quite ready to share yet, but stay tuned! + +## Changelog + +See the full list of changes in the [changelog](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md). + +## Acknowledgements + +First and foremost, thank you to all of the many Svelte maintainers and contributors who made this release possible. Developers contributing multiple PRs to this release were [@dummdidumm](https://github.com/dummdidumm), [@gtm-nayan](https://github.com/gtm-nayan), [@benmccann](https://github.com/benmccann), [@tanhauhau](https://github.com/tanhauhau), [@Karlinator](https://github.com/Karlinator), and [@ngtr6788](https://github.com/ngtr6788). Also, thank you to the many community members who donated to [the Svelte OpenCollective](https://opencollective.com/svelte) - these donations sponsored the site overhaul completed by [PuruVJ](https://github.com/puruvj) as well as a number of recent fixes from [@gtm-nayan](https://github.com/gtm-nayan). + +Finally, thank you to the various library maintainers from across the ecosystem who helped prepare for this release. Thank you to [@jessebeach](https://github.com/jessebeach) for the help in getting out new versions of `aria-query` and `axobject-query`, [@jreinhold](https://github.com/jreinhold) for ensuring compatibility with Storybook, and [@yanick](https://github.com/yanick) for updating `svelte-testing-library`. And to ensure things stay working, the [`svelte-ecosystem-ci`](https://github.com/sveltejs/svelte-ecosystem-ci) setup by [@dominikg](https://github.com/dominikg) — which was modeled off his similar work for Vite — has been helping to test against major projects in the ecosystem on an ongoing basis. From 20c9bd14639b81639b390fcf63b5fbb0cf233f43 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 22 Jun 2023 07:43:42 -0700 Subject: [PATCH 03/34] update stats for final release --- documentation/blog/2023-06-22-svelte-4.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/blog/2023-06-22-svelte-4.md b/documentation/blog/2023-06-22-svelte-4.md index d66e2bad6db9..f4cfec664327 100644 --- a/documentation/blog/2023-06-22-svelte-4.md +++ b/documentation/blog/2023-06-22-svelte-4.md @@ -15,7 +15,7 @@ If you haven't tried Svelte yet, take it for a spin in our [interactive tutorial ### Performance -This release results in smaller and faster hydration code. To see the impact, SvelteKit users can see their compiled output shrink in size by examining the `.svelte-kit/output/client/_app/immutable/nodes` folder. For example, on [kit.svelte.dev](https://kit.svelte.dev) the page JS was reduced in size by 12.7% (126.3 kB to 110.3 kB). +This release results in smaller and faster hydration code. To see the impact, SvelteKit users can see their compiled output shrink in size by examining the `.svelte-kit/output/client/_app/immutable/nodes` folder. For example, on [kit.svelte.dev](https://kit.svelte.dev) the JS generated across the whole site was reduced in size by 12.7% (126.3 kB to 110.2 kB). Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on `npm install`. This improvement will be especially noticeable for users who are loading our interactive learning experience on [learn.svelte.dev](https://learn.svelte.dev) for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once [the eslint rewrite](https://github.com/eslint/eslint/discussions/16557) is completed the Svelte package size can drop by over another 50%. From 797b711e3a2730be93c26cc46c6cfd3151038519 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Thu, 22 Jun 2023 19:16:42 +0200 Subject: [PATCH 04/34] docs: tweaks (#8798) - link to createEventDispatcher typings - svelte action type error fix - migration guide tweak - add back blog post that has gone missing --- ...023-02-21-streaming-snapshots-sveltekit.md | 207 ++++++++++++++++++ documentation/docs/03-runtime/01-svelte.md | 2 + .../docs/03-runtime/07-svelte-action.md | 3 +- .../docs/05-misc/04-v4-migration-guide.md | 2 +- 4 files changed, 212 insertions(+), 2 deletions(-) create mode 100644 documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md diff --git a/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md b/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md new file mode 100644 index 000000000000..a030e8fc410d --- /dev/null +++ b/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md @@ -0,0 +1,207 @@ +--- +title: Streaming, snapshots, and other new features since SvelteKit 1.0 +description: Exciting improvements in the latest version of SvelteKit +author: Geoff Rich +authorURL: https://geoffrich.net +--- + +The Svelte team has been hard at work since the release of SvelteKit 1.0. Let’s talk about some of the major new features that have shipped since launch: [streaming non-essential data](https://kit.svelte.dev/docs/load#streaming-with-promises), [snapshots](https://kit.svelte.dev/docs/snapshots), and [route-level config](https://kit.svelte.dev/docs/page-options#config). + +## Stream non-essential data in load functions + +SvelteKit uses [load functions](https://kit.svelte.dev/docs/load) to retrieve data for a given route. When navigating between pages, it first fetches the data, and then renders the page with the result. This could be a problem if some of the data for the page takes longer to load than others, especially if the data isn’t essential – the user won’t see any part of the new page until all the data is ready. + +There were ways to work around this. In particular, you could fetch the slow data in the component itself, so it first renders with the data from `load` and then starts fetching the slow data. But this was not ideal: the data is even more delayed since you don’t start fetching until the client renders, and you’re also having to break SvelteKit’s `load` convention. + +Now, in SvelteKit 1.8, we have a new solution: you can return a nested promise from a server load function, and SvelteKit will start rendering the page before it resolves. Once it completes, the result will be [streamed](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) to the page. + +For example, consider the following `load` function: + +```ts +// @errors: 2304 +export const load: PageServerLoad = () => { + return { + post: fetchPost(), + streamed: { + comments: fetchComments() + } + }; +}; +``` + +SvelteKit will automatically await the `fetchPost` call before it starts rendering the page, since it’s at the top level. However, it won’t wait for the nested `fetchComments` call to complete – the page will render and `data.streamed.comments` will be a promise that will resolve as the request completes. We can show a loading state in the corresponding `+page.svelte` using Svelte’s [await block](https://svelte.dev/docs#template-syntax-await): + +```svelte + + +
+ {data.post} +
+ +{#await data.streamed.comments} + Loading... +{:then value} +
    + {#each value as comment} +
  1. {comment}
    2. + {/each} +
+{/await} +``` + +There is nothing unique about the property `streamed` here – all that is needed to trigger the behavior is a promise outside the top level of the returned object. + +SvelteKit will only be able to stream responses if your app’s hosting platform supports it. In general, any platform built around AWS Lambda (e.g. serverless functions) will not support streaming, but any traditional Node.js server or edge-based runtime will. Check your provider’s documentation for confirmation. + +If your platform does not support streaming, the data will still be available, but the response will be buffered and the page won’t start rendering until all data has been fetched. + +## How does it work? + +In order for data from a server `load` function to get to the browser, we have to _serialize_ it. SvelteKit uses a library called [devalue](https://github.com/Rich-Harris/devalue), which is like `JSON.stringify` but better — it can handle values that JSON can't (like dates and regular expressions), it can serialize objects that contain themselves (or that exist multiple times in the data) without breaking identity, and it protects you against [XSS vulnerabilities](https://github.com/rich-harris/devalue#xss-mitigation). + +When we server-render a page, we tell devalue to serialize promises as function calls that create a _deferred_. This is a simplified version of the code SvelteKit adds to the page: + +```js +// @errors: 2339 7006 +const deferreds = new Map(); + +window.defer = (id) => { + return new Promise((fulfil, reject) => { + deferreds.set(id, { fulfil, reject }); + }); +}; + +window.resolve = (id, data, error) => { + const deferred = deferreds.get(id); + deferreds.delete(id); + + if (error) { + deferred.reject(error); + } else { + deferred.fulfil(data); + } +}; + +// devalue converts your data into a JavaScript expression +const data = { + post: { + title: 'My cool blog post', + content: '...' + }, + streamed: { + comments: window.defer(1) + } +}; +``` + +This code, along with the rest of the server-rendered HTML, is sent to the browser immediately, but the connection is kept open. Later, when the promise resolves, SvelteKit pushes an additional chunk of HTML to the browser: + +```html + +``` + +For client-side navigation, we use a slightly different mechanism. Data from the server is serialized as [newline delimited JSON](https://dataprotocols.org/ndjson/), and SvelteKit reconstructs the values — using a similar deferred mechanism — with `devalue.parse`: + +```json +// this is generated immediately — note the ["Promise",1]... +[{"post":1,"streamed":4},{"title":2,"content":3},"My cool blog post","...",{"comments":5},["Promise",6],1] + +// ...then this chunk is sent to the browser once the promise resolves +[{"id":1,"data":2},1,[3],{"comment":4},"First!"] +``` + +Because promises are natively supported in this way, you can put them anywhere in the data returned from `load` (except at the top level, since we automatically await those for you), and they can resolve with any type of data that devalue supports — including more promises! + +One caveat: this feature needs JavaScript. Because of this, we recommend that you only stream in non-essential data so that the core of the experience is available to all users. + +For more on this feature, see [the documentation](https://kit.svelte.dev/docs/load#streaming-with-promises). You can see a demo at [sveltekit-on-the-edge.vercel.app](https://sveltekit-on-the-edge.vercel.app/edge) (the location data is artificially delayed and streamed in) or [deploy your own on Vercel](https://vercel.com/templates/svelte/sveltekit-edge-functions), where streaming is supported in both Edge Functions and Serverless Functions. + +We're grateful for the inspiration from prior implementations of this idea including Qwik, Remix, Solid, Marko, React and many others. + +## Snapshots + +Previously in a SvelteKit app, if you navigated away after starting to fill out a form, going back wouldn’t restore your form state – the form would be recreated with its default values. Depending on the context, this can be frustrating for users. Since SvelteKit 1.5, we have a built-in way to address this: snapshots. + +Now, you can export a `snapshot` object from a `+page.svelte` or `+layout.svelte`. This object has two methods: `capture` and `restore`. The `capture` function defines what state you want to store when the user leaves the page. SvelteKit will then associate that state with the current history entry. If the user navigates back to the page, the `restore` function will be called with the state you previously had set. + +For example, here is how you would capture and restore the value of a textarea: + +```svelte + + +
+ +