Svelte Action参数无响应性问题：如何实现参数响应式更新？

我实现了一个监听按键操作的Svelte Action，代码如下：

import type { Action } from "svelte/action"

export const keys: Action<HTMLElement, boolean> = (node, active?: boolean) => {

  function listener(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
    if(!active){ // <- 始终为初始值
      return;
    }

    const target = event.target as HTMLElement
    if(target instanceof HTMLInputElement){
      return;
    }

    // do things with node...
  }

  window.addEventListener("keydown", listener, true)

  return {
    destroy() {
      window.removeEventListener("keydown", listener, true)
    }
  }
}

在组件中使用方式：

<div use:keys={someLocalStateVar} ...

问题：与someLocalStateVar对应的active参数不会随状态变化而更新，始终保持初始值。请问如何让Action中的参数具备响应性？

Svelte Action要实现参数响应，需要在返回的对象中添加update方法，该方法会在传入的参数发生变化时被调用，我们可以在这个方法里更新内部的active变量。修改后的代码如下：

import type { Action } from "svelte/action"

export const keys: Action<HTMLElement, boolean> = (node, active?: boolean) => {

  function listener(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
    if(!active){
      return;
    }

    const target = event.target as HTMLElement
    if(target instanceof HTMLInputElement){
      return;
    }

    // do things with node...
  }

  window.addEventListener("keydown", listener, true)

  return {
    update(newActive) {
      // 更新active为最新的参数值
      active = newActive
    },
    destroy() {
      window.removeEventListener("keydown", listener, true)
    }
  }
}

这样，当组件中的someLocalStateVar状态变化时，Action的update方法会被触发，将active更新为最新值，listener函数就能使用最新的active判断条件了。

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