@storyblok/astro 2.4.1 → 2.5.0

package/README.md

@@ -110,7 +110,7 @@ In order to link your Astro components to their equivalents you created in Story
 
 First, you need to load them globally by specifying their name and their path in `astro.config.mjs`:
 
-```javascript
+```js
 components: {
   page: "storyblok/Page",
   feature: "storyblok/Feature",
@@ -140,7 +140,7 @@ components: {
 
 For each component, use the `storyblokEditable()` function on its root element, passing the `blok` property that they receive:
 
-```html
+```jsx
 ---
 import { storyblokEditable } from '@storyblok/astro';
 
@@ -154,7 +154,7 @@ const { blok } = Astro.props
 
 Finally, you can use the provided `<StoryblokComponent>` for nested components; it will automatically render them (if they have been registered globally beforehand):
 
-```html
+```jsx
 ---
 import { storyblokEditable } from '@storyblok/astro';
 import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
@@ -189,7 +189,7 @@ For working examples, please refer to the [Live Demo on Stackblitz](https://stac
 
 Use the `useStoryblokApi` function to have access to an instance of `storyblok-js-client`:
 
-```html
+```jsx
 ---
 import { useStoryblokApi } from "@storyblok/astro";
 import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
@@ -211,14 +211,14 @@ const story = data.story;
 
 In order to dynamically generate Astro pages based on the Stories in your Storyblok Space, you can use the [Storyblok Links API](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/links/links) and the Astro [`getStaticPaths()` function](https://docs.astro.build/en/reference/api-reference/#getstaticpaths) similar to this example:
 
-```html
+```jsx
 ---
 import { useStoryblokApi } from "@storyblok/astro";
 import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
 
 export async function getStaticPaths() {
   const storyblokApi = useStoryblokApi();
-  
+
   const { data } = await storyblokApi.get("cdn/links", {
     version: "draft",
   });
@@ -252,6 +252,23 @@ The Storyblok Bridge is enabled by default. If you would like to disable it or e
 
 > Note: Since Astro is not a reactive JavaScript framework and renders everything as HTML, the Storyblok Bridge will not provide real-time editing as you may know it from other frameworks. However, it automatically refreshes the site for you whenever you save or publish a story.
 
+You can also provide a `StoryblokBridgeConfigV2` configuration object to the `bridge` parameter.
+
+```
+bridge: {
+  customParent?: string,
+  preventClicks?: boolean, // Defaults to false.
+  resolveRelations?: strings[]
+}
+```
+
+- `customParent` is used to provide a custom URL for the Storyblok editor iframe.
+- `preventClicks` prevents the default behaviour of clicks when inside the Storyblok editor.
+- `resolveRelations` may be needed to tell the Storyblok Bridge to resolve the same relations that are already resolved in the API requests via the `resolve_relations` parameter. _Note: this paramenter won't have any effect in Astro, since the Storyblok Bridge will reload the page and thus all the requests needed will be performed after the reload_
+
+The provided options will be used to initialize the Storyblok Bridge.
+You can find more information about the Storyblok Bridge and its configuration options on the [In Depth Storyblok Bridge guide](https://www.storyblok.com/docs/guide/in-depth/storyblok-latest-js-v2).
+
 If you want to deploy a dedicated preview environment with the Bridge enabled, allowing users of the Storyblok CMS to see their changes being reflected on the frontend directly without having to rebuild the static site, you can enable Server Side Rendering for that particular use case. More information can be found in the [Astro Docs](https://docs.astro.build/en/guides/server-side-rendering/).
 
 ### Rendering Rich Text
@@ -275,17 +292,17 @@ Use the `<RichTextRenderer />` component if you are embedding `bloks` in your ri
 
 ```jsx
 ---
-import { renderRichText, RichTextRenderer } from '@storyblok/astro';
+import RichTextRenderer from "@storyblok/astro/RichTextRenderer.astro";
 
 const { blok } = Astro.props
 ---
 
-<RichTextRenderer richTextData="{blok.richtext}" />
+<RichTextRenderer richTextData={blok.richtext} />
 ```
 
 You can also set a **custom Schema and component resolver** by passing the options as the second parameter of the `renderRichText` function:
 
-```js
+```jsx
 import { RichTextSchema, renderRichText } from "@storyblok/astro";
 import cloneDeep from "clone-deep";
 
@@ -311,9 +328,11 @@ const renderedRichText = renderRichText(blok.text, {
 
 The same can be done with the `<RichTextRenderer />` component by passing along the options via the `richTextOptions` prop:
 
-```js
+```jsx
 ---
-import { RichTextSchema, renderRichText, RichTextRenderer } from "@storyblok/astro";
+import { RichTextSchema } from "@storyblok/astro";
+import RichTextRenderer from "@storyblok/astro/RichTextRenderer.astro";
+
 import cloneDeep from "clone-deep";
 
 const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
@@ -336,7 +355,7 @@ const options = {
 };
 ---
 
-<RichTextRenderer richTextData="{blok.richtext}" richTextOptions="{options}" />
+<RichTextRenderer richTextData={blok.richtext} richTextOptions={options} />
 
 ```
 

package/dist/storyblok-astro.js

@@ -1,4 +1,4 @@
-(function(u,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(u=typeof globalThis<"u"?globalThis:u||self,h(u.storyblokAstro={}))})(this,function(u){"use strict";function h(r,e,t){const o="virtual:storyblok-init",a="\0"+o;return{name:"vite-plugin-storyblok-init",async resolveId(s){if(s===o)return a},async load(s){if(s===a)return`
+(function(g,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(g=typeof globalThis<"u"?globalThis:g||self,h(g.storyblokAstro={}))})(this,function(g){"use strict";function h(r,e,t){const o="virtual:storyblok-init",a="\0"+o;return{name:"vite-plugin-storyblok-init",async resolveId(s){if(s===o)return a},async load(s){if(s===a)return`
           import { storyblokInit, apiPlugin } from "@storyblok/js";
           const { storyblokApi } = storyblokInit({
             accessToken: "${r}",
@@ -6,7 +6,7 @@
             apiOptions: ${JSON.stringify(t)},
           });
           export const storyblokApiInstance = storyblokApi;  
-        `}}}const x=/[\p{Lu}]/u,R=/[\p{Ll}]/u,k=/^[\p{Lu}](?![\p{Lu}])/gu,v=/([\p{Alpha}\p{N}_]|$)/u,b=/[_.\- ]+/,N=new RegExp("^"+b.source),$=new RegExp(b.source+v.source,"gu"),I=new RegExp("\\d+"+v.source,"gu"),O=(r,e,t,o)=>{let a=!1,s=!1,n=!1,f=!1;for(let l=0;l<r.length;l++){const i=r[l];f=l>2?r[l-3]==="-":!0,a&&x.test(i)?(r=r.slice(0,l)+"-"+r.slice(l),a=!1,n=s,s=!0,l++):s&&n&&R.test(i)&&(!f||o)?(r=r.slice(0,l-1)+"-"+r.slice(l-1),n=s,s=!1,a=!0):(a=e(i)===i&&t(i)!==i,n=s,s=t(i)===i&&e(i)!==i)}return r},L=(r,e)=>(k.lastIndex=0,r.replace(k,t=>e(t))),M=(r,e)=>($.lastIndex=0,I.lastIndex=0,r.replace($,(t,o)=>e(o)).replace(I,t=>e(t)));function T(r,e){if(!(typeof r=="string"||Array.isArray(r)))throw new TypeError("Expected the input to be `string | string[]`");if(e={pascalCase:!1,preserveConsecutiveUppercase:!1,...e},Array.isArray(r)?r=r.map(s=>s.trim()).filter(s=>s.length).join("-"):r=r.trim(),r.length===0)return"";const t=e.locale===!1?s=>s.toLowerCase():s=>s.toLocaleLowerCase(e.locale),o=e.locale===!1?s=>s.toUpperCase():s=>s.toLocaleUpperCase(e.locale);return r.length===1?b.test(r)?"":e.pascalCase?o(r):t(r):(r!==t(r)&&(r=O(r,t,o,e.preserveConsecutiveUppercase)),r=r.replace(N,""),r=e.preserveConsecutiveUppercase?L(r,t):t(r),e.pascalCase&&(r=o(r.charAt(0))+r.slice(1)),M(r,o))}function P(r,e,t,o){const a="virtual:storyblok-components",s="\0"+a;return{name:"vite-plugin-storyblok-components",async resolveId(n){if(n===a)return s},async load(n){if(n===s){const f=[],l=[];for await(const[c,d]of Object.entries(e)){const p=await this.resolve("/"+r+"/"+d+".astro");if(p)f.push(`import ${T(c)} from "${p.id}"`);else if(t)l.push(c);else throw new Error(`Component could not be found for blok "${c}"! Does "${"/"+r+"/"+d}.astro" exist?`)}let i="";if(t)if(i=",FallbackComponent",o){const c=await this.resolve("/"+r+"/"+o+".astro");if(!c)throw new Error(`Custom fallback component could not be found. Does "${"/"+r+"/"+o}.astro" exist?`);f.push(`import FallbackComponent from "${c.id}"`)}else f.push("import FallbackComponent from '@storyblok/astro/FallbackComponent.astro';");return`${f.join(";")};export default {${Object.keys(e).filter(c=>!l.includes(c)).map(c=>T(c)).join(",")}${i}}`}}}}function _(r){const e="virtual:storyblok-options",t="\0"+e;return{name:"vite-plugin-storyblok-options",async resolveId(o){if(o===e)return t},async load(o){if(o===t)return`export default ${JSON.stringify(r)}`}}}let w=!1;const E=[],z=r=>new Promise((e,t)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=a=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}w?a():E.push(a)},document.getElementById("storyblok-javascript-bridge")))return;const o=document.createElement("script");o.async=!0,o.src=r,o.id="storyblok-javascript-bridge",o.onerror=a=>t(a),o.onload=a=>{E.forEach(s=>s()),w=!0,e(a)},document.getElementsByTagName("head")[0].appendChild(o)});var D=Object.defineProperty,U=(r,e,t)=>e in r?D(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,A=(r,e,t)=>(U(r,typeof e!="symbol"?e+"":e,t),t);const q=function(r,e){const t={};for(const o in r){const a=r[o];e.indexOf(o)>-1&&a!==null&&(t[o]=a)}return t},B=r=>r==="email",F=()=>({singleTag:"hr"}),J=()=>({tag:"blockquote"}),K=()=>({tag:"ul"}),V=r=>({tag:["pre",{tag:"code",attrs:r.attrs}]}),G=()=>({singleTag:"br"}),W=r=>({tag:`h${r.attrs.level}`}),H=r=>({singleTag:[{tag:"img",attrs:q(r.attrs,["src","alt","title"])}]}),Y=()=>({tag:"li"}),Q=()=>({tag:"ol"}),X=()=>({tag:"p"}),Z=r=>({tag:[{tag:"span",attrs:{["data-type"]:"emoji",["data-name"]:r.attrs.name,emoji:r.attrs.emoji}}]}),ee=()=>({tag:"b"}),te=()=>({tag:"strike"}),re=()=>({tag:"u"}),oe=()=>({tag:"strong"}),se=()=>({tag:"code"}),ae=()=>({tag:"i"}),ne=r=>{const e={...r.attrs},{linktype:t="url"}=r.attrs;if(B(t)&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),e.custom){for(const o in e.custom)e[o]=e.custom[o];delete e.custom}return{tag:[{tag:"a",attrs:e}]}},le=r=>({tag:[{tag:"span",attrs:r.attrs}]}),ie=()=>({tag:"sub"}),ce=()=>({tag:"sup"}),ue=r=>({tag:[{tag:"span",attrs:r.attrs}]}),ge=r=>{var e;return(e=r.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`background-color:${r.attrs.color};`}}]}:{tag:""}},fe=r=>{var e;return(e=r.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`color:${r.attrs.color}`}}]}:{tag:""}},C={nodes:{horizontal_rule:F,blockquote:J,bullet_list:K,code_block:V,hard_break:G,heading:W,image:H,list_item:Y,ordered_list:Q,paragraph:X,emoji:Z},marks:{bold:ee,strike:te,underline:re,strong:oe,code:se,italic:ae,link:ne,styled:le,subscript:ie,superscript:ce,anchor:ue,highlight:ge,textStyle:fe}},de=function(r){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},t=/[&<>"']/g,o=RegExp(t.source);return r&&o.test(r)?r.replace(t,a=>e[a]):r};class S{constructor(e){A(this,"marks"),A(this,"nodes"),e||(e=C),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e,t={optimizeImages:!1}){if(e&&e.content&&Array.isArray(e.content)){let o="";return e.content.forEach(a=>{o+=this.renderNode(a)}),t.optimizeImages?this.optimizeImages(o,t.optimizeImages):o}return console.warn(`The render method must receive an Object with a "content" field.
+        `}}}const x=/[\p{Lu}]/u,R=/[\p{Ll}]/u,k=/^[\p{Lu}](?![\p{Lu}])/gu,v=/([\p{Alpha}\p{N}_]|$)/u,b=/[_.\- ]+/,O=new RegExp("^"+b.source),$=new RegExp(b.source+v.source,"gu"),I=new RegExp("\\d+"+v.source,"gu"),N=(r,e,t,o)=>{let a=!1,s=!1,n=!1,f=!1;for(let l=0;l<r.length;l++){const i=r[l];f=l>2?r[l-3]==="-":!0,a&&x.test(i)?(r=r.slice(0,l)+"-"+r.slice(l),a=!1,n=s,s=!0,l++):s&&n&&R.test(i)&&(!f||o)?(r=r.slice(0,l-1)+"-"+r.slice(l-1),n=s,s=!1,a=!0):(a=e(i)===i&&t(i)!==i,n=s,s=t(i)===i&&e(i)!==i)}return r},L=(r,e)=>(k.lastIndex=0,r.replace(k,t=>e(t))),M=(r,e)=>($.lastIndex=0,I.lastIndex=0,r.replace($,(t,o)=>e(o)).replace(I,t=>e(t)));function T(r,e){if(!(typeof r=="string"||Array.isArray(r)))throw new TypeError("Expected the input to be `string | string[]`");if(e={pascalCase:!1,preserveConsecutiveUppercase:!1,...e},Array.isArray(r)?r=r.map(s=>s.trim()).filter(s=>s.length).join("-"):r=r.trim(),r.length===0)return"";const t=e.locale===!1?s=>s.toLowerCase():s=>s.toLocaleLowerCase(e.locale),o=e.locale===!1?s=>s.toUpperCase():s=>s.toLocaleUpperCase(e.locale);return r.length===1?b.test(r)?"":e.pascalCase?o(r):t(r):(r!==t(r)&&(r=N(r,t,o,e.preserveConsecutiveUppercase)),r=r.replace(O,""),r=e.preserveConsecutiveUppercase?L(r,t):t(r),e.pascalCase&&(r=o(r.charAt(0))+r.slice(1)),M(r,o))}function P(r,e,t,o){const a="virtual:storyblok-components",s="\0"+a;return{name:"vite-plugin-storyblok-components",async resolveId(n){if(n===a)return s},async load(n){if(n===s){const f=[],l=[];for await(const[c,d]of Object.entries(e)){const p=await this.resolve("/"+r+"/"+d+".astro");if(p)f.push(`import ${T(c)} from "${p.id}"`);else if(t)l.push(c);else throw new Error(`Component could not be found for blok "${c}"! Does "${"/"+r+"/"+d}.astro" exist?`)}let i="";if(t)if(i=",FallbackComponent",o){const c=await this.resolve("/"+r+"/"+o+".astro");if(!c)throw new Error(`Custom fallback component could not be found. Does "${"/"+r+"/"+o}.astro" exist?`);f.push(`import FallbackComponent from "${c.id}"`)}else f.push("import FallbackComponent from '@storyblok/astro/FallbackComponent.astro';");return`${f.join(";")};export default {${Object.keys(e).filter(c=>!l.includes(c)).map(c=>T(c)).join(",")}${i}}`}}}}function _(r){const e="virtual:storyblok-options",t="\0"+e;return{name:"vite-plugin-storyblok-options",async resolveId(o){if(o===e)return t},async load(o){if(o===t)return`export default ${JSON.stringify(r)}`}}}let w=!1;const C=[],z=r=>new Promise((e,t)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=a=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}w?a():C.push(a)},document.getElementById("storyblok-javascript-bridge")))return;const o=document.createElement("script");o.async=!0,o.src=r,o.id="storyblok-javascript-bridge",o.onerror=a=>t(a),o.onload=a=>{C.forEach(s=>s()),w=!0,e(a)},document.getElementsByTagName("head")[0].appendChild(o)});var D=Object.defineProperty,U=(r,e,t)=>e in r?D(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,E=(r,e,t)=>(U(r,typeof e!="symbol"?e+"":e,t),t);const q=function(r,e){const t={};for(const o in r){const a=r[o];e.indexOf(o)>-1&&a!==null&&(t[o]=a)}return t},B=r=>r==="email",F=()=>({singleTag:"hr"}),J=()=>({tag:"blockquote"}),K=()=>({tag:"ul"}),V=r=>({tag:["pre",{tag:"code",attrs:r.attrs}]}),G=()=>({singleTag:"br"}),W=r=>({tag:`h${r.attrs.level}`}),H=r=>({singleTag:[{tag:"img",attrs:q(r.attrs,["src","alt","title"])}]}),Y=()=>({tag:"li"}),Q=()=>({tag:"ol"}),X=()=>({tag:"p"}),Z=r=>({tag:[{tag:"span",attrs:{["data-type"]:"emoji",["data-name"]:r.attrs.name,emoji:r.attrs.emoji}}]}),ee=()=>({tag:"b"}),te=()=>({tag:"strike"}),re=()=>({tag:"u"}),oe=()=>({tag:"strong"}),se=()=>({tag:"code"}),ae=()=>({tag:"i"}),ne=r=>{const e={...r.attrs},{linktype:t="url"}=r.attrs;if(B(t)&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),e.custom){for(const o in e.custom)e[o]=e.custom[o];delete e.custom}return{tag:[{tag:"a",attrs:e}]}},le=r=>({tag:[{tag:"span",attrs:r.attrs}]}),ie=()=>({tag:"sub"}),ce=()=>({tag:"sup"}),ge=r=>({tag:[{tag:"span",attrs:r.attrs}]}),ue=r=>{var e;return(e=r.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`background-color:${r.attrs.color};`}}]}:{tag:""}},fe=r=>{var e;return(e=r.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`color:${r.attrs.color}`}}]}:{tag:""}},A={nodes:{horizontal_rule:F,blockquote:J,bullet_list:K,code_block:V,hard_break:G,heading:W,image:H,list_item:Y,ordered_list:Q,paragraph:X,emoji:Z},marks:{bold:ee,strike:te,underline:re,strong:oe,code:se,italic:ae,link:ne,styled:le,subscript:ie,superscript:ce,anchor:ge,highlight:ue,textStyle:fe}},de=function(r){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},t=/[&<>"']/g,o=RegExp(t.source);return r&&o.test(r)?r.replace(t,a=>e[a]):r};class S{constructor(e){E(this,"marks"),E(this,"nodes"),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,t={optimizeImages:!1}){if(e&&e.content&&Array.isArray(e.content)){let o="";return e.content.forEach(a=>{o+=this.renderNode(a)}),t.optimizeImages?this.optimizeImages(o,t.optimizeImages):o}return console.warn(`The render method must receive an Object with a "content" field.
 			The "content" field must be an array of nodes as the type ISbRichtext.
 			ISbRichtext:
 				content?: ISbRichtext[]
@@ -29,14 +29,14 @@
 						}
 					],
 					type: 'doc'
