@storyblok/astro 5.0.2 → 5.1.0-alpha.1

package/dist/types/index.d.ts

@@ -1,9 +1,9 @@
 import type { AstroGlobal, AstroIntegration } from "astro";
-import type { ISbConfig, ISbRichtext, ISbStoriesParams, ISbStoryData, SbRichTextOptions, StoryblokBridgeConfigV2, StoryblokClient } from "./types";
+import type { ISbConfig, ISbRichtext, ISbStoryData, SbRichTextOptions, StoryblokBridgeConfigV2, StoryblokClient } from "./types";
 export { handleStoryblokMessage } from "./live-preview/handleStoryblokMessage";
 export { storyblokEditable, loadStoryblokBridge, RichTextResolver, RichTextSchema, } from "@storyblok/js";
 export declare function useStoryblokApi(): StoryblokClient;
-export declare function useStoryblok(slug: string, apiOptions: ISbStoriesParams, bridgeOptions: StoryblokBridgeConfigV2, Astro: AstroGlobal): Promise<ISbStoryData<import("@storyblok/js").StoryblokComponentType<string> & {
+export declare function getLiveStory(Astro: AstroGlobal): Promise<ISbStoryData<import("@storyblok/js").StoryblokComponentType<string> & {
     [index: string]: any;
 }>>;
 export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string;
@@ -55,5 +55,5 @@ export type IntegrationOptions = {
      */
     livePreview?: boolean;
 };
-export default function storyblokIntegration(options: IntegrationOptions): AstroIntegration;
+export default function storyblokIntegration({ useCustomApi, bridge, componentsDir, enableFallbackComponent, livePreview, ...restOptions }: IntegrationOptions): AstroIntegration;
 export * from "./types";

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

@@ -0,0 +1,2 @@
+import type { StoryblokBridgeConfigV2 } from "../types";
+export declare function initStoryblokBridge(config: boolean | StoryblokBridgeConfigV2): string;

package/live-preview/handleStoryblokMessage.ts

@@ -22,6 +22,8 @@ export async function handleStoryblokMessage(event: {
       // Get current focused element in Storyblok
       const focusedElem = document.querySelector('[data-blok-focused="true"]');
       updateDOMWithNewBody(currentBody, newBody, focusedElem);
+      // Dispatch a custom event after the body update
+      document.dispatchEvent(new Event("storyblok-live-preview-updated"));
     };
     const debounceDelay = 500; // Adjust the delay as needed
     clearTimeout(timeout);

package/package.json

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

package/utils/initStoryblokBridge.ts

@@ -0,0 +1,11 @@
+import type { StoryblokBridgeConfigV2 } from "../types";
+
+export function initStoryblokBridge(
+  config: boolean | StoryblokBridgeConfigV2
+): string {
+  if (typeof config === "object") {
+    const bridgeConfig = JSON.stringify(config);
+    return `const storyblokInstance = new StoryblokBridge(${bridgeConfig});`;
+  }
+  return "const storyblokInstance = new StoryblokBridge();";
+}

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

@@ -1,3 +0,0 @@
-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,7 +0,0 @@
-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,12 +0,0 @@
-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/utils/generateFinalBridgeObject.ts

@@ -1,33 +0,0 @@
-import type { StoryblokBridgeConfigV2 } from "@storyblok/js";
-import type { RawCode } from "../vite-plugins/vite-plugin-storyblok-bridge";
-
-export function generateFinalBridgeObject(rawCode: RawCode) {
-  let mergedOptions: StoryblokBridgeConfigV2 = {
-    resolveRelations: [],
-  };
-
-  function addToResolveRelations(resolveRelations?: string[] | string) {
-    if (resolveRelations && Array.isArray(mergedOptions.resolveRelations)) {
-      mergedOptions.resolveRelations.push(
-        ...(Array.isArray(resolveRelations)
-          ? resolveRelations
-          : [resolveRelations])
-      );
-    }
-  }
-
-  for (const item of rawCode) {
-    if (item.options) {
-      const { apiOptions, bridgeOptions } = item.options;
-      addToResolveRelations(apiOptions?.resolve_relations);
-      if (bridgeOptions) {
-        const { resolveRelations, ...rest } = bridgeOptions;
-        addToResolveRelations(resolveRelations);
-        Object.assign(mergedOptions, rest);
-      }
-    }
-  }
-  mergedOptions.resolveRelations = [...new Set(mergedOptions.resolveRelations)];
-
-  return mergedOptions;
-}

package/utils/parseAstCode.ts

@@ -1,66 +0,0 @@
-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";
-
-/**
- * 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.type === "CallExpression" &&
-      srcValue.argument.callee.type === "Identifier" &&
-      srcValue.argument.callee.name === "useStoryblok"
-    ) {
-      const props = srcValue.argument.arguments;
-      if (props && props[1].type === "ObjectExpression") {
-        const apiOptions = getAstPropToObj(props[1].properties);
-        obj = {
-          ...obj,
-          apiOptions,
-        };
-      }
-      if (props && props[2].type === "ObjectExpression") {
-        const bridgeOptions = getAstPropToObj(props[2].properties);
-        obj = {
-          ...obj,
-          bridgeOptions,
-        };
-      }
-    }
-  }
-
-  mergeWith({}, astCode, customizer);
-  return obj;
-}
-
-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;
-    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);
-}