@storyblok/astro 4.0.5 → 4.1.0-alpha.2

package/dist/types/components/FallbackComponent.d.ts

@@ -1,3 +1,2 @@
-import { default as FallbackComponent } from './FallbackComponent.astro';
-
+import FallbackComponent from "./FallbackComponent.astro";
 export default FallbackComponent;

package/dist/types/components/RichTextRenderer.d.ts

@@ -1,3 +1,2 @@
-import { default as RichTextRenderer } from './RichTextRenderer.astro';
-
+import RichTextRenderer from "./RichTextRenderer.astro";
 export default RichTextRenderer;

package/dist/types/components/StoryblokComponent.d.ts

@@ -1,3 +1,2 @@
-import { default as StoryblokComponent } from './StoryblokComponent.astro';
-
+import StoryblokComponent from "./StoryblokComponent.astro";
 export default StoryblokComponent;

package/dist/types/index.d.ts

@@ -1,8 +1,11 @@
-import { ISbConfig, ISbRichtext, SbRichTextOptions, StoryblokBridgeConfigV2, StoryblokClient } from './types';
-import { AstroIntegration } from 'astro';
-
-export { storyblokEditable, loadStoryblokBridge, RichTextResolver, RichTextSchema, } from '@storyblok/js';
+import type { AstroGlobal, AstroIntegration } from "astro";
+import type { ISbConfig, ISbRichtext, ISbStoriesParams, 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> & {
+    [index: string]: any;
+}>>;
 export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string;
 export type IntegrationOptions = {
     /**
@@ -47,6 +50,10 @@ export type IntegrationOptions = {
      * Please note: the path takes into account the `componentsDir` option.
      */
     customFallbackComponent?: string;
+    /**
+     * A boolean to enable/disable the Experimental Live Preview feature. Disabled by default.
+     */
+    livePreview?: boolean;
 };
 export default function storyblokIntegration(options: IntegrationOptions): AstroIntegration;
-export * from './types';
+export * from "./types";

package/dist/types/live-preview/handleStoryblokMessage.d.ts

@@ -0,0 +1,11 @@
+import type { ISbStoryData } from "@storyblok/js";
+/**
+ * Our current tests indicate that the post request section
+ * is the bottleneck in terms of time consumption.
+ * We should explore alternative methods to optimize
+ * this process and improve efficiency.
+ */
+export declare function handleStoryblokMessage(event: {
+    action: string;
+    story: ISbStoryData;
+}): Promise<void>;

package/dist/types/live-preview/middleware.d.ts

@@ -0,0 +1 @@
+export declare const onRequest: import("astro").MiddlewareHandler;

package/dist/types/types.d.ts

@@ -9,4 +9,4 @@ ISbAlternateObject, // previously AlternateObject
 ISbStoriesParams, // previously StoriesParams
 ISbStoryParams, // previously StoryParams
 ISbRichtext, // previously Richtext
-ISbEventPayload, } from '@storyblok/js';
+ISbEventPayload, } from "@storyblok/js";

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

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

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

@@ -0,0 +1 @@
+export declare function parseAstRawCode(astCode: any): any;

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

@@ -0,0 +1,2 @@
+import type { Plugin } from "vite";
+export declare function vitePluginStoryblokBridge(experimentalLivePreview: boolean, output: string): Plugin;

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

@@ -1,3 +1,2 @@
-import { Plugin } from 'vite';
-
+import type { Plugin } from "vite";
 export declare function vitePluginStoryblokComponents(componentsDir: string, components?: object, enableFallbackComponent?: boolean, customFallbackComponent?: string): Plugin;

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

@@ -1,4 +1,3 @@
-import { Plugin } from 'vite';
-import { ISbConfig } from '../types';
-
+import type { ISbConfig } from "../types";
+import type { Plugin } from "vite";
 export declare function vitePluginStoryblokInit(accessToken: string, useCustomApi: boolean, apiOptions: ISbConfig): Plugin;

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

@@ -1,3 +1,2 @@
-import { Plugin } from 'vite';
-
+import type { Plugin } from "vite";
 export declare function vitePluginStoryblokOptions(options: object): Plugin;

package/live-preview/handleStoryblokMessage.ts

