search

storyblok / storyblok-astro

Astro SDK for Storyblok CMS
155 stars 28 forks source link

Live Preview: dispatch an event after DOM is updated #864

Open bentouch-digital opened 1 month ago

bentouch-digital commented 1 month ago

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

schabibi1 commented 1 month ago

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 commented 1 month ago

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
});