@storyblok/astro 6.0.0-next.2 → 6.0.0

package/README.md

@@ -46,7 +46,7 @@ npm install @storyblok/astro
 ```
 
 > [!NOTE]  
-> With pnpm, hoist Storyblok dependencies publicly with `.npmrc`. For more information, check pnpm documentation on [here](https://pnpm.io/npmrc).
+> With pnpm, hoist Storyblok dependencies publicly with `.npmrc`. For more information, please refer to the [pnpm documentation](https://pnpm.io/npmrc).
 
 Add the following code to `astro.config.mjs` and replace the `accessToken` with the preview API token of your Storyblok space.
 
@@ -110,15 +110,15 @@ storyblok({
 ```
 
 > [!WARNING]
-> For spaces created in the United States or China, the `region` parameter **must** be specified.
+> The `region` parameter **must** be specified unless the space was created in the EU.
 
 ## Getting started
 
 ### 1. Creating and linking your components to the Storyblok Visual Editor
 
-In order to link your Astro components to their equivalents you created in Storyblok:
+Link your Astro components to their equivalents created in Storyblok with the following steps.
 
-First, you need to load them globally by specifying their name and their path in `astro.config.mjs`:
+First, load the components globally by specifying their name and their path in `astro.config.mjs`:
 
 ```js
 components: {
@@ -164,7 +164,7 @@ const { blok } = Astro.props
 </div>
 ```
 
-Finally, you can use the provided `<StoryblokComponent>` for nested components; it will automatically render them (if they have been registered globally beforehand):
+Finally, you can use the provided `<StoryblokComponent>` for nested components; it will automatically render them (if they are registered globally):
 
 ```jsx
 ---
@@ -219,7 +219,7 @@ const story = data.story;
 ```
 
 > [!NOTE]  
