@storyblok/react 1.2.2 → 1.3.0
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.
- package/README.md +1 -1
- package/dist/storyblok-react.js +3 -3
- package/dist/storyblok-react.mjs +5 -6
- package/dist/types/index.d.ts +1 -1
- package/package.json +7 -8
package/README.md
CHANGED
|
@@ -237,7 +237,7 @@ storyblokInit({});
|
|
|
237
237
|
|
|
238
238
|
#### Storyblok Bridge
|
|
239
239
|
|
|
240
|
-
If you don't use `
|
|
240
|
+
If you don't use `registerStoryblokBridge`, you still have access to the raw `window.StoryblokBridge`:
|
|
241
241
|
|
|
242
242
|
```js
|
|
243
243
|
const sbBridge = new window.StoryblokBridge(options);
|
package/dist/storyblok-react.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
(function(l,h){typeof exports=="object"&&typeof module!="undefined"?h(exports,require("react"),require("axios")):typeof define=="function"&&define.amd?define(["exports","react","axios"],h):(l=typeof globalThis!="undefined"?globalThis:l||self,h(l.storyblokReact={},l.React,l.e))})(this,function(l,h,p){"use strict";var fe=Object.defineProperty;var
|
|
1
|
+
(function(l,h){typeof exports=="object"&&typeof module!="undefined"?h(exports,require("react"),require("axios")):typeof define=="function"&&define.amd?define(["exports","react","axios"],h):(l=typeof globalThis!="undefined"?globalThis:l||self,h(l.storyblokReact={},l.React,l.e))})(this,function(l,h,p){"use strict";var fe=Object.defineProperty;var _=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var L=(l,h,p)=>h in l?fe(l,h,{enumerable:!0,configurable:!0,writable:!0,value:p}):l[h]=p,D=(l,h)=>{for(var p in h||(h={}))B.call(h,p)&&L(l,p,h[p]);if(_)for(var p of _(h))z.call(h,p)&&L(l,p,h[p]);return l};var U=(l,h)=>{var p={};for(var f in l)B.call(l,f)&&h.indexOf(f)<0&&(p[f]=l[f]);if(l!=null&&_)for(var f of _(l))h.indexOf(f)<0&&z.call(l,f)&&(p[f]=l[f]);return p};function f(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}var w=f(h),H=f(p),V=Object.defineProperty,J=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertySymbols,F=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable,O=(n,e,t)=>e in n?V(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,g=(n,e)=>{for(var t in e||(e={}))F.call(e,t)&&O(n,t,e[t]);if(E)for(var t of E(e))G.call(e,t)&&O(n,t,e[t]);return n},R=(n,e)=>J(n,Y(e));let P=!1;const j=[],Q=n=>new Promise((e,t)=>{if(typeof window=="undefined"||(window.storyblokRegisterEvent=s=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}P?s():j.push(s)},document.getElementById("storyblok-javascript-bridge")))return;const r=document.createElement("script");r.async=!0,r.src=n,r.id="storyblok-javascript-bridge",r.onerror=s=>t(s),r.onload=s=>{j.forEach(o=>o()),P=!0,e(s)},document.getElementsByTagName("head")[0].appendChild(r)}),W=function(n,e){if(!n)return null;let t={};for(let r in n){let s=n[r];e.indexOf(r)>-1&&s!==null&&(t[r]=s)}return t},X=n=>n==="email";var A={nodes:{horizontal_rule(){return{singleTag:"hr"}},blockquote(){return{tag:"blockquote"}},bullet_list(){return{tag:"ul"}},code_block(n){return{tag:["pre",{tag:"code",attrs:n.attrs}]}},hard_break(){return{singleTag:"br"}},heading(n){return{tag:`h${n.attrs.level}`}},image(n){return{singleTag:[{tag:"img",attrs:W(n.attrs,["src","alt","title"])}]}},list_item(){return{tag:"li"}},ordered_list(){return{tag:"ol"}},paragraph(){return{tag:"p"}}},marks:{bold(){return{tag:"b"}},strike(){return{tag:"strike"}},underline(){return{tag:"u"}},strong(){return{tag:"strong"}},code(){return{tag:"code"}},italic(){return{tag:"i"}},link(n){const e=g({},n.attrs),{linktype:t="url"}=n.attrs;return X(t)&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),{tag:[{tag:"a",attrs:e}]}},styled(n){return{tag:[{tag:"span",attrs:n.attrs}]}}}};const Z=function(n){const e={"&":"&","<":"<",">":">",'"':""","'":"'"},t=/[&<>"']/g,r=RegExp(t.source);return n&&r.test(n)?n.replace(t,s=>e[s]):n};class C{constructor(e){e||(e=A),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e={}){if(e.content&&Array.isArray(e.content)){let t="";return e.content.forEach(r=>{t+=this.renderNode(r)}),t}return console.warn("The render method must receive an object with a content field, which is an array"),""}renderNode(e){let t=[];e.marks&&e.marks.forEach(s=>{const o=this.getMatchingMark(s);o&&t.push(this.renderOpeningTag(o.tag))});const r=this.getMatchingNode(e);return r&&r.tag&&t.push(this.renderOpeningTag(r.tag)),e.content?e.content.forEach(s=>{t.push(this.renderNode(s))}):e.text?t.push(Z(e.text)):r&&r.singleTag?t.push(this.renderTag(r.singleTag," /")):r&&r.html&&t.push(r.html),r&&r.tag&&t.push(this.renderClosingTag(r.tag)),e.marks&&e.marks.slice(0).reverse().forEach(s=>{const o=this.getMatchingMark(s);o&&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 o=`<${s.tag}`;if(s.attrs)for(let a in s.attrs){let i=s.attrs[a];i!==null&&(o+=` ${a}="${i}"`)}return`${o}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(r=>r.constructor===String?`</${r}>`:`</${r.tag}>`).join("")}getMatchingNode(e){if(typeof this.nodes[e.type]=="function")return this.nodes[e.type](e)}getMatchingMark(e){if(typeof this.marks[e.type]=="function")return this.marks[e.type](e)}}/*!
|
|
2
2
|
* storyblok-js-client v4.5.2
|
|
3
3
|
* Universal JavaScript SDK for Storyblok's API
|
|
4
4
|
* (c) 2020-2022 Stobylok Team
|
|
5
|
-
*/function x(n){return typeof n=="number"&&n==n&&n!==1/0&&n!==-1/0}function M(n,e,t){if(!x(e))throw new TypeError("Expected `limit` to be a finite number");if(!x(t))throw new TypeError("Expected `interval` to be a finite number");var r=[],s=[],o=0,a=function(){o++;var u=setTimeout(function(){o--,r.length>0&&a(),s=s.filter(function(d){return d!==u})},t);s.indexOf(u)<0&&s.push(u);var c=r.shift();c.resolve(n.apply(c.self,c.args))},i=function(){var u=arguments,c=this;return new Promise(function(d,k){r.push({resolve:d,reject:k,args:u,self:c}),o<e&&a()})};return i.abort=function(){s.forEach(clearTimeout),s=[],r.forEach(function(u){u.reject(new throttle.AbortError)}),r.length=0},i}M.AbortError=function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"};const K=function(n,e){if(!n)return null;let t={};for(let r in n){let s=n[r];e.indexOf(r)>-1&&s!==null&&(t[r]=s)}return t};var ee={nodes:{horizontal_rule:()=>({singleTag:"hr"}),blockquote:()=>({tag:"blockquote"}),bullet_list:()=>({tag:"ul"}),code_block:n=>({tag:["pre",{tag:"code",attrs:n.attrs}]}),hard_break:()=>({singleTag:"br"}),heading:n=>({tag:`h${n.attrs.level}`}),image:n=>({singleTag:[{tag:"img",attrs:K(n.attrs,["src","alt","title"])}]}),list_item:()=>({tag:"li"}),ordered_list:()=>({tag:"ol"}),paragraph:()=>({tag:"p"})},marks:{bold:()=>({tag:"b"}),strike:()=>({tag:"strike"}),underline:()=>({tag:"u"}),strong:()=>({tag:"strong"}),code:()=>({tag:"code"}),italic:()=>({tag:"i"}),link(n){const e=g({},n.attrs),{linktype:t="url"}=n.attrs;return t==="email"&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),{tag:[{tag:"a",attrs:e}]}},styled:n=>({tag:[{tag:"span",attrs:n.attrs}]})}};class te{constructor(e){e||(e=ee),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e={}){if(e.content&&Array.isArray(e.content)){let t="";return e.content.forEach(r=>{t+=this.renderNode(r)}),t}return console.warn("The render method must receive an object with a content field, which is an array"),""}renderNode(e){let t=[];e.marks&&e.marks.forEach(s=>{const o=this.getMatchingMark(s);o&&t.push(this.renderOpeningTag(o.tag))});const r=this.getMatchingNode(e);return r&&r.tag&&t.push(this.renderOpeningTag(r.tag)),e.content?e.content.forEach(s=>{t.push(this.renderNode(s))}):e.text?t.push(function(s){const o={"&":"&","<":"<",">":">",'"':""","'":"'"},a=/[&<>"']/g,i=RegExp(a.source);return s&&i.test(s)?s.replace(a,u=>o[u]):s}(e.text)):r&&r.singleTag?t.push(this.renderTag(r.singleTag," /")):r&&r.html&&t.push(r.html),r&&r.tag&&t.push(this.renderClosingTag(r.tag)),e.marks&&e.marks.slice(0).reverse().forEach(s=>{const o=this.getMatchingMark(s);o&&t.push(this.renderClosingTag(o.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(r=>{if(r.constructor===String)return`<${r}${t}>`;{let s=`<${r.tag}`;if(r.attrs)for(let o in r.attrs){let a=r.attrs[o];a!==null&&(s+=` ${o}="${a}"`)}return`${s}${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){if(typeof this.nodes[e.type]=="function")return this.nodes[e.type](e)}getMatchingMark(e){if(typeof this.marks[e.type]=="function")return this.marks[e.type](e)}}const re=(n=0,e=n)=>{const t=Math.abs(e-n)||0,r=n<e?1:-1;return((s=0,o)=>[...Array(s)].map(o))(t,(s,o)=>o*r+n)},R=(n,e,t)=>{const r=[];for(const s in n){if(!Object.prototype.hasOwnProperty.call(n,s))continue;const o=n[s],a=t?"":encodeURIComponent(s);let i;i=typeof o=="object"?R(o,e?e+encodeURIComponent("["+a+"]"):a,Array.isArray(o)):(e?e+encodeURIComponent("["+a+"]"):a)+"="+encodeURIComponent(o),r.push(i)}return r.join("&")};let b={},y={};class se{constructor(e,t){if(!t){let o=e.region?`-${e.region}`:"",a=e.https===!1?"http":"https";t=e.oauthToken===void 0?`${a}://api${o}.storyblok.com/v2`:`${a}://api${o}.storyblok.com/v1`}let r=Object.assign({},e.headers),s=5;e.oauthToken!==void 0&&(r.Authorization=e.oauthToken,s=3),e.rateLimit!==void 0&&(s=e.rateLimit),this.richTextResolver=new te(e.richTextSchema),typeof e.componentResolver=="function"&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries||5,this.throttle=M(this.throttledRequest,s,1e3),this.accessToken=e.accessToken,this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.client=H.default.create({baseURL:t,timeout:e.timeout||0,headers:r,proxy:e.proxy||!1}),e.responseInterceptor&&this.client.interceptors.response.use(o=>e.responseInterceptor(o)),this.resolveNestedRelations=e.resolveNestedRelations||!0}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let r="";return t.attrs.body.forEach(s=>{r+=e(s.component,s)}),{html:r}})}parseParams(e={}){return e.version||(e.version="published"),e.token||(e.token=this.getToken()),e.cv||(e.cv=y[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),e}factoryParamOptions(e,t={}){return((r="")=>r.indexOf("/cdn/")>-1)(e)?this.parseParams(t):t}makeRequest(e,t,r,s){const o=this.factoryParamOptions(e,((a={},i=25,u=1)=>w(g({},a),{per_page:i,page:u}))(t,r,s));return this.cacheResponse(e,o)}get(e,t){let r=`/${e}`;const s=this.factoryParamOptions(r,t);return this.cacheResponse(r,s)}async getAll(e,t={},r){const s=t.per_page||25,o=`/${e}`,a=o.split("/");r=r||a[a.length-1];const i=await this.makeRequest(o,t,s,1),u=Math.ceil(i.total/s);return((c=[],d)=>c.map(d).reduce((k,pe)=>[...k,...pe],[]))([i,...await(async(c=[],d)=>Promise.all(c.map(d)))(re(1,u),async c=>this.makeRequest(o,t,s,c+1))],c=>Object.values(c.data[r]))}post(e,t){let r=`/${e}`;return this.throttle("post",r,t)}put(e,t){let r=`/${e}`;return this.throttle("put",r,t)}delete(e,t){let r=`/${e}`;return this.throttle("delete",r,t)}getStories(e){return this.get("cdn/stories",e)}getStory(e,t){return this.get(`cdn/stories/${e}`,t)}setToken(e){this.accessToken=e}getToken(){return this.accessToken}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t){const r=e[t];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[r.id]?r.story=this._cleanCopy(this.links[r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[r.uuid]&&(r.story=this._cleanCopy(this.links[r.uuid]))}_insertRelations(e,t,r){if(r.indexOf(e.component+"."+t)>-1){if(typeof e[t]=="string")this.relations[e[t]]&&(e[t]=this._cleanCopy(this.relations[e[t]]));else if(e[t].constructor===Array){let s=[];e[t].forEach(o=>{this.relations[o]&&s.push(this._cleanCopy(this.relations[o]))}),e[t]=s}}}_insertAssetsRelations(e,t){t.forEach(r=>{e.id===r.id&&(e.original=r,e.original.filename=e.filename,e.original.filename=e.original.filename.includes("https://s3.amazonaws.com/")?e.original.filename:e.original.filename.replace("https://","https://s3.amazonaws.com/"),delete e.original.s3_filename)})}iterateTree(e,t){let r=s=>{if(s!=null){if(s.constructor===Array)for(let o=0;o<s.length;o++)r(s[o]);else if(s.constructor===Object){if(s._stopResolving)return;for(let o in s)s.component&&s._uid||s.type==="link"?(this._insertRelations(s,o,t),this._insertLinks(s,o)):"id"in s&&s.fieldtype==="asset"&&this._insertAssetsRelations(s,t),r(s[o])}}};r(e.content)}async resolveLinks(e,t){let r=[];if(e.link_uuids){const s=e.link_uuids.length;let o=[];const a=50;for(let i=0;i<s;i+=a){const u=Math.min(s,i+a);o.push(e.link_uuids.slice(i,u))}for(let i=0;i<o.length;i++)(await this.getStories({per_page:a,language:t.language,version:t.version,by_uuids:o[i].join(",")})).data.stories.forEach(u=>{r.push(u)})}else r=e.links;r.forEach(s=>{this.links[s.uuid]=w(g({},s),{_stopResolving:!0})})}async resolveRelations(e,t){let r=[];if(e.rel_uuids){const s=e.rel_uuids.length;let o=[];const a=50;for(let i=0;i<s;i+=a){const u=Math.min(s,i+a);o.push(e.rel_uuids.slice(i,u))}for(let i=0;i<o.length;i++)(await this.getStories({per_page:a,language:t.language,version:t.version,by_uuids:o[i].join(",")})).data.stories.forEach(u=>{r.push(u)})}else r=e.rels;r.forEach(s=>{this.relations[s.uuid]=w(g({},s),{_stopResolving:!0})})}async resolveStories(e,t){let r=[];if(t.resolve_relations!==void 0&&t.resolve_relations.length>0&&(e.rels||e.rel_uuids)&&(r=t.resolve_relations.split(","),await this.resolveRelations(e,t)),["1","story","url"].indexOf(t.resolve_links)>-1&&(e.links||e.link_uuids)&&await this.resolveLinks(e,t),this.resolveNestedRelations)for(const s in this.relations)this.iterateTree(this.relations[s],r);e.story?this.iterateTree(e.story,r):e.stories.forEach(s=>{this.iterateTree(s,r)})}resolveAssetsRelations(e){const{assets:t,stories:r,story:s}=e;if(r)for(const o of r)this.iterateTree(o,t);else{if(!s)return e;this.iterateTree(s,t)}}cacheResponse(e,t,r){return r===void 0&&(r=0),new Promise(async(s,o)=>{let a=R({url:e,params:t}),i=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const c=await i.get(a);if(c)return s(c)}try{let c=await this.throttle("get",e,{params:t,paramsSerializer:k=>R(k)}),d={data:c.data,headers:c.headers};if(d.data.assets&&d.data.assets.length&&this.resolveAssetsRelations(d.data),c.headers["per-page"]&&(d=Object.assign({},d,{perPage:parseInt(c.headers["per-page"]),total:parseInt(c.headers.total)})),c.status!=200)return o(c);(d.data.story||d.data.stories)&&await this.resolveStories(d.data,t),t.version==="published"&&e!="/cdn/spaces/me"&&i.set(a,d),d.data.cv&&(t.version=="draft"&&y[t.token]!=d.data.cv&&this.flushCache(),y[t.token]=d.data.cv),s(d)}catch(c){if(c.response&&c.response.status===429&&(r+=1)<this.maxRetries)return console.log(`Hit rate limit. Retrying in ${r} seconds.`),await(u=1e3*r,new Promise(d=>setTimeout(d,u))),this.cacheResponse(e,t,r).then(s).catch(o);o(c)}var u})}throttledRequest(e,t,r){return this.client[e](t,r)}cacheVersions(){return y}cacheVersion(){return y[this.accessToken]}setCacheVersion(e){this.accessToken&&(y[this.accessToken]=e)}cacheProvider(){return this.cache.type==="memory"?{get:e=>b[e],getAll:()=>b,set(e,t){b[e]=t},flush(){b={}}}:{get(){},getAll(){},set(){},flush(){}}}async flushCache(){return await this.cacheProvider().flush(),this}}const ne=(n={})=>{const{apiOptions:e}=n;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 se(e)}};var oe=n=>{if(typeof n!="object"||typeof n._editable=="undefined")return{};const e=JSON.parse(n._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let v;const ie="https://app.storyblok.com/f/storyblok-v2-latest.js",S=(n,e,t={})=>{if(typeof window!="undefined"){if(typeof window.storyblokRegisterEvent=="undefined"){console.error("Storyblok Bridge is disabled. Please enable it to use it. Read https://github.com/storyblok/storyblok-js");return}if(!n){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],s=>{s.story.id===n&&(s.action==="input"?e(s.story):window.location.reload())})})}},ae=(n={})=>{const{bridge:e,accessToken:t,use:r=[],apiOptions:s={},richText:o={}}=n;s.accessToken=s.accessToken||t;const a={bridge:e,apiOptions:s};let i={};return r.forEach(u=>{i=g(g({},i),u(a))}),e!==!1&&Q(ie),v=new C(o.schema),o.resolver&&N(v,o.resolver),i},N=(n,e)=>{n.addNode("blok",t=>{let r="";return t.attrs.body.forEach(s=>{r+=e(s.component,s)}),{html:r}})},le=(n,e)=>{if(!v){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}if(n==="")return"";if(!n)return console.warn(`${n} is not a valid Richtext object. This might be because the value of the richtext field is empty.
|
|
5
|
+
*/function M(n){return typeof n=="number"&&n==n&&n!==1/0&&n!==-1/0}function x(n,e,t){if(!M(e))throw new TypeError("Expected `limit` to be a finite number");if(!M(t))throw new TypeError("Expected `interval` to be a finite number");var r=[],s=[],o=0,a=function(){o++;var u=setTimeout(function(){o--,r.length>0&&a(),s=s.filter(function(d){return d!==u})},t);s.indexOf(u)<0&&s.push(u);var c=r.shift();c.resolve(n.apply(c.self,c.args))},i=function(){var u=arguments,c=this;return new Promise(function(d,k){r.push({resolve:d,reject:k,args:u,self:c}),o<e&&a()})};return i.abort=function(){s.forEach(clearTimeout),s=[],r.forEach(function(u){u.reject(new throttle.AbortError)}),r.length=0},i}x.AbortError=function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"};const K=function(n,e){if(!n)return null;let t={};for(let r in n){let s=n[r];e.indexOf(r)>-1&&s!==null&&(t[r]=s)}return t};var ee={nodes:{horizontal_rule:()=>({singleTag:"hr"}),blockquote:()=>({tag:"blockquote"}),bullet_list:()=>({tag:"ul"}),code_block:n=>({tag:["pre",{tag:"code",attrs:n.attrs}]}),hard_break:()=>({singleTag:"br"}),heading:n=>({tag:`h${n.attrs.level}`}),image:n=>({singleTag:[{tag:"img",attrs:K(n.attrs,["src","alt","title"])}]}),list_item:()=>({tag:"li"}),ordered_list:()=>({tag:"ol"}),paragraph:()=>({tag:"p"})},marks:{bold:()=>({tag:"b"}),strike:()=>({tag:"strike"}),underline:()=>({tag:"u"}),strong:()=>({tag:"strong"}),code:()=>({tag:"code"}),italic:()=>({tag:"i"}),link(n){const e=g({},n.attrs),{linktype:t="url"}=n.attrs;return t==="email"&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),{tag:[{tag:"a",attrs:e}]}},styled:n=>({tag:[{tag:"span",attrs:n.attrs}]})}};class te{constructor(e){e||(e=ee),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e={}){if(e.content&&Array.isArray(e.content)){let t="";return e.content.forEach(r=>{t+=this.renderNode(r)}),t}return console.warn("The render method must receive an object with a content field, which is an array"),""}renderNode(e){let t=[];e.marks&&e.marks.forEach(s=>{const o=this.getMatchingMark(s);o&&t.push(this.renderOpeningTag(o.tag))});const r=this.getMatchingNode(e);return r&&r.tag&&t.push(this.renderOpeningTag(r.tag)),e.content?e.content.forEach(s=>{t.push(this.renderNode(s))}):e.text?t.push(function(s){const o={"&":"&","<":"<",">":">",'"':""","'":"'"},a=/[&<>"']/g,i=RegExp(a.source);return s&&i.test(s)?s.replace(a,u=>o[u]):s}(e.text)):r&&r.singleTag?t.push(this.renderTag(r.singleTag," /")):r&&r.html&&t.push(r.html),r&&r.tag&&t.push(this.renderClosingTag(r.tag)),e.marks&&e.marks.slice(0).reverse().forEach(s=>{const o=this.getMatchingMark(s);o&&t.push(this.renderClosingTag(o.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(r=>{if(r.constructor===String)return`<${r}${t}>`;{let s=`<${r.tag}`;if(r.attrs)for(let o in r.attrs){let a=r.attrs[o];a!==null&&(s+=` ${o}="${a}"`)}return`${s}${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){if(typeof this.nodes[e.type]=="function")return this.nodes[e.type](e)}getMatchingMark(e){if(typeof this.marks[e.type]=="function")return this.marks[e.type](e)}}const re=(n=0,e=n)=>{const t=Math.abs(e-n)||0,r=n<e?1:-1;return((s=0,o)=>[...Array(s)].map(o))(t,(s,o)=>o*r+n)},S=(n,e,t)=>{const r=[];for(const s in n){if(!Object.prototype.hasOwnProperty.call(n,s))continue;const o=n[s],a=t?"":encodeURIComponent(s);let i;i=typeof o=="object"?S(o,e?e+encodeURIComponent("["+a+"]"):a,Array.isArray(o)):(e?e+encodeURIComponent("["+a+"]"):a)+"="+encodeURIComponent(o),r.push(i)}return r.join("&")};let b={},y={};class se{constructor(e,t){if(!t){let o=e.region?`-${e.region}`:"",a=e.https===!1?"http":"https";t=e.oauthToken===void 0?`${a}://api${o}.storyblok.com/v2`:`${a}://api${o}.storyblok.com/v1`}let r=Object.assign({},e.headers),s=5;e.oauthToken!==void 0&&(r.Authorization=e.oauthToken,s=3),e.rateLimit!==void 0&&(s=e.rateLimit),this.richTextResolver=new te(e.richTextSchema),typeof e.componentResolver=="function"&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries||5,this.throttle=x(this.throttledRequest,s,1e3),this.accessToken=e.accessToken,this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.client=H.default.create({baseURL:t,timeout:e.timeout||0,headers:r,proxy:e.proxy||!1}),e.responseInterceptor&&this.client.interceptors.response.use(o=>e.responseInterceptor(o)),this.resolveNestedRelations=e.resolveNestedRelations||!0}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let r="";return t.attrs.body.forEach(s=>{r+=e(s.component,s)}),{html:r}})}parseParams(e={}){return e.version||(e.version="published"),e.token||(e.token=this.getToken()),e.cv||(e.cv=y[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),e}factoryParamOptions(e,t={}){return((r="")=>r.indexOf("/cdn/")>-1)(e)?this.parseParams(t):t}makeRequest(e,t,r,s){const o=this.factoryParamOptions(e,((a={},i=25,u=1)=>R(g({},a),{per_page:i,page:u}))(t,r,s));return this.cacheResponse(e,o)}get(e,t){let r=`/${e}`;const s=this.factoryParamOptions(r,t);return this.cacheResponse(r,s)}async getAll(e,t={},r){const s=t.per_page||25,o=`/${e}`,a=o.split("/");r=r||a[a.length-1];const i=await this.makeRequest(o,t,s,1),u=Math.ceil(i.total/s);return((c=[],d)=>c.map(d).reduce((k,pe)=>[...k,...pe],[]))([i,...await(async(c=[],d)=>Promise.all(c.map(d)))(re(1,u),async c=>this.makeRequest(o,t,s,c+1))],c=>Object.values(c.data[r]))}post(e,t){let r=`/${e}`;return this.throttle("post",r,t)}put(e,t){let r=`/${e}`;return this.throttle("put",r,t)}delete(e,t){let r=`/${e}`;return this.throttle("delete",r,t)}getStories(e){return this.get("cdn/stories",e)}getStory(e,t){return this.get(`cdn/stories/${e}`,t)}setToken(e){this.accessToken=e}getToken(){return this.accessToken}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t){const r=e[t];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[r.id]?r.story=this._cleanCopy(this.links[r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[r.uuid]&&(r.story=this._cleanCopy(this.links[r.uuid]))}_insertRelations(e,t,r){if(r.indexOf(e.component+"."+t)>-1){if(typeof e[t]=="string")this.relations[e[t]]&&(e[t]=this._cleanCopy(this.relations[e[t]]));else if(e[t].constructor===Array){let s=[];e[t].forEach(o=>{this.relations[o]&&s.push(this._cleanCopy(this.relations[o]))}),e[t]=s}}}_insertAssetsRelations(e,t){t.forEach(r=>{e.id===r.id&&(e.original=r,e.original.filename=e.filename,e.original.filename=e.original.filename.includes("https://s3.amazonaws.com/")?e.original.filename:e.original.filename.replace("https://","https://s3.amazonaws.com/"),delete e.original.s3_filename)})}iterateTree(e,t){let r=s=>{if(s!=null){if(s.constructor===Array)for(let o=0;o<s.length;o++)r(s[o]);else if(s.constructor===Object){if(s._stopResolving)return;for(let o in s)s.component&&s._uid||s.type==="link"?(this._insertRelations(s,o,t),this._insertLinks(s,o)):"id"in s&&s.fieldtype==="asset"&&this._insertAssetsRelations(s,t),r(s[o])}}};r(e.content)}async resolveLinks(e,t){let r=[];if(e.link_uuids){const s=e.link_uuids.length;let o=[];const a=50;for(let i=0;i<s;i+=a){const u=Math.min(s,i+a);o.push(e.link_uuids.slice(i,u))}for(let i=0;i<o.length;i++)(await this.getStories({per_page:a,language:t.language,version:t.version,by_uuids:o[i].join(",")})).data.stories.forEach(u=>{r.push(u)})}else r=e.links;r.forEach(s=>{this.links[s.uuid]=R(g({},s),{_stopResolving:!0})})}async resolveRelations(e,t){let r=[];if(e.rel_uuids){const s=e.rel_uuids.length;let o=[];const a=50;for(let i=0;i<s;i+=a){const u=Math.min(s,i+a);o.push(e.rel_uuids.slice(i,u))}for(let i=0;i<o.length;i++)(await this.getStories({per_page:a,language:t.language,version:t.version,by_uuids:o[i].join(",")})).data.stories.forEach(u=>{r.push(u)})}else r=e.rels;r.forEach(s=>{this.relations[s.uuid]=R(g({},s),{_stopResolving:!0})})}async resolveStories(e,t){let r=[];if(t.resolve_relations!==void 0&&t.resolve_relations.length>0&&(e.rels||e.rel_uuids)&&(r=t.resolve_relations.split(","),await this.resolveRelations(e,t)),["1","story","url"].indexOf(t.resolve_links)>-1&&(e.links||e.link_uuids)&&await this.resolveLinks(e,t),this.resolveNestedRelations)for(const s in this.relations)this.iterateTree(this.relations[s],r);e.story?this.iterateTree(e.story,r):e.stories.forEach(s=>{this.iterateTree(s,r)})}resolveAssetsRelations(e){const{assets:t,stories:r,story:s}=e;if(r)for(const o of r)this.iterateTree(o,t);else{if(!s)return e;this.iterateTree(s,t)}}cacheResponse(e,t,r){return r===void 0&&(r=0),new Promise(async(s,o)=>{let a=S({url:e,params:t}),i=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const c=await i.get(a);if(c)return s(c)}try{let c=await this.throttle("get",e,{params:t,paramsSerializer:k=>S(k)}),d={data:c.data,headers:c.headers};if(d.data.assets&&d.data.assets.length&&this.resolveAssetsRelations(d.data),c.headers["per-page"]&&(d=Object.assign({},d,{perPage:parseInt(c.headers["per-page"]),total:parseInt(c.headers.total)})),c.status!=200)return o(c);(d.data.story||d.data.stories)&&await this.resolveStories(d.data,t),t.version==="published"&&e!="/cdn/spaces/me"&&i.set(a,d),d.data.cv&&(t.version=="draft"&&y[t.token]!=d.data.cv&&this.flushCache(),y[t.token]=d.data.cv),s(d)}catch(c){if(c.response&&c.response.status===429&&(r+=1)<this.maxRetries)return console.log(`Hit rate limit. Retrying in ${r} seconds.`),await(u=1e3*r,new Promise(d=>setTimeout(d,u))),this.cacheResponse(e,t,r).then(s).catch(o);o(c)}var u})}throttledRequest(e,t,r){return this.client[e](t,r)}cacheVersions(){return y}cacheVersion(){return y[this.accessToken]}setCacheVersion(e){this.accessToken&&(y[this.accessToken]=e)}cacheProvider(){return this.cache.type==="memory"?{get:e=>b[e],getAll:()=>b,set(e,t){b[e]=t},flush(){b={}}}:{get(){},getAll(){},set(){},flush(){}}}async flushCache(){return await this.cacheProvider().flush(),this}}const ne=(n={})=>{const{apiOptions:e}=n;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 se(e)}};var oe=n=>{if(typeof n!="object"||typeof n._editable=="undefined")return{};const e=JSON.parse(n._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let v;const ie="https://app.storyblok.com/f/storyblok-v2-latest.js",T=(n,e,t={})=>{if(typeof window!="undefined"){if(typeof window.storyblokRegisterEvent=="undefined"){console.error("Storyblok Bridge is disabled. Please enable it to use it. Read https://github.com/storyblok/storyblok-js");return}if(!n){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],s=>{s.action==="input"&&s.story.id===n?e(s.story):(s.action==="change"||s.action==="published")&&s.storyId===n&&window.location.reload()})})}},ae=(n={})=>{const{bridge:e,accessToken:t,use:r=[],apiOptions:s={},richText:o={}}=n;s.accessToken=s.accessToken||t;const a={bridge:e,apiOptions:s};let i={};return r.forEach(u=>{i=g(g({},i),u(a))}),e!==!1&&Q(ie),v=new C(o.schema),o.resolver&&N(v,o.resolver),i},N=(n,e)=>{n.addNode("blok",t=>{let r="";return t.attrs.body.forEach(s=>{r+=e(s.component,s)}),{html:r}})},le=(n,e)=>{if(!v){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}if(n==="")return"";if(!n)return console.warn(`${n} is not a valid Richtext object. This might be because the value of the richtext field is empty.
|
|
6
6
|
|
|
7
|
-
For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`),"";let t=v;return e&&(t=new C(e.schema),e.resolver&&N(t,e.resolver)),t.render(n)},ce=t=>{var r=t,{blok:n}=r,e=U(r,["blok"]);if(!n)return console.error("Please provide a 'blok' property to the StoryblokComponent"),
|
|
7
|
+
For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`),"";let t=v;return e&&(t=new C(e.schema),e.resolver&&N(t,e.resolver)),t.render(n)},ce=t=>{var r=t,{blok:n}=r,e=U(r,["blok"]);if(!n)return console.error("Please provide a 'blok' property to the StoryblokComponent"),w.default.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const s=q(n.component);return s?w.default.createElement(s,D({blok:n},e)):w.default.createElement("div",null)},ue=(n,e={},t={})=>{let[r,s]=h.useState({});return m?(T(r.id,o=>s(o),t),h.useEffect(()=>{async function o(){const{data:a}=await m.get(`cdn/stories/${n}`,e);s(a.story)}o()},[n]),r):(console.error("You can't use useStoryblok if you're not loading apiPlugin."),null)},he=(n={},e={},t=!0)=>{let[r,s]=h.useState(n);return t?(h.useEffect(()=>{T(r.id,o=>s(o),e),s(n)},[n]),r):n};let m=null;const I=()=>(m||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),m);let $={};const q=n=>$[n]?$[n]:(console.error(`Component ${n} doesn't exist.`),!1),de=(n={})=>{const{storyblokApi:e}=ae(n);m=e,$=n.components};l.RichTextSchema=A,l.StoryblokComponent=ce,l.apiPlugin=ne,l.getComponent=q,l.getStoryblokApi=I,l.registerStoryblokBridge=T,l.renderRichText=le,l.storyblokEditable=oe,l.storyblokInit=de,l.useStoryblok=ue,l.useStoryblokApi=I,l.useStoryblokBridge=T,l.useStoryblokState=he,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/storyblok-react.mjs
CHANGED
|
@@ -729,11 +729,10 @@ const useStoryblokBridge = (id, cb, options = {}) => {
|
|
|
729
729
|
window.storyblokRegisterEvent(() => {
|
|
730
730
|
const sbBridge = new window.StoryblokBridge(options);
|
|
731
731
|
sbBridge.on(["input", "published", "change"], (event) => {
|
|
732
|
-
if (event.story.id === id) {
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
window.location.reload();
|
|
732
|
+
if (event.action === "input" && event.story.id === id) {
|
|
733
|
+
cb(event.story);
|
|
734
|
+
} else if ((event.action === "change" || event.action === "published") && event.storyId === id) {
|
|
735
|
+
window.location.reload();
|
|
737
736
|
}
|
|
738
737
|
});
|
|
739
738
|
});
|
|
@@ -859,4 +858,4 @@ const storyblokInit = (pluginOptions = {}) => {
|
|
|
859
858
|
storyblokApiInstance = storyblokApi;
|
|
860
859
|
componentsMap = pluginOptions.components;
|
|
861
860
|
};
|
|
862
|
-
export { defaultHtmlSerializer as RichTextSchema, StoryblokComponent, apiFactory as apiPlugin, getComponent, useStoryblokApi as getStoryblokApi, renderRichText, editable as storyblokEditable, storyblokInit, useStoryblok, useStoryblokApi, useStoryblokBridge, useStoryblokState };
|
|
861
|
+
export { defaultHtmlSerializer as RichTextSchema, StoryblokComponent, apiFactory as apiPlugin, getComponent, useStoryblokApi as getStoryblokApi, useStoryblokBridge as registerStoryblokBridge, renderRichText, editable as storyblokEditable, storyblokInit, useStoryblok, useStoryblokApi, useStoryblokBridge, useStoryblokState };
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { SbReactSDKOptions, StoriesParams, StoryblokBridgeConfigV2, StoryblokClient, StoryData } from "./types";
|
|
3
3
|
export { default as StoryblokComponent } from "./components/storyblok-component";
|
|
4
|
-
export { storyblokEditable, apiPlugin, useStoryblokBridge, renderRichText, RichTextSchema, } from "@storyblok/js";
|
|
4
|
+
export { storyblokEditable, apiPlugin, useStoryblokBridge, registerStoryblokBridge, renderRichText, RichTextSchema, } from "@storyblok/js";
|
|
5
5
|
export declare const useStoryblok: (slug: string, apiOptions?: StoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => StoryData<import("storyblok-js-client").StoryblokComponent<string> & {
|
|
6
6
|
[index: string]: any;
|
|
7
7
|
}>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storyblok/react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "SDK to integrate Storyblok into your project using React.",
|
|
5
5
|
"main": "./dist/storyblok-react.js",
|
|
6
6
|
"module": "./dist/storyblok-react.mjs",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"prepublishOnly": "npm run build && cp ../README.md ./"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@storyblok/js": "^1.8.
|
|
27
|
+
"@storyblok/js": "^1.8.3"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@babel/core": "^7.19.0",
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
"@cypress/react": "^5.12.5",
|
|
33
33
|
"@cypress/vite-dev-server": "^2.2.3",
|
|
34
34
|
"@tsconfig/recommended": "^1.0.1",
|
|
35
|
-
"@types/react": "18.0.
|
|
35
|
+
"@types/react": "18.0.19",
|
|
36
36
|
"@vitejs/plugin-react": "^1.3.2",
|
|
37
|
-
"babel-jest": "^29.0.
|
|
37
|
+
"babel-jest": "^29.0.3",
|
|
38
38
|
"cypress": "^9.7.0",
|
|
39
39
|
"eslint-plugin-cypress": "^2.12.1",
|
|
40
|
-
"eslint-plugin-jest": "^27.0.
|
|
41
|
-
"jest": "^29.0.
|
|
40
|
+
"eslint-plugin-jest": "^27.0.4",
|
|
41
|
+
"jest": "^29.0.3",
|
|
42
42
|
"react": "^18.2.0",
|
|
43
43
|
"react-dom": "^18.2.0",
|
|
44
44
|
"vite": "^2.9.15"
|
|
@@ -70,8 +70,7 @@
|
|
|
70
70
|
},
|
|
71
71
|
"release": {
|
|
72
72
|
"branches": [
|
|
73
|
-
"main"
|
|
74
|
-
"feature/v1"
|
|
73
|
+
"main"
|
|
75
74
|
]
|
|
76
75
|
},
|
|
77
76
|
"repository": {
|