Strange bug when looping through elements and adding to DOM (JavaScript bugs)

[0x5am5]

Strange bug when looping through elements and adding to DOM (JavaScript bugs)

[0x5am5]

@kof jittering is my bad. I had a weird easing on the animation. Doh!

[0x5am5]

Ok progress.

By selecting 'Client only' this fixes. I think overall this needs to be clearer or maybe something automatic when dom manipulation is being detected. Would be interesting to know what could be done serverside to know which is the default choice for scripts (html embeds?)

[0x5am5]

More related discoveries that trigger the same error.

I have some simple JavaScript that handles my nav button. Showing and hiding the main menu. I've got this in a HTML embed that I've copied across every page.

This works on first load but when navigating to any page, this script fails with the same error.

SyntaxError: Identifier 'menuButton' has already been declared

---

There's definitely something fruity going on with scripts and how they are loaded/handled.

One small indication is the fading in/out of the menu of my pages. It jitters. Which is normally an indication of gsap code firing a couple of times which syncs up with the "already declared" message.

Live in progress website: https://x-new-worlds-mttq5.wstd.io/

[kof]

Mostly server-side is useful for some html/css, 90% of scripts are manipulating dom. Problem is we can't know for sure.

[kof]

Once we move icons to a separate component, we could switch it over to client-only by default, so there is less situations to think about, but given icons is a super frequent use case right now, it is not clear which default is more practical.

If you think our tooltip could be better, let me know

[kof]

SyntaxError: Identifier 'menuButton' has already been declared

https://docs.webstudio.is/university/core-components/html-embed#avoid-creating-global-variables

[kof]

Maybe we could auto-set type module on scripts ...

[0x5am5]

@kof thank you. type="module" worked perfectly however I am still seeing 'jitters' in my GSAP animation. Not sure if this is related.

issue with auto type="module" is that In my HTML embed also has CSS in it. Unless you can do something at build time to add type="module".

Wording was perfect in the tooltip, it's just knowing what it's there for. Another alternative could be forcing the user to choose client or server side on creation before they are able to add code (still able to switch after the fact) or separate server HTML embed component entirely. It's a neat feature just with a few hidden quirks to use it.

[kof]

Seems like all things resolved here