From a6c05ed3728c7b3b2e08fdb83fa58ab46a58ad5f Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 22 May 2019 12:00:22 -0400 Subject: [PATCH 1/7] site: add /faq redirect to GitHub wiki FAQ --- site/src/routes/faq.js | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 site/src/routes/faq.js diff --git a/site/src/routes/faq.js b/site/src/routes/faq.js new file mode 100644 index 0000000000..6263494a4c --- /dev/null +++ b/site/src/routes/faq.js @@ -0,0 +1,4 @@ +export function get(req, res) { + res.writeHead(302, { Location: 'https://github.com/sveltejs/svelte/wiki/FAQ' }); + res.end(); +} \ No newline at end of file From dabc9c3e5310316d82bfd8ef16f13e9a4fed3e66 Mon Sep 17 00:00:00 2001 From: Benjamin Milde Date: Fri, 24 May 2019 17:13:58 +0200 Subject: [PATCH 2/7] Allow binding of
open --- src/compile/nodes/Element.ts | 10 ++- .../render-dom/wrappers/Element/index.ts | 6 ++ test/js/samples/bind-open/expected.js | 69 +++++++++++++++++++ test/js/samples/bind-open/input.svelte | 7 ++ .../samples/binding-details-open/_config.js | 25 +++++++ .../samples/binding-details-open/main.svelte | 9 +++ 6 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 test/js/samples/bind-open/expected.js create mode 100644 test/js/samples/bind-open/input.svelte create mode 100644 test/runtime/samples/binding-details-open/_config.js create mode 100644 test/runtime/samples/binding-details-open/main.svelte diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts index ac2b81b3e7..2b76d68e6d 100644 --- a/src/compile/nodes/Element.ts +++ b/src/compile/nodes/Element.ts @@ -544,7 +544,7 @@ export default class Element extends Node { message: `'group' binding can only be used with or ` }); } - } else if (name == 'files') { + } else if (name === 'files') { if (this.name !== 'input') { component.error(binding, { code: `invalid-binding`, @@ -560,6 +560,14 @@ export default class Element extends Node { message: `'files' binding can only be used with ` }); } + + } else if (name === 'open') { + if (this.name !== 'details') { + component.error(binding, { + code: `invalid-binding`, + message: `'${name}' binding can only be used with
` + }); + } } else if ( name === 'currentTime' || name === 'duration' || diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index 22ea7a78cd..ad85a46db3 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -91,6 +91,12 @@ const events = [ name === 'playbackRate' }, + // details event + { + event_names: ['toggle'], + filter: (node: Element, name: string) => + node.name === 'details' + }, ]; export default class ElementWrapper extends Wrapper { diff --git a/test/js/samples/bind-open/expected.js b/test/js/samples/bind-open/expected.js new file mode 100644 index 0000000000..7c73c8ddac --- /dev/null +++ b/test/js/samples/bind-open/expected.js @@ -0,0 +1,69 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + detach, + element, + init, + insert, + listen, + noop, + safe_not_equal +} from "svelte/internal"; + +function create_fragment(ctx) { + var details, dispose; + + return { + c() { + details = element("details"); + details.innerHTML = `summarycontent + `; + dispose = listen(details, "toggle", ctx.details_toggle_handler); + }, + + m(target, anchor) { + insert(target, details, anchor); + + details.open = ctx.open; + }, + + p(changed, ctx) { + if (changed.open) details.open = ctx.open; + }, + + i: noop, + o: noop, + + d(detaching) { + if (detaching) { + detach(details); + } + + dispose(); + } + }; +} + +function instance($$self, $$props, $$invalidate) { + let { open } = $$props; + + function details_toggle_handler() { + open = this.open; + $$invalidate('open', open); + } + + $$self.$set = $$props => { + if ('open' in $$props) $$invalidate('open', open = $$props.open); + }; + + return { open, details_toggle_handler }; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal, ["open"]); + } +} + +export default Component; diff --git a/test/js/samples/bind-open/input.svelte b/test/js/samples/bind-open/input.svelte new file mode 100644 index 0000000000..3dd2b03a73 --- /dev/null +++ b/test/js/samples/bind-open/input.svelte @@ -0,0 +1,7 @@ + + +
+ summarycontent +
diff --git a/test/runtime/samples/binding-details-open/_config.js b/test/runtime/samples/binding-details-open/_config.js new file mode 100644 index 0000000000..e5e81b2c93 --- /dev/null +++ b/test/runtime/samples/binding-details-open/_config.js @@ -0,0 +1,25 @@ +export default { + html: ` +
toggle
+ `, + + async test({ assert, component, target, window }) { + const details = target.querySelector('details'); + const event = new window.Event('toggle'); + + details.open = true; + await details.dispatchEvent(event); + assert.equal(component.open, true); + assert.htmlEqual(target.innerHTML, ` +
toggle
+

hello!

+ `); + + details.open = false; + await details.dispatchEvent(event); + assert.equal(component.open, false); + assert.htmlEqual(target.innerHTML, ` +
toggle
+ `); + } +}; diff --git a/test/runtime/samples/binding-details-open/main.svelte b/test/runtime/samples/binding-details-open/main.svelte new file mode 100644 index 0000000000..3a7a08e121 --- /dev/null +++ b/test/runtime/samples/binding-details-open/main.svelte @@ -0,0 +1,9 @@ + + +
toggle
+ +{#if visible} +

hello!

+{/if} From 2f80667f207432f1154fb22ea735f03f1654793d Mon Sep 17 00:00:00 2001 From: Conduitry Date: Fri, 24 May 2019 12:05:18 -0400 Subject: [PATCH 3/7] site: actions tutorial: destroy is not required (#2776) --- site/content/tutorial/12-actions/01-actions/text.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/content/tutorial/12-actions/01-actions/text.md b/site/content/tutorial/12-actions/01-actions/text.md index 279dc3123f..38de8f9a65 100644 --- a/site/content/tutorial/12-actions/01-actions/text.md +++ b/site/content/tutorial/12-actions/01-actions/text.md @@ -27,7 +27,7 @@ import { pannable } from './pannable.js'; > ``` -Open the `pannable.js` file. Like transition functions, an action function receives a `node` and some optional parameters, and returns an action object. That object must have a `destroy` function, which is called when the element is unmounted. +Open the `pannable.js` file. Like transition functions, an action function receives a `node` and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted. We want to fire `panstart` event when the user mouses down on the element, `panmove` events (with `dx` and `dy` properties showing how far the mouse moved) when they drag it, and `panend` events when they mouse up. One possible implementation looks like this: @@ -84,4 +84,3 @@ export function pannable(node) { Update the `pannable` function and try moving the box around. > This implementation is for demonstration purposes — a more complete one would also consider touch events. - From a5fe09c48154c9b993dfc5386e8f7c72ce748d09 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 24 May 2019 14:12:41 -0400 Subject: [PATCH 4/7] treat requestAnimationFrame as a noop on the server --- package-lock.json | 2 +- src/compile/render-dom/wrappers/Element/index.ts | 2 +- src/internal/loop.js | 6 +++--- src/internal/style_manager.js | 3 ++- src/internal/utils.js | 8 ++++++-- 5 files changed, 13 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb2b7d7d7e..28ecb0eedb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.4.0", + "version": "3.4.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index 22ea7a78cd..ad624c8d6c 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -455,7 +455,7 @@ export default class ElementWrapper extends Wrapper { function ${handler}() { ${animation_frame && deindent` cancelAnimationFrame(${animation_frame}); - if (!${this.var}.paused) ${animation_frame} = requestAnimationFrame(${handler});`} + if (!${this.var}.paused) ${animation_frame} = @raf(${handler});`} ${needs_lock && `${lock} = true;`} ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', ctx' : ''}); } diff --git a/src/internal/loop.js b/src/internal/loop.js index 8150727441..60c7df4d70 100644 --- a/src/internal/loop.js +++ b/src/internal/loop.js @@ -1,4 +1,4 @@ -import { now } from './utils.js'; +import { now, raf } from './utils.js'; const tasks = new Set(); let running = false; @@ -12,7 +12,7 @@ function run_tasks() { }); running = tasks.size > 0; - if (running) requestAnimationFrame(run_tasks); + if (running) raf(run_tasks); } export function clear_loops() { @@ -26,7 +26,7 @@ export function loop(fn) { if (!running) { running = true; - requestAnimationFrame(run_tasks); + raf(run_tasks); } return { diff --git a/src/internal/style_manager.js b/src/internal/style_manager.js index d71e922f01..3679470399 100644 --- a/src/internal/style_manager.js +++ b/src/internal/style_manager.js @@ -1,4 +1,5 @@ import { element } from './dom.js'; +import { raf } from './utils.js'; let stylesheet; let active = 0; @@ -56,7 +57,7 @@ export function delete_rule(node, name) { } export function clear_rules() { - requestAnimationFrame(() => { + raf(() => { if (active) return; let i = stylesheet.cssRules.length; while (i--) stylesheet.deleteRule(i); diff --git a/src/internal/utils.js b/src/internal/utils.js index e6d66d8717..c493eacb96 100644 --- a/src/internal/utils.js +++ b/src/internal/utils.js @@ -80,11 +80,15 @@ export function exclude_internal_props(props) { return result; } -export let now = typeof window !== 'undefined' +const is_client = typeof window !== 'undefined'; + +export let now = is_client ? () => window.performance.now() : () => Date.now(); // used internally for testing export function set_now(fn) { now = fn; -} \ No newline at end of file +} + +export const raf = is_client ? requestAnimationFrame : noop; \ No newline at end of file From 4c805018e4d20218e95017ca571fa908f10cdaec Mon Sep 17 00:00:00 2001 From: Elliot Waite <1767836+elliotwaite@users.noreply.github.com> Date: Fri, 24 May 2019 15:55:18 -1000 Subject: [PATCH 5/7] Fix CRUD example to allow changing input values. Currently, the first name and last name inputs fields can't be edited without the changes immediately being overwritten back to the selected person's first name and last name. This change will make it so that the input fields only get overwritten with the selected person's first name and last name when the selected person is changed. --- site/content/examples/19-7guis/05-7guis-crud/App.svelte | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/site/content/examples/19-7guis/05-7guis-crud/App.svelte b/site/content/examples/19-7guis/05-7guis-crud/App.svelte index 1f39fe6642..a0d6ef7f3e 100644 --- a/site/content/examples/19-7guis/05-7guis-crud/App.svelte +++ b/site/content/examples/19-7guis/05-7guis-crud/App.svelte @@ -30,10 +30,7 @@ $: selected = filteredPeople[i]; - $: { - first = selected ? selected.first : ''; - last = selected ? selected.last : ''; - } + $: reset_inputs(selected); function create() { people = people.concat({ first, last }); @@ -53,7 +50,8 @@ } function reset_inputs(person) { - ({ first, last } = person); + first = person ? person.first : ''; + last = person ? person.last : ''; } From 9d53f568fab23b82c8b344c5969c8bfab44de03a Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 25 May 2019 11:25:09 +0100 Subject: [PATCH 6/7] fix tests --- src/internal/utils.js | 6 +++++- test/js/samples/debug-hoisted/expected.js | 2 +- test/js/samples/media-bindings/expected.js | 3 ++- test/runtime/index.js | 6 +++--- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/internal/utils.js b/src/internal/utils.js index c493eacb96..7823a5b920 100644 --- a/src/internal/utils.js +++ b/src/internal/utils.js @@ -86,9 +86,13 @@ export let now = is_client ? () => window.performance.now() : () => Date.now(); +export let raf = is_client ? requestAnimationFrame : noop; + // used internally for testing export function set_now(fn) { now = fn; } -export const raf = is_client ? requestAnimationFrame : noop; \ No newline at end of file +export function set_raf(fn) { + raf = fn; +} \ No newline at end of file diff --git a/test/js/samples/debug-hoisted/expected.js b/test/js/samples/debug-hoisted/expected.js index 153f92bad8..51d8bf63a3 100644 --- a/test/js/samples/debug-hoisted/expected.js +++ b/test/js/samples/debug-hoisted/expected.js @@ -53,4 +53,4 @@ class Component extends SvelteComponentDev { } } -export default Component; +export default Component; \ 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 8a193f698b..f45f9ce8db 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -8,6 +8,7 @@ import { insert, listen, noop, + raf, run_all, safe_not_equal, time_ranges_to_array @@ -18,7 +19,7 @@ function create_fragment(ctx) { function audio_timeupdate_handler() { cancelAnimationFrame(audio_animationframe); - if (!audio.paused) audio_animationframe = requestAnimationFrame(audio_timeupdate_handler); + if (!audio.paused) audio_animationframe = raf(audio_timeupdate_handler); audio_updating = true; ctx.audio_timeupdate_handler.call(audio); } diff --git a/test/runtime/index.js b/test/runtime/index.js index db02ce13d4..fd5ffdef04 100644 --- a/test/runtime/index.js +++ b/test/runtime/index.js @@ -3,7 +3,7 @@ import * as path from "path"; import * as fs from "fs"; import { rollup } from 'rollup'; import * as virtual from 'rollup-plugin-virtual'; -import { clear_loops, set_now } from "../../internal.js"; +import { clear_loops, set_now, set_raf } from "../../internal.js"; import { showOutput, @@ -101,7 +101,7 @@ describe("runtime", () => { } }; set_now(() => raf.time); - global.requestAnimationFrame = cb => { + set_raf(cb => { let called = false; raf.callback = () => { if (!called) { @@ -109,7 +109,7 @@ describe("runtime", () => { cb(); } }; - }; + }); try { mod = require(`./samples/${dir}/main.svelte`); From cce9f14e380db04f1365ca97ca0acc4f0ca1f619 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 26 May 2019 13:49:06 +0200 Subject: [PATCH 7/7] fix test --- test/runtime/samples/binding-details-open/_config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/runtime/samples/binding-details-open/_config.js b/test/runtime/samples/binding-details-open/_config.js index e5e81b2c93..cf2459c3f1 100644 --- a/test/runtime/samples/binding-details-open/_config.js +++ b/test/runtime/samples/binding-details-open/_config.js @@ -9,7 +9,7 @@ export default { details.open = true; await details.dispatchEvent(event); - assert.equal(component.open, true); + assert.equal(component.visible, true); assert.htmlEqual(target.innerHTML, `
toggle

hello!

@@ -17,9 +17,9 @@ export default { details.open = false; await details.dispatchEvent(event); - assert.equal(component.open, false); + assert.equal(component.visible, false); assert.htmlEqual(target.innerHTML, ` -
toggle
+
toggle
`); } };