@storyblok/astro 7.4.0-alpha.0 → 8.0.0

package/dist/types.d.ts

@@ -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, StoryblokRichTextNodeResolver, StoryblokRichTextNodeTypes, StoryblokRichTextOptions, StoryblokRichTextResolvers, TextTypes, } from '@storyblok/js';
+MarkTypes, SbBlokData, SbBlokKeyDataTypes, SbPluginFactory, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokComponentType, StoryblokRichTextDocumentNode, StoryblokRichTextImageOptimizationOptions, StoryblokRichTextNode, StoryblokRichTextNodeTypes, StoryblokRichTextOptions, TextTypes, } from '@storyblok/js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/astro",
   "type": "module",
-  "version": "7.4.0-alpha.0",
+  "version": "8.0.0",
   "private": false,
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "author": "Storyblok",
@@ -39,8 +39,7 @@
     },
     "./client": "./dist/lib/client.ts",
     "./FallbackComponent.astro": "./dist/components/FallbackComponent.astro",
-    "./StoryblokComponent.astro": "./dist/components/StoryblokComponent.astro",
-    "./StoryblokServerData.astro": "./dist/components/StoryblokServerData.astro"
+    "./StoryblokComponent.astro": "./dist/components/StoryblokComponent.astro"
   },
   "main": "./dist/storyblok-astro.es.js",
   "module": "./dist/storyblok-astro.js",
@@ -54,8 +53,7 @@
   },
   "dependencies": {
     "camelcase": "^8.0.0",
-    "morphdom": "^2.7.8",
-    "@storyblok/js": "4.4.4"
+    "@storyblok/js": "5.0.0"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^6.0.3",
@@ -76,7 +74,7 @@
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-static-copy": "^2.2.0",
     "vitest": "^3.1.3",
-    "@storyblok/eslint-config": "0.4.1"
+    "@storyblok/eslint-config": "0.4.2"
   },
   "eslintConfig": {
     "env": {

package/dist/components/StoryblokServerData.astro

@@ -1,29 +0,0 @@
----
-/**
- * StoryblokServerData Component
- *
- * Pass server-side data to the client that persists across live preview updates.
- * All props passed to this component will be serialized as JSON and available
- * to the client via the extraData parameter in getLiveStory().
- *
- * Data is automatically sanitized to prevent XSS attacks and script injection.
- *
- * @example
- * ```astro
- * ---
- * import { StoryblokServerData } from '@storyblok/astro';
- * const users = await getUsers();
- * const config = { apiUrl: 'https://api.example.com' };
- * ---
- *
- * <StoryblokServerData users={users} config={config} />
- * ```
- */
-
-import { sanitizeJSON } from '@storyblok/astro';
-
-const props = Astro.props;
-const safeJson = sanitizeJSON(props);
----
-
-<script is:inline id="__STORYBLOK_SERVERDATA__" type="application/json" set:html={safeJson} />

package/dist/lib/richTextToHTML.ts

@@ -1,103 +0,0 @@
-import {
-  richTextResolver,
-  type StoryblokRichTextNode,
-  type StoryblokRichTextResolvers,
-} 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 {StoryblokRichTextResolvers} [customResolvers] - 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 const richTextToHTML = async (
-  richTextField: StoryblokRichTextNode,
-  customResolvers?: StoryblokRichTextResolvers,
-): 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 }>[] = [];
-  // Build the resolvers object
-  const resolvers: StoryblokRichTextResolvers = {
-    // Handle async components
-    blok: (node) => {
-      const componentBody = node.attrs?.body;
-      if (!Array.isArray(componentBody)) {
-        return '';
-      }
-
-      return componentBody
-        .map((blok) => {
-          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;
-        })
-        .join('\n');
-    },
-
-    // Add custom resolvers if provided
-    ...customResolvers,
-  };
-
-  const resolver = richTextResolver({ resolvers });
-
-  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;
-};

package/dist/lib/sanitizeJSON.d.ts

@@ -1,30 +0,0 @@
-/**
- * Safely serializes data to JSON and escapes characters that could break out of a script tag
- * or execute malicious code when embedded in HTML.
- *
- * This prevents XSS attacks by escaping:
- * - `</script>` tags that could close the script tag early
- * - `<!--` and `-->` HTML comment sequences
- * - Line separator (U+2028) and paragraph separator (U+2029) which are valid JSON but can break JS
- * - Other potentially dangerous Unicode characters
- *
- * @param data - The data to serialize
- * @returns A safe JSON string that can be embedded in HTML
- *
- * @example
- * ```ts
- * const safeJSON = sanitizeJSON({
- *   message: '</script><script>alert("XSS")</script>'
- * });
- * // Returns escaped version that won't execute
- * ```
- */
-export declare function sanitizeJSON(data: unknown): string;
-/**
- * Parses JSON that was sanitized with sanitizeJSON()
- * This is just JSON.parse but provided for symmetry and clarity
- *
- * @param json - The sanitized JSON string
- * @returns The parsed data
- */
-export declare function parseSanitizedJSON<T = unknown>(json: string): T;

package/dist/utils/isEditorRequest.d.ts

@@ -1,41 +0,0 @@
-/**
- * Options for validating Storyblok Visual Editor requests.
- */
-interface StoryblokValidationOptions {
-    /**
-     * Optional space ID to validate against the request.
-     * If provided, the request must match this space ID to be considered valid.
-     */
-    spaceId?: string;
-}
-/**
- * Validates whether a given URL is a legitimate request from the Storyblok Visual Editor.
- *
- * This function performs a multi-layered validation to ensure the request originates from
- * the Storyblok Visual Editor by checking for required query parameters and optionally
- * validating the space ID.
- *
- * @param url - The URL object to validate.
- * @param options - Optional validation configuration.
- * @param options.spaceId - If provided, validates that the request's space ID matches this value.
- *
- * @returns `true` if the URL contains all required Storyblok Visual Editor parameters
- *          and passes optional space ID validation; `false` otherwise.
- *
- * @example
- * ```typescript
- * const url = new URL('https://example.com/?_storyblok=123&_storyblok_c=456&_storyblok_tk[space_id]=789');
- *
- * // Basic validation
- * if (isEditorRequest(url)) {
- *   console.log('Valid Storyblok editor request');
- * }
- *
- * // Validation with space ID check
- * if (isEditorRequest(url, { spaceId: '789' })) {
- *   console.log('Valid request for specific space');
- * }
- * ```
- */
-export declare function isEditorRequest(url: URL, options?: StoryblokValidationOptions): boolean;
-export {};