@storyblok/react 3.0.14 → 4.0.0

package/README.md

@@ -1,8 +1,8 @@
 <div align="center">
-	<a href="https://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react" align="center">
-		<img src="https://a.storyblok.com/f/88751/1776x360/ccc1c50c67/sb-react.png"  alt="Storyblok Logo">
-	</a>
-	<h1 align="center">@storyblok/react</h1>
+  <a href="https://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react" align="center">
+  <img src="https://a.storyblok.com/f/88751/1776x360/ccc1c50c67/sb-react.png"  alt="Storyblok Logo">
+  </a>
+  <h1 align="center">@storyblok/react</h1>
   <p align="center">
     The React plugin you need to interact with <a href="http://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react" target="_blank">Storyblok API</a> and enable the <a href="https://www.storyblok.com/docs/guide/essentials/visual-editor?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react" target="_blank">Real-time Visual Editing Experience</a>. This package helps you integrate Storyblok with React along with all types of React based frameworks like Next.js, Remix etc. This SDK also includes the support for React Server Side Components.
   </p>
@@ -63,15 +63,15 @@ Install the file from the CDN:
 Register the plugin on your application and add the [access token](https://www.storyblok.com/docs/api/content-delivery#topics/authentication?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react) of your Storyblok space. You can also add the `apiPlugin` in case that you want to use the Storyblok API Client:
 
 ```js
-import { storyblokInit, apiPlugin } from "@storyblok/react";
+import { apiPlugin, storyblokInit } from '@storyblok/react'
 
 /** Import your components */
-import Page from "./components/Page";
-import Teaser from "./components/Teaser";
+import Page from './components/Page'
+import Teaser from './components/Teaser'
 // import FallbackComponent from "./components/FallbackComponent";
 
 storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
+  accessToken: 'YOUR_ACCESS_TOKEN',
   use: [apiPlugin],
   components: {
     page: Page,
@@ -82,7 +82,7 @@ storyblokInit({
   // richText: {},
   // enableFallbackComponent: false,
   // customFallbackComponent: FallbackComponent,
-});
+})
 ```
 
 > Note: This is the general way for initalizing the SDK, the initialization might be a little different depending upon the framework. You can see how everything works according to the framework in their respective sections below.
@@ -106,16 +106,16 @@ Possible values:
 Full example for a space created in the US:
 
 ```js
-import { storyblokInit, apiPlugin } from "@storyblok/react";
+import { apiPlugin, storyblokInit } from '@storyblok/react'
 
 storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
+  accessToken: 'YOUR_ACCESS_TOKEN',
   use: [apiPlugin],
   apiOptions: {
-    region: "us",
+    region: 'us',
   },
   components: {},
-});
+})
 ```
 
 > Note: For spaces created in the United States or China, the `region` parameter **must** be specified.
@@ -129,7 +129,7 @@ storyblokInit({
 For every component you've defined in your Storyblok space, call the `storyblokEditable` function with the blok content:
 
 ```js
-import { storyblokEditable } from "@storyblok/react";
+import { storyblokEditable } from '@storyblok/react'
 
 const Feature = ({ blok }) => {
   return (
@@ -139,10 +139,10 @@ const Feature = ({ blok }) => {
         <p>{blok.description}</p>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Feature;
+export default Feature
 ```
 
 Where `blok` is the actual blok data coming from [Storyblok's Content Delivery API](https://www.storyblok.com/docs/api/content-delivery?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react).
@@ -164,19 +164,19 @@ The initalization remains the same when you work with React. You can intialze th
 Use `useStoryblok` to fetch the content as well as enable live editing. You need to pass the `slug` as the first parameter, `apiOptions` as the second parameter, and `bridgeOptions` as the third parameter, which is optional if you want to set the options for the bridge by yourself. Check the available [apiOptions](https://github.com/storyblok/storyblok-js-client#class-storyblok) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
 
 ```js
-import { useStoryblok, StoryblokComponent } from "@storyblok/react";
+import { StoryblokComponent, useStoryblok } from '@storyblok/react'
 
 function App() {
-  const story = useStoryblok("react", { version: "draft" });
+  const story = useStoryblok('react', { version: 'draft' })
 
   if (!story?.content) {
-    return <div>Loading...</div>;
+    return <div>Loading...</div>
   }
 
-  return <StoryblokComponent blok={story.content} />;
+  return <StoryblokComponent blok={story.content} />
 }
 
-export default App;
+export default App
 ```
 
 `StoryblokComponent` renders the route components dynamically, using the list of components loaded during the initialization inside the `storyblokInit` function.
@@ -186,13 +186,13 @@ This is how you can pass the Bridge options as a third parameter to `useStoryblo
 ```js
 useStoryblok(
   story.id,
-  { version: "draft", resolveRelations: ["Article.author"] },
+  { version: 'draft', resolveRelations: ['Article.author'] },
   {
-    resolveRelations: ["Article.author"],
-    resolveLinks: "url",
+    resolveRelations: ['Article.author'],
+    resolveLinks: 'url',
     preventClicks: true,
   }
-);
+)
 ```
 
 **Check out our React Boilerplate [here](https://github.com/storyblok/storyblok-react-boilerplate), or read on how to add Storyblok to React in 5 mins [here](https://www.storyblok.com/tp/headless-cms-react)**
@@ -210,19 +210,19 @@ For more details, refer to the Next.js documentation on [opting out of caching](
 
 Here's how you can fetch data from Storyblok with `cache: "no-store"`:
 
-```javascript
+```typescript
 export async function fetchData() {
-  let sbParams: ISbStoriesParams = { version: "draft" };
+  const sbParams: ISbStoriesParams = { version: 'draft' }
 
-  const storyblokApi: StoryblokClient = getStoryblokApi();
+  const storyblokApi: StoryblokClient = getStoryblokApi()
 
   return storyblokApi.get(`cdn/stories/home`, sbParams, {
-    cache: "no-store", // This prevents Next.js 13, 14 default caching behaviour
-  });
+    cache: 'no-store', // This prevents Next.js 13, 14 default caching behaviour
+  })
 }
 ```
 
-## Next.js using App Router - Live Editing support
+## Next.js using App Router
 
 The components in the `app` directory are by default React Server Side Components, which limits the reactivity. You can enable Storyblok Visual Editor's live editing with React Server Components by rendering them inside a wrapper (`StoryblokPovider`) on the client. The SDK allows you to take full advantage of the Live Editing, but the use of Server Side Components is partial, which will be still better than the older Next.js approach performance-wise. The next section explains about how to use complete server side approach.
 
@@ -230,16 +230,30 @@ The components in the `app` directory are by default React Server Side Component
 
 ### 1. Initialize
 
-In `app/layout.jsx`, call the `storyblokInit` function, but without loading the component list (we will do that on the client). Wrap your whole app using a `StoryblokProvider` component (this provider is created in the next step) :
+Create a new file `lib/storyblok.js` and initialize the SDK. Make sure you export the `getStoryblokApi` function, which is an instance of [storyblok-js-client](https://github.com/storyblok/storyblok-js-client) that is shared by client and server components.
 
 ```js
-import { storyblokInit, apiPlugin } from "@storyblok/react/rsc";
-import StoryblokProvider from "../components/StoryblokProvider";
+// lib/storyblok.js
+import Page from '@/components/Page';
+import Teaser from '@/components/Teaser';
+import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';
 
-storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
+export const getStoryblokApi = storyblokInit({
+  accessToken: 'YOUR_ACCESS_TOKEN',
   use: [apiPlugin],
+  components: {
+    teaser: Teaser,
+    page: Page,
+  },
 });
+```
+
+In `app/layout.jsx`, wrap your whole app using a `StoryblokProvider` component (this provider is created in the next step) :
+
+```js
+// app/layout.jsx
+import { apiPlugin, storyblokInit } from '@storyblok/react/rsc'
+import StoryblokProvider from '../components/StoryblokProvider'
 
 export default function RootLayout({ children }) {
   return (
@@ -248,47 +262,34 @@ export default function RootLayout({ children }) {
         <body>{children}</body>
       </html>
     </StoryblokProvider>
-  );
+  )
 }
 ```
 
 ### 2. Create StoryblokProvider and Import your Storyblok Components
 
-Create the `components/StoryblokProvider.jsx` file. Re-initalize the connection with Storyblok (this time, on the client) using `storyblokInit`, and import your Storyblok components:
+Create the `components/StoryblokProvider.jsx` file. Re-initalize the connection with Storyblok (this time, on the client) using the `getStoryblokApi` function imported from the `lib/storyblok` file. This will enable the client-side compoenents to interact with the Storyblok API, including the Visual Editor.
 
 ```js
-/** 1. Tag it as a client component */
-"use client";
-import { storyblokInit, apiPlugin } from "@storyblok/react/rsc";
+// components/StoryblokProvider.jsx
+'use client';
 
-/** 2. Import your components */
-import Page from "../components/Page";
-import Teaser from "../components/Teaser";
-
-/** 3. Initialize it as usual */
-storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
-  use: [apiPlugin],
-  components: {
-    teaser: Teaser,
-    page: Page,
-  },
-});
+import { getStoryblokApi } from '@/lib/storyblok';
 
 export default function StoryblokProvider({ children }) {
+  getStoryblokApi();
   return children;
 }
 ```
 
-> Note: it's necessary to re-initialize here as well, as to enable the live editing experience inside the Visual Editor you need to initialize the lib universally (client + server).
-
 ### 3. Fetch Content and Render Components
 
-The `getStoryblokApi` function, which is an instance of [storyblok-js-client](https://github.com/storyblok/storyblok-js-client) can be used to fetch the data from the Storyblok API. This should be imported from `@storyblok/react/rsc`.
-You can render the content of your route with the `StoryblokStory` component, which will automatically handle the Visual Editor live events when editing the story. In `app/page.jsx`, use them as follows:
+The `getStoryblokApi` function can now be used inside your Story components to fetch the data from Storyblok. In `app/page.jsx`, use it as follows:
 
 ```js
-import { getStoryblokApi, StoryblokStory } from "@storyblok/react/rsc";
+import { StoryblokClient, ISbStoriesParams } from '@storyblok/react';
+import { StoryblokStory } from '@storyblok/react/rsc';
+import { getStoryblokApi } from '@/lib/storyblok'; // Remember to import from the local file
 
 export default async function Home() {
   const { data } = await fetchData();
@@ -301,95 +302,25 @@ export default async function Home() {
 }
 
 export async function fetchData() {
-  const storyblokApi = getStoryblokApi();
-  return storyblokApi.get(`cdn/stories/home`, { version: "draft" });
+  let sbParams: ISbStoriesParams = { version: 'draft' };
+
+  const storyblokApi: StoryblokClient = getStoryblokApi();
+  return storyblokApi.get(`cdn/stories/home`, sbParams);
 }
 ```
 
 `StoryblokStory` keeps the state for thet story behind the scenes and uses `StoryblokComponent` to render the route components dynamically, using the list of components loaded during the initialization inside the `storyblokInit` function. You can use the `StoryblokComponent` inside the components to render the nested components dynamically. You can also pass bridge options to `StoryblokStory` using the prop `bridgeOptions`.
 
-```js
-const bridgeOptions = { resolveRelations: ["article.author"] };
+```jsx
+const bridgeOptions = { resolveRelations: ['article.author'] }
 
-<StoryblokStory story={data.story} bridgeOptions={bridgeOptions} />;
+<StoryblokStory story={data.story} bridgeOptions={bridgeOptions} />
 ```
 
 > Note: To use this approach (with `getStoryblokApi`), you need to include the `apiPlugin` module when calling `storyblokInit` function. If you don't use `apiPlugin`, you can use your preferred method or function to fetch your data.
 
 To try this setup, take a look at the [Next 13 Live Editing Playground](https://github.com/arorachakit/storyblok-react/tree/main/playground-next13-live-editing) in this repo.
 
-## Next.js using App Router - Full React Server Components
-
-If you want to use the Next.js `app` directory approach, and React Server Components exclusively with everything on the server side, follow this approach.
-
-> The SDK has a special module for RSC. Always import `@storyblok/react/rsc` while using Server Components.
-
-**Limitation** - Real-time editing won't work if all the components are rendered on the server. Although, you can see the changes applied in the Visual Editor whenever you save or publish the changes applied to the story.
-
-### 1. Initialize and Import your Storyblok Components
-
-The initialzation remains the same here as well. Please refer to the above section about "Initialization" for more information about `storyblokInit` function.
-In `app/layout.jsx`, call the `storyblokInit` function and use the new `StoryblokBridgeLoader` component to set up the Storyblok bridge. This Bridge Loader can be imported from `@storyblok/react/bridge-loader`:
-
-```js
-import { storyblokInit, apiPlugin, StoryblokBridgeLoader } from "@storyblok/react/rsc";
-
-import Page from "../components/Page";
-import Teaser from "../components/Teaser";
-
-storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
-  use: [apiPlugin],
-  components: {
-    teaser: Teaser,
-    page: Page,
-  },
-});
-
-export default RootLayout({ children }) =>{
-  const bridgeOptions = { resolveRelations: ["article.author"] };
-
-  return (
-    <html lang="en">
-      <body>{children}</body>
-      <StoryblokBridgeLoader options={bridgeOptions} />
-    </html>
-  );
-}
-```
-
-As the name says, `StoryblokBridgeLoader` loads the bridge on the client. It helps you see the dotted lines and allows you to still click on the components inside the Visual Editor to open their schema. You can pass the bridge options using the `options` prop.
-
-### 2. Fetch Content and Render Components
-
-The `getStoryblokApi` function, is an instance of [storyblok-js-client](https://github.com/storyblok/storyblok-js-client) can be used to fetch the data from the Storyblok API. This is imported from `@storyblok/react/rsc`.
-Go to the route you want to fetch data from and use it as follows:
-
-```js
-import { getStoryblokApi, StoryblokComponent } from "@storyblok/react/rsc";
-
-export default async function Home() {
-  const { data } = await fetchData();
-
-  return (
-    <div>
-      <h1>Story: {data.story.id}</h1>
-      <StoryblokComponent blok={data.story.content} />
-    </div>
-  );
-}
-
-export async function fetchData() {
-  const storyblokApi = getStoryblokApi();
-  return storyblokApi.get(`cdn/stories/home`, { version: "draft" });
-}
-```
-
-> Note: To use this approach (with `getStoryblokApi`), you need to include the `apiPlugin` module when calling `storyblokInit` function. If you don't use `apiPlugin`, you can use your preferred method or function to fetch your data.
-
-`StoryblokComponent` renders the route components dynamically, using the list of components loaded during the initialization inside the `storyblokInit` function.
-To try it, take a look at the [Next 13 RSC Playground](https://github.com/arorachakit/storyblok-react/tree/main/playground-next13-rsc) in this repo.
-
 ## Next.js using Pages Router
 
 In this section, we'll see how to use the React SDK with the `pages` directory approach.
@@ -401,11 +332,11 @@ The initalization remains the same when you work with Next.js. You can intialze
 The SDK provides a `getStoryblokApi` object in your app, which is an instance of [storyblok-js-client](https://github.com/storyblok/storyblok-js-client). This can be used to fetch the content from Storyblok. You can use it in functions like `getStaticProps`, `getStaticPaths`, `getServerSideProps` etc.
 
 ```js
-import { getStoryblokApi } from "@storyblok/react";
+import { getStoryblokApi } from '@storyblok/react'
 
 // At the required place
-const storyblokApi = getStoryblokApi();
-const { data } = await storyblokApi.get("cdn/stories", { version: "draft" });
+const storyblokApi = getStoryblokApi()
+const { data } = await storyblokApi.get('cdn/stories', { version: 'draft' })
 ```
 
 > Note: To use this approach, you need to include the `apiPlugin` module when calling `storyblokInit` function. If you don't use `apiPlugin`, you can use your preferred method or function to fetch your data.
@@ -415,16 +346,16 @@ const { data } = await storyblokApi.get("cdn/stories", { version: "draft" });
 The SDK also provides you with the `useStoryblokState` hook. It works similarly to `useStoryblok` for live editing, but it doesn't fetch the content. Instead, it receives a story object as the first parameter. You can also pass the Bridge Options as the second parameter.
 
 ```js
-import { useStoryblokState, StoryblokComponent } from "@storyblok/react";
+import { StoryblokComponent, useStoryblokState } from '@storyblok/react'
 
 export default function Home({ story: initialStory }) {
-  const story = useStoryblokState(initialStory);
+  const story = useStoryblokState(initialStory)
 
   if (!story.content) {
-    return <div>Loading...</div>;
+    return <div>Loading...</div>
   }
 
-  return <StoryblokComponent blok={story.content} />;
+  return <StoryblokComponent blok={story.content} />
 }
 ```
 
@@ -432,26 +363,26 @@ In this case, the story is being passed as a prop that can be coming from where
 
 ```js
 import {
-  useStoryblokState,
   getStoryblokApi,
   StoryblokComponent,
-} from "@storyblok/react";
+  useStoryblokState,
+} from '@storyblok/react'
 
 export default function Home({ story: initialStory }) {
-  const story = useStoryblokState(initialStory);
+  const story = useStoryblokState(initialStory)
 
   if (!story.content) {
-    return <div>Loading...</div>;
+    return <div>Loading...</div>
   }
 
-  return <StoryblokComponent blok={story.content} />;
+  return <StoryblokComponent blok={story.content} />
 }
 
 export async function getStaticProps({ preview = false }) {
-  const storyblokApi = getStoryblokApi();
-  let { data } = await storyblokApi.get(`cdn/stories/react`, {
-    version: "draft",
-  });
+  const storyblokApi = getStoryblokApi()
+  const { data } = await storyblokApi.get(`cdn/stories/react`, {
+    version: 'draft',
+  })
 
   return {
     props: {
@@ -459,7 +390,7 @@ export async function getStaticProps({ preview = false }) {
       preview,
     },
     revalidate: 3600, // revalidate every hour
-  };
+  }
 }
 ```
 
@@ -540,10 +471,10 @@ You can use an `apiOptions` object. This is passed down to the [storyblok-js-cli
 
 ```js
 storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
+  accessToken: 'YOUR_ACCESS_TOKEN',
   apiOptions: {
     // storyblok-js-client config object
-    cache: { type: "memory" },
+    cache: { type: 'memory' },
   },
   use: [apiPlugin],
   components: {
@@ -552,13 +483,13 @@ storyblokInit({
     grid: Grid,
     feature: Feature,
   },
-});
+})
 ```
 
 If you prefer to use your own fetch method, just remove the `apiPlugin` and `storyblok-js-client` won't be added to your application.
 
 ```js
-storyblokInit({});
+storyblokInit({})
 ```
 
 ### Storyblok Bridge
@@ -566,11 +497,11 @@ storyblokInit({});
 If you don't use `registerStoryblokBridge`, you still have access to the raw `window.StoryblokBridge`:
 
 ```js
-const sbBridge = new window.StoryblokBridge(options);
+const sbBridge = new window.StoryblokBridge(options)
 
-sbBridge.on(["input", "published", "change"], (event) => {
+sbBridge.on(['input', 'published', 'change'], (event) => {
   // ...
-});
+})
 ```
 
 ### Rendering Rich Text
@@ -578,54 +509,53 @@ sbBridge.on(["input", "published", "change"], (event) => {
 You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/react`:
 
 ```js
-import { renderRichText } from "@storyblok/react";
+import { renderRichText } from '@storyblok/react'
 
-const renderedRichText = renderRichText(blok.richtext);
+const renderedRichText = renderRichText(blok.richtext)
 ```
 
 You can set a **custom Schema and component resolver globally** at init time by using the `richText` init option:
 
 ```js
-import { RichTextSchema, storyblokInit } from "@storyblok/react";
-import cloneDeep from "clone-deep";
+import { RichTextSchema, storyblokInit } from '@storyblok/react'
+import cloneDeep from 'clone-deep'
 
-const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
+const mySchema = cloneDeep(RichTextSchema) // you can make a copy of the default RichTextSchema
 // ... and edit the nodes and marks, or add your own.
 // Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/main/src/schema.ts
 
 storyblokInit({
-  accessToken: "<your-token>",
+  accessToken: '<your-token>',
   richText: {
     schema: mySchema,
     resolver: (component, blok) => {
       switch (component) {
-        case "my-custom-component":
-          return `<div class="my-component-class">${blok.text}</div>`;
+        case 'my-custom-component':
+          return `<div class="my-component-class">${blok.text}</div>`
         default:
-          return "Resolver not defined";
+          return 'Resolver not defined'
       }
     },
   },
-});
+})
 ```
 
 You can also set a **custom Schema and component resolver only once** by passing the options as the second parameter to `renderRichText` function:
 
 ```js
-import { renderRichText } from "@storyblok/react";
+import { renderRichText } from '@storyblok/react'
 
 renderRichText(blok.richTextField, {
   schema: mySchema,
   resolver: (component, blok) => {
     switch (component) {
-      case "my-custom-component":
-        return `<div class="my-component-class">${blok.text}</div>`;
-        break;
+      case 'my-custom-component':
+        return `<div class="my-component-class">${blok.text}</div>`
       default:
-        return `Component ${component} not found`;
+        return `Component ${component} not found`
     }
   },
-});
+})
 ```
 
 We also recommend using the [Storyblok Rich Text Renderer for React by Claus](https://github.com/claus/storyblok-rich-text-react-renderer) for rendering your Storyblok rich text content to React elements and Next.js applications.
@@ -645,36 +575,36 @@ storyblokInit({
   components: {
     // all your React components
   },
-});
+})
 ```
 
 Storyblok's React SDK automatically renders these predefined components based on your page content. While this is convenient, it can lead to larger bundle sizes and slower page speeds, especially for larger sites or when using heavy JavaScript libraries that are only needed on specific pages or a specific component.
 
 ### Solutions
 
-1. **Storyblok's `setComponents` Function**: 
+1. **Storyblok's `setComponents` Function**:
    Storyblok SDK provides a function called `setComponents` that allows you to load only the components needed for each route instead of defining all components during initialization. This approach is useful but might not be practical if you use a catch-all route, which is common in many React frameworks.
 
-2. **React's `react.lazy`**: 
+2. **React's `react.lazy`**:
    React offers a built-in solution called `react.lazy` for code splitting. Instead of directly importing components, you can do the following:
-    
+
     ```javascript
