@storyblok/react 5.1.3 → 5.2.0

package/README.md

@@ -227,10 +227,26 @@ export async function fetchData() {
 
 ## 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.
+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 using the `StoryblokLiveEditing` component, which automatically handles bridge loading and registration. The SDK allows you to take full advantage of the Live Editing while maintaining the performance benefits of Server Components.
 
 > The SDK has a special module for RSC. Always import `@storyblok/react/rsc` while using Server Components.
 
+### Live Editing Bridge Loading
+
+**When do you need `StoryblokLiveEditing`?**
+
+- ✅ **Pure Server-Side Rendering**: When using only `StoryblokServerComponent` (RSC-only apps)
+- ❌ **Client-Side Components**: When using `StoryblokComponent` or other client components that already load the bridge
+- ❌ **Hybrid Apps**: When you already have client components that load the bridge elsewhere
+
+**Why is this needed for RSC-only apps?**
+
+In React Server Components environments where components are purely server-rendered, the Storyblok bridge script isn't automatically loaded on the client. The `StoryblokLiveEditing` component detects when running in the Visual Editor and loads the bridge script for you.
+
+**How to know if you need it?**
+
+If live editing doesn't work in your RSC app, add `StoryblokLiveEditing`. If it's already working (because you have client components), you don't need it.
+
 ### 1. Initialize
 
 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.
@@ -291,7 +307,7 @@ The `getStoryblokApi` function can now be used inside your Story components to f
 
 ```js
 import { StoryblokClient, ISbStoriesParams } from '@storyblok/react';
-import { StoryblokStory } from '@storyblok/react/rsc';
+import { StoryblokServerComponent, StoryblokLiveEditing } from '@storyblok/react/rsc';
 import { getStoryblokApi } from '@/lib/storyblok'; // Remember to import from the local file
 
 export default async function Home() {
@@ -299,7 +315,8 @@ export default async function Home() {
 
   return (
     <div>
-      <StoryblokStory story={data.story} />
+      <StoryblokServerComponent blok={data.story.content} />
+      <StoryblokLiveEditing story={data.story} />
     </div>
   );
 }
@@ -312,11 +329,37 @@ export async function fetchData() {
 }
 ```
 
-`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`.
+**Live Editing in RSC Environments:**
+
+For **pure React Server Components** apps (no client-side components), you need two separate components:
+
+- `StoryblokServerComponent`: Renders the Storyblok content components on the server
+- `StoryblokLiveEditing`: Loads the bridge script and handles live editing (only needed for RSC-only apps)
 
 ```jsx
 const bridgeOptions = { resolveRelations: ['article.author'] }
 
+<StoryblokLiveEditing story={data.story} bridgeOptions={bridgeOptions} />
+```
+
+**If you have client-side components in your app**, the bridge is likely already loaded, so you can skip `StoryblokLiveEditing`:
+
+```jsx
+// RSC-only app (bridge needed)
+<StoryblokServerComponent blok={data.story.content} />
+<StoryblokLiveEditing story={data.story} />
+
+// Hybrid app with client components (bridge already loaded)
+<StoryblokServerComponent blok={data.story.content} />
+```
+
+**Alternative: Using StoryblokStory (All-in-One)**
+
+If you prefer a single component that handles both rendering and live editing:
+
+```jsx
+import { StoryblokStory } from '@storyblok/react/rsc';
+
 <StoryblokStory story={data.story} bridgeOptions={bridgeOptions} />
 ```
 

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("./richtext.js"),S=require("./client.js"),d=require("./storyblok-rich-text.js"),g=require("./utils.js"),T=require("./storyblok-component.js"),p=(n,r={},t={})=>{const[u,i]=y.useState({}),k=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u",s=o.useStoryblokApi();return y.useEffect(()=>{if(!s){console.error("You can't use useStoryblok if you're not loading apiPlugin.");return}async function b(){const{data:l}=await s.get(`cdn/stories/${n}`,r);i(l.story),k&&l.story.id&&e.registerStoryblokBridge(l.story.id,a=>i(a),t)}b()},[n,JSON.stringify(r),s]),s?(t.resolveRelations=t.resolveRelations??r.resolve_relations,t.resolveLinks=t.resolveLinks??r.resolve_links,u):null},R=c.useStoryblokRichText;exports.BlockTypes=e.BlockTypes;exports.MarkTypes=e.MarkTypes;exports.TextTypes=e.TextTypes;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.richTextResolver=e.richTextResolver;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.useStoryblokRichText=c.useStoryblokRichText;exports.useStoryblokState=S.useStoryblokState;exports.StoryblokRichText=d;exports.convertAttributesInElement=g.convertAttributesInElement;exports.StoryblokComponent=T;exports.useStoryblok=p;exports.useStoryblokRichTextResolver=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),e=require("./storyblok-js.js"),o=require("./index2.js"),c=require("./richtext.js"),d=require("./client.js"),g=require("./storyblok-rich-text.js"),t=require("./utils.js"),T=require("./storyblok-component.js"),p=(n,s={},r={})=>{const[k,y]=u.useState({}),b=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u",i=o.useStoryblokApi();return u.useEffect(()=>{if(!i){console.error("You can't use useStoryblok if you're not loading apiPlugin.");return}async function a(){const{data:l}=await i.get(`cdn/stories/${n}`,s);y(l.story),b&&l.story.id&&e.registerStoryblokBridge(l.story.id,S=>y(S),r)}a()},[n,JSON.stringify(s),i]),i?(r.resolveRelations=r.resolveRelations??s.resolve_relations,r.resolveLinks=r.resolveLinks??s.resolve_links,k):null},m=c.useStoryblokRichText;exports.BlockTypes=e.BlockTypes;exports.MarkTypes=e.MarkTypes;exports.TextTypes=e.TextTypes;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.richTextResolver=e.richTextResolver;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.useStoryblokRichText=c.useStoryblokRichText;exports.useStoryblokState=d.useStoryblokState;exports.StoryblokRichText=g;exports.convertAttributesInElement=t.convertAttributesInElement;exports.isBridgeLoaded=t.isBridgeLoaded;exports.isBrowser=t.isBrowser;exports.isIframe=t.isIframe;exports.isServer=t.isServer;exports.isVisualEditor=t.isVisualEditor;exports.StoryblokComponent=T;exports.useStoryblok=p;exports.useStoryblokRichTextResolver=m;

package/dist/index.mjs

@@ -1,59 +1,64 @@
-import { useState as f, useEffect as k } from "react";
-import { registerStoryblokBridge as u } from "./storyblok-js.mjs";
-import { BlockTypes as T, MarkTypes as B, TextTypes as C, apiPlugin as E, loadStoryblokBridge as h, renderRichText as w, richTextResolver as A, storyblokEditable as I } from "./storyblok-js.mjs";
+import { useState as f, useEffect as u } from "react";
+import { registerStoryblokBridge as k } from "./storyblok-js.mjs";
+import { BlockTypes as T, MarkTypes as B, TextTypes as E, apiPlugin as w, loadStoryblokBridge as C, renderRichText as h, richTextResolver as A, storyblokEditable as I } from "./storyblok-js.mjs";
 import { useStoryblokApi as c } from "./index2.mjs";
-import { getComponent as L, getCustomFallbackComponent as P, getEnableFallbackComponent as _, setComponents as $, storyblokInit as J } from "./index2.mjs";
+import { getComponent as F, getCustomFallbackComponent as P, getEnableFallbackComponent as _, setComponents as $, storyblokInit as J } from "./index2.mjs";
 import { useStoryblokRichText as m } from "./richtext.mjs";
 import { useStoryblokState as N } from "./client.mjs";
-import { default as j } from "./storyblok-rich-text.mjs";
-import { convertAttributesInElement as z } from "./utils.mjs";
-import { default as G } from "./storyblok-component.mjs";
-const x = (s, e = {}, o = {}) => {
-  const [l, n] = f({}), i = typeof window < "u" && typeof window.storyblokRegisterEvent < "u", t = c();
-  return k(() => {
+import { default as Y } from "./storyblok-rich-text.mjs";
+import { convertAttributesInElement as q, isBridgeLoaded as z, isBrowser as D, isIframe as G, isServer as H, isVisualEditor as K } from "./utils.mjs";
+import { default as U } from "./storyblok-component.mjs";
+const g = (s, e = {}, o = {}) => {
+  const [n, l] = f({}), i = typeof window < "u" && typeof window.storyblokRegisterEvent < "u", t = c();
+  return u(() => {
     if (!t) {
       console.error(
         "You can't use useStoryblok if you're not loading apiPlugin."
       );
       return;
     }
-    async function y() {
+    async function a() {
       const { data: r } = await t.get(
         `cdn/stories/${s}`,
         e
       );
-      n(r.story), i && r.story.id && u(
+      l(r.story), i && r.story.id && k(
         r.story.id,
-        (a) => n(a),
+        (y) => l(y),
         o
       );
     }
-    y();
-  }, [s, JSON.stringify(e), t]), t ? (o.resolveRelations = o.resolveRelations ?? e.resolve_relations, o.resolveLinks = o.resolveLinks ?? e.resolve_links, l) : null;
-}, g = m;
+    a();
+  }, [s, JSON.stringify(e), t]), t ? (o.resolveRelations = o.resolveRelations ?? e.resolve_relations, o.resolveLinks = o.resolveLinks ?? e.resolve_links, n) : null;
+}, x = m;
 export {
   T as BlockTypes,
   B as MarkTypes,
-  G as StoryblokComponent,
-  j as StoryblokRichText,
-  C as TextTypes,
-  E as apiPlugin,
-  z as convertAttributesInElement,
-  L as getComponent,
+  U as StoryblokComponent,
+  Y as StoryblokRichText,
+  E as TextTypes,
+  w as apiPlugin,
+  q as convertAttributesInElement,
+  F as getComponent,
   P as getCustomFallbackComponent,
   _ as getEnableFallbackComponent,
   c as getStoryblokApi,
-  h as loadStoryblokBridge,
-  u as registerStoryblokBridge,
-  w as renderRichText,
+  z as isBridgeLoaded,
+  D as isBrowser,
+  G as isIframe,
+  H as isServer,
+  K as isVisualEditor,
+  C as loadStoryblokBridge,
+  k as registerStoryblokBridge,
+  h as renderRichText,
   A as richTextResolver,
   $ as setComponents,
   I as storyblokEditable,
   J as storyblokInit,
-  x as useStoryblok,
+  g as useStoryblok,
   c as useStoryblokApi,
-  u as useStoryblokBridge,
+  k as useStoryblokBridge,
   m as useStoryblokRichText,
-  g as useStoryblokRichTextResolver,
+  x as useStoryblokRichTextResolver,
   N as useStoryblokState
 };

package/dist/live-editing.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";const s=require("./storyblok-js.js"),i=require("react"),d=require("./live-edit-update-action.js"),l=()=>typeof window>"u"?!1:typeof window.storyblokRegisterEvent<"u"&&window.location.search.includes("_storyblok"),u=({story:e=null,bridgeOptions:n={}})=>{if(!l())return null;const o=t=>{t&&i.startTransition(()=>{d.liveEditUpdateAction({story:t,pathToRevalidate:window.location.pathname})})},r=(e==null?void 0:e.id)??0;return i.useEffect(()=>{s.registerStoryblokBridge(r,t=>o(t),n)},[]),null};module.exports=u;
+"use strict";const r=require("./storyblok-js.js"),o=require("react"),l=require("./live-edit-update-action.js"),s=require("./utils.js"),d=({story:t=null,bridgeOptions:e={}})=>{if(!s.isVisualEditor())return null;const n=(t==null?void 0:t.id)??0;return o.useEffect(()=>{(async()=>{s.isBridgeLoaded()||await r.loadStoryblokBridge();const a=i=>{i&&o.startTransition(()=>{l.liveEditUpdateAction({story:i,pathToRevalidate:window.location.pathname})})};r.registerStoryblokBridge(n,i=>a(i),e)})()},[n,JSON.stringify(e)]),null};module.exports=d;

package/dist/live-editing.mjs

@@ -1,19 +1,24 @@
 "use client";
-import { registerStoryblokBridge as r } from "./storyblok-js.mjs";
-import { useEffect as d, startTransition as l } from "react";
-import { liveEditUpdateAction as a } from "./live-edit-update-action.mjs";
-const s = () => typeof window > "u" ? !1 : typeof window.storyblokRegisterEvent < "u" && window.location.search.includes("_storyblok"), p = ({ story: e = null, bridgeOptions: i = {} }) => {
-  if (!s())
+import { loadStoryblokBridge as n, registerStoryblokBridge as e } from "./storyblok-js.mjs";
+import { useEffect as l, startTransition as d } from "react";
+import { liveEditUpdateAction as s } from "./live-edit-update-action.mjs";
+import { isVisualEditor as u, isBridgeLoaded as f } from "./utils.mjs";
+const S = ({ story: t = null, bridgeOptions: o = {} }) => {
+  if (!u())
     return null;
-  const n = (t) => {
-    t && l(() => {
-      a({ story: t, pathToRevalidate: window.location.pathname });
-    });
-  }, o = (e == null ? void 0 : e.id) ?? 0;
-  return d(() => {
-    r(o, (t) => n(t), i);
-  }, []), null;
+  const r = (t == null ? void 0 : t.id) ?? 0;
+  return l(() => {
+    (async () => {
+      f() || await n();
+      const a = (i) => {
+        i && d(() => {
+          s({ story: i, pathToRevalidate: window.location.pathname });
+        });
+      };
+      e(r, (i) => a(i), o);
+    })();
+  }, [r, JSON.stringify(o)]), null;
 };
 export {
-  p as default
+  S as default
 };

package/dist/rsc/index.d.ts

@@ -1,4 +1,5 @@
 export * from './common';
+export { default as StoryblokLiveEditing } from './live-editing';
 export { useStoryblokServerRichText } from './richtext';
 export { default as StoryblokServerRichText } from './server-storyblok-richtext-component';
 export { default as StoryblokStory } from './story';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/rsc/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EACL,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,KAAK,yCAAyC,EAC9C,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,EAClC,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,SAAS,GACV,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/rsc/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EACL,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,KAAK,yCAAyC,EAC9C,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,EAClC,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,SAAS,GACV,MAAM,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"live-edit-update-action.d.ts","sourceRoot":"","sources":["../../src/rsc/live-edit-update-action.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,wBAAsB,oBAAoB,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,iBAiBxH"}
+{"version":3,"file":"live-edit-update-action.d.ts","sourceRoot":"","sources":["../../src/rsc/live-edit-update-action.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,wBAAsB,oBAAoB,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,iBAiBxH"}

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

@@ -1,7 +1,7 @@
 import { ISbStoryData, StoryblokBridgeConfigV2 } from '@storyblok/js';
 declare const StoryblokLiveEditing: ({ story, bridgeOptions }: {
     story: ISbStoryData;
-    bridgeOptions: StoryblokBridgeConfigV2;
+    bridgeOptions?: StoryblokBridgeConfigV2;
 }) => any;
 export default StoryblokLiveEditing;
 //# sourceMappingURL=live-editing.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"live-editing.d.ts","sourceRoot":"","sources":["../../src/rsc/live-editing.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAA2B,KAAK,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAWzG,QAAA,MAAM,oBAAoB,GAAI,0BAAsC;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,aAAa,EAAE,uBAAuB,CAAA;CAAE,QAoBlI,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"live-editing.d.ts","sourceRoot":"","sources":["../../src/rsc/live-editing.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAgD,KAAK,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAK9H,QAAA,MAAM,oBAAoB,GAAI,0BAAsC;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,aAAa,CAAC,EAAE,uBAAuB,CAAA;CAAE,QA+BnI,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/rsc.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./common.js"),t=require("./richtext2.js"),r=require("./server-storyblok-richtext-component.js"),l=require("./story.js"),e=require("./storyblok-js.js"),s=require("./server-component.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.useStoryblokServerRichText=t.useStoryblokServerRichText;exports.StoryblokServerRichText=r;exports.StoryblokStory=l;exports.BlockTypes=e.BlockTypes;exports.MarkTypes=e.MarkTypes;exports.TextTypes=e.TextTypes;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.richTextResolver=e.richTextResolver;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.StoryblokServerComponent=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./common.js"),t=require("./live-editing.js"),r=require("./richtext2.js"),i=require("./server-storyblok-richtext-component.js"),l=require("./story.js"),e=require("./storyblok-js.js"),n=require("./server-component.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.StoryblokLiveEditing=t;exports.useStoryblokServerRichText=r.useStoryblokServerRichText;exports.StoryblokServerRichText=i;exports.StoryblokStory=l;exports.BlockTypes=e.BlockTypes;exports.MarkTypes=e.MarkTypes;exports.TextTypes=e.TextTypes;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.richTextResolver=e.richTextResolver;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.StoryblokServerComponent=n;

package/dist/rsc.mjs

@@ -1,29 +1,31 @@
-import { getComponent as r, getCustomFallbackComponent as t, getEnableFallbackComponent as l, useStoryblokApi as s, setComponents as p, storyblokInit as a, useStoryblokApi as b } from "./common.mjs";
-import { useStoryblokServerRichText as k } from "./richtext2.mjs";
-import { default as S } from "./server-storyblok-richtext-component.mjs";
-import { default as m } from "./story.mjs";
-import { BlockTypes as x, MarkTypes as d, TextTypes as f, apiPlugin as u, loadStoryblokBridge as T, registerStoryblokBridge as c, renderRichText as C, richTextResolver as B, storyblokEditable as h, registerStoryblokBridge as v } from "./storyblok-js.mjs";
-import { default as A } from "./server-component.mjs";
+import { getComponent as r, getCustomFallbackComponent as t, getEnableFallbackComponent as l, useStoryblokApi as s, setComponents as i, storyblokInit as a, useStoryblokApi as p } from "./common.mjs";
+import { default as k } from "./live-editing.mjs";
+import { useStoryblokServerRichText as S } from "./richtext2.mjs";
+import { default as m } from "./server-storyblok-richtext-component.mjs";
+import { default as g } from "./story.mjs";
+import { BlockTypes as f, MarkTypes as u, TextTypes as T, apiPlugin as c, loadStoryblokBridge as C, registerStoryblokBridge as v, renderRichText as B, richTextResolver as h, storyblokEditable as R, registerStoryblokBridge as A } from "./storyblok-js.mjs";
+import { default as F } from "./server-component.mjs";
 export {
-  x as BlockTypes,
-  d as MarkTypes,
-  A as StoryblokServerComponent,
-  S as StoryblokServerRichText,
-  m as StoryblokStory,
-  f as TextTypes,
-  u as apiPlugin,
+  f as BlockTypes,
+  u as MarkTypes,
+  k as StoryblokLiveEditing,
+  F as StoryblokServerComponent,
+  m as StoryblokServerRichText,
+  g as StoryblokStory,
+  T as TextTypes,
+  c as apiPlugin,
   r as getComponent,
   t as getCustomFallbackComponent,
   l as getEnableFallbackComponent,
   s as getStoryblokApi,
-  T as loadStoryblokBridge,
-  c as registerStoryblokBridge,
-  C as renderRichText,
-  B as richTextResolver,
-  p as setComponents,
-  h as storyblokEditable,
+  C as loadStoryblokBridge,
+  v as registerStoryblokBridge,
+  B as renderRichText,
+  h as richTextResolver,
+  i as setComponents,
+  R as storyblokEditable,
   a as storyblokInit,
-  b as useStoryblokApi,
-  v as useStoryblokBridge,
-  k as useStoryblokServerRichText
+  p as useStoryblokApi,
+  A as useStoryblokBridge,
+  S as useStoryblokServerRichText
 };

package/dist/utils.d.ts

@@ -6,4 +6,14 @@ import { default as React } from 'react';
  * @return {React.ReactElement} A new React element with converted attributes.
  */
 export declare function convertAttributesInElement(element: React.ReactElement | React.ReactElement[]): React.ReactElement | React.ReactElement[];
+export declare const isBrowser: () => boolean;
+export declare const isServer: () => boolean;
+export declare const isBridgeLoaded: () => boolean;
+export declare const isIframe: () => boolean;
+/**
+ * Detects if the current page is running inside Storyblok's Visual Editor.
+ * Requires the page to be in an iframe context with the _storyblok URL parameter.
+ * This is more reliable than just checking for the URL parameter alone.
+ */
+export declare const isVisualEditor: () => boolean;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B;;;;;GAKG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAsCxI"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B;;;;;GAKG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAsCxI;AAGD,eAAO,MAAM,SAAS,eAAsC,CAAC;AAC7D,eAAO,MAAM,QAAQ,eAAsC,CAAC;AAG5D,eAAO,MAAM,cAAc,eAA4E,CAAC;AACxG,eAAO,MAAM,QAAQ,eAAkD,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,cAAc,eAAmF,CAAC"}

package/dist/utils.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react");function l(t){return t.replace(/-([a-z])/g,o=>o[1].toUpperCase())}function f(t){return t.split(";").reduce((o,s)=>{let[r,n]=s.split(":");return r=r==null?void 0:r.trim(),n=n==null?void 0:n.trim(),r&&n&&(o[l(r)]=n),o},{})}function c(t){if(Array.isArray(t))return t.map(e=>c(e));const o={class:"className",for:"htmlFor",targetAttr:"targetattr"},s=Object.keys(t.props).reduce((e,i)=>{let a=t.props[i];i==="style"&&typeof a=="string"&&(a=f(a));const u=o[i]||i;return e[u]=a,e},{});s.key=t.key;const r=p.Children.map(t.props.children,e=>typeof e=="string"?e:c(e));return p.createElement(t.type,s,r)}exports.convertAttributesInElement=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react");function l(t){return t.replace(/-([a-z])/g,o=>o[1].toUpperCase())}function w(t){return t.split(";").reduce((o,i)=>{let[r,n]=i.split(":");return r=r==null?void 0:r.trim(),n=n==null?void 0:n.trim(),r&&n&&(o[l(r)]=n),o},{})}function d(t){if(Array.isArray(t))return t.map(e=>d(e));const o={class:"className",for:"htmlFor",targetAttr:"targetattr"},i=Object.keys(t.props).reduce((e,s)=>{let a=t.props[s];s==="style"&&typeof a=="string"&&(a=w(a));const f=o[s]||s;return e[f]=a,e},{});i.key=t.key;const r=u.Children.map(t.props.children,e=>typeof e=="string"?e:d(e));return u.createElement(t.type,i,r)}const c=()=>typeof window<"u",y=()=>typeof window>"u",g=()=>c()&&typeof window.storyblokRegisterEvent<"u",p=()=>c()&&window.self!==window.top,m=()=>c()&&p()&&window.location.search.includes("_storyblok");exports.convertAttributesInElement=d;exports.isBridgeLoaded=g;exports.isBrowser=c;exports.isIframe=p;exports.isServer=y;exports.isVisualEditor=m;

package/dist/utils.mjs

@@ -1,31 +1,37 @@
-import i from "react";
-function f(r) {
-  return r.replace(/-([a-z])/g, (o) => o[1].toUpperCase());
+import a from "react";
+function f(t) {
+  return t.replace(/-([a-z])/g, (o) => o[1].toUpperCase());
 }
-function l(r) {
-  return r.split(";").reduce((o, p) => {
-    let [t, n] = p.split(":");
-    return t = t == null ? void 0 : t.trim(), n = n == null ? void 0 : n.trim(), t && n && (o[f(t)] = n), o;
+function w(t) {
+  return t.split(";").reduce((o, s) => {
+    let [r, n] = s.split(":");
+    return r = r == null ? void 0 : r.trim(), n = n == null ? void 0 : n.trim(), r && n && (o[f(r)] = n), o;
   }, {});
 }
-function c(r) {
-  if (Array.isArray(r))
-    return r.map((e) => c(e));
+function d(t) {
+  if (Array.isArray(t))
+    return t.map((e) => d(e));
   const o = {
     class: "className",
     for: "htmlFor",
     targetAttr: "targetattr"
     // Add more attribute conversions here as needed
-  }, p = Object.keys(r.props).reduce((e, s) => {
-    let a = r.props[s];
-    s === "style" && typeof a == "string" && (a = l(a));
-    const u = o[s] || s;
-    return e[u] = a, e;
+  }, s = Object.keys(t.props).reduce((e, i) => {
+    let p = t.props[i];
+    i === "style" && typeof p == "string" && (p = w(p));
+    const u = o[i] || i;
+    return e[u] = p, e;
   }, {});
-  p.key = r.key;
-  const t = i.Children.map(r.props.children, (e) => typeof e == "string" ? e : c(e));
-  return i.createElement(r.type, p, t);
+  s.key = t.key;
+  const r = a.Children.map(t.props.children, (e) => typeof e == "string" ? e : d(e));
+  return a.createElement(t.type, s, r);
 }
+const c = () => typeof window < "u", m = () => typeof window > "u", g = () => c() && typeof window.storyblokRegisterEvent < "u", l = () => c() && window.self !== window.top, E = () => c() && l() && window.location.search.includes("_storyblok");
 export {
-  c as convertAttributesInElement
+  d as convertAttributesInElement,
+  g as isBridgeLoaded,
+  c as isBrowser,
+  l as isIframe,
+  m as isServer,
+  E as isVisualEditor
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/react",
   "type": "module",
-  "version": "5.1.3",
+  "version": "5.2.0",
   "private": false,
   "description": "SDK to integrate Storyblok into your project using React.",
   "author": "Storyblok",
@@ -51,6 +51,8 @@
     "@babel/preset-env": "^7.27.2",
     "@cypress/react": "^9.0.1",
     "@cypress/vite-dev-server": "^6.0.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@tsconfig/recommended": "^1.0.8",
     "@types/node": "^22.15.18",
     "@types/react": "19.1.4",
@@ -60,6 +62,7 @@
     "eslint": "^9.26.0",
     "eslint-plugin-cypress": "^4.3.0",
     "eslint-plugin-jest": "^28.11.0",
+    "jsdom": "^26.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rollup-plugin-preserve-directives": "^0.4.0",