@storyblok/astro 3.0.1-next.2 → 3.0.1-next.3

package/components/FallbackComponent.astro

@@ -0,0 +1,38 @@
+---
+import type { SbBlokData } from "./dist/types";
+
+interface Props {
+  blok: SbBlokData;
+}
+
+const { blok } = Astro.props;
+---
+
+<section>
+  <div>
+    <p>
+      Component could not be found for blok <span class="component"
+        >{blok.component}</span
+      >! Is it configured correctly?
+    </p>
+  </div>
+</section>
+
+<style scoped>
+  section {
+    display: flex;
+    justify-content: center;
+    padding: 60px 0;
+  }
+  div {
+    display: inline-flex;
+    background-color: #eff1f3;
+    text-align: center;
+    padding: 15px 30px;
+    border-radius: 5px;
+  }
+  span.component {
+    color: #00b3b0;
+    font-weight: bold;
+  }
+</style>

package/components/RichTextRenderer.astro

@@ -0,0 +1,32 @@
+---
+import { renderRichText } from "../";
+import type { ISbRichtext, SbBlokData, SbRichTextOptions } from "../dist/types";
+
+import StoryblokComponent from "./StoryblokComponent.astro";
+
+export interface Props {
+  richTextData?: ISbRichtext;
+  richTextOptions?: SbRichTextOptions;
+}
+
+const { richTextData, richTextOptions } = Astro.props;
+---
+
+{
+  richTextData?.content?.map((richTextNode: ISbRichtext) => {
+    if (richTextNode.type === "blok") {
+      return richTextNode.attrs.body.map((blok: SbBlokData) => (
+        <StoryblokComponent blok={blok} />
+      ));
+    } else {
+      return (
+        <Fragment
+          set:html={renderRichText(
+            { type: richTextNode.type, content: [richTextNode] },
+            richTextOptions
+          )}
+        />
+      );
+    }
+  })
+}

package/components/StoryblokComponent.astro

@@ -0,0 +1,43 @@
+---
+import components from "virtual:storyblok-components";
+import options from "virtual:storyblok-options";
+import camelcase from "camelcase";
+import type { SbBlokData } from "./dist/types";
+import type { AstroComponentFactory } from "astro/dist/runtime/server";
+
+interface Props {
+  blok: SbBlokData;
+  [prop: string]: unknown;
+}
+
+const { blok, ...props } = Astro.props;
+
+if (!blok) {
+  throw new Error(
+    "Cannot render StoryblokComponent. 'blok' prop is undefined."
+  );
+}
+
+/**
+ * convert blok components to camel case to match vite-plugin-storyblok-components
+ */
+let key = camelcase(blok.component);
+
+const componentFound: boolean = key in components;
+
+let Component: AstroComponentFactory;
+
+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/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@storyblok/astro",
-  "version": "3.0.1-next.2",
+  "version": "3.0.1-next.3",
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "main": "./dist/storyblok-astro.js",
   "module": "./dist/storyblok-astro.mjs",
   "files": [
     "dist",
-    "StoryblokComponent.astro",
-    "FallbackComponent.astro",
-    "RichTextRenderer.astro"
+    "components/StoryblokComponent.astro",
+    "components/FallbackComponent.astro",
+    "components/RichTextRenderer.astro"
   ],
   "exports": {
     ".": {