Svelte 发布 Attachments，通过交互式和响应式特性增强 DOM

Svelte 的最新版本包含了一个名为Attachments（附件）的新功能，它通过交互式和响应式特性增强了 Web 应用程序的 DOM。Svelte Attachments 取代了 Svelte Actions（动作）。

就像 Svelte Actions 一样，开发人员使用附件来提供代码，以便在组件或 DOM 元素被挂载或卸载时运行。通常，提供的代码会为感兴趣的事件设置一个监听器，并在附件目标被卸载时移除该监听器。它还可以与需要目标 DOM 元素的第三方库一起使用。依赖响应值的附件将在这些值变化时重新运行。

以下是一个使用 GSAP 动画库中的 ScrambleTextPlugin 的示例：

<script>  import { gsap } from 'gsap';  import { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin';  gsap.registerPlugin(ScrambleTextPlugin);  // ⚠️ 附件位于 `$effect` 函数内部  function scramble(text, options) {    return (element) => {      gsap.to(element, {        duration: 2,        scrambleText: text,        ...options      });    };  }  let text = $state('Svelte');</script><!-- 跟踪上下文 --><input type="text" bind:value={text} /><div {@attach scramble(text)}></div>

当 DOM 首次被挂载时，文本 Svelte 将被打乱。此外，文本值的任何进一步变化也会导致文本被打乱。开发人员可以在 Svelte playground 中尝试这个示例。

这样 Svelte Attachments 就扩展了 Svelte Actions，后者没有为其参数提供类似的响应性。此外，S 附件可以设置在 Svelte 组件上，而 Svelte Actions 只能在 DOM 元素上声明。该版本提供了一种从 Actions 创建 Attachments 的机制，使开发人员可以复用现有的动作库。

附件可以用来将行为与标记分离（就像其他 UI 框架中所做的那样，React 中的 hooks 就是一个例子）。已经作为 Actions 实现，现在可以从附件功能中受益的行为示例包括：剪贴板复制、点击板粘贴到元素、捕获元素外的点击、屏蔽用户输入、动画元素、指针拖动滚动行为、快捷键的设置、使元素可滑动、点击下载等。

开发人员被邀请在线阅读完整的文档，以获得该特性的详尽视图与详细的示例和解释。开发人员还可以查看相应的拉取请求，了解特性背后的动机和开发人员的评论。

原文链接：

Svelte Releases Attachments to Enhance DOM with Interactive and Reactive Features