feat!: making livepreview stable

[dipankarmaikap]

This PR stabilizes the experimental Live Preview feature and introduces breaking changes. The useStoryblok hook is now removed. Below are the key updates and usage examples.

Breaking Changes

1. Removal of useStoryblok:
   The useStoryblok hook has been removed in favor of getLiveStory. This function simplifies the implementation of live preview in your Astro application.

2. Named Export for storyblok:
   The storyblok initialization is now exported as a named export instead of a default export. Update your astro.config.mjs imports accordingly.

---

Usage Example

Configure Storyblok in astro.config.mjs using the named export:

import { storyblok } from '@storyblok/astro';

export default {
  integrations: [
    storyblok({
      accessToken: 'OsvN....',
      bridge: {
        resolveRelations: ['featured-articles.posts'],
      },
      enableFallbackComponent: true,
      livePreview: true,
    }),
  ],
};

Page Example

Here’s how you can use getLiveStory in a page:

---
// pages/[...slug].astro
import { getLiveStory, useStoryblokApi } from '@storyblok/astro';
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
import BaseLayout from '../layouts/Layout.astro';

const { slug } = Astro.params;
let story = null;

const liveStory = await getLiveStory(Astro);
if (liveStory) {
  story = liveStory;
} else {
  const sbApi = useStoryblokApi();
  const { data } = await sbApi.get(`cdn/stories/${slug || 'home'}`, {
    version: 'draft',
    resolve_relations: ['featured-articles.posts'],
  });
  story = data?.story;
}
---

<BaseLayout>
     <StoryblokComponent blok={story.content} />
</BaseLayout>

Listening for Live Preview Updates

When the live preview updates content in the Storyblok editor, a custom event (storyblok-live-preview-updated) is triggered. Applications can listen for this event as follows:

<script>
  document.addEventListener("storyblok-live-preview-updated", () => {
    console.log("Live preview: body updated");
  });
</script>

Closing Issues

This PR addresses and closes the following issue(s):

• Closes Live Preview: dispatch an event after DOM is updated #864
• Closes script for loadStoryblokBridge is injected twice #943
• Closes useStoryblok not working with Astro Server Islands #907
• Closes Wrong Return type for useStoryblok() #895

[alvarosabu]

Blocking the merge while doing the QG

[alvarosabu]

@dipankarmaikap QG passed, you can merge, great job