Merge branch 'master' into bitmasks

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Svelte changelog
 
+## 3.15.0
+
+* Hide commented sections from preprocessors ([#3894](https://github.com/sveltejs/svelte/pull/3894))
+* Add `seeking` and `ended` bindings to media elements ([#3650](https://github.com/sveltejs/svelte/pull/3650))
+* Add `videoWidth` and `videoHeight` bindings to video elements ([#3927](https://github.com/sveltejs/svelte/pull/3927))
+* Fix for dynamic event handlers ([#3934](https://github.com/sveltejs/svelte/pull/3934))
+* Handle scale transforms when using the `flip` animation ([#3555](https://github.com/sveltejs/svelte/issues/3555))
+* Fix some code generation bugs ([#3929](https://github.com/sveltejs/svelte/issues/3929), [#3939](https://github.com/sveltejs/svelte/issues/3939))
+* Add `aria-hidden="true"` to objects generated when adding resize-listeners, to improve accessibility ([#3948](https://github.com/sveltejs/svelte/issues/3948))
+
 ## 3.14.1
 
 * Deconflict block method names with other variables ([#3900](https://github.com/sveltejs/svelte/issues/3900))

package-lock.json

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

package.json

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

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

@@ -563,12 +563,14 @@ Elements with the `contenteditable` attribute support `innerHTML` and `textConte
 
 ---
 
-Media elements (`<audio>` and `<video>`) have their own set of bindings — four *readonly* ones...
+Media elements (`<audio>` and `<video>`) have their own set of bindings — six *readonly* ones...
 
 * `duration` (readonly) — the total duration of the video, in seconds
 * `buffered` (readonly) — an array of `{start, end}` objects
 * `seekable` (readonly) — ditto
 * `played` (readonly) — ditto
+* `seeking` (readonly) — boolean
+* `ended` (readonly) — boolean
 
 ...and four *two-way* bindings:
 
@@ -577,16 +579,22 @@ Media elements (`<audio>` and `<video>`) have their own set of bindings — four
 * `paused` — this one should be self-explanatory
 * `volume` — a value between 0 and 1
 
+Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+
 ```html
 <video
 	src={clip}
 	bind:duration
 	bind:buffered
 	bind:seekable
+	bind:seeking
 	bind:played
+	bind:ended
 	bind:currentTime
 	bind:paused
 	bind:volume
+	bind:videoWidth
+	bind:videoHeight
 ></video>
 ```
 

site/content/examples/00-introduction/02-styling/App.svelte

@@ -1,7 +1,7 @@
 <style>
 	p {
 		color: purple;
-		font-family: 'Comic Sans MS';
+		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
 </style>

site/content/examples/00-introduction/03-nested-components/App.svelte

@@ -5,7 +5,7 @@
 <style>
 	p {
 		color: purple;
-		font-family: 'Comic Sans MS';
+		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
 </style>

site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte

@@ -1,6 +1,6 @@
 <style>
 	button {
-		font-family: 'Comic Sans MS';
+		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 		padding: 0.5em 1em;
 		color: royalblue;

site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte

@@ -12,7 +12,7 @@
 
 <button use:longpress={duration}
 	on:longpress="{() => pressed = true}"
-	on:mouseout="{() => pressed = false}"
+	on:mouseenter="{() => pressed = false}"
 >press and hold</button>
 
 {#if pressed}

site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js

@@ -1,13 +1,20 @@
 export function longpress(node, duration) {
+	let timer;
+	
 	const handleMousedown = () => {
-		setTimeout(() => {
+		timer = setTimeout(() => {
 			node.dispatchEvent(
 				new CustomEvent('longpress')
 			);
 		}, duration);
 	};
 	
+	const handleMouseup = () => {
+		clearTimeout(timer)
+	};
+
 	node.addEventListener('mousedown', handleMousedown);
+	node.addEventListener('mouseup', handleMouseup);
 
 	return {
 		update(newDuration) {
@@ -15,6 +22,7 @@ export function longpress(node, duration) {
 		},
 		destroy() {
 			node.removeEventListener('mousedown', handleMousedown);
+			node.removeEventListener('mouseup', handleMouseup);
 		}
 	};
 }

site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js

@@ -11,7 +11,7 @@ export const title = css`
 `;
 
 export const comicSans = css`
-	font-family: 'Comic Sans MS';
+	font-family: 'Comic Sans MS', cursive;
 `;
 
 export const box = css`

site/content/tutorial/01-introduction/04-styling/app-b/App.svelte

@@ -1,7 +1,7 @@
 <style>
 	p {
 		color: purple;
-		font-family: 'Comic Sans MS';
+		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
 </style>

site/content/tutorial/01-introduction/04-styling/text.md

@@ -8,7 +8,7 @@ Just like in HTML, you can add a `<style>` tag to your component. Let's add some
 <style>
 	p {
 		color: purple;
-		font-family: 'Comic Sans MS';
+		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
 </style>

site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte

@@ -1,7 +1,7 @@
 <style>
 	p {
 		color: purple;
-		font-family: 'Comic Sans MS';
+		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
 </style>

site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte

@@ -5,7 +5,7 @@
 <style>
 	p {
 		color: purple;
-		font-family: 'Comic Sans MS';
+		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
 </style>

site/content/tutorial/05-events/06-dom-event-forwarding/app-a/FancyButton.svelte

@@ -1,6 +1,6 @@
 <style>
 	button {
-		font-family: 'Comic Sans MS';
+		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 		padding: 0.5em 1em;
 		color: royalblue;

site/content/tutorial/05-events/06-dom-event-forwarding/app-b/FancyButton.svelte

@@ -1,6 +1,6 @@
 <style>
 	button {
-		font-family: 'Comic Sans MS';
+		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 		padding: 0.5em 1em;
 		color: royalblue;

site/content/tutorial/06-bindings/10-media-elements/text.md

@@ -24,12 +24,14 @@ Now, when you click on the video, it will update `time`, `duration` and `paused`
 
 > Ordinarily on the web, you would track `currentTime` by listening for `timeupdate` events. But these events fire too infrequently, resulting in choppy UI. Svelte does better — it checks `currentTime` using `requestAnimationFrame`.
 
-The complete set of bindings for `<audio>` and `<video>` is as follows — four *readonly* bindings...
+The complete set of bindings for `<audio>` and `<video>` is as follows — six *readonly* bindings...
 
 * `duration` (readonly) — the total duration of the video, in seconds
 * `buffered` (readonly) — an array of `{start, end}` objects
 * `seekable` (readonly) — ditto
 * `played` (readonly) — ditto
+* `seeking` (readonly) — boolean
+* `ended` (readonly) — boolean
 
 ...and four *two-way* bindings:
 
@@ -37,3 +39,5 @@ The complete set of bindings for `<audio>` and `<video>` is as follows — four
 * `playbackRate` — how fast to play the video, where `1` is 'normal'
 * `paused` — this one should be self-explanatory
 * `volume` — a value between 0 and 1
+
+Videos additionally have readonly `videoWidth` and `videoHeight` bindings.

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte

@@ -12,7 +12,7 @@
 
 <button use:longpress
 	on:longpress="{() => pressed = true}"
-	on:mouseout="{() => pressed = false}"
+	on:mouseenter="{() => pressed = false}"
 >press and hold</button>
 
 {#if pressed}

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js

@@ -1,17 +1,25 @@
-export function longpress(node) {
+export function longpress(node, duration) {
+	let timer;
+	
 	const handleMousedown = () => {
-		setTimeout(() => {
+		timer = setTimeout(() => {
 			node.dispatchEvent(
 				new CustomEvent('longpress')
 			);
 		}, 500);
 	};
 	
+	const handleMouseup = () => {
+		clearTimeout(timer)
+	};
+
 	node.addEventListener('mousedown', handleMousedown);
+	node.addEventListener('mouseup', handleMouseup);
 
 	return {
 		destroy() {
 			node.removeEventListener('mousedown', handleMousedown);
+			node.removeEventListener('mouseup', handleMouseup);
 		}
 	};
 }

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte

@@ -12,7 +12,7 @@
 
 <button use:longpress={duration}
 	on:longpress="{() => pressed = true}"
-	on:mouseout="{() => pressed = false}"
+	on:mouseenter="{() => pressed = false}"
 >press and hold</button>
 
 {#if pressed}

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js

@@ -1,13 +1,20 @@
 export function longpress(node, duration) {
+	let timer;
+	
 	const handleMousedown = () => {
-		setTimeout(() => {
+		timer = setTimeout(() => {
 			node.dispatchEvent(
 				new CustomEvent('longpress')
 			);
 		}, duration);
 	};
 	
+	const handleMouseup = () => {
+		clearTimeout(timer)
+	};
+
 	node.addEventListener('mousedown', handleMousedown);
+	node.addEventListener('mouseup', handleMouseup);
 
 	return {
 		update(newDuration) {
@@ -15,6 +22,7 @@ export function longpress(node, duration) {
 		},
 		destroy() {
 			node.removeEventListener('mousedown', handleMousedown);
+			node.removeEventListener('mouseup', handleMouseup);
 		}
 	};
 }

site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md

@@ -10,8 +10,10 @@ We can change the action function to accept a `duration` as a second argument, a
 
 ```js
 export function longpress(node, duration) {
+	// ...
+
 	const handleMousedown = () => {
-		setTimeout(() => {
+		timer = setTimeout(() => {
 			node.dispatchEvent(
 				new CustomEvent('longpress')
 			);
@@ -37,9 +39,7 @@ return {
 	update(newDuration) {
 		duration = newDuration;
 	},
-	destroy() {
-		node.removeEventListener('mousedown', handleMousedown);
-	}
+	// ...
 };
 ```
 

src/runtime/internal/dom.ts

@@ -237,6 +237,7 @@ export function add_resize_listener(element, fn) {
 
 	const object = document.createElement('object');
 	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;
 

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

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

test/runtime/samples/binding-width-height-a11y/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	let offsetWidth = 0;
+	let offsetHeight = 0;
+</script>
+
+<div bind:offsetHeight bind:offsetWidth>
+
+	<h1>Hello</h1>
+
+</div>