@storyblok/react 2.4.4 → 2.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +4 -0
  2. package/dist/rsc.js +1 -1
  3. package/dist/rsc.mjs +13 -12
  4. package/dist/storyblok-js.js +1 -1
  5. package/dist/storyblok-js.mjs +2 -2
  6. package/dist/types/rsc/index.d.ts +1 -0
  7. package/package.json +6 -6
package/README.md CHANGED
@@ -278,6 +278,8 @@ export async function fetchData() {
278
278
  `StoryblokStory` keeps the state for thet story behind the scenes and uses `StoryblokComponent` to render the route components dynamically, using the list of components loaded during the initialization inside the `storyblokInit` function. You can use the `StoryblokComponent` inside the components to render the nested components dynamically. You can also pass bridge options to `StoryblokStory` using the prop `bridgeOptions`.
279
279
 
280
280
  ```js
281
+ const bridgeOptions = { resolveRelations: ["article.author"] };
282
+
281
283
  <StoryblokStory story={data.story} bridgeOptions={bridgeOptions} />
282
284
  ```
283
285
 
@@ -314,6 +316,8 @@ storyblokInit({
314
316
  });
315
317
 
316
318
  export default RootLayout({ children }) =>{
319
+ const bridgeOptions = { resolveRelations: ["article.author"] };
320
+
317
321
  return (
318
322
  <html lang="en">
319
323
  <body>{children}</body>
package/dist/rsc.js CHANGED
@@ -1 +1 @@
1
- "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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index2.js"),r=require("./story.js"),t=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=r;exports.BridgeLoader=t;exports.StoryblokBridgeLoader=t;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;
package/dist/rsc.mjs CHANGED
@@ -1,25 +1,26 @@
1
1
  import { getComponent as t, getCustomFallbackComponent as r, getEnableFallbackComponent as l, useStoryblokApi as a, setComponents as i, storyblokInit as s, useStoryblokApi as b } from "./index2.mjs";
2
- import { default as p } from "./story.mjs";
3
- import { default as d } from "./bridge-loader.mjs";
2
+ import { default as k } from "./story.mjs";
3
+ import { default as p, default as g } from "./bridge-loader.mjs";
4
4
  import { default as m } from "./storyblok-component.mjs";
5
- import { RichTextResolver as S, RichTextSchema as f, apiPlugin as u, loadStoryblokBridge as x, registerStoryblokBridge as c, renderRichText as C, storyblokEditable as B, registerStoryblokBridge as h } from "./storyblok-js.mjs";
5
+ import { RichTextResolver as f, RichTextSchema as u, apiPlugin as x, loadStoryblokBridge as c, registerStoryblokBridge as B, renderRichText as C, storyblokEditable as h, registerStoryblokBridge as R } from "./storyblok-js.mjs";
6
6
  export {
7
- d as BridgeLoader,
8
- S as RichTextResolver,
9
- f as RichTextSchema,
7
+ p as BridgeLoader,
8
+ f as RichTextResolver,
9
+ u as RichTextSchema,
10
+ g as StoryblokBridgeLoader,
10
11
  m as StoryblokComponent,
11
- p as StoryblokStory,
12
- u as apiPlugin,
12
+ k as StoryblokStory,
13
+ x as apiPlugin,
13
14
  t as getComponent,
14
15
  r as getCustomFallbackComponent,
15
16
  l as getEnableFallbackComponent,
16
17
  a as getStoryblokApi,
17
- x as loadStoryblokBridge,
18
- c as registerStoryblokBridge,
18
+ c as loadStoryblokBridge,
19
+ B as registerStoryblokBridge,
19
20
  C as renderRichText,
20
21
  i as setComponents,
21
- B as storyblokEditable,
22
+ h as storyblokEditable,
22
23
  s as storyblokInit,
23
24
  b as useStoryblokApi,
24
- h as useStoryblokBridge
25
+ R as useStoryblokBridge
25
26
  };
package/dist/storyblok-js.js CHANGED
@@ -21,4 +21,4 @@
21
21
  }
22
22
  ],
23
23
  type: 'doc'
