Merge branch 'master' of https://github.com/sveltejs/svelte into feature/preprocessor-sourcemaps

Author: milahu

.mocharc.js

@@ -1,15 +1,14 @@
 module.exports = {
 	file: [
-		'test/test.js'
+		'test/test.ts'
+	],
+	require: [
+		'sucrase/register'
 	]
 };
 
 // add coverage options when running 'npx c8 mocha'
 if (process.env.NODE_V8_COVERAGE) {
-	Object.assign(module.exports, {
-		fullTrace: true,
-		require: [
-			'source-map-support/register'
-		]
-	});
+	module.exports.fullTrace = true;
+	module.exports.require.push('source-map-support/register');
 }

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Svelte changelog
 
+## 3.29.0
+
+* Support `<slot slot="...">` ([#2079](https://github.com/sveltejs/svelte/issues/2079))
+* Fix unmounting components with a bidirectional transition with a delay ([#4954](https://github.com/sveltejs/svelte/issues/4954))
+* Add types to `get` function in `svelte/store` ([#5269](https://github.com/sveltejs/svelte/pull/5269))
+* Add a warning when a component looks like it's trying to use another component without beginning with a capital letter ([#5302](https://github.com/sveltejs/svelte/pull/5302))
+* Add `EventSource` to known globals ([#5463](https://github.com/sveltejs/svelte/issues/5463))
+* Fix compiler exception with `~`/`+` combinators and `{...spread}` attributes ([#5465](https://github.com/sveltejs/svelte/issues/5465))
+
+## 3.28.0
+
+* Add `{#key}` block for keying arbitrary content on an expression ([#1469](https://github.com/sveltejs/svelte/issues/1469))
+
 ## 3.27.0
 
 * Add `|nonpassive` event modifier, explicitly passing `passive: false` ([#2068](https://github.com/sveltejs/svelte/issues/2068))

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.27.0",
+  "version": "3.29.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

package.json

@@ -342,6 +342,33 @@ If you don't care about the pending state, you can also omit the initial block.
 {/await}
 ```
 
+### {#key ...}
+
+```sv
+{#key expression}...{/key}
+```
+
+Key blocks destroy and recreate their contents when the value of an expression changes.
+
+---
+
+This is useful if you want an element to play its transition whenever a value changes.
+
+```sv
+{#key value}
+	<div transition:fade>{value}</div>
+{/key}
+```
+
+---
+
+When used around components, this will cause them to be reinstantiated and reinitialised.
+
+```sv
+{#key value}
+	<Component />
+{/key}
+```
 
 ### {@html ...}
 

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

@@ -664,11 +664,13 @@ export default class Component {
 			}
 
 			const writable = node.type === 'VariableDeclaration' && (node.kind === 'var' || node.kind === 'let');
+			const imported = node.type.startsWith('Import');
 
 			this.add_var({
 				name,
 				initialised: instance_scope.initialised_declarations.has(name),
-				writable
+				writable,
+				imported
 			});
 
 			this.node_for_declaration.set(name, node);

src/compiler/compile/Component.ts

@@ -406,7 +406,7 @@ function get_possible_element_siblings(node: INode, adjacent_only: boolean): Map
 	let prev: INode = node;
 	while (prev = prev.prev) {
 		if (prev.type === 'Element') {
-			if (!prev.attributes.find(attr => attr.name.toLowerCase() === 'slot')) {
+			if (!prev.attributes.find(attr => attr.type === 'Attribute' && attr.name.toLowerCase() === 'slot')) {
 				result.set(prev, NodeExist.Definitely);
 			}
 

src/compiler/compile/css/Selector.ts

@@ -1,4 +1,3 @@
-import { assign } from '../../runtime/internal/utils';
 import Stats from '../Stats';
 import parse from '../parse/index';
 import render_dom from './render_dom/index';
@@ -69,7 +68,7 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 }
 
 export default function compile(source: string, options: CompileOptions = {}) {
-	options = assign({ generate: 'dom', dev: false }, options);
+	options = Object.assign({ generate: 'dom', dev: false }, options);
 
 	const stats = new Stats();
 	const warnings = [];

src/compiler/compile/index.ts

@@ -186,7 +186,7 @@ export default class Element extends Node {
 
 				case 'Attribute':
 				case 'Spread':
-				// special case
+					// special case
 					if (node.name === 'xmlns') this.namespace = node.value[0].data;
 
 					this.attributes.push(new Attribute(component, this, scope, node));
@@ -241,6 +241,13 @@ export default class Element extends Node {
 	}
 
 	validate() {
+		if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported) {
+			this.component.warn(this, {
+				code: 'component-name-lowercase',
+				message: `<${this.name}> will be treated as an HTML element unless it begins with a capital letter`
+			});
+		}
+
 		if (a11y_distracting_elements.has(this.name)) {
 			// no-distracting-elements
 			this.component.warn(this, {

src/compiler/compile/nodes/Element.ts

@@ -0,0 +1,19 @@
+import Expression from "./shared/Expression";
+import map_children from "./shared/map_children";
+import AbstractBlock from "./shared/AbstractBlock";
+
+export default class KeyBlock extends AbstractBlock {
+	type: "KeyBlock";
+
+	expression: Expression;
+
+	constructor(component, parent, scope, info) {
+		super(component, parent, scope, info);
+
+		this.expression = new Expression(component, this, scope, info.expression);
+
+		this.children = map_children(component, this, scope, info.children);
+
+		this.warn_if_empty_block();
+	}
+}