Liveblocks 存储更新中展示被删除对象的实现方案

背景介绍

Liveblocks 是一个实时协作框架，它提供了多种数据结构如 LiveMap、LiveList 和 LiveObject 来帮助开发者构建协作应用。在实际开发中，我们经常需要监听这些数据结构的变化并做出相应的响应。

问题描述

在开发过程中，有一个常见需求：当文档中的某些特定对象被删除时（例如从 LiveList 中移除），需要执行一些非 UI 相关的处理逻辑。然而，当前的 LiveList 更新机制中，删除操作只提供了被删除项的索引信息，而没有提供被删除项本身的内容，这使得开发者难以获取完整的变更信息。

技术分析

Liveblocks 的更新机制通过 delta 对象来描述变更，当前 LiveListUpdateDelta 的类型定义如下：

type LiveListUpdateDelta =
  | { type: "insert"; index: number; item: Lson }
  | { type: "delete"; index: number }
  | { type: "move"; index: number; previousIndex: number; item: Lson }
  | { type: "set"; index: number; item: Lson };

可以看到，delete 操作只包含 index 信息，而其他操作如 move 和 insert 都包含了完整的项信息。这种不对称性给开发者带来了不便。

解决方案

Liveblocks 团队在最新版本中增加了对删除项信息的支持，新的类型定义如下：

type LiveListUpdateDelta =
  | { type: "insert"; index: number; item: Lson }
  | { type: "delete"; index: number; deletedItem: Lson }
  | { type: "move"; index: number; previousIndex: number; item: Lson }
  | { type: "set"; index: number; item: Lson };

关键变化是在 delete 操作中新增了 deletedItem 字段，这样开发者就能获取到被删除项的完整信息。

实现细节

1. 数据一致性：新增的 deletedItem 字段确保了即使在批量操作中，开发者也能准确获取被删除的对象。

2. 性能考虑：虽然增加了数据传输量，但对于大多数应用场景来说，这种开销是可以接受的，特别是考虑到它带来的开发便利性。

3. 向后兼容：这一变更不会影响现有代码，因为新增字段是可选的（在 TypeScript 中表现为必填，但运行时旧代码仍能工作）。

最佳实践

1. 订阅变更：使用 room.subscribe 方法订阅最高层级的 map 对象变更。

2. 处理删除操作：在新的实现中，可以直接从 deletedItem 字段获取被删除的对象，无需额外的状态管理。

3. 错误处理：虽然不常见，但仍建议对 deletedItem 进行空值检查以确保代码健壮性。

总结

Liveblocks 的这一改进显著提升了开发者在处理列表删除操作时的便利性。通过提供被删除项的完整信息，开发者可以更轻松地实现各种业务逻辑，如审计日志、数据同步等。这一变更体现了 Liveblocks 团队对开发者体验的重视，也展示了框架在不断演进以满足实际开发需求。