@storyblok/react 2.1.5 → 2.1.6

package/dist/{client-7b1fd9f5.mjs → client-1896280c.mjs}

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { u as ue } from "./storyblok-js-834d6ca5.mjs";
 const useStoryblokState = (initialStory = null, bridgeOptions = {}) => {
   let [story, setStory] = useState(initialStory);
@@ -6,11 +6,14 @@ const useStoryblokState = (initialStory = null, bridgeOptions = {}) => {
   if (!isBridgeEnable || !initialStory) {
     return initialStory;
   }
-  ue(
-    story.id,
-    (newStory) => setStory(newStory),
-    bridgeOptions
-  );
+  useEffect(() => {
+    setStory(initialStory);
+    ue(
+      story.id,
+      (newStory) => setStory(newStory),
+      bridgeOptions
+    );
+  }, [initialStory]);
   return story;
 };
 export {

package/dist/client-c97d457f.js

@@ -0,0 +1 @@
+"use strict";const e=require("react"),t=require("./storyblok-js-1cafaa66.js");exports.useStoryblokState=(r=null,o={})=>{let[s,u]=e.useState(r);return"undefined"!=typeof window&&void 0!==window.storyblokRegisterEvent&&r?(e.useEffect((()=>{u(r),t.ue(s.id,(e=>u(e)),o)}),[r]),s):r};

package/dist/storyblok-react.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),o=require("./storyblok-js-1cafaa66.js"),t=require("./index-c2e3dd49.js"),r=require("./client-85627252.js");exports.RichTextResolver=o.y,exports.RichTextSchema=o.ie,exports.apiPlugin=o.ce,exports.loadStoryblokBridge=o.ge,exports.registerStoryblokBridge=o.ue,exports.renderRichText=o.de,exports.storyblokEditable=o.he,exports.useStoryblokBridge=o.ue,exports.StoryblokComponent=t.StoryblokComponent,exports.getComponent=t.getComponent,exports.getStoryblokApi=t.useStoryblokApi,exports.storyblokInit=t.storyblokInit,exports.useStoryblokApi=t.useStoryblokApi,exports.useStoryblokState=r.useStoryblokState,exports.useStoryblok=(r,s={},i={})=>{const n=t.useStoryblokApi();if(!n)return console.error("You can't use useStoryblok if you're not loading apiPlugin."),null;let[l,u]=e.useState({});const p="undefined"!=typeof window&&void 0!==window.storyblokRegisterEvent;return e.useEffect((()=>{(async()=>{const{data:e}=await n.get(`cdn/stories/${r}`,s);u(e.story)})()}),[r,s]),e.useEffect((()=>{p&&l.id&&o.ue(l.id,(e=>u(e)),i)}),[l]),l};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),o=require("./storyblok-js-1cafaa66.js"),t=require("./index-c2e3dd49.js"),r=require("./client-c97d457f.js");exports.RichTextResolver=o.y,exports.RichTextSchema=o.ie,exports.apiPlugin=o.ce,exports.loadStoryblokBridge=o.ge,exports.registerStoryblokBridge=o.ue,exports.renderRichText=o.de,exports.storyblokEditable=o.he,exports.useStoryblokBridge=o.ue,exports.StoryblokComponent=t.StoryblokComponent,exports.getComponent=t.getComponent,exports.getStoryblokApi=t.useStoryblokApi,exports.storyblokInit=t.storyblokInit,exports.useStoryblokApi=t.useStoryblokApi,exports.useStoryblokState=r.useStoryblokState,exports.useStoryblok=(r,s={},i={})=>{const n=t.useStoryblokApi();if(!n)return console.error("You can't use useStoryblok if you're not loading apiPlugin."),null;let[l,u]=e.useState({});const p="undefined"!=typeof window&&void 0!==window.storyblokRegisterEvent;return e.useEffect((()=>{!async function(){const{data:e}=await n.get(`cdn/stories/${r}`,s);u(e.story),p&&e.story.id&&o.ue(e.story.id,(e=>u(e)),i)}()}),[r,JSON.stringify(s)]),l};

package/dist/storyblok-react.mjs

@@ -3,7 +3,7 @@ import { u as ue } from "./storyblok-js-834d6ca5.mjs";
 import { y, i, c, g, d, h } from "./storyblok-js-834d6ca5.mjs";
 import { u as useStoryblokApi } from "./index-a23f03ba.mjs";
 import { S, g as g2, s } from "./index-a23f03ba.mjs";
