Merge branch 'silence-warnings' of https://github.com/dummdidumm/svelte into silence-warnings

CHANGELOG.md

@@ -2,18 +2,19 @@
 
 ## Unreleased
 
-* Expose `svelte/ssr` which exported lifecycle methods as noop ([#6416](https://github.com/sveltejs/svelte/pull/6416))
-* Add `trusted` event modifier ([#6137](https://github.com/sveltejs/svelte/issues/6137))
-* Add `varsReport` compiler option ([#6192](https://github.com/sveltejs/svelte/pull/6192))
+* Expose `svelte/ssr` which exports lifecycle methods as no-ops ([#6416](https://github.com/sveltejs/svelte/pull/6416))
+* Add `|trusted` event modifier ([#6137](https://github.com/sveltejs/svelte/issues/6137))
+* Add `varsReport` compiler option to include all variables reference in the component in the `variables` report ([#6192](https://github.com/sveltejs/svelte/pull/6192))
 * Throw compiler error when passing empty directive names ([#6299](https://github.com/sveltejs/svelte/issues/6299))
-* Update `periscopic` to allow for export of anonymous function or class ([#3275](https://github.com/sveltejs/svelte/issues/3275))
+* Throw proper error for `export default function() {}` and `export default class {}` rather than crashing the compiler ([#3275](https://github.com/sveltejs/svelte/issues/3275))
+* Fix ordering of elements in keyed `{#each}` ([#6445](https://github.com/sveltejs/svelte/pull/6445))
 * Fix `preserveComments` in SSR mode ([#4730](https://github.com/sveltejs/svelte/issues/4730))
 * Fix compiler error when using `:where()` inside `:global()` ([#6434](https://github.com/sveltejs/svelte/issues/6434))
 * Fix erroneous `unknown prop` warning when using slot on a component ([#6065](https://github.com/sveltejs/svelte/pull/6065))
-* Fix :global() with pseudo element should be considered as global ([#6470](https://github.com/sveltejs/svelte/pull/6470))
-* New a11y warning `a11y-mouse-events-have-key-events` which checks that `mouseover`/`mouseout` are accompanied by `focus`/`blur` event handlers ([#5938](https://github.com/sveltejs/svelte/pull/5938))
-* Remove deprecated `a11y-no-onchange warning` ([#6457](https://github.com/sveltejs/svelte/issues/6457))
-* Remove `a11y-media-has-caption` from `audio` elements ([#6054](https://github.com/sveltejs/svelte/issues/6054))
+* Fix `:global()` with pseudo element not being seen as global ([#6470](https://github.com/sveltejs/svelte/pull/6470))
+* Add a11y warning `a11y-mouse-events-have-key-events` which checks that `mouseover`/`mouseout` are accompanied by `focus`/`blur` event handlers ([#5938](https://github.com/sveltejs/svelte/pull/5938))
+* Remove deprecated a11y warning `a11y-no-onchange warning` ([#6457](https://github.com/sveltejs/svelte/issues/6457))
+* Stop checking `a11y-media-has-caption` a11y warning on `<audio>` elements ([#6054](https://github.com/sveltejs/svelte/issues/6054))
 * Make it possible to silence more warnings ([#5954](https://github.com/sveltejs/svelte/issues/5954))
 
 ## 3.38.3

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

@@ -24,7 +24,7 @@ All three sections — script, styles and markup — are optional.
 
 A `<script>` block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. There are four additional rules:
 
-##### 1. `export` creates a component prop
+#### 1. `export` creates a component prop
 
 ---
 
@@ -87,7 +87,7 @@ You can use reserved words as prop names.
 </script>
 ```
 
-##### 2. Assignments are 'reactive'
+#### 2. Assignments are 'reactive'
 
 ---
 
@@ -109,7 +109,7 @@ Because Svelte's reactivity is based on assignments, using array methods like `.
 </script>
 ```
 
-##### 3. `$:` marks a statement as reactive
+#### 3. `$:` marks a statement as reactive
 
 ---
 
@@ -171,7 +171,7 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve
 </script>
 ```
 
-##### 4. Prefix stores with `$` to access their values
+#### 4. Prefix stores with `$` to access their values
 
 ---
 

site/content/docs/04-compile-time.md

@@ -44,8 +44,8 @@ The following options can be passed to the compiler. None are required:
 | `filename` | string | `null`
 | `name` | string | `"Component"`
 | `format` | `"esm"` or `"cjs"` | `"esm"`
-| `generate` | `"dom"` or `"ssr" or false` | `"dom"`
-| `varsReport` | `"strict"` or `"full" or false` | `"strict"`
+| `generate` | `"dom"` or `"ssr"` or `false` | `"dom"`
+| `varsReport` | `"strict"` or `"full"` or `false` | `"strict"`
 | `dev` | boolean | `false`
 | `immutable` | boolean | `false`
 | `hydratable` | boolean | `false`

site/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	let number = 0;
+</script>
+
+<div>
+	The number is:
+	<span style="display: inline-block" in:fly={{ y: -20 }}>
+		{number}
+	</span>
+</div>
+<br />
+<button
+	on:click={() => {
+		number += 1;
+	}}>
+	Increment
+</button>

site/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	let number = 0;
+</script>
+
+<div>
+	The number is:
+	{#key number}
+		<span style="display: inline-block" in:fly={{ y: -20 }}>
+			{number}
+		</span>
+	{/key}
+</div>
+<br />
+<button
+	on:click={() => {
+		number += 1;
+	}}>
+	Increment
+</button>

site/content/tutorial/10-transitions/09-key-blocks/text.md

@@ -0,0 +1,16 @@
+---
+title: Key blocks
+---
+
+Key blocks destroy and recreate their contents when the value of an expression changes.
+
+```html
+{#key value}
+	<div transition:fade>{value}</div>
+{/key}
+```
+
+This is useful if you want an element to play its transition whenever a value changes instead of only when the element enters or leaves the DOM.
+
+Wrap the `<span>` element in a key block depending on `number`. This will make the
+animation play whenever you press the increment button.

site/src/routes/docs/index.svelte

@@ -1,6 +1,23 @@
 <script context="module">
+	const title_replacements = {
+		'1_export_creates_a_component_prop': 'props',
+		'2_Assignments_are_reactive': 'reactive assignments',
+		'3_$_marks_a_statement_as_reactive': 'reactive statements ($:)',
+		'4_Prefix_stores_with_$_to_access_their_values': 'accessing stores ($)'
+	};
+
 	export async function preload() {
 		const sections = await this.fetch(`docs.json`).then(r => r.json());
+		for (const section of sections) {
+			for (const subsection of section.subsections) {
+				const { slug } = subsection;
+				// show abbreviated title in the table of contents
+				if (slug in title_replacements) {
+					subsection.title = title_replacements[slug];
+				}
+			}
+		}
+
 		return { sections };
 	}
 </script>

src/runtime/internal/dom.ts

@@ -34,54 +34,54 @@ function upper_bound(low: number, high: number, key: (index: number) => number,
 function init_hydrate(target: NodeEx) {
 	if (target.hydrate_init) return;
 	target.hydrate_init = true;
-	
+
 	type NodeEx2 = NodeEx & {claim_order: number};
-	
+
 	// We know that all children have claim_order values since the unclaimed have been detached
 	const children = target.childNodes as NodeListOf<NodeEx2>;
-	
-	/* 
+
+	/*
 	* Reorder claimed children optimally.
 	* We can reorder claimed children optimally by finding the longest subsequence of
 	* nodes that are already claimed in order and only moving the rest. The longest
 	* subsequence subsequence of nodes that are claimed in order can be found by
 	* computing the longest increasing subsequence of .claim_order values.
-	* 
+	*
 	* This algorithm is optimal in generating the least amount of reorder operations
 	* possible.
-	* 
+	*
 	* Proof:
 	* We know that, given a set of reordering operations, the nodes that do not move
 	* always form an increasing subsequence, since they do not move among each other
 	* meaning that they must be already ordered among each other. Thus, the maximal
 	* set of nodes that do not move form a longest increasing subsequence.
 	*/
-	
+
 	// Compute longest increasing subsequence
 	// m: subsequence length j => index k of smallest value that ends an increasing subsequence of length j
 	const m = new Int32Array(children.length + 1);
 	// Predecessor indices + 1
 	const p = new Int32Array(children.length);
-	
+
 	m[0] = -1;
 	let longest = 0;
 	for (let i = 0; i < children.length; i++) {
 		const current = children[i].claim_order;
 		// Find the largest subsequence length such that it ends in a value less than our current value
-		
+
 		// upper_bound returns first greater value, so we subtract one
 		const seqLen = upper_bound(1, longest + 1, idx => children[m[idx]].claim_order, current) - 1;
-		
+
 		p[i] = m[seqLen] + 1;
-		
+
 		const newLen = seqLen + 1;
-		
+
 		// We can guarantee that current is the smallest value. Otherwise, we would have generated a longer sequence.
 		m[newLen] = i;
-		
+
 		longest = Math.max(newLen, longest);
 	}
-	
+
 	// The longest increasing subsequence of nodes (initially reversed)
 	const lis: NodeEx2[] = [];
 	// The rest of the nodes, nodes that will be moved
@@ -98,10 +98,10 @@ function init_hydrate(target: NodeEx) {
 		toMove.push(children[last]);
 	}
 	lis.reverse();
-	
+
 	// We sort the nodes being moved to guarantee that their insertion order matches the claim order
 	toMove.sort((a, b) => a.claim_order - b.claim_order);
-	
+
 	// Finally, we move the nodes
 	for (let i = 0, j = 0; i < toMove.length; i++) {
 		while (j < lis.length && toMove[i].claim_order >= lis[j].claim_order) {
@@ -115,7 +115,7 @@ function init_hydrate(target: NodeEx) {
 export function append(target: NodeEx, node: NodeEx) {
 	if (is_hydrating) {
 		init_hydrate(target);
-		
+
 		if ((target.actual_end_child === undefined) || ((target.actual_end_child !== null) && (target.actual_end_child.parentElement !== target))) {
 			target.actual_end_child = target.firstChild;
 		}
@@ -132,7 +132,7 @@ export function append(target: NodeEx, node: NodeEx) {
 export function insert(target: NodeEx, node: NodeEx, anchor?: NodeEx) {
 	if (is_hydrating && !anchor) {
 		append(target, node);
-	} else if (node.parentNode !== target || (anchor && node.nextSibling !== anchor)) {
+	} else if (node.parentNode !== target || node.nextSibling != anchor) {
 		target.insertBefore(node, anchor || null);
 	}
 }
@@ -309,12 +309,12 @@ function claim_node<R extends ChildNodeEx>(nodes: ChildNodeArray, predicate: (no
 	if (nodes.claim_info === undefined) {
 		nodes.claim_info = {last_index: 0, total_claimed: 0};
 	}
-	
+
 	const resultNode = (() => {
 		// We first try to find an element after the previous one
 		for (let i = nodes.claim_info.last_index; i < nodes.length; i++) {
 			const node = nodes[i];
-			
+
 			if (predicate(node)) {
 				processNode(node);
 
@@ -325,13 +325,13 @@ function claim_node<R extends ChildNodeEx>(nodes: ChildNodeArray, predicate: (no
 				return node;
 			}
 		}
-		
-		
+
+
 		// Otherwise, we try to find one before
 		// We iterate in reverse so that we don't go too far back
 		for (let i = nodes.claim_info.last_index - 1; i >= 0; i--) {
 			const node = nodes[i];
-			
+
 			if (predicate(node)) {
 				processNode(node);
 
@@ -345,11 +345,11 @@ function claim_node<R extends ChildNodeEx>(nodes: ChildNodeArray, predicate: (no
 				return node;
 			}
 		}
-		
+
 		// If we can't find any matching node, we create a new one
 		return createNode();
 	})();
-	
+
 	resultNode.claim_order = nodes.claim_info.total_claimed;
 	nodes.claim_info.total_claimed += 1;
 	return resultNode;

test/runtime/samples/each-block-keyed-changed/_config.js

@@ -0,0 +1,13 @@
+export default {
+	props: {
+		titles: [{ name: 'a' }, { name: 'b' }, { name: 'c' }]
+	},
+
+	html: '<div class="container"><p>a</p><p>b</p><p>c</p></div>',
+
+	test({ assert, component, target }) {
+		component.titles = [{ name: 'b' }, { name: 'c' }, { name: 'a' }];
+
+		assert.htmlEqual(target.innerHTML, '<div class="container"><p>b</p><p>c</p><p>a</p></div>');
+	}
+};

test/runtime/samples/each-block-keyed-changed/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	export let titles;
+</script>
+<div class="container">
+	{#each titles as title (title.name)}
+		<p>{title.name}</p>
+	{/each}
+</div>