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();
+	}
+}

src/compiler/compile/nodes/KeyBlock.ts

@@ -18,6 +18,7 @@ import Fragment from './Fragment';
 import Head from './Head';
 import IfBlock from './IfBlock';
 import InlineComponent from './InlineComponent';
+import KeyBlock from './KeyBlock';
 import Let from './Let';
 import MustacheTag from './MustacheTag';
 import Options from './Options';
@@ -50,6 +51,7 @@ export type INode = Action
 | Head
 | IfBlock
 | InlineComponent
+| KeyBlock
 | Let
 | MustacheTag
 | Options

src/compiler/compile/nodes/interfaces.ts

@@ -6,6 +6,7 @@ import Element from '../Element';
 import Head from '../Head';
 import IfBlock from '../IfBlock';
 import InlineComponent from '../InlineComponent';
+import KeyBlock from '../KeyBlock';
 import MustacheTag from '../MustacheTag';
 import Options from '../Options';
 import RawMustacheTag from '../RawMustacheTag';
@@ -28,6 +29,7 @@ function get_constructor(type) {
 		case 'Head': return Head;
 		case 'IfBlock': return IfBlock;
 		case 'InlineComponent': return InlineComponent;
+		case 'KeyBlock': return KeyBlock;
 		case 'MustacheTag': return MustacheTag;
 		case 'Options': return Options;
 		case 'RawMustacheTag': return RawMustacheTag;

src/compiler/compile/nodes/shared/map_children.ts

@@ -0,0 +1,61 @@
+import ElementWrapper from './index';
+import SlotWrapper from '../Slot';
+import Block from '../../Block';
+import { sanitize } from '../../../../utils/names';
+import InlineComponentWrapper from '../InlineComponent';
+import create_debugging_comment from '../shared/create_debugging_comment';
+import { get_slot_definition } from '../shared/get_slot_definition';
+
+export default function create_slot_block(attribute, element: ElementWrapper | SlotWrapper, block: Block) {
+	const owner = find_slot_owner(element.parent);
+
+	if (owner && owner.node.type === 'InlineComponent') {
+		const name = attribute.get_static_value() as string;
+
+		if (!((owner as unknown) as InlineComponentWrapper).slots.has(name)) {
+			const child_block = block.child({
+				comment: create_debugging_comment(element.node, element.renderer.component),
+				name: element.renderer.component.get_unique_name(
+					`create_${sanitize(name)}_slot`
+				),
+				type: 'slot'
+			});
+
+			const { scope, lets } = element.node;
+			const seen = new Set(lets.map(l => l.name.name));
+
+			((owner as unknown) as InlineComponentWrapper).node.lets.forEach(l => {
+				if (!seen.has(l.name.name)) lets.push(l);
+			});
+
+			((owner as unknown) as InlineComponentWrapper).slots.set(
+				name,
+				get_slot_definition(child_block, scope, lets)
+			);
+			element.renderer.blocks.push(child_block);
+		}
+
+		element.slot_block = ((owner as unknown) as InlineComponentWrapper).slots.get(
+			name
+		).block;
+
+		return element.slot_block;
+	}
+
+	return block;
+}
+
+function find_slot_owner(owner) {
+	while (owner) {
+		if (owner.node.type === 'InlineComponent') {
+			break;
+		}
+
+		if (owner.node.type === 'Element' && /-/.test(owner.node.name)) {
+			break;
+		}
+
+		owner = owner.parent;
+	}
+	return owner;
+}

src/compiler/compile/render_dom/wrappers/Element/create_slot_block.ts

@@ -2,7 +2,7 @@ import Renderer from '../../Renderer';
 import Element from '../../../nodes/Element';
 import Wrapper from '../shared/Wrapper';
 import Block from '../../Block';
-import { is_void, sanitize } from '../../../../utils/names';
+import { is_void } from '../../../../utils/names';
 import FragmentWrapper from '../Fragment';
 import { escape_html, string_literal } from '../../../utils/stringify';
 import TextWrapper from '../Text';
@@ -14,12 +14,9 @@ import StyleAttributeWrapper from './StyleAttribute';
 import SpreadAttributeWrapper from './SpreadAttribute';
 import { dimensions } from '../../../../utils/patterns';
 import Binding from './Binding';
-import InlineComponentWrapper from '../InlineComponent';
 import add_to_set from '../../../utils/add_to_set';
 import { add_event_handler } from '../shared/add_event_handlers';
 import { add_action } from '../shared/add_actions';
-import create_debugging_comment from '../shared/create_debugging_comment';
-import { get_slot_definition } from '../shared/get_slot_definition';
 import bind_this from '../shared/bind_this';
 import { is_head } from '../shared/is_head';
 import { Identifier } from 'estree';
@@ -28,6 +25,7 @@ import { extract_names } from 'periscopic';
 import Action from '../../../nodes/Action';
 import MustacheTagWrapper from '../MustacheTag';
 import RawMustacheTagWrapper from '../RawMustacheTag';
+import create_slot_block from './create_slot_block';
 
 interface BindingGroup {
 	events: string[];
@@ -177,47 +175,7 @@ export default class ElementWrapper extends Wrapper {
 
 		this.attributes = this.node.attributes.map(attribute => {
 			if (attribute.name === 'slot') {
-				// TODO make separate subclass for this?
-				let owner = this.parent;
-				while (owner) {
-					if (owner.node.type === 'InlineComponent') {
-						break;
-					}
-
-					if (owner.node.type === 'Element' && /-/.test(owner.node.name)) {
-						break;
-					}
-
-					owner = owner.parent;
-				}
-
-				if (owner && owner.node.type === 'InlineComponent') {
-					const name = attribute.get_static_value() as string;
-
-					if (!(owner as unknown as InlineComponentWrapper).slots.has(name)) {
-						const child_block = block.child({
-							comment: create_debugging_comment(node, this.renderer.component),
-							name: this.renderer.component.get_unique_name(`create_${sanitize(name)}_slot`),
-							type: 'slot'
-						});
-
-						const { scope, lets } = this.node;
-						const seen = new Set(lets.map(l => l.name.name));
-
-						(owner as unknown as InlineComponentWrapper).node.lets.forEach(l => {
-							if (!seen.has(l.name.name)) lets.push(l);
-						});
-
-						(owner as unknown as InlineComponentWrapper).slots.set(
-							name,
-							get_slot_definition(child_block, scope, lets)
-						);
-						this.renderer.blocks.push(child_block);
-					}
-
-					this.slot_block = (owner as unknown as InlineComponentWrapper).slots.get(name).block;
-					block = this.slot_block;
-				}
+				block = create_slot_block(attribute, this, block);
 			}
 			if (attribute.name === 'style') {
 				return new StyleAttributeWrapper(this, block, attribute);

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -6,6 +6,7 @@ import EachBlock from './EachBlock';
 import Element from './Element/index';
 import Head from './Head';
 import IfBlock from './IfBlock';
+import KeyBlock from './KeyBlock';
 import InlineComponent from './InlineComponent/index';
 import MustacheTag from './MustacheTag';
 import RawMustacheTag from './RawMustacheTag';
@@ -30,6 +31,7 @@ const wrappers = {
 	Head,
 	IfBlock,
 	InlineComponent,
+	KeyBlock,
 	MustacheTag,
 	Options: null,
 	RawMustacheTag,