From 2bf8fc7e6b5eb1c4ff0f02617e61396d910927bc Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Fri, 24 Apr 2020 07:35:39 +0800 Subject: [PATCH 1/8] fix slot fallback update parent (#4598) --- CHANGELOG.md | 1 + .../component-slot-fallback-5/IconA.svelte | 1 + .../component-slot-fallback-5/IconB.svelte | 1 + .../component-slot-fallback-5/Inner.svelte | 13 ++++++++ .../component-slot-fallback-5/_config.js | 31 +++++++++++++++++++ .../component-slot-fallback-5/main.svelte | 5 +++ 6 files changed, 52 insertions(+) create mode 100644 test/runtime/samples/component-slot-fallback-5/IconA.svelte create mode 100644 test/runtime/samples/component-slot-fallback-5/IconB.svelte create mode 100644 test/runtime/samples/component-slot-fallback-5/Inner.svelte create mode 100644 test/runtime/samples/component-slot-fallback-5/_config.js create mode 100644 test/runtime/samples/component-slot-fallback-5/main.svelte diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e80b0d095..b1bcd39e10 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * Try using `globalThis` rather than `globals` for the benefit of non-Node servers and web workers ([#3561](https://github.com/sveltejs/svelte/issues/3561), [#4545](https://github.com/sveltejs/svelte/issues/4545)) * Support `{#await ... catch ...}` syntax shorthand ([#3623](https://github.com/sveltejs/svelte/issues/3623)) * Fix attaching of JS debugging comments to HTML comments ([#4565](https://github.com/sveltejs/svelte/issues/4565)) +* Fix `` within `` ([#4597](https://github.com/sveltejs/svelte/issues/4597)) * Fix issues with `` updates ([#4631](https://github.com/sveltejs/svelte/issues/4631), [#4687](https://github.com/sveltejs/svelte/issues/4687)) * Prevent illegal attribute names ([#4648](https://github.com/sveltejs/svelte/issues/4648)) * Fix `{#if}` block directly within `` ([#4703](https://github.com/sveltejs/svelte/issues/4703)) diff --git a/test/runtime/samples/component-slot-fallback-5/IconA.svelte b/test/runtime/samples/component-slot-fallback-5/IconA.svelte new file mode 100644 index 0000000000..8921b6c531 --- /dev/null +++ b/test/runtime/samples/component-slot-fallback-5/IconA.svelte @@ -0,0 +1 @@ +Icon A \ No newline at end of file diff --git a/test/runtime/samples/component-slot-fallback-5/IconB.svelte b/test/runtime/samples/component-slot-fallback-5/IconB.svelte new file mode 100644 index 0000000000..8a1a95ead3 --- /dev/null +++ b/test/runtime/samples/component-slot-fallback-5/IconB.svelte @@ -0,0 +1 @@ +Icon B \ No newline at end of file diff --git a/test/runtime/samples/component-slot-fallback-5/Inner.svelte b/test/runtime/samples/component-slot-fallback-5/Inner.svelte new file mode 100644 index 0000000000..bc4b224c23 --- /dev/null +++ b/test/runtime/samples/component-slot-fallback-5/Inner.svelte @@ -0,0 +1,13 @@ + + + +
+ + + +
diff --git a/test/runtime/samples/component-slot-fallback-5/_config.js b/test/runtime/samples/component-slot-fallback-5/_config.js new file mode 100644 index 0000000000..fa374f3519 --- /dev/null +++ b/test/runtime/samples/component-slot-fallback-5/_config.js @@ -0,0 +1,31 @@ +export default { + html: ` + +
Icon B
+ `, + + async test({ assert, target, window }) { + const btn = target.querySelector("button"); + const clickEvent = new window.MouseEvent("click"); + + await btn.dispatchEvent(clickEvent); + + assert.htmlEqual( + target.innerHTML, + ` + +
Icon A
+ ` + ); + + await btn.dispatchEvent(clickEvent); + + assert.htmlEqual( + target.innerHTML, + ` + +
Icon B
+ ` + ); + } +}; diff --git a/test/runtime/samples/component-slot-fallback-5/main.svelte b/test/runtime/samples/component-slot-fallback-5/main.svelte new file mode 100644 index 0000000000..206ce21def --- /dev/null +++ b/test/runtime/samples/component-slot-fallback-5/main.svelte @@ -0,0 +1,5 @@ + + + From 8d8db4e8369799c65056d163abf760fcae0739f6 Mon Sep 17 00:00:00 2001 From: pushkin Date: Fri, 24 Apr 2020 01:40:19 +0200 Subject: [PATCH 2/8] ensure if_block dependency is dirty to cancel outro (#4634) --- .../compile/render_dom/wrappers/IfBlock.ts | 36 ++++++++----------- test/js/samples/if-block-simple/expected.js | 6 ++-- test/js/samples/transition-local/expected.js | 8 +++-- .../transition-repeated-outro/expected.js | 8 +++-- .../use-elements-as-anchors/expected.js | 30 ++++++++-------- .../Component.svelte | 18 ++++++++++ .../_config.js | 9 +++++ .../main.svelte | 8 +++++ .../Component.svelte | 18 ++++++++++ .../_config.js | 7 ++++ .../main.svelte | 10 ++++++ 11 files changed, 113 insertions(+), 45 deletions(-) create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/_config.js create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/main.svelte create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/Component.svelte create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/_config.js create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/main.svelte diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts index 207e1e349e..9b3e56635d 100644 --- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts @@ -520,28 +520,22 @@ export default class IfBlockWrapper extends Wrapper { if (branch.dependencies.length > 0) { const update_mount_node = this.get_update_mount_node(anchor); - const enter = dynamic - ? b` - if (${name}) { - ${name}.p(#ctx, #dirty); - ${has_transitions && b`@transition_in(${name}, 1);`} - } else { - ${name} = ${branch.block.name}(#ctx); - ${name}.c(); - ${has_transitions && b`@transition_in(${name}, 1);`} - ${name}.m(${update_mount_node}, ${anchor}); - } - ` - : b` - if (!${name}) { - ${name} = ${branch.block.name}(#ctx); - ${name}.c(); - ${has_transitions && b`@transition_in(${name}, 1);`} - ${name}.m(${update_mount_node}, ${anchor}); - } else { - ${has_transitions && b`@transition_in(${name}, 1);`} + const enter = b` + if (${name}) { + ${dynamic && b`${name}.p(#ctx, #dirty);`} + ${ + has_transitions && + b`if (${block.renderer.dirty(branch.dependencies)}) { + @transition_in(${name}, 1); + }` } - `; + } else { + ${name} = ${branch.block.name}(#ctx); + ${name}.c(); + ${has_transitions && b`@transition_in(${name}, 1);`} + ${name}.m(${update_mount_node}, ${anchor}); + } + `; if (branch.snippet) { block.chunks.update.push(b`if (${block.renderer.dirty(branch.dependencies)}) ${branch.condition} = ${branch.snippet}`); diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js index b9fad863e2..eb6c8e8949 100644 --- a/test/js/samples/if-block-simple/expected.js +++ b/test/js/samples/if-block-simple/expected.js @@ -42,12 +42,12 @@ function create_fragment(ctx) { }, p(ctx, [dirty]) { if (/*foo*/ ctx[0]) { - if (!if_block) { + if (if_block) { + + } else { if_block = create_if_block(ctx); if_block.c(); if_block.m(if_block_anchor.parentNode, if_block_anchor); - } else { - } } else if (if_block) { if_block.d(1); diff --git a/test/js/samples/transition-local/expected.js b/test/js/samples/transition-local/expected.js index a5d3b6318f..25a03f026f 100644 --- a/test/js/samples/transition-local/expected.js +++ b/test/js/samples/transition-local/expected.js @@ -28,13 +28,15 @@ function create_if_block(ctx) { }, p(ctx, dirty) { if (/*y*/ ctx[1]) { - if (!if_block) { + if (if_block) { + if (dirty & /*y*/ 2) { + transition_in(if_block, 1); + } + } else { if_block = create_if_block_1(ctx); if_block.c(); transition_in(if_block, 1); if_block.m(if_block_anchor.parentNode, if_block_anchor); - } else { - transition_in(if_block, 1); } } else if (if_block) { if_block.d(1); diff --git a/test/js/samples/transition-repeated-outro/expected.js b/test/js/samples/transition-repeated-outro/expected.js index 6f071328a4..1f76a93666 100644 --- a/test/js/samples/transition-repeated-outro/expected.js +++ b/test/js/samples/transition-repeated-outro/expected.js @@ -63,13 +63,15 @@ function create_fragment(ctx) { }, p(ctx, [dirty]) { if (/*num*/ ctx[0] < 5) { - if (!if_block) { + if (if_block) { + if (dirty & /*num*/ 1) { + transition_in(if_block, 1); + } + } else { if_block = create_if_block(ctx); if_block.c(); transition_in(if_block, 1); if_block.m(if_block_anchor.parentNode, if_block_anchor); - } else { - transition_in(if_block, 1); } } else if (if_block) { group_outros(); diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js index 52635e9b78..5be8808edb 100644 --- a/test/js/samples/use-elements-as-anchors/expected.js +++ b/test/js/samples/use-elements-as-anchors/expected.js @@ -157,12 +157,12 @@ function create_fragment(ctx) { }, p(ctx, [dirty]) { if (/*a*/ ctx[0]) { - if (!if_block0) { + if (if_block0) { + + } else { if_block0 = create_if_block_4(ctx); if_block0.c(); if_block0.m(div, t0); - } else { - } } else if (if_block0) { if_block0.d(1); @@ -170,12 +170,12 @@ function create_fragment(ctx) { } if (/*b*/ ctx[1]) { - if (!if_block1) { + if (if_block1) { + + } else { if_block1 = create_if_block_3(ctx); if_block1.c(); if_block1.m(div, t3); - } else { - } } else if (if_block1) { if_block1.d(1); @@ -183,12 +183,12 @@ function create_fragment(ctx) { } if (/*c*/ ctx[2]) { - if (!if_block2) { + if (if_block2) { + + } else { if_block2 = create_if_block_2(ctx); if_block2.c(); if_block2.m(div, t4); - } else { - } } else if (if_block2) { if_block2.d(1); @@ -196,12 +196,12 @@ function create_fragment(ctx) { } if (/*d*/ ctx[3]) { - if (!if_block3) { + if (if_block3) { + + } else { if_block3 = create_if_block_1(ctx); if_block3.c(); if_block3.m(div, null); - } else { - } } else if (if_block3) { if_block3.d(1); @@ -209,12 +209,12 @@ function create_fragment(ctx) { } if (/*e*/ ctx[4]) { - if (!if_block4) { + if (if_block4) { + + } else { if_block4 = create_if_block(ctx); if_block4.c(); if_block4.m(if_block4_anchor.parentNode, if_block4_anchor); - } else { - } } else if (if_block4) { if_block4.d(1); diff --git a/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte b/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte new file mode 100644 index 0000000000..adb9aaea0e --- /dev/null +++ b/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte @@ -0,0 +1,18 @@ + + +