Review feedback

pull/9056/head
Andreas Ehrencrona 3 years ago
parent 2ddc3c7c21
commit 6fa3a15922

@ -178,19 +178,19 @@ import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
declare global { declare global {
class Component extends SvelteComponent {} class Component extends SvelteComponent {}
var component: Component; var component: Component;
var run_outro: boolean; var options: { runOutro: boolean };
} }
export {} export {}
// @filename: index.ts // @filename: index.ts
// ---cut--- // ---cut---
component.$destroy(run_outro); component.$destroy(options);
``` ```
Removes a component from the DOM and triggers any `onDestroy` handlers. Removes a component from the DOM and triggers any `onDestroy` handlers.
If `run_outro` is `true`, any outro transitions will play before the component is destroyed. `options` may contain the property `runOutro` which indicates whether to play any outro transitions before the component is destroyed.
## Component props ## Component props

@ -1,23 +1,23 @@
import { import {
add_render_callback, attr,
flush,
flush_render_callbacks,
schedule_update,
dirty_components
} from './scheduler.js';
import { current_component, set_current_component } from './lifecycle.js';
import { blank_object, is_empty, is_function, run, run_all, noop } from './utils.js';
import {
children, children,
detach, detach,
start_hydrating, element,
end_hydrating, end_hydrating,
get_custom_elements_slots, get_custom_elements_slots,
insert, insert,
element, start_hydrating
attr
} from './dom.js'; } from './dom.js';
import { current_component, set_current_component } from './lifecycle.js';
import {
add_render_callback,
dirty_components,
flush,
flush_render_callbacks,
schedule_update
} from './scheduler.js';
import { check_outros, group_outros, transition_in, transition_out } from './transitions.js'; import { check_outros, group_outros, transition_in, transition_out } from './transitions.js';
import { blank_object, is_empty, is_function, noop, run, run_all } from './utils.js';
/** @returns {void} */ /** @returns {void} */
export function bind(component, name, callback) { export function bind(component, name, callback) {
@ -456,11 +456,11 @@ export class SvelteComponent {
$$set = undefined; $$set = undefined;
/** /**
* @param {boolean} [run_outro] * @param {import('./private.js').ComponentDestroyOptions} [options]
* @returns {void} * @returns {void}
*/ */
$destroy(run_outro) { $destroy(options) {
if (run_outro && this.$$.fragment && this.$$.fragment.o) { if (options?.runOutro && this.$$.fragment && this.$$.fragment.o) {
group_outros(); group_outros();
transition_out(this.$$.fragment, 0, 0, () => { transition_out(this.$$.fragment, 0, 0, () => {
destroy_component(this, 1); destroy_component(this, 1);

@ -331,9 +331,12 @@ export class SvelteComponentDev extends SvelteComponent {
super(); super();
} }
/** @returns {void} */ /**
$destroy() { * @param {import('./private.js').ComponentDestroyOptions} [options]
super.$destroy(); * @returns {void}
*/
$destroy(options) {
super.$destroy(options);
this.$destroy = () => { this.$destroy = () => {
console.warn('Component was already destroyed'); // eslint-disable-line no-console console.warn('Component was already destroyed'); // eslint-disable-line no-console
}; };

@ -75,6 +75,10 @@ export interface StyleInformation {
rules: Record<string, true>; rules: Record<string, true>;
} }
export interface ComponentDestroyOptions {
runOutro?: boolean;
}
export type TaskCallback = (now: number) => boolean | void; export type TaskCallback = (now: number) => boolean | void;
export type TaskEntry = { c: TaskCallback; f: () => void }; export type TaskEntry = { c: TaskCallback; f: () => void };

@ -3,7 +3,7 @@ export default {
skip_if_hydrate: true, skip_if_hydrate: true,
skip_if_hydrate_from_ssr: true, skip_if_hydrate_from_ssr: true,
test({ assert, component, target, raf }) { test({ assert, component, target, raf }) {
component.$destroy(true); component.$destroy({ runOutro: true });
return Promise.resolve().then(() => { return Promise.resolve().then(() => {
const div = target.querySelector('div'); const div = target.querySelector('div');

Loading…
Cancel
Save