-import { u } from "./client-7b1fd9f5.mjs";
+import { u } from "./client-1896280c.mjs";
 const useStoryblok = (slug, apiOptions = {}, bridgeOptions = {}) => {
   const storyblokApiInstance = useStoryblokApi();
   if (!storyblokApiInstance) {
@@ -14,25 +14,23 @@ const useStoryblok = (slug, apiOptions = {}, bridgeOptions = {}) => {
   }
   let [story, setStory] = useState({});
   const isBridgeEnable = typeof window !== "undefined" && typeof window.storyblokRegisterEvent !== "undefined";
-  const initStory = async () => {
-    const { data } = await storyblokApiInstance.get(
-      `cdn/stories/${slug}`,
-      apiOptions
-    );
-    setStory(data.story);
-  };
-  useEffect(() => {
-    initStory();
-  }, [slug, apiOptions]);
   useEffect(() => {
-    if (isBridgeEnable && story.id) {
-      ue(
-        story.id,
-        (story2) => setStory(story2),
-        bridgeOptions
+    async function initStory() {
+      const { data } = await storyblokApiInstance.get(
+        `cdn/stories/${slug}`,
+        apiOptions
       );
+      setStory(data.story);
+      if (isBridgeEnable && data.story.id) {
+        ue(
+          data.story.id,
+          (story2) => setStory(story2),
+          bridgeOptions
+        );
+      }
     }
-  }, [story]);
+    initStory();
+  }, [slug, JSON.stringify(apiOptions)]);
   return story;
 };
 export {

package/dist/storyblok-react4.js

@@ -1 +1 @@
-"use strict";"use client";const e=require("react"),t=require("./client-85627252.js"),r=require("./index-c2e3dd49.js");require("./storyblok-js-1cafaa66.js");module.exports=({story:o})=>(o=t.useStoryblokState(o),e.createElement(r.StoryblokComponent,{blok:o.content}));
+"use strict";"use client";const e=require("react"),r=require("./client-c97d457f.js"),t=require("./index-c2e3dd49.js");require("./storyblok-js-1cafaa66.js");const o=e.forwardRef((({story:o,...s},n)=>(o=r.useStoryblokState(o),e.createElement(t.StoryblokComponent,{ref:n,blok:o.content,...s}))));module.exports=o;

package/dist/storyblok-react4.mjs

@@ -1,12 +1,14 @@
 "use client";
-import React from "react";
-import { u as useStoryblokState } from "./client-7b1fd9f5.mjs";
+import React, { forwardRef } from "react";
+import { u as useStoryblokState } from "./client-1896280c.mjs";
 import { S as StoryblokComponent } from "./index-a23f03ba.mjs";
 import "./storyblok-js-834d6ca5.mjs";
-const StoryblokStory = ({ story }) => {
-  story = useStoryblokState(story);
-  return /* @__PURE__ */ React.createElement(StoryblokComponent, { blok: story.content });
-};
+const StoryblokStory = forwardRef(
+  ({ story, ...restProps }, ref) => {
+    story = useStoryblokState(story);
+    return /* @__PURE__ */ React.createElement(StoryblokComponent, { ref, blok: story.content, ...restProps });
+  }
+);
 export {
   StoryblokStory as default
 };

package/dist/types/story.d.ts

@@ -4,5 +4,5 @@ interface StoryblokStoryProps {
     story: ISbStoryData;
     [key: string]: unknown;
 }
-declare const StoryblokStory: ({ story }: StoryblokStoryProps) => React.JSX.Element;
+declare const StoryblokStory: React.ForwardRefExoticComponent<Omit<StoryblokStoryProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default StoryblokStory;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/react",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "SDK to integrate Storyblok into your project using React.",
   "main": "./dist/storyblok-react.js",
   "module": "./dist/storyblok-react.mjs",
@@ -52,17 +52,17 @@
     "@cypress/react": "^5.12.5",
     "@cypress/vite-dev-server": "^2.2.3",
     "@tsconfig/recommended": "^1.0.2",
-    "@types/react": "18.2.12",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@types/react": "18.2.13",
+    "@vitejs/plugin-react": "^4.0.1",
     "babel-jest": "^29.5.0",
     "cypress": "^9.7.0",
     "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest": "^27.2.2",
     "jest": "^29.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^2.0.0",
-    "terser": "^5.18.0",
+    "terser": "^5.18.1",
     "vite": "^4.1.4"
   },
   "peerDependencies": {

package/dist/client-85627252.js

@@ -1 +0,0 @@
-"use strict";const e=require("react"),t=require("./storyblok-js-1cafaa66.js");exports.useStoryblokState=(r=null,o={})=>{let[s,i]=e.useState(r);return"undefined"!=typeof window&&void 0!==window.storyblokRegisterEvent&&r?(t.ue(s.id,(e=>i(e)),o),s):r};