after_update hook with svelte 5

[stefanhoelzl]

Hello,

I need some help to migrate my code from svelte 4 to svelte 5.

I have the following code in svelte 4:

<script lang="ts">
  import { onMount  } from "svelte";

  export let component;
  export let props;
  
  let instance;

  /*
  from what I have observed
  * instance.$$.props is a mapping from `propName`->`prop index in ctx`
  * instance.$$.ctx is a array with values

  by using the index of `$$.props` we can get the value from `$$.ctx`
  this allows us to reconstruct an object with all props.

  An added `afterUpdate`-hook updates `props` after each update with this reconstructed props.
  */
  onMount(() =>
    instance.$$.after_update.push(() => {
      props = Object.fromEntries(
        Object.entries(instance.$$.props).map(([prop, idx]) => [
          prop,
          instance.$$.ctx[idx as number],
        ]),
      );
    }),
  );
</script>

<svelte:component
  this={component}
  bind:this={instance}
  {...props}
>
  <slot />
</svelte:component>

I want to get notified when a property of the child component has changed and get the values of all properties of the child component after the change.

For more context, I am building a component preview app, where I have a editor with all the component properties, the values in the editor should change accordingly when something in the component changes and vice versa.
Since this should work with a generic component, I do not know the properties in advance.

Thank your for your help!

[7nik]

This is the closest I got for now