Alpine: Readonly properties cannot reassign with proxy

[nandordudas]

I did try to make a multiple file selector, but i've got an error in deepProxy. File has only readonly properties.

I'm select at least one file and got the error.

https://codepen.io/nandordudas/pen/ExjvaeM

[philippbosch]

I'm experiencing the same issue. Error message is

TypeError: setting getter-only property "name"

This used to work in 1.9.x and broke with 1.10.0, in the proxy refactoring PR #163

[SimoTod]

Thanks for pointing this out.
It make sense, before the refactoring, we were just creating proxies on demand but we never reassigned properties. Unfortunately that was leading on a big performance drop when sorting arrays because Proxies grew exponentially after a couple of clicks.

I've just sent a PR to address it. This is the codepen using the fixed version: https://codepen.io/SimoTod/pen/LYVjdvB

[SimoTod]

@nandordudas @philippbosch Feel free to have a look at the PR, any feedback is welcome and appreciated.

[philippbosch]

Thank you once again @SimoTod !
I had just started to create a PR myself. I think this is the way to go. It makes a lot of sense to me and it fixes my issue 😊

[SimoTod]

Yeah, the alternative was to assign the result of deepproxy to another variable (const proxy) and reassign target[property] only when proxy !== target[property]. It would work because name is a string and not an object, it would also be quicker but i don't know if it would cover every cases (for example, Is it possible to have readonly properties containing objects?)

[nandordudas]

Thank you. I didnt know too. Tried to make a multiple file uploader, but the latest version failed - older version has another problem (the first item of the array wasnt available, logged in console but the iteration makes correct output in dom).
"reassign" is maybe not the best word for this case, but you solved

[SimoTod]

If you have time, can you stress-test the patched version please?

There are also other issues to solve with the proxy object, date objects don't work for example.

I'm holding the fire on that one since there are already a lot of pending PRs so I'm waiting for them to go down a bit.

[nandordudas]

Of course, i make some tomorrow

[calebporzio]

Fantastic, thanks for the PR @SimoTod, will wait for @nandordudas to confirm his test and I'll merge it. Thanks everyone!

[nandordudas]

Thanks for pointing this out.
It make sense, before the refactoring, we were just creating proxies on demand but we never reassigned properties. Unfortunately that was leading on a big performance drop when sorting arrays because Proxies grew exponentially after a couple of clicks.

I've just sent a PR to address it. This is the codepen using the fixed version: https://codepen.io/SimoTod/pen/LYVjdvB

Question: how can i access the [[Target]] of Proxy object - tried Reflect.get and Object.assign.

[philippbosch]

I don't think you can (or should). I've found some pretty hacky ways on SO but no thanks :)

[nandordudas]

In my example there is a file form and on change im trying to iterate each item (File), but they are under a proxy target. I can access the name, type, etc., but cannot the whole object - tried to asynchronously gettig stream.

Hacky ways => no no :)

ps: objects like sealed, freezed, with readonly props are proxied, errors gone - i'll make up for.

[philippbosch]

@nandordudas I think we're basically building the same thing. Here is how I solved this issue:
https://hospitable-robust-reindeer.glitch.me/

Basically, whenever the user adds files, I add them to a (proxied) files array but also to an internal unproxied queue array. That was the only way I was able to do it. But there might be smarter approaches.

[SimoTod]

We can add a magic property in the proxy getter to return the raw object. I did add it at some point, in one of the previous versions, but then I dropped it because I wasn't using it anymore and it was just an internal undocumented feature.

[philippbosch]

Hmm. That would be very helpful for @nandordudas' and my case. But I can‘t tell how exotic this requirement is.

[nandordudas]

@philippbosch has right, this is a very special case

there are many ways to solve the problem, this is not a fundamental

[nandordudas]

Using generic object with readonly props, sealed, plain with a readonly prop and freezed.

https://codepen.io/nandordudas/pen/KKpXKKL