@storyblok/react 3.0.15 → 4.0.0

package/README.md

@@ -222,7 +222,7 @@ export async function fetchData() {
 }
 ```
 
-## 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 { apiPlugin, storyblokInit } 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({
+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 (
@@ -254,55 +268,44 @@ export default function RootLayout({ children }) {
 
 ### 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 { apiPlugin, storyblokInit } from '@storyblok/react/rsc'
-
-/** 2. Import your components */
-import Page from '../components/Page'
-import Teaser from '../components/Teaser'
+// components/StoryblokProvider.jsx
+'use client';
 
-/** 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 }) {
-  return 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()
+  const { data } = await fetchData();
 
   return (
     <div>
       <StoryblokStory story={data.story} />
     </div>
-  )
+  );
 }
 
 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);
 }
 ```
 
@@ -318,81 +321,6 @@ const bridgeOptions = { resolveRelations: ['article.author'] }
 
 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.
@@ -708,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/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 t=require("./bridge-loader.js"),o=require("./index2.js"),r=require("./story.js"),l=require("./storyblok-component.js"),e=require("./storyblok-js.js");exports.BridgeLoader=t;exports.StoryblokBridgeLoader=t;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.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 { default as t, default as r } from "./bridge-loader.mjs";
-import { getComponent as a, getCustomFallbackComponent as i, getEnableFallbackComponent as s, useStoryblokApi as b, setComponents as d, storyblokInit as k, useStoryblokApi as n } from "./index2.mjs";
-import { default as g } from "./story.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 { 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 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 {
-  t as BridgeLoader,
-  f as RichTextResolver,
-  u as RichTextSchema,
-  r as StoryblokBridgeLoader,
-  m as StoryblokComponent,
-  g as StoryblokStory,
-  x as apiPlugin,
-  a as getComponent,
-  i as getCustomFallbackComponent,
-  s as getEnableFallbackComponent,
-  b as getStoryblokApi,
-  c as loadStoryblokBridge,
-  B as registerStoryblokBridge,
-  C as renderRichText,
-  d as setComponents,
-  h as storyblokEditable,
-  k as storyblokInit,
-  n as useStoryblokApi,
-  R as useStoryblokBridge
+  g as RichTextResolver,
+  m as RichTextSchema,
+  y as StoryblokServerComponent,
+  k as StoryblokStory,
+  d as apiPlugin,
+  t as getComponent,
+  r as getCustomFallbackComponent,
+  l as getEnableFallbackComponent,
+  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/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 { default as BridgeLoader } from '../bridge-loader';
-export { default as StoryblokBridgeLoader } from '../bridge-loader';
-export * from '../common';
-export { default as StoryblokStory } from '../story';
+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 type { ISbStoryData, StoryblokBridgeConfigV2 } from './types';
+import type { ISbStoryData, StoryblokBridgeConfigV2 } from '../types';
 interface StoryblokStoryProps {
     story: ISbStoryData;
     bridgeOptions: StoryblokBridgeConfigV2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/react",
-  "version": "3.0.15",
+  "version": "4.0.0",
   "description": "SDK to integrate Storyblok into your project using React.",
   "author": "Storyblok",
   "homepage": "https://github.com/storyblok/storyblok-react",
@@ -57,7 +57,8 @@
     "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",

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 type { StoryblokBridgeConfigV2 } from './types';
-interface StoryblokBridgeLoaderProps {
-    options: StoryblokBridgeConfigV2;
-    [key: string]: unknown;
-}
-declare const StoryblokBridgeLoader: ({ options }: StoryblokBridgeLoaderProps) => React.JSX.Element;
-export default StoryblokBridgeLoader;