-    "use client";
-    import { storyblokInit, apiPlugin } from "@storyblok/react/rsc";
-    import { lazy } from "react";
-    
+    'use client'
+    import { apiPlugin, storyblokInit } from '@storyblok/react/rsc'
+    import { lazy } from 'react'
+
     const lazyComponents = {
-      page: lazy(() => import("./components/Page")),
+      page: lazy(() => import('./components/Page')),
       // other lazy-loaded components
-    };
-    
+    }
+
     storyblokInit({
       accessToken,
       use: [apiPlugin],
       components: lazyComponents,
-    });
+    })
     ```
-    
+
     This approach enables automatic code splitting and loads only the necessary JavaScript for each page. However, `react.lazy` has some limitations when used with SSR (Server-Side Rendering).
 
 3. **Using `@loadable/component`**:
@@ -706,3 +636,7 @@ By using these techniques, you can ensure that only the necessary components and
 
 Please see our [contributing guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and our [code of conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react).
 This project use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check [this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) about it in semantic-release FAQ.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

package/dist/client.js

@@ -1 +1,2 @@
+"use client";
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),b=require("./storyblok-js.js"),f=(e=null,o={})=>{const[u,s]=d.useState(e),r=(e==null?void 0:e.internalId)??(e==null?void 0:e.id)??0,t=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u";return d.useEffect(()=>{s(e),!(!t||!e)&&b.registerStoryblokBridge(r,c=>s(c),o)},[e]),u};exports.useStoryblokState=f;

package/dist/client.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useState as c, useEffect as p } from "react";
 import { registerStoryblokBridge as b } from "./storyblok-js.mjs";
 const n = (e = null, d = {}) => {

package/dist/common.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./storyblok-js.js"),b=require("./server-component.js");let t=null;const n=new Map;let l=!1,s=null;globalThis.storyCache=new Map;const a=()=>(t||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),t),c=e=>(Object.entries(e).forEach(([r,i])=>{n.set(r,i)}),n),k=e=>n.has(e)?n.get(e):(console.error(`Component ${e} doesn't exist.`),!1),m=()=>l,u=()=>s,g=(e={})=>{if(t)return()=>t;const{storyblokApi:r}=o.storyblokInit(e);return t=r,e.components&&c(e.components),l=e.enableFallbackComponent,s=e.customFallbackComponent,()=>r};exports.RichTextResolver=o.RichTextResolver;exports.RichTextSchema=o.RichTextSchema;exports.apiPlugin=o.apiPlugin;exports.loadStoryblokBridge=o.loadStoryblokBridge;exports.registerStoryblokBridge=o.registerStoryblokBridge;exports.renderRichText=o.renderRichText;exports.storyblokEditable=o.storyblokEditable;exports.useStoryblokBridge=o.registerStoryblokBridge;exports.StoryblokServerComponent=b;exports.getComponent=k;exports.getCustomFallbackComponent=u;exports.getEnableFallbackComponent=m;exports.getStoryblokApi=a;exports.setComponents=c;exports.storyblokInit=g;exports.useStoryblokApi=a;

