@storyblok/astro 4.1.0-next.2 → 4.1.0

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
-import type { AstroIntegration, AstroGlobal } from "astro";
+import type { AstroGlobal, AstroIntegration } from "astro";
 import type { ISbConfig, ISbRichtext, ISbStoriesParams, ISbStoryData, SbRichTextOptions, StoryblokBridgeConfigV2, StoryblokClient } from "./types";
-export { storyblokEditable, loadStoryblokBridge, RichTextResolver, RichTextSchema, } from "@storyblok/js";
 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;
@@ -50,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";

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

@@ -1 +1,11 @@
-export declare function handleStoryblokMessage(event: any): Promise<void>;
+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/utils/generateFinalBridgeObject.d.ts

@@ -1,3 +1,3 @@
-export declare function generateFinalBridgeObject(rawCode: any): {
-    resolveRelations: any[];
-};
+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 declare function vitePluginStoryblokBridge(): Plugin;
+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

@@ -1,57 +1,43 @@
-let timeout;
+import type { ISbStoryData } from "@storyblok/js";
 
-export async function handleStoryblokMessage(event) {
+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 t0 = performance.now();
       const newBody = await getNewHTMLBody(story);
-      const t1 = performance.now();
-      console.log(`getNewHTMLBody took ${t1 - t0} milliseconds.`);
       const currentBody = document.body;
       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 t2 = performance.now();
-      console.log(`updateDOMWithNewBody took ${t2 - t1} milliseconds.`);
-      console.log(`total time took ${t2 - t0} milliseconds.`);
     };
-
-    // Execute the debounced function after a delay
-    const debounceDelay = 1500; // Adjust the delay as needed
+    const debounceDelay = 500; // Adjust the delay as needed
     clearTimeout(timeout);
     timeout = setTimeout(debouncedGetNewHTMLBody, debounceDelay);
   }
 
-  if (["published", "change"].includes(event?.data?.action)) {
+  if (["published", "change"].includes(event?.action)) {
     location.reload();
   }
 }
 
-// export async function handleStoryblokMessage(event) {
-//   const t0 = performance.now();
-//   const { action, story } = event || {};
-//   //in the case of input event
-//   if (action === "input" && story) {
-//     const newBody = await getNewHTMLBody(story);
-//     const t1 = performance.now();
-//     console.log(`getNewHTMLBody took ${t1 - t0} milliseconds.`);
-//     const currentBody = document.body;
-//     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 t2 = performance.now();
-//     console.log(`updateDOMWithNewBody took ${t2 - t1} milliseconds.`);
-//     console.log(`total time took ${t2 - t0} milliseconds.`);
-//   } else if (["published", "change"].includes(event?.data?.action)) {
-//     location.reload();
-//   }
-// }
-function updateDOMWithNewBody(currentBody, newBody, focusedElem) {
+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");
@@ -62,21 +48,17 @@ function updateDOMWithNewBody(currentBody, newBody, focusedElem) {
     if (newDomFocusElem) {
       // Add the [data-blok-focused] attribute to the above element
       newDomFocusElem.setAttribute("data-blok-focused", "true");
-      console.log("Doing partial replace");
+      // console.log("Doing partial replace");
       focusedElem.replaceWith(newDomFocusElem);
     }
   } else {
-    //We can make this part even better
-    // const allStoryblokElem =
-    //   document.querySelectorAll('[data-blok-uid]')
-    // console.log({ allStoryblokElem })
-
-    console.log("Doing full replace");
+    // console.log("Doing full replace");
     currentBody.replaceWith(newBody);
   }
 }
 
-async function getNewHTMLBody(story) {
+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-next.2",
+  "version": "4.1.0",
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "main": "./dist/storyblok-astro.js",
   "module": "./dist/storyblok-astro.mjs",
@@ -9,8 +9,7 @@
     "components",
     "dev-toolbar",
     "live-preview",
-    "utils",
-    "vite-plugins"
+    "utils"
   ],
   "exports": {
     ".": {
@@ -65,10 +64,10 @@
     "@cypress/vite-dev-server": "^5.0.7",
     "@rollup/plugin-dynamic-import-vars": "^2.1.2",
     "@types/lodash.mergewith": "^4.6.9",
-    "@types/node": "20.12.7",
+    "@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",
@@ -97,6 +96,10 @@
       {
         "name": "next",
         "prerelease": true
+      },
+      {
+        "name": "alpha",
+        "prerelease": true
       }
     ]
   },

package/utils/generateFinalBridgeObject.ts

