Merge branch 'master' into handle-list-of-nodes

Author: ngtr6788

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,3 +1,7 @@
+# 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.
+
 ### Before submitting the PR, please make sure you do the following
 - [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
 - [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Svelte changelog
 
+## Unreleased
+
+* Handle `width`/`height` attributes when spreading ([#6752](https://github.com/sveltejs/svelte/issues/6752))
+* Add support for resize observer bindings (`<div bind:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize>`) ([#8022](https://github.com/sveltejs/svelte/pull/8022))
+* Update interpolated style directive properly when using spread ([#8438](https://github.com/sveltejs/svelte/issues/8438))
+* Remove style directive property when value is `undefined` ([#8462](https://github.com/sveltejs/svelte/issues/8462))
+* Ensure version is typed as `string` instead of the literal `__VERSION__` ([#8498](https://github.com/sveltejs/svelte/issues/8498))
+
 ## 3.58.0
 
 * Add `bind:innerText` for `contenteditable` elements ([#3311](https://github.com/sveltejs/svelte/issues/3311))

CONTRIBUTING.md

@@ -62,6 +62,8 @@ When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose)
 
 ## Pull requests
 
+> HEADS UP: 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.
+
 ### Proposing a change
 
 If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with [feature template](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml).

elements/index.d.ts

@@ -546,6 +546,11 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	 */
 	'bind:innerText'?: string | undefined | null;
 
+	readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null;
+	readonly 'bind:contentBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
+	readonly 'bind:borderBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
+	readonly 'bind:devicePixelContentBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
+
 	// SvelteKit
 	'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
 	'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
@@ -1073,11 +1078,17 @@ export interface SvelteMediaTimeRange {
 	end: number;
 }
 
+export interface SvelteDocumentAttributes extends HTMLAttributes<Document> {
+	readonly 'bind:fullscreenElement'?: Document['fullscreenElement'] | undefined | null;
+	readonly 'bind:visibilityState'?: Document['visibilityState'] | undefined | null;
+}
+
 export interface SvelteWindowAttributes extends HTMLAttributes<Window> {
 	readonly 'bind:innerWidth'?: Window['innerWidth'] | undefined | null;
 	readonly 'bind:innerHeight'?: Window['innerHeight'] | undefined | null;
 	readonly 'bind:outerWidth'?: Window['outerWidth'] | undefined | null;
 	readonly 'bind:outerHeight'?: Window['outerHeight'] | undefined | null;
+	readonly 'bind:devicePixelRatio'?: Window['devicePixelRatio'] | undefined | null;
 	'bind:scrollX'?: Window['scrollX'] | undefined | null;
 	'bind:scrollY'?: Window['scrollY'] | undefined | null;
 	readonly 'bind:online'?: Window['navigator']['onLine'] | undefined | null;
@@ -1586,7 +1597,7 @@ export interface SvelteHTMLElements {
 
 	// Svelte specific
 	'svelte:window': SvelteWindowAttributes;
-	'svelte:document': HTMLAttributes<Document>;
+	'svelte:document': SvelteDocumentAttributes;
 	'svelte:body': HTMLAttributes<HTMLElement>;
 	'svelte:fragment': { slot?: string };
 	'svelte:options': { [name: string]: any };

package-lock.json

@@ -120,7 +120,7 @@
   "homepage": "https://svelte.dev",
   "devDependencies": {
     "@ampproject/remapping": "^0.3.0",
-    "@jridgewell/sourcemap-codec": "^1.4.14",
+    "@jridgewell/sourcemap-codec": "^1.4.15",
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",

package.json

@@ -42,7 +42,7 @@ Svelte uses the `export` keyword to mark a variable declaration as a *property*
 
 ---
 
-You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that whenever a prop is removed by the consumer, its value is set to `undefined` rather than the initial value.
+You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that if the values of props are subsequently updated, then any prop whose value is not specified will be set to `undefined` (rather than its initial value).
 
 In development mode (see the [compiler options](/docs#compile-time-svelte-compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
 
@@ -286,7 +286,7 @@ You cannot `export default`, since the default export is the component itself.
 <script context="module">
 	let totalComponents = 0;
 
-	// this allows an importer to do e.g.
+	// the export keyword allows this function to imported with e.g.
 	// `import Example, { alertTotal } from './Example.svelte'`
 	export function alertTotal() {
 		alert(totalComponents);

site/content/docs/02-component-format.md

@@ -823,6 +823,8 @@ Inputs that work together can use `bind:group`.
 <input type="checkbox" bind:group={fillings} value="Guac (extra)">
 ```
 
+> `bind:group` only works if the inputs are in the same Svelte component.
+
 #### bind:this
 
 ```sv
@@ -1742,6 +1744,7 @@ You can also bind to the following properties:
 * `scrollX`
 * `scrollY`
 * `online` — an alias for `window.navigator.onLine`
+* `devicePixelRatio`
 
 All except `scrollX` and `scrollY` are readonly.
 
@@ -1756,6 +1759,9 @@ All except `scrollX` and `scrollY` are readonly.
 ```sv
 <svelte:document on:event={handler}/>
 ```
+```sv
+<svelte:document bind:prop={value}/>
+```
 
 ---
 
@@ -1770,6 +1776,15 @@ As with `<svelte:window>`, this element may only appear the top level of your co
 />
 ```
 
+---
+
+You can also bind to the following properties:
+
+* `fullscreenElement`
+* `visibilityState`
+
+All are readonly.
+
 ### `<svelte:body>`
 
 ```sv

site/content/docs/03-template-syntax.md

@@ -25,7 +25,7 @@ import TemplateScope from './nodes/shared/TemplateScope';
 import fuzzymatch from '../utils/fuzzymatch';
 import get_object from './utils/get_object';
 import Slot from './nodes/Slot';
-import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression } from 'estree';
+import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression, Pattern, Expression } from 'estree';
 import add_to_set from './utils/add_to_set';
 import check_graph_for_cycles from './utils/check_graph_for_cycles';
 import { print, b, x } from 'code-red';
@@ -1034,7 +1034,7 @@ export default class Component {
 						const subscriptions = [];
 						const props = [];
 
-						function add_new_props(exported, local, default_value) {
+						function add_new_props(exported: Identifier, local: Pattern, default_value: Expression) {
 							props.push({
 								type: 'Property',
 								method: false,
@@ -1064,7 +1064,7 @@ export default class Component {
 						for (let index = 0; index < node.declarations.length; index++) {
 							const declarator = node.declarations[index];
 							if (declarator.id.type !== 'Identifier') {
-								function get_new_name(local) {
+								function get_new_name(local: Identifier): Identifier {
 									const variable = component.var_lookup.get(local.name);
 									if (variable.subscribable) {
 										subscriptions.push(get_subscriptions(variable));
@@ -1078,7 +1078,7 @@ export default class Component {
 									return local;
 								}
 
-								function rename_identifiers(param: Node) {
+								function rename_identifiers(param: Pattern) {
 									switch (param.type) {
 										case 'ObjectPattern': {
 											const handle_prop = (prop: Property | RestElement) => {
@@ -1087,15 +1087,15 @@ export default class Component {
 												} else if (prop.value.type === 'Identifier') {
 													prop.value = get_new_name(prop.value);
 												} else {
-													rename_identifiers(prop.value);
+													rename_identifiers(prop.value as Pattern);
 												}
 											};
 
 											param.properties.forEach(handle_prop);
 											break;
 										}
 										case 'ArrayPattern': {
-											const handle_element = (element: Node, index: number, array: Node[]) => {
+											const handle_element = (element: Pattern | null, index: number, array: Array<Pattern | null>) => {
 												if (element) {
 													if (element.type === 'Identifier') {
 														array[index] = get_new_name(element);
@@ -1110,7 +1110,11 @@ export default class Component {
 										}
 
 										case 'RestElement':
-											param.argument = get_new_name(param.argument);
+											if (param.argument.type === 'Identifier') {
+												param.argument = get_new_name(param.argument);
+											} else {
+												rename_identifiers(param.argument);
+											}
 											break;
 
 										case 'AssignmentPattern':

src/compiler/compile/Component.ts

@@ -220,7 +220,7 @@ export default {
 	},
 	invalid_rest_eachblock_binding: (rest_element_name: string) => ({
 		code: 'invalid-rest-eachblock-binding',
-		message: `...${rest_element_name} operator will create a new object and binding propagation with original object will not work`
+		message: `The rest operator (...) will create a new object and binding '${rest_element_name}' with the original object will not work`
 	}),
 	avoid_mouse_events_on_document: {
 		code: 'avoid-mouse-events-on-document',