diff --git a/.eslintrc.js b/.eslintrc.js index 2023207f74..946a157e40 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -35,13 +35,9 @@ module.exports = { argsIgnorePattern: '^_' } ], - '@typescript-eslint/no-object-literal-type-assertion': [ - 'error', - { - allowAsParameter: true - } - ], - '@typescript-eslint/no-unused-vars': 'off' + '@typescript-eslint/no-object-literal-type-assertion': 'off', + '@typescript-eslint/no-unused-vars': 'off', + '@typescript-eslint/prefer-interface': 'off' }, globals: { globalThis: false diff --git a/.gitignore b/.gitignore index 1de9283c03..053f905294 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ node_modules /scratch/ /coverage/ /coverage.lcov +/test/*/samples/_ /test/sourcemaps/samples/*/output.js /test/sourcemaps/samples/*/output.js.map /test/sourcemaps/samples/*/output.css diff --git a/CHANGELOG.md b/CHANGELOG.md index ccdf043a72..634f85fb3e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,40 @@ # Svelte changelog -## Unreleased +## 3.16.0 + +* Use bitmasks to track changes ([#3945](https://github.com/sveltejs/svelte/pull/3945)) +* Fix heisenbug with component styles ([#3977](https://github.com/sveltejs/svelte/issues/3977)) +* Do not warn about missing expected props for `export function foo() {}` ([#3954](https://github.com/sveltejs/svelte/issues/3954)) +* Fix `context="module"` exports with the same name as an instance variable ([#3983](https://github.com/sveltejs/svelte/issues/3983)) +* Fix binding to contextual values from `{#each}` blocks referring to global variables ([#3992](https://github.com/sveltejs/svelte/issues/3992)) +* Use `requestAnimationFrame` callback argument for smoother transitions ([#4014](https://github.com/sveltejs/svelte/pull/4014)) +* Fix `listen_dev` argument order ([#4016](https://github.com/sveltejs/svelte/pull/4016)) + +## 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)) +* Fix entity encoding issue in text nodes with constant expressions ([#3911](https://github.com/sveltejs/svelte/issues/3911)) +* Make code for unknown prop warnings compatible with older js engines ([#3914](https://github.com/sveltejs/svelte/issues/3914)) + +## 3.14.0 + +* Add `loopGuardTimeout` option that augments `for`/`while` loops to prevent infinite loops, primarily for use in the REPL ([#3887](https://github.com/sveltejs/svelte/pull/3887)) +* Keep component bindings in sync when changed in reactive statements ([#3382](https://github.com/sveltejs/svelte/issues/3382)) +* Update attributes before bindings ([#3857](https://github.com/sveltejs/svelte/issues/3857)) +* Prevent variable naming conflict ([#3899](https://github.com/sveltejs/svelte/issues/3899)) + + +## 3.13.0 * New structured code generation, which eliminates a number of edge cases and obscure bugs ([#3539](https://github.com/sveltejs/svelte/pull/3539)) @@ -25,6 +59,23 @@ Also: * Throw exception immediately when calling `createEventDispatcher()` after component instantiation ([#3667](https://github.com/sveltejs/svelte/pull/3667)) * Fix globals shadowing contextual template scope ([#3674](https://github.com/sveltejs/svelte/issues/3674)) * Fix `` bindings to stores ([#3832](https://github.com/sveltejs/svelte/issues/3832)) +* Deconflict generated var names with builtins ([#3724](https://github.com/sveltejs/svelte/issues/3724)) +* Allow spring/tweened values to be initially undefined ([#3761](https://github.com/sveltejs/svelte/issues/3761)) +* Warn if using `` without `customElement: true` option ([#3782](https://github.com/sveltejs/svelte/pull/3782)) +* Add `Event` to list of known globals ([#3810](https://github.com/sveltejs/svelte/pull/3810)) +* Throw helpful error on empty CSS declaration ([#3801](https://github.com/sveltejs/svelte/issues/3801)) +* Support `easing` param on `fade` transition ([#3823](https://github.com/sveltejs/svelte/pull/3823)) +* Generate valid names from filenames with unicode characters ([#3845](https://github.com/sveltejs/svelte/issues/3845)) +* Don't generate any code for markup-less components ([#2200](https://github.com/sveltejs/svelte/issues/2200)) +* Deconflict with internal name `block` ([#3854](https://github.com/sveltejs/svelte/issues/3854)) +* Set attributes before bindings, to prevent erroneous assignments to `input.files` ([#3828](https://github.com/sveltejs/svelte/issues/3828)) +* Smarter unused CSS detection ([#3825](https://github.com/sveltejs/svelte/pull/3825)) +* Allow dynamic event handlers ([#3040](https://github.com/sveltejs/svelte/issues/3040)) +* Prevent erroneous `"undefined"` class name ([#3876](https://github.com/sveltejs/svelte/pull/3876)) +* Prevent resetting of `src` attribute unless changed ([#3579](https://github.com/sveltejs/svelte/pull/3579)) +* Prevent hydration of void element 'children' ([#3882](https://github.com/sveltejs/svelte/issues/3882)) +* Hoist globals even if mentioned in ` - destroy() { - tooltip.remove(); - node.removeEventListener('mouseenter', append); - node.removeEventListener('mouseleave', remove); - } - }; - } + - function toggleLanguage() { - language = language === 'english' ? 'latin' : 'english' - } - + - \ No newline at end of file +{#if pressed} +

congratulations, you pressed and held for {duration}ms

+{/if} \ No newline at end of file diff --git a/site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js b/site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js new file mode 100644 index 0000000000..9d807cb13a --- /dev/null +++ b/site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js @@ -0,0 +1,28 @@ +export function longpress(node, duration) { + let timer; + + const handleMousedown = () => { + timer = setTimeout(() => { + node.dispatchEvent( + new CustomEvent('longpress') + ); + }, duration); + }; + + const handleMouseup = () => { + clearTimeout(timer) + }; + + node.addEventListener('mousedown', handleMousedown); + node.addEventListener('mouseup', handleMouseup); + + return { + update(newDuration) { + duration = newDuration; + }, + destroy() { + node.removeEventListener('mousedown', handleMousedown); + node.removeEventListener('mouseup', handleMouseup); + } + }; +} \ No newline at end of file diff --git a/site/content/examples/20-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte index f55aeb0d83..aec623d2a4 100644 --- a/site/content/examples/20-7guis/05-7guis-crud/App.svelte +++ b/site/content/examples/20-7guis/05-7guis-crud/App.svelte @@ -2,18 +2,9 @@ ``` -> The `svelte/easing` module contains the [Penner easing equations](http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1. +> The `svelte/easing` module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1. The full set of options available to `tweened`: @@ -37,4 +37,4 @@ The full set of options available to `tweened`: * `easing` — a `p => t` function * `interpolate` — a custom `(from, to) => t => value` function for interpolating between arbitrary values. By default, Svelte will interpolate between numbers, dates, and identically-shaped arrays and objects (as long as they only contain numbers and dates or other valid arrays and objects). If you want to interpolate (for example) colour strings or transformation matrices, supply a custom interpolator -You can also pass these options to `progress.set` and `progress.update` as a second argument, in which case they will override the defaults. The `set` and `update` methods both return a promise that resolves when the tween completes. \ No newline at end of file +You can also pass these options to `progress.set` and `progress.update` as a second argument, in which case they will override the defaults. The `set` and `update` methods both return a promise that resolves when the tween completes. diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte index 0bd9d56113..8ed286b574 100644 --- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte +++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte @@ -1,70 +1,20 @@ - destroy() { - tooltip.remove(); - node.removeEventListener('mouseenter', append); - node.removeEventListener('mouseleave', remove); - } - }; - } + - function toggleLanguage() { - language = language === 'english' ? 'latin' : 'english' - } - + - \ No newline at end of file +{#if pressed} +

congratulations, you pressed and held for {duration}ms

+{/if} \ No newline at end of file diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js new file mode 100644 index 0000000000..00bb9d05c8 --- /dev/null +++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js @@ -0,0 +1,25 @@ +export function longpress(node, duration) { + let timer; + + const handleMousedown = () => { + 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); + } + }; +} \ No newline at end of file diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte index 0bd9d56113..d6eaa0ff12 100644 --- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte +++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte @@ -1,70 +1,20 @@ - destroy() { - tooltip.remove(); - node.removeEventListener('mouseenter', append); - node.removeEventListener('mouseleave', remove); - } - }; - } + - function toggleLanguage() { - language = language === 'english' ? 'latin' : 'english' - } - + - \ No newline at end of file +{#if pressed} +

congratulations, you pressed and held for {duration}ms

+{/if} \ No newline at end of file diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js new file mode 100644 index 0000000000..9d807cb13a --- /dev/null +++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js @@ -0,0 +1,28 @@ +export function longpress(node, duration) { + let timer; + + const handleMousedown = () => { + timer = setTimeout(() => { + node.dispatchEvent( + new CustomEvent('longpress') + ); + }, duration); + }; + + const handleMouseup = () => { + clearTimeout(timer) + }; + + node.addEventListener('mousedown', handleMousedown); + node.addEventListener('mouseup', handleMouseup); + + return { + update(newDuration) { + duration = newDuration; + }, + destroy() { + node.removeEventListener('mousedown', handleMousedown); + node.removeEventListener('mouseup', handleMouseup); + } + }; +} \ No newline at end of file diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md index e6262b2f6c..0cb3b7aeca 100644 --- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md +++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md @@ -2,4 +2,45 @@ title: Adding parameters --- -TODO come up with a better example \ No newline at end of file +Like transitions and animations, an action can take an argument, which the action function will be called with alongside the element it belongs to. + +Here, we're using a `longpress` action that fires an event with the same name whenever the user presses and holds the button for a given duration. Right now, if you switch over to the `longpress.js` file, you'll see it's hardcoded to 500ms. + +We can change the action function to accept a `duration` as a second argument, and pass that `duration` to the `setTimeout` call: + +```js +export function longpress(node, duration) { + // ... + + const handleMousedown = () => { + timer = setTimeout(() => { + node.dispatchEvent( + new CustomEvent('longpress') + ); + }, duration); + }; + + // ... +} +``` + +Back in `App.svelte`, we can pass the `duration` value to the action: + +```html + + +

+ +

{ number }

+ + \ No newline at end of file diff --git a/test/js/samples/event-handler-no-passive/expected.js b/test/js/samples/event-handler-no-passive/expected.js index bd6f2230a5..6f04e67808 100644 --- a/test/js/samples/event-handler-no-passive/expected.js +++ b/test/js/samples/event-handler-no-passive/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, diff --git a/test/js/samples/event-modifiers/expected.js b/test/js/samples/event-modifiers/expected.js index 831374f988..3f324bb76d 100644 --- a/test/js/samples/event-modifiers/expected.js +++ b/test/js/samples/event-modifiers/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/head-no-whitespace/expected.js b/test/js/samples/head-no-whitespace/expected.js index 87c7b53260..444bad3fd4 100644 --- a/test/js/samples/head-no-whitespace/expected.js +++ b/test/js/samples/head-no-whitespace/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/hoisted-const/expected.js b/test/js/samples/hoisted-const/expected.js index f47afe2d49..2842b54751 100644 --- a/test/js/samples/hoisted-const/expected.js +++ b/test/js/samples/hoisted-const/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/hoisted-let/expected.js b/test/js/samples/hoisted-let/expected.js index f570417d10..285b124118 100644 --- a/test/js/samples/hoisted-let/expected.js +++ b/test/js/samples/hoisted-let/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/hydrated-void-element/_config.js b/test/js/samples/hydrated-void-element/_config.js new file mode 100644 index 0000000000..84c0d733ef --- /dev/null +++ b/test/js/samples/hydrated-void-element/_config.js @@ -0,0 +1,5 @@ +export default { + options: { + hydratable: true + } +}; \ No newline at end of file diff --git a/test/js/samples/hydrated-void-element/expected.js b/test/js/samples/hydrated-void-element/expected.js new file mode 100644 index 0000000000..e53d16d925 --- /dev/null +++ b/test/js/samples/hydrated-void-element/expected.js @@ -0,0 +1,64 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + attr, + children, + claim_element, + claim_space, + detach, + element, + init, + insert, + noop, + safe_not_equal, + space +} from "svelte/internal"; + +function create_fragment(ctx) { + let img; + let img_src_value; + let t; + let div; + + return { + c() { + img = element("img"); + t = space(); + div = element("div"); + this.h(); + }, + l(nodes) { + img = claim_element(nodes, "IMG", { src: true, alt: true }); + t = claim_space(nodes); + div = claim_element(nodes, "DIV", {}); + children(div).forEach(detach); + this.h(); + }, + h() { + if (img.src !== (img_src_value = "donuts.jpg")) attr(img, "src", img_src_value); + attr(img, "alt", "donuts"); + }, + m(target, anchor) { + insert(target, img, anchor); + insert(target, t, anchor); + insert(target, div, anchor); + }, + p: noop, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(img); + if (detaching) detach(t); + if (detaching) detach(div); + } + }; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, null, create_fragment, safe_not_equal, {}); + } +} + +export default Component; \ No newline at end of file diff --git a/test/js/samples/hydrated-void-element/input.svelte b/test/js/samples/hydrated-void-element/input.svelte new file mode 100644 index 0000000000..d70b3eaf12 --- /dev/null +++ b/test/js/samples/hydrated-void-element/input.svelte @@ -0,0 +1,2 @@ +donuts +
\ No newline at end of file diff --git a/test/js/samples/if-block-complex/expected.js b/test/js/samples/if-block-complex/expected.js index 05ce7d49fa..a8244de8b0 100644 --- a/test/js/samples/if-block-complex/expected.js +++ b/test/js/samples/if-block-complex/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, @@ -28,7 +29,7 @@ function create_if_block(ctx) { } function create_fragment(ctx) { - let show_if = ctx.item.divider && ctx.item.divider.includes(1); + let show_if = /*item*/ ctx[0].divider && /*item*/ ctx[0].divider.includes(1); let if_block_anchor; let if_block = show_if && create_if_block(ctx); @@ -53,7 +54,7 @@ function create_fragment(ctx) { function instance($$self) { let item = { divider: [1] }; - return { item }; + return [item]; } class Component extends SvelteComponent { diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js index 51bffe0613..f225c221bf 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, @@ -26,6 +27,7 @@ function create_else_block(ctx) { }; } +// (5:0) {#if foo} function create_if_block(ctx) { let p; @@ -46,12 +48,12 @@ function create_if_block(ctx) { function create_fragment(ctx) { let if_block_anchor; - function select_block_type(changed, ctx) { - if (ctx.foo) return create_if_block; + function select_block_type(ctx, dirty) { + if (/*foo*/ ctx[0]) return create_if_block; return create_else_block; } - let current_block_type = select_block_type(null, ctx); + let current_block_type = select_block_type(ctx, -1); let if_block = current_block_type(ctx); return { @@ -63,8 +65,8 @@ function create_fragment(ctx) { if_block.m(target, anchor); insert(target, if_block_anchor, anchor); }, - p(changed, ctx) { - if (current_block_type !== (current_block_type = select_block_type(changed, ctx))) { + p(ctx, [dirty]) { + if (current_block_type !== (current_block_type = select_block_type(ctx, dirty))) { if_block.d(1); if_block = current_block_type(ctx); @@ -87,10 +89,10 @@ function instance($$self, $$props, $$invalidate) { let { foo } = $$props; $$self.$set = $$props => { - if ("foo" in $$props) $$invalidate("foo", foo = $$props.foo); + if ("foo" in $$props) $$invalidate(0, foo = $$props.foo); }; - return { foo }; + return [foo]; } class Component extends SvelteComponent { diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js index 74472a4460..b9fad863e2 100644 --- a/test/js/samples/if-block-simple/expected.js +++ b/test/js/samples/if-block-simple/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, @@ -28,7 +29,7 @@ function create_if_block(ctx) { function create_fragment(ctx) { let if_block_anchor; - let if_block = ctx.foo && create_if_block(ctx); + let if_block = /*foo*/ ctx[0] && create_if_block(ctx); return { c() { @@ -39,8 +40,8 @@ function create_fragment(ctx) { if (if_block) if_block.m(target, anchor); insert(target, if_block_anchor, anchor); }, - p(changed, ctx) { - if (ctx.foo) { + p(ctx, [dirty]) { + if (/*foo*/ ctx[0]) { if (!if_block) { if_block = create_if_block(ctx); if_block.c(); @@ -66,10 +67,10 @@ function instance($$self, $$props, $$invalidate) { let { foo } = $$props; $$self.$set = $$props => { - if ("foo" in $$props) $$invalidate("foo", foo = $$props.foo); + if ("foo" in $$props) $$invalidate(0, foo = $$props.foo); }; - return { foo }; + return [foo]; } class Component extends SvelteComponent { diff --git a/test/js/samples/inline-style-optimized-multiple/expected.js b/test/js/samples/inline-style-optimized-multiple/expected.js index d29504ec27..84a38abd7b 100644 --- a/test/js/samples/inline-style-optimized-multiple/expected.js +++ b/test/js/samples/inline-style-optimized-multiple/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, @@ -15,19 +16,19 @@ function create_fragment(ctx) { return { c() { div = element("div"); - set_style(div, "color", ctx.color); - set_style(div, "transform", "translate(" + ctx.x + "px," + ctx.y + "px)"); + set_style(div, "color", /*color*/ ctx[0]); + set_style(div, "transform", "translate(" + /*x*/ ctx[1] + "px," + /*y*/ ctx[2] + "px)"); }, m(target, anchor) { insert(target, div, anchor); }, - p(changed, ctx) { - if (changed.color) { - set_style(div, "color", ctx.color); + p(ctx, [dirty]) { + if (dirty & /*color*/ 1) { + set_style(div, "color", /*color*/ ctx[0]); } - if (changed.x || changed.y) { - set_style(div, "transform", "translate(" + ctx.x + "px," + ctx.y + "px)"); + if (dirty & /*x, y*/ 6) { + set_style(div, "transform", "translate(" + /*x*/ ctx[1] + "px," + /*y*/ ctx[2] + "px)"); } }, i: noop, @@ -44,18 +45,18 @@ function instance($$self, $$props, $$invalidate) { let { y } = $$props; $$self.$set = $$props => { - if ("color" in $$props) $$invalidate("color", color = $$props.color); - if ("x" in $$props) $$invalidate("x", x = $$props.x); - if ("y" in $$props) $$invalidate("y", y = $$props.y); + if ("color" in $$props) $$invalidate(0, color = $$props.color); + if ("x" in $$props) $$invalidate(1, x = $$props.x); + if ("y" in $$props) $$invalidate(2, y = $$props.y); }; - return { color, x, y }; + return [color, x, y]; } class Component extends SvelteComponent { constructor(options) { super(); - init(this, options, instance, create_fragment, safe_not_equal, { color: 0, x: 0, y: 0 }); + init(this, options, instance, create_fragment, safe_not_equal, { color: 0, x: 1, y: 2 }); } } diff --git a/test/js/samples/inline-style-optimized-url/expected.js b/test/js/samples/inline-style-optimized-url/expected.js index a76b580c74..77870348a5 100644 --- a/test/js/samples/inline-style-optimized-url/expected.js +++ b/test/js/samples/inline-style-optimized-url/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, @@ -15,14 +16,14 @@ function create_fragment(ctx) { return { c() { div = element("div"); - set_style(div, "background", "url(data:image/png;base64," + ctx.data + ")"); + set_style(div, "background", "url(data:image/png;base64," + /*data*/ ctx[0] + ")"); }, m(target, anchor) { insert(target, div, anchor); }, - p(changed, ctx) { - if (changed.data) { - set_style(div, "background", "url(data:image/png;base64," + ctx.data + ")"); + p(ctx, [dirty]) { + if (dirty & /*data*/ 1) { + set_style(div, "background", "url(data:image/png;base64," + /*data*/ ctx[0] + ")"); } }, i: noop, @@ -37,10 +38,10 @@ function instance($$self, $$props, $$invalidate) { let { data } = $$props; $$self.$set = $$props => { - if ("data" in $$props) $$invalidate("data", data = $$props.data); + if ("data" in $$props) $$invalidate(0, data = $$props.data); }; - return { data }; + return [data]; } class Component extends SvelteComponent { diff --git a/test/js/samples/inline-style-optimized/expected.js b/test/js/samples/inline-style-optimized/expected.js index e953ae7eed..5bef284f09 100644 --- a/test/js/samples/inline-style-optimized/expected.js +++ b/test/js/samples/inline-style-optimized/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, @@ -15,14 +16,14 @@ function create_fragment(ctx) { return { c() { div = element("div"); - set_style(div, "color", ctx.color); + set_style(div, "color", /*color*/ ctx[0]); }, m(target, anchor) { insert(target, div, anchor); }, - p(changed, ctx) { - if (changed.color) { - set_style(div, "color", ctx.color); + p(ctx, [dirty]) { + if (dirty & /*color*/ 1) { + set_style(div, "color", /*color*/ ctx[0]); } }, i: noop, @@ -37,10 +38,10 @@ function instance($$self, $$props, $$invalidate) { let { color } = $$props; $$self.$set = $$props => { - if ("color" in $$props) $$invalidate("color", color = $$props.color); + if ("color" in $$props) $$invalidate(0, color = $$props.color); }; - return { color }; + return [color]; } class Component extends SvelteComponent { diff --git a/test/js/samples/inline-style-unoptimized/expected.js b/test/js/samples/inline-style-unoptimized/expected.js index 7518d5805d..fdff685ead 100644 --- a/test/js/samples/inline-style-unoptimized/expected.js +++ b/test/js/samples/inline-style-unoptimized/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, @@ -14,27 +15,28 @@ function create_fragment(ctx) { let div0; let t; let div1; + let div1_style_value; return { c() { div0 = element("div"); t = space(); div1 = element("div"); - attr(div0, "style", ctx.style); - attr(div1, "style", "" + (ctx.key + ": " + ctx.value)); + attr(div0, "style", /*style*/ ctx[0]); + attr(div1, "style", div1_style_value = "" + (/*key*/ ctx[1] + ": " + /*value*/ ctx[2])); }, m(target, anchor) { insert(target, div0, anchor); insert(target, t, anchor); insert(target, div1, anchor); }, - p(changed, ctx) { - if (changed.style) { - attr(div0, "style", ctx.style); + p(ctx, [dirty]) { + if (dirty & /*style*/ 1) { + attr(div0, "style", /*style*/ ctx[0]); } - if (changed.key || changed.value) { - attr(div1, "style", "" + (ctx.key + ": " + ctx.value)); + if (dirty & /*key, value*/ 6 && div1_style_value !== (div1_style_value = "" + (/*key*/ ctx[1] + ": " + /*value*/ ctx[2]))) { + attr(div1, "style", div1_style_value); } }, i: noop, @@ -53,18 +55,18 @@ function instance($$self, $$props, $$invalidate) { let { value } = $$props; $$self.$set = $$props => { - if ("style" in $$props) $$invalidate("style", style = $$props.style); - if ("key" in $$props) $$invalidate("key", key = $$props.key); - if ("value" in $$props) $$invalidate("value", value = $$props.value); + if ("style" in $$props) $$invalidate(0, style = $$props.style); + if ("key" in $$props) $$invalidate(1, key = $$props.key); + if ("value" in $$props) $$invalidate(2, value = $$props.value); }; - return { style, key, value }; + return [style, key, value]; } class Component extends SvelteComponent { constructor(options) { super(); - init(this, options, instance, create_fragment, safe_not_equal, { style: 0, key: 0, value: 0 }); + init(this, options, instance, create_fragment, safe_not_equal, { style: 0, key: 1, value: 2 }); } } diff --git a/test/js/samples/inline-style-without-updates/expected.js b/test/js/samples/inline-style-without-updates/expected.js index fd101d1acc..375896f259 100644 --- a/test/js/samples/inline-style-without-updates/expected.js +++ b/test/js/samples/inline-style-without-updates/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/input-files/expected.js b/test/js/samples/input-files/expected.js index 256c7e5a5f..c3e46f0c79 100644 --- a/test/js/samples/input-files/expected.js +++ b/test/js/samples/input-files/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, @@ -19,7 +20,7 @@ function create_fragment(ctx) { input = element("input"); attr(input, "type", "file"); input.multiple = true; - dispose = listen(input, "change", ctx.input_change_handler); + dispose = listen(input, "change", /*input_change_handler*/ ctx[1]); }, m(target, anchor) { insert(target, input, anchor); @@ -39,14 +40,14 @@ function instance($$self, $$props, $$invalidate) { function input_change_handler() { files = this.files; - $$invalidate("files", files); + $$invalidate(0, files); } $$self.$set = $$props => { - if ("files" in $$props) $$invalidate("files", files = $$props.files); + if ("files" in $$props) $$invalidate(0, files = $$props.files); }; - return { files, input_change_handler }; + return [files, input_change_handler]; } class Component extends SvelteComponent { diff --git a/test/js/samples/input-no-initial-value/expected.js b/test/js/samples/input-no-initial-value/expected.js index f3067156b5..8ff2b2798b 100644 --- a/test/js/samples/input-no-initial-value/expected.js +++ b/test/js/samples/input-no-initial-value/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -32,20 +33,20 @@ function create_fragment(ctx) { input.required = true; dispose = [ - listen(input, "input", ctx.input_input_handler), - listen(form, "submit", ctx.handleSubmit) + listen(input, "input", /*input_input_handler*/ ctx[2]), + listen(form, "submit", /*handleSubmit*/ ctx[1]) ]; }, m(target, anchor) { insert(target, form, anchor); append(form, input); - set_input_value(input, ctx.test); + set_input_value(input, /*test*/ ctx[0]); append(form, t0); append(form, button); }, - p(changed, ctx) { - if (changed.test && input.value !== ctx.test) { - set_input_value(input, ctx.test); + p(ctx, [dirty]) { + if (dirty & /*test*/ 1 && input.value !== /*test*/ ctx[0]) { + set_input_value(input, /*test*/ ctx[0]); } }, i: noop, @@ -67,14 +68,10 @@ function instance($$self, $$props, $$invalidate) { function input_input_handler() { test = this.value; - $$invalidate("test", test); + $$invalidate(0, test); } - return { - test, - handleSubmit, - input_input_handler - }; + return [test, handleSubmit, input_input_handler]; } class Component extends SvelteComponent { diff --git a/test/js/samples/input-range/expected.js b/test/js/samples/input-range/expected.js index 4b6212c4e7..5a074d9754 100644 --- a/test/js/samples/input-range/expected.js +++ b/test/js/samples/input-range/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, @@ -23,17 +24,17 @@ function create_fragment(ctx) { attr(input, "type", "range"); dispose = [ - listen(input, "change", ctx.input_change_input_handler), - listen(input, "input", ctx.input_change_input_handler) + listen(input, "change", /*input_change_input_handler*/ ctx[1]), + listen(input, "input", /*input_change_input_handler*/ ctx[1]) ]; }, m(target, anchor) { insert(target, input, anchor); - set_input_value(input, ctx.value); + set_input_value(input, /*value*/ ctx[0]); }, - p(changed, ctx) { - if (changed.value) { - set_input_value(input, ctx.value); + p(ctx, [dirty]) { + if (dirty & /*value*/ 1) { + set_input_value(input, /*value*/ ctx[0]); } }, i: noop, @@ -50,14 +51,14 @@ function instance($$self, $$props, $$invalidate) { function input_change_input_handler() { value = to_number(this.value); - $$invalidate("value", value); + $$invalidate(0, value); } $$self.$set = $$props => { - if ("value" in $$props) $$invalidate("value", value = $$props.value); + if ("value" in $$props) $$invalidate(0, value = $$props.value); }; - return { value, input_change_input_handler }; + return [value, input_change_input_handler]; } class Component extends SvelteComponent { diff --git a/test/js/samples/input-without-blowback-guard/expected.js b/test/js/samples/input-without-blowback-guard/expected.js index 921c217197..344976ade6 100644 --- a/test/js/samples/input-without-blowback-guard/expected.js +++ b/test/js/samples/input-without-blowback-guard/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, @@ -18,15 +19,15 @@ function create_fragment(ctx) { c() { input = element("input"); attr(input, "type", "checkbox"); - dispose = listen(input, "change", ctx.input_change_handler); + dispose = listen(input, "change", /*input_change_handler*/ ctx[1]); }, m(target, anchor) { insert(target, input, anchor); - input.checked = ctx.foo; + input.checked = /*foo*/ ctx[0]; }, - p(changed, ctx) { - if (changed.foo) { - input.checked = ctx.foo; + p(ctx, [dirty]) { + if (dirty & /*foo*/ 1) { + input.checked = /*foo*/ ctx[0]; } }, i: noop, @@ -43,14 +44,14 @@ function instance($$self, $$props, $$invalidate) { function input_change_handler() { foo = this.checked; - $$invalidate("foo", foo); + $$invalidate(0, foo); } $$self.$set = $$props => { - if ("foo" in $$props) $$invalidate("foo", foo = $$props.foo); + if ("foo" in $$props) $$invalidate(0, foo = $$props.foo); }; - return { foo, input_change_handler }; + return [foo, input_change_handler]; } class Component extends SvelteComponent { diff --git a/test/js/samples/instrumentation-script-if-no-block/expected.js b/test/js/samples/instrumentation-script-if-no-block/expected.js index 6e9c04f161..4127a6d7d6 100644 --- a/test/js/samples/instrumentation-script-if-no-block/expected.js +++ b/test/js/samples/instrumentation-script-if-no-block/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -28,8 +29,8 @@ function create_fragment(ctx) { t1 = space(); p = element("p"); t2 = text("x: "); - t3 = text(ctx.x); - dispose = listen(button, "click", ctx.foo); + t3 = text(/*x*/ ctx[0]); + dispose = listen(button, "click", /*foo*/ ctx[1]); }, m(target, anchor) { insert(target, button, anchor); @@ -38,8 +39,8 @@ function create_fragment(ctx) { append(p, t2); append(p, t3); }, - p(changed, ctx) { - if (changed.x) set_data(t3, ctx.x); + p(ctx, [dirty]) { + if (dirty & /*x*/ 1) set_data(t3, /*x*/ ctx[0]); }, i: noop, o: noop, @@ -56,10 +57,10 @@ function instance($$self, $$props, $$invalidate) { let x = 0; function foo() { - if (true) $$invalidate("x", x += 1); + if (true) $$invalidate(0, x += 1); } - return { x, foo }; + return [x, foo]; } class Component extends SvelteComponent { diff --git a/test/js/samples/instrumentation-script-x-equals-x/expected.js b/test/js/samples/instrumentation-script-x-equals-x/expected.js index c7652815d8..0d4493baf3 100644 --- a/test/js/samples/instrumentation-script-x-equals-x/expected.js +++ b/test/js/samples/instrumentation-script-x-equals-x/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -18,7 +19,7 @@ function create_fragment(ctx) { let t1; let p; let t2; - let t3_value = ctx.things.length + ""; + let t3_value = /*things*/ ctx[0].length + ""; let t3; let dispose; @@ -30,7 +31,7 @@ function create_fragment(ctx) { p = element("p"); t2 = text("number of things: "); t3 = text(t3_value); - dispose = listen(button, "click", ctx.foo); + dispose = listen(button, "click", /*foo*/ ctx[1]); }, m(target, anchor) { insert(target, button, anchor); @@ -39,8 +40,8 @@ function create_fragment(ctx) { append(p, t2); append(p, t3); }, - p(changed, ctx) { - if (changed.things && t3_value !== (t3_value = ctx.things.length + "")) set_data(t3, t3_value); + p(ctx, [dirty]) { + if (dirty & /*things*/ 1 && t3_value !== (t3_value = /*things*/ ctx[0].length + "")) set_data(t3, t3_value); }, i: noop, o: noop, @@ -58,10 +59,10 @@ function instance($$self, $$props, $$invalidate) { function foo() { things.push(1); - $$invalidate("things", things); + $$invalidate(0, things); } - return { things, foo }; + return [things, foo]; } class Component extends SvelteComponent { diff --git a/test/js/samples/instrumentation-template-if-no-block/expected.js b/test/js/samples/instrumentation-template-if-no-block/expected.js index aa815dfe00..0bd627eb87 100644 --- a/test/js/samples/instrumentation-template-if-no-block/expected.js +++ b/test/js/samples/instrumentation-template-if-no-block/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -28,8 +29,8 @@ function create_fragment(ctx) { t1 = space(); p = element("p"); t2 = text("x: "); - t3 = text(ctx.x); - dispose = listen(button, "click", ctx.click_handler); + t3 = text(/*x*/ ctx[0]); + dispose = listen(button, "click", /*click_handler*/ ctx[1]); }, m(target, anchor) { insert(target, button, anchor); @@ -38,8 +39,8 @@ function create_fragment(ctx) { append(p, t2); append(p, t3); }, - p(changed, ctx) { - if (changed.x) set_data(t3, ctx.x); + p(ctx, [dirty]) { + if (dirty & /*x*/ 1) set_data(t3, /*x*/ ctx[0]); }, i: noop, o: noop, @@ -56,10 +57,10 @@ function instance($$self, $$props, $$invalidate) { let x = 0; const click_handler = () => { - if (true) $$invalidate("x", x += 1); + if (true) $$invalidate(0, x += 1); }; - return { x, click_handler }; + return [x, click_handler]; } class Component extends SvelteComponent { diff --git a/test/js/samples/instrumentation-template-x-equals-x/expected.js b/test/js/samples/instrumentation-template-x-equals-x/expected.js index 5af948efb1..e049a6d39b 100644 --- a/test/js/samples/instrumentation-template-x-equals-x/expected.js +++ b/test/js/samples/instrumentation-template-x-equals-x/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -18,7 +19,7 @@ function create_fragment(ctx) { let t1; let p; let t2; - let t3_value = ctx.things.length + ""; + let t3_value = /*things*/ ctx[0].length + ""; let t3; let dispose; @@ -30,7 +31,7 @@ function create_fragment(ctx) { p = element("p"); t2 = text("number of things: "); t3 = text(t3_value); - dispose = listen(button, "click", ctx.click_handler); + dispose = listen(button, "click", /*click_handler*/ ctx[1]); }, m(target, anchor) { insert(target, button, anchor); @@ -39,8 +40,8 @@ function create_fragment(ctx) { append(p, t2); append(p, t3); }, - p(changed, ctx) { - if (changed.things && t3_value !== (t3_value = ctx.things.length + "")) set_data(t3, t3_value); + p(ctx, [dirty]) { + if (dirty & /*things*/ 1 && t3_value !== (t3_value = /*things*/ ctx[0].length + "")) set_data(t3, t3_value); }, i: noop, o: noop, @@ -58,10 +59,10 @@ function instance($$self, $$props, $$invalidate) { const click_handler = () => { things.push(1); - $$invalidate("things", things); + $$invalidate(0, things); }; - return { things, click_handler }; + return [things, click_handler]; } class Component extends SvelteComponent { diff --git a/test/js/samples/legacy-input-type/expected.js b/test/js/samples/legacy-input-type/expected.js index b067a07dfd..2b76a48522 100644 --- a/test/js/samples/legacy-input-type/expected.js +++ b/test/js/samples/legacy-input-type/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/loop-protect/_config.js b/test/js/samples/loop-protect/_config.js new file mode 100644 index 0000000000..fcbf8be09b --- /dev/null +++ b/test/js/samples/loop-protect/_config.js @@ -0,0 +1,6 @@ +export default { + options: { + dev: true, + loopGuardTimeout: 100, + }, +}; diff --git a/test/js/samples/loop-protect/expected.js b/test/js/samples/loop-protect/expected.js new file mode 100644 index 0000000000..0e7367084d --- /dev/null +++ b/test/js/samples/loop-protect/expected.js @@ -0,0 +1,107 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponentDev, + dispatch_dev, + init, + loop_guard, + noop, + safe_not_equal +} from "svelte/internal"; + +const file = undefined; + +function create_fragment(ctx) { + const block = { + c: noop, + l: function claim(nodes) { + throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); + }, + m: noop, + p: noop, + i: noop, + o: noop, + d: noop + }; + + dispatch_dev("SvelteRegisterBlock", { + block, + id: create_fragment.name, + type: "component", + source: "", + ctx + }); + + return block; +} + +function instance($$self) { + const guard = loop_guard(100); + + while (true) { + foo(); + guard(); + } + + const guard_1 = loop_guard(100); + + for (; ; ) { + foo(); + guard_1(); + } + + const guard_2 = loop_guard(100); + + while (true) { + foo(); + guard_2(); + } + + const guard_4 = loop_guard(100); + + do { + foo(); + guard_4(); + } while (true); + + $$self.$capture_state = () => ({}); + + $$self.$inject_state = () => { + + }; + + $: { + const guard_3 = loop_guard(100); + + while (true) { + foo(); + guard_3(); + } + } + + $: { + const guard_5 = loop_guard(100); + + do { + foo(); + guard_5(); + } while (true); + } + + return []; +} + +class Component extends SvelteComponentDev { + constructor(options) { + super(options); + init(this, options, instance, create_fragment, safe_not_equal, {}); + + dispatch_dev("SvelteRegisterComponent", { + component: this, + tagName: "Component", + options, + id: create_fragment.name + }); + } +} + +export default Component; diff --git a/test/js/samples/loop-protect/input.svelte b/test/js/samples/loop-protect/input.svelte new file mode 100644 index 0000000000..c39ea75f72 --- /dev/null +++ b/test/js/samples/loop-protect/input.svelte @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index a48ac2e500..bfb1b8911d 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, add_render_callback, @@ -28,48 +29,59 @@ function create_fragment(ctx) { audio_updating = true; } - ctx.audio_timeupdate_handler.call(audio); + /*audio_timeupdate_handler*/ ctx[10].call(audio); } return { c() { audio = element("audio"); - if (ctx.played === void 0 || ctx.currentTime === void 0) add_render_callback(audio_timeupdate_handler); - if (ctx.duration === void 0) add_render_callback(() => ctx.audio_durationchange_handler.call(audio)); - if (ctx.buffered === void 0) add_render_callback(() => ctx.audio_progress_handler.call(audio)); - if (ctx.buffered === void 0 || ctx.seekable === void 0) add_render_callback(() => ctx.audio_loadedmetadata_handler.call(audio)); + if (/*played*/ ctx[2] === void 0 || /*currentTime*/ ctx[3] === void 0 || /*ended*/ ctx[9] === void 0) add_render_callback(audio_timeupdate_handler); + if (/*duration*/ ctx[4] === void 0) add_render_callback(() => /*audio_durationchange_handler*/ ctx[11].call(audio)); + if (/*buffered*/ ctx[0] === void 0) add_render_callback(() => /*audio_progress_handler*/ ctx[13].call(audio)); + if (/*buffered*/ ctx[0] === void 0 || /*seekable*/ ctx[1] === void 0) add_render_callback(() => /*audio_loadedmetadata_handler*/ ctx[14].call(audio)); + if (/*seeking*/ ctx[8] === void 0) add_render_callback(() => /*audio_seeking_seeked_handler*/ ctx[17].call(audio)); + if (/*ended*/ ctx[9] === void 0) add_render_callback(() => /*audio_ended_handler*/ ctx[18].call(audio)); dispose = [ listen(audio, "timeupdate", audio_timeupdate_handler), - listen(audio, "durationchange", ctx.audio_durationchange_handler), - listen(audio, "play", ctx.audio_play_pause_handler), - listen(audio, "pause", ctx.audio_play_pause_handler), - listen(audio, "progress", ctx.audio_progress_handler), - listen(audio, "loadedmetadata", ctx.audio_loadedmetadata_handler), - listen(audio, "volumechange", ctx.audio_volumechange_handler), - listen(audio, "ratechange", ctx.audio_ratechange_handler) + listen(audio, "durationchange", /*audio_durationchange_handler*/ ctx[11]), + listen(audio, "play", /*audio_play_pause_handler*/ ctx[12]), + listen(audio, "pause", /*audio_play_pause_handler*/ ctx[12]), + listen(audio, "progress", /*audio_progress_handler*/ ctx[13]), + listen(audio, "loadedmetadata", /*audio_loadedmetadata_handler*/ ctx[14]), + listen(audio, "volumechange", /*audio_volumechange_handler*/ ctx[15]), + listen(audio, "ratechange", /*audio_ratechange_handler*/ ctx[16]), + listen(audio, "seeking", /*audio_seeking_seeked_handler*/ ctx[17]), + listen(audio, "seeked", /*audio_seeking_seeked_handler*/ ctx[17]), + listen(audio, "ended", /*audio_ended_handler*/ ctx[18]) ]; }, m(target, anchor) { insert(target, audio, anchor); - audio.volume = ctx.volume; - audio.playbackRate = ctx.playbackRate; + + if (!isNaN(/*volume*/ ctx[6])) { + audio.volume = /*volume*/ ctx[6]; + } + + if (!isNaN(/*playbackRate*/ ctx[7])) { + audio.playbackRate = /*playbackRate*/ ctx[7]; + } }, - p(changed, ctx) { - if (!audio_updating && changed.currentTime && !isNaN(ctx.currentTime)) { - audio.currentTime = ctx.currentTime; + p(ctx, [dirty]) { + if (!audio_updating && dirty & /*currentTime*/ 8 && !isNaN(/*currentTime*/ ctx[3])) { + audio.currentTime = /*currentTime*/ ctx[3]; } - if (changed.paused && audio_is_paused !== (audio_is_paused = ctx.paused)) { + if (dirty & /*paused*/ 32 && audio_is_paused !== (audio_is_paused = /*paused*/ ctx[5])) { audio[audio_is_paused ? "pause" : "play"](); } - if (changed.volume && !isNaN(ctx.volume)) { - audio.volume = ctx.volume; + if (dirty & /*volume*/ 64 && !isNaN(/*volume*/ ctx[6])) { + audio.volume = /*volume*/ ctx[6]; } - if (changed.playbackRate && !isNaN(ctx.playbackRate)) { - audio.playbackRate = ctx.playbackRate; + if (dirty & /*playbackRate*/ 128 && !isNaN(/*playbackRate*/ ctx[7])) { + audio.playbackRate = /*playbackRate*/ ctx[7]; } audio_updating = false; @@ -92,58 +104,74 @@ function instance($$self, $$props, $$invalidate) { let { paused } = $$props; let { volume } = $$props; let { playbackRate } = $$props; + let { seeking } = $$props; + let { ended } = $$props; function audio_timeupdate_handler() { played = time_ranges_to_array(this.played); currentTime = this.currentTime; - $$invalidate("played", played); - $$invalidate("currentTime", currentTime); + ended = this.ended; + $$invalidate(2, played); + $$invalidate(3, currentTime); + $$invalidate(9, ended); } function audio_durationchange_handler() { duration = this.duration; - $$invalidate("duration", duration); + $$invalidate(4, duration); } function audio_play_pause_handler() { paused = this.paused; - $$invalidate("paused", paused); + $$invalidate(5, paused); } function audio_progress_handler() { buffered = time_ranges_to_array(this.buffered); - $$invalidate("buffered", buffered); + $$invalidate(0, buffered); } function audio_loadedmetadata_handler() { buffered = time_ranges_to_array(this.buffered); seekable = time_ranges_to_array(this.seekable); - $$invalidate("buffered", buffered); - $$invalidate("seekable", seekable); + $$invalidate(0, buffered); + $$invalidate(1, seekable); } function audio_volumechange_handler() { volume = this.volume; - $$invalidate("volume", volume); + $$invalidate(6, volume); } function audio_ratechange_handler() { playbackRate = this.playbackRate; - $$invalidate("playbackRate", playbackRate); + $$invalidate(7, playbackRate); + } + + function audio_seeking_seeked_handler() { + seeking = this.seeking; + $$invalidate(8, seeking); + } + + function audio_ended_handler() { + ended = this.ended; + $$invalidate(9, ended); } $$self.$set = $$props => { - if ("buffered" in $$props) $$invalidate("buffered", buffered = $$props.buffered); - if ("seekable" in $$props) $$invalidate("seekable", seekable = $$props.seekable); - if ("played" in $$props) $$invalidate("played", played = $$props.played); - if ("currentTime" in $$props) $$invalidate("currentTime", currentTime = $$props.currentTime); - if ("duration" in $$props) $$invalidate("duration", duration = $$props.duration); - if ("paused" in $$props) $$invalidate("paused", paused = $$props.paused); - if ("volume" in $$props) $$invalidate("volume", volume = $$props.volume); - if ("playbackRate" in $$props) $$invalidate("playbackRate", playbackRate = $$props.playbackRate); + if ("buffered" in $$props) $$invalidate(0, buffered = $$props.buffered); + if ("seekable" in $$props) $$invalidate(1, seekable = $$props.seekable); + if ("played" in $$props) $$invalidate(2, played = $$props.played); + if ("currentTime" in $$props) $$invalidate(3, currentTime = $$props.currentTime); + if ("duration" in $$props) $$invalidate(4, duration = $$props.duration); + if ("paused" in $$props) $$invalidate(5, paused = $$props.paused); + if ("volume" in $$props) $$invalidate(6, volume = $$props.volume); + if ("playbackRate" in $$props) $$invalidate(7, playbackRate = $$props.playbackRate); + if ("seeking" in $$props) $$invalidate(8, seeking = $$props.seeking); + if ("ended" in $$props) $$invalidate(9, ended = $$props.ended); }; - return { + return [ buffered, seekable, played, @@ -152,14 +180,18 @@ function instance($$self, $$props, $$invalidate) { paused, volume, playbackRate, + seeking, + ended, audio_timeupdate_handler, audio_durationchange_handler, audio_play_pause_handler, audio_progress_handler, audio_loadedmetadata_handler, audio_volumechange_handler, - audio_ratechange_handler - }; + audio_ratechange_handler, + audio_seeking_seeked_handler, + audio_ended_handler + ]; } class Component extends SvelteComponent { @@ -168,13 +200,15 @@ class Component extends SvelteComponent { init(this, options, instance, create_fragment, safe_not_equal, { buffered: 0, - seekable: 0, - played: 0, - currentTime: 0, - duration: 0, - paused: 0, - volume: 0, - playbackRate: 0 + seekable: 1, + played: 2, + currentTime: 3, + duration: 4, + paused: 5, + volume: 6, + playbackRate: 7, + seeking: 8, + ended: 9 }); } } diff --git a/test/js/samples/media-bindings/input.svelte b/test/js/samples/media-bindings/input.svelte index 4b5793ba93..a079a2e0e5 100644 --- a/test/js/samples/media-bindings/input.svelte +++ b/test/js/samples/media-bindings/input.svelte @@ -7,6 +7,8 @@ export let paused; export let volume; export let playbackRate; + export let seeking; + export let ended; -