@@ -1,17 +1,18 @@
-export function generateFinalBridgeObject(rawCode: any) {
-  let mergedOptions = {
+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 | 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,23 +1,37 @@
 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 props = srcValue.argument.arguments;
+      if (props && props[1].type === "ObjectExpression") {
+        const apiOptions = getAstPropToObj(props[1].properties);
         obj = {
           ...obj,
-          apiOptions: getAstPropToObj(props[1]?.properties),
+          apiOptions,
         };
       }
-      if (props[2]?.type === "ObjectExpression") {
+      if (props && props[2].type === "ObjectExpression") {
+        const bridgeOptions = getAstPropToObj(props[2].properties);
         obj = {
           ...obj,
-          bridgeOptions: getAstPropToObj(props[2]?.properties),
+          bridgeOptions,
         };
       }
     }
@@ -27,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);
 }

package/vite-plugins/vite-plugin-storyblok-bridge.ts

@@ -1,69 +0,0 @@
-import type { Plugin } from "vite";
-import { parseAstRawCode } from "../utils/parseAstCode";
-import { generateFinalBridgeObject } from "../utils/generateFinalBridgeObject";
-let previousRawCode = [];
-
-export function vitePluginStoryblokBridge(): Plugin {
-  let rawCode = [];
-  const virtualModuleId = "virtual:storyblok-bridge";
-  const resolvedVirtualModuleId = "\0" + virtualModuleId;
-  let _server = null;
-  let restartTimeout = null;
-
-  return {
-    name: "vite-plugin-storyblok-bridge",
-    async resolveId(id: string) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId;
-      }
-    },
-    async transform(code, id) {
-      if (id.includes("node_modules") && !id.includes("/pages/")) return;
-      if (!code.includes("useStoryblok")) return;
-      const moduleInfo = this.getModuleInfo(id);
-      if (!moduleInfo.meta?.astro) return;
-      const [, ...routeArray] = id.split("src/pages/");
-      const url = routeArray.join("/").replace(".astro", "");
-      const options = parseAstRawCode(this.parse(code));
-      if (previousRawCode.length) {
-        rawCode = previousRawCode.filter((i) => i.url !== url);
-      }
-      rawCode.push({
-        url,
-        options,
-      });
-      if (!_server) return;
-      if (restartTimeout) {
-        clearTimeout(restartTimeout);
-      }
-      restartTimeout = setTimeout(() => {
-        if (alreadyHaveThisUrl(previousRawCode, rawCode)) return;
-        if (previousRawCode.length !== 0) {
-          _server.restart();
-          console.info("Updating bridge options...");
-        }
-        previousRawCode = [...rawCode];
-      }, 1000);
-    },
-    async load(id: string) {
-      if (id === resolvedVirtualModuleId) {
-        return `export const bridgeOptions = ${JSON.stringify(generateFinalBridgeObject(rawCode))}`;
-      }
-    },
-    configureServer(server) {
-      _server = server;
-    },
-  };
-}
-
-interface ParsedCodeObj {
-  url: string;
-  options: any;
-}
-
-function alreadyHaveThisUrl(a: ParsedCodeObj[] = [], b: ParsedCodeObj[] = []) {
-  return b.every(({ url, options }) => {
-    const aCopy = a.find((e) => e?.url === url);
-    return aCopy && JSON.stringify(options) === JSON.stringify(aCopy.options);
-  });
-}

package/vite-plugins/vite-plugin-storyblok-components.ts