@@ -0,0 +1,75 @@
+import type { ISbStoryData } from "@storyblok/js";
+
+let timeout: NodeJS.Timeout;
+/**
+ * Our current tests indicate that the post request section
+ * is the bottleneck in terms of time consumption.
+ * We should explore alternative methods to optimize
+ * this process and improve efficiency.
+ */
+export async function handleStoryblokMessage(event: {
+  action: string;
+  story: ISbStoryData;
+}) {
+  const { action, story } = event || {};
+
+  if (action === "input" && story) {
+    // Debounce the getNewHTMLBody function
+    const debouncedGetNewHTMLBody = async () => {
+      const newBody = await getNewHTMLBody(story);
+      const currentBody = document.body as HTMLElement;
+      if (newBody.outerHTML === currentBody.outerHTML) return;
+      // Get current focused element in Storyblok
+      const focusedElem = document.querySelector('[data-blok-focused="true"]');
+      updateDOMWithNewBody(currentBody, newBody, focusedElem);
+    };
+    const debounceDelay = 500; // Adjust the delay as needed
+    clearTimeout(timeout);
+    timeout = setTimeout(debouncedGetNewHTMLBody, debounceDelay);
+  }
+
+  if (["published", "change"].includes(event?.action)) {
+    location.reload();
+  }
+}
+
+function updateDOMWithNewBody(
+  currentBody: HTMLElement,
+  newBody: HTMLElement,
+  focusedElem: Element | null
+) {
+  if (focusedElem) {
+    //Get the [data-blok-uid] of the focused element in storyblok
+    const focusedElementID = focusedElem.getAttribute("data-blok-uid");
+    //Now find the same element by above [data-blok-uid] in our new virtual HTML page
+    const newDomFocusElem = newBody.querySelector(
+      `[data-blok-uid="${focusedElementID}"]`
+    );
+    if (newDomFocusElem) {
+      // Add the [data-blok-focused] attribute to the above element
+      newDomFocusElem.setAttribute("data-blok-focused", "true");
+      // console.log("Doing partial replace");
+      focusedElem.replaceWith(newDomFocusElem);
+    }
+  } else {
+    // console.log("Doing full replace");
+    currentBody.replaceWith(newBody);
+  }
+}
+
+async function getNewHTMLBody(story: ISbStoryData) {
+  const result = await fetch(location.href, {
+    method: "POST",
+    body: JSON.stringify({
+      ...story,
+      is_storyblok_preview: true,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  const html = await result.text();
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  return doc.body;
+}

package/live-preview/middleware.ts

@@ -0,0 +1,11 @@
+import { defineMiddleware } from "astro/middleware";
+
+export const onRequest = defineMiddleware(async ({ locals, request }, next) => {
+  if (request["method"] === "POST") {
+    const requestBody = await request.json();
+    if (requestBody && requestBody["is_storyblok_preview"]) {
+      locals["_storyblok_preview_data"] = requestBody;
+    }
+  }
+  return next();
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/astro",
-  "version": "4.0.5",
+  "version": "4.1.0-alpha.2",
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "main": "./dist/storyblok-astro.js",
   "module": "./dist/storyblok-astro.mjs",
@@ -8,7 +8,8 @@
     "dist",
     "components",
     "dev-toolbar",
-    "live-preview"
+    "live-preview",
+    "utils"
   ],
   "exports": {
     ".": {
@@ -35,6 +36,11 @@
       "types": "./dev-toolbar/toolbarApp.ts",
       "import": "./dev-toolbar/toolbarApp.ts",
       "require": "./dev-toolbar/toolbarApp.ts"
+    },
+    "./middleware.ts": {
+      "types": "./live-preview/middleware.ts",
+      "import": "./live-preview/middleware.ts",
+      "require": "./live-preview/middleware.ts"
     }
   },
   "types": "./dist/types/index.d.ts",
@@ -51,19 +57,21 @@
   },
   "dependencies": {
     "@storyblok/js": "^3.0.8",
-    "camelcase": "^8.0.0"
+    "camelcase": "^8.0.0",
+    "lodash.mergewith": "^4.6.2"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^5.0.7",
     "@rollup/plugin-dynamic-import-vars": "^2.1.2",
-    "@types/node": "20.12.7",
+    "@types/lodash.mergewith": "^4.6.9",
+    "@types/node": "20.12.11",
     "astro": "^4.6.3",
-    "cypress": "^13.8.0",
-    "eslint-plugin-cypress": "^2.15.2",
+    "cypress": "^13.8.1",
+    "eslint-plugin-cypress": "^3.2.0",
     "start-server-and-test": "^2.0.3",
     "typescript": "5.4.5",
     "vite": "^5.2.10",
-    "vite-plugin-dts": "^3.8.3"
+    "vite-plugin-dts": "^3.7.3"
   },
   "peerDependencies": {
     "astro": "^3.0.0 || ^4.0.0"
@@ -88,6 +96,10 @@
       {
         "name": "next",
         "prerelease": true
+      },
+      {
+        "name": "alpha",
+        "prerelease": true
       }
     ]
   },

package/utils/generateFinalBridgeObject.ts

@@ -0,0 +1,42 @@
+import type { ISbStoriesParams, StoryblokBridgeConfigV2 } from "@storyblok/js";
+
+export interface RawCodeItem {
+  options?: {
+    apiOptions?: ISbStoriesParams;
+    bridgeOptions?: StoryblokBridgeConfigV2;
+  };
+}
+export function generateFinalBridgeObject(
+  rawCode: RawCodeItem[]
+): StoryblokBridgeConfigV2 {
+  let mergedOptions = {
+    resolveRelations: [],
+  };
+
+  function addToResolveRelations(
+    resolveRelations: string[] | string | undefined
+  ) {
+    if (resolveRelations) {
+      if (Array.isArray(resolveRelations)) {
+        mergedOptions.resolveRelations.push(...resolveRelations);
+      } else {
+        mergedOptions.resolveRelations.push(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

@@ -0,0 +1,43 @@
+import mergeWith from "lodash.mergewith";
+
+export function parseAstRawCode(astCode) {
+  let obj;
+  function customizer(_, srcValue) {
+    if (
+      srcValue?.type === "AwaitExpression" &&
+      srcValue?.argument?.callee?.name === "useStoryblok"
+    ) {
+      const props = srcValue?.argument?.arguments;
+      if (props[1]?.type === "ObjectExpression") {
+        const apiOptions = getAstPropToObj(props[1]?.properties);
+        obj = {
+          ...obj,
+          apiOptions,
+        };
+      }
+      if (props[2]?.type === "ObjectExpression") {
+        const bridgeOptions = getAstPropToObj(props[2]?.properties);
+        obj = {
+          ...obj,
+          bridgeOptions,
+        };
+      }
+    }
+  }
+
+  mergeWith({}, astCode, customizer);
+  return obj;
+}
+
+function getAstPropToObj(properties) {
+  return properties.reduce((options, { key, value }) => {
+    const { type } = value;
+    options[key.name] =
+      type === "Literal"
+        ? value.value
+        : type === "ArrayExpression"
+          ? value.elements.map((v) => v.value)
+          : value.value;
+    return options;
+  }, {});
+}