@storyblok/react - npm Package Compare versions

Comparing version 2.3.4 to 2.4.0

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),e=require("./storyblok-js.js"),o=require("./index2.js"),b=require("./client.js"),a=require("./storyblok-component.js"),d=(i,r={},t={})=>{const l=o.useStoryblokApi();if(!l)return console.error("You can't use useStoryblok if you're not loading apiPlugin."),null;let[u,n]=y.useState({});t.resolveRelations=t.resolveRelations??r.resolve_relations,t.resolveLinks=t.resolveLinks??r.resolve_links;const k=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u";return y.useEffect(()=>{async function c(){const{data:s}=await l.get(`cdn/stories/${i}`,r);n(s.story),k&&s.story.id&&e.registerStoryblokBridge(s.story.id,S=>n(S),t)}c()},[i,JSON.stringify(r)]),u};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.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.useStoryblokState=b.useStoryblokState;exports.StoryblokComponent=a;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=(n,r={},t={})=>{const s=o.useStoryblokApi();if(!s)return console.error("You can't use useStoryblok if you're not loading apiPlugin."),null;let[a,i]=y.useState({});t.resolveRelations=t.resolveRelations??r.resolve_relations,t.resolveLinks=t.resolveLinks??r.resolve_links;const b=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u";return y.useEffect(()=>{async function k(){const{data:l}=await s.get(`cdn/stories/${n}`,r);i(l.story),b&&l.story.id&&e.registerStoryblokBridge(l.story.id,u=>i(u),t)}k()},[n,JSON.stringify(r)]),a};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;

dist/index2.js

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

dist/rsc.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index2.js"),r=require("./story.js"),t=require("./bridge-loader.js"),i=require("./storyblok-component.js"),e=require("./storyblok-js.js");exports.getComponent=o.getComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.StoryblokStory=r;exports.BridgeLoader=t;exports.StoryblokComponent=i;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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index2.js"),t=require("./story.js"),r=require("./bridge-loader.js"),l=require("./storyblok-component.js"),e=require("./storyblok-js.js");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.StoryblokStory=t;exports.BridgeLoader=r;exports.StoryblokComponent=l;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;

dist/storyblok-component.js

@@ -1,1 +0,1 @@
-"use strict";const e=require("react"),p=require("./index2.js"),r=e.forwardRef(({blok:o,...n},l)=>{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 t=p.getComponent(o.component);return t?e.createElement(t,{ref:l,blok:o,...n}):e.createElement("div",null)});r.displayName="StoryblokComponent";module.exports=r;
+"use strict";const e=require("react"),o=require("./index2.js"),c=e.forwardRef(({blok:t,...n},a)=>{if(!t)return console.error("Please provide a 'blok' property to the StoryblokComponent"),e.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const r=o.getComponent(t.component);if(r)return e.createElement(r,{ref:a,blok:t,...n});if(o.getEnableFallbackComponent()){const l=o.getCustomFallbackComponent();return l?e.createElement(l,{blok:t,...n}):e.createElement(e.Fragment,null,e.createElement("p",null,"Component could not be found for blok"," ",e.createElement("strong",null,t.component),"! Is it configured correctly?"))}return e.createElement("div",null)});c.displayName="StoryblokComponent";module.exports=c;

dist/types/common/index.d.ts

@@ -6,2 +6,4 @@ /// <reference types="react" />
 export declare const getComponent: (componentKey: string) => false | import("react").ElementType<any>;
+export declare const getEnableFallbackComponent: () => boolean;
+export declare const getCustomFallbackComponent: () => import("react").ElementType<any>;
 export declare const storyblokInit: (pluginOptions?: SbReactSDKOptions) => void;
@@ -8,0 +10,0 @@ export { default as StoryblokComponent } from "./storyblok-component";

dist/types/types.d.ts

@@ -9,4 +9,6 @@ import React from "react";
     components?: SbReactComponentsMap;
+    enableFallbackComponent?: boolean;
+    customFallbackComponent?: React.ElementType;
 }
 export type TUseStoryblokState = <T = void>(initialStory: ISbStoryData<T> | null, bridgeOptions?: StoryblokBridgeConfigV2) => ISbStoryData<T> | null;
 export type { ISbConfig, ISbCache, ISbResult, ISbResponse, ISbError, ISbNode, ISbSchema, ThrottleFn, AsyncFn, ArrayFn, ISbContentMangmntAPI, ISbManagmentApiResult, ISbStories, ISbStory, ISbDimensions, ISbStoryData, ISbAlternateObject, ISbStoriesParams, ISbStoryParams, ISbRichtext, SbBlokData, SbBlokKeyDataTypes, SbRichTextOptions, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokComponentType, useStoryblokBridge, } from "@storyblok/js";

package.json

 {
   "name": "@storyblok/react",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "SDK to integrate Storyblok into your project using React.",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -66,2 +66,3 @@ <div align="center">
 import Teaser from "./components/Teaser";
+// import FallbackComponent from "./components/FallbackComponent";
 
@@ -71,4 +72,2 @@ storyblokInit({
   use: [apiPlugin],
-  // bridge: false,
-  // apiOptions: {},
   components: {
@@ -78,2 +77,7 @@ page: Page,
   },
+  // bridge: false,
+  // apiOptions: {},
+  // richText: {},
+  // enableFallbackComponent: false,
+  // customFallbackComponent: FallbackComponent,
 });
@@ -597,2 +601,6 @@ ```
 
+### Using fallback components
+
+By default, `@storyblok/react` returns an empty `<div>` if a component is not implemented. Setting `enableFallbackComponent` to `true` when calling `storyblokInit` bypasses that behavior, rendering a fallback component in the frontend instead. You can use the default fallback component, or create a custom React fallback component in your project and use it by setting `customFallbackComponent: [YourFallbackComponent]`.
+
 ## The Storyblok JavaScript SDK Ecosystem
@@ -599,0 +607,0 @@

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92073

increased by2.76%

Lines of code

1221

increased by1.58%

Number of lines in readme file

626

increased by1.29%

No dependency changes