@storyblok/astro 9.0.12 → 10.0.0

package/dist/lib/client.d.ts

@@ -1,2 +1 @@
-export { richTextToHTML } from './richTextToHTML';
 export { storyblokApiInstance as storyblokApi } from 'virtual:storyblok-init';

package/dist/lib/client.ts

@@ -1,4 +1,3 @@
 import '../public.d.ts';
 
-export { richTextToHTML } from './richTextToHTML';
 export { storyblokApiInstance as storyblokApi } from 'virtual:storyblok-init';

package/dist/public.d.ts

@@ -30,41 +30,23 @@ declare module '@storyblok/astro/StoryblokServerData.astro' {
   /** Renders a dynamic Storyblok component */
   export default StoryblokServerData;
 }
+declare module '@storyblok/astro/StoryblokRichText.astro' {
+  import type { SbAstroRichTextComponentMap, SbRichTextImageOptions, SbRichTextInput } from '@storyblok/astro';
+
+  function StoryblokRichText(
+    _props: Record<string, unknown> & {
+      /** The Storyblok rich text document for this component (required) */
+      document: SbRichTextInput;
+      optimizeImage?: boolean | SbRichTextImageOptions;
+      components?: SbAstroRichTextComponentMap;
+    }
+  ): any;
+
+  /** Renders a dynamic Storyblok component */
+  export default StoryblokRichText;
+}
 declare module '@storyblok/astro/client' {
-  import type {
-    StoryblokClient,
-    StoryblokRichTextNode,
-    StoryblokRichTextOptions,
-  } from '@storyblok/astro';
-  /**
-   * @experimental Converts a Storyblok RichText field into an HTML string.
-   *
-   * This API is still under development and may change in future releases.
-   * It also relies on Astro’s experimental
-   * [experimental_AstroContainer](https://docs.astro.build/en/reference/container-reference/) feature.
-   *
-   * @async
-   * @param {StoryblokRichTextNode} richTextField - The root RichText node to convert.
-   * @param {StoryblokRichTextOptions['tiptapExtensions']} [tiptapExtensions] - Optional custom resolvers
-   *   for customizing how specific nodes or marks are transformed into HTML.
-   * @returns {Promise<string>} A promise that resolves to the HTML string representation
-   *   of the provided RichText content.
-   *
-   * @example
-   * ```astro
-   * ---
-   * import { richTextToHTML } from '@storyblok/astro/client';
-   * const { blok } = Astro.props;
-   * const renderedRichText = await richTextToHTML(blok.text);
-   * ---
-   *
-   * <div set:html={renderedRichText} />
-   * ```
-   */
-  export function richTextToHTML(
-    richTextField: StoryblokRichTextNode,
-    tiptapExtensions?: StoryblokRichTextOptions['tiptapExtensions'],
-  ): Promise<string>;
+  import type { StoryblokClient } from '@storyblok/astro';
 
   /**
    * Provides direct access to the initialized Storyblok API client instance.

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-export type { ArrayFn, AsyncFn, BlockTypes, ISbAlternateObject, // previously AlternateObject
+export type { ArrayFn, AsyncFn, ISbAlternateObject, // previously AlternateObject
 ISbCache, // previously StoryblokCache
 ISbConfig, // previously StoryblokConfig
 ISbContentMangmntAPI, ISbDimensions, ISbError, ISbEventPayload, ISbManagmentApiResult, // previously StoryblokManagmentApiResult
@@ -8,4 +8,4 @@ ISbStoriesParams, // previously StoriesParams
 ISbStory, // previously Story
 ISbStoryData, // previously StoryData
 ISbStoryParams, // previously StoryParams
-MarkTypes, SbBlokData, SbBlokKeyDataTypes, SbPluginFactory, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokComponentType, StoryblokRichTextDocumentNode, StoryblokRichTextImageOptimizationOptions, StoryblokRichTextNode, StoryblokRichTextNodeTypes, StoryblokRichTextOptions, TextTypes, } from '@storyblok/js';
+SbBlokData, SbBlokKeyDataTypes, SbPluginFactory, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokComponentType, } from '@storyblok/js';

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

@@ -0,0 +1,12 @@
+import { SbRichTextElement, SbRichTextElementByType, SbRichTextImageOptions } from '@storyblok/richtext';
+import { AstroComponentFactory } from 'astro/runtime/server/render/astro/index.js';
+export type SbAstroRichTextComponentMap = {
+    [K in SbRichTextElement]?: AstroComponentFactory;
+};
+export interface SbAstroRichTextRenderContext {
+    optimizeImage?: boolean | SbRichTextImageOptions;
+    components?: SbAstroRichTextComponentMap;
+}
+export type SbAstroRichTextProps<T extends SbRichTextElement> = SbRichTextElementByType<SbAstroRichTextRenderContext>[T];
+export declare function isValidAstroComponent(component: unknown): component is AstroComponentFactory;
+export declare function buildAstroAttrs(type: SbRichTextElement, attrs: Record<string, unknown>): Record<string, unknown>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/astro",
   "type": "module",
-  "version": "9.0.12",
+  "version": "10.0.0",
   "private": false,
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "author": "Storyblok",
@@ -24,26 +24,22 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/storyblok-astro.es.js",
-      "require": "./dist/storyblok-astro.umd.js"
+      "import": "./dist/index.js"
     },
     "./middleware.ts": {
       "types": "./dist/live-preview/middleware.d.ts",
-      "import": "./dist/live-preview/middleware.ts",
-      "require": "./dist/live-preview/middleware.ts"
+      "import": "./dist/live-preview/middleware.ts"
     },
     "./toolbarApp.ts": {
       "types": "./dist/dev-toolbar/toolbarApp.d.ts",
-      "import": "./dist/dev-toolbar/toolbarApp.ts",
-      "require": "./dist/dev-toolbar/toolbarApp.ts"
+      "import": "./dist/dev-toolbar/toolbarApp.ts"
     },
     "./client": "./dist/lib/client.ts",
     "./FallbackComponent.astro": "./dist/components/FallbackComponent.astro",
     "./StoryblokComponent.astro": "./dist/components/StoryblokComponent.astro",
-    "./StoryblokServerData.astro": "./dist/components/StoryblokServerData.astro"
+    "./StoryblokServerData.astro": "./dist/components/StoryblokServerData.astro",
+    "./StoryblokRichText.astro": "./dist/components/StoryblokRichText.astro"
   },
-  "main": "./dist/storyblok-astro.es.js",
-  "module": "./dist/storyblok-astro.js",
   "types": "./dist/index.d.ts",
   "files": [
     "*.d.ts",
@@ -55,7 +51,8 @@
   "dependencies": {
     "camelcase": "^8.0.0",
     "morphdom": "^2.7.8",
-    "@storyblok/js": "5.1.10"
+    "@storyblok/js": "6.0.0",
+    "@storyblok/richtext": "5.0.0"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^6.0.3",

package/dist/components/FallbackComponent.d.ts

@@ -1,6 +0,0 @@
-import { SbBlokData } from '@storyblok/js';
-declare function FallbackComponent(_props: Record<string, unknown> & {
-    /** The Storyblok blok data for this component (required) */
-    blok: SbBlokData;
-}): any;
-export default FallbackComponent;