@@ -1,124 +0,0 @@
-/**
- * Custom Vite plugin by Tony Sull (https://github.com/tony-sull)
- */
-import camelcase from "camelcase";
-import type { Plugin } from "vite";
-
-export function vitePluginStoryblokComponents(
-  componentsDir: string,
-  components?: object,
-  enableFallbackComponent?: boolean,
-  customFallbackComponent?: string
-): Plugin {
-  const virtualModuleId = "virtual:storyblok-components";
-  const resolvedVirtualModuleId = "\0" + virtualModuleId;
-
-  return {
-    name: "vite-plugin-storyblok-components",
-    async resolveId(id: string) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId;
-      }
-    },
-    async load(id: string) {
-      if (id === resolvedVirtualModuleId) {
-        /**
-         * Handle registered components
-         */
-        const imports: string[] = [];
-        const excludedKeys: string[] = [];
-        for await (const [key, value] of Object.entries(components)) {
-          const resolvedId = await this.resolve(
-            "/" + componentsDir + "/" + value + ".astro"
-          );
-
-          /**
-           * if the component cannot be resolved
-           */
-          if (!resolvedId) {
-            if (enableFallbackComponent) {
-              /**
-               * if showFallbackComponent is enabled, the current component key needs to be excluded from the imports
-               * otherwise the attempted import would result in an error
-               */
-              excludedKeys.push(key);
-            } else {
-              /**
-               * if it is not enabled, throw a specific error here
-               */
-              throw new Error(
-                `Component could not be found for blok "${key}"! Does "${
-                  "/" + componentsDir + "/" + value
-                }.astro" exist?`
-              );
-            }
-          } else {
-            /**
-             * if the component can be resolved, add it to the imports array
-             * important: convert blok names to camel case for valid import names
-             * StoryblokComponent.astro needs to do the same when resolving components!
-             */
-            imports.push(`import ${camelcase(key)} from "${resolvedId.id}"`);
-          }
-        }
-
-        /**
-         * Handle custom fallback component
-         */
-
-        let fallbackComponentKey: string = "";
-
-        if (enableFallbackComponent) {
-          fallbackComponentKey = ",FallbackComponent";
-          if (customFallbackComponent) {
-            /**
-             * resolve custom FallbackComponent defined in astro.config.mjs
-             */
-            const fallbackComponentResolvedId = await this.resolve(
-              "/" + componentsDir + "/" + customFallbackComponent + ".astro"
-            );
-
-            if (!fallbackComponentResolvedId) {
-              throw new Error(
-                `Custom fallback component could not be found. Does "${
-                  "/" + componentsDir + "/" + customFallbackComponent
-                }.astro" exist?`
-              );
-            }
-
-            imports.push(
-              `import FallbackComponent from "${fallbackComponentResolvedId.id}"`
-            );
-          } else {
-            /**
-             * import default FallbackComponent bundled with @storyblok/astro
-             */
-            imports.push(
-              `import FallbackComponent from '@storyblok/astro/FallbackComponent.astro'`
-            );
-          }
-        }
-
-        if (!Object.values(components).length) {
-          /**
-           * If no components are registered in astro.config.mjs, either export just the fallback component (default or custom),
-           * or throw an error.
-           */
-          if (enableFallbackComponent) {
-            return `${
-              imports[0]
-            }; export default {${fallbackComponentKey.replace(",", "")}}`;
-          }
-          throw new Error(
-            `Currently, no Storyblok components are registered in astro.config.mjs.\nPlease register your components or enable the fallback component.\nDetailed information can be found here: https://github.com/storyblok/storyblok-astro`
-          );
-        } else {
-          return `${imports.join(";")};export default {${Object.keys(components)
-            .filter((key) => !excludedKeys.includes(key))
-            .map((key) => camelcase(key))
-            .join(",")}${fallbackComponentKey}}`;
-        }
-      }
-    },
-  };
-}

package/vite-plugins/vite-plugin-storyblok-init.ts

@@ -1,33 +0,0 @@
-import type { ISbConfig } from "../types";
-import type { Plugin } from "vite";
-
-export function vitePluginStoryblokInit(
-  accessToken: string,
-  useCustomApi: boolean,
-  apiOptions: ISbConfig
-): Plugin {
-  const virtualModuleId = "virtual:storyblok-init";
-  const resolvedVirtualModuleId = "\0" + virtualModuleId;
-
-  return {
-    name: "vite-plugin-storyblok-init",
-    async resolveId(id: string) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId;
-      }
-    },
-    async load(id: string) {
-      if (id === resolvedVirtualModuleId) {
-        return `
-          import { storyblokInit, apiPlugin } from "@storyblok/js";
-          const { storyblokApi } = storyblokInit({
-            accessToken: "${accessToken}",
-            use: ${useCustomApi ? "[]" : "[apiPlugin]"},
-            apiOptions: ${JSON.stringify(apiOptions)},
-          });
-          export const storyblokApiInstance = storyblokApi;  
-        `;
-      }
-    },
-  };
-}

package/vite-plugins/vite-plugin-storyblok-options.ts

@@ -1,20 +0,0 @@
-import type { Plugin } from "vite";
-
-export function vitePluginStoryblokOptions(options: object): Plugin {
-  const virtualModuleId = `virtual:storyblok-options`;
-  const resolvedVirtualModuleId = "\0" + virtualModuleId;
-
-  return {
-    name: "vite-plugin-storyblok-options",
-    async resolveId(id: string) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId;
-      }
-    },
-    async load(id: string) {
-      if (id === resolvedVirtualModuleId) {
-        return `export default ${JSON.stringify(options)}`;
-      }
-    },
-  };
-}