feat!: making livepreview stable and removing useStoryblok function

[dipankarmaikap]

This PR stabilizes the experimental Live Preview feature and introduces breaking changes. The useStoryblok hook is now deprecated and replaced by the new getLiveStory function. Below are the key updates and usage examples.

Breaking Changes

1. Removal of useStoryblok:
   The useStoryblok hook has been deprecated 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,
  type ISbStoryData,
} from '@storyblok/astro';
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
import BaseLayout from '../layouts/Layout.astro';

const { slug } = Astro.params;
let story: ISbStoryData | null = 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>
  {story && <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

[github-actions]

🎉 This PR is included in version 6.0.0-next.2 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[dipankarmaikap]

Closing this with an old commit has uppercase text, which causes an issue with our release rule.