Closed AllanOricil closed 1 year ago
@manuel-jasso @rwaldron
Could you help me to understand why this happens?
Because of this bug, I just had an idea for a product you could create. I believe Salesforce should create a tool that developers can use to determine which external libraries are compatible with LWS. Some type of auditing tool, maybe? I believe this tool would be feasible because LWS is a set of hardcoded rules that enforces security in lwc. You could maybe create a page where customers can find a list of external libraries that were tested and are compatible with LWS. Or just say "your external js won't work if it has X Y and Z". But ideally LWS should just not break anything.
One of the maintainers of Leaflet gave me a hint of what he thinks that LWS does to leaflet. I just don't have the skills to find exactly what is happening.
This is going to be hard to figure... it looks like no errors are emitted, and the issue is positional. As of today, LWS does not apply positional restrictions of any kind. My hunch of this one is that it is either:
a) the virtualization membrane that is causing some values to not get updated on time. probably related to event expandos or something like that. b) the elm.shadowRoot blockage (less likely, but possible that they are not able to calcular the actual position of an element, but its parent)
But without debugging this, it is going to be difficult.
I also believe it is related to event propagation because the circles are updated only after releasing the mouse when LWS is enabled.
@caridy I built an vue+leaflet app, then loaded it using lightning-container , enabled LWS, cleared my cache and did a hard reload, and the bug was gone
Yeah, that doesn't count though! That's just an iframe running your own vue+leaflet application in isolation inside that iframe, LWS doesn't have a saying in that case.
Description
This bug is caused when enabling Lightning Web Security (LWS).
In the video below, you can see that after enabling LWS, clearing the cache and reloading the screen, the semi circles stopped updating correctly
https://user-images.githubusercontent.com/55927613/205337972-3040bd77-c528-4087-902f-1ff164eaa7ab.mov
Steps to Reproduce
lwc:dom="manual"
directive to render a leaftlet map with some markers https://leafletjs.com/In this repo there is a simple sfdx project which you can use to debug the problem:
https://github.com/AllanOricil/salesforce-leaflet-bug
Use the branch called "no_plugins". I created it to show that the problem is happening in the leaflet core and has nothing to do with the plugins we use to draw semi-circles.
Expected Results
LWS should not break Leaflet. Custom shapes (circle, semi-circle, triangle...) should follow map transformations caused by user Inputs.
Actual Results
LWS breaks Leaflet. Custom shapes are no longer following map transformations caused by user Inputs.
Browsers Affected
It does not matter. Tested on chromium based browsers.
Version