@storyblok/astro 4.0.5 → 4.1.0-next.1

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 { AstroIntegration, AstroGlobal } 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 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 = {
     /**
@@ -49,4 +52,4 @@ export type IntegrationOptions = {
     customFallbackComponent?: string;
 };
 export default function storyblokIntegration(options: IntegrationOptions): AstroIntegration;
-export * from './types';
+export * from "./types";

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

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

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(): 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,57 @@
+export async function handleStoryblokMessage(event) {
+  const { action, story } = event || {};
+  //in the case of input event
+  if (action === "input" && story) {
+    const currentBody = document.body;
+
+    const newBody = await getNewHTMLBody(story);
+    if (newBody.outerHTML === currentBody.outerHTML) return;
+
+    //Get current focused element in storyblok
+    const focusedElem = document.querySelector('[data-blok-focused="true"]');
+    updateDOMWithNewBody(currentBody, newBody, focusedElem);
+  } else if (["published", "change"].includes(event?.data?.action)) {
+    location.reload();
+  }
+}
+function updateDOMWithNewBody(currentBody, newBody, focusedElem) {
+  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 {
+    //We can make this part even better
+    // const allStoryblokElem =
+    //   document.querySelectorAll('[data-blok-uid]')
+    // console.log({ allStoryblokElem })
+
+    console.log("Doing full replace");
+    currentBody.replaceWith(newBody);
+  }
+}
+
+async function getNewHTMLBody(story) {
+  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-next.1",
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "main": "./dist/storyblok-astro.js",
   "module": "./dist/storyblok-astro.mjs",
@@ -8,7 +8,9 @@
     "dist",
     "components",
     "dev-toolbar",
-    "live-preview"
+    "live-preview",
+    "utils",
+    "vite-plugins"
   ],
   "exports": {
     ".": {
@@ -35,6 +37,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,11 +58,13 @@
   },
   "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/lodash.mergewith": "^4.6.9",
     "@types/node": "20.12.7",
     "astro": "^4.6.3",
     "cypress": "^13.8.0",
@@ -63,7 +72,7 @@
     "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"

package/utils/generateFinalBridgeObject.ts

@@ -0,0 +1,32 @@
+export function generateFinalBridgeObject(rawCode: any) {
+  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,41 @@
+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") {
+        obj = {
+          ...obj,
+          apiOptions: getAstPropToObj(props[1]?.properties),
+        };
+      }
+      if (props[2]?.type === "ObjectExpression") {
+        obj = {
+          ...obj,
+          bridgeOptions: getAstPropToObj(props[2]?.properties),
+        };
+      }
+    }
+  }
+
+  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;
+  }, {});
+}

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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,124 @@
+/**
+ * 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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,20 @@
+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)}`;
+      }
+    },
+  };
+}