package/dist/lib/richTextToHTML.d.ts

@@ -1,27 +0,0 @@
-import { StoryblokRichTextNode, StoryblokRichTextOptions } from '@storyblok/js';
-/**
- * @experimental Converts a Storyblok RichText field into an HTML string.
- *
- * This API is still under development and may change in future releases.
- * It also relies on Astro's experimental
- * [experimental_AstroContainer](https://docs.astro.build/en/reference/container-reference/) feature.
- *
- * @async
- * @param {StoryblokRichTextNode} richTextField - The root RichText node to convert.
- * @param {StoryblokRichTextOptions['tiptapExtensions']} [tiptapExtensions] - Optional custom
- *   tiptap extensions for customizing how specific nodes or marks are rendered.
- * @returns {Promise<string>} A promise that resolves to the HTML string representation
- *   of the provided RichText content.
- *
- * @example
- * ```astro
- * ---
- * import { richTextToHTML } from '@storyblok/astro/client';
- * const { blok } = Astro.props;
- * const renderedRichText = await richTextToHTML(blok.text);
- * ---
- *
- * <div set:html={renderedRichText} />
- * ```
- */
-export declare const richTextToHTML: (richTextField: StoryblokRichTextNode, tiptapExtensions?: StoryblokRichTextOptions["tiptapExtensions"]) => Promise<string>;

