Skip to content

Commit

Permalink
[fix]destroy empty component (#7492)
Browse files Browse the repository at this point in the history
* fix: destroy non-fragment element such as empty components

* fix: fragment property of Empty Component is set as true in dev mode, inconsistent with production mode

* chore: revert 'removal' of component.compile_options.dev

* feat: add test for destroying empty component

* chore: update typechecking callback

* chore: revert fragment dev checks

* chore: remove unnecessary comment

* chore: update test for empty-component-destroy

* fix: revert back the patching of console.log

* use before_test and after_test

Co-authored-by: qinmu <magenta2127@mail.com>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
  • Loading branch information
3 people authored Jul 4, 2022
1 parent 31e5f8b commit 02f60fb
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/compiler/compile/render_dom/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ export default function dom(
// $$props arg is still needed for unknown prop check
args.push(x`$$props`);
}

// has_create_fragment is intentionally to be true in dev mode.
const has_create_fragment = component.compile_options.dev || block.has_content();
if (has_create_fragment) {
body.push(b`
Expand Down
4 changes: 3 additions & 1 deletion src/runtime/internal/transitions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, ca
});

block.o(local);
} else if (callback) {
callback();
}
}

Expand Down Expand Up @@ -143,7 +145,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
return {
start() {
if (started) return;

started = true;
delete_rule(node);

Expand Down
8 changes: 8 additions & 0 deletions test/runtime/samples/empty-component-destroy/Empty.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@

<script>
import { onDestroy } from 'svelte';
onDestroy(() => {
console.log('destroy');
});
</script>
25 changes: 25 additions & 0 deletions test/runtime/samples/empty-component-destroy/_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
let log;
export default {
html: `
<button>destroy component</button>
`,

before_test() {
log = console.log;
},
after_test() {
console.log = log;
},

async test({ assert, target, window }) {
const button = target.querySelector('button');
const event = new window.MouseEvent('click');
const messages = [];
console.log = msg => messages.push(msg);
await button.dispatchEvent(event);
assert.htmlEqual(target.innerHTML, `
<button>destroy component</button>
`);
assert.deepEqual(messages, ['destroy']);
}
};
8 changes: 8 additions & 0 deletions test/runtime/samples/empty-component-destroy/main.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<script>
import Empty from './Empty.svelte';
let active = true;
</script>

<button on:click='{() => active = false }'>destroy component</button>

<svelte:component this={active ? Empty : null} />

0 comments on commit 02f60fb

Please sign in to comment.