@storyblok/react 3.0.15 → 4.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Storyblok GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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'
+// 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 }) {
-  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);
 }
 ```
 
@@ -314,84 +317,27 @@ const bridgeOptions = { resolveRelations: ['article.author'] }
 <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:
+> [!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.
 
-```js
-import { getStoryblokApi, StoryblokComponent } from '@storyblok/react/rsc'
-
-export default async function Home() {
-  const { data } = await fetchData()
+```jsx
+import { storyblokEditable, StoryblokServerComponent } from '@storyblok/react/rsc';
 
-  return (
-    <div>
-      <h1>
-        Story:
-        {data.story.id}
-      </h1>
-      <StoryblokComponent blok={data.story.content} />
-    </div>
-  )
-}
+const Page = ({ blok }) => (
+  <main {...storyblokEditable(blok)}>
+    {blok.body.map(nestedBlok => (
+      <StoryblokServerComponent blok={nestedBlok} key={nestedBlok._uid} />
+    ))}
+  </main>
+);
 
-export async function fetchData() {
-  const storyblokApi = getStoryblokApi()
-  return storyblokApi.get(`cdn/stories/home`, { version: 'draft' })
-}
+export default Page;
 ```
 
-> 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.
+> [!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.
+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.
 
 ## Next.js using Pages Router
 
@@ -708,3 +654,13 @@ 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.
+
+Please run `simple-git-hooks` after cloning the repository to enable the pre-commit hooks.
+
+```bash
+pnpm simple-git-hook
+```
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

package/dist/client.js

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

@@ -0,0 +1,3 @@
+import type { TUseStoryblokState } from '@/types';
+export declare const useStoryblokState: TUseStoryblokState;
+//# sourceMappingURL=client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/common/client.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,eAAO,MAAM,iBAAiB,EAAE,kBAyB/B,CAAC"}

package/dist/{types/common → common}/index.d.ts

@@ -1,4 +1,4 @@
-import type { 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>;
@@ -9,3 +9,4 @@ export * from '../types';
 export { useStoryblokApi as getStoryblokApi };
 export { default as StoryblokComponent } from './storyblok-component';
 export { apiPlugin, loadStoryblokBridge, registerStoryblokBridge, renderRichText, RichTextResolver, RichTextSchema, storyblokEditable, useStoryblokBridge, } from '@storyblok/js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EAChB,MAAM,SAAS,CAAC;AAOjB,eAAO,MAAM,eAAe,QAAO,eAQlC,CAAC;AAEF,eAAO,MAAM,aAAa,qBAAsB,oBAAoB,yBAGnE,CAAC;AAEF,eAAO,MAAM,YAAY,iBAAkB,MAAM,0FAOhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,eAAgC,CAAC;AACxE,eAAO,MAAM,0BAA0B,qFAAgC,CAAC;AAExE,eAAO,MAAM,aAAa,mBAAmB,iBAAiB,SAO7D,CAAC;AAEF,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,eAAe,IAAI,eAAe,EAAE,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { SbBlokData } from '@/types';
+interface StoryblokComponentProps {
+    blok: SbBlokData;
+}
+declare const StoryblokComponent: import("react").ForwardRefExoticComponent<StoryblokComponentProps & import("react").RefAttributes<HTMLElement>>;
+export default StoryblokComponent;
+//# sourceMappingURL=storyblok-component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"storyblok-component.d.ts","sourceRoot":"","sources":["../../src/common/storyblok-component.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,UAAU,uBAAuB;IAC/B,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,QAAA,MAAM,kBAAkB,iHAuCvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}

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 R } 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,
+  R 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/{types/index.d.ts → index.d.ts}

@@ -2,5 +2,6 @@ import type { ISbStoriesParams, ISbStoryData, StoryblokBridgeConfigV2 } from './
 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/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACZ,uBAAuB,EACxB,MAAM,SAAS,CAAC;AAIjB,eAAO,MAAM,YAAY,SACjB,MAAM,eACA,gBAAgB,kBACb,uBAAuB;;EAgDvC,CAAC;AAEF,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}

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"),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;
+"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={})=>{const[u,i]=y.useState({}),a=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),a&&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,u):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;

package/dist/index.mjs

@@ -3,8 +3,8 @@ import { registerStoryblokBridge as k } from "./storyblok-js.mjs";
 import { RichTextResolver as v, RichTextSchema as x, apiPlugin as R, loadStoryblokBridge as C, renderRichText as w, storyblokEditable as B } from "./storyblok-js.mjs";
 import { useStoryblokApi as c } from "./index2.mjs";
 import { getComponent as h, getCustomFallbackComponent as A, getEnableFallbackComponent as T, setComponents as F, storyblokInit as I } from "./index2.mjs";
-import { useStoryblokState as N } from "./client.mjs";
-import { default as _ } from "./storyblok-component.mjs";
+import { useStoryblokState as P } from "./client.mjs";
+import { default as q } from "./storyblok-component.mjs";
 const b = (s, e = {}, o = {}) => {
   const [l, n] = f({}), i = typeof window < "u" && typeof window.storyblokRegisterEvent < "u", t = c();
   return u(() => {
@@ -31,7 +31,7 @@ const b = (s, e = {}, o = {}) => {
 export {
   v as RichTextResolver,
   x as RichTextSchema,
-  _ as StoryblokComponent,
+  q as StoryblokComponent,
   R as apiPlugin,
   h as getComponent,
   A as getCustomFallbackComponent,
@@ -46,5 +46,5 @@ export {
   b as useStoryblok,
   c as useStoryblokApi,
   k as useStoryblokBridge,
-  N as useStoryblokState
+  P as useStoryblokState
 };

package/dist/jsx-runtime.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime2.js"),r=require("./react-jsx-runtime.production.min.js"),t=require("./react-jsx-runtime.development.js");process.env.NODE_ENV==="production"?e.__module.exports=r.__require():e.__module.exports=t.__require();var o=e.__module.exports;exports.jsxRuntimeExports=o;

package/dist/jsx-runtime.mjs

@@ -0,0 +1,9 @@
+"use strict";
+import { __module as e } from "./jsx-runtime2.mjs";
+import { __require as r } from "./react-jsx-runtime.production.min.mjs";
+import { __require as o } from "./react-jsx-runtime.development.mjs";
+process.env.NODE_ENV === "production" ? e.exports = r() : e.exports = o();
+var m = e.exports;
+export {
+  m as j
+};

package/dist/jsx-runtime2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;

package/dist/jsx-runtime2.mjs

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

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 l=require("./storyblok-js.js"),n=require("react"),o=require("./live-edit-update-action.js"),u=({story:e=null,bridgeOptions:t={}})=>{if(typeof window>"u")return null;const r=i=>{i&&n.startTransition(()=>{o.liveEditUpdateAction({story:i,pathToRevalidate:window.location.pathname})})},d=(e==null?void 0:e.internalId)??(e==null?void 0:e.id)??0;return n.useEffect(()=>{l.registerStoryblokBridge(d,i=>r(i),t)},[]),null};module.exports=u;

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/react-jsx-runtime.development.js

@@ -0,0 +1,23 @@
+"use strict";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("./react-jsx-runtime.development2.js"),or=require("react");/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Ee;function ur(){return Ee||(Ee=1,process.env.NODE_ENV!=="production"&&function(){var _e=or,x=Symbol.for("react.element"),Re=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),K=Symbol.for("react.profiler"),N=Symbol.for("react.provider"),G=Symbol.for("react.context"),C=Symbol.for("react.forward_ref"),A=Symbol.for("react.suspense"),D=Symbol.for("react.suspense_list"),O=Symbol.for("react.memo"),F=Symbol.for("react.lazy"),me=Symbol.for("react.offscreen"),J=Symbol.iterator,Te="@@iterator";function Se(e){if(e===null||typeof e!="object")return null;var r=J&&e[J]||e[Te];return typeof r=="function"?r:null}var h=_e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function f(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];Ce("error",e,t)}}function Ce(e,r,t){{var n=h.ReactDebugCurrentFrame,o=n.getStackAddendum();o!==""&&(r+="%s",t=t.concat([o]));var u=t.map(function(i){return String(i)});u.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,u)}}var Oe=!1,Pe=!1,we=!1,je=!1,ke=!1,z;z=Symbol.for("react.module.reference");function xe(e){return!!(typeof e=="string"||typeof e=="function"||e===S||e===K||ke||e===B||e===A||e===D||je||e===me||Oe||Pe||we||typeof e=="object"&&e!==null&&(e.$$typeof===F||e.$$typeof===O||e.$$typeof===N||e.$$typeof===G||e.$$typeof===C||e.$$typeof===z||e.getModuleId!==void 0))}function Ae(e,r,t){var n=e.displayName;if(n)return n;var o=r.displayName||r.name||"";return o!==""?t+"("+o+")":t}function X(e){return e.displayName||"Context"}function p(e){if(e==null)return null;if(typeof e.tag=="number"&&f("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case S:return"Fragment";case Re:return"Portal";case K:return"Profiler";case B:return"StrictMode";case A:return"Suspense";case D:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case G:var r=e;return X(r)+".Consumer";case N:var t=e;return X(t._context)+".Provider";case C:return Ae(e,e.render,"ForwardRef");case O:var n=e.displayName||null;return n!==null?n:p(e.type)||"Memo";case F:{var o=e,u=o._payload,i=o._init;try{return p(i(u))}catch{return null}}}return null}var g=Object.assign,_=0,H,Z,Q,ee,re,te,ne;function ae(){}ae.__reactDisabledLog=!0;function De(){{if(_===0){H=console.log,Z=console.info,Q=console.warn,ee=console.error,re=console.group,te=console.groupCollapsed,ne=console.groupEnd;var e={configurable:!0,enumerable:!0,value:ae,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}_++}}function Fe(){{if(_--,_===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:g({},e,{value:H}),info:g({},e,{value:Z}),warn:g({},e,{value:Q}),error:g({},e,{value:ee}),group:g({},e,{value:re}),groupCollapsed:g({},e,{value:te}),groupEnd:g({},e,{value:ne})})}_<0&&f("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var I=h.ReactCurrentDispatcher,W;function P(e,r,t){{if(W===void 0)try{throw Error()}catch(o){var n=o.stack.trim().match(/\n( *(at )?)/);W=n&&n[1]||""}return`
+`+W+e}}var $=!1,w;{var Ie=typeof WeakMap=="function"?WeakMap:Map;w=new Ie}function ie(e,r){if(!e||$)return"";{var t=w.get(e);if(t!==void 0)return t}var n;$=!0;var o=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var u;u=I.current,I.current=null,De();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(i,[])}catch(v){n=v}Reflect.construct(e,[],i)}else{try{i.call()}catch(v){n=v}e.call(i.prototype)}}else{try{throw Error()}catch(v){n=v}e()}}catch(v){if(v&&n&&typeof v.stack=="string"){for(var a=v.stack.split(`
+`),c=n.stack.split(`
+`),s=a.length-1,l=c.length-1;s>=1&&l>=0&&a[s]!==c[l];)l--;for(;s>=1&&l>=0;s--,l--)if(a[s]!==c[l]){if(s!==1||l!==1)do if(s--,l--,l<0||a[s]!==c[l]){var d=`
+`+a[s].replace(" at new "," at ");return e.displayName&&d.includes("<anonymous>")&&(d=d.replace("<anonymous>",e.displayName)),typeof e=="function"&&w.set(e,d),d}while(s>=1&&l>=0);break}}}finally{$=!1,I.current=u,Fe(),Error.prepareStackTrace=o}var E=e?e.displayName||e.name:"",b=E?P(E):"";return typeof e=="function"&&w.set(e,b),b}function We(e,r,t){return ie(e,!1)}function $e(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function j(e,r,t){if(e==null)return"";if(typeof e=="function")return ie(e,$e(e));if(typeof e=="string")return P(e);switch(e){case A:return P("Suspense");case D:return P("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case C:return We(e.render);case O:return j(e.type,r,t);case F:{var n=e,o=n._payload,u=n._init;try{return j(u(o),r,t)}catch{}}}return""}var R=Object.prototype.hasOwnProperty,oe={},ue=h.ReactDebugCurrentFrame;function k(e){if(e){var r=e._owner,t=j(e.type,e._source,r?r.type:null);ue.setExtraStackFrame(t)}else ue.setExtraStackFrame(null)}function Ye(e,r,t,n,o){{var u=Function.call.bind(R);for(var i in e)if(u(e,i)){var a=void 0;try{if(typeof e[i]!="function"){var c=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}a=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(s){a=s}a&&!(a instanceof Error)&&(k(o),f("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof a),k(null)),a instanceof Error&&!(a.message in oe)&&(oe[a.message]=!0,k(o),f("Failed %s type: %s",t,a.message),k(null))}}}var Me=Array.isArray;function Y(e){return Me(e)}function Ve(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function Le(e){try{return se(e),!1}catch{return!0}}function se(e){return""+e}function le(e){if(Le(e))return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Ve(e)),se(e)}var m=h.ReactCurrentOwner,Ue={key:!0,ref:!0,__self:!0,__source:!0},fe,ce,M;M={};function qe(e){if(R.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function Be(e){if(R.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function Ke(e,r){if(typeof e.ref=="string"&&m.current&&r&&m.current.stateNode!==r){var t=p(m.current.type);M[t]||(f('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',p(m.current.type),e.ref),M[t]=!0)}}function Ne(e,r){{var t=function(){fe||(fe=!0,f("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function Ge(e,r){{var t=function(){ce||(ce=!0,f("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var Je=function(e,r,t,n,o,u,i){var a={$$typeof:x,type:e,key:r,ref:t,props:i,_owner:u};return a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(a,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(a,"_source",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a};function ze(e,r,t,n,o){{var u,i={},a=null,c=null;t!==void 0&&(le(t),a=""+t),Be(r)&&(le(r.key),a=""+r.key),qe(r)&&(c=r.ref,Ke(r,o));for(u in r)R.call(r,u)&&!Ue.hasOwnProperty(u)&&(i[u]=r[u]);if(e&&e.defaultProps){var s=e.defaultProps;for(u in s)i[u]===void 0&&(i[u]=s[u])}if(a||c){var l=typeof e=="function"?e.displayName||e.name||"Unknown":e;a&&Ne(i,l),c&&Ge(i,l)}return Je(e,a,c,o,n,m.current,i)}}var V=h.ReactCurrentOwner,ve=h.ReactDebugCurrentFrame;function y(e){if(e){var r=e._owner,t=j(e.type,e._source,r?r.type:null);ve.setExtraStackFrame(t)}else ve.setExtraStackFrame(null)}var L;L=!1;function U(e){return typeof e=="object"&&e!==null&&e.$$typeof===x}function de(){{if(V.current){var e=p(V.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function Xe(e){return""}var pe={};function He(e){{var r=de();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
+
+Check the top-level render call using <`+t+">.")}return r}}function ge(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=He(r);if(pe[t])return;pe[t]=!0;var n="";e&&e._owner&&e._owner!==V.current&&(n=" It was passed a child from "+p(e._owner.type)+"."),y(e),f('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),y(null)}}function be(e,r){{if(typeof e!="object")return;if(Y(e))for(var t=0;t<e.length;t++){var n=e[t];U(n)&&ge(n,r)}else if(U(e))e._store&&(e._store.validated=!0);else if(e){var o=Se(e);if(typeof o=="function"&&o!==e.entries)for(var u=o.call(e),i;!(i=u.next()).done;)U(i.value)&&ge(i.value,r)}}}function Ze(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===C||r.$$typeof===O))t=r.propTypes;else return;if(t){var n=p(r);Ye(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!L){L=!0;var o=p(r);f("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",o||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&f("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Qe(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){y(e),f("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),y(null);break}}e.ref!==null&&(y(e),f("Invalid attribute `ref` supplied to `React.Fragment`."),y(null))}}var he={};function ye(e,r,t,n,o,u){{var i=xe(e);if(!i){var a="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var c=Xe();c?a+=c:a+=de();var s;e===null?s="null":Y(e)?s="array":e!==void 0&&e.$$typeof===x?(s="<"+(p(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):s=typeof e,f("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",s,a)}var l=ze(e,r,t,o,u);if(l==null)return l;if(i){var d=r.children;if(d!==void 0)if(n)if(Y(d)){for(var E=0;E<d.length;E++)be(d[E],e);Object.freeze&&Object.freeze(d)}else f("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else be(d,e)}if(R.call(r,"key")){var b=p(e),v=Object.keys(r).filter(function(ir){return ir!=="key"}),q=v.length>0?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}";if(!he[b+q]){var ar=v.length>0?"{"+v.join(": ..., ")+": ...}":"{}";f(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,q,b,ar,b),he[b+q]=!0}}return e===S?Qe(l):Ze(l),l}}function er(e,r,t){return ye(e,r,t,!0)}function rr(e,r,t){return ye(e,r,t,!1)}var tr=rr,nr=er;T.__exports.Fragment=S,T.__exports.jsx=tr,T.__exports.jsxs=nr}()),T.__exports}exports.__require=ur;