diff --git a/.changeset/ninety-olives-report.md b/.changeset/ninety-olives-report.md
deleted file mode 100644
index 3e66a41d02..0000000000
--- a/.changeset/ninety-olives-report.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: replace `undefined` with `void(0)` in CallExpressions
diff --git a/.changeset/wise-schools-report.md b/.changeset/wise-schools-report.md
deleted file mode 100644
index 47ec887256..0000000000
--- a/.changeset/wise-schools-report.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: place store setup inside async body
diff --git a/.github/workflows/ecosystem-ci-trigger.yml b/.github/workflows/ecosystem-ci-trigger.yml
index 9be1f00104..aa08df2f84 100644
--- a/.github/workflows/ecosystem-ci-trigger.yml
+++ b/.github/workflows/ecosystem-ci-trigger.yml
@@ -4,6 +4,8 @@ on:
issue_comment:
types: [created]
+permissions: {}
+
jobs:
trigger:
runs-on: ubuntu-latest
@@ -15,7 +17,6 @@ jobs:
contents: read # to clone the repo
steps:
- name: monitor action permissions
- uses: GitHubSecurityLab/actions-permissions/monitor@v1
- name: check user authorization # user needs triage permission
uses: actions/github-script@v7
id: check-permissions
diff --git a/.github/workflows/pkg.pr.new-comment.yml b/.github/workflows/pkg.pr.new-comment.yml
index 3f1fca5a0b..8bf13bb8f1 100644
--- a/.github/workflows/pkg.pr.new-comment.yml
+++ b/.github/workflows/pkg.pr.new-comment.yml
@@ -14,7 +14,6 @@ jobs:
name: 'Update comment'
runs-on: ubuntu-latest
steps:
- - uses: GitHubSecurityLab/actions-permissions/monitor@v1
- name: Download artifact
uses: actions/download-artifact@v4
with:
diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml
index b1ba217e5a..49303f1684 100644
--- a/.github/workflows/pkg.pr.new.yml
+++ b/.github/workflows/pkg.pr.new.yml
@@ -1,6 +1,8 @@
name: Publish Any Commit
on: [push, pull_request]
+permissions: {}
+
jobs:
build:
permissions: {}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 6debe5662a..b78346d883 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -17,7 +17,6 @@ jobs:
name: Release
runs-on: ubuntu-latest
steps:
- - uses: GitHubSecurityLab/actions-permissions/monitor@v1
- name: Checkout Repo
uses: actions/checkout@v4
with:
@@ -27,7 +26,7 @@ jobs:
- name: Setup Node.js
uses: actions/setup-node@v4
with:
- node-version: 18.x
+ node-version: 24.x
cache: pnpm
- name: Install
@@ -45,4 +44,3 @@ jobs:
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_CONFIG_PROVENANCE: true
- NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.prettierignore b/.prettierignore
index 5e1d9b1aa7..9cf9a4bfe1 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -15,6 +15,7 @@ packages/svelte/src/internal/client/warnings.js
packages/svelte/src/internal/shared/errors.js
packages/svelte/src/internal/shared/warnings.js
packages/svelte/src/internal/server/errors.js
+packages/svelte/src/internal/server/warnings.js
packages/svelte/tests/migrate/samples/*/output.svelte
packages/svelte/tests/**/*.svelte
packages/svelte/tests/**/_expected*
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0653b08b76..e940252892 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -9,7 +9,7 @@ The [Open Source Guides](https://opensource.guide/) website has a collection of
## Get involved
-There are many ways to contribute to Svelte, and many of them do not involve writing any code. Here's a few ideas to get started:
+There are many ways to contribute to Svelte, and many of them do not involve writing any code. Here are a few ideas to get started:
- Simply start using Svelte. Go through the [Getting Started](https://svelte.dev/docs#getting-started) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues).
- Look through the [open issues](https://github.com/sveltejs/svelte/issues). A good starting point would be issues tagged [good first issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](#triaging-issues-and-pull-requests).
@@ -90,9 +90,9 @@ A good test plan has the exact commands you ran and their output, provides scree
#### Writing tests
-All tests are located in `/test` folder.
+All tests are located in the `/tests` folder.
-Test samples are kept in `/test/xxx/samples` folder.
+Test samples are kept in `/tests/xxx/samples` folders.
#### Running tests
diff --git a/documentation/docs/01-introduction/02-getting-started.md b/documentation/docs/01-introduction/02-getting-started.md
index e97a46ad34..2ad22c8469 100644
--- a/documentation/docs/01-introduction/02-getting-started.md
+++ b/documentation/docs/01-introduction/02-getting-started.md
@@ -15,11 +15,11 @@ Don't worry if you don't know Svelte yet! You can ignore all the nice features S
## Alternatives to SvelteKit
-You can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS, and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#Is-there-a-router) as well.
+You can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS, and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](/packages#routing) as well.
>[!NOTE] Vite is often used in standalone mode to build [single page apps (SPAs)](../kit/glossary#SPA), which you can also [build with SvelteKit](../kit/single-page-apps).
-There are also plugins for [Rollup](https://github.com/sveltejs/rollup-plugin-svelte), [Webpack](https://github.com/sveltejs/svelte-loader) [and a few others](https://sveltesociety.dev/packages?category=build-plugins), but we recommend Vite.
+There are also [plugins for other bundlers](/packages#bundler-plugins), but we recommend Vite.
## Editor tooling
diff --git a/documentation/docs/03-template-syntax/12-bind.md b/documentation/docs/03-template-syntax/12-bind.md
index de57815687..c21ed35919 100644
--- a/documentation/docs/03-template-syntax/12-bind.md
+++ b/documentation/docs/03-template-syntax/12-bind.md
@@ -95,7 +95,7 @@ Since 5.6.0, if an `
@@ -117,6 +117,8 @@ Since 5.6.0, if an ``](svelte-boundary) with a `pending` snippet:
-
-```svelte
-
- loading...
- {/snippet}
-
-```
-
-This restriction will be lifted once Svelte supports asynchronous server-side rendering (see [caveats](#Caveats)).
-
-> [!NOTE] In the [playground](/playground), your app is rendered inside a boundary with an empty pending snippet, so that you can use `await` without having to create one.
-
## Synchronized updates
When an `await` expression depends on a particular piece of state, changes to that state will not be reflected in the UI until the asynchronous work has completed, so that the UI is not left in an inconsistent state. In other words, in an example like [this](/playground/untitled#H4sIAAAAAAAAE42QsWrDQBBEf2VZUkhYRE4gjSwJ0qVMkS6XYk9awcFpJe5Wdoy4fw-ycdykSPt2dpiZFYVGxgrf2PsJTlPwPWTcO-U-xwIH5zli9bminudNtwEsbl-v8_wYj-x1Y5Yi_8W7SZRFI1ZYxy64WVsjRj0rEDTwEJWUs6f8cKP2Tp8vVIxSPEsHwyKdukmA-j6jAmwO63Y1SidyCsIneA_T6CJn2ZBD00Jk_XAjT4tmQwEv-32eH6AsgYK6wXWOPPTs6Xy1CaxLECDYgb3kSUbq8p5aaifzorCt0RiUZbQcDIJ10ldH8gs3K6X2Xzqbro5zu1KCHaw2QQPrtclvwVSXc2sEC1T-Vqw0LJy-ClRy_uSkx2ogHzn9ADZ1CubKAQAA)...
@@ -99,7 +81,9 @@ let b = $derived(await two());
## Indicating loading states
-In addition to the nearest boundary's [`pending`](svelte-boundary#Properties-pending) snippet, you can indicate that asynchronous work is ongoing with [`$effect.pending()`]($effect#$effect.pending).
+To render placeholder UI, you can wrap content in a `` with a [`pending`](svelte-boundary#Properties-pending) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
+
+After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`]($effect#$effect.pending). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.
You can also use [`settled()`](svelte#settled) to get a promise that resolves when the current update is complete:
@@ -133,12 +117,28 @@ async function onclick() {
Errors in `await` expressions will bubble to the nearest [error boundary](svelte-boundary).
+## Server-side rendering
+
+Svelte supports asynchronous server-side rendering (SSR) with the `render(...)` API. To use it, simply await the return value:
+
+```js
+/// file: server.js
+import { render } from 'svelte/server';
+import App from './App.svelte';
+
+const { head, body } = +++await+++ render(App);
+```
+
+> [!NOTE] If you're using a framework like SvelteKit, this is done on your behalf.
+
+If a `` with a `pending` snippet is encountered during SSR, that snippet will be rendered while the rest of the content is ignored. All `await` expressions encountered outside boundaries with `pending` snippets will resolve and render their contents prior to `await render(...)` returning.
+
+> [!NOTE] In the future, we plan to add a streaming implementation that renders the content in the background.
+
## Caveats
As an experimental feature, the details of how `await` is handled (and related APIs like `$effect.pending()`) are subject to breaking changes outside of a semver major release, though we intend to keep such changes to a bare minimum.
-Currently, server-side rendering is synchronous. If a `` with a `pending` snippet is encountered during SSR, only the `pending` snippet will be rendered.
-
## Breaking changes
Effects run in a slightly different order when the `experimental.async` option is `true`. Specifically, _block_ effects like `{#if ...}` and `{#each ...}` now run before an `$effect.pre` or `beforeUpdate` in the same component, which means that in [very rare situations](/playground/untitled?#H4sIAAAAAAAAE22R3VLDIBCFX2WLvUhnTHsf0zre-Q7WmfwtFV2BgU1rJ5N3F0jaOuoVcPbw7VkYhK4_URTiGYkMnIyjDjLsFGO3EvdCKkIvipdB8NlGXxSCPt96snbtj0gctab2-J_eGs2oOWBE6VunLO_2es-EDKZ5x5ZhC0vPNWM2gHXGouNzAex6hHH1cPHil_Lsb95YT9VQX6KUAbS2DrNsBdsdDFHe8_XSYjH1SrhELTe3MLpsemajweiWVPuxHSbKNd-8eQTdE0EBf4OOaSg2hwNhhE_ABB_ulJzjj9FULvIcqgm5vnAqUB7wWFMfhuugQWkcAr8hVD-mq8D12kOep24J_IszToOXdveGDsuNnZwbJUNlXsKnhJdhUcTo42s41YpOSneikDV5HL8BktM6yRcCAAA=) it is possible to update a block that should no longer exist, but only if you update state inside an effect, [which you should avoid]($effect#When-not-to-use-$effect).
diff --git a/documentation/docs/07-misc/02-testing.md b/documentation/docs/07-misc/02-testing.md
index bcec4db0a3..4807fc8f0c 100644
--- a/documentation/docs/07-misc/02-testing.md
+++ b/documentation/docs/07-misc/02-testing.md
@@ -4,7 +4,7 @@ title: Testing
Testing helps you write and maintain your code and guard against regressions. Testing frameworks help you with that, allowing you to describe assertions or expectations about how your code should behave. Svelte is unopinionated about which testing framework you use — you can write unit tests, integration tests, and end-to-end tests using solutions like [Vitest](https://vitest.dev/), [Jasmine](https://jasmine.github.io/), [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/).
-## Unit and integration testing using Vitest
+## Unit and component tests with Vitest
Unit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/). You can use the Svelte CLI to [setup Vitest](/docs/cli/vitest) either during project creation or later on.
@@ -160,9 +160,9 @@ export function logger(getValue) {
### Component testing
-It is possible to test your components in isolation using Vitest.
+It is possible to test your components in isolation, which allows you to render them in a browser (real or simulated), simulate behavior, and make assertions, without spinning up your whole app.
-> [!NOTE] Before writing component tests, think about whether you actually need to test the component, or if it's more about the logic _inside_ the component. If so, consider extracting out that logic to test it in isolation, without the overhead of a component
+> [!NOTE] Before writing component tests, think about whether you actually need to test the component, or if it's more about the logic _inside_ the component. If so, consider extracting out that logic to test it in isolation, without the overhead of a component.
To get started, install jsdom (a library that shims DOM APIs):
@@ -246,7 +246,49 @@ test('Component', async () => {
When writing component tests that involve two-way bindings, context or snippet props, it's best to create a wrapper component for your specific test and interact with that. `@testing-library/svelte` contains some [examples](https://testing-library.com/docs/svelte-testing-library/example).
-## E2E tests using Playwright
+## Component tests with Storybook
+
+[Storybook](https://storybook.js.org) is a tool for developing and documenting UI components, and it can also be used to test your components. They're run with Vitest's browser mode, which renders your components in a real browser for the most realistic testing environment.
+
+To get started, first install Storybook ([using Svelte's CLI](/docs/cli/storybook)) in your project via `npx sv add storybook` and choose the recommended configuration that includes testing features. If you're already using Storybook, and for more information on Storybook's testing capabilities, follow the [Storybook testing docs](https://storybook.js.org/docs/writing-tests?renderer=svelte) to get started.
+
+You can create stories for component variations and test interactions with the [play function](https://storybook.js.org/docs/writing-tests/interaction-testing?renderer=svelte#writing-interaction-tests), which allows you to simulate behavior and make assertions using the Testing Library and Vitest APIs. Here's an example of two stories that can be tested, one that renders an empty LoginForm component and one that simulates a user filling out the form:
+
+```svelte
+/// file: LoginForm.stories.svelte
+
+
+ {
+ // Simulate a user filling out the form
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+ await userEvent.click(canvas.getByRole('button'));
+
+ // Run assertions
+ await expect(args.onSubmit).toHaveBeenCalledTimes(1);
+ await expect(canvas.getByText('You’re in!')).toBeInTheDocument();
+ }}
+/>
+```
+
+## End-to-end tests with Playwright
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/).
diff --git a/documentation/docs/07-misc/99-faq.md b/documentation/docs/07-misc/99-faq.md
index cf98cdd3c3..1816998299 100644
--- a/documentation/docs/07-misc/99-faq.md
+++ b/documentation/docs/07-misc/99-faq.md
@@ -65,7 +65,7 @@ There will be a blog post about this eventually, but in the meantime, check out
## Is there a UI component library?
-There are several UI component libraries as well as standalone components. Find them under the [design systems section of the components page](https://sveltesociety.dev/packages?category=design-system) on the Svelte Society website.
+There are several [UI component libraries](/packages#component-libraries) as well as standalone components listed on [the packages page](/packages).
## How do I test Svelte apps?
@@ -91,17 +91,9 @@ Some resources for getting started with testing:
## Is there a router?
-The official routing library is [SvelteKit](/docs/kit). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.
+The official routing library is [SvelteKit](/docs/kit). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React and Nuxt.js for Vue.
-However, you can use any router library. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar. And [universal-router](https://github.com/kriasoft/universal-router), which is isomorphic with child routes, but without built-in history support.
-
-If you prefer a declarative HTML approach, there's the isomorphic [svelte-routing](https://github.com/EmilTholin/svelte-routing) library and a fork of it called [svelte-navigator](https://github.com/mefechoel/svelte-navigator) containing some additional functionality.
-
-If you need hash-based routing on the client side, check out the [hash option](https://svelte.dev/docs/kit/configuration#router) in SvelteKit, [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router), or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
-
-[Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
-
-You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/packages?category=routers).
+However, you can use any router library. A sampling of available routers are highlighted [on the packages page](/packages#routing).
## How do I write a mobile app with Svelte?
diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index 6f1d677fe9..c95ace2229 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -312,6 +312,27 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
+### state_proxy_unmount
+
+```
+Tried to unmount a state proxy, rather than a component
+```
+
+`unmount` was called with a state proxy:
+
+```js
+import { mount, unmount } from 'svelte';
+import Component from './Component.svelte';
+let target = document.body;
+// ---cut---
+let component = $state(mount(Component, { target }));
+
+// later...
+unmount(component);
+```
+
+Avoid using `$state` here. If `component` _does_ need to be reactive for some reason, use `$state.raw` instead.
+
### svelte_boundary_reset_noop
```
diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md
index 17841b863c..7dfbe75888 100644
--- a/documentation/docs/98-reference/.generated/compile-warnings.md
+++ b/documentation/docs/98-reference/.generated/compile-warnings.md
@@ -81,7 +81,7 @@ Coding for the keyboard is important for users with physical disabilities who ca
### a11y_consider_explicit_label
```
-Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
+Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute
```
### a11y_distracting_elements
diff --git a/documentation/docs/98-reference/.generated/server-errors.md b/documentation/docs/98-reference/.generated/server-errors.md
index c3e8b53c31..6263032212 100644
--- a/documentation/docs/98-reference/.generated/server-errors.md
+++ b/documentation/docs/98-reference/.generated/server-errors.md
@@ -1,5 +1,19 @@
+### await_invalid
+
+```
+Encountered asynchronous work while rendering synchronously.
+```
+
+You (or the framework you're using) called [`render(...)`](svelte-server#render) with a component containing an `await` expression. Either `await` the result of `render` or wrap the `await` (or the component containing it) in a [``](svelte-boundary) with a `pending` snippet.
+
+### html_deprecated
+
+```
+The `html` property of server render results has been deprecated. Use `body` instead.
+```
+
### lifecycle_function_unavailable
```
diff --git a/documentation/docs/98-reference/.generated/server-warnings.md b/documentation/docs/98-reference/.generated/server-warnings.md
new file mode 100644
index 0000000000..26b3628be9
--- /dev/null
+++ b/documentation/docs/98-reference/.generated/server-warnings.md
@@ -0,0 +1,9 @@
+
+
+### experimental_async_ssr
+
+```
+Attempted to use asynchronous rendering without `experimental.async` enabled
+```
+
+Set `experimental.async: true` in your compiler options (usually in `svelte.config.js`) to use async server rendering. This render ran synchronously.
diff --git a/documentation/docs/98-reference/.generated/shared-errors.md b/documentation/docs/98-reference/.generated/shared-errors.md
index de34b3f5da..6c31aaafd0 100644
--- a/documentation/docs/98-reference/.generated/shared-errors.md
+++ b/documentation/docs/98-reference/.generated/shared-errors.md
@@ -1,25 +1,5 @@
-### await_outside_boundary
-
-```
-Cannot await outside a `` with a `pending` snippet
-```
-
-The `await` keyword can only appear in a `$derived(...)` or template expression, or at the top level of a component's ``);
-}
-
-export function reset_elements() {
- let old_parent = parent;
- parent = null;
- return () => {
- parent = old_parent;
- };
+ renderer.head((r) => r.push(``));
}
/**
- * @param {Payload} payload
+ * @param {Renderer} renderer
* @param {string} tag
* @param {number} line
* @param {number} column
*/
-export function push_element(payload, tag, line, column) {
- var filename = /** @type {Component} */ (current_component).function[FILENAME];
- var child = { tag, parent, filename, line, column };
+export function push_element(renderer, tag, line, column) {
+ var context = /** @type {SSRContext} */ (ssr_context);
+ var filename = context.function[FILENAME];
+ var parent = context.element;
+ var element = { tag, parent, filename, line, column };
- if (parent !== null) {
+ if (parent !== undefined) {
var ancestor = parent.parent;
var ancestors = [parent.tag];
@@ -71,7 +64,7 @@ export function push_element(payload, tag, line, column) {
: undefined;
const message = is_tag_valid_with_parent(tag, parent.tag, child_loc, parent_loc);
- if (message) print_error(payload, message);
+ if (message) print_error(renderer, message);
while (ancestor != null) {
ancestors.push(ancestor.tag);
@@ -80,27 +73,27 @@ export function push_element(payload, tag, line, column) {
: undefined;
const message = is_tag_valid_with_ancestor(tag, ancestors, child_loc, ancestor_loc);
- if (message) print_error(payload, message);
+ if (message) print_error(renderer, message);
ancestor = ancestor.parent;
}
}
- parent = child;
+ set_ssr_context({ ...context, p: context, element });
}
export function pop_element() {
- parent = /** @type {Element} */ (parent).parent;
+ set_ssr_context(/** @type {SSRContext} */ (ssr_context).p);
}
/**
- * @param {Payload} payload
+ * @param {Renderer} renderer
*/
-export function validate_snippet_args(payload) {
+export function validate_snippet_args(renderer) {
if (
- typeof payload !== 'object' ||
- // for some reason typescript consider the type of payload as never after the first instanceof
- !(payload instanceof Payload || /** @type {any} */ (payload) instanceof HeadPayload)
+ typeof renderer !== 'object' ||
+ // for some reason typescript consider the type of renderer as never after the first instanceof
+ !(renderer instanceof Renderer)
) {
e.invalid_snippet_arguments();
}
diff --git a/packages/svelte/src/internal/server/errors.js b/packages/svelte/src/internal/server/errors.js
index 458937218f..bde49fe935 100644
--- a/packages/svelte/src/internal/server/errors.js
+++ b/packages/svelte/src/internal/server/errors.js
@@ -2,6 +2,30 @@
export * from '../shared/errors.js';
+/**
+ * Encountered asynchronous work while rendering synchronously.
+ * @returns {never}
+ */
+export function await_invalid() {
+ const error = new Error(`await_invalid\nEncountered asynchronous work while rendering synchronously.\nhttps://svelte.dev/e/await_invalid`);
+
+ error.name = 'Svelte error';
+
+ throw error;
+}
+
+/**
+ * The `html` property of server render results has been deprecated. Use `body` instead.
+ * @returns {never}
+ */
+export function html_deprecated() {
+ const error = new Error(`html_deprecated\nThe \`html\` property of server render results has been deprecated. Use \`body\` instead.\nhttps://svelte.dev/e/html_deprecated`);
+
+ error.name = 'Svelte error';
+
+ throw error;
+}
+
/**
* `%name%(...)` is not available on the server
* @param {string} name
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 62ee22d6fc..50bb629c4d 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -1,6 +1,7 @@
-/** @import { ComponentType, SvelteComponent } from 'svelte' */
-/** @import { Component, RenderOutput } from '#server' */
+/** @import { ComponentType, SvelteComponent, Component } from 'svelte' */
+/** @import { RenderOutput } from '#server' */
/** @import { Store } from '#shared' */
+/** @import { AccumulatedContent } from './renderer.js' */
export { FILENAME, HMR } from '../../constants.js';
import { attr, clsx, to_class, to_style } from '../shared/attributes.js';
import { is_promise, noop } from '../shared/utils.js';
@@ -8,17 +9,15 @@ import { subscribe_to_store } from '../../store/utils.js';
import {
UNINITIALIZED,
ELEMENT_PRESERVE_ATTRIBUTE_CASE,
- ELEMENT_IS_NAMESPACED
+ ELEMENT_IS_NAMESPACED,
+ ELEMENT_IS_INPUT
} from '../../constants.js';
import { escape_html } from '../../escaping.js';
import { DEV } from 'esm-env';
-import { current_component, pop, push } from './context.js';
import { EMPTY_COMMENT, BLOCK_CLOSE, BLOCK_OPEN, BLOCK_OPEN_ELSE } from './hydration.js';
import { validate_store } from '../shared/validate.js';
import { is_boolean_attribute, is_raw_text_element, is_void } from '../../utils.js';
-import { reset_elements } from './dev.js';
-import { Payload } from './payload.js';
-import { abort } from './abort-signal.js';
+import { Renderer } from './renderer.js';
// https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
// https://infra.spec.whatwg.org/#noncharacter
@@ -26,150 +25,96 @@ const INVALID_ATTR_NAME_CHAR_REGEX =
/[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
/**
- * @param {Payload} payload
+ * @param {Renderer} renderer
* @param {string} tag
* @param {() => void} attributes_fn
* @param {() => void} children_fn
* @returns {void}
*/
-export function element(payload, tag, attributes_fn = noop, children_fn = noop) {
- payload.out.push('');
+export function element(renderer, tag, attributes_fn = noop, children_fn = noop) {
+ renderer.push('');
if (tag) {
- payload.out.push(`<${tag}`);
+ renderer.push(`<${tag}`);
attributes_fn();
- payload.out.push(`>`);
+ renderer.push(`>`);
if (!is_void(tag)) {
children_fn();
if (!is_raw_text_element(tag)) {
- payload.out.push(EMPTY_COMMENT);
+ renderer.push(EMPTY_COMMENT);
}
- payload.out.push(``);
+ renderer.push(``);
}
}
- payload.out.push('');
+ renderer.push('');
}
-/**
- * Array of `onDestroy` callbacks that should be called at the end of the server render function
- * @type {Function[]}
- */
-export let on_destroy = [];
-
/**
* Only available on the server and when compiling with the `server` option.
* Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app.
* @template {Record} Props
- * @param {import('svelte').Component | ComponentType>} component
+ * @param {Component | ComponentType>} component
* @param {{ props?: Omit; context?: Map; idPrefix?: string }} [options]
* @returns {RenderOutput}
*/
export function render(component, options = {}) {
- try {
- const payload = new Payload(options.idPrefix ? options.idPrefix + '-' : '');
-
- const prev_on_destroy = on_destroy;
- on_destroy = [];
- payload.out.push(BLOCK_OPEN);
-
- let reset_reset_element;
-
- if (DEV) {
- // prevent parent/child element state being corrupted by a bad render
- reset_reset_element = reset_elements();
- }
-
- if (options.context) {
- push();
- /** @type {Component} */ (current_component).c = options.context;
- }
-
- // @ts-expect-error
- component(payload, options.props ?? {}, {}, {});
-
- if (options.context) {
- pop();
- }
-
- if (reset_reset_element) {
- reset_reset_element();
- }
-
- payload.out.push(BLOCK_CLOSE);
- for (const cleanup of on_destroy) cleanup();
- on_destroy = prev_on_destroy;
-
- let head = payload.head.out.join('') + payload.head.title;
-
- for (const { hash, code } of payload.css) {
- head += ``;
- }
-
- const body = payload.out.join('');
-
- return {
- head,
- html: body,
- body: body
- };
- } finally {
- abort();
- }
+ return Renderer.render(/** @type {Component} */ (component), options);
}
/**
- * @param {Payload} payload
- * @param {(head_payload: Payload['head']) => void} fn
+ * @param {Renderer} renderer
+ * @param {(renderer: Renderer) => Promise | void} fn
* @returns {void}
*/
-export function head(payload, fn) {
- const head_payload = payload.head;
- head_payload.out.push(BLOCK_OPEN);
- fn(head_payload);
- head_payload.out.push(BLOCK_CLOSE);
+export function head(renderer, fn) {
+ renderer.head((renderer) => {
+ renderer.push(BLOCK_OPEN);
+ renderer.child(fn);
+ renderer.push(BLOCK_CLOSE);
+ });
}
/**
- * @param {Payload} payload
+ * @param {Renderer} renderer
* @param {boolean} is_html
* @param {Record} props
* @param {() => void} component
* @param {boolean} dynamic
* @returns {void}
*/
-export function css_props(payload, is_html, props, component, dynamic = false) {
+export function css_props(renderer, is_html, props, component, dynamic = false) {
const styles = style_object_to_string(props);
if (is_html) {
- payload.out.push(``);
+ renderer.push(``);
} else {
- payload.out.push(``);
+ renderer.push(``);
}
if (dynamic) {
- payload.out.push('');
+ renderer.push('');
}
component();
if (is_html) {
- payload.out.push(` `);
+ renderer.push(` `);
} else {
- payload.out.push(``);
+ renderer.push(``);
}
}
/**
* @param {Record} attrs
- * @param {string | null} css_hash
+ * @param {string} [css_hash]
* @param {Record} [classes]
* @param {Record} [styles]
* @param {number} [flags]
* @returns {string}
*/
-export function spread_attributes(attrs, css_hash, classes, styles, flags = 0) {
+export function attributes(attrs, css_hash, classes, styles, flags = 0) {
if (styles) {
attrs.style = to_style(attrs.style, styles);
}
@@ -187,6 +132,7 @@ export function spread_attributes(attrs, css_hash, classes, styles, flags = 0) {
const is_html = (flags & ELEMENT_IS_NAMESPACED) === 0;
const lowercase = (flags & ELEMENT_PRESERVE_ATTRIBUTE_CASE) === 0;
+ const is_input = (flags & ELEMENT_IS_INPUT) !== 0;
for (name in attrs) {
// omit functions, internal svelte properties and invalid attribute names
@@ -200,6 +146,13 @@ export function spread_attributes(attrs, css_hash, classes, styles, flags = 0) {
name = name.toLowerCase();
}
+ if (is_input) {
+ if (name === 'defaultvalue' || name === 'defaultchecked') {
+ name = name === 'defaultvalue' ? 'value' : 'checked';
+ if (attrs[name]) continue;
+ }
+ }
+
attr_str += attr(name, value, is_html && is_boolean_attribute(name));
}
@@ -351,14 +304,14 @@ export function unsubscribe_stores(store_values) {
}
/**
- * @param {Payload} payload
+ * @param {Renderer} renderer
* @param {Record} $$props
* @param {string} name
* @param {Record} slot_props
* @param {null | (() => void)} fallback_fn
* @returns {void}
*/
-export function slot(payload, $$props, name, slot_props, fallback_fn) {
+export function slot(renderer, $$props, name, slot_props, fallback_fn) {
var slot_fn = $$props.$$slots?.[name];
// Interop: Can use snippets to fill slots
if (slot_fn === true) {
@@ -366,7 +319,7 @@ export function slot(payload, $$props, name, slot_props, fallback_fn) {
}
if (slot_fn !== undefined) {
- slot_fn(payload, slot_props);
+ slot_fn(renderer, slot_props);
} else {
fallback_fn?.();
}
@@ -434,21 +387,21 @@ export function bind_props(props_parent, props_now) {
/**
* @template V
- * @param {Payload} payload
+ * @param {Renderer} renderer
* @param {Promise} promise
* @param {null | (() => void)} pending_fn
* @param {(value: V) => void} then_fn
* @returns {void}
*/
-function await_block(payload, promise, pending_fn, then_fn) {
+function await_block(renderer, promise, pending_fn, then_fn) {
if (is_promise(promise)) {
- payload.out.push(BLOCK_OPEN);
+ renderer.push(BLOCK_OPEN);
promise.then(null, noop);
if (pending_fn !== null) {
pending_fn();
}
} else if (then_fn !== null) {
- payload.out.push(BLOCK_OPEN_ELSE);
+ renderer.push(BLOCK_OPEN_ELSE);
then_fn(promise);
}
}
@@ -490,12 +443,12 @@ export function once(get_value) {
/**
* Create an unique ID
- * @param {Payload} payload
+ * @param {Renderer} renderer
* @returns {string}
*/
-export function props_id(payload) {
- const uid = payload.uid();
- payload.out.push('');
+export function props_id(renderer) {
+ const uid = renderer.global.uid();
+ renderer.push('');
return uid;
}
@@ -503,12 +456,10 @@ export { attr, clsx };
export { html } from './blocks/html.js';
-export { push, pop } from './context.js';
+export { save } from './context.js';
export { push_element, pop_element, validate_snippet_args } from './dev.js';
-export { assign_payload, copy_payload } from './payload.js';
-
export { snapshot } from '../shared/clone.js';
export { fallback, to_array } from '../shared/utils.js';
@@ -522,8 +473,6 @@ export {
export { escape_html as escape };
-export { await_outside_boundary } from '../shared/errors.js';
-
/**
* @template T
* @param {()=>T} fn
@@ -544,33 +493,3 @@ export function derived(fn) {
return updated_value;
};
}
-
-/**
- *
- * @param {Payload} payload
- * @param {*} value
- */
-export function maybe_selected(payload, value) {
- return value === payload.select_value ? ' selected' : '';
-}
-
-/**
- * @param {Payload} payload
- * @param {() => void} children
- * @returns {void}
- */
-export function valueless_option(payload, children) {
- var i = payload.out.length;
-
- children();
-
- var body = payload.out.slice(i).join('');
-
- if (body.replace(//g, '') === payload.select_value) {
- // replace '>' with ' selected>' (closing tag will be added later)
- var last_item = payload.out[i - 1];
- payload.out[i - 1] = last_item.slice(0, -1) + ' selected>';
- // Remove the old items after position i and add the body as a single item
- payload.out.splice(i, payload.out.length - i, body);
- }
-}
diff --git a/packages/svelte/src/internal/server/payload.js b/packages/svelte/src/internal/server/payload.js
deleted file mode 100644
index a7e40ad1db..0000000000
--- a/packages/svelte/src/internal/server/payload.js
+++ /dev/null
@@ -1,80 +0,0 @@
-export class HeadPayload {
- /** @type {Set<{ hash: string; code: string }>} */
- css = new Set();
- /** @type {string[]} */
- out = [];
- uid = () => '';
- title = '';
-
- constructor(
- /** @type {Set<{ hash: string; code: string }>} */ css = new Set(),
- /** @type {string[]} */ out = [],
- title = '',
- uid = () => ''
- ) {
- this.css = css;
- this.out = out;
- this.title = title;
- this.uid = uid;
- }
-}
-
-export class Payload {
- /** @type {Set<{ hash: string; code: string }>} */
- css = new Set();
- /** @type {string[]} */
- out = [];
- uid = () => '';
- select_value = undefined;
-
- head = new HeadPayload();
-
- constructor(id_prefix = '') {
- this.uid = props_id_generator(id_prefix);
- this.head.uid = this.uid;
- }
-}
-
-/**
- * Used in legacy mode to handle bindings
- * @param {Payload} to_copy
- * @returns {Payload}
- */
-export function copy_payload({ out, css, head, uid }) {
- const payload = new Payload();
-
- payload.out = [...out];
- payload.css = new Set(css);
- payload.uid = uid;
-
- payload.head = new HeadPayload();
- payload.head.out = [...head.out];
- payload.head.css = new Set(head.css);
- payload.head.title = head.title;
- payload.head.uid = head.uid;
-
- return payload;
-}
-
-/**
- * Assigns second payload to first
- * @param {Payload} p1
- * @param {Payload} p2
- * @returns {void}
- */
-export function assign_payload(p1, p2) {
- p1.out = [...p2.out];
- p1.css = p2.css;
- p1.head = p2.head;
- p1.uid = p2.uid;
-}
-
-/**
- * Creates an ID generator
- * @param {string} prefix
- * @returns {() => string}
- */
-function props_id_generator(prefix) {
- let uid = 1;
- return () => `${prefix}s${uid++}`;
-}
diff --git a/packages/svelte/src/internal/server/renderer.js b/packages/svelte/src/internal/server/renderer.js
new file mode 100644
index 0000000000..bbb43a6f3b
--- /dev/null
+++ b/packages/svelte/src/internal/server/renderer.js
@@ -0,0 +1,622 @@
+/** @import { Component } from 'svelte' */
+/** @import { RenderOutput, SSRContext, SyncRenderOutput } from './types.js' */
+import { async_mode_flag } from '../flags/index.js';
+import { abort } from './abort-signal.js';
+import { pop, push, set_ssr_context, ssr_context } from './context.js';
+import * as e from './errors.js';
+import * as w from './warnings.js';
+import { BLOCK_CLOSE, BLOCK_OPEN } from './hydration.js';
+import { attributes } from './index.js';
+
+/** @typedef {'head' | 'body'} RendererType */
+/** @typedef {{ [key in RendererType]: string }} AccumulatedContent */
+/**
+ * @template T
+ * @typedef {T | Promise} MaybePromise
+ */
+/**
+ * @typedef {string | Renderer} RendererItem
+ */
+
+/**
+ * Renderers are basically a tree of `string | Renderer`s, where each `Renderer` in the tree represents
+ * work that may or may not have completed. A renderer can be {@link collect}ed to aggregate the
+ * content from itself and all of its children, but this will throw if any of the children are
+ * performing asynchronous work. To asynchronously collect a renderer, just `await` it.
+ *
+ * The `string` values within a renderer are always associated with the {@link type} of that renderer. To switch types,
+ * call {@link child} with a different `type` argument.
+ */
+export class Renderer {
+ /**
+ * The contents of the renderer.
+ * @type {RendererItem[]}
+ */
+ #out = [];
+
+ /**
+ * Any `onDestroy` callbacks registered during execution of this renderer.
+ * @type {(() => void)[] | undefined}
+ */
+ #on_destroy = undefined;
+
+ /**
+ * Whether this renderer is a component body.
+ * @type {boolean}
+ */
+ #is_component_body = false;
+
+ /**
+ * The type of string content that this renderer is accumulating.
+ * @type {RendererType}
+ */
+ type;
+
+ /** @type {Renderer | undefined} */
+ #parent;
+
+ /**
+ * Asynchronous work associated with this renderer
+ * @type {Promise | undefined}
+ */
+ promise = undefined;
+
+ /**
+ * State which is associated with the content tree as a whole.
+ * It will be re-exposed, uncopied, on all children.
+ * @type {SSRState}
+ * @readonly
+ */
+ global;
+
+ /**
+ * State that is local to the branch it is declared in.
+ * It will be shallow-copied to all children.
+ *
+ * @type {{ select_value: string | undefined }}
+ */
+ local;
+
+ /**
+ * @param {SSRState} global
+ * @param {Renderer | undefined} [parent]
+ */
+ constructor(global, parent) {
+ this.#parent = parent;
+
+ this.global = global;
+ this.local = parent ? { ...parent.local } : { select_value: undefined };
+ this.type = parent ? parent.type : 'body';
+ }
+
+ /**
+ * @param {(renderer: Renderer) => void} fn
+ */
+ head(fn) {
+ const head = new Renderer(this.global, this);
+ head.type = 'head';
+
+ this.#out.push(head);
+ head.child(fn);
+ }
+
+ /**
+ * @param {(renderer: Renderer) => void} fn
+ */
+ async(fn) {
+ this.#out.push(BLOCK_OPEN);
+ this.child(fn);
+ this.#out.push(BLOCK_CLOSE);
+ }
+
+ /**
+ * Create a child renderer. The child renderer inherits the state from the parent,
+ * but has its own content.
+ * @param {(renderer: Renderer) => MaybePromise} fn
+ */
+ child(fn) {
+ const child = new Renderer(this.global, this);
+ this.#out.push(child);
+
+ const parent = ssr_context;
+
+ set_ssr_context({
+ ...ssr_context,
+ p: parent,
+ c: null,
+ r: child
+ });
+
+ const result = fn(child);
+
+ set_ssr_context(parent);
+
+ if (result instanceof Promise) {
+ if (child.global.mode === 'sync') {
+ e.await_invalid();
+ }
+ // just to avoid unhandled promise rejections -- we'll end up throwing in `collect_async` if something fails
+ result.catch(() => {});
+ child.promise = result;
+ }
+
+ return child;
+ }
+
+ /**
+ * Create a component renderer. The component renderer inherits the state from the parent,
+ * but has its own content. It is treated as an ordering boundary for ondestroy callbacks.
+ * @param {(renderer: Renderer) => MaybePromise} fn
+ * @param {Function} [component_fn]
+ * @returns {void}
+ */
+ component(fn, component_fn) {
+ push(component_fn);
+ const child = this.child(fn);
+ child.#is_component_body = true;
+ pop();
+ }
+
+ /**
+ * @param {Record} attrs
+ * @param {(renderer: Renderer) => void} fn
+ * @param {string | undefined} [css_hash]
+ * @param {Record | undefined} [classes]
+ * @param {Record | undefined} [styles]
+ * @param {number | undefined} [flags]
+ * @returns {void}
+ */
+ select(attrs, fn, css_hash, classes, styles, flags) {
+ const { value, ...select_attrs } = attrs;
+
+ this.push(``);
+ this.child((renderer) => {
+ renderer.local.select_value = value;
+ fn(renderer);
+ });
+ this.push('');
+ }
+
+ /**
+ * @param {Record} attrs
+ * @param {string | number | boolean | ((renderer: Renderer) => void)} body
+ * @param {string | undefined} [css_hash]
+ * @param {Record | undefined} [classes]
+ * @param {Record | undefined} [styles]
+ * @param {number | undefined} [flags]
+ */
+ option(attrs, body, css_hash, classes, styles, flags) {
+ this.#out.push(` {
+ if ('value' in attrs) {
+ value = attrs.value;
+ }
+
+ if (value === this.local.select_value) {
+ renderer.#out.push(' selected');
+ }
+
+ renderer.#out.push(`>${body}`);
+
+ // super edge case, but may as well handle it
+ if (head) {
+ renderer.head((child) => child.push(head));
+ }
+ };
+
+ if (typeof body === 'function') {
+ this.child((renderer) => {
+ const r = new Renderer(this.global, this);
+ body(r);
+
+ if (this.global.mode === 'async') {
+ return r.#collect_content_async().then((content) => {
+ close(renderer, content.body.replaceAll('', ''), content);
+ });
+ } else {
+ const content = r.#collect_content();
+ close(renderer, content.body.replaceAll('', ''), content);
+ }
+ });
+ } else {
+ close(this, body, { body });
+ }
+ }
+
+ /**
+ * @param {(renderer: Renderer) => void} fn
+ */
+ title(fn) {
+ const path = this.get_path();
+
+ /** @param {string} head */
+ const close = (head) => {
+ this.global.set_title(head, path);
+ };
+
+ this.child((renderer) => {
+ const r = new Renderer(renderer.global, renderer);
+ fn(r);
+
+ if (renderer.global.mode === 'async') {
+ return r.#collect_content_async().then((content) => {
+ close(content.head);
+ });
+ } else {
+ const content = r.#collect_content();
+ close(content.head);
+ }
+ });
+ }
+
+ /**
+ * @param {string | (() => Promise)} content
+ */
+ push(content) {
+ if (typeof content === 'function') {
+ this.child(async (renderer) => renderer.push(await content()));
+ } else {
+ this.#out.push(content);
+ }
+ }
+
+ /**
+ * @param {() => void} fn
+ */
+ on_destroy(fn) {
+ (this.#on_destroy ??= []).push(fn);
+ }
+
+ /**
+ * @returns {number[]}
+ */
+ get_path() {
+ return this.#parent ? [...this.#parent.get_path(), this.#parent.#out.indexOf(this)] : [];
+ }
+
+ /**
+ * @deprecated this is needed for legacy component bindings
+ */
+ copy() {
+ const copy = new Renderer(this.global, this.#parent);
+ copy.#out = this.#out.map((item) => (item instanceof Renderer ? item.copy() : item));
+ copy.promise = this.promise;
+ return copy;
+ }
+
+ /**
+ * @param {Renderer} other
+ * @deprecated this is needed for legacy component bindings
+ */
+ subsume(other) {
+ if (this.global.mode !== other.global.mode) {
+ throw new Error(
+ "invariant: A renderer cannot switch modes. If you're seeing this, there's a compiler bug. File an issue!"
+ );
+ }
+
+ this.local = other.local;
+ this.#out = other.#out.map((item) => {
+ if (item instanceof Renderer) {
+ item.subsume(item);
+ }
+ return item;
+ });
+ this.promise = other.promise;
+ this.type = other.type;
+ }
+
+ get length() {
+ return this.#out.length;
+ }
+
+ /**
+ * Only available on the server and when compiling with the `server` option.
+ * Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app.
+ * @template {Record} Props
+ * @param {Component} component
+ * @param {{ props?: Omit; context?: Map; idPrefix?: string }} [options]
+ * @returns {RenderOutput}
+ */
+ static render(component, options = {}) {
+ /** @type {AccumulatedContent | undefined} */
+ let sync;
+ /** @type {Promise | undefined} */
+ let async;
+
+ const result = /** @type {RenderOutput} */ ({});
+ // making these properties non-enumerable so that console.logging
+ // doesn't trigger a sync render
+ Object.defineProperties(result, {
+ html: {
+ get: () => {
+ return (sync ??= Renderer.#render(component, options)).body;
+ }
+ },
+ head: {
+ get: () => {
+ return (sync ??= Renderer.#render(component, options)).head;
+ }
+ },
+ body: {
+ get: () => {
+ return (sync ??= Renderer.#render(component, options)).body;
+ }
+ },
+ then: {
+ value:
+ /**
+ * this is not type-safe, but honestly it's the best I can do right now, and it's a straightforward function.
+ *
+ * @template TResult1
+ * @template [TResult2=never]
+ * @param { (value: SyncRenderOutput) => TResult1 } onfulfilled
+ * @param { (reason: unknown) => TResult2 } onrejected
+ */
+ (onfulfilled, onrejected) => {
+ if (!async_mode_flag) {
+ w.experimental_async_ssr();
+ const result = (sync ??= Renderer.#render(component, options));
+ const user_result = onfulfilled({
+ head: result.head,
+ body: result.body,
+ html: result.body
+ });
+ return Promise.resolve(user_result);
+ }
+ async ??= Renderer.#render_async(component, options);
+ return async.then((result) => {
+ Object.defineProperty(result, 'html', {
+ // eslint-disable-next-line getter-return
+ get: () => {
+ e.html_deprecated();
+ }
+ });
+ return onfulfilled(/** @type {SyncRenderOutput} */ (result));
+ }, onrejected);
+ }
+ }
+ });
+
+ return result;
+ }
+
+ /**
+ * Collect all of the `onDestroy` callbacks regsitered during rendering. In an async context, this is only safe to call
+ * after awaiting `collect_async`.
+ *
+ * Child renderers are "porous" and don't affect execution order, but component body renderers
+ * create ordering boundaries. Within a renderer, callbacks run in order until hitting a component boundary.
+ * @returns {Iterable<() => void>}
+ */
+ *#collect_on_destroy() {
+ for (const component of this.#traverse_components()) {
+ yield* component.#collect_ondestroy();
+ }
+ }
+
+ /**
+ * Performs a depth-first search of renderers, yielding the deepest components first, then additional components as we backtrack up the tree.
+ * @returns {Iterable}
+ */
+ *#traverse_components() {
+ for (const child of this.#out) {
+ if (typeof child !== 'string') {
+ yield* child.#traverse_components();
+ }
+ }
+ if (this.#is_component_body) {
+ yield this;
+ }
+ }
+
+ /**
+ * @returns {Iterable<() => void>}
+ */
+ *#collect_ondestroy() {
+ if (this.#on_destroy) {
+ for (const fn of this.#on_destroy) {
+ yield fn;
+ }
+ }
+ for (const child of this.#out) {
+ if (child instanceof Renderer && !child.#is_component_body) {
+ yield* child.#collect_ondestroy();
+ }
+ }
+ }
+
+ /**
+ * Render a component. Throws if any of the children are performing asynchronous work.
+ *
+ * @template {Record} Props
+ * @param {Component} component
+ * @param {{ props?: Omit; context?: Map; idPrefix?: string }} options
+ * @returns {AccumulatedContent}
+ */
+ static #render(component, options) {
+ var previous_context = ssr_context;
+ try {
+ const renderer = Renderer.#open_render('sync', component, options);
+
+ const content = renderer.#collect_content();
+ return Renderer.#close_render(content, renderer);
+ } finally {
+ abort();
+ set_ssr_context(previous_context);
+ }
+ }
+
+ /**
+ * Render a component.
+ *
+ * @template {Record} Props
+ * @param {Component} component
+ * @param {{ props?: Omit; context?: Map; idPrefix?: string }} options
+ * @returns {Promise}
+ */
+ static async #render_async(component, options) {
+ var previous_context = ssr_context;
+ try {
+ const renderer = Renderer.#open_render('async', component, options);
+
+ const content = await renderer.#collect_content_async();
+ return Renderer.#close_render(content, renderer);
+ } finally {
+ abort();
+ set_ssr_context(previous_context);
+ }
+ }
+
+ /**
+ * Collect all of the code from the `out` array and return it as a string, or a promise resolving to a string.
+ * @param {AccumulatedContent} content
+ * @returns {AccumulatedContent}
+ */
+ #collect_content(content = { head: '', body: '' }) {
+ for (const item of this.#out) {
+ if (typeof item === 'string') {
+ content[this.type] += item;
+ } else if (item instanceof Renderer) {
+ item.#collect_content(content);
+ }
+ }
+
+ return content;
+ }
+
+ /**
+ * Collect all of the code from the `out` array and return it as a string.
+ * @param {AccumulatedContent} content
+ * @returns {Promise}
+ */
+ async #collect_content_async(content = { head: '', body: '' }) {
+ await this.promise;
+
+ // no danger to sequentially awaiting stuff in here; all of the work is already kicked off
+ for (const item of this.#out) {
+ if (typeof item === 'string') {
+ content[this.type] += item;
+ } else if (item instanceof Renderer) {
+ await item.#collect_content_async(content);
+ }
+ }
+
+ return content;
+ }
+
+ /**
+ * @template {Record} Props
+ * @param {'sync' | 'async'} mode
+ * @param {import('svelte').Component} component
+ * @param {{ props?: Omit; context?: Map; idPrefix?: string }} options
+ * @returns {Renderer}
+ */
+ static #open_render(mode, component, options) {
+ const renderer = new Renderer(
+ new SSRState(mode, options.idPrefix ? options.idPrefix + '-' : '')
+ );
+
+ renderer.push(BLOCK_OPEN);
+
+ if (options.context) {
+ push();
+ /** @type {SSRContext} */ (ssr_context).c = options.context;
+ /** @type {SSRContext} */ (ssr_context).r = renderer;
+ }
+
+ // @ts-expect-error
+ component(renderer, options.props ?? {});
+
+ if (options.context) {
+ pop();
+ }
+
+ renderer.push(BLOCK_CLOSE);
+
+ return renderer;
+ }
+
+ /**
+ * @param {AccumulatedContent} content
+ * @param {Renderer} renderer
+ */
+ static #close_render(content, renderer) {
+ for (const cleanup of renderer.#collect_on_destroy()) {
+ cleanup();
+ }
+
+ let head = content.head + renderer.global.get_title();
+ let body = content.body;
+
+ for (const { hash, code } of renderer.global.css) {
+ head += ``;
+ }
+
+ return {
+ head,
+ body
+ };
+ }
+}
+
+export class SSRState {
+ /** @readonly @type {'sync' | 'async'} */
+ mode;
+
+ /** @readonly @type {() => string} */
+ uid;
+
+ /** @readonly @type {Set<{ hash: string; code: string }>} */
+ css = new Set();
+
+ /** @type {{ path: number[], value: string }} */
+ #title = { path: [], value: '' };
+
+ /**
+ * @param {'sync' | 'async'} mode
+ * @param {string} [id_prefix]
+ */
+ constructor(mode, id_prefix = '') {
+ this.mode = mode;
+
+ let uid = 1;
+ this.uid = () => `${id_prefix}s${uid++}`;
+ }
+
+ get_title() {
+ return this.#title.value;
+ }
+
+ /**
+ * Performs a depth-first (lexicographic) comparison using the path. Rejects sets
+ * from earlier than or equal to the current value.
+ * @param {string} value
+ * @param {number[]} path
+ */
+ set_title(value, path) {
+ const current = this.#title.path;
+
+ let i = 0;
+ let l = Math.min(path.length, current.length);
+
+ // skip identical prefixes - [1, 2, 3, ...] === [1, 2, 3, ...]
+ while (i < l && path[i] === current[i]) i += 1;
+
+ if (path[i] === undefined) return;
+
+ // replace title if
+ // - incoming path is longer - [7, 8, 9] > [7, 8]
+ // - incoming path is later - [7, 8, 9] > [7, 8, 8]
+ if (current[i] === undefined || path[i] > current[i]) {
+ this.#title.path = path;
+ this.#title.value = value;
+ }
+ }
+}
diff --git a/packages/svelte/src/internal/server/renderer.test.ts b/packages/svelte/src/internal/server/renderer.test.ts
new file mode 100644
index 0000000000..8e9a377a5b
--- /dev/null
+++ b/packages/svelte/src/internal/server/renderer.test.ts
@@ -0,0 +1,357 @@
+import { afterAll, beforeAll, describe, expect, test } from 'vitest';
+import { Renderer, SSRState } from './renderer.js';
+import type { Component } from 'svelte';
+import { disable_async_mode_flag, enable_async_mode_flag } from '../flags/index.js';
+
+test('collects synchronous body content by default', () => {
+ const component = (renderer: Renderer) => {
+ renderer.push('a');
+ renderer.child(($$renderer) => {
+ $$renderer.push('b');
+ });
+ renderer.push('c');
+ };
+
+ const { head, body } = Renderer.render(component as unknown as Component);
+ expect(head).toBe('');
+ expect(body).toBe('abc');
+});
+
+test('child type switches content area (head vs body)', () => {
+ const component = (renderer: Renderer) => {
+ renderer.push('a');
+ renderer.head(($$renderer) => {
+ $$renderer.push('T ');
+ });
+ renderer.push('b');
+ };
+
+ const { head, body } = Renderer.render(component as unknown as Component);
+ expect(head).toBe('T ');
+ expect(body).toBe('ab');
+});
+
+test('child inherits parent type when not specified', () => {
+ const component = (renderer: Renderer) => {
+ renderer.head((renderer) => {
+ renderer.push(' | undefined;
+ let child_b: InstanceType | undefined;
+ let child_b_0: InstanceType | undefined;
+
+ root.child(($$renderer) => {
+ child_a = $$renderer;
+ $$renderer.push('A');
+ });
+ root.child(($$renderer) => {
+ child_b = $$renderer;
+ $$renderer.child(($$inner) => {
+ child_b_0 = $$inner;
+ $$inner.push('B0');
+ });
+ $$renderer.push('B1');
+ });
+
+ expect(child_a!.get_path()).toEqual([0]);
+ expect(child_b!.get_path()).toEqual([1]);
+ expect(child_b_0!.get_path()).toEqual([1, 0]);
+});
+
+test('creating an async child in a sync context throws', () => {
+ const component = (renderer: Renderer) => {
+ renderer.push('a');
+ renderer.child(async ($$renderer) => {
+ await Promise.resolve();
+ $$renderer.push('x');
+ });
+ };
+
+ expect(() => Renderer.render(component as unknown as Component).head).toThrow('await_invalid');
+ expect(() => Renderer.render(component as unknown as Component).html).toThrow('await_invalid');
+ expect(() => Renderer.render(component as unknown as Component).body).toThrow('await_invalid');
+});
+
+test('local state is shallow-copied to children', () => {
+ const root = new Renderer(new SSRState('sync'));
+ root.local.select_value = 'A';
+ let child: InstanceType | undefined;
+ root.child(($$renderer) => {
+ child = $$renderer;
+ });
+
+ expect(child!.local.select_value).toBe('A');
+ child!.local.select_value = 'B';
+ expect(root.local.select_value).toBe('A');
+});
+
+test('subsume replaces tree content and state from other', () => {
+ const a = new Renderer(new SSRState('async'));
+ a.type = 'head';
+
+ a.push('one two three one two three foo Async Title ';
+ });
+ });
+ };
+
+ const { head, body } = await Renderer.render(component as unknown as Component);
+ expect(body).toBe('');
+ expect(head).toBe('Async Title ');
+ });
+
+ test('push async functions can be mixed with child renderers', async () => {
+ const component = (renderer: Renderer) => {
+ renderer.push('start-');
+ renderer.push(async () => {
+ await Promise.resolve();
+ return 'async-';
+ });
+ renderer.child(($$renderer) => {
+ $$renderer.push('child-');
+ });
+ renderer.push('-end');
+ };
+
+ const { head, body } = await Renderer.render(component as unknown as Component);
+ expect(head).toBe('');
+ expect(body).toBe('start-async-child--end');
+ });
+
+ test('push async functions are not supported in sync context', () => {
+ const component = (renderer: Renderer) => {
+ renderer.push('a');
+ renderer.push(() => Promise.resolve('b'));
+ };
+
+ expect(() => Renderer.render(component as unknown as Component).body).toThrow('await_invalid');
+ expect(() => Renderer.render(component as unknown as Component).html).toThrow('await_invalid');
+ expect(() => Renderer.render(component as unknown as Component).head).toThrow('await_invalid');
+ });
+
+ test('on_destroy yields callbacks in the correct order', async () => {
+ const destroyed: string[] = [];
+ const component = (renderer: Renderer) => {
+ renderer.component((renderer) => {
+ renderer.on_destroy(() => destroyed.push('a'));
+ // children should not alter relative order
+ renderer.child(async (renderer) => {
+ await Promise.resolve();
+ renderer.on_destroy(() => destroyed.push('b'));
+ renderer.on_destroy(() => destroyed.push('b*'));
+ });
+ // but child components should
+ renderer.component((renderer) => {
+ renderer.on_destroy(() => destroyed.push('c'));
+ });
+ renderer.child((renderer) => {
+ renderer.on_destroy(() => destroyed.push('d'));
+ });
+ renderer.component((renderer) => {
+ renderer.on_destroy(() => destroyed.push('e'));
+ });
+ });
+ };
+
+ await Renderer.render(component as unknown as Component);
+ expect(destroyed).toEqual(['c', 'e', 'a', 'b', 'b*', 'd']);
+ });
+});
diff --git a/packages/svelte/src/internal/server/types.d.ts b/packages/svelte/src/internal/server/types.d.ts
index 6b0fc146c4..53cefabc69 100644
--- a/packages/svelte/src/internal/server/types.d.ts
+++ b/packages/svelte/src/internal/server/types.d.ts
@@ -1,17 +1,20 @@
-export interface Component {
+import type { Element } from './dev';
+import type { Renderer } from './renderer';
+
+export interface SSRContext {
/** parent */
- p: null | Component;
- /** context */
+ p: null | SSRContext;
+ /** component context */
c: null | Map;
- /** ondestroy */
- d: null | Array<() => void>;
- /**
- * dev mode only: the component function
- */
+ /** renderer */
+ r: null | Renderer;
+ /** dev mode only: the current component function */
function?: any;
+ /** dev mode only: the current element */
+ element?: Element;
}
-export interface RenderOutput {
+export interface SyncRenderOutput {
/** HTML that goes into the `` */
head: string;
/** @deprecated use `body` instead */
@@ -19,3 +22,5 @@ export interface RenderOutput {
/** HTML that goes somewhere into the `` */
body: string;
}
+
+export type RenderOutput = SyncRenderOutput & PromiseLike;
diff --git a/packages/svelte/src/internal/server/warnings.js b/packages/svelte/src/internal/server/warnings.js
new file mode 100644
index 0000000000..d8d9cd6d43
--- /dev/null
+++ b/packages/svelte/src/internal/server/warnings.js
@@ -0,0 +1,17 @@
+/* This file is generated by scripts/process-messages/index.js. Do not edit! */
+
+import { DEV } from 'esm-env';
+
+var bold = 'font-weight: bold';
+var normal = 'font-weight: normal';
+
+/**
+ * Attempted to use asynchronous rendering without `experimental.async` enabled
+ */
+export function experimental_async_ssr() {
+ if (DEV) {
+ console.warn(`%c[svelte] experimental_async_ssr\n%cAttempted to use asynchronous rendering without \`experimental.async\` enabled\nhttps://svelte.dev/e/experimental_async_ssr`, bold, normal);
+ } else {
+ console.warn(`https://svelte.dev/e/experimental_async_ssr`);
+ }
+}
\ No newline at end of file
diff --git a/packages/svelte/src/internal/shared/attributes.js b/packages/svelte/src/internal/shared/attributes.js
index c8758c1d4d..4ad550e8d6 100644
--- a/packages/svelte/src/internal/shared/attributes.js
+++ b/packages/svelte/src/internal/shared/attributes.js
@@ -22,6 +22,10 @@ const replacements = {
* @returns {string}
*/
export function attr(name, value, is_boolean = false) {
+ // attribute hidden for values other than "until-found" behaves like a boolean attribute
+ if (name === 'hidden' && value !== 'until-found') {
+ is_boolean = true;
+ }
if (value == null || (!value && is_boolean)) return '';
const normalized = (name in replacements && replacements[name].get(value)) || value;
const assignment = is_boolean ? '' : `="${escape_html(normalized, true)}"`;
diff --git a/packages/svelte/src/internal/shared/errors.js b/packages/svelte/src/internal/shared/errors.js
index 66685cb00b..6bcc35016a 100644
--- a/packages/svelte/src/internal/shared/errors.js
+++ b/packages/svelte/src/internal/shared/errors.js
@@ -2,22 +2,6 @@
import { DEV } from 'esm-env';
-/**
- * Cannot await outside a `` with a `pending` snippet
- * @returns {never}
- */
-export function await_outside_boundary() {
- if (DEV) {
- const error = new Error(`await_outside_boundary\nCannot await outside a \`\` with a \`pending\` snippet\nhttps://svelte.dev/e/await_outside_boundary`);
-
- error.name = 'Svelte error';
-
- throw error;
- } else {
- throw new Error(`https://svelte.dev/e/await_outside_boundary`);
- }
-}
-
/**
* Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
* @returns {never}
diff --git a/packages/svelte/src/legacy/legacy-server.js b/packages/svelte/src/legacy/legacy-server.js
index 60bd8c9fc6..b7d3e673bc 100644
--- a/packages/svelte/src/legacy/legacy-server.js
+++ b/packages/svelte/src/legacy/legacy-server.js
@@ -1,11 +1,15 @@
/** @import { SvelteComponent } from '../index.js' */
import { asClassComponent as as_class_component, createClassComponent } from './legacy-client.js';
import { render } from '../internal/server/index.js';
+import { async_mode_flag } from '../internal/flags/index.js';
+import * as w from '../internal/server/warnings.js';
// By having this as a separate entry point for server environments, we save the client bundle from having to include the server runtime
export { createClassComponent };
+/** @typedef {{ head: string, html: string, css: { code: string, map: null }}} LegacyRenderResult */
+
/**
* Takes a Svelte 5 component and returns a Svelte 4 compatible component constructor.
*
@@ -21,16 +25,58 @@ export { createClassComponent };
*/
export function asClassComponent(component) {
const component_constructor = as_class_component(component);
- /** @type {(props?: {}, opts?: { $$slots?: {}; context?: Map; }) => { html: any; css: { code: string; map: any; }; head: string; } } */
+ /** @type {(props?: {}, opts?: { $$slots?: {}; context?: Map; }) => LegacyRenderResult & PromiseLike } */
const _render = (props, { context } = {}) => {
// @ts-expect-error the typings are off, but this will work if the component is compiled in SSR mode
const result = render(component, { props, context });
- return {
- css: { code: '', map: null },
- head: result.head,
- html: result.body
- };
+
+ const munged = Object.defineProperties(
+ /** @type {LegacyRenderResult & PromiseLike} */ ({}),
+ {
+ css: {
+ value: { code: '', map: null }
+ },
+ head: {
+ get: () => result.head
+ },
+ html: {
+ get: () => result.body
+ },
+ then: {
+ /**
+ * this is not type-safe, but honestly it's the best I can do right now, and it's a straightforward function.
+ *
+ * @template TResult1
+ * @template [TResult2=never]
+ * @param { (value: LegacyRenderResult) => TResult1 } onfulfilled
+ * @param { (reason: unknown) => TResult2 } onrejected
+ */
+ value: (onfulfilled, onrejected) => {
+ if (!async_mode_flag) {
+ w.experimental_async_ssr();
+ const user_result = onfulfilled({
+ css: munged.css,
+ head: munged.head,
+ html: munged.html
+ });
+ return Promise.resolve(user_result);
+ }
+
+ return result.then((result) => {
+ return onfulfilled({
+ css: munged.css,
+ head: result.head,
+ html: result.body
+ });
+ }, onrejected);
+ }
+ }
+ }
+ );
+
+ return munged;
};
+
// @ts-expect-error this is present for SSR
component_constructor.render = _render;
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index f8c39253ac..f8a7e8d46d 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -154,7 +154,6 @@ const DOM_BOOLEAN_ATTRIBUTES = [
'default',
'disabled',
'formnovalidate',
- 'hidden',
'indeterminate',
'inert',
'ismap',
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 67c586790f..6d69b57447 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -4,5 +4,5 @@
* The current version, as set in package.json.
* @type {string}
*/
-export const VERSION = '5.38.6';
+export const VERSION = '5.39.8';
export const PUBLIC_VERSION = '5';
diff --git a/packages/svelte/tests/compiler-errors/samples/dynamic-element-binding-invalid/_config.js b/packages/svelte/tests/compiler-errors/samples/dynamic-element-binding-invalid/_config.js
index 4bb3edc27b..25b0827765 100644
--- a/packages/svelte/tests/compiler-errors/samples/dynamic-element-binding-invalid/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/dynamic-element-binding-invalid/_config.js
@@ -3,6 +3,6 @@ import { test } from '../../test';
export default test({
error: {
code: 'bind_invalid_target',
- message: '`bind:value` can only be used with