Live Preview: dispatch an event after DOM is updated

[bentouch-digital]

Description

Hi,

We use Astro with UnoCSS to generate our CSS. In preview mode, we use the plugin "unocss/runtime" which generate CSS class at runtime.

Live preview is a nice feature but if we modify a field which generate new CSS the CSS it not generated by UnoCSS because we can't detect when the body is updated. It would be nice if a JS event is dispatched as the Astro Navigation work. Astro navigation dispatch events when the page swap.

Suggested solution or improvement

Dispatch an event when the body is updated in file /lib/live-preview/handleStoryblokMessage.ts

Additional context

No response

Validations

• Follow our Code of Conduct

[schabibi1]

Hi, @bentouch-digital
We'll have a look at this issue. Please feel free to add additional resources to help us investigate. (i.e. Screen recording of the behavior you described, reproduction steps, etc)

[bentouch-digital]

Hi @schabibi1,

I don't have any screen recording but the idea is just to dispatch a JS event when the body is updated.
If a Javascript event were dispatched, we could do this:

document.addEventListener('storyblok-astro-live-preview-body-updated', () => {
  // Here is the callback we could run code every time the body is updated via live preview
  console.log('Live preview: body updated');
  initUnoCssRuntime(); // With this line all our CSS is regenerated
});

[github-actions]

🎉 This issue has been resolved in version 6.0.0-next.2 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