@storyblok/react 4.7.0 → 5.0.1

package/README.md

@@ -31,12 +31,15 @@
 </p>
 
 ## Kickstart a new project
+
 Are you eager to dive into coding? **[Follow these steps to kickstart a new project with Storyblok and React](https://www.storyblok.com/technologies?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react#react)**, and get started in just a few minutes!
 
 ## 5-minute Tutorial
+
 Are you looking for a hands-on, step-by-step tutorial? The **[React 5-minute Tutorial](https://www.storyblok.com/tp/headless-cms-react?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react)** has you covered! It provides comprehensive instructions on how to set up a Storyblok space and connect it to your React project.
 
 ## Ultimate Tutorial
+
 Are you looking for a hands-on, step-by-step tutorial? The **[Next.js Ultimate Tutorial](https://www.storyblok.com/tp/nextjs-headless-cms-ultimate-tutorial?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react)** has you covered! It provides comprehensive instructions on building a complete, multilingual website using Storyblok and Next.js from start to finish.
 
 ## Installation
@@ -63,15 +66,15 @@ Install the file from the CDN:
 Register the plugin on your application and add the [access token](https://www.storyblok.com/docs/api/content-delivery/v2/getting-started/authentication?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react) of your Storyblok space. You can also add the `apiPlugin` in case that you want to use the Storyblok API Client:
 
 ```js
-import { apiPlugin, storyblokInit } from '@storyblok/react'
+import { apiPlugin, storyblokInit } from "@storyblok/react";
 
 /** Import your components */
-import Page from './components/Page'
-import Teaser from './components/Teaser'
+import Page from "./components/Page";
+import Teaser from "./components/Teaser";
 // import FallbackComponent from "./components/FallbackComponent";
 
 storyblokInit({
-  accessToken: 'YOUR_ACCESS_TOKEN',
+  accessToken: "YOUR_ACCESS_TOKEN",
   use: [apiPlugin],
   components: {
     page: Page,
@@ -82,7 +85,7 @@ storyblokInit({
   // richText: {},
   // enableFallbackComponent: false,
   // customFallbackComponent: FallbackComponent,
-})
+});
 ```
 
 > Note: This is the general way for initalizing the SDK, the initialization might be a little different depending upon the framework. You can see how everything works according to the framework in their respective sections below.
@@ -106,16 +109,16 @@ Possible values:
 Full example for a space created in the US:
 
 ```js
-import { apiPlugin, storyblokInit } from '@storyblok/react'
+import { apiPlugin, storyblokInit } from "@storyblok/react";
 
 storyblokInit({
-  accessToken: 'YOUR_ACCESS_TOKEN',
+  accessToken: "YOUR_ACCESS_TOKEN",
   use: [apiPlugin],
   apiOptions: {
-    region: 'us',
+    region: "us",
   },
   components: {},
-})
+});
 ```
 
 > Note: For spaces created in the United States or China, the `region` parameter **must** be specified.
@@ -129,7 +132,7 @@ storyblokInit({
 For every component you've defined in your Storyblok space, call the `storyblokEditable` function with the blok content:
 
 ```js
-import { storyblokEditable } from '@storyblok/react'
+import { storyblokEditable } from "@storyblok/react";
 
 const Feature = ({ blok }) => {
   return (
@@ -139,10 +142,10 @@ const Feature = ({ blok }) => {
         <p>{blok.description}</p>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Feature
+export default Feature;
 ```
 
 Where `blok` is the actual blok data coming from [Storyblok's Content Delivery API](https://www.storyblok.com/docs/api/content-delivery?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react).
@@ -164,19 +167,19 @@ The initalization remains the same when you work with React. You can intialze th
 Use `useStoryblok` to fetch the content as well as enable live editing. You need to pass the `slug` as the first parameter, `apiOptions` as the second parameter, and `bridgeOptions` as the third parameter, which is optional if you want to set the options for the bridge by yourself. Check the available [apiOptions](https://github.com/storyblok/storyblok-js-client#class-storyblok) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
 
 ```js
-import { StoryblokComponent, useStoryblok } from '@storyblok/react'
+import { StoryblokComponent, useStoryblok } from "@storyblok/react";
 
 function App() {
-  const story = useStoryblok('react', { version: 'draft' })
+  const story = useStoryblok("react", { version: "draft" });
 
   if (!story?.content) {
-    return <div>Loading...</div>
+    return <div>Loading...</div>;
   }
 
-  return <StoryblokComponent blok={story.content} />
+  return <StoryblokComponent blok={story.content} />;
 }
 
-export default App
+export default App;
 ```
 
 `StoryblokComponent` renders the route components dynamically, using the list of components loaded during the initialization inside the `storyblokInit` function.
@@ -186,13 +189,13 @@ This is how you can pass the Bridge options as a third parameter to `useStoryblo
 ```js
 useStoryblok(
   story.id,
-  { version: 'draft', resolveRelations: ['Article.author'] },
+  { version: "draft", resolveRelations: ["Article.author"] },
   {
-    resolveRelations: ['Article.author'],
-    resolveLinks: 'url',
+    resolveRelations: ["Article.author"],
+    resolveLinks: "url",
     preventClicks: true,
-  }
-)
+  },
+);
 ```
 
 **Check out our React Boilerplate [here](https://github.com/storyblok/storyblok-react-boilerplate), or read on how to add Storyblok to React in 5 mins [here](https://www.storyblok.com/tp/headless-cms-react)**
@@ -212,13 +215,13 @@ Here's how you can fetch data from Storyblok with `cache: "no-store"`:
 
 ```typescript
 export async function fetchData() {
-  const sbParams: ISbStoriesParams = { version: 'draft' }
+  const sbParams: ISbStoriesParams = { version: "draft" };
 
-  const storyblokApi: StoryblokClient = getStoryblokApi()
+  const storyblokApi: StoryblokClient = getStoryblokApi();
 
   return storyblokApi.get(`cdn/stories/home`, sbParams, {
-    cache: 'no-store', // This prevents Next.js 13, 14 default caching behaviour
-  })
+    cache: "no-store", // This prevents Next.js 13, 14 default caching behaviour
+  });
 }
 ```
 
@@ -234,12 +237,12 @@ Create a new file `lib/storyblok.js` and initialize the SDK. Make sure you expor
 
 ```js
 // lib/storyblok.js
-import Page from '@/components/Page';
-import Teaser from '@/components/Teaser';
-import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';
+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',
+  accessToken: "YOUR_ACCESS_TOKEN",
   use: [apiPlugin],
   components: {
     teaser: Teaser,
@@ -252,8 +255,8 @@ In `app/layout.jsx`, wrap your whole app using a `StoryblokProvider` component (
 
 ```js
 // app/layout.jsx
-import { apiPlugin, storyblokInit } from '@storyblok/react/rsc'
-import StoryblokProvider from '../components/StoryblokProvider'
+import { apiPlugin, storyblokInit } from "@storyblok/react/rsc";
+import StoryblokProvider from "../components/StoryblokProvider";
 
 export default function RootLayout({ children }) {
   return (
@@ -262,7 +265,7 @@ export default function RootLayout({ children }) {
         <body>{children}</body>
       </html>
     </StoryblokProvider>
-  )
+  );
 }
 ```
 
@@ -272,9 +275,9 @@ Create the `components/StoryblokProvider.jsx` file. Re-initalize the connection
 
 ```js
 // components/StoryblokProvider.jsx
-'use client';
+"use client";
 
-import { getStoryblokApi } from '@/lib/storyblok';
+import { getStoryblokApi } from "@/lib/storyblok";
 
 export default function StoryblokProvider({ children }) {
   getStoryblokApi();
@@ -321,11 +324,14 @@ const bridgeOptions = { resolveRelations: ['article.author'] }
 > 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.
 
 ```jsx
-import { storyblokEditable, StoryblokServerComponent } from '@storyblok/react/rsc';
+import {
+  storyblokEditable,
+  StoryblokServerComponent,
+} from "@storyblok/react/rsc";
 
 const Page = ({ blok }) => (
   <main {...storyblokEditable(blok)}>
-    {blok.body.map(nestedBlok => (
+    {blok.body.map((nestedBlok) => (
       <StoryblokServerComponent blok={nestedBlok} key={nestedBlok._uid} />
     ))}
   </main>
@@ -350,11 +356,11 @@ The initalization remains the same when you work with Next.js. You can intialze
 The SDK provides a `getStoryblokApi` object in your app, which is an instance of [storyblok-js-client](https://github.com/storyblok/storyblok-js-client). This can be used to fetch the content from Storyblok. You can use it in functions like `getStaticProps`, `getStaticPaths`, `getServerSideProps` etc.
 
 ```js
-import { getStoryblokApi } from '@storyblok/react'
+import { getStoryblokApi } from "@storyblok/react";
 
 // At the required place
-const storyblokApi = getStoryblokApi()
-const { data } = await storyblokApi.get('cdn/stories', { version: 'draft' })
+const storyblokApi = getStoryblokApi();
+const { data } = await storyblokApi.get("cdn/stories", { version: "draft" });
 ```
 
 > Note: To use this approach, you need to include the `apiPlugin` module when calling `storyblokInit` function. If you don't use `apiPlugin`, you can use your preferred method or function to fetch your data.
@@ -364,16 +370,16 @@ const { data } = await storyblokApi.get('cdn/stories', { version: 'draft' })
 The SDK also provides you with the `useStoryblokState` hook. It works similarly to `useStoryblok` for live editing, but it doesn't fetch the content. Instead, it receives a story object as the first parameter. You can also pass the Bridge Options as the second parameter.
 
 ```js
-import { StoryblokComponent, useStoryblokState } from '@storyblok/react'
+import { StoryblokComponent, useStoryblokState } from "@storyblok/react";
 
 export default function Home({ story: initialStory }) {
-  const story = useStoryblokState(initialStory)
+  const story = useStoryblokState(initialStory);
 
   if (!story.content) {
-    return <div>Loading...</div>
+    return <div>Loading...</div>;
   }
 
-  return <StoryblokComponent blok={story.content} />
+  return <StoryblokComponent blok={story.content} />;
 }
 ```
 
@@ -384,23 +390,23 @@ import {
   getStoryblokApi,
   StoryblokComponent,
   useStoryblokState,
-} from '@storyblok/react'
+} from "@storyblok/react";
 
 export default function Home({ story: initialStory }) {
-  const story = useStoryblokState(initialStory)
+  const story = useStoryblokState(initialStory);
 
   if (!story.content) {
-    return <div>Loading...</div>
+    return <div>Loading...</div>;
   }
 
-  return <StoryblokComponent blok={story.content} />
+  return <StoryblokComponent blok={story.content} />;
 }
 
 export async function getStaticProps({ preview = false }) {
-  const storyblokApi = getStoryblokApi()
+  const storyblokApi = getStoryblokApi();
   const { data } = await storyblokApi.get(`cdn/stories/react`, {
-    version: 'draft',
-  })
+    version: "draft",
+  });
 
   return {
     props: {
@@ -408,7 +414,7 @@ export async function getStaticProps({ preview = false }) {
       preview,
     },
     revalidate: 3600, // revalidate every hour
-  }
+  };
 }
 ```
 
@@ -489,10 +495,10 @@ You can use an `apiOptions` object. This is passed down to the [storyblok-js-cli
 
 ```js
 storyblokInit({
-  accessToken: 'YOUR_ACCESS_TOKEN',
+  accessToken: "YOUR_ACCESS_TOKEN",
   apiOptions: {
     // storyblok-js-client config object
-    cache: { type: 'memory' },
+    cache: { type: "memory" },
   },
   use: [apiPlugin],
   components: {
@@ -501,13 +507,13 @@ storyblokInit({
     grid: Grid,
     feature: Feature,
   },
-})
+});
 ```
 
 If you prefer to use your own fetch method, just remove the `apiPlugin` and `storyblok-js-client` won't be added to your application.
 
 ```js
-storyblokInit({})
+storyblokInit({});
 ```
 
 ### Storyblok Bridge
@@ -515,14 +521,14 @@ storyblokInit({})
 If you don't use `registerStoryblokBridge`, you still have access to the raw `window.StoryblokBridge`:
 
 ```js
-const sbBridge = new window.StoryblokBridge(options)
+const sbBridge = new window.StoryblokBridge(options);
 
-sbBridge.on(['input', 'published', 'change'], (event) => {
+sbBridge.on(["input", "published", "change"], (event) => {
   // ...
-})
+});
 ```
 
-## Rendering Rich Text 
+## Rendering Rich Text
 
 > [!WARNING]  
 > We have identified issues with richtext and Types on React 19 and Next.js 15. As a temporary measure, we advise you to continue using React 18 and Next.js 14 until we have fully resolved the issues.
@@ -607,19 +613,19 @@ function App() {
             </a>
           );
     },
-    [BlockTypes.CODE_BLOCK]: (node) => 
-      <CodeBlock 
+    [BlockTypes.CODE_BLOCK]: (node) =>
+      <CodeBlock
         class={node?.attrs?.class}
       >
-        {node.children}  
+        {node.children}
       </CodeBlock>;
   }
 
   return (
     <div>
-      <StoryblokRichText 
+      <StoryblokRichText
         doc={story.content.richText}
-        resolvers={resolvers} 
+        resolvers={resolvers}
       />
     </div>
   );
@@ -634,53 +640,53 @@ function App() {
 You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/react`:
 
 ```js
-import { renderRichText } from '@storyblok/react'
+import { renderRichText } from "@storyblok/react";
 
-const renderedRichText = renderRichText(blok.richtext)
+const renderedRichText = renderRichText(blok.richtext);
 ```
 
 You can set a **custom Schema and component resolver globally** at init time by using the `richText` init option:
 
 ```js
-import { RichTextSchema, storyblokInit } from '@storyblok/react'
-import cloneDeep from 'clone-deep'
+import { RichTextSchema, storyblokInit } from "@storyblok/react";
+import cloneDeep from "clone-deep";
 
-const mySchema = cloneDeep(RichTextSchema) // you can make a copy of the default RichTextSchema
+const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
 // ... and edit the nodes and marks, or add your own.
 // Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/main/src/schema.ts
 
 storyblokInit({
-  accessToken: '<your-token>',
+  accessToken: "<your-token>",
   richText: {
     schema: mySchema,
     resolver: (component, blok) => {
       switch (component) {
-        case 'my-custom-component':
-          return `<div class="my-component-class">${blok.text}</div>`
+        case "my-custom-component":
+          return `<div class="my-component-class">${blok.text}</div>`;
         default:
-          return 'Resolver not defined'
+          return "Resolver not defined";
       }
     },
   },
-})
+});
 ```
 
 You can also set a **custom Schema and component resolver only once** by passing the options as the second parameter to `renderRichText` function:
 
 ```js
-import { renderRichText } from '@storyblok/react'
+import { renderRichText } from "@storyblok/react";
 
 renderRichText(blok.richTextField, {
   schema: mySchema,
   resolver: (component, blok) => {
     switch (component) {
-      case 'my-custom-component':
-        return `<div class="my-component-class">${blok.text}</div>`
+      case "my-custom-component":
+        return `<div class="my-component-class">${blok.text}</div>`;
       default:
-        return `Component ${component} not found`
+        return `Component ${component} not found`;
     }
   },
-})
+});
 ```
 
 We also recommend using the [Storyblok Rich Text Renderer for React by Claus](https://github.com/claus/storyblok-rich-text-react-renderer) for rendering your Storyblok rich text content to React elements and Next.js applications.
@@ -700,7 +706,7 @@ storyblokInit({
   components: {
     // all your React components
   },
-})
+});
 ```
 
 Storyblok's React SDK automatically renders these predefined components based on your page content. While this is convenient, it can lead to larger bundle sizes and slower page speeds, especially for larger sites or when using heavy JavaScript libraries that are only needed on specific pages or a specific component.
@@ -713,24 +719,24 @@ Storyblok's React SDK automatically renders these predefined components based on
 2. **React's `react.lazy`**:
    React offers a built-in solution called `react.lazy` for code splitting. Instead of directly importing components, you can do the following:
 
-    ```javascript
-    'use client'
-    import { apiPlugin, storyblokInit } from '@storyblok/react/rsc'
-    import { lazy } from 'react'
+   ```javascript
+   "use client";
+   import { apiPlugin, storyblokInit } from "@storyblok/react/rsc";
+   import { lazy } from "react";
 
-    const lazyComponents = {
-      page: lazy(() => import('./components/Page')),
-      // other lazy-loaded components
-    }
+   const lazyComponents = {
+     page: lazy(() => import("./components/Page")),
+     // other lazy-loaded components
+   };
 
-    storyblokInit({
-      accessToken,
-      use: [apiPlugin],
-      components: lazyComponents,
-    })
-    ```
+   storyblokInit({
+     accessToken,
+     use: [apiPlugin],
+     components: lazyComponents,
+   });
+   ```
 
-    This approach enables automatic code splitting and loads only the necessary JavaScript for each page. However, `react.lazy` has some limitations when used with SSR (Server-Side Rendering).
+   This approach enables automatic code splitting and loads only the necessary JavaScript for each page. However, `react.lazy` has some limitations when used with SSR (Server-Side Rendering).
 
 3. **Using `@loadable/component`**:
    For cases where SSR is needed, or in general, you can use the `@loadable/component` library, which offers similar functionality and better SSR support. This library is framework-agnostic and can be used with any React framework. [Loadable Components Documentation](https://loadable-components.com/docs/getting-started/)
@@ -762,12 +768,6 @@ 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?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react#code-of-conduct).
 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/common/index.d.ts

@@ -8,5 +8,5 @@ export declare const getCustomFallbackComponent: () => import('react').ElementTy
 export declare const storyblokInit: (pluginOptions?: SbReactSDKOptions) => void;
 export { useStoryblokApi as getStoryblokApi };
 export { default as StoryblokComponent } from './storyblok-component';
-export { apiPlugin, BlockTypes, loadStoryblokBridge, MarkTypes, registerStoryblokBridge, renderRichText, RichTextResolver, richTextResolver, RichTextSchema, storyblokEditable, type StoryblokRichTextImageOptimizationOptions, type StoryblokRichTextNode, type StoryblokRichTextNodeResolver, type StoryblokRichTextNodeTypes, type StoryblokRichTextOptions, type StoryblokRichTextResolvers, TextTypes, useStoryblokBridge, } from '@storyblok/js';
+export { apiPlugin, BlockTypes, loadStoryblokBridge, MarkTypes, registerStoryblokBridge, renderRichText, richTextResolver, storyblokEditable, type StoryblokRichTextImageOptimizationOptions, type StoryblokRichTextNode, type StoryblokRichTextNodeResolver, type StoryblokRichTextNodeTypes, type StoryblokRichTextOptions, type StoryblokRichTextResolvers, TextTypes, useStoryblokBridge, } from '@storyblok/js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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;AAEjB,cAAc,UAAU,CAAC;AAOzB,eAAO,MAAM,eAAe,QAAO,eAQlC,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kBAAkB,oBAAoB,yBAGnE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,0FAOhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,eAAgC,CAAC;AACxE,eAAO,MAAM,0BAA0B,qFAAgC,CAAC;AAExE,eAAO,MAAM,aAAa,GAAI,gBAAe,iBAAsB,SAOlE,CAAC;AAEF,OAAO,EAAE,eAAe,IAAI,eAAe,EAAE,CAAC;AAE9C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EACL,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,SAAS,EACT,uBAAuB,EACvB,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,KAAK,yCAAyC,EAC9C,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,EAClC,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,SAAS,EACT,kBAAkB,GACnB,MAAM,eAAe,CAAC"}
+{"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;AAEjB,cAAc,UAAU,CAAC;AAOzB,eAAO,MAAM,eAAe,QAAO,eAQlC,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kBAAkB,oBAAoB,yBAGnE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,0FAOhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,eAAgC,CAAC;AACxE,eAAO,MAAM,0BAA0B,qFAAgC,CAAC;AAExE,eAAO,MAAM,aAAa,GAAI,gBAAe,iBAAsB,SAOlE,CAAC;AAEF,OAAO,EAAE,eAAe,IAAI,eAAe,EAAE,CAAC;AAE9C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EACL,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,SAAS,EACT,uBAAuB,EACvB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,yCAAyC,EAC9C,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,EAClC,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,SAAS,EACT,kBAAkB,GACnB,MAAM,eAAe,CAAC"}

package/dist/common.js

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

package/dist/common.mjs

@@ -1,35 +1,33 @@
 import { storyblokInit as a } from "./storyblok-js.mjs";
-import { RichTextResolver as C, RichTextSchema as f, apiPlugin as h, loadStoryblokBridge as d, registerStoryblokBridge as S, renderRichText as x, storyblokEditable as F, registerStoryblokBridge as T } from "./storyblok-js.mjs";
-import { default as B } from "./server-component.mjs";
+import { apiPlugin as C, loadStoryblokBridge as f, registerStoryblokBridge as d, renderRichText as h, storyblokEditable as S, registerStoryblokBridge as F } from "./storyblok-js.mjs";
+import { default as A } from "./server-component.mjs";
 let e = null;
 const r = /* @__PURE__ */ new Map();
 let n = !1, l = null;
 globalThis.storyCache = globalThis.storyCache ? 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]) => {
+), e), b = (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;
+  return e = t, o.components && b(o.components), n = o.enableFallbackComponent, l = o.customFallbackComponent, () => t;
 };
 export {
-  C as RichTextResolver,
-  f as RichTextSchema,
-  B as StoryblokServerComponent,
-  h as apiPlugin,
+  A as StoryblokServerComponent,
+  C as apiPlugin,
   k as getComponent,
   p as getCustomFallbackComponent,
   m as getEnableFallbackComponent,
   i as getStoryblokApi,
-  d as loadStoryblokBridge,
-  S as registerStoryblokBridge,
-  x as renderRichText,
-  c as setComponents,
-  F as storyblokEditable,
+  f as loadStoryblokBridge,
+  d as registerStoryblokBridge,
+  h as renderRichText,
+  b as setComponents,
+  S as storyblokEditable,
   u as storyblokInit,
   i as useStoryblokApi,
-  T as useStoryblokBridge
+  F as useStoryblokBridge
 };

package/dist/index.d.ts

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

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),e=require("./storyblok-js.js"),t=require("./index2.js"),c=require("./richtext.js"),S=require("./client.js"),d=require("./storyblok-rich-text.js"),T=require("./utils.js"),g=require("./storyblok-component.js"),R=(n,r={},o={})=>{const[u,i]=y.useState({}),k=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u",s=t.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),o)}b()},[n,JSON.stringify(r),s]),s?(o.resolveRelations=o.resolveRelations??r.resolve_relations,o.resolveLinks=o.resolveLinks??r.resolve_links,u):null},x=c.useStoryblokRichText;exports.BlockTypes=e.BlockTypes;exports.MarkTypes=e.MarkTypes;exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;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=t.getComponent;exports.getCustomFallbackComponent=t.getCustomFallbackComponent;exports.getEnableFallbackComponent=t.getEnableFallbackComponent;exports.getStoryblokApi=t.useStoryblokApi;exports.setComponents=t.setComponents;exports.storyblokInit=t.storyblokInit;exports.useStoryblokApi=t.useStoryblokApi;exports.useStoryblokRichText=c.useStoryblokRichText;exports.useStoryblokState=S.useStoryblokState;exports.StoryblokRichText=d;exports.convertAttributesInElement=T.convertAttributesInElement;exports.StoryblokComponent=g;exports.useStoryblok=R;exports.useStoryblokRichTextResolver=x;
+"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;