@storyblok/astro 2.1.0 → 2.2.0

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
 	<a  href="https://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro" align="center">
-		<img src="https://a.storyblok.com/f/88751/1500x500/7974d6bc34/storyblok-astro.png" width="300" height="100" alt="Storyblok + Astro">
+		<img src="https://a.storyblok.com/f/88751/1500x500/7974d6bc34/storyblok-astro.png#1" width="300" height="100" alt="Storyblok + Astro">
 	</a>
 	<h1 align="center">@storyblok/astro</h1>
 	<p align="center">Astro integration for the <a href="http://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro" target="_blank">Storyblok</a> Headless CMS.</p> <br />
@@ -73,6 +73,8 @@ storyblok({
   apiOptions: {}, // storyblok-js-client options
   components: {},
   componentsDir: "src",
+  enableFallbackComponent: false,
+  customFallbackComponent: "",
   useCustomApi: false,
 });
 ```
@@ -130,7 +132,7 @@ components: {
 >
 > ```js
 > storyblok({
->   componentsDir: "/app/",
+>   componentsDir: "app",
 > });
 > ```
 >
@@ -167,6 +169,10 @@ const { blok } = Astro.props
 
 > Note: The `blok` is the actual blok data coming from [Storblok's Content Delivery API](https://www.storyblok.com/docs/api/content-delivery/v2?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro).
 
+#### Using fallback components
+
+By default, `@storyblok/astro` throws an error if a component is not implemented. Setting `enableFallbackComponent` to `true` bypasses that behavior, rendering a fallback component in the frontend instead. You can also use a custom fallback component by (for example) setting `customFallbackComponent: "storyblok/MyCustomFallback"`.
+
 #### Using partial hydration
 
 If you want to use partial hydration with any of the [frameworks supported by Astro](https://docs.astro.build/en/guides/integrations-guide/#article), follow these steps:

package/StoryblokComponent.astro

@@ -1,7 +1,9 @@
 ---
 import components from "virtual:storyblok-components";
+import options from "virtual:storyblok-options";
 import camelcase from "camelcase";
 import type { SbBlokData } from "./types";
+import type { AstroComponentFactory } from "astro/dist/runtime/server";
 
 interface Props {
   blok: SbBlokData;
@@ -11,21 +13,25 @@ interface Props {
 const { blok, ...props } = Astro.props;
 
 /**
- * convert blok components to camel case to match vite-plugin-storyblok
+ * convert blok components to camel case to match vite-plugin-storyblok-components
  */
-const key = camelcase(blok.component);
+let key = camelcase(blok.component);
 
-if (!(key in components)) {
-  /**
-   * Component not found! Log an error with details on the blok name that could not be found
-   * TODO: Add support for a placeholder component as a fallback?
-   */
-  throw new Error(
-    `Component could not be found for blok "${blok.component}"! Is it defined in astro.config.mjs?`
-  );
-}
+const componentFound: boolean = key in components;
+
+let Component: AstroComponentFactory;
 
-const Component = components[key];
+if (!componentFound) {
+  if (!options.enableFallbackComponent)
+    throw new Error(
+      `Component could not be found for blok "${blok.component}"! Is it defined in astro.config.mjs?`
+    );
+  else {
+    Component = components["FallbackComponent"];
+  }
+} else {
+  Component = components[key];
+}
 ---
 
 <Component blok={blok} {...props} />

package/dist/storyblok-astro.js

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

package/dist/storyblok-astro.mjs

@@ -1,13 +1,13 @@
-function A(r, e, t) {
-  const s = "virtual:storyblok-init", a = "\0" + s;
+function T(r, e, t) {
+  const o = "virtual:storyblok-init", a = "\0" + o;
   return {
     name: "vite-plugin-storyblok-init",
-    async resolveId(o) {
-      if (o === s)
+    async resolveId(s) {
+      if (s === o)
         return a;
     },
-    async load(o) {
-      if (o === a)
+    async load(s) {
+      if (s === a)
         return `
           import { storyblokInit, apiPlugin } from "@storyblok/js";
           const { storyblokApi } = storyblokInit({
@@ -20,14 +20,14 @@ function A(r, e, t) {
     }
   };
 }
