@storyblok/astro 2.5.12 → 3.0.1-next.1

package/README.md

@@ -31,6 +31,9 @@
 
 If you are in a hurry, check out our official **[live demo](https://stackblitz.com/edit/astro-sdk-demo)** on StackBlitz.
 
+> **Note**  
+> Since Astro 3.0 dropped Node 16 support, the StackBlitz live demo currently does not work.
+
 ## Usage
 
 > If you are first-time user of Storyblok, read the [Getting Started](https://www.storyblok.com/docs/guide/getting-started?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro) guide to get a project ready in less than 5 minutes.
@@ -225,7 +228,7 @@ import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
 export async function getStaticPaths() {
   const storyblokApi = useStoryblokApi();
 
-  const { data } = await storyblokApi.get("cdn/links", {
+  const { data } = await storyblokApi.getAll("cdn/links", {
     version: "draft",
   });
   let links = data.links;
@@ -284,6 +287,9 @@ If you want to deploy a dedicated preview environment with the Bridge enabled, a
 
 ### Rendering Rich Text
 
+> **Note**  
+> While @storyblok/astro provides basic richtext rendering capabilities, for advanced use cases, it is highly recommended to use [storyblok-rich-text-astro-renderer](https://github.com/NordSecurity/storyblok-rich-text-astro-renderer).
+
 You can easily render rich text by using either the `renderRichText` function or the `<RichTextRenderer />` component, both of which are included in `@storyblok/astro`.
 Use `renderRichText`, which only supports parsing and returning native HTML tags, if you are not embedding `bloks` in your rich text. Then you can use the [`set:html` directive](https://docs.astro.build/en/reference/directives-reference/#sethtml):
 
@@ -370,6 +376,9 @@ const options = {
 
 ```
 
+> **Note**  
+> Please be aware that the `<RichTextRenderer />` component is **not** supported when using Astro v1. Make sure to use Astro v2 or v3.
+
 ## API
 
 ### useStoryblokApi()

package/dist/storyblok-astro.js

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

package/dist/storyblok-astro.mjs

@@ -20,14 +20,14 @@ function E(r, t, e) {
     }
   };
 }
-const T = /[\p{Lu}]/u, x = /[\p{Ll}]/u, k = /^[\p{Lu}](?![\p{Lu}])/gu, A = /([\p{Alpha}\p{N}_]|$)/u, b = /[_.\- ]+/, S = new RegExp("^" + b.source), $ = new RegExp(b.source + A.source, "gu"), v = new RegExp("\\d+" + A.source, "gu"), R = (r, t, e, o) => {
+const T = /[\p{Lu}]/u, x = /[\p{Ll}]/u, k = /^[\p{Lu}](?![\p{Lu}])/gu, A = /([\p{Alpha}\p{N}_]|$)/u, b = /[_.\- ]+/, j = new RegExp("^" + b.source), $ = new RegExp(b.source + A.source, "gu"), v = new RegExp("\\d+" + A.source, "gu"), S = (r, t, e, o) => {
   let s = !1, a = !1, n = !1, c = !1;
   for (let l = 0; l < r.length; l++) {
     const i = r[l];
     c = l > 2 ? r[l - 3] === "-" : !0, s && T.test(i) ? (r = r.slice(0, l) + "-" + r.slice(l), s = !1, n = a, a = !0, l++) : a && n && x.test(i) && (!c || o) ? (r = r.slice(0, l - 1) + "-" + r.slice(l - 1), n = a, a = !1, s = !0) : (s = t(i) === i && e(i) !== i, n = a, a = e(i) === i && t(i) !== i);
   }
   return r;
-}, j = (r, t) => (k.lastIndex = 0, r.replaceAll(k, (e) => t(e))), O = (r, t) => ($.lastIndex = 0, v.lastIndex = 0, r.replaceAll(v, (e, o, s) => ["_", "-"].includes(r.charAt(s + e.length)) ? e : t(e)).replaceAll($, (e, o) => t(o)));
+}, R = (r, t) => (k.lastIndex = 0, r.replaceAll(k, (e) => t(e))), O = (r, t) => ($.lastIndex = 0, v.lastIndex = 0, r.replaceAll(v, (e, o, s) => ["_", "-"].includes(r.charAt(s + e.length)) ? e : t(e)).replaceAll($, (e, o) => t(o)));
 function I(r, t) {
   if (!(typeof r == "string" || Array.isArray(r)))
     throw new TypeError("Expected the input to be `string | string[]`");
@@ -38,7 +38,7 @@ function I(r, t) {
   }, Array.isArray(r) ? r = r.map((a) => a.trim()).filter((a) => a.length).join("-") : r = r.trim(), r.length === 0)
     return "";
   const e = t.locale === !1 ? (a) => a.toLowerCase() : (a) => a.toLocaleLowerCase(t.locale), o = t.locale === !1 ? (a) => a.toUpperCase() : (a) => a.toLocaleUpperCase(t.locale);
-  return r.length === 1 ? b.test(r) ? "" : t.pascalCase ? o(r) : e(r) : (r !== e(r) && (r = R(r, e, o, t.preserveConsecutiveUppercase)), r = r.replace(S, ""), r = t.preserveConsecutiveUppercase ? j(r, e) : e(r), t.pascalCase && (r = o(r.charAt(0)) + r.slice(1)), O(r, o));
+  return r.length === 1 ? b.test(r) ? "" : t.pascalCase ? o(r) : e(r) : (r !== e(r) && (r = S(r, e, o, t.preserveConsecutiveUppercase)), r = r.replace(j, ""), r = t.preserveConsecutiveUppercase ? R(r, e) : e(r), t.pascalCase && (r = o(r.charAt(0)) + r.slice(1)), O(r, o));
 }
 function N(r, t, e, o) {
   const s = "virtual:storyblok-components", a = "\0" + s;
@@ -190,11 +190,11 @@ const U = function(r, t) {
     t.indexOf(o) > -1 && s !== null && (e[o] = s);
   }
   return e;
-}, D = (r) => r === "email", q = () => ({
+}, D = (r) => r === "email", B = () => ({
   singleTag: "hr"
-}), F = () => ({
+}), q = () => ({
   tag: "blockquote"
-}), B = () => ({
+}), F = () => ({
   tag: "ul"
 }), J = (r) => ({
   tag: [
@@ -307,9 +307,9 @@ const U = function(r, t) {
   };
 }, ue = {
   nodes: {
-    horizontal_rule: q,
-    blockquote: F,
-    bullet_list: B,
+    horizontal_rule: B,
+    blockquote: q,
+    bullet_list: F,
     code_block: J,
     hard_break: K,
     heading: V,
@@ -491,8 +491,8 @@ const ke = (r) => {
     "data-blok-uid": t.id + "-" + t.uid
   } : {};
 };
-let de;
-const he = "https://app.storyblok.com/f/storyblok-v2-latest.js", me = (r, t) => {
+let de, he = "https://app.storyblok.com/f/storyblok-v2-latest.js";
+const me = (r, t) => {
   r.addNode("blok", (e) => {
     let o = "";
     return e.attrs.body.forEach((s) => {
@@ -560,16 +560,21 @@ function we(r) {
           globalThis.storyblokApiInstance = storyblokApiInstance;
           `
         ), t.bridge) {
-          const s = { ...t.bridge };
+          let s = "";
+          if (typeof t.bridge == "object") {
+            const a = { ...t.bridge };
+            s = `const storyblokInstance = new StoryblokBridge(${JSON.stringify(
+              a
+            )});`;
+          } else
+            s = "const storyblokInstance = new StoryblokBridge()";
           e(
             "page",
             `
               import { loadStoryblokBridge } from "@storyblok/astro";
               loadStoryblokBridge().then(() => {
                 const { StoryblokBridge, location } = window;
-                const storyblokInstance = new StoryblokBridge(${JSON.stringify(
-              s
-            )});
+                ${s}
 
                 storyblokInstance.on(["published", "change"], (event) => {
                   if (!event.slugChanged) {

package/dist/types/index.d.ts

@@ -1,6 +1,5 @@
-import { StoryblokClient } from "@storyblok/js";
 import type { AstroIntegration } from "astro";
-import type { ISbConfig, ISbRichtext, SbRichTextOptions, StoryblokBridgeConfigV2 } from "./types";
+import type { ISbConfig, ISbRichtext, SbRichTextOptions, StoryblokBridgeConfigV2, StoryblokClient } from "./types";
 export { storyblokEditable, loadStoryblokBridge, RichTextResolver, RichTextSchema, } from "@storyblok/js";
 export declare function useStoryblokApi(): StoryblokClient;
 export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/astro",
-  "version": "2.5.12",
+  "version": "3.0.1-next.1",
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "main": "./dist/storyblok-astro.js",
   "module": "./dist/storyblok-astro.mjs",
@@ -25,28 +25,31 @@
     "dev": "vite build --watch",
     "build": "vite build",
     "test": "npm run test:e2e",
-    "test:e2e": "start-server-and-test cy:playground http-get://localhost:3000/ cy:run",
-    "test:e2e-watch": "start-server-and-test cy:playground http-get://localhost:3000/ cy:open",
+    "test:e2e": "start-server-and-test cy:playground http-get://localhost:4321/ cy:run",
+    "test:e2e-watch": "start-server-and-test cy:playground http-get://localhost:4321/ cy:open",
     "cy:playground": "npm run dev --prefix ../playground-test",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
-    "@storyblok/js": "^2.2.12",
+    "@storyblok/js": "^2.3.0",
     "camelcase": "^8.0.0"
   },
   "devDependencies": {
-    "@cypress/vite-dev-server": "^5.0.5",
+    "@cypress/vite-dev-server": "^5.0.6",
     "@rollup/plugin-dynamic-import-vars": "^2.0.5",
-    "@types/node": "20.5.4",
-    "astro": "2.10.13",
-    "cypress": "^12.17.4",
+    "@types/node": "20.6.2",
+    "astro": "^3.1.0",
+    "cypress": "^13.2.0",
     "eslint-plugin-cypress": "^2.14.0",
     "start-server-and-test": "^2.0.0",
-    "typescript": "5.1.6",
+    "typescript": "5.2.2",
     "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.5.2"
+    "vite-plugin-dts": "^3.5.3"
+  },
+  "peerDependencies": {
+    "astro": "^2.0.0 || ^3.0.0"
   },
   "repository": {
     "type": "git",
@@ -64,7 +67,11 @@
   "homepage": "https://github.com/storyblok/storyblok-astro",
   "release": {
     "branches": [
-      "main"
+      "main",
+      {
+        "name": "next",
+        "prerelease": true
+      }
     ]
   },
   "publishConfig": {