@storyblok/react 5.3.0 → 5.4.0

package/README.md

@@ -4,7 +4,7 @@
   </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.
+    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 includes support for React Server Components, static site generation, and Next.js static exports.
   </p>
   <br />
 </div>
@@ -225,98 +225,154 @@ export async function fetchData() {
 }
 ```
 
-## Next.js using App Router
+## Choosing the Right Export
 
-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.
+`@storyblok/react` provides three different exports to meet different deployment and framework requirements:
 
-> The SDK has a special module for RSC. Always import `@storyblok/react/rsc` while using Server Components.
+### Export Types
 
-### Live Editing Bridge Loading
+| Export                 | Use Case                            | Live Editing | Static Export Support |
+| ---------------------- | ----------------------------------- | ------------ | --------------------- |
+| `@storyblok/react`     | Client-side rendering, SPA          | ✅            | ✅                     |
+| `@storyblok/react/ssr` | Server-side rendering, static sites | ❌            | ✅                     |
+| `@storyblok/react/rsc` | React Server Components             | ✅            | ❌                     |
 
-**When do you need `StoryblokLiveEditing`?**
+### When to Use Each Export
 
-- ✅ **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
+**Use `@storyblok/react`** for:
+- Single Page Applications (SPA)
+- Client-side rendered React apps
+- When you need live editing in browser-based applications
 
-**Why is this needed for RSC-only apps?**
+**Use `@storyblok/react/ssr`** for:
+- Next.js static exports (`output: 'export'`)
+- Static site generation without live editing
+- Server-side rendering where live editing isn't required
+- Performance-critical scenarios where bundle size matters
 
-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.
+**Use `@storyblok/react/rsc`** for:
+- Next.js App Router with React Server Components
+- When you need live editing with server components
+- Modern React applications with server/client component separation
 
-**How to know if you need it?**
+## Next.js Static Export Support
 
-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.
+If you're using Next.js with `output: 'export'` for static site generation, you must use the **`@storyblok/react/ssr`** export. The RSC export includes server actions that are incompatible with static exports.
 
-### 1. Initialize
+### Static Export Configuration
+
+```js
+// next.config.js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export', // Enables static export
+};
+
+module.exports = nextConfig;
+```
 
-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.
+### Static Export Implementation
 
 ```js
 // lib/storyblok.js
+import { apiPlugin, storyblokInit } from "@storyblok/react/ssr"; // Use SSR export
 import Page from "@/components/Page";
 import Teaser from "@/components/Teaser";
-import { apiPlugin, storyblokInit } from "@storyblok/react/rsc";
 
 export const getStoryblokApi = storyblokInit({
   accessToken: "YOUR_ACCESS_TOKEN",
   use: [apiPlugin],
   components: {
-    teaser: Teaser,
     page: Page,
+    teaser: Teaser,
   },
 });
 ```
 
-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";
+// app/page.js
+import { StoryblokServerStory } from "@storyblok/react/ssr";
+import { getStoryblokApi } from "@/lib/storyblok";
+
+export default async function Home() {
+  const { data } = await fetchData();
 
-export default function RootLayout({ children }) {
   return (
-    <StoryblokProvider>
-      <html lang="en">
-        <body>{children}</body>
-      </html>
-    </StoryblokProvider>
+    <div>
+      <StoryblokServerStory story={data.story} />
+    </div>
   );
 }
+
+export async function fetchData() {
+  const storyblokApi = getStoryblokApi();
+  return storyblokApi.get(`cdn/stories/home`, { version: 'draft' });
+}
 ```
 
-### 2. Create StoryblokProvider and Import your Storyblok Components
+> [!NOTE]
+> The SSR export does not include live editing capabilities. Live editing requires client-side JavaScript that's incompatible with static exports.
 
-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.
+## Next.js using App Router
 