-const j = /[\p{Lu}]/u, C = /[\p{Ll}]/u, y = /^[\p{Lu}](?![\p{Lu}])/gu, E = /([\p{Alpha}\p{N}_]|$)/u, p = /[_.\- ]+/, x = new RegExp("^" + p.source), k = new RegExp(p.source + E.source, "gu"), $ = new RegExp("\\d+" + E.source, "gu"), S = (r, e, t, s) => {
-  let a = !1, o = !1, i = !1, g = !1;
-  for (let n = 0; n < r.length; n++) {
-    const l = r[n];
-    g = n > 2 ? r[n - 3] === "-" : !0, a && j.test(l) ? (r = r.slice(0, n) + "-" + r.slice(n), a = !1, i = o, o = !0, n++) : o && i && C.test(l) && (!g || s) ? (r = r.slice(0, n - 1) + "-" + r.slice(n - 1), i = o, o = !1, a = !0) : (a = e(l) === l && t(l) !== l, i = o, o = t(l) === l && e(l) !== l);
+const A = /[\p{Lu}]/u, j = /[\p{Ll}]/u, y = /^[\p{Lu}](?![\p{Lu}])/gu, E = /([\p{Alpha}\p{N}_]|$)/u, b = /[_.\- ]+/, x = new RegExp("^" + b.source), k = new RegExp(b.source + E.source, "gu"), $ = new RegExp("\\d+" + E.source, "gu"), S = (r, e, t, o) => {
+  let a = !1, s = !1, l = !1, u = !1;
+  for (let i = 0; i < r.length; i++) {
+    const n = r[i];
+    u = i > 2 ? r[i - 3] === "-" : !0, a && A.test(n) ? (r = r.slice(0, i) + "-" + r.slice(i), a = !1, l = s, s = !0, i++) : s && l && j.test(n) && (!u || o) ? (r = r.slice(0, i - 1) + "-" + r.slice(i - 1), l = s, s = !1, a = !0) : (a = e(n) === n && t(n) !== n, l = s, s = t(n) === n && e(n) !== n);
   }
   return r;
-}, R = (r, e) => (y.lastIndex = 0, r.replace(y, (t) => e(t))), N = (r, e) => (k.lastIndex = 0, $.lastIndex = 0, r.replace(k, (t, s) => e(s)).replace($, (t) => e(t)));
+}, R = (r, e) => (y.lastIndex = 0, r.replace(y, (t) => e(t))), N = (r, e) => (k.lastIndex = 0, $.lastIndex = 0, r.replace(k, (t, o) => e(o)).replace($, (t) => e(t)));
 function v(r, e) {
   if (!(typeof r == "string" || Array.isArray(r)))
     throw new TypeError("Expected the input to be `string | string[]`");
@@ -35,37 +35,71 @@ function v(r, e) {
     pascalCase: !1,
     preserveConsecutiveUppercase: !1,
     ...e
-  }, Array.isArray(r) ? r = r.map((o) => o.trim()).filter((o) => o.length).join("-") : r = r.trim(), r.length === 0)
+  }, 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 ? (o) => o.toLowerCase() : (o) => o.toLocaleLowerCase(e.locale), s = e.locale === !1 ? (o) => o.toUpperCase() : (o) => o.toLocaleUpperCase(e.locale);
-  return r.length === 1 ? p.test(r) ? "" : e.pascalCase ? s(r) : t(r) : (r !== t(r) && (r = S(r, t, s, e.preserveConsecutiveUppercase)), r = r.replace(x, ""), r = e.preserveConsecutiveUppercase ? R(r, t) : t(r), e.pascalCase && (r = s(r.charAt(0)) + r.slice(1)), N(r, s));
+  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 = S(r, t, o, e.preserveConsecutiveUppercase)), r = r.replace(x, ""), r = e.preserveConsecutiveUppercase ? R(r, t) : t(r), e.pascalCase && (r = o(r.charAt(0)) + r.slice(1)), N(r, o));
 }
