Svelte/5/Components As Functions Onfunction

1.0.3Last update Sep 10, 2024
by@35c4n0r

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

  • Converts new Component({ target }) to mount(Component, { target }).
  • Adds the mount import from svelte if not present.
  • Replaces $on method calls with the events property in the mount options.

This 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') });
app.$on('event', callback);

After

import { mount } from 'svelte';
import App from './App.svelte';
const app = mount(App, {
target: document.getElementById('app'),
events: { event: callback },
});

Build custom codemods

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

background illustrationGet Started Now