vueuse/head

Extending prototype of Array causes errors in 'dom/update-dom.ts' and 'ssr/index.ts'

RattleSneek opened this issue · 7 comments

Extending the Array.prototype with additional functions, causes the 'updateDOM' and 'renderHeadToString' functions to crash as "for..in" is used to iterate through the arrays instead of "for..of". Maybe you could use Array.forEach if you need an element of the array and the index of it?

Array.prototype.isEmpty = function (func = null) { func = func != null ? func : (_ => true); return !this.some(func); };

Above is one example of the functions we use in our packages, which makes those 'updateDOM' and 'renderHeadToString' functions crash (but we have many more handy functions, also for other types).

The errors above occur in version 1.0.0-rc.14, by the way.

What's the error with for..of instead of for..in exactly?

I have purposely avoided using the .forEach method as promises need to be resolved within each array entry, so it simplifies the code.

Also modifying native prototypes is bad practice these days from what I understand

Screenshot 2022-11-02 121114

This is what I get in our Nuxt 3 module code.

Ah okay I understand the issue now, it's iterating prototype methods

yes :)

If you would use for..of, we would not have this problem, and your code would be more legible. You would get code like:

for (const tag of head.hooks['resolved:tags']) await tag(headTags)

instead of

for (const h in head.hooks['resolved:tags']) await head.hooks['resolved:tags'][h](headTags)

Hey @RattleSneek

This should be fixed in the latest versions. Let me know if you still have any issues