package/dist/common.mjs

@@ -0,0 +1,35 @@
+import { storyblokInit as a } from "./storyblok-js.mjs";
+import { RichTextResolver as g, RichTextSchema as C, apiPlugin as d, loadStoryblokBridge as S, registerStoryblokBridge as h, renderRichText as x, storyblokEditable as F, registerStoryblokBridge as A } from "./storyblok-js.mjs";
+import { default as M } from "./server-component.mjs";
+let e = null;
+const r = /* @__PURE__ */ new Map();
+let n = !1, l = null;
+globalThis.storyCache = /* @__PURE__ */ new Map();
+const i = () => (e || console.error(
+  "You can't use getStoryblokApi if you're not loading apiPlugin."
+), e), c = (o) => (Object.entries(o).forEach(([t, s]) => {
+  r.set(t, s);
+}), r), k = (o) => r.has(o) ? r.get(o) : (console.error(`Component ${o} doesn't exist.`), !1), m = () => n, p = () => l, u = (o = {}) => {
+  if (e)
+    return () => e;
+  const { storyblokApi: t } = a(o);
+  return e = t, o.components && c(o.components), n = o.enableFallbackComponent, l = o.customFallbackComponent, () => t;
+};
+export {
+  g as RichTextResolver,
+  C as RichTextSchema,
+  M as StoryblokServerComponent,
+  d as apiPlugin,
+  k as getComponent,
+  p as getCustomFallbackComponent,
+  m as getEnableFallbackComponent,
+  i as getStoryblokApi,
+  S as loadStoryblokBridge,
+  h as registerStoryblokBridge,
+  x as renderRichText,
+  c as setComponents,
+  F as storyblokEditable,
+  u as storyblokInit,
+  i as useStoryblokApi,
+  A as useStoryblokBridge
+};

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),e=require("./storyblok-js.js"),o=require("./index2.js"),c=require("./client.js"),S=require("./storyblok-component.js"),d=(s,r={},t={})=>{let[a,i]=y.useState({});const u=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u",n=o.useStoryblokApi();return y.useEffect(()=>{if(!n){console.error("You can't use useStoryblok if you're not loading apiPlugin.");return}async function b(){const{data:l}=await n.get(`cdn/stories/${s}`,r);i(l.story),u&&l.story.id&&e.registerStoryblokBridge(l.story.id,k=>i(k),t)}b()},[s,JSON.stringify(r),n]),n?(t.resolveRelations=t.resolveRelations??r.resolve_relations,t.resolveLinks=t.resolveLinks??r.resolve_links,a):null};exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.getComponent=o.getComponent;exports.getCustomFallbackComponent=o.getCustomFallbackComponent;exports.getEnableFallbackComponent=o.getEnableFallbackComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.useStoryblokState=c.useStoryblokState;exports.StoryblokComponent=S;exports.useStoryblok=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),e=require("./storyblok-js.js"),o=require("./index2.js"),k=require("./client.js"),S=require("./storyblok-component.js"),d=(s,r={},t={})=>{const[a,i]=y.useState({}),u=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u",n=o.useStoryblokApi();return y.useEffect(()=>{if(!n){console.error("You can't use useStoryblok if you're not loading apiPlugin.");return}async function b(){const{data:l}=await n.get(`cdn/stories/${s}`,r);i(l.story),u&&l.story.id&&e.registerStoryblokBridge(l.story.id,c=>i(c),t)}b()},[s,JSON.stringify(r),n]),n?(t.resolveRelations=t.resolveRelations??r.resolve_relations,t.resolveLinks=t.resolveLinks??r.resolve_links,a):null};exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.getComponent=o.getComponent;exports.getCustomFallbackComponent=o.getCustomFallbackComponent;exports.getEnableFallbackComponent=o.getEnableFallbackComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.useStoryblokState=k.useStoryblokState;exports.StoryblokComponent=S;exports.useStoryblok=d;