-				}`),""}optimizeImages(e,t){let o=0,a=0,s="",n="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(s+=`width="${t.width}" `,o=t.width),typeof t.height=="number"&&t.height>0&&(s+=`height="${t.height}" `,a=t.height),(t.loading==="lazy"||t.loading==="eager")&&(s+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(s+=`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))),s.length>0&&(e=e.replace(/<img/g,`<img ${s.trim()}`));const f=o>0||a>0||n.length>0?`${o}x${a}${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/${f}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,l=>{var i,c;const d=l.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(d&&d.length>0){const p={srcset:(i=t.srcset)==null?void 0:i.map(g=>{if(typeof g=="number")return`//${d}/m/${g}x0${n} ${g}w`;if(typeof g=="object"&&g.length===2){let y=0,j=0;return typeof g[0]=="number"&&(y=g[0]),typeof g[1]=="number"&&(j=g[1]),`//${d}/m/${y}x${j}${n} ${y}w`}}).join(", "),sizes:(c=t.sizes)==null?void 0:c.map(g=>g).join(", ")};let m="";return p.srcset&&(m+=`srcset="${p.srcset}" `),p.sizes&&(m+=`sizes="${p.sizes}" `),l.replace(/<img/g,`<img ${m.trim()}`)}return l})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(a=>{const s=this.getMatchingMark(a);s&&s.tag!==""&&t.push(this.renderOpeningTag(s.tag))});const o=this.getMatchingNode(e);return o&&o.tag&&t.push(this.renderOpeningTag(o.tag)),e.content?e.content.forEach(a=>{t.push(this.renderNode(a))}):e.text?t.push(de(e.text)):o&&o.singleTag?t.push(this.renderTag(o.singleTag," /")):o&&o.html?t.push(o.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),o&&o.tag&&t.push(this.renderClosingTag(o.tag)),e.marks&&e.marks.slice(0).reverse().forEach(a=>{const s=this.getMatchingMark(a);s&&s.tag!==""&&t.push(this.renderClosingTag(s.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(o=>{if(o.constructor===String)return`<${o}${t}>`;{let a=`<${o.tag}`;if(o.attrs)for(const s in o.attrs){const n=o.attrs[s];n!==null&&(a+=` ${s}="${n}"`)}return`${a}${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," /")}}const pe=r=>{if(typeof r!="object"||typeof r._editable>"u")return{};const e=JSON.parse(r._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let he;const be="https://app.storyblok.com/f/storyblok-v2-latest.js",me=(r,e)=>{r.addNode("blok",t=>{let o="";return t.attrs.body.forEach(a=>{o+=e(a.component,a)}),{html:o}})},ye=r=>{var e,t;return!r||((e=r==null?void 0:r.content)==null?void 0:e[0].type)!=="blok"&&!((t=r==null?void 0:r.content)!=null&&t[0].content)},ke=(r,e,t)=>{let o=t||he;if(!o){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ye(r)?"":(e&&(o=new S(e.schema),e.resolver&&me(o,e.resolver)),o.render(r))},ve=()=>z(be);function $e(){return globalThis.storyblokApiInstance||console.error("storyblokApiInstance has not been initialized correctly"),globalThis.storyblokApiInstance}function Ie(r,e){const t=globalThis.storyblokApiInstance.richTextResolver;if(!t){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ke(r,e,t)}function Te(r){const e={useCustomApi:!1,bridge:!0,componentsDir:"src",enableFallbackComponent:!1,...r};return{name:"@storyblok/astro",hooks:{"astro:config:setup":({injectScript:t,updateConfig:o})=>{o({vite:{plugins:[h(e.accessToken,e.useCustomApi,e.apiOptions),P(e.componentsDir,e.components,e.enableFallbackComponent,e.customFallbackComponent),_(e)]}}),t("page-ssr",`
+				}`),""}optimizeImages(e,t){let o=0,a=0,s="",n="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(s+=`width="${t.width}" `,o=t.width),typeof t.height=="number"&&t.height>0&&(s+=`height="${t.height}" `,a=t.height),(t.loading==="lazy"||t.loading==="eager")&&(s+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(s+=`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))),s.length>0&&(e=e.replace(/<img/g,`<img ${s.trim()}`));const f=o>0||a>0||n.length>0?`${o}x${a}${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/${f}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,l=>{var i,c;const d=l.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(d&&d.length>0){const p={srcset:(i=t.srcset)==null?void 0:i.map(u=>{if(typeof u=="number")return`//${d}/m/${u}x0${n} ${u}w`;if(typeof u=="object"&&u.length===2){let y=0,j=0;return typeof u[0]=="number"&&(y=u[0]),typeof u[1]=="number"&&(j=u[1]),`//${d}/m/${y}x${j}${n} ${y}w`}}).join(", "),sizes:(c=t.sizes)==null?void 0:c.map(u=>u).join(", ")};let m="";return p.srcset&&(m+=`srcset="${p.srcset}" `),p.sizes&&(m+=`sizes="${p.sizes}" `),l.replace(/<img/g,`<img ${m.trim()}`)}return l})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(a=>{const s=this.getMatchingMark(a);s&&s.tag!==""&&t.push(this.renderOpeningTag(s.tag))});const o=this.getMatchingNode(e);return o&&o.tag&&t.push(this.renderOpeningTag(o.tag)),e.content?e.content.forEach(a=>{t.push(this.renderNode(a))}):e.text?t.push(de(e.text)):o&&o.singleTag?t.push(this.renderTag(o.singleTag," /")):o&&o.html?t.push(o.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),o&&o.tag&&t.push(this.renderClosingTag(o.tag)),e.marks&&e.marks.slice(0).reverse().forEach(a=>{const s=this.getMatchingMark(a);s&&s.tag!==""&&t.push(this.renderClosingTag(s.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(o=>{if(o.constructor===String)return`<${o}${t}>`;{let a=`<${o.tag}`;if(o.attrs)for(const s in o.attrs){const n=o.attrs[s];n!==null&&(a+=` ${s}="${n}"`)}return`${a}${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," /")}}const pe=r=>{if(typeof r!="object"||typeof r._editable>"u")return{};const e=JSON.parse(r._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let he;const be="https://app.storyblok.com/f/storyblok-v2-latest.js",me=(r,e)=>{r.addNode("blok",t=>{let o="";return t.attrs.body.forEach(a=>{o+=e(a.component,a)}),{html:o}})},ye=r=>{var e,t;return!r||((e=r==null?void 0:r.content)==null?void 0:e[0].type)!=="blok"&&!((t=r==null?void 0:r.content)!=null&&t[0].content)},ke=(r,e,t)=>{let o=t||he;if(!o){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ye(r)?"":(e&&(o=new S(e.schema),e.resolver&&me(o,e.resolver)),o.render(r))},ve=()=>z(be);function $e(){return globalThis.storyblokApiInstance||console.error("storyblokApiInstance has not been initialized correctly"),globalThis.storyblokApiInstance}function Ie(r,e){const t=globalThis.storyblokApiInstance.richTextResolver;if(!t){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ke(r,e,t)}function Te(r){const e={useCustomApi:!1,bridge:!0,componentsDir:"src",enableFallbackComponent:!1,...r};return{name:"@storyblok/astro",hooks:{"astro:config:setup":({injectScript:t,updateConfig:o})=>{if(o({vite:{plugins:[h(e.accessToken,e.useCustomApi,e.apiOptions),P(e.componentsDir,e.components,e.enableFallbackComponent,e.customFallbackComponent),_(e)]}}),t("page-ssr",`
           import { storyblokApiInstance } from "virtual:storyblok-init";
           globalThis.storyblokApiInstance = storyblokApiInstance;