-> The available methods are described in the [storyblok-js-client] repository(https://github.com/storyblok/storyblok-js-client#method-storyblokget)
+> The available methods are described in the [storyblok-js-client](https://github.com/storyblok/storyblok-js-client#method-storyblokget) repository.
 
 #### Dynamic Routing
 
@@ -281,13 +281,77 @@ bridge: {
 - `resolveLinks` may be needed to resolve link fields.
 
 > [!NOTE]  
-> `resolveRelations` and `resolveLinks` will not have any effect in Astro, since the Storyblok Bridge is configured to reload the page. Thus, all the requests needed will be performed after the reload.
+> `resolveRelations` and `resolveLinks` will only become effective if the live preview feature is used (`getLiveStory()`).
 
 The provided options will be used when initializing the Storyblok Bridge. You can find more information about the Storyblok Bridge and its configuration options on the [In Depth Storyblok Bridge guide](https://www.storyblok.com/docs/guide/in-depth/storyblok-latest-js-v2?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro).
 
 If you want to deploy a dedicated preview environment with the Bridge enabled, allowing users of the Storyblok CMS to see their changes being reflected on the frontend directly without having to rebuild the static site, you can enable Server Side Rendering for that particular use case. More information can be found in the [Astro Docs](https://docs.astro.build/en/guides/server-side-rendering/).
 
-### Rendering Rich Text
+## Enabling Live Preview for Storyblok's Visual Editor
+
+The Astro SDK provides a live preview feature, designed to offer real-time editing capabilities for an enhanced user experience in Storyblok's Visual Editor.
+
+> [!NOTE]  
+> To utilize the Astro Storyblok Live feature, Astro must be configured to run in SSR mode.
+
+To activate the live preview feature, follow these steps:
+
+1. Set `livePreview` to `true` in your `astro.config.mjs` file.
+
+```js
+//astro.config.mjs
+export default defineConfig({
+  integrations: [
+    storyblok({
+      accessToken: "OsvN..",
+      livePreview: true,
+    }),
+  ],
+  output: "server", // Astro must be configured to run in SSR mode
+});
+```
+
+2. Additionally, use `getLiveStory` on your Astro pages.
+
+```jsx
+//pages/[...slug].astro
+---
+import { getLiveStory, useStoryblokApi } from '@storyblok/astro';
+import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
+
+const { slug } = Astro.params;
+let story = null;
+
+const liveStory = await getLiveStory(Astro);
+if (liveStory) {
+  story = liveStory;
+} else {
+  const sbApi = useStoryblokApi();
+  const { data } = await sbApi.get(`cdn/stories/${slug || 'home'}`, {
+    version: 'draft',
+    resolve_relations: ['featured-articles.posts'],
+  });
+  story = data?.story;
+}
+// If you are using `resolve_relations` or `resolve_links`, you must also pass them to the Bridge configuration in `astro.config.mjs`.  
+---
+
+<StoryblokComponent blok={story.content} />
+```
+## Dom update event
+
+```js
+//page.astro
+
+<script>
+document.addEventListener('storyblok-live-preview-updated', () => {
+  // Here is the callback we could run code every time the body is updated via live preview
+  console.log('Live preview: body updated');
+  // Example regenerated all your css
+});
+</script>
+```
+## Rendering Rich Text
 
 > [!NOTE]  
 > While @storyblok/astro provides basic richtext rendering capabilities, for advanced use cases, it is highly recommended to use [storyblok-rich-text-astro-renderer](https://github.com/NordSecurity/storyblok-rich-text-astro-renderer).
@@ -346,62 +410,6 @@ const renderedRichText = renderRichText(blok.text, {
 
 Returns the instance of the `storyblok-js-client`.
 
-## Enabling Live Preview for Storyblok's Visual Editor
-
-The Astro SDK now provides a live preview feature, designed to offer real-time editing capabilities for an enhanced user experience in Storyblok's Visual Editor.
-
-> [!NOTE]  
-> To utilize the Astro Storyblok Live feature, Astro must be configured to run in SSR mode.
-
-To activate the experimental live preview feature, follow these steps:
-
-1. Set `livePreview` to `true` within your `astro.config.mjs` file.
-
-```js
-//astro.config.mjs
-export default defineConfig({
-  integrations: [
-    storyblok({
-      accessToken: "OsvN..",
-      livePreview: true,
-    }),
-  ],
-  output: "server", // Astro must be configured to run in SSR mode
-});
-```
-
-2. Additionally, please use `getLiveStory` on your Astro pages for live story fetching.
-
-```jsx
-//pages/[...slug].astro
----
-import {
-  getLiveStory,
-  useStoryblokApi,
-  type ISbStoryData,
-} from '@storyblok/astro';
-import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
-
-const { slug } = Astro.params;
-let story: ISbStoryData | null = null;
-
-const liveStory = await getLiveStory(Astro);
-if (liveStory) {
-  story = liveStory;
-} else {
-  const sbApi = useStoryblokApi();
-  const { data } = await sbApi.get(`cdn/stories/${slug || 'home'}`, {
-    version: 'draft',
-    resolve_relations: ['featured-articles.posts'],
-  });
-  story = data?.story;
-}
-// If you are using `resolve_relations` or `resolve_links`, you must also pass them to the Bridge configuration in `astro.config.mjs`.  
----
-
-<StoryblokComponent blok={story.content} />
-```
-
 ## The Storyblok JavaScript SDK Ecosystem
 
 ![A visual representation of the Storyblok JavaScript SDK Ecosystem](https://a.storyblok.com/f/88751/2400x1350/be4a4a4180/sdk-ecosystem.png/m/1200x0)
@@ -436,4 +444,4 @@ Please review our [Contributing Guidelines](https://github.com/storyblok/.github
 
 This project employs [semantic-release](https://semantic-release.gitbook.io/semantic-release/) to generate new versions based on commit messages, following the Angular Commit Message Convention.  
 
-When using playgrounds during development, ensure the build is running in watch mode for an efficient workflow.
+When using playgrounds during development, ensure the build is running in watch mode for an efficient workflow.

package/dist/lib/helpers.d.ts

@@ -1,7 +1,7 @@
 import { ISbRichtext, ISbStoryData, SbRichTextOptions, StoryblokBridgeConfigV2, StoryblokClient } from '../types';
 import { AstroGlobal } from 'astro';
 export declare function useStoryblokApi(): StoryblokClient;
-export declare function getLiveStory(Astro: AstroGlobal): Promise<ISbStoryData<import('@storyblok/js').StoryblokComponentType<string> & {
+export declare function getLiveStory(Astro: Readonly<AstroGlobal>): Promise<ISbStoryData<import('@storyblok/js').StoryblokComponentType<string> & {
     [index: string]: any;
 }> | null>;
 export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string;

package/dist/live-preview/middleware.ts

@@ -6,7 +6,7 @@ export const onRequest = defineMiddleware(async ({ locals, request }, next) => {
     // First do a basic check if its coming from within storyblok
     const isStoryblokRequest
       = url.searchParams.has('_storyblok')
-      && url.searchParams.has('_storyblok_c');
+        && url.searchParams.has('_storyblok_c');
 
     if (isStoryblokRequest) {
       try {

package/dist/storyblok-astro.es.js

@@ -609,22 +609,20 @@ function je(r) {
             `
         ), e.bridge && !e.livePreview && o(
           "page",
-          `
-                import { loadStoryblokBridge } from "@storyblok/astro";
-                loadStoryblokBridge().then(() => {
-                  const { StoryblokBridge, location } = window;
-                  ${t}
-                  storyblokInstance.on(["published", "change"], (event) => {
-                    if (!event.slugChanged) {
-                      location.reload(true);
-                    } 
-                  });
+          `import { loadStoryblokBridge } from "@storyblok/astro";
+              loadStoryblokBridge().then(() => {
+                const { StoryblokBridge, location } = window;
+                ${t}
+                storyblokInstance.on(["published", "change"], (event) => {
+                  if (!event.slugChanged) {
+                    location.reload(true);
+                  } 
                 });
+              });
               `
         ), e.livePreview && (o(
           "page",
-          `
-                import { loadStoryblokBridge, handleStoryblokMessage } from "@storyblok/astro";
+          `import { loadStoryblokBridge, handleStoryblokMessage } from "@storyblok/astro";
                 loadStoryblokBridge().then(() => {
                   const { StoryblokBridge, location } = window;
                   ${t}

package/dist/storyblok-astro.umd.js

@@ -43,19 +43,17 @@ Detailed information can be found here: https://github.com/storyblok/storyblok-a
         }`),""}optimizeImages(e,t){let o=0,s=0,n="",a="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(n+=`width="${t.width}" `,o=t.width),typeof t.height=="number"&&t.height>0&&(n+=`height="${t.height}" `,s=t.height),(t.loading==="lazy"||t.loading==="eager")&&(n+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(n+=`class="${t.class}" `),t.filters&&(typeof t.filters.blur=="number"&&t.filters.blur>=0&&t.filters.blur<=100&&(a+=`:blur(${t.filters.blur})`),typeof t.filters.brightness=="number"&&t.filters.brightness>=-100&&t.filters.brightness<=100&&(a+=`:brightness(${t.filters.brightness})`),t.filters.fill&&(t.filters.fill.match(/[0-9A-F]{6}/gi)||t.filters.fill==="transparent")&&(a+=`:fill(${t.filters.fill})`),t.filters.format&&["webp","png","jpeg"].includes(t.filters.format)&&(a+=`:format(${t.filters.format})`),typeof t.filters.grayscale=="boolean"&&t.filters.grayscale&&(a+=":grayscale()"),typeof t.filters.quality=="number"&&t.filters.quality>=0&&t.filters.quality<=100&&(a+=`:quality(${t.filters.quality})`),t.filters.rotate&&[90,180,270].includes(t.filters.rotate)&&(a+=`:rotate(${t.filters.rotate})`),a.length>0&&(a=`/filters${a}`))),n.length>0&&(e=e.replace(/<img/g,`<img ${n.trim()}`));const l=o>0||s>0||a.length>0?`${o}x${s}${a}`:"";return e=e.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${l}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,i=>{var c,d;const f=i.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|bmp)/g);if(f&&f.length>0){const h={srcset:(c=t.srcset)==null?void 0:c.map(g=>{if(typeof g=="number")return`//${f}/m/${g}x0${a} ${g}w`;if(typeof g=="object"&&g.length===2){let w=0,R=0;return typeof g[0]=="number"&&(w=g[0]),typeof g[1]=="number"&&(R=g[1]),`//${f}/m/${w}x${R}${a} ${w}w`}return""}).join(", "),sizes:(d=t.sizes)==null?void 0:d.map(g=>g).join(", ")};let k="";return h.srcset&&(k+=`srcset="${h.srcset}" `),h.sizes&&(k+=`sizes="${h.sizes}" `),i.replace(/<img/g,`<img ${k.trim()}`)}return i})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(s=>{const n=this.getMatchingMark(s);n&&n.tag!==""&&t.push(this.renderOpeningTag(n.tag))});const o=this.getMatchingNode(e);return o&&o.tag&&t.push(this.renderOpeningTag(o.tag)),e.content?e.content.forEach(s=>{t.push(this.renderNode(s))}):e.text?t.push(me(e.text)):o&&o.singleTag?t.push(this.renderTag(o.singleTag," /")):o&&o.html?t.push(o.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),o&&o.tag&&t.push(this.renderClosingTag(o.tag)),e.marks&&e.marks.slice(0).reverse().forEach(s=>{const n=this.getMatchingMark(s);n&&n.tag!==""&&t.push(this.renderClosingTag(n.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(o=>{if(o.constructor===String)return`<${o}${t}>`;{let s=`<${o.tag}`;if(o.attrs){for(const n in o.attrs)if(Object.prototype.hasOwnProperty.call(o.attrs,n)){const a=o.attrs[n];a!==null&&(s+=` ${n}="${a}"`)}}return`${s}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}renderEmoji(e){if(e.attrs.emoji)return e.attrs.emoji;const t=[{tag:"img",attrs:{src:e.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(t," /")}}const L=ke,we=r=>{if(typeof r!="object"||typeof r._editable>"u")return{};try{const e=JSON.parse(r._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return e?{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}:{}}catch{return{}}};let $e,ve="https://app.storyblok.com/f/storyblok-v2-latest.js";const Ce=(r,e)=>{r.addNode("blok",t=>{let o="";return t.attrs.body.forEach(s=>{o+=e(s.component,s)}),{html:o}})},Se=r=>!r||!(r!=null&&r.content.some(e=>e.content||e.type==="blok"||e.type==="horizontal_rule")),Ie=(r,e,t)=>{let o=t||$e;if(!o){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return Se(r)?"":(e&&(o=new L(e.schema),e.resolver&&Ce(o,e.resolver)),o.render(r,{},!1))},Te=()=>U(ve);function Ae(){if(!(globalThis!=null&&globalThis.storyblokApiInstance))throw new Error("storyblokApiInstance has not been initialized correctly");return globalThis.storyblokApiInstance}async function Ee(r){let e=null;return r&&r.locals._storyblok_preview_data&&(e=r.locals._storyblok_preview_data),e}function Le(r,e){var o;const t=(o=globalThis==null?void 0:globalThis.storyblokApiInstance)==null?void 0:o.richTextResolver;if(!t)throw new Error("Please initialize the Storyblok SDK before calling the renderRichText function");return Ie(r,e,t)}function xe(r){return typeof r=="object"?`const storyblokInstance = new StoryblokBridge(${JSON.stringify(r)});`:"const storyblokInstance = new StoryblokBridge();"}function Re(r){const e={useCustomApi:!1,bridge:!0,componentsDir:"src",enableFallbackComponent:!1,livePreview:!1,...r},t=xe(e.bridge);return{name:"@storyblok/astro",hooks:{"astro:config:setup":({injectScript:o,updateConfig:s,addDevToolbarApp:n,addMiddleware:a,config:l})=>{if(s({vite:{plugins:[F(e.accessToken,e.useCustomApi,e.apiOptions),B(e.componentsDir,e.components,e.enableFallbackComponent,e.customFallbackComponent),D(e)]}}),e.livePreview&&(l==null?void 0:l.output)!=="server")throw new Error("To utilize the Astro Storyblok Live feature, Astro must be configured to run in SSR mode. Please disable this feature or switch Astro to SSR mode.");o("page-ssr",`
             import { storyblokApiInstance } from "virtual:storyblok-init";
             globalThis.storyblokApiInstance = storyblokApiInstance;
-            `),e.bridge&&!e.livePreview&&o("page",`
-                import { loadStoryblokBridge } from "@storyblok/astro";
-                loadStoryblokBridge().then(() => {
-                  const { StoryblokBridge, location } = window;
-                  ${t}
-                  storyblokInstance.on(["published", "change"], (event) => {
-                    if (!event.slugChanged) {
-                      location.reload(true);
-                    } 
-                  });
+            `),e.bridge&&!e.livePreview&&o("page",`import { loadStoryblokBridge } from "@storyblok/astro";
+              loadStoryblokBridge().then(() => {
+                const { StoryblokBridge, location } = window;
+                ${t}
+                storyblokInstance.on(["published", "change"], (event) => {
+                  if (!event.slugChanged) {
+                    location.reload(true);
+                  } 
                 });
-              `),e.livePreview&&(o("page",`
-                import { loadStoryblokBridge, handleStoryblokMessage } from "@storyblok/astro";
+              });
+              `),e.livePreview&&(o("page",`import { loadStoryblokBridge, handleStoryblokMessage } from "@storyblok/astro";
                 loadStoryblokBridge().then(() => {
                   const { StoryblokBridge, location } = window;
                   ${t}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/astro",
   "type": "module",
-  "version": "6.0.0-next.2",
+  "version": "6.0.0",
   "private": false,
   "packageManager": "pnpm@9.13.2",
   "description": "Official Astro integration for the Storyblok Headless CMS",
@@ -71,7 +71,7 @@
     "astro": "^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "@storyblok/js": "^3.1.9",
+    "@storyblok/js": "3.1.9",
     "camelcase": "^8.0.0"
   },
   "devDependencies": {
@@ -80,6 +80,7 @@
     "@cypress/vite-dev-server": "^5.2.0",
     "@rollup/plugin-dynamic-import-vars": "^2.1.5",
     "@storyblok/eslint-config": "^0.3.0",
+    "@types/lodash.mergewith": "^4.6.9",
     "@types/node": "22.10.2",
     "astro": "^5.0.9",
     "cypress": "^13.15.2",