package/dist/lib/richTextToHTML.ts

@@ -1,94 +0,0 @@
-import {
-  ComponentBlok,
-  richTextResolver,
-  type StoryblokRichTextNode,
-  type StoryblokRichTextOptions,
-} from '@storyblok/js';
-import { experimental_AstroContainer } from 'astro/container';
-import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
-
-// Lazily initialized Astro container (for rendering blok components)
-let container: null | experimental_AstroContainer = null;
-
-/**
- * @experimental Converts a Storyblok RichText field into an HTML string.
- *
- * This API is still under development and may change in future releases.
- * It also relies on Astro's experimental
- * [experimental_AstroContainer](https://docs.astro.build/en/reference/container-reference/) feature.
- *
- * @async
- * @param {StoryblokRichTextNode} richTextField - The root RichText node to convert.
- * @param {StoryblokRichTextOptions['tiptapExtensions']} [tiptapExtensions] - Optional custom
- *   tiptap extensions for customizing how specific nodes or marks are rendered.
- * @returns {Promise<string>} A promise that resolves to the HTML string representation
- *   of the provided RichText content.
- *
- * @example
- * ```astro
- * ---
- * import { richTextToHTML } from '@storyblok/astro/client';
- * const { blok } = Astro.props;
- * const renderedRichText = await richTextToHTML(blok.text);
- * ---
- *
- * <div set:html={renderedRichText} />
- * ```
- */
-export const richTextToHTML = async (
-  richTextField: StoryblokRichTextNode,
-  tiptapExtensions?: StoryblokRichTextOptions['tiptapExtensions'],
-): Promise<string> => {
-  // Create Astro container only once
-  if (!container) {
-    container = await experimental_AstroContainer.create();
-  }
-
-  // Collect async render results keyed by placeholder ID
-  const asyncReplacements: Promise<{ id: string; result: string }>[] = [];
-
-  const resolver = richTextResolver<string>({
-    tiptapExtensions: {
-      blok: ComponentBlok.configure({
-        renderComponent: (blok: Record<string, unknown>, _id?: string) => {
-          if (!blok || typeof blok !== 'object' || !container) {
-            return '';
-          }
-
-          // Generate unique placeholder ID
-          const id = crypto.randomUUID();
-          const placeholder = `<!--ASYNC-${id}-->`;
-
-          // Queue async render
-          const promise = container
-            .renderToString(StoryblokComponent, {
-              props: { blok },
-            })
-            .then(result => ({ id, result }))
-            .catch((err) => {
-              console.error('Component rendering failed:', err);
-              return { id, result: '<!-- Component render error -->' };
-            });
-
-          asyncReplacements.push(promise);
-          return placeholder;
-        },
-      }),
-      ...tiptapExtensions,
-    },
-  });
-
-  let html = resolver.render(richTextField);
-  // Wait for all async renders
-  const results = await Promise.all(asyncReplacements);
-  const replacements = new Map(
-    results.map(({ id, result }) => [id, result ?? '']),
-  );
-
-  // Single-pass replacement using regex
-  html = html.replace(/<!--ASYNC-([\w-]+)-->/g, (_, id: string) => {
-    return replacements.get(id) ?? '';
-  });
-
-  return html;
-};