-          `),e.bridge&&t("page",`
+          `),e.bridge){const a={...e.bridge};t("page",`
               import { loadStoryblokBridge } from "@storyblok/astro";
               loadStoryblokBridge().then(() => {
                 const { StoryblokBridge, location } = window;
-                const storyblokInstance = new StoryblokBridge();
+                const storyblokInstance = new StoryblokBridge(${JSON.stringify(a)});
 
                 storyblokInstance.on(["published", "change"], (event) => {
                   if (!event.slugChanged) {
@@ -44,4 +44,4 @@
                   } 
                 });
               });
-            `)}}}}u.RichTextResolver=S,u.RichTextSchema=C,u.default=Te,u.loadStoryblokBridge=ve,u.renderRichText=Ie,u.storyblokEditable=pe,u.useStoryblokApi=$e,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+            `)}}}}}g.RichTextResolver=S,g.RichTextSchema=A,g.default=Te,g.loadStoryblokBridge=ve,g.renderRichText=Ie,g.storyblokEditable=pe,g.useStoryblokApi=$e,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/storyblok-astro.mjs

@@ -20,7 +20,7 @@ function T(r, e, t) {
     }
   };
 }
-const x = /[\p{Lu}]/u, A = /[\p{Ll}]/u, y = /^[\p{Lu}](?![\p{Lu}])/gu, C = /([\p{Alpha}\p{N}_]|$)/u, m = /[_.\- ]+/, S = new RegExp("^" + m.source), k = new RegExp(m.source + C.source, "gu"), $ = new RegExp("\\d+" + C.source, "gu"), j = (r, e, t, o) => {
+const x = /[\p{Lu}]/u, A = /[\p{Ll}]/u, y = /^[\p{Lu}](?![\p{Lu}])/gu, E = /([\p{Alpha}\p{N}_]|$)/u, b = /[_.\- ]+/, S = new RegExp("^" + b.source), k = new RegExp(b.source + E.source, "gu"), $ = new RegExp("\\d+" + E.source, "gu"), j = (r, e, t, o) => {
   let a = !1, s = !1, n = !1, u = !1;
   for (let l = 0; l < r.length; l++) {
     const i = r[l];
@@ -38,7 +38,7 @@ function v(r, e) {
   }, Array.isArray(r) ? r = r.map((s) => s.trim()).filter((s) => s.length).join("-") : r = r.trim(), r.length === 0)
     return "";
   const t = e.locale === !1 ? (s) => s.toLowerCase() : (s) => s.toLocaleLowerCase(e.locale), o = e.locale === !1 ? (s) => s.toUpperCase() : (s) => s.toLocaleUpperCase(e.locale);
-  return r.length === 1 ? m.test(r) ? "" : e.pascalCase ? o(r) : t(r) : (r !== t(r) && (r = j(r, t, o, e.preserveConsecutiveUppercase)), r = r.replace(S, ""), r = e.preserveConsecutiveUppercase ? R(r, t) : t(r), e.pascalCase && (r = o(r.charAt(0)) + r.slice(1)), N(r, o));
+  return r.length === 1 ? b.test(r) ? "" : e.pascalCase ? o(r) : t(r) : (r !== t(r) && (r = j(r, t, o, e.preserveConsecutiveUppercase)), r = r.replace(S, ""), r = e.preserveConsecutiveUppercase ? R(r, t) : t(r), e.pascalCase && (r = o(r.charAt(0)) + r.slice(1)), N(r, o));
 }
 function O(r, e, t, o) {
   const a = "virtual:storyblok-components", s = "\0" + a;
@@ -115,7 +115,7 @@ const w = [], z = (r) => new Promise((e, t) => {
     w.forEach((s) => s()), I = !0, e(a);
   }, document.getElementsByTagName("head")[0].appendChild(o);
 });
-var M = Object.defineProperty, P = (r, e, t) => e in r ? M(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, E = (r, e, t) => (P(r, typeof e != "symbol" ? e + "" : e, t), t);
+var M = Object.defineProperty, P = (r, e, t) => e in r ? M(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, C = (r, e, t) => (P(r, typeof e != "symbol" ? e + "" : e, t), t);
 const _ = function(r, e) {
   const t = {};
   for (const o in r) {
@@ -279,7 +279,7 @@ const _ = function(r, e) {
 };
 class fe {
   constructor(e) {
-    E(this, "marks"), E(this, "nodes"), e || (e = ge), this.marks = e.marks || [], this.nodes = e.nodes || [];
+    C(this, "marks"), C(this, "nodes"), e || (e = ge), this.marks = e.marks || [], this.nodes = e.nodes || [];
   }
   addNode(e, t) {
     this.nodes[e] = t;
@@ -339,8 +339,8 @@ class fe {
             if (typeof g == "number")
               return `//${f}/m/${g}x0${n} ${g}w`;
             if (typeof g == "object" && g.length === 2) {
-              let h = 0, b = 0;
-              return typeof g[0] == "number" && (h = g[0]), typeof g[1] == "number" && (b = g[1]), `//${f}/m/${h}x${b}${n} ${h}w`;
+              let h = 0, m = 0;
+              return typeof g[0] == "number" && (h = g[0]), typeof g[1] == "number" && (m = g[1]), `//${f}/m/${h}x${m}${n} ${h}w`;
             }
           }).join(", "),
           sizes: (c = t.sizes) == null ? void 0 : c.map((g) => g).join(", ")
@@ -434,10 +434,10 @@ const de = "https://app.storyblok.com/f/storyblok-v2-latest.js", he = (r, e) =>
       html: o
     };
   });
-}, me = (r) => {
+}, be = (r) => {
   var e, t;
   return !r || ((e = r == null ? void 0 : r.content) == null ? void 0 : e[0].type) !== "blok" && !((t = r == null ? void 0 : r.content) != null && t[0].content);
-}, be = (r, e, t) => {
+}, me = (r, e, t) => {
   let o = t || pe;
   if (!o) {
     console.error(
@@ -445,7 +445,7 @@ const de = "https://app.storyblok.com/f/storyblok-v2-latest.js", he = (r, e) =>
     );
     return;
   }
-  return me(r) ? "" : (e && (o = new fe(e.schema), e.resolver && he(o, e.resolver)), o.render(r));
+  return be(r) ? "" : (e && (o = new fe(e.schema), e.resolver && he(o, e.resolver)), o.render(r));
 }, ke = () => z(de);
 function $e() {
   return globalThis.storyblokApiInstance || console.error("storyblokApiInstance has not been initialized correctly"), globalThis.storyblokApiInstance;
@@ -458,7 +458,7 @@ function ve(r, e) {
     );
     return;
   }
-  return be(r, e, t);
+  return me(r, e, t);
 }
 function Ie(r) {
   const e = {
@@ -472,7 +472,7 @@ function Ie(r) {
     name: "@storyblok/astro",
     hooks: {
       "astro:config:setup": ({ injectScript: t, updateConfig: o }) => {
-        o({
+        if (o({
           vite: {
             plugins: [
               T(
@@ -495,13 +495,17 @@ function Ie(r) {
           import { storyblokApiInstance } from "virtual:storyblok-init";
           globalThis.storyblokApiInstance = storyblokApiInstance;
           `
-        ), e.bridge && t(
-          "page",
-          `
+        ), e.bridge) {
+          const a = { ...e.bridge };
+          t(
+            "page",
+            `
               import { loadStoryblokBridge } from "@storyblok/astro";
               loadStoryblokBridge().then(() => {
                 const { StoryblokBridge, location } = window;
-                const storyblokInstance = new StoryblokBridge();
+                const storyblokInstance = new StoryblokBridge(${JSON.stringify(
+              a
+            )});
 
                 storyblokInstance.on(["published", "change"], (event) => {
                   if (!event.slugChanged) {
@@ -510,7 +514,8 @@ function Ie(r) {
                 });
               });
             `
-        );
+          );
+        }
       }
     }
   };

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import { StoryblokClient } from "@storyblok/js";
 import type { AstroIntegration } from "astro";
-import type { ISbConfig, ISbRichtext, SbRichTextOptions } from "./types";
+import type { ISbConfig, ISbRichtext, SbRichTextOptions, StoryblokBridgeConfigV2 } from "./types";
 export { storyblokEditable, loadStoryblokBridge, RichTextResolver, RichTextSchema, } from "@storyblok/js";
 export declare function useStoryblokApi(): StoryblokClient;
 export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string;
@@ -18,9 +18,9 @@ export type IntegrationOptions = {
      */
     apiOptions?: ISbConfig;
     /**
-     * A boolean to enable/disable the Storyblok JavaScript Bridge. Enabled by default.
+     * A boolean to enable/disable the Storyblok JavaScript Bridge or provide a StoryblokBridgeConfigV2 configuration object. Enabled by default.
      */
-    bridge?: boolean;
+    bridge?: boolean | StoryblokBridgeConfigV2;
     /**
      * An object containing your Astro components to their Storyblok equivalents.
      * Example:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/astro",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "main": "./dist/storyblok-astro.js",
   "module": "./dist/storyblok-astro.mjs",
@@ -39,12 +39,12 @@
   "devDependencies": {
     "@cypress/vite-dev-server": "^5.0.5",
     "@rollup/plugin-dynamic-import-vars": "^2.0.3",
-    "@types/node": "20.3.1",
-    "astro": "2.7.0",
-    "cypress": "^12.15.0",
+    "@types/node": "20.3.2",
+    "astro": "2.7.1",
+    "cypress": "^12.16.0",
     "eslint-plugin-cypress": "^2.13.3",
     "start-server-and-test": "^2.0.0",
-    "typescript": "5.1.3",
+    "typescript": "5.1.5",
     "vite": "^4.3.9",
     "vite-plugin-dts": "^2.3.0"
   },