How to replace component by another component in svelte with undo and redo action?

Question

I want to design front-end system where,

• Frame A -> can be replaced with Frame B (user action on frame, leads to transition - e.g. click)
• Frame A's transition to Frame B mutates some global state vars
• All transitions are recorded (can perform undo/redo)

My initial thinking is that, I can achieve this via:

• buffer (stack), in which each element is (stateVars, frame)

Now, doing this with svelte my store looks like this:

// stores.ts
import { writable } from "svelte/store";

type BufferItem = {
    frame: string // this is component name,
    vars: Record<string, string | number | null>,
}

export const buffer = writable<BufferItem[]>([{
   frame: 'initComponent',
   vars: {},
}]);

// App.svelte
<script>
    import { buffer } from './stores.js';
        // import Undo from 'undo.svelte';
        // import Redo from 'redo.svelte';

    let currentFrame;
    buffer.subscribe((value) => {
        // TODO: handle, empty or non-array buffer
        currentFrame = value[value.length - 1].frame;   
    });

    // How do I dynamically import and assign component
    // based on the currentFrame (type string)?
    let component = ""; // need to be component type
</script>

<svelte:component this={component} />

I'm thinking I can do following, but it seems like hacky, I don't know if there is a better way to achieve this using bind and svelte-esq approach.

let registry = { 'componentStringName': Component; }

let currentFrame;
buffer.subscribe((value) => { currentFrame = value[value.length - 1].frame; });

let component = registry[currentFrame];