@storyblok/astro 4.1.0-alpha.2 → 4.1.0-alpha.3

package/dist/types/utils/generateFinalBridgeObject.d.ts

@@ -1,8 +1,3 @@
-import type { ISbStoriesParams, StoryblokBridgeConfigV2 } from "@storyblok/js";
-export interface RawCodeItem {
-    options?: {
-        apiOptions?: ISbStoriesParams;
-        bridgeOptions?: StoryblokBridgeConfigV2;
-    };
-}
-export declare function generateFinalBridgeObject(rawCode: RawCodeItem[]): StoryblokBridgeConfigV2;
+import type { StoryblokBridgeConfigV2 } from "@storyblok/js";
+import type { RawCode } from "../vite-plugins/vite-plugin-storyblok-bridge";
+export declare function generateFinalBridgeObject(rawCode: RawCode): StoryblokBridgeConfigV2;

package/dist/types/utils/parseAstCode.d.ts

@@ -1 +1,7 @@
-export declare function parseAstRawCode(astCode: any): any;
+import type { RawCodeItemOptions } from "../vite-plugins/vite-plugin-storyblok-bridge";
+import type { Rollup } from "vite";
+/**
+ * Parses through the Abstract Syntax Tree (AST) code to locate the 'useStoryblok' function and its properties.
+ * This functionality is crucial for generating a virtual module that can be utilized during the initialization of the Storyblok bridge.
+ */
+export declare function parseAstRawCode(astCode: Rollup.ProgramNode): RawCodeItemOptions;

package/dist/types/vite-plugins/vite-plugin-storyblok-bridge.d.ts

@@ -1,2 +1,12 @@
+import type { ISbStoriesParams, StoryblokBridgeConfigV2 } from "@storyblok/js";
 import type { Plugin } from "vite";
+export interface RawCodeItem {
+    url: string;
+    options?: RawCodeItemOptions;
+}
+export type RawCode = RawCodeItem[];
+export interface RawCodeItemOptions {
+    apiOptions?: ISbStoriesParams;
+    bridgeOptions?: StoryblokBridgeConfigV2;
+}
 export declare function vitePluginStoryblokBridge(experimentalLivePreview: boolean, output: string): Plugin;

package/live-preview/handleStoryblokMessage.ts