24
- }`),""}optimizeImages(e,t){let s=0,r=0,o="",n="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(o+=`width="${t.width}" `,s=t.width),typeof t.height=="number"&&t.height>0&&(o+=`height="${t.height}" `,r=t.height),(t.loading==="lazy"||t.loading==="eager")&&(o+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(o+=`class="${t.class}" `),t.filters&&(typeof t.filters.blur=="number"&&t.filters.blur>=0&&t.filters.blur<=100&&(n+=`:blur(${t.filters.blur})`),typeof t.filters.brightness=="number"&&t.filters.brightness>=-100&&t.filters.brightness<=100&&(n+=`:brightness(${t.filters.brightness})`),t.filters.fill&&(t.filters.fill.match(/[0-9A-Fa-f]{6}/g)||t.filters.fill==="transparent")&&(n+=`:fill(${t.filters.fill})`),t.filters.format&&["webp","png","jpeg"].includes(t.filters.format)&&(n+=`:format(${t.filters.format})`),typeof t.filters.grayscale=="boolean"&&t.filters.grayscale&&(n+=":grayscale()"),typeof t.filters.quality=="number"&&t.filters.quality>=0&&t.filters.quality<=100&&(n+=`:quality(${t.filters.quality})`),t.filters.rotate&&[90,180,270].includes(t.filters.rotate)&&(n+=`:rotate(${t.filters.rotate})`),n.length>0&&(n="/filters"+n))),o.length>0&&(e=e.replace(/<img/g,`<img ${o.trim()}`));const c=s>0||r>0||n.length>0?`${s}x${r}${n}`:"";return e=e.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${c}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,a=>{var l,u;const p=a.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(p&&p.length>0){const d={srcset:(l=t.srcset)==null?void 0:l.map(g=>{if(typeof g=="number")return`//${p}/m/${g}x0${n} ${g}w`;if(typeof g=="object"&&g.length===2){let v=0,T=0;return typeof g[0]=="number"&&(v=g[0]),typeof g[1]=="number"&&(T=g[1]),`//${p}/m/${v}x${T}${n} ${v}w`}}).join(", "),sizes:(u=t.sizes)==null?void 0:u.map(g=>g).join(", ")};let k="";return d.srcset&&(k+=`srcset="${d.srcset}" `),d.sizes&&(k+=`sizes="${d.sizes}" `),a.replace(/<img/g,`<img ${k.trim()}`)}return a})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(r=>{const o=this.getMatchingMark(r);o&&o.tag!==""&&t.push(this.renderOpeningTag(o.tag))});const s=this.getMatchingNode(e);return s&&s.tag&&t.push(this.renderOpeningTag(s.tag)),e.content?e.content.forEach(r=>{t.push(this.renderNode(r))}):e.text?t.push(ce(e.text)):s&&s.singleTag?t.push(this.renderTag(s.singleTag," /")):s&&s.html?t.push(s.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),s&&s.tag&&t.push(this.renderClosingTag(s.tag)),e.marks&&e.marks.slice(0).reverse().forEach(r=>{const o=this.getMatchingMark(r);o&&o.tag!==""&&t.push(this.renderClosingTag(o.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(s=>{if(s.constructor===String)return`<${s}${t}>`;{let r=`<${s.tag}`;if(s.attrs)for(const o in s.attrs){const n=s.attrs[o];n!==null&&(r+=` ${o}="${n}"`)}return`${r}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}renderEmoji(e){if(e.attrs.emoji)return e.attrs.emoji;const t=[{tag:"img",attrs:{src:e.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(t," /")}}class he{constructor(e){h(this,"baseURL"),h(this,"timeout"),h(this,"headers"),h(this,"responseInterceptor"),h(this,"fetch"),h(this,"ejectInterceptor"),h(this,"url"),h(this,"parameters"),this.baseURL=e.baseURL,this.headers=e.headers||new Headers,this.timeout=e!=null&&e.timeout?e.timeout*1e3:0,this.responseInterceptor=e.responseInterceptor,this.fetch=(...t)=>e.fetch?e.fetch(...t):fetch(...t),this.ejectInterceptor=!1,this.url="",this.parameters={}}get(e,t){return this.url=e,this.parameters=t,this._methodHandler("get")}post(e,t){return this.url=e,this.parameters=t,this._methodHandler("post")}put(e,t){return this.url=e,this.parameters=t,this._methodHandler("put")}delete(e,t){return this.url=e,this.parameters=t,this._methodHandler("delete")}async _responseHandler(e){const t=[],s={data:{},headers:{},status:0,statusText:""};e.status!==204&&await e.json().then(r=>{s.data=r});for(const r of e.headers.entries())t[r[0]]=r[1];return s.headers={...t},s.status=e.status,s.statusText=e.statusText,s}async _methodHandler(e){let t=`${this.baseURL}${this.url}`,s=null;if(e==="get"){const a=new b;t=`${this.baseURL}${this.url}?${a.stringify(this.parameters)}`}else s=JSON.stringify(this.parameters);const r=new URL(t),o=new AbortController,{signal:n}=o;let c;this.timeout&&(c=setTimeout(()=>o.abort(),this.timeout));try{const a=await this.fetch(`${r}`,{method:e,headers:this.headers,body:s,signal:n});this.timeout&&clearTimeout(c);const l=await this._responseHandler(a);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(l)):this._statusHandler(l)}catch(a){return{message:a}}}eject(){this.ejectInterceptor=!0}_statusHandler(e){const t=/20[0-6]/g;return new Promise(s=>{if(t.test(`${e.status}`))return s(e);const r={message:e.statusText,status:e.status,response:Array.isArray(e.data)?e.data[0]:e.data.error||e.data.slug};throw new Error(JSON.stringify(r))})}}const x="SB-Agent",w={defaultAgentName:"SB-JS-CLIENT",defaultAgentVersion:"SB-Agent-Version",packageVersion:"5.14.2"};let y={};const f={};class ue{constructor(e,t){h(this,"client"),h(this,"maxRetries"),h(this,"throttle"),h(this,"accessToken"),h(this,"cache"),h(this,"helpers"),h(this,"resolveCounter"),h(this,"relations"),h(this,"links"),h(this,"richTextResolver"),h(this,"resolveNestedRelations");let s=e.endpoint||t;if(!s){const n=new b().getRegionURL,c=e.https===!1?"http":"https";e.oauthToken?s=`${c}://${n(e.region)}/v1`:s=`${c}://${n(e.region)}/v2`}const r=new Headers;if(r.set("Content-Type","application/json"),r.set("Accept","application/json"),e.headers)for(const n in e.headers)r.set(n,e.headers[n]);r.has(x)||(r.set(x,w.defaultAgentName),r.set(w.defaultAgentVersion,w.packageVersion));let o=5;e.oauthToken&&(r.set("Authorization",e.oauthToken),o=3),e.rateLimit&&(o=e.rateLimit),e.richTextSchema?this.richTextResolver=new m(e.richTextSchema):this.richTextResolver=new m,e.componentResolver&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries||5,this.throttle=M(this.throttledRequest,o,1e3),this.accessToken=e.accessToken||"",this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.helpers=new b,this.resolveCounter=0,this.resolveNestedRelations=e.resolveNestedRelations||!0,this.client=new he({baseURL:s,timeout:e.timeout||0,headers:r,responseInterceptor:e.responseInterceptor,fetch:e.fetch})}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let s="";return t.attrs.body&&t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})}parseParams(e){return e.version||(e.version="published"),e.token||(e.token=this.getToken()),e.cv||(e.cv=f[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),e}factoryParamOptions(e,t){return this.helpers.isCDNUrl(e)?this.parseParams(t):t}makeRequest(e,t,s,r){const o=this.factoryParamOptions(e,this.helpers.getOptionsPage(t,s,r));return this.cacheResponse(e,o)}get(e,t){t||(t={});const s=`/${e}`,r=this.factoryParamOptions(s,t);return this.cacheResponse(s,r)}async getAll(e,t,s){const r=(t==null?void 0:t.per_page)||25,o=`/${e}`,n=o.split("/"),c=s||n[n.length-1],a=1,l=await this.makeRequest(o,t,r,a),u=l.total?Math.ceil(l.total/r):1,p=await this.helpers.asyncMap(this.helpers.range(a,u),d=>this.makeRequest(o,t,r,d+1));return this.helpers.flatMap([l,...p],d=>Object.values(d.data[c]))}post(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("post",s,t))}put(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("put",s,t))}delete(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("delete",s,t))}getStories(e){return this.get("cdn/stories",e)}getStory(e,t){return this.get(`cdn/stories/${e}`,t)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t,s){const r=e[t];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[s][r.id]?r.story=this._cleanCopy(this.links[s][r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[s][r.uuid]&&(r.story=this._cleanCopy(this.links[s][r.uuid]))}_insertRelations(e,t,s,r){if(s.indexOf(`${e.component}.${t}`)>-1){if(typeof e[t]=="string")this.relations[r][e[t]]&&(e[t]=this._cleanCopy(this.relations[r][e[t]]));else if(e[t]&&e[t].constructor===Array){const o=[];e[t].forEach(n=>{this.relations[r][n]&&o.push(this._cleanCopy(this.relations[r][n]))}),e[t]=o}}}iterateTree(e,t,s){const r=o=>{if(o!=null){if(o.constructor===Array)for(let n=0;n<o.length;n++)r(o[n]);else if(o.constructor===Object){if(o._stopResolving)return;for(const n in o)(o.component&&o._uid||o.type==="link")&&(this._insertRelations(o,n,t,s),this._insertLinks(o,n,s)),r(o[n])}}};r(e.content)}async resolveLinks(e,t,s){let r=[];if(e.link_uuids){const o=e.link_uuids.length,n=[],c=50;for(let a=0;a<o;a+=c){const l=Math.min(o,a+c);n.push(e.link_uuids.slice(a,l))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:c,language:t.language,version:t.version,by_uuids:n[a].join(",")})).data.stories.forEach(l=>{r.push(l)})}else r=e.links;r.forEach(o=>{this.links[s][o.uuid]={...o,_stopResolving:!0}})}async resolveRelations(e,t,s){let r=[];if(e.rel_uuids){const o=e.rel_uuids.length,n=[],c=50;for(let a=0;a<o;a+=c){const l=Math.min(o,a+c);n.push(e.rel_uuids.slice(a,l))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:c,language:t.language,version:t.version,by_uuids:n[a].join(",")})).data.stories.forEach(l=>{r.push(l)})}else r=e.rels;r&&r.length>0&&r.forEach(o=>{this.relations[s][o.uuid]={...o,_stopResolving:!0}})}async resolveStories(e,t,s){var r,o;let n=[];if(this.links[s]={},this.relations[s]={},typeof t.resolve_relations<"u"&&t.resolve_relations.length>0&&(typeof t.resolve_relations=="string"&&(n=t.resolve_relations.split(",")),await this.resolveRelations(e,t,s)),t.resolve_links&&["1","story","url","link"].indexOf(t.resolve_links)>-1&&((r=e.links)!=null&&r.length||(o=e.link_uuids)!=null&&o.length)&&await this.resolveLinks(e,t,s),this.resolveNestedRelations)for(const c in this.relations[s])this.iterateTree(this.relations[s][c],n,s);e.story?this.iterateTree(e.story,n,s):e.stories.forEach(c=>{this.iterateTree(c,n,s)}),delete this.links[s],delete this.relations[s]}async cacheResponse(e,t,s){(typeof s>"u"||!s)&&(s=0);const r=this.helpers.stringify({url:e,params:t}),o=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const n=await o.get(r);if(n)return Promise.resolve(n)}return new Promise(async(n,c)=>{var a;try{const l=await this.throttle("get",e,t);if(l.status!==200)return c(l);let u={data:l.data,headers:l.headers};if((a=l.headers)!=null&&a["per-page"]&&(u=Object.assign({},u,{perPage:l.headers["per-page"]?parseInt(l.headers["per-page"]):0,total:l.headers["per-page"]?parseInt(l.headers.total):0})),u.data.story||u.data.stories){const p=this.resolveCounter=++this.resolveCounter%1e3;await this.resolveStories(u.data,t,`${p}`)}return t.version==="published"&&e!="/cdn/spaces/me"&&await o.set(r,u),u.data.cv&&t.token&&(t.version=="draft"&&f[t.token]!=u.data.cv&&await this.flushCache(),f[t.token]=u.data.cv),n(u)}catch(l){if(l.response&&l.response.status===429&&(s=s?s+1:0,s<this.maxRetries))return console.log(`Hit rate limit. Retrying in ${s} seconds.`),await this.helpers.delay(1e3*s),this.cacheResponse(e,t,s).then(n).catch(c);c(l.message)}})}throttledRequest(e,t,s){return this.client[e](t,s)}cacheVersions(){return f}cacheVersion(){return f[this.accessToken]}setCacheVersion(e){this.accessToken&&(f[this.accessToken]=e)}cacheProvider(){switch(this.cache.type){case"memory":return{get(e){return Promise.resolve(y[e])},getAll(){return Promise.resolve(y)},set(e,t){return y[e]=t,Promise.resolve(void 0)},flush(){return y={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve(void 0)},getAll(){return Promise.resolve(void 0)},set(){return Promise.resolve(void 0)},flush(){return Promise.resolve(void 0)}}}}async flushCache(){return await this.cacheProvider().flush(),this}}const pe=(i={})=>{const{apiOptions:e}=i;if(!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new ue(e)}},ge=i=>{if(typeof i!="object"||typeof i._editable>"u")return{};const e=JSON.parse(i._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let $;const P="https://app.storyblok.com/f/storyblok-v2-latest.js",I=(i,e,t={})=>{var s;const r=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",o=+new URL((s=window.location)==null?void 0:s.href).searchParams.get("_storyblok")===i;if(!(!r||!o)){if(!i){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],n=>{n.action==="input"&&n.story.id===i?e(n.story):(n.action==="change"||n.action==="published")&&n.storyId===i&&window.location.reload()})})}},de=(i={})=>{var e,t;const{bridge:s,accessToken:r,use:o=[],apiOptions:n={},richText:c={}}=i;n.accessToken=n.accessToken||r;const a={bridge:s,apiOptions:n};let l={};o.forEach(p=>{l={...l,...p(a)}});const u=!(typeof window>"u")&&((t=(e=window.location)==null?void 0:e.search)==null?void 0:t.includes("_storyblok_tk"));return s!==!1&&u&&E(P),$=new m(c.schema),c.resolver&&O($,c.resolver),l},O=(i,e)=>{i.addNode("blok",t=>{let s="";return t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})},C=i=>!i||!(i!=null&&i.content.some(e=>e.content||e.type==="blok"||e.type==="horizontal_rule")),fe=(i,e,t)=>{let s=t||$;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return C(i)?"":(e&&(s=new m(e.schema),e.resolver&&O(s,e.resolver)),s.render(i))},me=()=>E(P);exports.RichTextResolver=m;exports.RichTextSchema=S;exports.apiPlugin=pe;exports.isRichTextEmpty=C;exports.loadStoryblokBridge=me;exports.registerStoryblokBridge=I;exports.renderRichText=fe;exports.storyblokEditable=ge;exports.storyblokInit=de;exports.useStoryblokBridge=I;
24
+ }`),""}optimizeImages(e,t){let s=0,r=0,o="",n="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(o+=`width="${t.width}" `,s=t.width),typeof t.height=="number"&&t.height>0&&(o+=`height="${t.height}" `,r=t.height),(t.loading==="lazy"||t.loading==="eager")&&(o+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(o+=`class="${t.class}" `),t.filters&&(typeof t.filters.blur=="number"&&t.filters.blur>=0&&t.filters.blur<=100&&(n+=`:blur(${t.filters.blur})`),typeof t.filters.brightness=="number"&&t.filters.brightness>=-100&&t.filters.brightness<=100&&(n+=`:brightness(${t.filters.brightness})`),t.filters.fill&&(t.filters.fill.match(/[0-9A-Fa-f]{6}/g)||t.filters.fill==="transparent")&&(n+=`:fill(${t.filters.fill})`),t.filters.format&&["webp","png","jpeg"].includes(t.filters.format)&&(n+=`:format(${t.filters.format})`),typeof t.filters.grayscale=="boolean"&&t.filters.grayscale&&(n+=":grayscale()"),typeof t.filters.quality=="number"&&t.filters.quality>=0&&t.filters.quality<=100&&(n+=`:quality(${t.filters.quality})`),t.filters.rotate&&[90,180,270].includes(t.filters.rotate)&&(n+=`:rotate(${t.filters.rotate})`),n.length>0&&(n="/filters"+n))),o.length>0&&(e=e.replace(/<img/g,`<img ${o.trim()}`));const c=s>0||r>0||n.length>0?`${s}x${r}${n}`:"";return e=e.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${c}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,a=>{var l,u;const p=a.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(p&&p.length>0){const d={srcset:(l=t.srcset)==null?void 0:l.map(g=>{if(typeof g=="number")return`//${p}/m/${g}x0${n} ${g}w`;if(typeof g=="object"&&g.length===2){let v=0,T=0;return typeof g[0]=="number"&&(v=g[0]),typeof g[1]=="number"&&(T=g[1]),`//${p}/m/${v}x${T}${n} ${v}w`}}).join(", "),sizes:(u=t.sizes)==null?void 0:u.map(g=>g).join(", ")};let k="";return d.srcset&&(k+=`srcset="${d.srcset}" `),d.sizes&&(k+=`sizes="${d.sizes}" `),a.replace(/<img/g,`<img ${k.trim()}`)}return a})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(r=>{const o=this.getMatchingMark(r);o&&o.tag!==""&&t.push(this.renderOpeningTag(o.tag))});const s=this.getMatchingNode(e);return s&&s.tag&&t.push(this.renderOpeningTag(s.tag)),e.content?e.content.forEach(r=>{t.push(this.renderNode(r))}):e.text?t.push(ce(e.text)):s&&s.singleTag?t.push(this.renderTag(s.singleTag," /")):s&&s.html?t.push(s.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),s&&s.tag&&t.push(this.renderClosingTag(s.tag)),e.marks&&e.marks.slice(0).reverse().forEach(r=>{const o=this.getMatchingMark(r);o&&o.tag!==""&&t.push(this.renderClosingTag(o.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(s=>{if(s.constructor===String)return`<${s}${t}>`;{let r=`<${s.tag}`;if(s.attrs)for(const o in s.attrs){const n=s.attrs[o];n!==null&&(r+=` ${o}="${n}"`)}return`${r}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}renderEmoji(e){if(e.attrs.emoji)return e.attrs.emoji;const t=[{tag:"img",attrs:{src:e.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(t," /")}}class he{constructor(e){h(this,"baseURL"),h(this,"timeout"),h(this,"headers"),h(this,"responseInterceptor"),h(this,"fetch"),h(this,"ejectInterceptor"),h(this,"url"),h(this,"parameters"),this.baseURL=e.baseURL,this.headers=e.headers||new Headers,this.timeout=e!=null&&e.timeout?e.timeout*1e3:0,this.responseInterceptor=e.responseInterceptor,this.fetch=(...t)=>e.fetch?e.fetch(...t):fetch(...t),this.ejectInterceptor=!1,this.url="",this.parameters={}}get(e,t){return this.url=e,this.parameters=t,this._methodHandler("get")}post(e,t){return this.url=e,this.parameters=t,this._methodHandler("post")}put(e,t){return this.url=e,this.parameters=t,this._methodHandler("put")}delete(e,t){return this.url=e,this.parameters=t,this._methodHandler("delete")}async _responseHandler(e){const t=[],s={data:{},headers:{},status:0,statusText:""};e.status!==204&&await e.json().then(r=>{s.data=r});for(const r of e.headers.entries())t[r[0]]=r[1];return s.headers={...t},s.status=e.status,s.statusText=e.statusText,s}async _methodHandler(e){let t=`${this.baseURL}${this.url}`,s=null;if(e==="get"){const a=new b;t=`${this.baseURL}${this.url}?${a.stringify(this.parameters)}`}else s=JSON.stringify(this.parameters);const r=new URL(t),o=new AbortController,{signal:n}=o;let c;this.timeout&&(c=setTimeout(()=>o.abort(),this.timeout));try{const a=await this.fetch(`${r}`,{method:e,headers:this.headers,body:s,signal:n});this.timeout&&clearTimeout(c);const l=await this._responseHandler(a);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(l)):this._statusHandler(l)}catch(a){return{message:a}}}eject(){this.ejectInterceptor=!0}_statusHandler(e){const t=/20[0-6]/g;return new Promise(s=>{if(t.test(`${e.status}`))return s(e);const r={message:e.statusText,status:e.status,response:Array.isArray(e.data)?e.data[0]:e.data.error||e.data.slug};throw new Error(JSON.stringify(r))})}}const x="SB-Agent",w={defaultAgentName:"SB-JS-CLIENT",defaultAgentVersion:"SB-Agent-Version",packageVersion:"5.14.2"};let y={};const f={};class ue{constructor(e,t){h(this,"client"),h(this,"maxRetries"),h(this,"throttle"),h(this,"accessToken"),h(this,"cache"),h(this,"helpers"),h(this,"resolveCounter"),h(this,"relations"),h(this,"links"),h(this,"richTextResolver"),h(this,"resolveNestedRelations");let s=e.endpoint||t;if(!s){const n=new b().getRegionURL,c=e.https===!1?"http":"https";e.oauthToken?s=`${c}://${n(e.region)}/v1`:s=`${c}://${n(e.region)}/v2`}const r=new Headers;if(r.set("Content-Type","application/json"),r.set("Accept","application/json"),e.headers)for(const n in e.headers)r.set(n,e.headers[n]);r.has(x)||(r.set(x,w.defaultAgentName),r.set(w.defaultAgentVersion,w.packageVersion));let o=5;e.oauthToken&&(r.set("Authorization",e.oauthToken),o=3),e.rateLimit&&(o=e.rateLimit),e.richTextSchema?this.richTextResolver=new m(e.richTextSchema):this.richTextResolver=new m,e.componentResolver&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries||5,this.throttle=M(this.throttledRequest,o,1e3),this.accessToken=e.accessToken||"",this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.helpers=new b,this.resolveCounter=0,this.resolveNestedRelations=e.resolveNestedRelations||!0,this.client=new he({baseURL:s,timeout:e.timeout||0,headers:r,responseInterceptor:e.responseInterceptor,fetch:e.fetch})}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let s="";return t.attrs.body&&t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})}parseParams(e){return e.version||(e.version="published"),e.token||(e.token=this.getToken()),e.cv||(e.cv=f[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),e}factoryParamOptions(e,t){return this.helpers.isCDNUrl(e)?this.parseParams(t):t}makeRequest(e,t,s,r){const o=this.factoryParamOptions(e,this.helpers.getOptionsPage(t,s,r));return this.cacheResponse(e,o)}get(e,t){t||(t={});const s=`/${e}`,r=this.factoryParamOptions(s,t);return this.cacheResponse(s,r)}async getAll(e,t,s){const r=(t==null?void 0:t.per_page)||25,o=`/${e}`,n=o.split("/"),c=s||n[n.length-1],a=1,l=await this.makeRequest(o,t,r,a),u=l.total?Math.ceil(l.total/r):1,p=await this.helpers.asyncMap(this.helpers.range(a,u),d=>this.makeRequest(o,t,r,d+1));return this.helpers.flatMap([l,...p],d=>Object.values(d.data[c]))}post(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("post",s,t))}put(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("put",s,t))}delete(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("delete",s,t))}getStories(e){return this.get("cdn/stories",e)}getStory(e,t){return this.get(`cdn/stories/${e}`,t)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t,s){const r=e[t];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[s][r.id]?r.story=this._cleanCopy(this.links[s][r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[s][r.uuid]&&(r.story=this._cleanCopy(this.links[s][r.uuid]))}_insertRelations(e,t,s,r){if(s.indexOf(`${e.component}.${t}`)>-1){if(typeof e[t]=="string")this.relations[r][e[t]]&&(e[t]=this._cleanCopy(this.relations[r][e[t]]));else if(e[t]&&e[t].constructor===Array){const o=[];e[t].forEach(n=>{this.relations[r][n]&&o.push(this._cleanCopy(this.relations[r][n]))}),e[t]=o}}}iterateTree(e,t,s){const r=o=>{if(o!=null){if(o.constructor===Array)for(let n=0;n<o.length;n++)r(o[n]);else if(o.constructor===Object){if(o._stopResolving)return;for(const n in o)(o.component&&o._uid||o.type==="link")&&(this._insertRelations(o,n,t,s),this._insertLinks(o,n,s)),r(o[n])}}};r(e.content)}async resolveLinks(e,t,s){let r=[];if(e.link_uuids){const o=e.link_uuids.length,n=[],c=50;for(let a=0;a<o;a+=c){const l=Math.min(o,a+c);n.push(e.link_uuids.slice(a,l))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:c,language:t.language,version:t.version,by_uuids:n[a].join(",")})).data.stories.forEach(l=>{r.push(l)})}else r=e.links;r.forEach(o=>{this.links[s][o.uuid]={...o,_stopResolving:!0}})}async resolveRelations(e,t,s){let r=[];if(e.rel_uuids){const o=e.rel_uuids.length,n=[],c=50;for(let a=0;a<o;a+=c){const l=Math.min(o,a+c);n.push(e.rel_uuids.slice(a,l))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:c,language:t.language,version:t.version,by_uuids:n[a].join(",")})).data.stories.forEach(l=>{r.push(l)})}else r=e.rels;r&&r.length>0&&r.forEach(o=>{this.relations[s][o.uuid]={...o,_stopResolving:!0}})}async resolveStories(e,t,s){var r,o;let n=[];if(this.links[s]={},this.relations[s]={},typeof t.resolve_relations<"u"&&t.resolve_relations.length>0&&(typeof t.resolve_relations=="string"&&(n=t.resolve_relations.split(",")),await this.resolveRelations(e,t,s)),t.resolve_links&&["1","story","url","link"].indexOf(t.resolve_links)>-1&&((r=e.links)!=null&&r.length||(o=e.link_uuids)!=null&&o.length)&&await this.resolveLinks(e,t,s),this.resolveNestedRelations)for(const c in this.relations[s])this.iterateTree(this.relations[s][c],n,s);e.story?this.iterateTree(e.story,n,s):e.stories.forEach(c=>{this.iterateTree(c,n,s)}),delete this.links[s],delete this.relations[s]}async cacheResponse(e,t,s){(typeof s>"u"||!s)&&(s=0);const r=this.helpers.stringify({url:e,params:t}),o=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const n=await o.get(r);if(n)return Promise.resolve(n)}return new Promise(async(n,c)=>{var a;try{const l=await this.throttle("get",e,t);if(l.status!==200)return c(l);let u={data:l.data,headers:l.headers};if((a=l.headers)!=null&&a["per-page"]&&(u=Object.assign({},u,{perPage:l.headers["per-page"]?parseInt(l.headers["per-page"]):0,total:l.headers["per-page"]?parseInt(l.headers.total):0})),u.data.story||u.data.stories){const p=this.resolveCounter=++this.resolveCounter%1e3;await this.resolveStories(u.data,t,`${p}`)}return t.version==="published"&&e!="/cdn/spaces/me"&&await o.set(r,u),u.data.cv&&t.token&&(t.version=="draft"&&f[t.token]!=u.data.cv&&await this.flushCache(),f[t.token]=u.data.cv),n(u)}catch(l){if(l.response&&l.response.status===429&&(s=s?s+1:0,s<this.maxRetries))return console.log(`Hit rate limit. Retrying in ${s} seconds.`),await this.helpers.delay(1e3*s),this.cacheResponse(e,t,s).then(n).catch(c);c(l.message)}})}throttledRequest(e,t,s){return this.client[e](t,s)}cacheVersions(){return f}cacheVersion(){return f[this.accessToken]}setCacheVersion(e){this.accessToken&&(f[this.accessToken]=e)}cacheProvider(){switch(this.cache.type){case"memory":return{get(e){return Promise.resolve(y[e])},getAll(){return Promise.resolve(y)},set(e,t){return y[e]=t,Promise.resolve(void 0)},flush(){return y={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve(void 0)},getAll(){return Promise.resolve(void 0)},set(){return Promise.resolve(void 0)},flush(){return Promise.resolve(void 0)}}}}async flushCache(){return await this.cacheProvider().flush(),this}}const pe=(i={})=>{const{apiOptions:e}=i;if(!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new ue(e)}},ge=i=>{if(typeof i!="object"||typeof i._editable>"u")return{};const e=JSON.parse(i._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return e?{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}:{}};let $;const P="https://app.storyblok.com/f/storyblok-v2-latest.js",I=(i,e,t={})=>{var s;const r=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",o=+new URL((s=window.location)==null?void 0:s.href).searchParams.get("_storyblok")===i;if(!(!r||!o)){if(!i){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],n=>{n.action==="input"&&n.story.id===i?e(n.story):(n.action==="change"||n.action==="published")&&n.storyId===i&&window.location.reload()})})}},de=(i={})=>{var e,t;const{bridge:s,accessToken:r,use:o=[],apiOptions:n={},richText:c={}}=i;n.accessToken=n.accessToken||r;const a={bridge:s,apiOptions:n};let l={};o.forEach(p=>{l={...l,...p(a)}});const u=!(typeof window>"u")&&((t=(e=window.location)==null?void 0:e.search)==null?void 0:t.includes("_storyblok_tk"));return s!==!1&&u&&E(P),$=new m(c.schema),c.resolver&&O($,c.resolver),l},O=(i,e)=>{i.addNode("blok",t=>{let s="";return t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})},C=i=>!i||!(i!=null&&i.content.some(e=>e.content||e.type==="blok"||e.type==="horizontal_rule")),fe=(i,e,t)=>{let s=t||$;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return C(i)?"":(e&&(s=new m(e.schema),e.resolver&&O(s,e.resolver)),s.render(i))},me=()=>E(P);exports.RichTextResolver=m;exports.RichTextSchema=S;exports.apiPlugin=pe;exports.isRichTextEmpty=C;exports.loadStoryblokBridge=me;exports.registerStoryblokBridge=I;exports.renderRichText=fe;exports.storyblokEditable=ge;exports.storyblokInit=de;exports.useStoryblokBridge=I;
package/dist/storyblok-js.mjs CHANGED
@@ -801,10 +801,10 @@ const ue = (i = {}) => {
801
801
  const e = JSON.parse(
802
802
  i._editable.replace(/^<!--#storyblok#/, "").replace(/-->$/, "")
803
803
  );
804
- return {
804
+ return e ? {
805
805
  "data-blok-c": JSON.stringify(e),
806
806
  "data-blok-uid": e.id + "-" + e.uid
807
- };
807
+ } : {};
808
808
  };
809
809
  let $;
810
810
  const P = "https://app.storyblok.com/f/storyblok-v2-latest.js", ge = (i, e, t = {}) => {
package/dist/types/rsc/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from "../common";
2
2
  export { default as StoryblokStory } from "../story";
3
3
  export { default as BridgeLoader } from "../bridge-loader";
4
+ export { default as StoryblokBridgeLoader } from "../bridge-loader";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storyblok/react",
3
- "version": "2.4.4",
3
+ "version": "2.4.6",
4
4
  "description": "SDK to integrate Storyblok into your project using React.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -44,21 +44,21 @@
44
44
  "prepublishOnly": "npm run build && cp ../README.md ./"
45
45
  },
46
46
  "dependencies": {
47
- "@storyblok/js": "^2.2.11"
47
+ "@storyblok/js": "^2.2.12"
48
48
  },
49
49
  "devDependencies": {
50
- "@babel/core": "^7.22.10",
50
+ "@babel/core": "^7.22.11",
51
51
  "@babel/preset-env": "^7.22.10",
52
52
  "@cypress/react": "^5.12.5",
53
53
  "@cypress/vite-dev-server": "^2.2.3",
54
54
  "@tsconfig/recommended": "^1.0.2",
55
- "@types/react": "18.2.20",
55
+ "@types/react": "18.2.21",
56
56
  "@vitejs/plugin-react": "^4.0.4",
57
- "babel-jest": "^29.6.2",
57
+ "babel-jest": "^29.6.4",
58
58
  "cypress": "^9.7.0",
59
59
  "eslint-plugin-cypress": "^2.14.0",
60
60
  "eslint-plugin-jest": "^27.2.3",
61
- "jest": "^29.6.2",
61
+ "jest": "^29.6.4",
62
62
  "react": "^18.2.0",
63
63
  "react-dom": "^18.2.0",
64
64
  "rollup-plugin-preserve-directives": "^0.2.0",