From 1324a577863b90f29a88268165dfda0e464800bd Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 29 Oct 2019 12:55:41 -0400 Subject: [PATCH 1/7] oops, remove some debugging code --- site/content/examples/15-composition/04-modal/Modal.svelte | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/content/examples/15-composition/04-modal/Modal.svelte b/site/content/examples/15-composition/04-modal/Modal.svelte index 91a2fc26e5..4a5329b05b 100644 --- a/site/content/examples/15-composition/04-modal/Modal.svelte +++ b/site/content/examples/15-composition/04-modal/Modal.svelte @@ -49,8 +49,6 @@ - - argh \ No newline at end of file + From b4c22264384b947d48ccfb7db38aecb70cf16a6d Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Wed, 30 Oct 2019 22:33:53 +0800 Subject: [PATCH 2/7] swapped out expected and actual for asserts in error --- test/runtime/index.js | 2 +- test/server-side-rendering/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/runtime/index.js b/test/runtime/index.js index 14c2143e09..fc989d352f 100644 --- a/test/runtime/index.js +++ b/test/runtime/index.js @@ -190,7 +190,7 @@ describe("runtime", () => { if (typeof config.error === 'function') { config.error(assert, err); } else { - assert.equal(config.error, err.message); + assert.equal(err.message, config.error); } } else { throw err; diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js index d89b47191a..73b286044f 100644 --- a/test/server-side-rendering/index.js +++ b/test/server-side-rendering/index.js @@ -138,7 +138,7 @@ describe("ssr", () => { if (typeof config.error === 'function') { config.error(assert, err); } else { - assert.equal(config.error, err.message); + assert.equal(err.message, config.error); } } else { showOutput(cwd, compileOptions); From 0c8cb44d01d3908e4471ceb94dd9c79dccf8f725 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Sun, 3 Nov 2019 20:50:57 +0800 Subject: [PATCH 3/7] fix window bindings to store (#3835) Fixes #3832 --- .../compile/render_dom/wrappers/Window.ts | 4 +-- test/helpers.js | 1 + .../samples/window-binding-scroll/expected.js | 2 +- .../window-binding-scroll-store/_config.js | 31 +++++++++++++++++++ .../window-binding-scroll-store/main.svelte | 15 +++++++++ 5 files changed, 50 insertions(+), 3 deletions(-) create mode 100644 test/runtime/samples/window-binding-scroll-store/_config.js create mode 100644 test/runtime/samples/window-binding-scroll-store/main.svelte diff --git a/src/compiler/compile/render_dom/wrappers/Window.ts b/src/compiler/compile/render_dom/wrappers/Window.ts index 90846f8a7c..b9a32c03fd 100644 --- a/src/compiler/compile/render_dom/wrappers/Window.ts +++ b/src/compiler/compile/render_dom/wrappers/Window.ts @@ -127,7 +127,7 @@ export default class WindowWrapper extends Wrapper { component.partly_hoisted.push(b` function ${id}() { - ${props.map(prop => b`$$invalidate('${prop.name}', ${prop.name} = @_window.${prop.value});`)} + ${props.map(prop => component.invalidate(prop.name, x`${prop.name} = @_window.${prop.value}`))} } `); @@ -167,7 +167,7 @@ export default class WindowWrapper extends Wrapper { component.partly_hoisted.push(b` function ${id}() { - $$invalidate('${name}', ${name} = @_navigator.onLine); + ${component.invalidate(name, x`${name} = @_navigator.onLine`)} } `); diff --git a/test/helpers.js b/test/helpers.js index 6ac20eed8b..5a2d1403f0 100644 --- a/test/helpers.js +++ b/test/helpers.js @@ -52,6 +52,7 @@ global.document = window.document; global.navigator = window.navigator; global.getComputedStyle = window.getComputedStyle; global.requestAnimationFrame = null; // placeholder, filled in using set_raf +global.window = window; // add missing ecmascript globals to window for (const key of Object.getOwnPropertyNames(global)) { diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js index 87f31505d7..4cd784e2bf 100644 --- a/test/js/samples/window-binding-scroll/expected.js +++ b/test/js/samples/window-binding-scroll/expected.js @@ -68,7 +68,7 @@ function instance($$self, $$props, $$invalidate) { let { y } = $$props; function onwindowscroll() { - $$invalidate("y", y = window.pageYOffset); + $$invalidate("y", y = window.pageYOffset) } $$self.$set = $$props => { diff --git a/test/runtime/samples/window-binding-scroll-store/_config.js b/test/runtime/samples/window-binding-scroll-store/_config.js new file mode 100644 index 0000000000..abddb86765 --- /dev/null +++ b/test/runtime/samples/window-binding-scroll-store/_config.js @@ -0,0 +1,31 @@ +export default { + skip_if_ssr: true, + + async test({ assert, component, target, window }) { + assert.equal(window.pageYOffset, 0); + + const event = new window.Event('scroll'); + Object.defineProperties(window, { + pageYOffset: { + value: 234, + configurable: true, + }, + }); + + await window.dispatchEvent(event); + + assert.htmlEqual( + target.innerHTML, + `

scroll\ny\nis\n234.\n234\n*\n234\n=\n54756

` + ); + }, + + after_test() { + Object.defineProperties(window, { + pageYOffset: { + value: 0, + configurable: true, + }, + }); + }, +}; diff --git a/test/runtime/samples/window-binding-scroll-store/main.svelte b/test/runtime/samples/window-binding-scroll-store/main.svelte new file mode 100644 index 0000000000..fe225520d7 --- /dev/null +++ b/test/runtime/samples/window-binding-scroll-store/main.svelte @@ -0,0 +1,15 @@ + + + + +

+ scroll y is {$y}. {$y} * {$y} = {$y_squared} +

+ +
+ +
\ No newline at end of file From 16ccc7493db0f85713043f24d866e3ff9a6e548d Mon Sep 17 00:00:00 2001 From: Conduitry Date: Sun, 3 Nov 2019 07:51:45 -0500 Subject: [PATCH 4/7] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 41d70eedcc..ccdf043a72 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ Also: * Flush changes in newly attached block when using `{#await}` ([#3660](https://github.com/sveltejs/svelte/issues/3660)) * 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)) ## 3.12.1 From 3174d3cc596df5d87173990a2e938221bd9d9c61 Mon Sep 17 00:00:00 2001 From: red-meadow <38740713+red-meadow@users.noreply.github.com> Date: Sun, 3 Nov 2019 16:25:46 +0200 Subject: [PATCH 5/7] Minor tutorial fix (#3843) --- .../16-special-elements/07-svelte-options/app-a/Todo.svelte | 1 - .../16-special-elements/07-svelte-options/app-b/Todo.svelte | 1 - 2 files changed, 2 deletions(-) diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte index dae595e7d0..5e0dbca300 100644 --- a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte +++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte @@ -3,7 +3,6 @@ import flash from './flash.js'; export let todo; - export let toggle; let div; diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte index 447ddc601c..e7ddcedc47 100644 --- a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte +++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte @@ -5,7 +5,6 @@ import flash from './flash.js'; export let todo; - export let toggle; let div; From a3cc276a902ae1f08c5dfdf4d9bae1ab23710104 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Sat, 2 Nov 2019 02:48:36 +0800 Subject: [PATCH 6/7] use changed(dependencies) --- src/compiler/compile/render_dom/wrappers/shared/Tag.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/compiler/compile/render_dom/wrappers/shared/Tag.ts b/src/compiler/compile/render_dom/wrappers/shared/Tag.ts index 20bfd3597b..ccb7c6ea40 100644 --- a/src/compiler/compile/render_dom/wrappers/shared/Tag.ts +++ b/src/compiler/compile/render_dom/wrappers/shared/Tag.ts @@ -5,6 +5,7 @@ import Block from '../../Block'; import MustacheTag from '../../../nodes/MustacheTag'; import RawMustacheTag from '../../../nodes/RawMustacheTag'; import { Node } from 'estree'; +import { changed } from './changed'; export default class Tag extends Wrapper { node: MustacheTag | RawMustacheTag; @@ -39,10 +40,7 @@ export default class Tag extends Wrapper { if (this.node.should_cache) block.add_variable(value, snippet); // TODO may need to coerce snippet to string if (dependencies.length > 0) { - let condition = x`#changed.${dependencies[0]}`; - for (let i = 1; i < dependencies.length; i += 1) { - condition = x`${condition} || #changed.${dependencies[i]}`; - } + let condition = changed(dependencies); if (block.has_outros) { condition = x`!#current || ${condition}`; From 601ec45780aeec8d4f62e6438ff1af974ce25c39 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Sun, 3 Nov 2019 15:37:01 +0800 Subject: [PATCH 7/7] reenable skipped test due to jsdom --- test/helpers.js | 28 +++++++++++++ .../binding-select-in-each-block/_config.js | 13 +++++- .../binding-select-in-each-block/main.svelte | 3 ++ .../binding-select-multiple/_config.js | 41 +++++++++++-------- .../binding-select-optgroup/_config.js | 18 ++++++-- .../window-bind-scroll-update/_config.js | 35 ++++++++++++++-- .../samples/window-binding-resize/_config.js | 19 ++++++--- .../window-binding-scroll-store/_config.js | 18 ++++---- test/runtime/samples/window-event/_config.js | 6 +-- test/runtime/samples/window-event/main.svelte | 2 +- 10 files changed, 137 insertions(+), 46 deletions(-) diff --git a/test/helpers.js b/test/helpers.js index 5a2d1403f0..d4f507fc87 100644 --- a/test/helpers.js +++ b/test/helpers.js @@ -59,6 +59,12 @@ for (const key of Object.getOwnPropertyNames(global)) { window[key] = window[key] || global[key]; } +// implement mock scroll +window.scrollTo = function(pageXOffset, pageYOffset) { + window.pageXOffset = pageXOffset; + window.pageYOffset = pageYOffset; +}; + export function env() { window.document.title = ''; window.document.body.innerHTML = '
'; @@ -205,3 +211,25 @@ export function spaces(i) { while (i--) result += ' '; return result; } + +// fake timers +const original_set_timeout = global.setTimeout; + +export function useFakeTimers() { + const callbacks = []; + + global.setTimeout = function(fn) { + callbacks.push(fn); + }; + + return { + flush() { + callbacks.forEach(fn => fn()); + callbacks.splice(0, callbacks.length); + }, + removeFakeTimers() { + callbacks.splice(0, callbacks.length); + global.setTimeout = original_set_timeout; + } + }; +} diff --git a/test/runtime/samples/binding-select-in-each-block/_config.js b/test/runtime/samples/binding-select-in-each-block/_config.js index e8ff7f9f07..89f40f8d48 100644 --- a/test/runtime/samples/binding-select-in-each-block/_config.js +++ b/test/runtime/samples/binding-select-in-each-block/_config.js @@ -1,5 +1,16 @@ export default { - skip: true, // JSDOM... + + ssrHtml: ` + + + + `, html: ` diff --git a/test/runtime/samples/binding-select-multiple/_config.js b/test/runtime/samples/binding-select-multiple/_config.js index e1d21c0ea8..b7d6c3589f 100644 --- a/test/runtime/samples/binding-select-multiple/_config.js +++ b/test/runtime/samples/binding-select-multiple/_config.js @@ -1,49 +1,58 @@ export default { - skip: true, // JSDOM props: { selected: [ 'two', 'three' ] }, + ssrHtml: ` + + +

selected: two, three

+ `, + html: `

selected: two, three

`, - test({ assert, component, target, window }) { + async test({ assert, component, target, window }) { const select = target.querySelector( 'select' ); const options = [ ...target.querySelectorAll( 'option' ) ]; const change = new window.Event( 'change' ); options[1].selected = false; - select.dispatchEvent( change ); + await select.dispatchEvent( change ); assert.deepEqual( component.selected, [ 'three' ] ); assert.htmlEqual( target.innerHTML, `

selected: three

` ); options[0].selected = true; - select.dispatchEvent( change ); + await select.dispatchEvent( change ); assert.deepEqual( component.selected, [ 'one', 'three' ] ); assert.htmlEqual( target.innerHTML, `

selected: one, three

@@ -57,9 +66,9 @@ export default { assert.htmlEqual( target.innerHTML, `

selected: one, two

diff --git a/test/runtime/samples/binding-select-optgroup/_config.js b/test/runtime/samples/binding-select-optgroup/_config.js index 5927bce901..e8a1d40797 100644 --- a/test/runtime/samples/binding-select-optgroup/_config.js +++ b/test/runtime/samples/binding-select-optgroup/_config.js @@ -1,5 +1,15 @@ export default { - skip: true, // JSDOM + + ssrHtml: ` +

Hello undefined!

+ + + `, html: `

Hello Harry!

@@ -12,17 +22,17 @@ export default { `, - test({ assert, component, target, window }) { + async test({ assert, component, target, window }) { const select = target.querySelector('select'); const options = [...target.querySelectorAll('option')]; - assert.deepEqual(options, select.options); + assert.deepEqual(options, [...select.options]); assert.equal(component.name, 'Harry'); const change = new window.Event('change'); options[1].selected = true; - select.dispatchEvent(change); + await select.dispatchEvent(change); assert.equal(component.name, 'World'); assert.htmlEqual(target.innerHTML, ` diff --git a/test/runtime/samples/window-bind-scroll-update/_config.js b/test/runtime/samples/window-bind-scroll-update/_config.js index b9b620d1cd..cb13ea11c2 100644 --- a/test/runtime/samples/window-bind-scroll-update/_config.js +++ b/test/runtime/samples/window-bind-scroll-update/_config.js @@ -1,10 +1,37 @@ +import { env, useFakeTimers } from "../../../helpers"; + +let clock; + export default { - skip: true, // JSDOM + before_test() { + clock = useFakeTimers(); + + const window = env(); + Object.defineProperties(window, { + pageYOffset: { + value: 0, + configurable: true + }, + pageXOffset: { + value: 0, + configurable: true + } + }); + }, - test({ assert, component, target, window }) { + after_test() { + clock.removeFakeTimers(); + clock = null; + }, + + async test({ assert, component, target, window }) { assert.equal(window.pageYOffset, 0); + // clear the previous 'scrolling' state + clock.flush(); component.scrollY = 100; + + clock.flush(); assert.equal(window.pageYOffset, 100); - } -}; \ No newline at end of file + }, +}; diff --git a/test/runtime/samples/window-binding-resize/_config.js b/test/runtime/samples/window-binding-resize/_config.js index d8fbe69f75..1429f67db8 100644 --- a/test/runtime/samples/window-binding-resize/_config.js +++ b/test/runtime/samples/window-binding-resize/_config.js @@ -1,16 +1,25 @@ export default { html: `
1024x768
`, - skip: true, // some weird stuff happening with JSDOM 11 - // skip: /^v4/.test(process.version), // node 4 apparently does some dumb stuff + before_test() { + Object.defineProperties(window, { + innerWidth: { + value: 1024, + configurable: true + }, + innerHeight: { + value: 768, + configurable: true + } + }); + }, + skip_if_ssr: true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason async test({ assert, component, target, window }) { const event = new window.Event('resize'); - // JSDOM executes window event listeners with `global` rather than - // `window` (bug?) so we need to do this - Object.defineProperties(global, { + Object.defineProperties(window, { innerWidth: { value: 567, configurable: true diff --git a/test/runtime/samples/window-binding-scroll-store/_config.js b/test/runtime/samples/window-binding-scroll-store/_config.js index abddb86765..dbab4b36ac 100644 --- a/test/runtime/samples/window-binding-scroll-store/_config.js +++ b/test/runtime/samples/window-binding-scroll-store/_config.js @@ -1,6 +1,13 @@ export default { skip_if_ssr: true, - + before_test() { + Object.defineProperties(window, { + pageYOffset: { + value: 0, + configurable: true, + }, + }); + }, async test({ assert, component, target, window }) { assert.equal(window.pageYOffset, 0); @@ -19,13 +26,4 @@ export default { `

scroll\ny\nis\n234.\n234\n*\n234\n=\n54756

` ); }, - - after_test() { - Object.defineProperties(window, { - pageYOffset: { - value: 0, - configurable: true, - }, - }); - }, }; diff --git a/test/runtime/samples/window-event/_config.js b/test/runtime/samples/window-event/_config.js index 16e0f870ef..bd09487f5e 100644 --- a/test/runtime/samples/window-event/_config.js +++ b/test/runtime/samples/window-event/_config.js @@ -1,16 +1,12 @@ export default { html: `
undefinedxundefined
`, - skip: true, // some weird stuff happening with JSDOM 11 - // skip: /^v4/.test(process.version), // node 4 apparently does some dumb stuff skip_if_ssr: true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason async test({ assert, component, target, window }) { const event = new window.Event('resize'); - // JSDOM executes window event listeners with `global` rather than - // `window` (bug?) so we need to do this - Object.defineProperties(global, { + Object.defineProperties(window, { innerWidth: { value: 567, configurable: true diff --git a/test/runtime/samples/window-event/main.svelte b/test/runtime/samples/window-event/main.svelte index 1aa84a0890..e246902063 100644 --- a/test/runtime/samples/window-event/main.svelte +++ b/test/runtime/samples/window-event/main.svelte @@ -3,6 +3,6 @@ export let height; - +
{width}x{height}
\ No newline at end of file