docs: note more breaking changes

Author: dummdidumm

packages/svelte/tests/README.md

@@ -13,24 +13,13 @@ This repo tries to migrate as many tests from the currente Svelte project over t
 ## Breaking changes
 
 - Order of list insertions has changed: It's now back to front because that's faster
-- Directives are not applied in order for all directives anymore, see `apply-directives-in-order-2` for an example
 - Slight timing differences mean that things may fire less in some cases (behavior should be unaffected though) - see `component-binding-each-remount-unkeyed` for an example
 - It's currently possible to create infinite loops with `$:` invoking each other
 - Fallback value is now set on all `undefined` values, not just on the first one
-- whitespace handling is now different: surrounding space is always trimmed, space within on text nodes is kept as-is, unless whitespace only, in which case it's trimmed to one whitespace
-- assignment to `@const` destructured parts is no longer allowed (see change to `const-tag-each-destructure-computed-props` / `const-tag-each-destructure-computed-in-computed`). This was an oversight that this was ever allowed
-- the CSS hash no longer comes last (can be first or inbetween) (not really breaking, unless you have very very weird css selectors https://stackoverflow.com/questions/15670631/does-the-order-of-classes-listed-on-an-item-affect-the-css)
-- The `css` compiler option no longer exists. CSS will always be outputted, and will never be inlined into the JS
 - CSS is no longer minified. Unused styles are instead commented out
 - `:global(...)` compound selectors (e.g. `.foo:global(.bar)` or `:global(.foo).bar`) are no longer permitted. These are nonsensical and don't do anything useful in Svelte 4 — better to just get rid of them
-- `beforeUpdate` no longer runs twice on initial render if it modifies a variable referenced in the template
 - transitions: when one element fades out and a new one (which is on the same element but another instance of it) fades in at the same time, the new one is now below the old one (was above before)
 - transitions: now wait one tick before they start playing to align with web animations API
-- `bind:clientWidth/clientHeight/offsetWidth/offsetHeight` now use mutation observers intead of iframes to measure stuff
-- APIs for instantiating/rendering components have changed. Instead of `new App(...)`, it's `mount(App)`, and instead of `App.render(...)` it's `render(App)`
-- unlike `App.render(...)`, `render(App, ...)` does not emit CSS
-- If you have a `contenteditable` node with a corresponding binding _and_ a reactive value inside it (example: `<div contenteditable=true bind:textContent>count is {count}</div>`) then the value inside the contenteditable will not be updated by updates to `count` because the binding takes full control over the content immediately and it should only be updated through it.
-- `legacy` option to generate IE10/11 compatible code was removed
 
 ## TODOs
 

sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md

@@ -29,3 +29,45 @@ import App from './App.svelte';
 - const { html, head } = App.render({ message: 'hello' });
 + const { html, head } = render(App, { props: { message: 'hello' } });
 ```
+
+`render` also no longer returns CSS; it should be served separately from a CSS file.
+
+## Whitespace handling changed
+
+Previously, Svelte employed a very complicated algorithm to determine if whitespace should be kept or not. Svelte 5 simplifies this which makes it easier to reason about as a developer. The rules are:
+
+- Whitespace between nodes is collapsed to one whitespace
+- Whitespace at the start and end of a tag is removed completely
+- Certain exceptions apply such as keeping whitespace inside `pre` tags
+
+As before, you can disable whitespace trimming by setting the `preserveWhitespace` option in your compiler settings or on a per-component basis in `<svelte:options>`.
+
+## More recent browser required
+
+Svelte now use Mutation Observers intead of IFrames to measure dimensions for `bind:clientWidth/clientHeight/offsetWidth/offsetHeight`. It also no longer listens to the `change` event on range inputs. Lastly, the `legacy` option was removed (or rather, replaced with a different set of settings).
+
+## Changes to compiler options
+
+- The `false`/`true` (already deprecated previously) and the `"none"` values were removed as valid values from the `css` option
+- The `legacy` option was repurposed
+- The `hydratable` option has been removed. Svelte components are always hydratable now
+- The `tag` option was removed. Use `<svelte:options customElement="tag-name" />` inside the component instead
+- The `loopGuardTimeout`, `format`, `sveltePath`, `errorMode` and `varsReport` options were removed
+
+## Other breaking changes
+
+### Stricter `@const` assignment validation
+
+Assignments to destructured parts of a `@const` declaration are no longer allowed. It was an oversight that this was ever allowed.
+
+### CSS hash position no longer deterministic
+
+Previously Svelte would always insert the CSS hash last. This is no longer guaranteed in Svelte 5. This is only breaking if you [have very weird css selectors](https://stackoverflow.com/questions/15670631/does-the-order-of-classes-listed-on-an-item-affect-the-css).
+
+### beforeUpdate change
+
+`beforeUpdate` no longer runs twice on initial render if it modifies a variable referenced in the template.
+
+### `contenteditable` behavior change
+
+If you have a `contenteditable` node with a corresponding binding _and_ a reactive value inside it (example: `<div contenteditable=true bind:textContent>count is {count}</div>`), then the value inside the contenteditable will not be updated by updates to `count` because the binding takes full control over the content immediately and it should only be updated through it.