Merge branch 'master' into feature/preprocessor-sourcemaps

Author: milahu

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Svelte changelog
 
-## Unreleased
+## 3.27.0
+
+* Add `|nonpassive` event modifier, explicitly passing `passive: false` ([#2068](https://github.com/sveltejs/svelte/issues/2068))
+* Scope CSS selectors with `~` and `+` combinators ([#3104](https://github.com/sveltejs/svelte/issues/3104))
+* Fix keyed `{#each}` not reacting to key changing ([#5444](https://github.com/sveltejs/svelte/issues/5444))
+* Fix destructuring into store values ([#5449](https://github.com/sveltejs/svelte/issues/5449))
+* Fix erroneous `missing-declaration` warning with `use:obj.method` ([#5451](https://github.com/sveltejs/svelte/issues/5451))
+
+## 3.26.0
 
 * Support `use:obj.method` as actions ([#3935](https://github.com/sveltejs/svelte/issues/3935))
 * Support `_` as numeric separator ([#5407](https://github.com/sveltejs/svelte/issues/5407))

package-lock.json

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

package.json

@@ -30,7 +30,9 @@ To treat `*.svelte` files as HTML, open *__Edit → Config...__* and add the fol
 
 ## Vim/Neovim
 
-To treat all `*.svelte` files as HTML, add the following line to your `init.vim`:
+You can use the [coc-svelte extension](https://github.com/coc-extensions/coc-svelte) which utilises the official language-server.
+
+As an alternative you can treat all `*.svelte` files as HTML. Add the following line to your `init.vim`:
 
 ```
 au! BufNewFile,BufRead *.svelte set ft=html
@@ -50,13 +52,7 @@ To set the filetype for a single file, use a [modeline](https://vim.fandom.com/w
 
 ## Visual Studio Code
 
-To treat `*.svelte` files as HTML, add the following lines to your `settings.json` file:
-
-```cson
-  "files.associations": {
-    "*.svelte": "html"
-  }
-```
+We recommend using the official [Svelte for VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
 
 ## JetBrains WebStorm
 

site/content/blog/2019-04-15-setting-up-your-editor.md

@@ -471,6 +471,7 @@ The following modifiers are available:
 * `preventDefault` — calls `event.preventDefault()` before running the handler
 * `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
 * `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
+* `nonpassive` — explicitly set `passive: false`
 * `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase
 * `once` — remove the handler after the first time it runs
 * `self` — only trigger handler if event.target is the element itself

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

@@ -13,7 +13,7 @@ First, you'll need to integrate Svelte with a build tool. There are officially m
 
 Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](blog/svelte-for-new-developers), which walks you through the process.
 
-You'll also want to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting. [Read this guide to learn how](blog/setting-up-your-editor).
+You'll also want to configure your text editor. If you're using VS Code, install the [Svelte extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), otherwise follow [this guide](blog/setting-up-your-editor) to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting.
 
 Then, once you've got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with `new`:
 

site/content/tutorial/01-introduction/07-making-an-app/text.md

@@ -21,6 +21,7 @@ The full list of modifiers:
 * `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example.
 * `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
 * `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
+* `nonpassive` — explicitly set `passive: false`
 * `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
 * `once` — remove the handler after the first time it runs
 * `self` — only trigger handler if event.target is the element itself

site/content/tutorial/05-events/03-event-modifiers/text.md

@@ -30,6 +30,7 @@ import check_graph_for_cycles from './utils/check_graph_for_cycles';
 import { print, x, b } from 'code-red';
 import { is_reserved_keyword } from './utils/reserved_keywords';
 import remapping from '@ampproject/remapping';
+import Element from './nodes/Element';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -86,6 +87,7 @@ export default class Component {
 	file: string;
 	locate: (c: number) => { line: number; column: number };
 
+	elements: Element[] = [];
 	stylesheet: Stylesheet;
 
 	aliases: Map<string, Identifier> = new Map();
@@ -172,8 +174,8 @@ export default class Component {
 
 		this.walk_instance_js_post_template();
 
+		this.elements.forEach(element => this.stylesheet.apply(element));
 		if (!compile_options.customElement) this.stylesheet.reify();
-
 		this.stylesheet.warn_on_unused_selectors(this);
 	}
 
@@ -222,6 +224,10 @@ export default class Component {
 		return this.aliases.get(name);
 	}
 
+	apply_stylesheet(element: Element) {
+		this.elements.push(element);
+	}
+
 	global(name: string) {
 		const alias = this.alias(name);
 		this.globals.set(name, alias);

src/compiler/compile/Component.ts

@@ -4,12 +4,20 @@ import { gather_possible_values, UNKNOWN } from './gather_possible_values';
 import { CssNode } from './interfaces';
 import Component from '../Component';
 import Element from '../nodes/Element';
+import { INode } from '../nodes/interfaces';
+import EachBlock from '../nodes/EachBlock';
+import IfBlock from '../nodes/IfBlock';
+import AwaitBlock from '../nodes/AwaitBlock';
 
 enum BlockAppliesToNode {
 	NotPossible,
 	Possible,
 	UnknownSelectorType
 }
+enum NodeExist {
+	Probably = 1,
+	Definitely = 2,
+}
 
 const whitelist_attribute_selector = new Map([
 	['details', new Set(['open'])]
@@ -39,10 +47,10 @@ export default class Selector {
 		this.used = this.local_blocks.length === 0;
 	}
 
-	apply(node: Element, stack: Element[]) {
+	apply(node: Element) {
 		const to_encapsulate: any[] = [];
 
-		apply_selector(this.local_blocks.slice(), node, stack.slice(), to_encapsulate);
+		apply_selector(this.local_blocks.slice(), node, to_encapsulate);
 
 		if (to_encapsulate.length > 0) {
 			to_encapsulate.forEach(({ node, block }) => {
@@ -149,7 +157,7 @@ export default class Selector {
 	}
 }
 
-function apply_selector(blocks: Block[], node: Element, stack: Element[], to_encapsulate: any[]): boolean {
+function apply_selector(blocks: Block[], node: Element, to_encapsulate: any[]): boolean {
 	const block = blocks.pop();
 	if (!block) return false;
 
@@ -162,7 +170,7 @@ function apply_selector(blocks: Block[], node: Element, stack: Element[], to_enc
 			return false;
 
 		case BlockAppliesToNode.UnknownSelectorType:
-			// bail. TODO figure out what these could be
+		// bail. TODO figure out what these could be
 			to_encapsulate.push({ node, block });
 			return true;
 	}
@@ -174,9 +182,10 @@ function apply_selector(blocks: Block[], node: Element, stack: Element[], to_enc
 					continue;
 				}
 
-				for (const stack_node of stack) {
-					if (block_might_apply_to_node(ancestor_block, stack_node) !== BlockAppliesToNode.NotPossible) {
-						to_encapsulate.push({ node: stack_node, block: ancestor_block });
+				let parent = node;
+				while (parent = get_element_parent(parent)) {
+					if (block_might_apply_to_node(ancestor_block, parent) !== BlockAppliesToNode.NotPossible) {
+						to_encapsulate.push({ node: parent, block: ancestor_block });
 					}
 				}
 
@@ -193,12 +202,22 @@ function apply_selector(blocks: Block[], node: Element, stack: Element[], to_enc
 
 			return false;
 		} else if (block.combinator.name === '>') {
-			if (apply_selector(blocks, stack.pop(), stack, to_encapsulate)) {
+			if (apply_selector(blocks, get_element_parent(node), to_encapsulate)) {
 				to_encapsulate.push({ node, block });
 				return true;
 			}
 
 			return false;
+		} else if (block.combinator.name === '+' || block.combinator.name === '~') {
+			const siblings = get_possible_element_siblings(node, block.combinator.name === '+');
+			let has_match = false;
+			for (const possible_sibling of siblings.keys()) {
+				if (apply_selector(blocks.slice(), possible_sibling, to_encapsulate)) {
+					to_encapsulate.push({ node, block });
+					has_match = true;
+				}
+			}
+			return has_match;
 		}
 
 		// TODO other combinators
@@ -376,6 +395,158 @@ function unquote(value: CssNode) {
 	return str;
 }
 
+function get_element_parent(node: Element): Element | null {
+	let parent: INode = node;
+	while ((parent = parent.parent) && parent.type !== 'Element');
+	return parent as Element | null;
+}
+
+function get_possible_element_siblings(node: INode, adjacent_only: boolean): Map<Element, NodeExist> {
+	const result: Map<Element, NodeExist> = new Map();
+	let prev: INode = node;
+	while (prev = prev.prev) {
+		if (prev.type === 'Element') {
+			if (!prev.attributes.find(attr => attr.name.toLowerCase() === 'slot')) {
+				result.set(prev, NodeExist.Definitely);
+			}
+
+			if (adjacent_only) {
+				break;
+			}
+		} else if (prev.type === 'EachBlock' || prev.type === 'IfBlock' || prev.type === 'AwaitBlock') {
+			const possible_last_child = get_possible_last_child(prev, adjacent_only);
+
+			add_to_map(possible_last_child, result);
+			if (adjacent_only && has_definite_elements(possible_last_child)) {
+				return result;
+			}
+		}
+	}
+
+	if (!prev || !adjacent_only) {
+		let parent: INode = node;
+		let skip_each_for_last_child = node.type === 'ElseBlock';
+		while ((parent = parent.parent) && (parent.type === 'EachBlock' || parent.type === 'IfBlock' || parent.type === 'ElseBlock' || parent.type === 'AwaitBlock')) {
+			const possible_siblings = get_possible_element_siblings(parent, adjacent_only);
+			add_to_map(possible_siblings, result);
+			
+			if (parent.type === 'EachBlock') {
+				// first child of each block can select the last child of each block as previous sibling
+				if (skip_each_for_last_child) {
+					skip_each_for_last_child = false;
+				} else {
+					add_to_map(get_possible_last_child(parent, adjacent_only), result);
+				}
+			} else if (parent.type === 'ElseBlock') {
+				skip_each_for_last_child = true;
+				parent = parent.parent;
+			}
+
+			if (adjacent_only && has_definite_elements(possible_siblings)) {
+				break;
+			}
+		}
+	}
+
+	return result;
+}
+
+function get_possible_last_child(block: EachBlock | IfBlock | AwaitBlock, adjacent_only: boolean): Map<Element, NodeExist> {
+	const result: Map<Element, NodeExist> = new Map();
+
+	if (block.type === 'EachBlock') {
+		const each_result: Map<Element, NodeExist> = loop_child(block.children, adjacent_only);
+		const else_result: Map<Element, NodeExist> = block.else ? loop_child(block.else.children, adjacent_only) : new Map();
+		
+		const not_exhaustive = !has_definite_elements(else_result);
+
+		if (not_exhaustive) {
+			mark_as_probably(each_result);
+			mark_as_probably(else_result);
+		}
+		add_to_map(each_result, result);
+		add_to_map(else_result, result);
+	} else if (block.type === 'IfBlock') {
+		const if_result: Map<Element, NodeExist> = loop_child(block.children, adjacent_only);
+		const else_result: Map<Element, NodeExist> = block.else ? loop_child(block.else.children, adjacent_only) : new Map();
+
+		const not_exhaustive = !has_definite_elements(if_result) || !has_definite_elements(else_result);
+
+		if (not_exhaustive) {
+			mark_as_probably(if_result);
+			mark_as_probably(else_result);
+		}
+
+		add_to_map(if_result, result);
+		add_to_map(else_result, result);
+	} else if (block.type === 'AwaitBlock') {
+		const pending_result: Map<Element, NodeExist> = block.pending ? loop_child(block.pending.children, adjacent_only) : new Map();
+		const then_result: Map<Element, NodeExist> = block.then ? loop_child(block.then.children, adjacent_only) : new Map();
+		const catch_result: Map<Element, NodeExist> = block.catch ? loop_child(block.catch.children, adjacent_only) : new Map();
+
+		const not_exhaustive = !has_definite_elements(pending_result) || !has_definite_elements(then_result) || !has_definite_elements(catch_result);
+
+		if (not_exhaustive) {
+			mark_as_probably(pending_result);
+			mark_as_probably(then_result);
+			mark_as_probably(catch_result);
+		}
+
+		add_to_map(pending_result, result);
+		add_to_map(then_result, result);
+		add_to_map(catch_result, result);
+	}
+
+	return result;
+}
+
+function has_definite_elements(result: Map<Element, NodeExist>): boolean {
+	if (result.size === 0) return false;
+	for (const exist of result.values()) {
+		if (exist === NodeExist.Definitely) {
+			return true;
+		}
+	}
+	return false;
+}
+
+function add_to_map(from: Map<Element, NodeExist>, to: Map<Element, NodeExist>) {
+	from.forEach((exist, element) => {
+		to.set(element, higher_existance(exist, to.get(element)));
+	});
+}
+
+function higher_existance(exist1: NodeExist | null, exist2: NodeExist | null): NodeExist {
+	if (exist1 === undefined || exist2 === undefined) return exist1 || exist2;
+	return exist1 > exist2 ? exist1 : exist2;
+}
+
+function mark_as_probably(result: Map<Element, NodeExist>) {
+	for (const key of result.keys()) {
+		result.set(key, NodeExist.Probably);
+	}
+}
+
+function loop_child(children: INode[], adjacent_only: boolean) {
+	const result: Map<Element, NodeExist> = new Map();
+	for (let i = children.length - 1; i >= 0; i--) {
+		const child = children[i];
+		if (child.type === 'Element') {
+			result.set(child, NodeExist.Definitely);
+			if (adjacent_only) {
+				break;
+			}
+		} else if (child.type === 'EachBlock' || child.type === 'IfBlock' || child.type === 'AwaitBlock') {
+			const child_result = get_possible_last_child(child, adjacent_only);
+			add_to_map(child_result, result);
+			if (adjacent_only && has_definite_elements(child_result)) {
+				break;
+			}
+		}
+	}
+	return result;
+}
+
 class Block {
 	global: boolean;
 	combinator: CssNode;