-```js
-// components/StoryblokProvider.jsx
-"use client";
+The components in the `app` directory are by default React Server Side Components. The SDK provides different approaches depending on your deployment needs:
 
-import { getStoryblokApi } from "@/lib/storyblok";
+- **For static exports**: Use `@storyblok/react/ssr` (no live editing)
+- **For dynamic apps**: Use `@storyblok/react/rsc` (with live editing)
 
-export default function StoryblokProvider({ children }) {
-  getStoryblokApi();
-  return children;
-}
+### React Server Components with Live Editing
+
+You can enable Storyblok Visual Editor's live editing with React Server Components by using the `StoryblokStory` component, which automatically handles both content rendering and live editing bridge loading. The SDK allows you to take full advantage of the Live Editing while maintaining the performance benefits of Server Components.
+
+> For live editing with RSC, always import `@storyblok/react/rsc`.
+
+### Live Editing Bridge Loading
+
+**When is bridge loading automatic?**
+
+- ✅ **Using `StoryblokStory`**: Automatically handles bridge loading and live editing
+- ✅ **Client-Side Components**: When using `StoryblokComponent` or other client components that already load the bridge
+- ❌ **Pure `StoryblokServerComponent`**: Manual bridge loading needed with `StoryblokLiveEditing`
+
+**Why does RSC need special handling?**
+
+In React Server Components environments where components are purely server-rendered, the Storyblok bridge script isn't automatically loaded on the client. The `StoryblokStory` component detects when running in the Visual Editor and loads the bridge script for you.
+
+### 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 server components.
+
+```js
+// lib/storyblok.js
+import Page from "@/components/Page";
+import Teaser from "@/components/Teaser";
+import { apiPlugin, storyblokInit } from "@storyblok/react/rsc";
+
+export const getStoryblokApi = storyblokInit({
+  accessToken: "YOUR_ACCESS_TOKEN",
+  use: [apiPlugin],
+  components: {
+    teaser: Teaser,
+    page: Page,
+  },
+});
 ```
 
-### 3. Fetch Content and Render Components
+### 2. Fetch Content and Render Components
 
 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 { StoryblokClient, ISbStoriesParams } from '@storyblok/react';
-import { StoryblokServerComponent, StoryblokLiveEditing } from '@storyblok/react/rsc';
-import { getStoryblokApi } from '@/lib/storyblok'; // Remember to import from the local file
+import { StoryblokClient, ISbStoriesParams } from '@storyblok/react/rsc';
+import { StoryblokStory } from '@storyblok/react/rsc';
+import { getStoryblokApi } from '@/lib/storyblok';
 
 export default async function Home() {
   const { data } = await fetchData();
 
   return (
     <div>
-      <StoryblokServerComponent blok={data.story.content} />
-      <StoryblokLiveEditing story={data.story} />
+      <StoryblokStory story={data.story} />
     </div>
   );
 }
@@ -329,48 +385,65 @@ export async function fetchData() {
 }
 ```
 
-**Live Editing in RSC Environments:**
+**The `StoryblokStory` component automatically:**
+- Renders your Storyblok content components on the server
+- Loads the bridge script for live editing (when in Visual Editor)
+- Handles live content updates via global cache
+- Manages bridge registration and cleanup
 
-For **pure React Server Components** apps (no client-side components), you need two separate components:
+**Advanced: Bridge Options**
 
-- `StoryblokServerComponent`: Renders the Storyblok content components on the server
-- `StoryblokLiveEditing`: Loads the bridge script and handles live editing (only needed for RSC-only apps)
+You can pass bridge options for advanced configurations:
 
 ```jsx
-const bridgeOptions = { resolveRelations: ['article.author'] }
+const bridgeOptions = { resolveRelations: ['article.author'] };
 
-<StoryblokLiveEditing story={data.story} bridgeOptions={bridgeOptions} />
+<StoryblokStory 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`:
+**Advanced: Manual Component Separation**
+
+For advanced use cases where you need more control, you can use the individual components:
 
 ```jsx
-// RSC-only app (bridge needed)
-<StoryblokServerComponent blok={data.story.content} />
-<StoryblokLiveEditing story={data.story} />
+import { StoryblokServerComponent, StoryblokLiveEditing } from '@storyblok/react/rsc';
 
-// Hybrid app with client components (bridge already loaded)
+// Manual approach (only use if you need special control)
 <StoryblokServerComponent blok={data.story.content} />
+<StoryblokLiveEditing story={data.story} bridgeOptions={bridgeOptions} />
 ```
 
-**Alternative: Using StoryblokStory (All-in-One)**
+> [!NOTE]
+> Most applications should use `StoryblokStory` for the best developer experience and automatic live editing support.
+
+**Important: Individual Content Components**
 
-If you prefer a single component that handles both rendering and live editing:
+When creating your individual Storyblok content components (like `Page`, `Teaser`, etc.), you must use `StoryblokServerComponent` for nested components. Import it from the same export you're using:
 
