I've found the same issues using StoryBook and in developing a custom cell renderer for an AgGrid.
Often when using a grid not only to display data but also to modify it (even in a simple crud application) it is nice to create a renderer to have a special cell in each row with some controls (maybe a button for the edit that opens a modal with a form to edit the element and one for the deletion that deletes the row).
In the AgGrid case some frameworks like React, Angular and Vue has first class support and defining a cell renderer is often a one-liner (example: AgGrid React). If you look at the example provided for the "totalValueRenderer" it is very little code compared to the "vanilla js" version that requires to implement a class and manually creating the html string and adding it to the DOM (with the relative event listeners): JavaScript AgGrid.
To use the latter in a svelte application i somewhat managed to make things work by using Svelte's client side component api to render a single component defined in a separate .svelte file. I'm still learning svelte so i'm not an expert and to make things a little bit more manageable i followed this StackOverflow's answer as an inspiration and i've defined my renderer like this (code has been simplified):

const columnDefs = [
    ...
    {
      maxWidth: 50,
      cellRenderer: cellRendererFactory((c, p) => {
        const deleteButton = new Button({
          target: c.eGui,
          props: {
            icon: 'fa-solid:trash',
            class: 'px-0 mx-0',
            small: true
          }
        });
   
        deleteButton.$on('click', event => {
          removeRow(p.node.rowIndex);
        });
       
        return deleteButton;
      }),
    }

But i think that this is a lot of work in respect to something, for example, like this:

function deleteButton({c, p}) {
    return <Button small icon='fa-solid:trash' class='px-0 mx-0' on:click={event => removeRow(p.node.rowIndex)}/>
}

const columnDefs = [
    ...
    {
      maxWidth: 50,
      cellRenderer: deleteButton
    }

Furthermore, if the rendered component should be a "composite" (eg. a span or a div with two buttons as children) i have not found anything simple to use searching in svelte docs or by googling it, so i resorted to the intermediary .svelte file.

Support this 100%, i would LOVE to have snippets just like in react micro components.

Without the need for an extra file for the micro component

Svelte 5 introduced createRawSnippet!

import { createRawSnippet } from 'svelte';

const greet = createRawSnippet((name) => {
	return {
		render: () => `
			<h1>Hello ${name()}!</h1>
		`,
		setup: (node) => {
			$effect(() => {
				node.textContent = `Hello ${name()}!`;
			});
		}
	};
});

Closed by #12425