Svelte/5/Components As Functions Destroyfunction

Last update

Sep 10, 2024

This codemod updates Svelte component instantiation and event handling for Svelte 5:

Converts new Component({ target }) to mount(Component, { target }).
Replaces $destroy method calls with unmount.
Ensures compatibility with Svelte 5's function-based components and new event handling.

Before

import App from './App.svelte';

const app = new App({
    target: document.getElementById('app'),
    props: { foo: 'bar' },
});
app.$destroy();

After

import { unmount } from 'svelte';
import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, {
    target: document.getElementById('app'),
    props: { foo: 'bar' },
});
unmount(app);

This codemod updates Svelte component instantiation and event handling for Svelte 5:

Converts new Component({ target }) to mount(Component, { target }).
Replaces $destroy method calls with unmount.
Ensures compatibility with Svelte 5's function-based components and new event handling.

Before

import App from './App.svelte';

const app = new App({
    target: document.getElementById('app'),
    props: { foo: 'bar' },
});
app.$destroy();

After

import { unmount } from 'svelte';
import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, {
    target: document.getElementById('app'),
    props: { foo: 'bar' },
});
unmount(app);

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now