package/dist/index.mjs

@@ -6,8 +6,7 @@ import { getComponent as h, getCustomFallbackComponent as A, getEnableFallbackCo
 import { useStoryblokState as N } from "./client.mjs";
 import { default as _ } from "./storyblok-component.mjs";
 const b = (s, e = {}, o = {}) => {
-  let [l, n] = f({});
-  const i = typeof window < "u" && typeof window.storyblokRegisterEvent < "u", t = c();
+  const [l, n] = f({}), i = typeof window < "u" && typeof window.storyblokRegisterEvent < "u", t = c();
   return u(() => {
     if (!t) {
       console.error(

package/dist/live-edit-update-action.js

@@ -0,0 +1,2 @@
+"use server";
+"use strict";var n=Object.create;var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty;var p=(e,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of d(t))!s.call(e,r)&&r!==i&&a(e,r,{get:()=>t[r],enumerable:!(o=c(t,r))||o.enumerable});return e};var v=(e,t,i)=>(i=e!=null?n(l(e)):{},p(t||!e||!e.__esModule?a(i,"default",{value:e,enumerable:!0}):i,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});async function u({story:e,pathToRevalidate:t}){if(!e||!t)return console.error("liveEditUpdateAction: story or pathToRevalidate is not provided");if(globalThis.storyCache.set(e.uuid,e),process.env.NEXT_RUNTIME)try{const{revalidatePath:i}=await import("next/cache");i(t)}catch(i){console.error("liveEditUpdateAction: error while revalidating path",i)}}exports.liveEditUpdateAction=u;

package/dist/live-edit-update-action.mjs

@@ -0,0 +1,15 @@
+"use server";
+async function r({ story: e, pathToRevalidate: i }) {
+  if (!e || !i)
+    return console.error("liveEditUpdateAction: story or pathToRevalidate is not provided");
+  if (globalThis.storyCache.set(e.uuid, e), process.env.NEXT_RUNTIME)
+    try {
+      const { revalidatePath: t } = await import("next/cache");
+      t(i);
+    } catch (t) {
+      console.error("liveEditUpdateAction: error while revalidating path", t);
+    }
+}
+export {
+  r as liveEditUpdateAction
+};

package/dist/live-editing.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";const r=require("./storyblok-js.js"),t=require("react"),o=require("./live-edit-update-action.js"),a=({story:e=null,bridgeOptions:i={}})=>{if(typeof window>"u")return null;const d=n=>{n&&t.startTransition(()=>{o.liveEditUpdateAction({story:n,pathToRevalidate:window.location.pathname})})},l=(e==null?void 0:e.internalId)??(e==null?void 0:e.id)??0;return t.useEffect(()=>{r.registerStoryblokBridge(l,n=>d(n),i)},[]),null};module.exports=a;

package/dist/live-editing.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { registerStoryblokBridge as d } from "./storyblok-js.mjs";
+import { useEffect as l, startTransition as o } from "react";
+import { liveEditUpdateAction as r } from "./live-edit-update-action.mjs";
+const m = ({ story: n = null, bridgeOptions: i = {} }) => {
+  if (typeof window > "u")
+    return null;
+  const t = (e) => {
+    e && o(() => {
+      r({ story: e, pathToRevalidate: window.location.pathname });
+    });
+  }, a = (n == null ? void 0 : n.internalId) ?? (n == null ? void 0 : n.id) ?? 0;
+  return l(() => {
+    d(a, (e) => t(e), i);
+  }, []), null;
+};
+export {
+  m as default
+};

package/dist/rsc.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index2.js"),r=require("./story.js"),t=require("./bridge-loader.js"),l=require("./storyblok-component.js"),e=require("./storyblok-js.js");exports.getComponent=o.getComponent;exports.getCustomFallbackComponent=o.getCustomFallbackComponent;exports.getEnableFallbackComponent=o.getEnableFallbackComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.StoryblokStory=r;exports.BridgeLoader=t;exports.StoryblokBridgeLoader=t;exports.StoryblokComponent=l;exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./common.js"),t=require("./story.js"),r=require("./server-component.js"),e=require("./storyblok-js.js");exports.getComponent=o.getComponent;exports.getCustomFallbackComponent=o.getCustomFallbackComponent;exports.getEnableFallbackComponent=o.getEnableFallbackComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.StoryblokStory=t;exports.StoryblokServerComponent=r;exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;

package/dist/rsc.mjs

@@ -1,26 +1,23 @@
-import { getComponent as t, getCustomFallbackComponent as r, getEnableFallbackComponent as l, useStoryblokApi as a, setComponents as i, storyblokInit as s, useStoryblokApi as b } from "./index2.mjs";
+import { getComponent as t, getCustomFallbackComponent as r, getEnableFallbackComponent as l, useStoryblokApi as i, setComponents as a, storyblokInit as b, useStoryblokApi as s } from "./common.mjs";
 import { default as k } from "./story.mjs";
-import { default as p, default as g } from "./bridge-loader.mjs";
-import { default as m } from "./storyblok-component.mjs";
-import { RichTextResolver as f, RichTextSchema as u, apiPlugin as x, loadStoryblokBridge as c, registerStoryblokBridge as B, renderRichText as C, storyblokEditable as h, registerStoryblokBridge as R } from "./storyblok-js.mjs";
+import { default as y } from "./server-component.mjs";
+import { RichTextResolver as g, RichTextSchema as m, apiPlugin as d, loadStoryblokBridge as u, registerStoryblokBridge as x, renderRichText as c, storyblokEditable as f, registerStoryblokBridge as C } from "./storyblok-js.mjs";
 export {
-  p as BridgeLoader,
-  f as RichTextResolver,
-  u as RichTextSchema,
-  g as StoryblokBridgeLoader,
-  m as StoryblokComponent,
+  g as RichTextResolver,
+  m as RichTextSchema,
+  y as StoryblokServerComponent,
   k as StoryblokStory,
-  x as apiPlugin,
+  d as apiPlugin,
   t as getComponent,
   r as getCustomFallbackComponent,
   l as getEnableFallbackComponent,
-  a as getStoryblokApi,
-  c as loadStoryblokBridge,
-  B as registerStoryblokBridge,
-  C as renderRichText,
-  i as setComponents,
-  h as storyblokEditable,
-  s as storyblokInit,
-  b as useStoryblokApi,
-  R as useStoryblokBridge
+  i as getStoryblokApi,
+  u as loadStoryblokBridge,
+  x as registerStoryblokBridge,
+  c as renderRichText,
+  a as setComponents,
+  f as storyblokEditable,
+  b as storyblokInit,
+  s as useStoryblokApi,
+  C as useStoryblokBridge
 };

package/dist/server-component.js

@@ -0,0 +1 @@
+"use strict";const e=require("react"),o=require("./common.js");require("./story.js");const c=e.forwardRef(({blok:t,...n},m)=>{if(!t)return console.error("Please provide a 'blok' property to the StoryblokComponent"),e.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const r=o.getComponent(t.component);if(r)return e.createElement(r,{ref:m,blok:t,...n});if(o.getEnableFallbackComponent()){const l=o.getCustomFallbackComponent();return l?e.createElement(l,{blok:t,...n}):e.createElement(e.Fragment,null,e.createElement("p",null,"Component could not be found for blok"," ",e.createElement("strong",null,t.component),"! Is it configured correctly?"))}return e.createElement("div",null)});c.displayName="StoryblokComponent";module.exports=c;

package/dist/server-component.mjs

@@ -0,0 +1,23 @@
+import e, { forwardRef as m } from "react";
+import { getComponent as a, getEnableFallbackComponent as p, getCustomFallbackComponent as c } from "./common.mjs";
+import "./story.mjs";
+const u = m(
+  ({ blok: t, ...o }, l) => {
+    if (!t)
+      return console.error(
+        "Please provide a 'blok' property to the StoryblokComponent"
+      ), /* @__PURE__ */ e.createElement("div", null, "Please provide a blok property to the StoryblokComponent");
+    const n = a(t.component);
+    if (n)
+      return /* @__PURE__ */ e.createElement(n, { ref: l, blok: t, ...o });
+    if (p()) {
+      const r = c();
+      return r ? /* @__PURE__ */ e.createElement(r, { blok: t, ...o }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Component could not be found for blok", " ", /* @__PURE__ */ e.createElement("strong", null, t.component), "! Is it configured correctly?"));
+    }
+    return /* @__PURE__ */ e.createElement("div", null);
+  }
+);
+u.displayName = "StoryblokComponent";
+export {
+  u as default
+};

package/dist/story.js

@@ -1,2 +1 @@
-"use client";
-"use strict";const t=require("react"),c=require("./client.js"),i=require("./storyblok-component.js"),l=t.forwardRef(({story:e,bridgeOptions:n,...o},r)=>(typeof e.content=="string"&&(e.content=JSON.parse(e.content)),e=c.useStoryblokState(e,n),t.createElement(i,{ref:r,blok:e.content,...o})));module.exports=l;
+"use strict";const r=require("react");require("./common.js");const i=require("./live-editing.js"),l=require("./server-component.js"),a=r.forwardRef(({story:e,bridgeOptions:t,...n},o)=>{if(!e)return console.error("Please provide a 'story' property to the StoryblokServerComponent"),null;if(globalThis.storyCache.has(e.uuid)&&(e=globalThis.storyCache.get(e.uuid)),typeof e.content=="string")try{e.content=JSON.parse(e.content)}catch(c){console.error("An error occurred while trying to parse the story content",c),e.content={}}return r.createElement(r.Fragment,null,r.createElement(l,{ref:o,blok:e.content,...n}),r.createElement(i,{story:e,bridgeOptions:t}))});module.exports=a;

package/dist/story.mjs

@@ -1,10 +1,25 @@
-"use client";
-import r, { forwardRef as f } from "react";
-import { useStoryblokState as m } from "./client.mjs";
-import a from "./storyblok-component.mjs";
-const S = f(
-  ({ story: t, bridgeOptions: o, ...e }, n) => (typeof t.content == "string" && (t.content = JSON.parse(t.content)), t = m(t, o), /* @__PURE__ */ r.createElement(a, { ref: n, blok: t.content, ...e }))
+import r, { forwardRef as c } from "react";
+import "./common.mjs";
+import a from "./live-editing.mjs";
+import i from "./server-component.mjs";
+const h = c(
+  ({ story: e, bridgeOptions: t, ...o }, n) => {
+    if (!e)
+      return console.error(
+        "Please provide a 'story' property to the StoryblokServerComponent"
+      ), null;
+    if (globalThis.storyCache.has(e.uuid) && (e = globalThis.storyCache.get(e.uuid)), typeof e.content == "string")
+      try {
+        e.content = JSON.parse(e.content);
+      } catch (l) {
+        console.error(
+          "An error occurred while trying to parse the story content",
+          l
+        ), e.content = {};
+      }
+    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(i, { ref: n, blok: e.content, ...o }), /* @__PURE__ */ r.createElement(a, { story: e, bridgeOptions: t }));
+  }
 );
 export {
-  S as default
+  h as default
 };

package/dist/types/common/client.d.ts

@@ -1,2 +1,2 @@
-import type { TUseStoryblokState } from "../types";
+import type { TUseStoryblokState } from '../types';
 export declare const useStoryblokState: TUseStoryblokState;

package/dist/types/common/index.d.ts

@@ -1,11 +1,11 @@
-import { SbReactComponentsMap, SbReactSDKOptions, StoryblokClient } from "../types";
+import type { SbReactComponentsMap, SbReactSDKOptions, StoryblokClient } from '../types';
 export declare const useStoryblokApi: () => StoryblokClient;
 export declare const setComponents: (newComponentsMap: SbReactComponentsMap) => SbReactComponentsMap;
 export declare const getComponent: (componentKey: string) => false | import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
 export declare const getEnableFallbackComponent: () => boolean;
 export declare const getCustomFallbackComponent: () => import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
 export declare const storyblokInit: (pluginOptions?: SbReactSDKOptions) => void;
-export { default as StoryblokComponent } from "./storyblok-component";
+export * from '../types';
 export { useStoryblokApi as getStoryblokApi };
-export { storyblokEditable, apiPlugin, loadStoryblokBridge, useStoryblokBridge, registerStoryblokBridge, renderRichText, RichTextResolver, RichTextSchema, } from "@storyblok/js";
-export * from "../types";
+export { default as StoryblokComponent } from './storyblok-component';
+export { apiPlugin, loadStoryblokBridge, registerStoryblokBridge, renderRichText, RichTextResolver, RichTextSchema, storyblokEditable, useStoryblokBridge, } from '@storyblok/js';

package/dist/types/common/storyblok-component.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import type { SbBlokData } from "../types";
+import React from 'react';
+import type { SbBlokData } from '../types';
 interface StoryblokComponentProps {
     blok: SbBlokData;
     [key: string]: unknown;

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
-import { ISbStoriesParams, StoryblokBridgeConfigV2, ISbStoryData } from "./types";
+import type { ISbStoriesParams, ISbStoryData, StoryblokBridgeConfigV2 } from './types';
 export declare const useStoryblok: (slug: string, apiOptions?: ISbStoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => ISbStoryData<import("@storyblok/js").StoryblokComponentType<string> & {
     [index: string]: any;
 }>;
-export * from "./common";
-export * from "./common/client";
+export * from './common';
+export * from './common/client';

package/dist/types/rsc/common.d.ts

@@ -0,0 +1,11 @@
+import type { SbReactComponentsMap, SbReactSDKOptions, StoryblokClient } from '../types';
+export declare const useStoryblokApi: () => StoryblokClient;
+export declare const setComponents: (newComponentsMap: SbReactComponentsMap) => Map<string, import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>>;
+export declare const getComponent: (componentKey: string) => React.ElementType | false;
+export declare const getEnableFallbackComponent: () => boolean;
+export declare const getCustomFallbackComponent: () => import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
+export declare const storyblokInit: (pluginOptions?: SbReactSDKOptions) => (() => StoryblokClient);
+export * from '../types';
+export { useStoryblokApi as getStoryblokApi };
+export { default as StoryblokServerComponent } from './server-component';
+export { apiPlugin, loadStoryblokBridge, registerStoryblokBridge, renderRichText, RichTextResolver, RichTextSchema, storyblokEditable, useStoryblokBridge, } from '@storyblok/js';

package/dist/types/rsc/index.d.ts

@@ -1,4 +1,2 @@
-export * from "../common";
-export { default as StoryblokStory } from "../story";
-export { default as BridgeLoader } from "../bridge-loader";
-export { default as StoryblokBridgeLoader } from "../bridge-loader";
+export * from './common';
+export { default as StoryblokStory } from './story';

package/dist/types/rsc/live-edit-update-action.d.ts

@@ -0,0 +1,4 @@
+export declare function liveEditUpdateAction({ story, pathToRevalidate }: {
+    story: any;
+    pathToRevalidate: any;
+}): Promise<void>;

package/dist/types/rsc/live-editing.d.ts

@@ -0,0 +1,5 @@
+declare const StoryblokLiveEditing: ({ story, bridgeOptions }: {
+    story?: any;
+    bridgeOptions?: {};
+}) => any;
+export default StoryblokLiveEditing;

package/dist/types/rsc/server-component.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SbBlokData } from '../types';
+interface SbServerComponentProps {
+    blok: SbBlokData;
+    [key: string]: unknown;
+}
+declare const StoryblokServerComponent: React.ForwardRefExoticComponent<Omit<SbServerComponentProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export default StoryblokServerComponent;

package/dist/types/{story.d.ts → rsc/story.d.ts}

@@ -1,5 +1,5 @@
-import React from "react";
-import { ISbStoryData, StoryblokBridgeConfigV2 } from "./types";
+import React from 'react';
+import type { ISbStoryData, StoryblokBridgeConfigV2 } from '../types';
 interface StoryblokStoryProps {
     story: ISbStoryData;
     bridgeOptions: StoryblokBridgeConfigV2;

package/dist/types/types.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
-import { SbSDKOptions } from "@storyblok/js";
-import type { ISbStoryData, StoryblokBridgeConfigV2 } from "@storyblok/js";
+import type React from 'react';
+import type { ISbStoryData, SbSDKOptions, StoryblokBridgeConfigV2 } from '@storyblok/js';
 export interface SbReactComponentsMap {
     [key: string]: React.ElementType;
 }
@@ -10,4 +9,4 @@ export interface SbReactSDKOptions extends SbSDKOptions {
     customFallbackComponent?: React.ElementType;
 }
 export type TUseStoryblokState = <T = void>(initialStory: ISbStoryData<T> | null, bridgeOptions?: StoryblokBridgeConfigV2) => ISbStoryData<T> | null;
-export type { ISbConfig, ISbCache, ISbResult, ISbResponse, ISbError, ISbNode, ISbSchema, ThrottleFn, AsyncFn, ArrayFn, ISbContentMangmntAPI, ISbManagmentApiResult, ISbStories, ISbStory, ISbDimensions, ISbStoryData, ISbAlternateObject, ISbStoriesParams, ISbStoryParams, ISbRichtext, SbBlokData, SbBlokKeyDataTypes, SbRichTextOptions, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokComponentType, useStoryblokBridge, } from "@storyblok/js";
+export type { ArrayFn, AsyncFn, ISbAlternateObject, ISbCache, ISbConfig, ISbContentMangmntAPI, ISbDimensions, ISbError, ISbManagmentApiResult, ISbNode, ISbResponse, ISbResult, ISbRichtext, ISbSchema, ISbStories, ISbStoriesParams, ISbStory, ISbStoryData, ISbStoryParams, SbBlokData, SbBlokKeyDataTypes, SbRichTextOptions, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokComponentType, ThrottleFn, useStoryblokBridge, } from '@storyblok/js';

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@storyblok/react",
-  "version": "3.0.14",
+  "version": "4.0.0",
   "description": "SDK to integrate Storyblok into your project using React.",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/types/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "author": "Storyblok",
+  "homepage": "https://github.com/storyblok/storyblok-react",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storyblok/storyblok-react"
+  },
+  "bugs": {
+    "url": "https://github.com/storyblok/storyblok-react/issues"
+  },
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -30,6 +33,12 @@
       "require": "./dist/story.js"
     }
   },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build && tsc --project tsconfig.json",
@@ -43,31 +52,32 @@
     "test:comp": "cypress run-ct",
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
   "dependencies": {
-    "@storyblok/js": "^3.1.1"
+    "@storyblok/js": "^3.1.1",
+    "next": "14.2.14"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
     "@cypress/react": "^8.0.2",
-    "@cypress/vite-dev-server": "^5.1.1",
+    "@cypress/vite-dev-server": "^5.2.0",
     "@tsconfig/recommended": "^1.0.7",
     "@types/react": "18.3.4",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-jest": "^29.7.0",
-    "cypress": "^13.13.3",
+    "cypress": "^13.14.2",
     "eslint-plugin-cypress": "^3.5.0",
-    "eslint-plugin-jest": "^28.8.0",
+    "eslint-plugin-jest": "^28.8.3",
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "start-server-and-test": "^2.0.5",
-    "vite": "^5.4.2"
-  },
-  "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "vite": "^5.4.3"
   },
   "babel": {
     "presets": [
@@ -95,15 +105,6 @@
       "main"
     ]
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storyblok/storyblok-react"
-  },
-  "author": "Storyblok",
-  "bugs": {
-    "url": "https://github.com/storyblok/storyblok-react/issues"
-  },
-  "homepage": "https://github.com/storyblok/storyblok-react",
   "publishConfig": {
     "access": "public"
   }

package/dist/bridge-loader.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";const o=require("react"),r=require("./storyblok-js.js"),t=async e=>{await r.loadStoryblokBridge(),new window.StoryblokBridge(e).on(["published","change"],()=>{window.location.reload()})},n=({options:e})=>(t(e),o.createElement(o.Fragment,null));module.exports=n;

package/dist/bridge-loader.mjs

@@ -1,11 +0,0 @@
-"use client";
-import o from "react";
-import { loadStoryblokBridge as r } from "./storyblok-js.mjs";
-const t = async (e) => {
-  await r(), new window.StoryblokBridge(e).on(["published", "change"], () => {
-    window.location.reload();
-  });
-}, i = ({ options: e }) => (t(e), /* @__PURE__ */ o.createElement(o.Fragment, null));
-export {
-  i as default
-};

package/dist/types/bridge-loader.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { StoryblokBridgeConfigV2 } from "./types";
-interface StoryblokBridgeLoaderProps {
-    options: StoryblokBridgeConfigV2;
-    [key: string]: unknown;
-}
-declare const StoryblokBridgeLoader: ({ options }: StoryblokBridgeLoaderProps) => React.JSX.Element;
-export default StoryblokBridgeLoader;