@storyblok/astro 5.1.2 → 6.0.0-next.2

package/README.md

@@ -52,7 +52,7 @@ Add the following code to `astro.config.mjs` and replace the `accessToken` with
 
 ```js
 import { defineConfig } from "astro/config";
-import storyblok from "@storyblok/astro";
+import { storyblok } from "@storyblok/astro";
 
 export default defineConfig({
   integrations: [
@@ -75,6 +75,7 @@ When you initialize the integration, you can pass all [_@storyblok/js_ options](
 storyblok({
   accessToken: "<your-access-token>",
   bridge: true,
+  livePreview: false,
   apiOptions: {}, // storyblok-js-client options
   components: {},
   componentsDir: "src",
@@ -174,7 +175,7 @@ const { blok } = Astro.props
 ---
 
 <main {...storyblokEditable(blok)}>
-  {blok.body?.map(blok => {return <StoryblokComponent blok="{blok}" />})}
+  {blok.body?.map(blok => {return <StoryblokComponent blok={blok} />})}
 </main>
 ```
 
@@ -214,7 +215,7 @@ const { data } = await storyblokApi.get("cdn/stories/home", {
 const story = data.story;
 ---
 
-<StoryblokComponent blok="{story.content}" />
+<StoryblokComponent blok={story.content} />
 ```
 
 > [!NOTE]  
@@ -256,16 +257,13 @@ const { data } = await storyblokApi.get(`cdn/stories/${slug}`, {
 const story = data.story;
 ---
 
-<StoryblokComponent blok="{story.content}" />
+<StoryblokComponent blok={story.content} />
 ```
 
 ### Using the Storyblok Bridge
 
 The Storyblok Bridge is enabled by default. If you would like to disable it or enable it conditionally (e.g. depending on the environment) you can set the `bridge` parameter to `true` or `false` in `astro.config.mjs`:
 
-> [!NOTE]  
-> Since Astro is not a reactive JavaScript framework and renders everything as HTML, the Storyblok Bridge will not provide real-time editing as you may know it from other frameworks. However, it automatically refreshes the site for you whenever you save or publish a story.
-
 You can also provide a `StoryblokBridgeConfigV2` configuration object to the `bridge` parameter.
 
 ```ts
@@ -306,7 +304,7 @@ const { blok } = Astro.props
 const renderedRichText = renderRichText(blok.text)
 ---
 
-<div set:html="{renderedRichText}"></div>
+<div set:html={renderedRichText}></div>
 ```
 
 You can also set a **custom Schema and component resolver** by passing the options as the second parameter of the `renderRichText` function:
@@ -350,9 +348,6 @@ Returns the instance of the `storyblok-js-client`.
 
 ## Enabling Live Preview for Storyblok's Visual Editor
 
-> [!WARNING]
-> This feature is currently experimental and optional. You may encounters bugs or performance issues.
-
 The Astro SDK now provides a live preview feature, designed to offer real-time editing capabilities for an enhanced user experience in Storyblok's Visual Editor.
 
 > [!NOTE]  
@@ -375,28 +370,33 @@ export default defineConfig({
 });
 ```
 
-2. Additionally, please use `useStoryblok` on your Astro pages for story fetching. This replaces the previously used `useStoryblokApi` method.
+2. Additionally, please use `getLiveStory` on your Astro pages for live story fetching.
 
 ```jsx
 //pages/[...slug].astro
 ---
-import { useStoryblok } from "@storyblok/astro";
+import {
+  getLiveStory,
+  useStoryblokApi,
+  type ISbStoryData,
+} from '@storyblok/astro';
 import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
 
 const { slug } = Astro.params;
-
-const story = await useStoryblok(
-  // The slug to fetch
-  `cdn/stories/${slug === undefined ? "home" : slug}`,
-  // The API options
-  {
-    version: "draft",
-  },
-  // The Bridge options (optional, if an empty object, null, or false are set, the API options will be considered automatically as far as applicable)
-  {},
-  // The Astro object (essential for the live preview functionality)
-  Astro
-);
+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;
+}
+// If you are using `resolve_relations` or `resolve_links`, you must also pass them to the Bridge configuration in `astro.config.mjs`.  
 ---
 
 <StoryblokComponent blok={story.content} />

package/dist/index.d.ts

@@ -1,60 +1,7 @@
-import { AstroGlobal, AstroIntegration } from 'astro';
-import { ISbConfig, ISbRichtext, ISbStoriesParams, ISbStoryData, SbRichTextOptions, StoryblokBridgeConfigV2, StoryblokClient } from './types';
+import { default as storyblokIntegration } from './lib/storyblok-integration';
+export { getLiveStory, renderRichText, useStoryblokApi } from './lib/helpers';
 export { handleStoryblokMessage } from './live-preview/handleStoryblokMessage';
 export * from './types';
 export { toCamelCase } from './utils/toCamelCase';
 export { loadStoryblokBridge, RichTextResolver, RichTextSchema, storyblokEditable, } from '@storyblok/js';
-export declare function useStoryblokApi(): StoryblokClient;
-export declare function useStoryblok(slug: string, apiOptions: ISbStoriesParams | undefined, _: StoryblokBridgeConfigV2 | undefined, Astro: AstroGlobal): Promise<ISbStoryData<import('@storyblok/js').StoryblokComponentType<string> & {
-    [index: string]: any;
-}> | null>;
-export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string;
-export interface IntegrationOptions {
-    /**
-     * The access token from your space.
-     */
-    accessToken: string;
-    /**
-     *  If you want to use your own method to fetch data from Storyblok, you can disable this behavior by setting `useCustomApi` to `true`, resulting in an optimized final bundle.
-     */
-    useCustomApi?: boolean;
-    /**
-     * Set custom API options here (cache, region, and more). All options are documented [here](https://github.com/storyblok/storyblok-js-client#class-storyblok).
-     */
-    apiOptions?: ISbConfig;
-    /**
-     * A boolean to enable/disable the Storyblok JavaScript Bridge or provide a StoryblokBridgeConfigV2 configuration object. Enabled by default.
-     */
-    bridge?: boolean | StoryblokBridgeConfigV2;
-    /**
-     * An object containing your Astro components to their Storyblok equivalents.
-     * Example:
-     * ```js
-     * components: {
-     *   page: "storyblok/Page",
-     *   feature: "storyblok/Feature",
-     *   grid: "storyblok/Grid",
-     *   teaser: "storyblok/Teaser",
-     * },
-     * ```
-     */
-    components?: Record<string, string>;
-    /**
-     * The directory containing your Astro components are. Defaults to "src".
-     */
-    componentsDir?: string;
-    /**
-     * Show a fallback component in your frontend if a component is not registered properly.
-     */
-    enableFallbackComponent?: boolean;
-    /**
-     * Provide a path to a custom fallback component, e.g. "storyblok/customFallback".
-     * Please note: the path takes into account the `componentsDir` option.
-     */
-    customFallbackComponent?: string;
-    /**
-     * A boolean to enable/disable the Experimental Live Preview feature. Disabled by default.
-     */
-    livePreview?: boolean;
-}
-export default function storyblokIntegration(options: IntegrationOptions): AstroIntegration;
+export { storyblokIntegration as storyblok };

package/dist/lib/helpers.d.ts

@@ -0,0 +1,8 @@
+import { ISbRichtext, ISbStoryData, SbRichTextOptions, StoryblokBridgeConfigV2, StoryblokClient } from '../types';
+import { AstroGlobal } from 'astro';
+export declare function useStoryblokApi(): StoryblokClient;
+export declare function getLiveStory(Astro: AstroGlobal): Promise<ISbStoryData<import('@storyblok/js').StoryblokComponentType<string> & {
+    [index: string]: any;
+}> | null>;
+export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string;
+export declare function initStoryblokBridge(config: boolean | StoryblokBridgeConfigV2): string;

package/dist/lib/storyblok-integration.d.ts

@@ -0,0 +1,51 @@
+import { ISbConfig, StoryblokBridgeConfigV2 } from '@storyblok/js';
+import { AstroIntegration } from 'astro';
+export interface IntegrationOptions {
+    /**
+     * The access token from your space.
+     */
+    accessToken: string;
+    /**
+     *  If you want to use your own method to fetch data from Storyblok, you can disable this behavior by setting `useCustomApi` to `true`, resulting in an optimized final bundle.
+     */
+    useCustomApi?: boolean;
+    /**
+     * Set custom API options here (cache, region, and more). All options are documented [here](https://github.com/storyblok/storyblok-js-client#class-storyblok).
+     */
+    apiOptions?: ISbConfig;
+    /**
+     * A boolean to enable/disable the Storyblok JavaScript Bridge or provide a StoryblokBridgeConfigV2 configuration object. Enabled by default.
+     */
+    bridge?: boolean | StoryblokBridgeConfigV2;
+    /**
+     * An object containing your Astro components to their Storyblok equivalents.
+     * Example:
+     * ```js
+     * components: {
+     *   page: "storyblok/Page",
+     *   feature: "storyblok/Feature",
+     *   grid: "storyblok/Grid",
+     *   teaser: "storyblok/Teaser",
+     * },
+     * ```
+     */
+    components?: Record<string, string>;
+    /**
+     * The directory containing your Astro components are. Defaults to "src".
+     */
+    componentsDir?: string;
+    /**
+     * Show a fallback component in your frontend if a component is not registered properly.
+     */
+    enableFallbackComponent?: boolean;
+    /**
+     * Provide a path to a custom fallback component, e.g. "storyblok/customFallback".
+     * Please note: the path takes into account the `componentsDir` option.
+     */
+    customFallbackComponent?: string;
+    /**
+     * A boolean to enable/disable the Experimental Live Preview feature. Disabled by default.
+     */
+    livePreview?: boolean;
+}
+export default function storyblokIntegration(options: IntegrationOptions): AstroIntegration;