Detached elements not garbage collected

[HEAVYPOLY]

Hi, I am trying to create an image gallery using vanX.list and running into an issue where dom elements are becoming detached and not garbage collected when removed from the reactive array, creating a memory leak.

Digging into this, I found that vanX.list seems to produce this effect even on vanX docs:

Even after clicking the chome garbage collect button, these detached nodes persist. Is there a way to get rid of these detached nodes?

[Tao-VanJS]

I spent some time trying to figure out what's going on. Here is what I found:

1. If I create a standalone app with just the TodoList, I can't reproduce the issue of detached node:

const {a, button, del, div, input, span} = van.tags

const TodoList = () => {
  const items = vanX.reactive(JSON.parse(localStorage.getItem("appState") ?? "[]"))
  van.derive(() => localStorage.setItem("appState", JSON.stringify(vanX.compact(items))))
  const inputDom = input({type: "text"})
  return div(
    inputDom, button({onclick: () => items.push({text: inputDom.value, done: false})}, "Add"),
    vanX.list(div, items, ({val: v}, deleter) => div(
      input({type: "checkbox", checked: () => v.done, onclick: e => v.done = e.target.checked}),
      () => (v.done ? del : span)(v.text),
      a({onclick: deleter}, "❌"),
    )),
  )
}

van.add(document.body, TodoList())

2. However, I did reproduce the issue in the complex page of VanX
3. Deep-diving into the retainers tree, what's in the tree totally doesn't make sense to me:

Here v is a State objective that should GC-ed. system / Context (I don't know what it is) which seems to be an opaque internal object retains v, which is further retained by V8EventListener.

It seems to me the state v is retained by a few internal Chrome stuffs. I don't know what they are. I think at this point it's beyond my expertise. Maybe this is due to how Chrome handles complex page internally.

If you happen to know what's going on, I'm happy to learn from you.

[Tao-VanJS]

Ha! I found the root cause!!

If I disable the gurubase widget and Google tag manager, I won't see the detached elements any more. So I think the memory leak is coming from gurubase widget and Google tag manager. I think these 3rd party scripts might have objects the hold references to DOM elements that are used to be part of DOM.

👎 to these 3rd party components that handle GC carelessly.