Equality inside components is wrong

[dagnelies]

Instructions:

Select an address, it will fill the content and get highlighted. When changing some content in the address manually, the highlight should disappear since the button's content (original value) and the modified value obviously differ. The {{#if ~/target == .}} should become false. The printed JSON values and equality value is particularly disturbing.

https://ractive.js.org/playground/index.html?env=docs&hidemenu#N4IgLiBcIDwBZgLYBsB8AdAdvApgQwBMNN0wZkBLTAawAIAnHZAXnRAGcwBPZHduHDjBtacRgDNWIBGAAO7SAHpFnPAGNqsvGDgA6AEYB7Q2E708stQUy61hxIqMmzFxQBZdARl0BmRWvZ2R2NTMHNZXUQqW0CRKjAcAHN6Cm4pfjwfAA43AFoAWQBhAHcATizFAGUAMUwAcQBRLPEAKQAVHzqADWKGgHlMRPYANQB2AC0wACZRgDku6sM8QwBBWUQATUQszwoAVy7DAAVqar6W4pashoAlAmpMABkj-L6RNXpDQMMUxKopPCYQyYLiIQx7dhsYikGDsD4UWRgWjsehqKQyeRKfzWXQAK3YBCYFAAbvRdJghIpMOtFOY1GASTgoTAVPDEdCyJweDgOaQDGBMLRgFhSKKkHh6H9MJBaABWWQADwA3CLhGAAL6qllc3jEFkCQh6owELgcmAEEm0CgEKR2TBgPBUHD0d7IPCBW3Ah1Ol0gVAsi3E3kkTlspHWqQJRCyN0JETcWQ4SM4aOxpl+1WikMwwO0NRuj1scQ-RC5ZLg2RQzNq8h4fRMVAAaT29AAXvXWzgKGo4Jg9oMWW762hqzDiXhkHscLlZN3qM683BDN2+FJgMAe8u1HxdIU+vkjitZht1ZqQLQHZKhGvgJfEkJdABJLoAfUqAAk+jc2rMVvkGqeIiKLyNZULIexIvm7rsFIxb0KWdphIYyAiOOk5Jmw653g+z5vp+36-v+gHnsB1YBiS0LZmQcA+HmBYwWwCQKmAM4pIgEpcFCKz6OwOCYIS9D6j4IGjmQ5Z7LIM5zgum4rgxIDrrJ27sLoKwACJqTcDSVJUxEXhK95gDe2FgE+r51DcRwvtUNz7nppEkFRWZijmlpQYWIBwaW4mVhmTk1kODazHgiA4IOdYNqJMJgRBdHQbBJa5IhnwoeeaFTsZBk4eZlnWbZ+S6IRAFnrQDkuWQiiBiJwj+eabn0Ql8Flp8ElVv5MKBWgKwEAQjCBGFiiddV0XUrF7nyV5SVeilqEThlmG3llpm4RZVk2fuuiVG0WkNG09nVeRQZRbVubjY13ktb5w1kENRyPOM4XDtdMAxZBDVFolyXIbN6GZVey05Wt+W6Hd4z7aJh0iSd9XxR9TU+W15UdRFaCVA6BAVUNUVkK9cUeZNX2pbQ6UYQpi3-WZL6rXlG2FI+bQniVZVqjClUUVqrIpOymYhrCYZWjabAk1JGjOvGXCJsmqbaOmIHrgAxPgPaLlufCAbV+gQWAwJ4-J+gCkKwDyxQ4i0AAfooJm0MwzC0Lop765grEUOx9BcOuTC8Q7Aq5LxdoEBx66KCbenAkllAaFIAACui8WAAAUADkJmJwANHbACUiMs2q6725qtWOFrwJy8AihK3A6us3CXNgMGMI1wi4aCyAPki-OvoXhLpNRjGMvZ6QCsVyrclVznMCa2A2uCmdbCO4bxumxbVs23b3tO7IbGB8Ans4Ovvs4P72-B+IodO-mc7R7HQhJyn6e6FnflI2AQ-qHAF5wBQ7Bj8-eenhP9BmblSDhXH+NYi5TxLtWEBb8q5URgJvHkWAlI7gAAwynXC0SofRZixzCFQP44guDxxQSpVBGd1YmQwcALBOC8EpEGCbYhJkKEFwaAARz2BOAA-IbUhuhUHW1tiZdWtAxG0BZIgs0nMm711DLXKGYplASNnKLegI9lI3mKHAGWxJnR6RMjeEm4MqI3HUAyPRth7CyGBHxUwABtROwtVEd0TgAXWtrQMx9JGS6BwMxPiBB47Cn8r3NMMpE7y2cdJegidqzqizk5Ux5jfF2GjLY+07BHFtxcc6dxnjvEWJwH4gJ-FgmiTCTLCJ8sckxLiVRBJo4klinHOo9RtsKTFC8SkvR5TQkpj7gkaplSEhpwqUtapiFHQUlianUSAcHQYOxqQpZ7UWYgD3AeI8Gw2AynsWwBojw+i0DUhQP4DpkC0D6OIcQK5aB1EQPod8bB05sEqK7JEjYcBcGKD8C0gx7mPOeSANxcy1mihAGpFYbQGi7NoPskAUxUGeCyLkTwqDcjIpebQNgSKUVooxZ4TwbBQXYwhepTS2lKhwvsSE5+LkQBFV2Qco5JyzmpAnFcm5dyHlPJeWS9ZW0dptDhWwNoAAf-QBCFxozJLQNwPh+XgvWaDUVIBRjItGFkJV9L1l0wZmqtGWtEgSmECAAV6p050pzkjRlf5YVQDYO+Z06iVj0EwHgPYBAdU2ptSAIVDRdqGoks6MwuhaCeCmIqkAYLdUQtVVAHF6qfCjCmNqmNAqIX6p2Ymg5gRKCDD4mwC1bjsYF3KuWtUjTeYyO5tgYIJo9SKAQCgYgMaOBQBAO2tQnb21wCgKAegna0ycBAKeIAA