+**For RSC (with live editing):**
 ```jsx
-import { StoryblokStory } from '@storyblok/react/rsc';
+import {
+  storyblokEditable,
+  StoryblokServerComponent,
+} from "@storyblok/react/rsc";
 
-<StoryblokStory story={data.story} bridgeOptions={bridgeOptions} />
-```
+const Page = ({ blok }) => (
+  <main {...storyblokEditable(blok)}>
+    {blok.body.map((nestedBlok) => (
+      <StoryblokServerComponent blok={nestedBlok} key={nestedBlok._uid} />
+    ))}
+  </main>
+);
 
-> [!IMPORTANT]
-> When you render components, you must use `StoryblokServerComponent` exported from `@storyblok/react/rsc` instead of `StoryblokComponent`, even when you declare a client component with `"use client"`. This is because the components are always rendered on the server side.
+export default Page;
+```
 
+**For SSR (static exports):**
 ```jsx
 import {
   storyblokEditable,
   StoryblokServerComponent,
-} from "@storyblok/react/rsc";
+} from "@storyblok/react/ssr";
 
 const Page = ({ blok }) => (
   <main {...storyblokEditable(blok)}>
@@ -383,10 +456,13 @@ const Page = ({ blok }) => (
 export default Page;
 ```
 
+> [!IMPORTANT]
+> Always use `StoryblokServerComponent` for nested content components, even when you declare them as client components with `"use client"`. This ensures proper server-side rendering.
+
 > [!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/storyblok/storyblok-react/tree/main/playground/next13) in this repo.
+To try this setup, take a look at the [Next.js RSC Playgrounds](https://github.com/storyblok/monoblok/tree/main/packages/react/playground) in this repo.
 
 ## Next.js using Pages Router
 
@@ -789,6 +865,58 @@ Storyblok's React SDK automatically renders these predefined components based on
 
 By using these techniques, you can ensure that only the necessary components and dependencies are loaded for each page, improving your site's performance and speed.
 
+## Troubleshooting
+
+### "Server Actions are not supported with static export"
+
+**Error:** When using Next.js with `output: 'export'`, you might encounter:
+```
+Error: Server Actions are not supported with static export
+```
+
+**Solution:** Use `@storyblok/react/ssr` instead of `@storyblok/react/rsc` for static exports:
+
+```diff
+- import { StoryblokStory } from "@storyblok/react/rsc";
++ import { StoryblokServerStory } from "@storyblok/react/ssr";
+```
+
+**Explanation:** The RSC export includes server actions for live editing, which are incompatible with static exports. The SSR export provides server-side rendering without server actions.
+
+### Live Editing Not Working
+
+**Issue:** Live editing doesn't work in the Visual Editor.
+
+**Possible Solutions:**
+
+1. **Using SSR export**: Live editing isn't available with `@storyblok/react/ssr`. Use `@storyblok/react/rsc` for live editing.
+
+2. **Missing bridge loading**: Ensure you're using `StoryblokStory` (RSC) which automatically loads the bridge, or manually add `StoryblokLiveEditing`.
+
+3. **Development mode**: Live editing only works in development mode or when the Visual Editor is active.
+
+### Component Not Found
+
+**Error:** Seeing empty divs or "Component not found" instead of your content.
+
+**Solution:** Ensure all your Storyblok components are registered during initialization:
+
+```js
+storyblokInit({
+  components: {
+    page: Page,        // Matches 'page' component in Storyblok
+    teaser: Teaser,    // Matches 'teaser' component in Storyblok
+    // Add all your components here
+  },
+});
+```
+
+### TypeScript Import Errors
+
+**Issue:** TypeScript can't find the `/ssr` or `/rsc` exports.
+
+**Solution:** Ensure you're using the latest version of `@storyblok/react` (v5.3.0+) which includes these exports.
+
 ## The Storyblok JavaScript SDK Ecosystem
 
 ![A visual representation of the Storyblok JavaScript SDK Ecosystem](https://a.storyblok.com/f/88751/2400x1350/be4a4a4180/sdk-ecosystem.png/m/1200x0)

package/dist/core/init.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@storyblok/js"),t=require("./state.js"),l=(e={})=>{const o=t.getStoryblokApiInstance();if(o)return()=>o;const{storyblokApi:n}=a.storyblokInit(e);return t.setStoryblokApiInstance(n),e.components&&t.setComponents(e.components),e.enableFallbackComponent!==void 0&&t.setEnableFallbackComponent(e.enableFallbackComponent),e.customFallbackComponent&&t.setCustomFallbackComponent(e.customFallbackComponent),()=>n};exports.getComponent=t.getComponent;exports.getCustomFallbackComponent=t.getCustomFallbackComponent;exports.getEnableFallbackComponent=t.getEnableFallbackComponent;exports.setComponents=t.setComponents;exports.storyblokInit=l;

package/dist/core/init.mjs

@@ -0,0 +1,17 @@
+import { storyblokInit as n } from "@storyblok/js";
+import { setStoryblokApiInstance as a, setComponents as m, setEnableFallbackComponent as l, setCustomFallbackComponent as b, getStoryblokApiInstance as c } from "./state.mjs";
+import { getComponent as f, getCustomFallbackComponent as p, getEnableFallbackComponent as y } from "./state.mjs";
+const k = (o = {}) => {
+  const t = c();
+  if (t)
+    return () => t;
+  const { storyblokApi: e } = n(o);
+  return a(e), o.components && m(o.components), o.enableFallbackComponent !== void 0 && l(o.enableFallbackComponent), o.customFallbackComponent && b(o.customFallbackComponent), () => e;
+};
+export {
+  f as getComponent,
+  p as getCustomFallbackComponent,
+  y as getEnableFallbackComponent,
+  m as setComponents,
+  k as storyblokInit
+};

package/dist/core/richtext-hoc.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),i=require("@storyblok/js");function u(o,{isServerContext:t=!1}={}){return function(e){var a,l;const r=(a=e==null?void 0:e.attrs)==null?void 0:a.body,c=Array.isArray(r)&&r.length>0?r[0]:void 0,s=((l=e.attrs)==null?void 0:l.id)||(t?`fallback-key-${JSON.stringify(e.attrs)}`:void 0);return n.createElement(o,{blok:c,key:s})}}function m(o,{isServerContext:t=!1}={}){return function(e){const r=u(o,{isServerContext:t}),c={...t?e:{},renderFn:n.createElement,textFn:s=>n.createElement(n.Fragment,{key:Math.random().toString(36).substring(2,15)},s),resolvers:{[i.BlockTypes.COMPONENT]:r,...e.resolvers},keyedResolvers:!0,...t?{}:e};return i.richTextResolver(c)}}exports.createComponentResolver=u;exports.createRichTextHook=m;

package/dist/core/richtext-hoc.mjs

@@ -0,0 +1,38 @@
+import n from "react";
+import { BlockTypes as m, richTextResolver as u } from "@storyblok/js";
+function f(o, {
+  isServerContext: t = !1
+} = {}) {
+  return function(e) {
+    var a, l;
+    const r = (a = e == null ? void 0 : e.attrs) == null ? void 0 : a.body, s = Array.isArray(r) && r.length > 0 ? r[0] : void 0, c = ((l = e.attrs) == null ? void 0 : l.id) || (t ? `fallback-key-${JSON.stringify(e.attrs)}` : void 0);
+    return n.createElement(o, {
+      blok: s,
+      key: c
+    });
+  };
+}
+function R(o, {
+  isServerContext: t = !1
+} = {}) {
+  return function(e) {
+    const r = f(o, { isServerContext: t }), s = {
+      ...t ? e : {},
+      renderFn: n.createElement,
+      textFn: (c) => n.createElement(n.Fragment, {
+        key: Math.random().toString(36).substring(2, 15)
+      }, c),
+      resolvers: {
+        [m.COMPONENT]: r,
+        ...e.resolvers
+      },
+      keyedResolvers: !0,
+      ...t ? {} : e
+    };
+    return u(s);
+  };
+}
+export {
+  f as createComponentResolver,
+  R as createRichTextHook
+};

package/dist/core/state.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let o=null;const e=new Map;let n=!1,l=null;globalThis.storyCache=globalThis.storyCache?globalThis.storyCache:new Map;const c=()=>o,b=t=>{o=t},p=t=>(Object.entries(t).forEach(([s,a])=>{e.set(s,a)}),e),r=t=>e.has(t)?e.get(t):(console.error(`Component ${t} doesn't exist.`),!1),C=()=>n,m=t=>{n=t},k=()=>l,g=t=>{l=t};exports.getComponent=r;exports.getCustomFallbackComponent=k;exports.getEnableFallbackComponent=C;exports.getStoryblokApiInstance=c;exports.setComponents=p;exports.setCustomFallbackComponent=g;exports.setEnableFallbackComponent=m;exports.setStoryblokApiInstance=b;

package/dist/core/state.mjs

@@ -0,0 +1,23 @@
+let e = null;
+const o = /* @__PURE__ */ new Map();
+let n = !1, s = null;
+globalThis.storyCache = globalThis.storyCache ? globalThis.storyCache : /* @__PURE__ */ new Map();
+const c = () => e, r = (t) => {
+  e = t;
+}, b = (t) => (Object.entries(t).forEach(([l, a]) => {
+  o.set(l, a);
+}), o), p = (t) => o.has(t) ? o.get(t) : (console.error(`Component ${t} doesn't exist.`), !1), C = () => n, m = (t) => {
+  n = t;
+}, i = () => s, k = (t) => {
+  s = t;
+};
+export {
+  p as getComponent,
+  i as getCustomFallbackComponent,
+  C as getEnableFallbackComponent,
+  c as getStoryblokApiInstance,
+  b as setComponents,
+  k as setCustomFallbackComponent,
+  m as setEnableFallbackComponent,
+  r as setStoryblokApiInstance
+};

package/dist/core/storyblok-component.js

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

package/dist/{storyblok-component.mjs → core/storyblok-component.mjs}

@@ -1,6 +1,7 @@
-import { jsx as o, Fragment as l, jsxs as m } from "react/jsx-runtime";
+import { jsx as o, Fragment as m, jsxs as l } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import { getComponent as a, getEnableFallbackComponent as c, getCustomFallbackComponent as d } from "./index2.mjs";
+import "@storyblok/js";
+import { getComponent as a, getEnableFallbackComponent as c, getCustomFallbackComponent as d } from "./state.mjs";
 const s = i(
   ({ blok: e, ...t }, p) => {
     if (!e)
@@ -12,7 +13,7 @@ const s = i(
       return /* @__PURE__ */ o(n, { ref: p, blok: e, ...t });
     if (c()) {
       const r = d();
-      return r ? /* @__PURE__ */ o(r, { blok: e, ...t }) : /* @__PURE__ */ o(l, { children: /* @__PURE__ */ m("p", { children: [
+      return r ? /* @__PURE__ */ o(r, { blok: e, ...t }) : /* @__PURE__ */ o(m, { children: /* @__PURE__ */ l("p", { children: [
         "Component could not be found for blok",
         " ",
         /* @__PURE__ */ o("strong", { children: e.component }),

package/dist/core/use-storyblok-api.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./state.js"),t=()=>{const o=e.getStoryblokApiInstance();return o||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),o};exports.getStoryblokApi=t;exports.useStoryblokApi=t;

package/dist/core/use-storyblok-api.mjs

@@ -0,0 +1,11 @@
+import { getStoryblokApiInstance as t } from "./state.mjs";
+const e = () => {
+  const o = t();
+  return o || console.error(
+    "You can't use getStoryblokApi if you're not loading apiPlugin."
+  ), o;
+};
+export {
+  e as getStoryblokApi,
+  e as useStoryblokApi
+};

package/dist/core/use-storyblok-state.js

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

package/dist/{client.mjs → core/use-storyblok-state.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import { useState as u, useEffect as n } from "react";
-import { registerStoryblokBridge as c } from "./storyblok-js.mjs";
-const g = (e = null, o = {}) => {
-  const [r, s] = u(e), d = (e == null ? void 0 : e.id) ?? 0, t = typeof window < "u" && typeof window.storyblokRegisterEvent < "u";
+import { registerStoryblokBridge as c } from "@storyblok/js";
+const g = (e = null, s = {}) => {
+  const [r, o] = u(e), d = (e == null ? void 0 : e.id) ?? 0, t = typeof window < "u" && typeof window.storyblokRegisterEvent < "u";
   return n(() => {
-    s(e), !(!t || !e) && c(
+    o(e), !(!t || !e) && c(
       d,
-      (f) => s(f),
-      o
+      (f) => o(f),
+      s
     );
   }, [e]), r;
 };