@storyblok/react 2.1.7 → 2.1.8

package/README.md

@@ -425,6 +425,69 @@ export async function getStaticProps({ preview = false }) {
 
 **Check out the [code for the first part of our Next.js + Storyblok Ultimate Tutorial](https://github.com/storyblok/next.js-ultimate-tutorial/tree/part-1). Or you can also read on how to add Storyblok to a Next.js project in 5 minutes [here](https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes)**
 
+### 3. Adding components per page
+
+If you are using the pages router, you might want to load your components per page, instead of all in the `_app` file.
+
+If you load all components in the `_app` file with `storyblokInit` funciton, the JavaScript for all of those components will be loaded on every page, even on pages where most of these components might not be used.
+
+A better approach is to load these components on a per-page basis, reducing the JS bundle for that page, improving your load time, and SEO.
+
+Simply execute `storyblokInit` in the `_app` file as you did before, but omit the `components` object and the component imports like so:
+
+```diff
+import { storyblokInit, apiPlugin } from "@storyblok/react";
+
+/** Import your components */
+-import Page from "./components/Page";
+-import Teaser from "./components/Teaser";
+
+storyblokInit({
+  accessToken: "YOUR_ACCESS_TOKEN",
+  use: [apiPlugin],
+- components: {
+-   page: Page,
+-   teaser: Teaser,
+- },
+});
+```
+
+After that, use the `setComponent` method in each of your pages, to only load the components you need for that particular page:
+
+```diff
+import React from "react";
+import Teaser from "../components/teaser";
+import Grid from "../components/grid";
+import Page from "../components/page";
+import Feature from "../components/feature";
+
+import {
+  useStoryblokState,
+  StoryblokComponent,
++  setComponents,
+} from "@storyblok/react";
+
+export default function Home({
+  story: initialStory,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+
++  setComponents({
++    teaser: Teaser,
++    grid: Grid,
++    feature: Feature,
++    page: Page,
++  })
+  
+  const story = useStoryblokState(initialStory);
+
+  if (!story.content) {
+    return <div>Loading...</div>;
+  }
+
+  return <StoryblokComponent blok={story.content} />;
+}
+```
+
 ## Features and API
 
 You can **choose the features to use** when you initialize the plugin. In that way, you can improve Web Performance by optimizing your page load and save some bytes.

package/dist/client-0cdf4d8e.js

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

package/dist/{client-580f8a39.mjs → client-798eb80c.mjs}

@@ -6,10 +6,11 @@ const useStoryblokState = (initialStory = null, bridgeOptions = {}) => {
   if (!isBridgeEnable || !initialStory) {
     return initialStory;
   }
+  const id = story.internalId || story.id;
   useEffect(() => {
     setStory(initialStory);
     ue(
-      story.id,
+      id,
       (newStory) => setStory(newStory),
       bridgeOptions
     );

package/dist/{index-45a2f239.js → index-364d653e.js}

@@ -1 +1 @@
-"use strict";const o=require("./storyblok-js-5db94779.js"),e=require("react"),t=e.forwardRef((({blok:o,...t},r)=>{if(!o)return console.error("Please provide a 'blok' property to the StoryblokComponent"),e.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const n=l(o.component);return n?e.createElement(n,{ref:r,blok:o,...t}):e.createElement("div",null)}));t.displayName="StoryblokComponent";let r=null,n={};const l=o=>n[o]?n[o]:(console.error(`Component ${o} doesn't exist.`),!1);exports.StoryblokComponent=t,exports.getComponent=l,exports.storyblokInit=(e={})=>{const{storyblokApi:t}=o.pe(e);r=t,n=e.components},exports.useStoryblokApi=()=>(r||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),r);
+"use strict";const o=require("./storyblok-js-5db94779.js"),e=require("react"),t=e.forwardRef((({blok:o,...t},r)=>{if(!o)return console.error("Please provide a 'blok' property to the StoryblokComponent"),e.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const n=l(o.component);return n?e.createElement(n,{ref:r,blok:o,...t}):e.createElement("div",null)}));t.displayName="StoryblokComponent";let r=null,n={};const l=o=>n[o]?n[o]:(console.error(`Component ${o} doesn't exist.`),!1);exports.StoryblokComponent=t,exports.getComponent=l,exports.setComponents=o=>(n=o,n),exports.storyblokInit=(e={})=>{const{storyblokApi:t}=o.pe(e);r=t,n=e.components},exports.useStoryblokApi=()=>(r||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),r);

package/dist/{index-b8bd6e01.mjs → index-4af66cd0.mjs}

@@ -26,6 +26,10 @@ const useStoryblokApi = () => {
   }
   return storyblokApiInstance;
 };
+const setComponents = (newComponentsMap) => {
+  componentsMap = newComponentsMap;
+  return componentsMap;
+};
 const getComponent = (componentKey) => {
   if (!componentsMap[componentKey]) {
     console.error(`Component ${componentKey} doesn't exist.`);
@@ -40,7 +44,8 @@ const storyblokInit = (pluginOptions = {}) => {
 };
 export {
   StoryblokComponent as S,
+  storyblokInit as a,
   getComponent as g,
-  storyblokInit as s,
+  setComponents as s,
   useStoryblokApi as u
 };

package/dist/storyblok-react.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),o=require("./storyblok-js-5db94779.js"),t=require("./index-45a2f239.js"),r=require("./client-f55c03c7.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};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),o=require("./storyblok-js-5db94779.js"),t=require("./index-364d653e.js"),r=require("./client-0cdf4d8e.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.setComponents=t.setComponents,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,p]=e.useState({});const u="undefined"!=typeof window&&void 0!==window.storyblokRegisterEvent;return e.useEffect((()=>{!async function(){const{data:e}=await n.get(`cdn/stories/${r}`,s);p(e.story),u&&e.story.id&&o.ue(e.story.id,(e=>p(e)),i)}()}),[r,JSON.stringify(s)]),l};

package/dist/storyblok-react.mjs

@@ -1,9 +1,9 @@
 import { useState, useEffect } from "react";
 import { u as ue } from "./storyblok-js-5fd880b4.mjs";
 import { y, i, c, g, d, h } from "./storyblok-js-5fd880b4.mjs";
-import { u as useStoryblokApi } from "./index-b8bd6e01.mjs";
-import { S, g as g2, s } from "./index-b8bd6e01.mjs";
-import { u } from "./client-580f8a39.mjs";
+import { u as useStoryblokApi } from "./index-4af66cd0.mjs";
+import { S, g as g2, s, a } from "./index-4af66cd0.mjs";
+import { u } from "./client-798eb80c.mjs";
 const useStoryblok = (slug, apiOptions = {}, bridgeOptions = {}) => {
   const storyblokApiInstance = useStoryblokApi();
   if (!storyblokApiInstance) {
@@ -43,8 +43,9 @@ export {
   g as loadStoryblokBridge,
   ue as registerStoryblokBridge,
   d as renderRichText,
+  s as setComponents,
   h as storyblokEditable,
-  s as storyblokInit,
+  a as storyblokInit,
   useStoryblok,
   useStoryblokApi,
   ue as useStoryblokBridge,

package/dist/storyblok-react2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-45a2f239.js"),o=require("./storyblok-js-5db94779.js");require("react"),exports.StoryblokComponent=e.StoryblokComponent,exports.getComponent=e.getComponent,exports.getStoryblokApi=e.useStoryblokApi,exports.storyblokInit=e.storyblokInit,exports.useStoryblokApi=e.useStoryblokApi,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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-364d653e.js"),o=require("./storyblok-js-5db94779.js");require("react"),exports.StoryblokComponent=e.StoryblokComponent,exports.getComponent=e.getComponent,exports.getStoryblokApi=e.useStoryblokApi,exports.setComponents=e.setComponents,exports.storyblokInit=e.storyblokInit,exports.useStoryblokApi=e.useStoryblokApi,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;

package/dist/storyblok-react2.mjs

@@ -1,4 +1,4 @@
-import { S, g, u, s, u as u2 } from "./index-b8bd6e01.mjs";
+import { S, g, u, s, a, u as u2 } from "./index-4af66cd0.mjs";
 import { y, i, c, g as g2, u as u3, d, h, u as u4 } from "./storyblok-js-5fd880b4.mjs";
 import "react";
 export {
@@ -11,8 +11,9 @@ export {
   g2 as loadStoryblokBridge,
   u3 as registerStoryblokBridge,
   d as renderRichText,
+  s as setComponents,
   h as storyblokEditable,
-  s as storyblokInit,
+  a as storyblokInit,
   u2 as useStoryblokApi,
   u4 as useStoryblokBridge
 };

package/dist/storyblok-react4.js

@@ -1 +1 @@
-"use strict";"use client";const e=require("react"),r=require("./client-f55c03c7.js"),t=require("./index-45a2f239.js");require("./storyblok-js-5db94779.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;
+"use strict";"use client";const e=require("react"),t=require("./client-0cdf4d8e.js"),r=require("./index-364d653e.js");require("./storyblok-js-5db94779.js");const o=e.forwardRef((({story:o,...n},s)=>("string"==typeof o.content&&(o.content=JSON.parse(o.content)),o=t.useStoryblokState(o),e.createElement(r.StoryblokComponent,{ref:s,blok:o.content,...n}))));module.exports=o;

package/dist/storyblok-react4.mjs

@@ -1,10 +1,13 @@
 "use client";
 import React, { forwardRef } from "react";
-import { u as useStoryblokState } from "./client-580f8a39.mjs";
-import { S as StoryblokComponent } from "./index-b8bd6e01.mjs";
+import { u as useStoryblokState } from "./client-798eb80c.mjs";
+import { S as StoryblokComponent } from "./index-4af66cd0.mjs";
 import "./storyblok-js-5fd880b4.mjs";
 const StoryblokStory = forwardRef(
   ({ story, ...restProps }, ref) => {
+    if (typeof story.content === "string") {
+      story.content = JSON.parse(story.content);
+    }
     story = useStoryblokState(story);
     return /* @__PURE__ */ React.createElement(StoryblokComponent, { ref, blok: story.content, ...restProps });
   }

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { SbReactSDKOptions, StoryblokClient } from "../types";
+import { 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>;
 export declare const storyblokInit: (pluginOptions?: SbReactSDKOptions) => void;
 export { default as StoryblokComponent } from "./storyblok-component";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/react",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "SDK to integrate Storyblok into your project using React.",
   "main": "./dist/storyblok-react.js",
   "module": "./dist/storyblok-react.mjs",
@@ -47,8 +47,8 @@
     "@storyblok/js": "^2.2.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/core": "^7.22.6",
+    "@babel/preset-env": "^7.22.6",
     "@cypress/react": "^5.12.5",
     "@cypress/vite-dev-server": "^2.2.3",
     "@tsconfig/recommended": "^1.0.2",
@@ -58,11 +58,11 @@
     "cypress": "^9.7.0",
     "eslint-plugin-cypress": "^2.13.3",
     "eslint-plugin-jest": "^27.2.2",
-    "jest": "^29.5.0",
+    "jest": "^29.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^2.0.0",
-    "terser": "^5.18.1",
+    "terser": "^5.18.2",
     "vite": "^4.1.4"
   },
   "peerDependencies": {

package/dist/client-f55c03c7.js

@@ -1 +0,0 @@
-"use strict";const e=require("react"),t=require("./storyblok-js-5db94779.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};