@storyblok/astro 10.0.1 → 10.2.0

package/dist/components/StoryblokRichText.astro

@@ -6,9 +6,8 @@ interface Props extends SbAstroRichTextRenderContext {
   document: SbRichTextInput;
 }
 
-const { document, components, optimizeImage } = Astro.props;
-
+const { document, components, optimizeImage, data } = Astro.props;
 const nodes = normalizeNodes(document);
 ---
 
-<RenderChildren nodes={nodes} options={{ components, optimizeImage }} />
+<RenderChildren nodes={nodes} options={{ components, optimizeImage, data }} />

package/dist/components/richtext/RenderLinkGroup.astro

@@ -20,7 +20,7 @@ const Custom = components ? components[linkMark.type] : undefined;
 
 {
   isValidAstroComponent(Custom) ? (
-    <Custom {...linkMark}>
+    <Custom {...linkMark} context={options}>
       <RenderLinkInner nodes={nodes} options={options} />
     </Custom>
   ) : (

package/dist/components/richtext/RenderNode.astro

@@ -19,16 +19,22 @@ interface Props {
 }
 const { node, options } = Astro.props;
 const components = options.components;
-const Custom = components && node.type !== 'text' ? components[node.type] : undefined;
+const Custom = components ? components[node.type] : undefined;
+
+// When passing context to a custom component, exclude that component type
+// to prevent infinite loops if the custom component uses StoryblokRichText internally
+const contextForCustom = Custom
+  ? { ...options, components: { ...components, [node.type]: undefined } }
+  : options;
 ---
 
 {
-  node.type === 'text' ? (
-    <RenderTextNodeWithMarks node={node} marks={node.marks} options={options} />
-  ) : isValidAstroComponent(Custom) ? (
-    <Custom {...node} context={options}>
-      {node.content && <RenderChildren nodes={node.content} options={options} />}
+  isValidAstroComponent(Custom) ? (
+    <Custom {...node} context={contextForCustom}>
+      {node.type !== 'text' && node.content && <RenderChildren nodes={node.content} options={options} />}
     </Custom>
+  ) : node.type === 'text' ? (
+    <RenderTextNodeWithMarks node={node} marks={node.marks} options={options} />
   ) : node.type === 'image' ? (
     <RenderImage node={node} options={options} />
   ) : node.type === 'blok' ? (

package/dist/components/richtext/RenderTextNodeWithMarks.astro

@@ -23,7 +23,7 @@ const MarkComponent = mark && components ? components[mark.type] : undefined;
   reversedMarks.length === 0 ? (
     node.text
   ) : isValidAstroComponent(MarkComponent) ? (
-    <MarkComponent {...mark}>
+    <MarkComponent {...mark} context={options}>
       <Astro.self node={node} marks={rest} options={options} />
     </MarkComponent>
   ) : (

package/dist/index.js

@@ -113,13 +113,15 @@ function C(e, t, n, r) {
 	};
 }
 function w(e, t, n) {
+	let r = `${s(e)}/storyblok/**/*.astro`, i = [...n];
+	t && i.push(t);
+	let a = i.map((e) => e.importStatement), o = i.map((e) => e.wrapperDefinition), c = i.map((e) => e.registrationCall);
 	return `
-    // Import utilities and fallback component
     import { toCamelCase } from '@storyblok/astro';
+    ${a.join("\n    ")}
+
+    const modules = import.meta.glob('${r}', { eager: true });
 
-    // Dynamically import all Storyblok components using Vite's glob import
-    const modules = import.meta.glob('${`${s(e)}/storyblok/**/*.astro`}', { eager: true });
-    // Process imported modules into a components object
     const storyblokComponents = {};
     const createComponentLoader = (module) => {
       return async () => module?.default ?? module;
@@ -131,25 +133,24 @@ function w(e, t, n) {
         get: () => createComponentLoader(component),
       });
     };
+
     for (const filePath in modules) {
-      // Extract component name from file path (remove extension)
       const fileName = filePath.split('/').pop();
-      const componentName = toCamelCase(fileName?.replace(/\.[^/.]+$/, '') ?? '');
+      const componentName = toCamelCase(fileName?.replace(/\\.[^/.]+$/, '') ?? '');
       if (componentName) {
         registerComponent(componentName, modules[filePath]);
       }
     }
-    
-    // Manual components
-    ${n.join("\n\n")}
-    // Add fallback component if enabled
-    ${t}    
-    // Export the components object for use in Storyblok initialization
+
+    ${o.join("\n    ")}
+
+    ${c.join("\n    ")}
+
     export { storyblokComponents };
   `.trim();
 }
 async function ee(e, t, n, r) {
-	if (!n) return "";
+	if (!n) return null;
 	if (!r) return D({
 		componentName: "FallbackComponent",
 		importPath: "@storyblok/astro/FallbackComponent.astro"
@@ -181,10 +182,12 @@ function E(e, t) {
 	return o(`${s(e)}${s(t)}`);
 }
 function D({ componentName: e, importPath: t }) {
-	return `
-  import ${e} from '${t}';
-  registerComponent('${e}', ${e});
-`.trim();
+	let n = `__${e}_component__`, r = `__${e}_wrapper__`;
+	return {
+		importStatement: `import ${n} from '${t}';`,
+		wrapperDefinition: `const ${r} = { get default() { return ${n}; } };`,
+		registrationCall: `registerComponent('${e}', ${r});`
+	};
 }
 //#endregion
 //#region src/lib/storyblok-integration.ts
@@ -949,13 +952,22 @@ function dt(e, t) {
 	return n?.length ? pt(n, t) : "";
 }
 function q(e, t) {
+	let n = e.type !== "text" && e.content ? pt(e.content, t) : "", r = t?.renderers?.[e.type];
+	if (r) {
+		let i = t?.renderers?.[e.type] ? {
+			...t,
+			renderers: {
+				...t.renderers,
+				[e.type]: void 0
+			}
+		} : t;
+		return r({
+			...e,
+			children: n,
+			context: i
+		});
+	}
 	if (e.type === "text") return mt(e, e.marks, t);
-	let n = e.content ? pt(e.content, t) : "", r = t?.renderers?.[e.type];
-	if (r) return r({
-		...e,
-		children: n,
-		context: t
-	});
 	if (e.type === "blok") return console.warn("\"blok\" nodes require a custom renderer in renderRichText."), "";
 	let i = G(e);
 	if (!i) return n;
@@ -1001,7 +1013,8 @@ function ht(e, t, n) {
 	let r = n?.renderers?.[t.type];
 	if (r) return r({
 		...t,
-		children: e
+		children: e,
+		context: n
 	});
 	let i = G(t);
 	return i ? `<${i}${J(t.type, t.attrs)}>${e}</${i}>` : e;
@@ -1015,7 +1028,8 @@ function gt(e, t, n, r, i) {
 	let o = i?.renderers?.[r.type];
 	if (o) return o({
 		...r,
-		children: a
+		children: a,
+		context: i
 	});
 	let s = G(r);
 	return s ? `<${s}${J(r.type, r.attrs)}>${a}</${s}>` : a;
@@ -1611,7 +1625,7 @@ var Ht = class {
 	}
 	return { storyblokApi: new Ut(t) };
 }, Jt = (e) => {
-	if (typeof e != "object" || typeof e._editable > "u") return {};
+	if (typeof e != "object" || typeof e._editable != "string") return {};
 	try {
 		let t = JSON.parse(e._editable.replace(/^<!--#storyblok#/, "").replace(/-->$/, ""));
 		return t ? {

package/dist/utils/richtext-helpers.d.ts

@@ -6,6 +6,7 @@ export type SbAstroRichTextComponentMap = {
 export interface SbAstroRichTextRenderContext {
     optimizeImage?: boolean | SbRichTextImageOptions;
     components?: SbAstroRichTextComponentMap;
+    data?: unknown;
 }
 export type SbAstroRichTextProps<T extends SbRichTextElement> = SbRichTextElementByType<SbAstroRichTextRenderContext>[T];
 export declare function isValidAstroComponent(component: unknown): component is AstroComponentFactory;

package/dist/vite-plugins/vite-plugin-import-storyblok-components.d.ts

@@ -1,8 +1,32 @@
 import { Plugin } from 'vite';
 /**
- * Vite plugin that automatically imports Storyblok components from a specified directory
- * and merges them with optional user-provided component mappings.
- *
- * @returns Vite plugin object
+ * Vite plugin that auto-imports Storyblok components from a directory
+ * and merges them with user-provided component mappings.
  */
 export declare function vitePluginImportStoryblokComponents(components: Record<string, string>, componentsDir: string, enableFallbackComponent: boolean, customFallbackComponent?: string): Plugin;
+export interface ComponentRegistrationParts {
+    importStatement: string;
+    wrapperDefinition: string;
+    registrationCall: string;
+}
+/**
+ * Generates the virtual module code with:
+ * - Static imports at the top for proper hoisting
+ * - Glob-imported components from storyblok folder
+ * - Manual and fallback component registrations
+ */
+export declare function generateModuleCode(componentsDir: string, fallbackRegistration: ComponentRegistrationParts | null, manualRegistrations: ComponentRegistrationParts[]): string;
+interface CreateComponentRegistrationPartsOptions {
+    componentName: string;
+    importPath: string;
+}
+/**
+ * Generates structured registration parts for a component.
+ *
+ * Uses a getter wrapper to avoid TDZ (Temporal Dead Zone) errors.
+ * When Vite bundles modules, direct references to imported components
+ * can cause "Cannot access 'X' before initialization" errors.
+ * The getter defers access until the component is actually needed.
+ */
+export declare function createComponentRegistrationParts({ componentName, importPath, }: CreateComponentRegistrationPartsOptions): ComponentRegistrationParts;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/astro",
   "type": "module",
-  "version": "10.0.1",
+  "version": "10.2.0",
   "private": false,
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "author": "Storyblok",
@@ -51,8 +51,8 @@
   "dependencies": {
     "camelcase": "^8.0.0",
     "morphdom": "^2.7.8",
-    "@storyblok/richtext": "5.0.1",
-    "@storyblok/js": "6.0.1"
+    "@storyblok/js": "6.2.0",
+    "@storyblok/richtext": "5.2.0"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^6.0.3",
@@ -73,7 +73,7 @@
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-static-copy": "^4.1.1",
     "vitest": "^3.1.3",
-    "@storyblok/eslint-config": "0.5.1"
+    "@storyblok/eslint-config": "0.6.0"
   },
   "eslintConfig": {
     "env": {