bug: dropdowns don't work after hot reload changes to layout file with Svelte

kunasun commented 1 month ago

What version of FlyonUI are you using?

v1.1.0

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://stackblitz.com/edit/flyonui-svelte-y2cmpt?file=src%2Froutes%2F%2Bpage.svelte

Describe your issue

I'm working with FlyonUI with SvelteKit and I noticed this issue which can be reproduced in the stackblitz link for the Svelte project template.

In the src/routes/+layout.svelte file there are the two dropdowns in the navbar. On first load when running the dev server, the dropdowns work fine. However, if you edit something in the +layout.svelte file (I edited the FlyonUI text to something else) and then try to interact with the dropdown, it does not work until you refresh the whole browser page.

Other notes:

Editing the +page.svelte file does not seem to break the dropdown between hot reloads, so maybe it is only related to the layout files, or only breaks if it hot reloads the component/page that the dropdown is part of
This might just be something with stackblitz or my misunderstanding of the way the library is being used, but if i try to add fields to the dropdown or edit the text within the dropdown (like CSS Components -> Random other Text) it does not seem to reflect the changes on the navbar and it stays static. Changing the text outside of the dropdown works so I am not sure what is happening here.

github-actions[bot] commented 1 month ago

Hi @kunasun

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

PruthviPraj00 commented 1 month ago

Hello @kunasun,

Svelte's Hot Module Replacement (HMR) provides the advantage of instantly reflecting file changes without the need for a full page reload. However, when you make modifications to +layout.svelte, which can affect the overall structure or state of the page, HMR updates the DOM without performing a complete reload. This behavior may disrupt the lifecycle or initialization of FlyonUI.js components.

FlyonUI.js depends on specific elements being present in the DOM during its initialization. When the DOM structure changes—such as when +layout.svelte is updated—the components of FlyonUI.js may not reinitialize correctly. This is why a full reload typically resolves the issue, as it forces a complete reinitialization of FlyonUI.js.

To mitigate this problem, you can modify +layout.svelte to ensure that FlyonUI.js is reinitialized after any DOM updates and navigation events. Here’s a suggested implementation:

<script>
  import { afterNavigate } from "$app/navigation";
  import { afterUpdate } from 'svelte';
  import "./styles.css";

  afterNavigate(() => {
    // Runs after navigating between pages
    HSStaticMethods.autoInit();
  });

  afterUpdate(() => {
    // Ensures FlyonUI.js is reinitialized after any DOM updates
    HSStaticMethods.autoInit();
  });
</script>

By incorporating this code, you can ensure that FlyonUI.js is properly reinitialized after DOM updates, which should help prevent issues arising from HMR.

Note: Feel free to test this in our StackBlitz example. We will also update our documentation to assist other users with similar concerns.

Thank you for your feedback!

I hope this helps! Let me know if you encounter any further issues.

kunasun commented 4 weeks ago

Thanks for the quick response! This is working better than before, but I have ran into some more issues. This is using the newly released Svelte5 so there might need to be some other changes to support this.

The issue I am encountering now is the same as above but within the +page.svelte files. If I make a change to the page and it hot reloads, the JS components on the page stop working (drawers, dropdowns, etc). I notice that I can fix this by adding the window.HSStaticMethods.autoInit(); within an $effect(() => window.HSStaticMethods.autoInit(); on the +page.svelte file but it does not apply globally to all pages in that case.

Another note: It seems like afterUpdate is deprecated in Svelte 5 and $effect() should be used instead. In your previous post, I could get the same results by using:

$effect(() => {
    window.HSStaticMethods.autoInit();
})

kunasun commented 4 days ago

Any update on this?

PruthviPraj00 commented 3 days ago

Hello @kunasun,

Apologies for the delay in responding to your question, and thank you for pointing out the new changes in Svelte. However, please note that after testing locally and in StackBlitz, we did not encounter any issues when adding the following code to +layout.svelte:

$effect(() => {
    window.HSStaticMethods.autoInit();
});

Here is the tested ZIP file for Svelte.

my-app.zip

themeselection / flyonui