如何在Svelte中实现带撤销/重做功能的组件替换？

需求概述 #

• 支持通过点击等用户操作触发Frame A与Frame B的组件切换
• 切换时同步修改部分全局状态变量
• 记录所有切换操作，支持撤销/重做功能

初步实现思路 #

采用栈作为操作缓冲区，每个栈元素包含状态变量集合和当前组件名称，基于Svelte的store实现缓冲区的状态存储。

现有Store代码（stores.ts） #

import { writable } from "svelte/store";

type BufferItem = {
    frame: string // 组件名称
    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: 处理空数组或非数组的异常情况
        currentFrame = value[value.length - 1].frame;   
    });

    // 疑问：如何根据currentFrame（字符串类型）动态导入并分配组件？
    let component = ""; // 需要赋值为组件类型
</script>

<svelte:component this={component} />

疑问与初步尝试 #

我曾考虑用组件注册表的方式实现，但感觉步骤繁琐：

let registry = { 'componentStringName': Component; }

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

let component = registry[currentFrame];

核心疑问：如何根据currentFrame（字符串类型），用更贴合Svelte风格的方式动态导入并分配组件？

解决方案 #

1. 反应式组件注册表方案（简洁轻量） #

预导入所有需要切换的组件，维护一个组件名称与组件实例的映射表，结合Svelte的反应式声明自动同步组件，完全替代手动subscribe：

<script>
    import { buffer } from './stores.js';
    // 预导入所有需要切换的组件
    import InitComponent from './InitComponent.svelte';
    import FrameA from './FrameA.svelte';
    import FrameB from './FrameB.svelte';

    // 组件注册表：键对应store中存储的组件名称字符串
    const componentRegistry = {
        initComponent: InitComponent,
        frameA: FrameA,
        frameB: FrameB
    };

    // 利用Svelte反应式特性，自动根据buffer的最新值更新组件
    $: currentBufferItem = $buffer[$buffer.length - 1];
    // 兜底处理：若找不到对应组件，默认加载初始组件
    $: component = componentRegistry[currentBufferItem?.frame] ?? InitComponent;
</script>

<!-- 直接绑定组件，同时传递全局状态变量 -->
<svelte:component this={component} {...currentBufferItem.vars} />

这种方式完全贴合Svelte的响应式设计，代码简洁且易维护，适合组件数量不多的场景。

2. 动态按需导入方案（适合大型项目） #

如果组件数量较多，不想一次性打包所有组件，可以用动态导入结合反应式实现按需加载，减少初始包体积：

<script>
    import { buffer } from './stores.js';
    import { onMount } from 'svelte';

    let component = null;

    // 动态加载组件的工具函数（可根据你的文件命名规则调整）
    async function loadComponent(frameName) {
        // 示例：将frameName转换为大驼峰命名（如frameA → FrameA）
        const componentFileName = frameName.charAt(0).toUpperCase() + frameName.slice(1);
        const module = await import(`./${componentFileName}.svelte`);
        return module.default;
    }

    // 反应式监听buffer变化，自动触发组件加载
    $: if ($buffer.length > 0) {
        const currentFrame = $buffer[$buffer.length - 1].frame;
        loadComponent(currentFrame).then(comp => component = comp);
    }

    // 页面初始化时加载默认组件
    onMount(() => {
        loadComponent('initComponent').then(comp => component = comp);
    });
</script>

{#if component}
    <svelte:component this={component} {...$buffer[$buffer.length - 1].vars} />
{:else}
    <!-- 组件加载中的占位UI -->
    <div>加载中...</div>
{/if}

这种方式适合大型项目，实现组件的懒加载，同时仍保持Svelte的响应式特性。

内容的提问来源于stack exchange，提问作者wawawa