[dagnelies]

And when you click back and forth, the modified values are kept, but not shown in the buttons. It smells strongly of some shadow fancy broken magic.

[evs-chris]

Took me a minute to noodle this one through, but it seems to be behaving correctly. What's happening is you have a list of objects for the group select and the values for the inputs are bound to child properties of the objects. When you change a value, it changes the child property, but that doesn't affect the object equality of the parent objects in the list. If you want to detect a change, you'd have to clone the initial list and do a deep comparison, which fortunately for something relatively simple like this, can be done with JSON.stringify.

The reason the buttons don't also update even though the object is updating is that ractive doesn't track the same object across multiple keypaths unless you specifically tell it to with ractive.link. If you wanted to update the source choice, you would just need to use @.link(@keypath, 'target') instead of @.set.

[dagnelies]

Well, it might have a "logical" explanation from a technical point of view, I don't argue ...but from a user's perspective how it behaves is just plain crazy nonsensical.

The following excerpt:

JSON.stringify(choices.0): {"NAME":"A"}
JSON.stringify(target): {"NAME":"B"}
choices.0 == target ?   true    <===

...is from a user's perspective just completely nuts, if I may say so. It's not meant to be rude, just to illustrate the fact ;)

[evs-chris]

I don't disagree :smile:. Unfortunately there's not a really good way (that I've found) for ractive to figure out that a particular object also lives at another keypath unless you explicitly tell it so. I've looked into it before and the tracking overhead gets pretty serious if you have more than just a handful of keypaths in your data. The next best thing is to wrap data in a proxy that keeps track of where all it exists, but that's something I haven't had time to fully explore and it limits you a good bit on browser support.

[evs-chris]

To clarify a bit on the choices.0 == target with them showing different values on the template, when you change target or one of its child keypaths, ractive knows to update choices.0 == target too, because target is clearly referenced. It doesn't know that choices.0 should be updated though, so it doesn't try to sync the underlying value, which has clearly changed, back into the ui.

Again, I agree that it's surprising, but I haven't found a good way around it, and it's why link exists, since being able to handle it manually is better than nothing.

[dagnelies]

Actually, what I would intuitively expect is following:

@.link('a', 'b') => a and b refer to the same object. Equality prevails and changing a.child or b.child is the same.

@.set('a', b) => a's value is set to the value of b, they are "copies". Changing a.child or b.child does not affect the other which is separate.

PS: I did indeed solve it through JSON.parse/stringify, but I would have expected to behave like this in the first place.

[dagnelies]

Or at least putting a warning that something like @.set('foo', @.get('bar')) leads to unexpected/undesired results. That saids, directly making a copy in such cases would be easier. ;)

[evs-chris]

How would you go about making copies? Would you always do a deep clone on an object that gets set, or would you try to detect that the object is also installed elsewhere and automatically do a copy or link? If the former, I'd think that would cause issues with non-POJO objects and the latter, tracking gets pretty expensive, right?

I can't really think of a good way to have ractive warn you in that scenario, as that would involve all of the tracking that would allow automatic linking. So that leaves me with the docs, which are ok-ish but not in super great shape right now.

[dagnelies]

I wrongly assumed there was a way to differenciate a normal POJO from a Ractive.get one... But if that's not the case, there is indeed not much you can do. :/... What a pity.

[evs-chris]

I have a roadmap plan that involves setting up Proxies for ractive data, so that you don't have to use get/set that would also cover tracking where in the ractive hierarchy the data is available. That will limit you on browser support though, and is more of a 2.0 sort of thing.