Support dimension bindings in cross-origin mode

[mrkishi]

bind:clientWidth and friends currently don't work when you're under cross-origin restrictions. This manifests itself in the REPL or any time a component with those bindings is used in a cross-origin iframe.

This PR just relies on message passing in these cases. The only browser that doesn't support this is IE11, but that's because it doesn't support srcdoc or src="data:", so I don't know what our options are. It didn't work before either, so it's not a regression.

As a small bonus, I made the helper follow the regular listener/bindings format, so it now reuses the dispose array with them.

Closes #2147 and sveltejs/svelte-repl#12.

[Conduitry]

Is it possible that none of these conditions will be true, and yet an exception is not thrown? If yes, crossorigin wouldn't get set in those cases. If not, could this be made a little clearer?

[mrkishi]

Either the last one throws, or one of them is true, but I'm not sure how to make it clearer. I suppose crossorigin = false could come before the tests, would that help? Perhaps adding a void to signify it's done on purpose instead of a forgotten statement?

if (crossorigin === undefined) {
    crossorigin = false;

    try {
        if (typeof window !== 'undefined' && window.parent) {
            void window.parent.document;
        }
    } catch (error) {
        crossorigin = true;
    }
}

return crossorigin;

[Conduitry]

Would this mean that the workaround in #2279 would no longer be necessary?

[Conduitry]

Actually, there are probably still some other things that people might want to do that require more relaxed sandboxing. Having a UI toggle for this is probably still a good TODO.

[Conduitry]

I:

• checked out this branch
• merged master in
• built with PUBLISH=1 npm run build
• disabled the relaxed sandbox on the REPL in site/src/routes/repl/[id]/index.svelte
• went to http://localhost:3000/repl/dimensions?version=local

and the size binding did not seem to be working. Did I do something wrong to test this?

[mrkishi]

Ah, interesting. I didn't notice it wasn't working for static elements after moving to event listeners. Will revert it so it still happens on mount.

[Conduitry]

@mrkishi Do you think you might have time to take another look at this?

[mrkishi]

Took me a while (...just a little bit), but finally moved it back to mounting phase - now working on static elements.

[Conduitry]

I don't know what browser difference this UA sniffing was originally meant to work around, but can you confirm that it's no longer necessary?

[mrkishi]

I'm honestly not sure. We're using iframe now and I tested it on Chrome/Firefox/Edge/Internet Explorer, but this might still make a difference on older IEs?

[thojanssens]

Hello. I was on version 3.20.1 and binding on clientWidth didn't work for me. After many hours of research I updated Svelte from 3.20.1 to 3.23.2 and now it works.

But I can't relate to the cross-origin thing... I don't use iframes, I'm simply using my dev environment, from a URL such as http://myapp.localhost:5000/

Why would it now work? Didn't you do more than supporting something related to cross origin?