Merge remote-tracking branch 'origin/version-4' into sites

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 # HEADS UP: BIG RESTRUCTURING UNDERWAY
 
-The Svelte repo is currently in the process of heavy restructuring for Svelte 4. After that, work on Svelte 5 will likely change a lot on the compiler aswell. For that reason, please don't open PRs that are large in scope, touch more than a couple of files etc. In other words, bug fixes are fine, but feature PRs will likely not be merged.
+The Svelte repo is currently in the process of heavy restructuring for Svelte 4. After that, work on Svelte 5 will likely change a lot in the compiler as well. For that reason, please don't open PRs that are large in scope, touch more than a couple of files, etc. In other words, bug fixes are fine, but feature PRs will likely not be merged.
 
 ### Before submitting the PR, please make sure you do the following
 
@@ -9,6 +9,6 @@ The Svelte repo is currently in the process of heavy restructuring for Svelte 4.
 - [ ] This message body should clearly illustrate what problems it solves.
 - [ ] Ideally, include a test that fails without this PR but passes with it.
 
-### Tests
+### Tests and linting
 
-- [ ] Run the tests with `npm test` and lint the project with `npm run lint`
+- [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint`

packages/svelte/CHANGELOG.md

@@ -1,38 +1,48 @@
-# Svelte changelog
+# svelte
-
+
-## Unreleased (4.0)
+## 4.0.0-next.0
-
+
-- **breaking** Minimum supported Node version is now Node 16 ([#8566](https://github.com/sveltejs/svelte/pull/8566))
+### Major Changes
-- **breaking** Minimum supported webpack version is now webpack 5 ([#8515](https://github.com/sveltejs/svelte/pull/8515))
+
-- **breaking** Bundlers must specify the `browser` condition when building a frontend bundle for the browser ([#8516](https://github.com/sveltejs/svelte/pull/8516))
+- breaking: Minimum supported Node version is now Node 16 ([#8566](https://github.com/sveltejs/svelte/pull/8566))
-- **breaking** Minimum supported vite-plugin-svelte version is now 2.1.1. SvelteKit users can upgrade to 1.15.9 or newer to ensure a compatible version ([#8516](https://github.com/sveltejs/svelte/pull/8516))
+- breaking: Minimum supported webpack version is now webpack 5 ([#8515](https://github.com/sveltejs/svelte/pull/8515))
-- **breaking** Minimum supported TypeScript version is now TypeScript 5 (it will likely work with lower versions, but we make no guarantees about that) ([#8488](https://github.com/sveltejs/svelte/pull/8488))
+- breaking: Bundlers must specify the `browser` condition when building a frontend bundle for the browser ([#8516](https://github.com/sveltejs/svelte/pull/8516))
-- **breaking** Remove `svelte/register` hook, CJS runtime version and CJS compiler output ([#8613](https://github.com/sveltejs/svelte/pull/8613))
+- breaking: Minimum supported vite-plugin-svelte version is now 2.4.1. SvelteKit users can upgrade to 1.20.0 or newer to ensure a compatible version ([#8516](https://github.com/sveltejs/svelte/pull/8516))
-- **breaking** Stricter types for `createEventDispatcher` (see PR for migration instructions) ([#7224](https://github.com/sveltejs/svelte/pull/7224))
+- breaking: Minimum supported `rollup-plugin-svelte` version is now 7.1.5 ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))
-- **breaking** Stricter types for `Action` and `ActionReturn` (see PR for migration instructions) ([#7224](https://github.com/sveltejs/svelte/pull/7224))
+- breaking: Minimum supported `svelte-loader` is now 3.1.8 ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))
-- **breaking** Stricter types for `onMount` - now throws a type error when returning a function asynchronously to catch potential mistakes around callback functions (see PR for migration instructions) ([#8136](https://github.com/sveltejs/svelte/pull/8136))
+- breaking: Minimum supported TypeScript version is now TypeScript 5 (it will likely work with lower versions, but we make no guarantees about that) ([#8488](https://github.com/sveltejs/svelte/pull/8488))
-- **breaking** Overhaul and drastically improve creating custom elements with Svelte (see PR for list of changes and migration instructions) ([#8457](https://github.com/sveltejs/svelte/pull/8457))
+- breaking: Remove `svelte/register` hook, CJS runtime version and CJS compiler output ([#8613](https://github.com/sveltejs/svelte/pull/8613))
-- **breaking** Deprecate `SvelteComponentTyped`, use `SvelteComponent` instead ([#8512](https://github.com/sveltejs/svelte/pull/8512))
+- breaking: Stricter types for `createEventDispatcher` (see PR for migration instructions) ([#7224](https://github.com/sveltejs/svelte/pull/7224))
-- **breaking** Make transitions local by default to prevent confusion around page navigations ([#6686](https://github.com/sveltejs/svelte/issues/6686))
+- breaking: Stricter types for `Action` and `ActionReturn` (see PR for migration instructions) ([#7224](https://github.com/sveltejs/svelte/pull/7224))
-- **breaking** Error on falsy values instead of stores passed to `derived` ([#7947](https://github.com/sveltejs/svelte/pull/7947))
+- breaking: Stricter types for `onMount` - now throws a type error when returning a function asynchronously to catch potential mistakes around callback functions (see PR for migration instructions) ([#8136](https://github.com/sveltejs/svelte/pull/8136))
-- **breaking** Custom store implementers now need to pass an `update` function additionally to the `set` function ([#6750](https://github.com/sveltejs/svelte/pull/6750))
+- breaking: Overhaul and drastically improve creating custom elements with Svelte (see PR for list of changes and migration instructions) ([#8457](https://github.com/sveltejs/svelte/pull/8457))
-- **breaking** Do not expose default slot bindings to named slots and vice versa ([#6049](https://github.com/sveltejs/svelte/pull/6049))
+- breaking: Deprecate `SvelteComponentTyped` in favor of `SvelteComponent` ([#8512](https://github.com/sveltejs/svelte/pull/8512))
-- **breaking** Change order in which preprocessors are applied ([#8618](https://github.com/sveltejs/svelte/pull/8618))
+- breaking: Make transitions local by default to prevent confusion around page navigations ([#6686](https://github.com/sveltejs/svelte/issues/6686))
-- **breaking** The runtime now makes use of `classList.toggle(name, boolean)` which does not work in very old browsers ([#8629](https://github.com/sveltejs/svelte/pull/8629))
+- breaking: Error on falsy values instead of stores passed to `derived` ([#7947](https://github.com/sveltejs/svelte/pull/7947))
-- **breaking** apply `inert` to outroing elements ([#8627](https://github.com/sveltejs/svelte/pull/8627))
+- breaking: Custom store implementers now need to pass an `update` function additionally to the `set` function ([#6750](https://github.com/sveltejs/svelte/pull/6750))
+- breaking: Do not expose default slot bindings to named slots and vice versa ([#6049](https://github.com/sveltejs/svelte/pull/6049))
+- breaking: Change order in which preprocessors are applied ([#8618](https://github.com/sveltejs/svelte/pull/8618))
+- breaking: The runtime now makes use of `classList.toggle(name, boolean)` which does not work in very old browsers ([#8629](https://github.com/sveltejs/svelte/pull/8629))
+- breaking: apply `inert` to outroing elements ([#8627](https://github.com/sveltejs/svelte/pull/8627))
+
+### Minor Changes
+
 - Add a way to modify attributes for script/style preprocessors ([#8618](https://github.com/sveltejs/svelte/pull/8618))
 - Improve hydration speed by adding `data-svelte-h` attribute to detect unchanged HTML elements ([#7426](https://github.com/sveltejs/svelte/pull/7426))
 - Add `a11y no-noninteractive-element-interactions` rule ([#8391](https://github.com/sveltejs/svelte/pull/8391))
 - Add `a11y-no-static-element-interactions`rule ([#8251](https://github.com/sveltejs/svelte/pull/8251))
+- Allow `#each` to iterate over iterables like `Set`, `Map` etc ([#7425](https://github.com/sveltejs/svelte/issues/7425))
 - Improve duplicate key error for keyed `each` blocks ([#8411](https://github.com/sveltejs/svelte/pull/8411))
+- Warn about `:` in attributes and props to prevent ambiguity with Svelte directives ([#6823](https://github.com/sveltejs/svelte/issues/6823))
+
+### Patch Changes
+
 - Bind `null` option and input values consistently ([#8312](https://github.com/sveltejs/svelte/issues/8312))
 - Allow `$store` to be used with changing values including nullish values ([#7555](https://github.com/sveltejs/svelte/issues/7555))
 - Initialize stylesheet with `/* empty */` to enable setting CSP directive that also works in Safari ([#7800](https://github.com/sveltejs/svelte/pull/7800))
 - Treat slots as if they don't exist when using CSS adjacent and general sibling combinators ([#8284](https://github.com/sveltejs/svelte/issues/8284))
 - Fix transitions so that they don't require a `style-src 'unsafe-inline'` Content Security Policy (CSP) ([#6662](https://github.com/sveltejs/svelte/issues/6662)).
 - Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800))
-- Allow `#each` to iterate over iterables like `Set`, `Map` etc ([#7425](https://github.com/sveltejs/svelte/issues/7425))
-- Warn about `:` in attributes and props to prevent ambiguity with Svelte directives ([#6823](https://github.com/sveltejs/svelte/issues/6823))
 - Improve error message when trying to use `animate:` directives on inline components ([#8641](https://github.com/sveltejs/svelte/issues/8641))
 
 ## 3.59.1
@@ -2588,8 +2598,6 @@ Set `style.cssText` rather than `style` ([#44](https://github.com/sveltejs/svelt
 
 ## 1.0.1
 
-<<<<<<< HEAD
-
 - Preserve SVG namespace inside each blocks
 - Always use `setAttribute` with SVG elements
 
@@ -2637,65 +2645,7 @@ Set `style.cssText` rather than `style` ([#44](https://github.com/sveltejs/svelt
 
 ## 0.1.0
 
-- Breaking change – Svelte compiler now generates constructor functions rather than factories ([#2](https://github.com/sveltejs/svelte/issues/2))
+- Breaking change – Svelte compiler now generates constructor functions rather than factories ([#2](https://github.com/sveltejs/svelte/issues/2))
-- SVG support
-
-## 0.0.2
-
-- First release capable of building TodoMVC
-
-## 0.0.1
-
-- # Just squatting on the package name
-
-* Preserve SVG namespace inside each blocks
-* Always use `setAttribute` with SVG elements
-
-## 1.0.0
-
-- Generate AMD, CJS, IIFE and UMD builds
-- Correctly insert text nodes before anchors ([#31](https://github.com/sveltejs/svelte/pull/31))
-
-## 0.3.0
-
-- Fix bug where departing element would unset `ref` incorrectly ([#24](https://github.com/sveltejs/svelte/issues/24))
-- Basic template validation ([#6](https://github.com/sveltejs/svelte/issues/6))
-- Fire `onrender` hooks once component is in DOM ([#18](https://github.com/sveltejs/svelte/issues/18))
-- Only detach nodes when necessary to do so ([#26](https://github.com/sveltejs/svelte/issues/26))
-
-## 0.2.2
-
-- On second thoughts, don't transpile build. Was only really for Uglify's benefit, which is daft
-
-## 0.2.1
-
-- Transpile build
-
-## 0.2.0
-
-- Only generate UMD build, for now
-- Include dependencies in the build, treat as `devDependencies`
-- Faster initial render
-- Parent data overrides child defaults
-- Remove top-level text nodes on teardown
-- Handle `readUntil` errors in parser
-- Basic `<select>` binding
-- Handle missing data
-- Prevent infinite set/observe loops
-- Add `bind:foo` shorthand
-- `else` and `elseif` blocks
-- Hoist imports
-
-## 0.1.1
-
-- Support unquoted attributes
-- Handle entities in attributes
-- Inline nested components
-- `fire` and `on` methods
-
-## 0.1.0
-
-- Breaking change – Svelte compiler now generates constructor functions rather than factories ([#2](https://github.com/sveltejs/svelte/issues/2))
 - SVG support
 
 ## 0.0.2

packages/svelte/src/compiler/compile/render_dom/invalidate.js

@@ -91,7 +91,7 @@ export function invalidate(renderer, scope, node, names, main_execution_context
  * @param {import('./Renderer.js').default} renderer
  * @param {string} name
  * @param {any} [value]
- * @param {boolean} main_execution_context
+ * @param {boolean} [main_execution_context]
  * @returns {import('estree').Node}
  */
 export function renderer_invalidate(renderer, name, value, main_execution_context = false) {

packages/svelte/src/compiler/preprocess/index.js

@@ -329,7 +329,7 @@ async function process_markup(process, source) {
 /**
  * @param {string} source
  * @param {import('./public.js').PreprocessorGroup | import('./public.js').PreprocessorGroup[]} preprocessor
- * @param {{ filename?: string }} options
+ * @param {{ filename?: string }} [options]
  * @returns {Promise<import('./public.js').Processed>}
  */
 export default async function preprocess(source, preprocessor, options) {

packages/svelte/src/runtime/internal/Component.js

@@ -221,6 +221,10 @@ if (typeof HTMLElement === 'function') {
 									node.setAttribute('name', name);
 								}
 							},
+							/**
+							 * @param {HTMLElement} target
+							 * @param {HTMLElement} [anchor]
+							 */
 							m: function mount(target, anchor) {
 								insert(target, node, anchor);
 							},

packages/svelte/src/runtime/internal/dev.js

@@ -17,7 +17,7 @@ import { ensure_array_like } from './each.js';
 /**
  * @template T
  * @param {string} type
- * @param {T} detail
+ * @param {T} [detail]
  * @returns {void}
  */
 export function dispatch_dev(type, detail) {
@@ -47,7 +47,7 @@ export function append_hydration_dev(target, node) {
 /**
  * @param {Node} target
  * @param {Node} node
- * @param {Node} anchor
+ * @param {Node} [anchor]
  * @returns {void}
  */
 export function insert_dev(target, node, anchor) {
@@ -57,7 +57,7 @@ export function insert_dev(target, node, anchor) {
 
 /** @param {Node} target
  * @param {Node} node
- * @param {Node} anchor
+ * @param {Node} [anchor]
  * @returns {void}
  */
 export function insert_hydration_dev(target, node, anchor) {
@@ -109,10 +109,10 @@ export function detach_after_dev(before) {
  * @param {Node} node
  * @param {string} event
  * @param {EventListenerOrEventListenerObject} handler
- * @param {boolean | AddEventListenerOptions | EventListenerOptions} options
+ * @param {boolean | AddEventListenerOptions | EventListenerOptions} [options]
- * @param {boolean} has_prevent_default
+ * @param {boolean} [has_prevent_default]
- * @param {boolean} has_stop_propagation
+ * @param {boolean} [has_stop_propagation]
- * @param {boolean} has_stop_immediate_propagation
+ * @param {boolean} [has_stop_immediate_propagation]
  * @returns {() => void}
  */
 export function listen_dev(
@@ -140,7 +140,7 @@ export function listen_dev(
 /**
  * @param {Element} node
  * @param {string} attribute
- * @param {string} value
+ * @param {string} [value]
  * @returns {void}
  */
 export function attr_dev(node, attribute, value) {
@@ -152,7 +152,7 @@ export function attr_dev(node, attribute, value) {
 /**
  * @param {Element} node
  * @param {string} property
- * @param {any} value
+ * @param {any} [value]
  * @returns {void}
  */
 export function prop_dev(node, property, value) {
@@ -163,7 +163,7 @@ export function prop_dev(node, property, value) {
 /**
  * @param {HTMLElement} node
  * @param {string} property
- * @param {any} value
+ * @param {any} [value]
  * @returns {void}
  */
 export function dataset_dev(node, property, value) {

packages/svelte/src/runtime/internal/dom.js

@@ -1001,11 +1001,13 @@ export function toggle_class(element, name, toggle) {
  * @template T
  * @param {string} type
  * @param {T} [detail]
+ * @param {{ bubbles?: boolean, cancelable?: boolean }} [options]
  * @returns {CustomEvent<T>}
  */
 export function custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
 	/**
-	 * @type {CustomEvent<T>} */
+	 * @type {CustomEvent<T>}
+	 */
 	const e = document.createEvent('CustomEvent');
 	e.initCustomEvent(type, bubbles, cancelable, detail);
 	return e;

packages/svelte/src/runtime/internal/transitions.js

@@ -74,7 +74,8 @@ export function transition_in(block, local) {
 /**
  * @param {import('./private.js').Fragment} block
  * @param {0 | 1} local
- * @param {0 | 1} detach
+ * @param {0 | 1} [detach]
+ * @param {() => void} [callback]
  * @returns {void}
  */
 export function transition_out(block, local, detach, callback) {

packages/svelte/src/runtime/motion/tweened.js

@@ -57,7 +57,7 @@ export function tweened(value, defaults = {}) {
 	let target_value = value;
 	/**
 	 * @param {T} new_value
-	 * @param {import('./private.js').TweenedOptions<T>} opts
+	 * @param {import('./private.js').TweenedOptions<T>} [opts]
 	 */
 	function set(new_value, opts) {
 		if (value == null) {

packages/svelte/src/runtime/store/index.js

@@ -12,8 +12,8 @@ const subscriber_queue = [];
 /**
  * Creates a `Readable` store that allows reading by subscription.
  * @template T
- * @param {T} value initial value
+ * @param {T} [value] initial value
- * @param {import('./public.js').StartStopNotifier<T>} start
+ * @param {import('./public.js').StartStopNotifier<T>} [start]
  * @returns {import('./public.js').Readable<T>}
  */
 export function readable(value, start) {
@@ -25,8 +25,8 @@ export function readable(value, start) {
 /**
  * Create a `Writable` store that allows both updating and reading by subscription.
  * @template T
- * @param {T} value initial value
+ * @param {T} [value] initial value
- * @param {import('./public.js').StartStopNotifier<T>} start
+ * @param {import('./public.js').StartStopNotifier<T>} [start]
  * @returns {import('./public.js').Writable<T>}
  */
 export function writable(value, start = noop) {
@@ -56,6 +56,7 @@ export function writable(value, start = noop) {
 			}
 		}
 	}
+
 	/**
 	 * @param {import('./public.js').Updater<T>} fn
 	 * @returns {void}
@@ -63,9 +64,10 @@ export function writable(value, start = noop) {
 	function update(fn) {
 		set(fn(value));
 	}
+
 	/**
 	 * @param {import('./public.js').Subscriber<T>} run
-	 * @param {import('./private.js').Invalidator<T>} invalidate
+	 * @param {import('./private.js').Invalidator<T>} [invalidate]
 	 * @returns {import('./public.js').Unsubscriber}
 	 */
 	function subscribe(run, invalidate = noop) {
@@ -95,7 +97,7 @@ export function writable(value, start = noop) {
  * @template T
  * @overload
  * @param {S} stores - input stores
- * @param {(values: import('./public.js').StoresValues<S>, set: import('./public.js').Subscriber<T>, update: (fn: import('./public.js').Updater<T>) => void) => import('./public.js').Unsubscriber | void} fn - function callback that aggregates the values
+ * @param {(values: import('./public.js').StoresValues<S>, set: (value: T) => void, update: (fn: import('./public.js').Updater<T>) => void) => import('./public.js').Unsubscriber | void} fn - function callback that aggregates the values
  * @param {T} [initial_value] - initial value
  * @returns {import('./public.js').Readable<T>}
  */

packages/svelte/src/runtime/store/public.d.ts

@@ -14,7 +14,7 @@ export type Updater<T> = (value: T) => T;
  * This function is called when the first subscriber subscribes.
  *
  * @param {(value: T) => void} set Function that sets the value of the store.
- * @param {(value: Updater<T>) => void} set Function that sets the value of the store after passing the current value to the update function.
+ * @param {(value: Updater<T>) => void} update Function that sets the value of the store after passing the current value to the update function.
  * @returns {void | (() => void)} Optionally, a cleanup function that is called when the last remaining
  * subscriber unsubscribes.
  */