feat: add fallback component

lib/CustomFallbackComponent.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let blok;
+</script>
+
+<section>
+  <div>
+    <p class="bg-purple-500">
+      Component could not be found for blok <span class="component"
+        >{blok.component}</span
+      >! Is it configured correctly?
+    </p>
+  </div>
+</section>

lib/FallbackComponent.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let blok;
+</script>
+
+<section>
+  <div>
+    <p class="bg-red-500">
+      Component could not be found for blok <span class="component"
+        >{blok.component}</span
+      >! Is it configured correctly?
+    </p>
+  </div>
+</section>

lib/pkg/StoryblokComponent.svelte

@@ -1,5 +1,11 @@
 <script>
-  import { getComponent } from "./index";
+  import FallbackComponent from "../FallbackComponent.svelte";
+  import CustomFallbackComponent from "../CustomFallbackComponent.svelte";
+  import {
+    getComponent,
+    getFallbackComponent,
+    getCustomFallbackComponent,
+  } from "./index";
 
   let component;
   export let blok;
@@ -11,5 +17,14 @@
   }
 </script>
 
-<!-- svelte-ignore missing-declaration -->
-<svelte:component this={component} {blok} {...$$restProps} />
+{#if component}
+  <svelte:component this={component} {blok} {...$$restProps} />
+{:else if getFallbackComponent() && getCustomFallbackComponent()}
+  <CustomFallbackComponent {blok} />
+{:else if getFallbackComponent()}
+  <FallbackComponent {blok} />
+{:else}
+  {console.error(
+    `Component could not be found for blok "${blok.component}"! Is it defined in +layout.js?`
+  )}
+{/if}

lib/pkg/index.ts

@@ -15,6 +15,7 @@ import type {
   StoryblokClient,
   SbBlokData,
 } from "./types";
+import type { SvelteComponent } from "svelte";
 
 export const storyblokEditable = (node: HTMLElement, value: SbBlokData) => {
   const updateDom = (value: SbBlokData) => {
@@ -49,11 +50,15 @@ export const useStoryblokApi = (): StoryblokClient => {
 export { useStoryblokApi as getStoryblokApi };
 
 let componentsMap: SbSvelteComponentsMap | CallableFunction = null;
+let fallbackComponent: boolean = false;
+let customFallbackComponent: SvelteComponent<any> = null;
 
 export const storyblokInit = (options: SbSvelteSDKOptions) => {
   const { storyblokApi } = sbInit(options);
   storyblokApiInstance = storyblokApi;
   componentsMap = options.components || {};
+  fallbackComponent = options.fallbackComponent;
+  customFallbackComponent = options.customFallbackComponent;
 };
 
 export const getComponent = (componentName: string) => {
@@ -63,19 +68,16 @@ export const getComponent = (componentName: string) => {
       ? componentsMap()[componentName]
       : componentsMap[componentName];
 
-  if (!component) {
-    console.error(`You didn't load the ${componentName} component. Please load it in storyblokInit. For example:
-storyblokInit({
-    accessToken: "<your-token>",
-    components: {
-      "teaser": Teaser
-    }
-})
-`);
-  }
-
   return component;
 };
 
+export const getFallbackComponent = () => {
+  return fallbackComponent;
+};
+
+export const getCustomFallbackComponent = () => {
+  return customFallbackComponent;
+};
+
 export * from "./types";
 export { default as StoryblokComponent } from "./StoryblokComponent.svelte";

lib/pkg/types.ts

@@ -8,6 +8,8 @@ export interface SbSvelteComponentsMap {
 
 export interface SbSvelteSDKOptions extends SbSDKOptions {
   components?: SbSvelteComponentsMap | CallableFunction;
+  fallbackComponent?: boolean;
+  customFallbackComponent?: SvelteComponent<any>;
 }
 
 export { apiPlugin } from "@storyblok/js";