Script throwing "Illegal Invocation" when adding an object to a reactive array about arrow-js HOT 2 CLOSED

Thanks for the repro! I’ll definitely look into this

from arrow-js.

@justin-schroeder The issue is occuring for HTMLElements and NodeList (and more I'm sure).

Probably the expectation for the following is that it doesn't crash:

const data = reactive({
  button: document.querySelector("button"),
  buttons: document.querySelectorAll('button')
})

I've looked into how it works in Vue.js, it's skipping reactivity any "object" that doesn't report being one of "'Object', 'Array', 'Map', 'Set', 'WeakMap', 'WeakSet'".

• https://github.com/vuejs/core/blob/main/packages/reactivity/src/reactive.ts#L274-L278
• which calls the following util https://github.com/vuejs/core/blob/8998afa42755cbdb3403cd6c0fe158980da8492c/packages/reactivity/src/reactive.ts#L43-L62

From a types point of view the following shouldn't really work, buttons is being initialised to an Array and then being set to a NodeList, but I guess it could be fixed also?

const data = reactive({
  button: {},
  buttons: [],
})
data.button = document.querySelector('button')
data.buttons = document.querySelectorAll("button")

I've got a fix for these in #87

from arrow-js.