define:vars not working in Safari

[aleksa-codes]

What version of astro are you using?

1.4.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

Mac, iOS

Describe the Bug

The issue was closed but the problem is still there: #4859

Check my footer in Safari on Mac/iOS for a reproduction of the problem.

code: https://github.com/aleksa-codes/astro-portfolio/blob/main/src/components/Footer.astro

Link to Minimal Reproducible Example

https://aleksa.codes

Participation

• I am willing to submit a pull request for this issue.

[rhizodigital]

I have same issue, In scripts the value is available directly inside script tag, but not inside a function. Works in firefox and chrome.

[rishi-raj-jain]

@aleksa-codes @matthewp something is making <script> as <script>{ when being added as a HTML Parts before render takes place. Not able to find the place where this extra curly brace could've been added.

[rishi-raj-jain]

@aleksa-codes I think it's more of a astro/compiler issue to detect? Those extra curly braces after the tag 👀

[janreges]

+1 ... curly braces {} which Astro adds to <script> with define:vars also causes the Alpine JS scripts to malfunction in Safari.

@matthewp is there any chance a fix for this critical problem will be in the next release of Astro?

[janreges]

@matthewp and @natemoo-re - all these problems in Safari are probably caused by changes in this PR #3976

I understand that {} are used to avoid redeclaration errors (which can be encountered by some use-cases), but unfortunately it causes fatal problems in Safari.

Unless there is a better solution for this situation, I suggest that the addition of {} be controlled by some configuration parameter. What do you think about it?

At the same time, I think that if someone decides to use define:vars in a repeatedly inserted component, they should ensure that these global variables have unique names. Typically containing e.g. entity ID, so e.g. <script define:vars={{`name_${componentId}`: $name}}`> ... </script>

[rishi-raj-jain]

Why do we need those {} at all? Reassigning won't be possible as the variable are defined with const (as let fails with safari scoping methods)

…

On Wed, Oct 26, 2022, 03:46 Ján Regeš ***@***.***> wrote: @matthewp <https://github.com/matthewp> and @natemoo-re <https://github.com/natemoo-re> - all these problems in Safari are probably caused by changes in this PR #3976 <#3976> I understand that {} are used to avoid redeclaration errors (which can be encountered by some use-cases), but unfortunately it causes fatal problems in Safari. Unless there is a better solution for this situation, I suggest that the addition of {} be controlled by some configuration parameter. What do you think about it? At the same time, I think that if someone decides to use define:vars in a repeatedly inserted component, they should ensure that these global variables have unique names. Typically containing e.g. entity ID, so e.g. ```<script define:vars={{name_${componentId}: $name}}`> ... </script>`` — Reply to this email directly, view it on GitHub <#5064 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALBHXORHFYXGTR4BEJKWJELWFBL3RANCNFSM6AAAAAARD7OUW4> . You are receiving this because you commented.Message ID: ***@***.***>

[janreges]

@rishi-raj-jain - it was a good intention from @natemoo-re and it solves a situation where a component with <script define:vars> is inserted more than once on the page. Thanks to that, wrapping it in {} will not cause reassignment, which would otherwise result in an error.

In my opinion, the addition of {} should not be automatic, but should be set by explicitly setting, for example, is:scoped. So {} would only be added in the case of a definition e.g. <script is:scoped define:vars={{ ... }}>.

At the same time, I would expect this behavior to be implemented in the renderElement method:

astro/packages/astro/src/runtime/server/render/util.ts

Line 109 in 37cb2fc

export function renderElement(

I was debugging this last night and it was very confusing to me that the logic isn't just inside the method.

[maxcountryman]

Hi folks, are there any workarounds in the meantime? I can rewrite component with React, etc but that is truly an awful situation to be in. Safari is not a niche browser, so this feels like an incredibly important issue to address.

[matthewp]

@janreges do you know the reason why the {} breaks in safari? Agree that this is more of a priority.

[matthewp]

Pretty sure it's this bug: https://bugs.webkit.org/show_bug.cgi?id=179698

[matthewp]

Got a fix in the works.

[matthewp]

Fix is in withastro/compiler#599