-function L(r, e) {
-  const t = "virtual:storyblok-components", s = "\0" + t;
+function L(r, e, t, o) {
+  const a = "virtual:storyblok-components", s = "\0" + a;
   return {
     name: "vite-plugin-storyblok-components",
-    async resolveId(a) {
-      if (a === t)
+    async resolveId(l) {
+      if (l === a)
         return s;
     },
-    async load(a) {
-      if (a === s) {
-        const o = [];
-        for await (const [i, g] of Object.entries(e)) {
-          const n = await this.resolve(
-            "/" + r + "/" + g + ".astro"
+    async load(l) {
+      if (l === s) {
+        const u = [], i = [];
+        for await (const [c, f] of Object.entries(e)) {
+          const d = await this.resolve(
+            "/" + r + "/" + f + ".astro"
           );
-          if (!n)
+          if (d)
+            u.push(`import ${v(c)} from "${d.id}"`);
+          else if (t)
+            i.push(c);
+          else
             throw new Error(
-              `Component could not be found for blok "${i}"! Does "${"/" + r + "/" + g}.astro" exist?`
+              `Component could not be found for blok "${c}"! Does "${"/" + r + "/" + f}.astro" exist?`
             );
-          o.push(`import ${v(i)} from "${n.id}"`);
         }
-        return `${o.join(";")};export default {${Object.keys(e).map((i) => v(i)).join(",")}}`;
+        let n = "";
+        if (t)
+          if (n = ",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?`
+              );
+            u.push(
+              `import FallbackComponent from "${c.id}"`
+            );
+          } else
+            u.push(
+              "import FallbackComponent from '@storyblok/astro/FallbackComponent.astro';"
+            );
+        return `${u.join(";")};export default {${Object.keys(e).filter((c) => !i.includes(c)).map((c) => v(c)).join(",")}${n}}`;
       }
     }
   };
 }
+function O(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 I = !1;
 const w = [], z = (r) => new Promise((e, t) => {
   if (typeof window > "u" || (window.storyblokRegisterEvent = (a) => {
@@ -76,22 +110,22 @@ const w = [], z = (r) => new Promise((e, t) => {
     I ? a() : w.push(a);
   }, document.getElementById("storyblok-javascript-bridge")))
     return;
-  const s = document.createElement("script");
-  s.async = !0, s.src = r, s.id = "storyblok-javascript-bridge", s.onerror = (a) => t(a), s.onload = (a) => {
-    w.forEach((o) => o()), I = !0, e(a);
-  }, document.getElementsByTagName("head")[0].appendChild(s);
+  const o = document.createElement("script");
+  o.async = !0, o.src = r, o.id = "storyblok-javascript-bridge", o.onerror = (a) => t(a), o.onload = (a) => {
+    w.forEach((s) => s()), I = !0, e(a);
+  }, document.getElementsByTagName("head")[0].appendChild(o);
 });
-var O = Object.defineProperty, P = (r, e, t) => e in r ? O(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, T = (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 s in r) {
-    const a = r[s];
-    e.indexOf(s) > -1 && a !== null && (t[s] = a);
+  for (const o in r) {
+    const a = r[o];
+    e.indexOf(o) > -1 && a !== null && (t[o] = a);
   }
   return t;
-}, M = (r) => r === "email", D = () => ({
+}, D = (r) => r === "email", U = () => ({
   singleTag: "hr"
-}), U = () => ({
+}), F = () => ({
   tag: "blockquote"
 }), q = () => ({
   tag: "ul"
@@ -103,9 +137,9 @@ const _ = function(r, e) {
       attrs: r.attrs
     }
   ]
-}), F = () => ({
+}), J = () => ({
   singleTag: "br"
-}), J = (r) => ({
+}), K = (r) => ({
   tag: `h${r.attrs.level}`
 }), V = (r) => ({
   singleTag: [
@@ -116,11 +150,11 @@ const _ = function(r, e) {
   ]
 }), G = () => ({
   tag: "li"
-}), K = () => ({
-  tag: "ol"
 }), W = () => ({
+  tag: "ol"
+}), Y = () => ({
   tag: "p"
-}), Y = (r) => ({
+}), H = (r) => ({
   tag: [
     {
       tag: "span",
@@ -131,23 +165,23 @@ const _ = function(r, e) {
       }
     }
   ]
-}), H = () => ({
-  tag: "b"
 }), Q = () => ({
-  tag: "strike"
+  tag: "b"
 }), X = () => ({
-  tag: "u"
+  tag: "strike"
 }), Z = () => ({
-  tag: "strong"
+  tag: "u"
 }), ee = () => ({
-  tag: "code"
+  tag: "strong"
 }), te = () => ({
+  tag: "code"
+}), re = () => ({
   tag: "i"
-}), re = (r) => {
+}), oe = (r) => {
   const e = { ...r.attrs }, { linktype: t = "url" } = r.attrs;
-  if (M(t) && (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];
+  if (D(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 {
@@ -165,9 +199,9 @@ const _ = function(r, e) {
       attrs: r.attrs
     }
   ]
-}), oe = () => ({
-  tag: "sub"
 }), ae = () => ({
+  tag: "sub"
+}), le = () => ({
   tag: "sup"
 }), ie = (r) => ({
   tag: [
@@ -185,7 +219,7 @@ const _ = function(r, e) {
       }
     }
   ]
-}), le = (r) => ({
+}), ce = (r) => ({
   tag: [
     {
       tag: "span",
@@ -194,48 +228,48 @@ const _ = function(r, e) {
       }
     }
   ]
-}), ce = {
+}), ge = {
   nodes: {
-    horizontal_rule: D,
-    blockquote: U,
+    horizontal_rule: U,
+    blockquote: F,
     bullet_list: q,
     code_block: B,
-    hard_break: F,
-    heading: J,
+    hard_break: J,
+    heading: K,
     image: V,
     list_item: G,
-    ordered_list: K,
-    paragraph: W,
-    emoji: Y
+    ordered_list: W,
+    paragraph: Y,
+    emoji: H
   },
   marks: {
-    bold: H,
-    strike: Q,
-    underline: X,
-    strong: Z,
-    code: ee,
-    italic: te,
-    link: re,
+    bold: Q,
+    strike: X,
+    underline: Z,
+    strong: ee,
+    code: te,
+    italic: re,
+    link: oe,
     styled: se,
-    subscript: oe,
-    superscript: ae,
+    subscript: ae,
+    superscript: le,
     anchor: ie,
     highlight: ne,
-    textStyle: le
+    textStyle: ce
   }
-}, ge = function(r) {
+}, ue = function(r) {
   const e = {
     "&": "&amp;",
     "<": "&lt;",
     ">": "&gt;",
     '"': "&quot;",
     "'": "&#39;"
-  }, t = /[&<>"']/g, s = RegExp(t.source);
-  return r && s.test(r) ? r.replace(t, (a) => e[a]) : r;
+  }, t = /[&<>"']/g, o = RegExp(t.source);
+  return r && o.test(r) ? r.replace(t, (a) => e[a]) : r;
 };
-class ue {
+class fe {
   constructor(e) {
-    T(this, "marks"), T(this, "nodes"), e || (e = ce), 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;
@@ -245,69 +279,69 @@ class ue {
   }
   render(e, t = { optimizeImages: !1 }) {
     if (e && e.content && Array.isArray(e.content)) {
-      let s = "";
+      let o = "";
       return e.content.forEach((a) => {
-        s += this.renderNode(a);
-      }), t.optimizeImages ? this.optimizeImages(s, t.optimizeImages) : s;
+        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, which is an array"
     ), "";
   }
   optimizeImages(e, t) {
-    let s = 0, a = 0, o = "", i = "";
-    typeof t != "boolean" && (typeof t.width == "number" && t.width > 0 && (o += `width="${t.width}" `, s = t.width), typeof t.height == "number" && t.height > 0 && (o += `height="${t.height}" `, a = t.height), (t.loading === "lazy" || t.loading === "eager") && (o += `loading="${t.loading}" `), typeof t.class == "string" && t.class.length > 0 && (o += `class="${t.class}" `), t.filters && (typeof t.filters.blur == "number" && t.filters.blur >= 0 && t.filters.blur <= 100 && (i += `:blur(${t.filters.blur})`), typeof t.filters.brightness == "number" && t.filters.brightness >= -100 && t.filters.brightness <= 100 && (i += `:brightness(${t.filters.brightness})`), t.filters.fill && (t.filters.fill.match(/[0-9A-Fa-f]{6}/g) || t.filters.fill === "transparent") && (i += `:fill(${t.filters.fill})`), t.filters.format && ["webp", "png", "jpeg"].includes(t.filters.format) && (i += `:format(${t.filters.format})`), typeof t.filters.grayscale == "boolean" && t.filters.grayscale && (i += ":grayscale()"), typeof t.filters.quality == "number" && t.filters.quality >= 0 && t.filters.quality <= 100 && (i += `:quality(${t.filters.quality})`), t.filters.rotate && [90, 180, 270].includes(t.filters.rotate) && (i += `:rotate(${t.filters.rotate})`), i.length > 0 && (i = "/filters" + i))), o.length > 0 && (e = e.replace(/<img/g, `<img ${o.trim()}`));
-    const g = s > 0 || a > 0 || i.length > 0 ? `${s}x${a}${i}` : "";
+    let o = 0, a = 0, s = "", l = "";
+    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 && (l += `:blur(${t.filters.blur})`), typeof t.filters.brightness == "number" && t.filters.brightness >= -100 && t.filters.brightness <= 100 && (l += `:brightness(${t.filters.brightness})`), t.filters.fill && (t.filters.fill.match(/[0-9A-Fa-f]{6}/g) || t.filters.fill === "transparent") && (l += `:fill(${t.filters.fill})`), t.filters.format && ["webp", "png", "jpeg"].includes(t.filters.format) && (l += `:format(${t.filters.format})`), typeof t.filters.grayscale == "boolean" && t.filters.grayscale && (l += ":grayscale()"), typeof t.filters.quality == "number" && t.filters.quality >= 0 && t.filters.quality <= 100 && (l += `:quality(${t.filters.quality})`), t.filters.rotate && [90, 180, 270].includes(t.filters.rotate) && (l += `:rotate(${t.filters.rotate})`), l.length > 0 && (l = "/filters" + l))), s.length > 0 && (e = e.replace(/<img/g, `<img ${s.trim()}`));
+    const u = o > 0 || a > 0 || l.length > 0 ? `${o}x${a}${l}` : "";
     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/${g}`
-    ), typeof t != "boolean" && (t.sizes || t.srcset) && (e = e.replace(/<img.*?src=["|'](.*?)["|']/g, (n) => {
-      var l, m;
-      const u = n.match(
+      `a.storyblok.com/f/$1/$2.$3/m/${u}`
+    ), typeof t != "boolean" && (t.sizes || t.srcset) && (e = e.replace(/<img.*?src=["|'](.*?)["|']/g, (i) => {
+      var n, c;
+      const f = i.match(
         /a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g
       );
-      if (u && u.length > 0) {
-        const f = {
-          srcset: (l = t.srcset) == null ? void 0 : l.map((c) => {
-            if (typeof c == "number")
-              return `//${u}/m/${c}x0${i} ${c}w`;
-            if (typeof c == "object" && c.length === 2) {
-              let h = 0, b = 0;
-              return typeof c[0] == "number" && (h = c[0]), typeof c[1] == "number" && (b = c[1]), `//${u}/m/${h}x${b}${i} ${h}w`;
+      if (f && f.length > 0) {
+        const d = {
+          srcset: (n = t.srcset) == null ? void 0 : n.map((g) => {
+            if (typeof g == "number")
+              return `//${f}/m/${g}x0${l} ${g}w`;
+            if (typeof g == "object" && g.length === 2) {
+              let p = 0, m = 0;
+              return typeof g[0] == "number" && (p = g[0]), typeof g[1] == "number" && (m = g[1]), `//${f}/m/${p}x${m}${l} ${p}w`;
             }
           }).join(", "),
-          sizes: (m = t.sizes) == null ? void 0 : m.map((c) => c).join(", ")
+          sizes: (c = t.sizes) == null ? void 0 : c.map((g) => g).join(", ")
         };
-        let d = "";
-        return f.srcset && (d += `srcset="${f.srcset}" `), f.sizes && (d += `sizes="${f.sizes}" `), n.replace(/<img/g, `<img ${d.trim()}`);
+        let h = "";
+        return d.srcset && (h += `srcset="${d.srcset}" `), d.sizes && (h += `sizes="${d.sizes}" `), i.replace(/<img/g, `<img ${h.trim()}`);
       }
-      return n;
+      return i;
     })), e;
   }
   renderNode(e) {
     const t = [];
     e.marks && e.marks.forEach((a) => {
-      const o = this.getMatchingMark(a);
-      o && t.push(this.renderOpeningTag(o.tag));
+      const s = this.getMatchingMark(a);
+      s && t.push(this.renderOpeningTag(s.tag));
     });
-    const s = this.getMatchingNode(e);
-    return s && s.tag && t.push(this.renderOpeningTag(s.tag)), e.content ? e.content.forEach((a) => {
+    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(ge(e.text)) : s && s.singleTag ? t.push(this.renderTag(s.singleTag, " /")) : s && s.html ? t.push(s.html) : e.type === "emoji" && t.push(this.renderEmoji(e)), s && s.tag && t.push(this.renderClosingTag(s.tag)), e.marks && e.marks.slice(0).reverse().forEach((a) => {
-      const o = this.getMatchingMark(a);
-      o && t.push(this.renderClosingTag(o.tag));
+    }) : e.text ? t.push(ue(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 && t.push(this.renderClosingTag(s.tag));
     }), t.join("");
   }
   renderTag(e, t) {
-    return e.constructor === String ? `<${e}${t}>` : e.map((s) => {
-      if (s.constructor === String)
-        return `<${s}${t}>`;
+    return e.constructor === String ? `<${e}${t}>` : e.map((o) => {
+      if (o.constructor === String)
+        return `<${o}${t}>`;
       {
-        let a = `<${s.tag}`;
-        if (s.attrs)
-          for (const o in s.attrs) {
-            const i = s.attrs[o];
-            i !== null && (a += ` ${o}="${i}"`);
+        let a = `<${o.tag}`;
+        if (o.attrs)
+          for (const s in o.attrs) {
+            const l = o.attrs[s];
+            l !== null && (a += ` ${s}="${l}"`);
           }
         return `${a}${t}>`;
       }
@@ -357,32 +391,32 @@ const me = (r) => {
     "data-blok-uid": e.id + "-" + e.uid
   };
 };
-let fe;
-const de = "https://app.storyblok.com/f/storyblok-v2-latest.js", he = (r, e) => {
+let de;
+const he = "https://app.storyblok.com/f/storyblok-v2-latest.js", pe = (r, e) => {
   r.addNode("blok", (t) => {
-    let s = "";
+    let o = "";
     return t.attrs.body.forEach((a) => {
-      s += e(a.component, a);
+      o += e(a.component, a);
     }), {
-      html: s
+      html: o
     };
   });
-}, pe = (r, e, t) => {
-  let s = t || fe;
-  if (!s) {
+}, be = (r, e, t) => {
+  let o = t || de;
+  if (!o) {
     console.error(
       "Please initialize the Storyblok SDK before calling the renderRichText function"
     );
     return;
   }
-  return r === "" ? "" : r ? (e && (s = new ue(e.schema), e.resolver && he(s, e.resolver)), s.render(r)) : (console.warn(`${r} is not a valid Richtext object. This might be because the value of the richtext field is empty.
+  return r === "" ? "" : r ? (e && (o = new fe(e.schema), e.resolver && pe(o, e.resolver)), o.render(r)) : (console.warn(`${r} is not a valid Richtext object. This might be because the value of the richtext field is empty.
     
   For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`), "");
-}, be = () => z(de);
-function ye() {
+}, ye = () => z(he);
+function ke() {
   return globalThis.storyblokApiInstance || console.error("storyblokApiInstance has not been initialized correctly"), globalThis.storyblokApiInstance;
 }
-function ke(r, e) {
+function $e(r, e) {
   const t = globalThis.storyblokApiInstance.richTextResolver;
   if (!t) {
     console.error(
@@ -390,31 +424,35 @@ function ke(r, e) {
     );
     return;
   }
-  return pe(r, e, t);
+  return be(r, e, t);
 }
-function $e(r) {
+function ve(r) {
   const e = {
     useCustomApi: !1,
     bridge: !0,
     componentsDir: "src",
+    enableFallbackComponent: !1,
     ...r
   };
   return {
     name: "@storyblok/astro",
     hooks: {
-      "astro:config:setup": ({ injectScript: t, updateConfig: s }) => {
-        s({
+      "astro:config:setup": ({ injectScript: t, updateConfig: o }) => {
+        o({
           vite: {
             plugins: [
-              A(
+              T(
                 e.accessToken,
                 e.useCustomApi,
                 e.apiOptions
               ),
               L(
                 e.componentsDir,
-                e.components
-              )
+                e.components,
+                e.enableFallbackComponent,
+                e.customFallbackComponent
+              ),
+              O(e)
             ]
           }
         }), t(
@@ -444,11 +482,11 @@ function $e(r) {
   };
 }
 export {
-  ue as RichTextResolver,
-  ce as RichTextSchema,
-  $e as default,
-  be as loadStoryblokBridge,
-  ke as renderRichText,
+  fe as RichTextResolver,
+  ge as RichTextSchema,
+  ve as default,
+  ye as loadStoryblokBridge,
+  $e as renderRichText,
   me as storyblokEditable,
-  ye as useStoryblokApi
+  ke as useStoryblokApi
 };

package/dist/types/index.d.ts

@@ -38,6 +38,15 @@ export type IntegrationOptions = {
      * The directory containing your Astro components are. Defaults to "src".
      */
     componentsDir?: string;
+    /**
+     * Show a fallback component in your frontend if a component is not registered properly.
+     */
+    enableFallbackComponent?: boolean;
+    /**
+     * Provide a path to a custom fallback component, e.g. "storyblok/customFallback".
+     * Please note: the path takes into account the `componentsDir` option.
+     */
+    customFallbackComponent?: string;
 };
 export default function storyblokIntegration(options: IntegrationOptions): AstroIntegration;
 export * from "./types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/astro",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "main": "./dist/storyblok-astro.js",
   "module": "./dist/storyblok-astro.mjs",
@@ -13,7 +13,8 @@
       "import": "./dist/storyblok-astro.mjs",
       "require": "./dist/storyblok-astro.js"
     },
-    "./StoryblokComponent.astro": "./StoryblokComponent.astro"
+    "./StoryblokComponent.astro": "./StoryblokComponent.astro",
+    "./FallbackComponent.astro": "./FallbackComponent.astro"
   },
   "types": "./dist/types/index.d.ts",
   "scripts": {
@@ -35,11 +36,11 @@
     "@cypress/vite-dev-server": "^5.0.5",
     "@rollup/plugin-dynamic-import-vars": "^2.0.3",
     "@types/node": "18.15.11",
-    "astro": "2.1.8",
+    "astro": "2.3.0",
     "cypress": "^12.9.0",
     "eslint-plugin-cypress": "^2.13.2",
     "start-server-and-test": "^2.0.0",
-    "typescript": "5.0.3",
+    "typescript": "5.0.4",
     "vite": "^4.2.1",
     "vite-plugin-dts": "^2.2.0"
   },