Merge branch 'master' into pr/4490

.gitignore

@@ -1,6 +1,7 @@
 .idea
 .DS_Store
 .nyc_output
+.vscode
 node_modules
 *.map
 /src/compiler/compile/internal_exports.ts

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Svelte changelog
 
+## Unreleased
+
+* Support dimension bindings in cross-origin environments ([#2147](https://github.com/sveltejs/svelte/issues/2147))
+* Try using `globalThis` rather than `globals` for the benefit of non-Node servers and web workers ([#3561](https://github.com/sveltejs/svelte/issues/3561), [#4545](https://github.com/sveltejs/svelte/issues/4545))
+* Fix attaching of JS debugging comments to HTML comments ([#4565](https://github.com/sveltejs/svelte/issues/4565))
+
+## 3.20.1
+
+* Fix compiler regression with slots ([#4562](https://github.com/sveltejs/svelte/issues/4562))
+
 ## 3.20.0
 
 * Allow destructuring in `{#await}` blocks ([#1851](https://github.com/sveltejs/svelte/issues/1851))

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.20.0",
+  "version": "3.20.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

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

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

@@ -893,7 +893,7 @@ A custom transition function can also return a `tick` function, which is called
 	function typewriter(node, { speed = 50 }) {
 		const valid = (
 			node.childNodes.length === 1 &&
-			node.childNodes[0].nodeType === 3
+			node.childNodes[0].nodeType === Node.TEXT_NODE
 		);
 
 		if (!valid) return {};

site/content/docs/03-run-time.md

@@ -804,7 +804,7 @@ You can see a full example on the [animations tutorial](tutorial/animate)
 
 ### `svelte/easing`
 
-Easing functions specificy the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`.
+Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`.
 
 You can explore the various eases using the [ease visualiser](examples#easing) in the [examples section](examples).
 

site/content/examples/03-logic/04-keyed-each-blocks/App.svelte

@@ -18,7 +18,7 @@
 	Remove first thing
 </button>
 
-<div style="display: grid; grid-template-columns: 1fr 1fr; grip-gap: 1em">
+<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em">
 	<div>
 		<h2>Keyed</h2>
 		{#each things as thing (thing.id)}

site/content/examples/09-transitions/04-custom-js-transitions/App.svelte

@@ -4,7 +4,7 @@
 	function typewriter(node, { speed = 50 }) {
 		const valid = (
 			node.childNodes.length === 1 &&
-			node.childNodes[0].nodeType === 3
+			node.childNodes[0].nodeType === Node.TEXT_NODE
 		);
 
 		if (!valid) {

site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte

@@ -3,6 +3,8 @@
 
 	export let item;
 	export let returnTo;
+
+	$: url = !item.domain ? `https://news.ycombinator.com/${item.url}` : item.url;
 </script>
 
 <style>
@@ -24,9 +26,11 @@
 <a href={returnTo}>&laquo; back</a>
 
 <article>
-	<a href="{item.url}">
+	<a href="{url}">
 		<h1>{item.title}</h1>
+		{#if item.domain}
 			<small>{item.domain}</small>
+		{/if}
 	</a>
 
 	<p class="meta">submitted by {item.user} {item.time_ago}

site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte

@@ -7,6 +7,8 @@
 		const c = item.comments_count;
 		return `${c} ${c === 1 ? 'comment' : 'comments'}`;
 	}
+
+	$: url = item.type === "ask" ? `https://news.ycombinator.com/${item.url}` : item.url;
 </script>
 
 <style>
@@ -33,6 +35,6 @@
 
 <article>
 	<span>{i + offset + 1}</span>
-	<h2><a target="_blank" href={item.url}>{item.title}</a></h2>
+	<h2><a target="_blank" href={url}>{item.title}</a></h2>
 	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
 </article>

site/content/tutorial/01-introduction/05-nested-components/text.md

@@ -20,3 +20,5 @@ Add a `<script>` tag that imports `Nested.svelte`...
 ```
 
 Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.
+
+Also notice that the component name `Nested` is capitalised. This convention has been adopted to allow us to differentiate between user-defined components and regular HTML tags.

site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte

@@ -4,7 +4,7 @@
 	function typewriter(node, { speed = 50 }) {
 		const valid = (
 			node.childNodes.length === 1 &&
-			node.childNodes[0].nodeType === 3
+			node.childNodes[0].nodeType === Node.TEXT_NODE
 		);
 
 		if (!valid) {

site/content/tutorial/10-transitions/05-custom-js-transitions/text.md

@@ -8,7 +8,7 @@ While you should generally use CSS for transitions as much as possible, there ar
 function typewriter(node, { speed = 50 }) {
 	const valid = (
 		node.childNodes.length === 1 &&
-		node.childNodes[0].nodeType === 3
+		node.childNodes[0].nodeType === Node.TEXT_NODE
 	);
 
 	if (!valid) {

site/package-lock.json

@@ -1291,13 +1291,14 @@
       }
     },
     "@sveltejs/svelte-repl": {
-      "version": "0.1.17",
+      "version": "0.1.18",
-      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.1.17.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.1.18.tgz",
-      "integrity": "sha512-rM0DC+pZnqwH6PiuxXUmFRwYZ9XNkexxTNt+prR91Qs7ssxGgf0QkH6kGivSNLbrOtOvcgJbt1nUDybWra5HKA==",
+      "integrity": "sha512-b1psPdlJ9qRqn28l+sPSma6OSfilue0dGK4BcS75MOsfdjZjSvsc0AIAoriQ3q1mB/frCoyUri6nxFGgEKv0iQ==",
       "dev": true,
       "requires": {
         "codemirror": "^5.49.2",
         "estree-walker": "^0.9.0",
+        "marked": "^0.8.2",
         "sourcemap-codec": "^1.4.6",
         "svelte-json-tree": "0.0.5",
         "yootils": "0.0.16"
@@ -1309,10 +1310,16 @@
           "integrity": "sha512-12U47o7XHUX329+x3FzNVjCx3SHEzMF0nkDv7r/HnBzX/xNTKxajBk6gyygaxrAFtLj39219oMfbtxv4KpaOiA==",
           "dev": true
         },
+        "marked": {
+          "version": "0.8.2",
+          "resolved": "https://registry.npmjs.org/marked/-/marked-0.8.2.tgz",
+          "integrity": "sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==",
+          "dev": true
+        },
         "sourcemap-codec": {
-          "version": "1.4.6",
+          "version": "1.4.8",
-          "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.6.tgz",
+          "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-          "integrity": "sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg==",
+          "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
           "dev": true
         }
       }
@@ -1594,9 +1601,9 @@
       "dev": true
     },
     "codemirror": {
-      "version": "5.49.2",
+      "version": "5.52.2",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.49.2.tgz",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.52.2.tgz",
-      "integrity": "sha512-dwJ2HRPHm8w51WB5YTF9J7m6Z5dtkqbU9ntMZ1dqXyFB9IpjoUFDj80ahRVEoVanfIp6pfASJbOlbWdEf8FOzQ==",
+      "integrity": "sha512-WCGCixNUck2HGvY8/ZNI1jYfxPG5cRHv0VjmWuNzbtCLz8qYA5d+je4QhSSCtCaagyeOwMi/HmmPTjBgiTm2lQ==",
       "dev": true
     },
     "color-convert": {
@@ -3483,9 +3490,9 @@
       }
     },
     "sapper": {
-      "version": "0.27.8",
+      "version": "0.27.11",
-      "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.27.8.tgz",
+      "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.27.11.tgz",
-      "integrity": "sha512-78K+56yu9nGOEU0B0XjBvNchRuPEv4aHbAKK4D874S4aoapMAkHCT0bHtPK12S3P7JPxvvT8GzHaq/8NetMmbg==",
+      "integrity": "sha512-5EaPZhlc8OnyN3UCI6dRSM1Gz5sxyzLZG/1z5nMvZhg9Ng+rSvEvJx/rW/tSHcnQPa8or7+YcbfvQHKS5oPHiw==",
       "dev": true,
       "requires": {
         "html-minifier": "^4.0.0",

site/package.json

@@ -36,7 +36,7 @@
     "@babel/runtime": "^7.6.0",
     "@sindresorhus/slugify": "^0.9.1",
     "@sveltejs/site-kit": "^1.1.4",
-    "@sveltejs/svelte-repl": "^0.1.17",
+    "@sveltejs/svelte-repl": "^0.1.18",
     "degit": "^2.1.4",
     "dotenv": "^8.1.0",
     "esm": "^3.2.25",
@@ -53,7 +53,7 @@
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-svelte": "^5.1.0",
     "rollup-plugin-terser": "^5.1.1",
-    "sapper": "^0.27.8",
+    "sapper": "^0.27.11",
     "shelljs": "^0.8.3",
     "svelte": "^3.12.0"
   },

src/compiler/compile/Component.ts

@@ -1216,7 +1216,6 @@ export default class Component {
 		});
 
 		const lookup = new Map();
-		let seen;
 
 		unsorted_reactive_declarations.forEach(declaration => {
 			declaration.assignees.forEach(name => {
@@ -1251,28 +1250,19 @@ export default class Component {
 		}
 
 		const add_declaration = declaration => {
-			if (this.reactive_declarations.indexOf(declaration) !== -1) {
+			if (this.reactive_declarations.includes(declaration)) return;
-				return;
-			}
-
-			seen.add(declaration);
 			
 			declaration.dependencies.forEach(name => {
 				if (declaration.assignees.has(name)) return;
 				const earlier_declarations = lookup.get(name);
 				if (earlier_declarations)
-					earlier_declarations.forEach(declaration => {
+					earlier_declarations.forEach(add_declaration);
-						add_declaration(declaration);
-					});
 			});
 
 			this.reactive_declarations.push(declaration);
 		};
 
-		unsorted_reactive_declarations.forEach(declaration => {
+		unsorted_reactive_declarations.forEach(add_declaration);
-			seen = new Set();
-			add_declaration(declaration);
-		});
 	}
 
 	warn_if_undefined(name: string, node, template_scope: TemplateScope) {

src/compiler/compile/render_dom/Block.ts

@@ -419,8 +419,8 @@ export default class Block {
 		return body;
 	}
 
-	has_content() {
+	has_content(): boolean {
-		return this.first ||
+		return !!this.first ||
 			this.event_listeners.length > 0 ||
 			this.chunks.intro.length > 0 ||
 			this.chunks.outro.length > 0  ||

src/compiler/compile/render_dom/Renderer.ts

@@ -284,4 +284,8 @@ export default class Renderer {
 
 		return node;
 	}
+
+	remove_block(block: Block | Node | Node[]) {
+		this.blocks.splice(this.blocks.indexOf(block), 1);
+	}
 }

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

@@ -586,7 +586,7 @@ export default class ElementWrapper extends Wrapper {
 					);
 
 					block.chunks.destroy.push(
-						b`${resize_listener}.cancel();`
+						b`${resize_listener}();`
 					);
 				} else {
 					block.event_listeners.push(

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

@@ -155,6 +155,7 @@ export default class InlineComponentWrapper extends Wrapper {
 		// removing empty slot
 		for (const slot of this.slots.keys()) {
 			if (!this.slots.get(slot).block.has_content()) {
+				this.renderer.remove_block(this.slots.get(slot).block);
 				this.slots.delete(slot);
 			}
 		}

src/compiler/compile/render_dom/wrappers/Slot.ts

@@ -38,6 +38,7 @@ export default class SlotWrapper extends Wrapper {
 				name: this.renderer.component.get_unique_name(`fallback_block`),
 				type: 'fallback'
 			});
+			renderer.blocks.push(this.fallback);
 		}
 
 		this.fragment = new FragmentWrapper(
@@ -113,19 +114,23 @@ export default class SlotWrapper extends Wrapper {
 			get_slot_context_fn = 'null';
 		}
 
+		let has_fallback = !!this.fallback;
 		if (this.fallback) {
 			this.fragment.render(this.fallback, null, x`#nodes` as Identifier);
-			renderer.blocks.push(this.fallback);
+			has_fallback = this.fallback.has_content();
+			if (!has_fallback) {
+				renderer.remove_block(this.fallback);
+			}
 		}
 
 		const slot = block.get_unique_name(`${sanitize(slot_name)}_slot`);
 		const slot_definition = block.get_unique_name(`${sanitize(slot_name)}_slot_template`);
-		const slot_or_fallback = this.fallback ? block.get_unique_name(`${sanitize(slot_name)}_slot_or_fallback`) : slot;
+		const slot_or_fallback = has_fallback ? block.get_unique_name(`${sanitize(slot_name)}_slot_or_fallback`) : slot;
 
 		block.chunks.init.push(b`
 			const ${slot_definition} = ${renderer.reference('$$slots')}.${slot_name};
 			const ${slot} = @create_slot(${slot_definition}, #ctx, ${renderer.reference('$$scope')}, ${get_slot_context_fn});
-			${this.fallback ? b`const ${slot_or_fallback} = ${slot} || ${this.fallback.name}(#ctx);` : null}
+			${has_fallback ? b`const ${slot_or_fallback} = ${slot} || ${this.fallback.name}(#ctx);` : null}
 		`);
 
 		block.chunks.create.push(
@@ -161,7 +166,7 @@ export default class SlotWrapper extends Wrapper {
 
 		const dynamic_dependencies = Array.from(this.dependencies).filter(is_dependency_dynamic);
 
-		const fallback_dynamic_dependencies = this.fallback
+		const fallback_dynamic_dependencies = has_fallback
 			? Array.from(this.fallback.dependencies).filter(is_dependency_dynamic)
 			: [];
 
@@ -173,7 +178,7 @@ export default class SlotWrapper extends Wrapper {
 				);
 			}
 		`;
-		const fallback_update = this.fallback && fallback_dynamic_dependencies.length > 0 && b`
+		const fallback_update = has_fallback && fallback_dynamic_dependencies.length > 0 && b`
 			if (${slot_or_fallback} && ${slot_or_fallback}.p && ${renderer.dirty(fallback_dynamic_dependencies)}) {
 				${slot_or_fallback}.p(#ctx, #dirty);
 			}

src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts

@@ -24,7 +24,7 @@ export default function create_debugging_comment(
 			while (source[d] !== '>') d += 1;
 			d += 1;
 		}
-	} else if (node.type === 'Text') {
+	} else if (node.type === 'Text' || node.type === 'Comment') {
 		d = node.end;
 	} else {
 		// @ts-ignore

src/runtime/internal/dom.ts

@@ -57,7 +57,7 @@ export function empty() {
 	return text('');
 }
 
-export function listen(node: Node, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions) {
+export function listen(node: EventTarget, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions) {
 	node.addEventListener(event, handler, options);
 	return () => node.removeEventListener(event, handler, options);
 }
@@ -234,37 +234,61 @@ export function select_multiple_value(select) {
 	return [].map.call(select.querySelectorAll(':checked'), option => option.__value);
 }
 
-export function add_resize_listener(element, fn) {
+// unfortunately this can't be a constant as that wouldn't be tree-shakeable
-	if (getComputedStyle(element).position === 'static') {
+// so we cache the result instead
-		element.style.position = 'relative';
+let crossorigin: boolean;
+
+export function is_crossorigin() {
+	if (crossorigin === undefined) {
+		crossorigin = false;
+
+		try {
+			if (typeof window !== 'undefined' && window.parent) {
+				void window.parent.document;
+			}
+		} catch (error) {
+			crossorigin = true;
+		}
 	}
 
-	const object = document.createElement('object');
+	return crossorigin;
-	object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
+}
-	object.setAttribute('aria-hidden', 'true');
-	object.type = 'text/html';
-	object.tabIndex = -1;
 
-	let win;
+export function add_resize_listener(node: HTMLElement, fn: () => void) {
+	const computed_style = getComputedStyle(node);
+	const z_index = (parseInt(computed_style.zIndex) || 0) - 1;
 
-	object.onload = () => {
+	if (computed_style.position === 'static') {
-		win = object.contentDocument.defaultView;
+		node.style.position = 'relative';
-		win.addEventListener('resize', fn);
+	}
-	};
+
+	const iframe = element('iframe');
+	iframe.setAttribute('style',
+		`display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ` +
+		`overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: ${z_index};`
+	);
+	iframe.setAttribute('aria-hidden', 'true');
+	iframe.tabIndex = -1;
+
+	let unsubscribe: () => void;
 
-	if (/Trident/.test(navigator.userAgent)) {
+	if (is_crossorigin()) {
-		element.appendChild(object);
+		iframe.src = `data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>`;
-		object.data = 'about:blank';
+		unsubscribe = listen(window, 'message', (event: MessageEvent) => {
+			if (event.source === iframe.contentWindow) fn();
+		});
 	} else {
-		object.data = 'about:blank';
+		iframe.src = 'about:blank';
-		element.appendChild(object);
+		iframe.onload = () => {
+			unsubscribe = listen(iframe.contentWindow, 'resize', fn);
+		};
 	}
 
-	return {
+	append(node, iframe);
-		cancel: () => {
+
-			win && win.removeEventListener && win.removeEventListener('resize', fn);
+	return () => {
-			element.removeChild(object);
+		detach(iframe);
-		}
+		if (unsubscribe) unsubscribe();
 	};
 }
 

src/runtime/internal/globals.ts

@@ -1,3 +1,7 @@
 declare const global: any;
 
-export const globals = (typeof window !== 'undefined' ? window : global) as unknown as typeof globalThis;
+export const globals = (typeof window !== 'undefined'
+	? window
+	: typeof globalThis !== 'undefined'
+	? globalThis
+	: global) as unknown as typeof globalThis;

test/js/samples/bind-width-height/expected.js

@@ -30,7 +30,7 @@ function create_fragment(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
-			div_resize_listener.cancel();
+			div_resize_listener();
 		}
 	};
 }

test/js/samples/video-bindings/expected.js

@@ -59,7 +59,7 @@ function create_fragment(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(video);
-			video_resize_listener.cancel();
+			video_resize_listener();
 			run_all(dispose);
 		}
 	};

test/runtime/samples/binding-width-height-a11y/_config.js

@@ -1,8 +1,8 @@
 export default {
 	async test({ assert, target }) {
-		const object = target.querySelector('object');
+		const iframe = target.querySelector('iframe');
 
-		assert.equal(object.getAttribute('aria-hidden'), "true");
+		assert.equal(iframe.getAttribute('aria-hidden'), "true");
-		assert.equal(object.getAttribute('tabindex'), "-1");
+		assert.equal(iframe.getAttribute('tabindex'), "-1");
 	}
 };

test/runtime/samples/component-slot-fallback-3/Inner.svelte

@@ -0,0 +1,6 @@
+<slot>
+	<div>Hello</div>
+	<div>world</div>
+	<div>Bye</div>
+	<div>World</div>
+</slot>

test/runtime/samples/component-slot-fallback-3/_config.js

@@ -0,0 +1,6 @@
+export default {
+	html: `
+	<div>Hello World</div>
+	<div>Hello</div><div>world</div><div>Bye</div><div>World</div>
+	`,
+};

test/runtime/samples/component-slot-fallback-3/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Inner from "./Inner.svelte";
+</script>
+
+<Inner>
+	<div>Hello World</div>
+</Inner>
+
+<Inner></Inner>

test/runtime/samples/component-slot-fallback-4/Inner.svelte

@@ -0,0 +1,3 @@
+<slot name="a"><!-- placeholder--></slot>
+<slot name="b"><!-- placeholder--> </slot>
+<slot name="c"><!-- placeholder--> foobar </slot>

test/runtime/samples/component-slot-fallback-4/_config.js

@@ -0,0 +1,5 @@
+export default {
+	html: `
+	foobar
+	`,
+};

test/runtime/samples/component-slot-fallback-4/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Inner from "./Inner.svelte";
+</script>
+
+<Inner></Inner>