@@ -17,7 +17,7 @@ export async function handleStoryblokMessage(event: {
     // Debounce the getNewHTMLBody function
     const debouncedGetNewHTMLBody = async () => {
       const newBody = await getNewHTMLBody(story);
-      const currentBody = document.body as HTMLElement;
+      const currentBody = document.body;
       if (newBody.outerHTML === currentBody.outerHTML) return;
       // Get current focused element in Storyblok
       const focusedElem = document.querySelector('[data-blok-focused="true"]');
@@ -58,6 +58,7 @@ function updateDOMWithNewBody(
 }
 
 async function getNewHTMLBody(story: ISbStoryData) {
+  //TODO How to handel (50x, 405, etc.)
   const result = await fetch(location.href, {
     method: "POST",
     body: JSON.stringify({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/astro",
-  "version": "4.1.0-alpha.2",
+  "version": "4.1.0-alpha.3",
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "main": "./dist/storyblok-astro.js",
   "module": "./dist/storyblok-astro.mjs",

package/utils/generateFinalBridgeObject.ts

@@ -1,27 +1,18 @@
-import type { ISbStoriesParams, StoryblokBridgeConfigV2 } from "@storyblok/js";
+import type { StoryblokBridgeConfigV2 } from "@storyblok/js";
+import type { RawCode } from "../vite-plugins/vite-plugin-storyblok-bridge";
 
-export interface RawCodeItem {
-  options?: {
-    apiOptions?: ISbStoriesParams;
-    bridgeOptions?: StoryblokBridgeConfigV2;
-  };
-}
-export function generateFinalBridgeObject(
-  rawCode: RawCodeItem[]
-): StoryblokBridgeConfigV2 {
-  let mergedOptions = {
+export function generateFinalBridgeObject(rawCode: RawCode) {
+  let mergedOptions: StoryblokBridgeConfigV2 = {
     resolveRelations: [],
   };
 
-  function addToResolveRelations(
-    resolveRelations: string[] | string | undefined
-  ) {
-    if (resolveRelations) {
-      if (Array.isArray(resolveRelations)) {
-        mergedOptions.resolveRelations.push(...resolveRelations);
-      } else {
-        mergedOptions.resolveRelations.push(resolveRelations);
-      }
+  function addToResolveRelations(resolveRelations?: string[] | string) {
+    if (resolveRelations && Array.isArray(mergedOptions.resolveRelations)) {
+      mergedOptions.resolveRelations.push(
+        ...(Array.isArray(resolveRelations)
+          ? resolveRelations
+          : [resolveRelations])
+      );
     }
   }
 

package/utils/parseAstCode.ts

@@ -1,22 +1,34 @@
 import mergeWith from "lodash.mergewith";
+import type { ISbStoriesParams, StoryblokBridgeConfigV2 } from "@storyblok/js";
+import type { RawCodeItemOptions } from "../vite-plugins/vite-plugin-storyblok-bridge";
+import type { Rollup } from "vite";
+import type { SpreadElement, Property } from "estree";
 
-export function parseAstRawCode(astCode) {
-  let obj;
-  function customizer(_, srcValue) {
+/**
+ * Parses through the Abstract Syntax Tree (AST) code to locate the 'useStoryblok' function and its properties.
+ * This functionality is crucial for generating a virtual module that can be utilized during the initialization of the Storyblok bridge.
+ */
+
+export function parseAstRawCode(astCode: Rollup.ProgramNode) {
+  let obj: RawCodeItemOptions = {};
+
+  function customizer(_: any, srcValue: any) {
     if (
       srcValue?.type === "AwaitExpression" &&
-      srcValue?.argument?.callee?.name === "useStoryblok"
+      srcValue.argument.type === "CallExpression" &&
+      srcValue.argument.callee.type === "Identifier" &&
+      srcValue.argument.callee.name === "useStoryblok"
     ) {
-      const props = srcValue?.argument?.arguments;
-      if (props[1]?.type === "ObjectExpression") {
-        const apiOptions = getAstPropToObj(props[1]?.properties);
+      const props = srcValue.argument.arguments;
+      if (props && props[1].type === "ObjectExpression") {
+        const apiOptions = getAstPropToObj(props[1].properties);
         obj = {
           ...obj,
           apiOptions,
         };
       }
-      if (props[2]?.type === "ObjectExpression") {
-        const bridgeOptions = getAstPropToObj(props[2]?.properties);
+      if (props && props[2].type === "ObjectExpression") {
+        const bridgeOptions = getAstPropToObj(props[2].properties);
         obj = {
           ...obj,
           bridgeOptions,
@@ -29,15 +41,26 @@ export function parseAstRawCode(astCode) {
   return obj;
 }
 
-function getAstPropToObj(properties) {
-  return properties.reduce((options, { key, value }) => {
+function getAstPropToObj(properties: (SpreadElement | Property)[]) {
+  const option: ISbStoriesParams | StoryblokBridgeConfigV2 = {};
+
+  return properties.reduce((options, property) => {
+    if (property.type !== "Property") return options;
+    const { key, value } = property;
     const { type } = value;
-    options[key.name] =
-      type === "Literal"
-        ? value.value
-        : type === "ArrayExpression"
-          ? value.elements.map((v) => v.value)
-          : value.value;
+    if (key.type !== "Identifier") return options;
+
+    if (type === "Literal") {
+      options[key.name] = value.value;
+    } else if (type === "ArrayExpression") {
+      const arrayValues = value.elements.reduce((acc, element) => {
+        if (element.type === "Literal" && element.value) {
+          return [...acc, element.value];
+        }
+        return acc;
+      }, []);
+      options[key.name] = arrayValues;
+    }
     return options;
-  }, {});
+  }, option);
 }