Merge pull request #73 from storyblok/feat/add-typescript-remove-axios

BREAKING CHANGE: Axios is no longer a dependency

README.md

@@ -59,6 +59,8 @@ export default defineConfig({
 });
 ```
 
+> ⚠️ This SDK uses the Fetch API under the hood. If your environment doesn't support it, you need to install a polyfill like [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch). More info on [storyblok-js-client docs](https://github.com/storyblok/storyblok-js-client#fetch-use-polyfill-if-needed---version-5).
+
 ### Options
 
 When you initialize the integration, you can pass all [_@storyblok/js_ options](https://github.com/storyblok/storyblok-js#features-and-api). For spaces created in the United States, you have to set the `region` parameter accordingly `{ apiOptions: { region: 'us' } }`.

lib/StoryblokComponent.astro

@@ -1,6 +1,12 @@
 ---
 import components from "virtual:storyblok-components";
 import camelcase from "camelcase";
+import type { SbBlokData } from "./types";
+
+interface Props {
+  blok: SbBlokData;
+  props: object;
+}
 
 const { blok, ...props } = Astro.props;
 

lib/index.js → lib/index.ts

@@ -1,23 +1,32 @@
 import { vitePluginStoryblokInit } from "./vite-plugin-storyblok-init.js";
 import { vitePluginStoryblokComponents } from "./vite-plugin-storyblok-components.js";
 
-import { renderRichText as origRenderRichText } from "@storyblok/js";
+import {
+  RichTextResolver,
+  renderRichText as origRenderRichText,
+} from "@storyblok/js";
+
+import type { AstroIntegration } from "astro";
+
+import type { ISbConfig, ISbRichtext, SbRichTextOptions } from "./types";
 
 export {
   storyblokEditable,
   loadStoryblokBridge,
+  RichTextResolver,
   RichTextSchema,
 } from "@storyblok/js";
 
 export function useStoryblokApi() {
   if (!globalThis.storyblokApiInstance) {
     console.error("storyblokApiInstance has not been initialized correctly");
   }
-  return storyblokApiInstance;
+  return globalThis.storyblokApiInstance;
 }
 
-export function renderRichText(data, options) {
-  const resolverInstance = globalThis.storyblokApiInstance.richTextResolver;
+export function renderRichText(data: ISbRichtext, options?: SbRichTextOptions) {
+  const resolverInstance: RichTextResolver =
+    globalThis.storyblokApiInstance.richTextResolver;
   if (!resolverInstance) {
     console.error(
       "Please initialize the Storyblok SDK before calling the renderRichText function"
@@ -27,7 +36,47 @@ export function renderRichText(data, options) {
   return origRenderRichText(data, options, resolverInstance);
 }
 
-export default function storyblokIntegration(options) {
+export interface IntegrationOptions {
+  /**
+   * The access token from your space.
+   */
+  accessToken: string;
+  /**
+   *  If you want to use your own method to fetch data from Storyblok, you can disable this behavior by setting `useCustomApi` to `true`, resulting in an optimized final bundle.
+   */
+  useCustomApi?: false;
+  /**
+   * Set custom API options here (cache, region, and more). All options are documented [here](https://github.com/storyblok/storyblok-js-client#class-storyblok).
+   */
+  apiOptions?: ISbConfig;
+  /**
+   * A boolean to enable/disable the Storyblok JavaScript Bridge. Enabled by default.
+   */
+  bridge?: boolean;
+  /**
+   * An object containing your Astro components to their Storyblok equivalents.
+   * Example:
+   * ```js
+   * components: {
+   *   page: "storyblok/Page",
+   *   feature: "storyblok/Feature",
+   *   grid: "storyblok/Grid",
+   *   teaser: "storyblok/Teaser",
+   * },
+   * ```
+   */
+  components?: object;
+}
+
+export default function storyblokIntegration(
+  options: IntegrationOptions = {
+    accessToken: "",
+    useCustomApi: false,
+    apiOptions: {},
+    bridge: true,
+    components: {},
+  }
+): AstroIntegration {
   return {
     name: "@storyblok/astro",
     hooks: {
@@ -53,9 +102,7 @@ export default function storyblokIntegration(options) {
           `
         );
 
-        const enableBridge = options.bridge ?? true;
-
-        if (enableBridge) {
+        if (options.bridge) {
           injectScript(
             "page",
             `
@@ -77,3 +124,5 @@ export default function storyblokIntegration(options) {
     },
   };
 }
+
+export * from "./types";

lib/package.json

@@ -15,9 +15,10 @@
     },
     "./StoryblokComponent.astro": "./StoryblokComponent.astro"
   },
+  "types": "./dist/index.d.ts",
   "scripts": {
     "dev": "vite build --watch",
-    "build": "vite build",
+    "build": "vite build && tsc",
     "test": "npm run test:e2e",
     "test:e2e": "start-server-and-test cy:playground http-get://localhost:3000/ cy:run",
     "test:e2e-watch": "start-server-and-test cy:playground http-get://localhost:3000/ cy:open",
@@ -27,17 +28,19 @@
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
-    "@storyblok/js": "^1.8.6",
+    "@storyblok/js": "^2.0.4",
     "camelcase": "^7.0.0"
   },
   "devDependencies": {
-    "@cypress/vite-dev-server": "^2.0.7",
-    "@rollup/plugin-dynamic-import-vars": "^1.4.4",
-    "axios": "^0.27.2",
-    "cypress": "^10.9.0",
+    "@cypress/vite-dev-server": "^5.0.2",
+    "@rollup/plugin-dynamic-import-vars": "^2.0.1",
+    "cypress": "^12.1.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "start-server-and-test": "^1.14.0",
-    "vite": "^3.2.4"
+    "start-server-and-test": "^1.15.2",
+    "vite": "^4.0.1",
+    "typescript": "4.9.4",
+    "@types/node": "18.11.10",
+    "astro": "1.6.15"
   },
   "repository": {
     "type": "git",

lib/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "strict": false
+  },
+  "extends": "astro/tsconfigs/base",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "include": ["./*.astro", "./**/*.ts"],
+  "exclude": ["node_modules/*"]
+}

lib/types.ts

@@ -0,0 +1,32 @@
+export type {
+  SbPluginFactory,
+  SbBlokKeyDataTypes,
+  SbBlokData,
+  SbRichTextOptions,
+  SbSDKOptions,
+  StoryblokClient,
+  StoryblokBridgeV2,
+  StoryblokBridgeConfigV2,
+  ISbConfig, // previously StoryblokConfig
+  ISbCache, // previously StoryblokCache
+  ISbResult, // previously StoryblokResult
+  ISbResponse,
+  ISbError,
+  ISbNode,
+  ISbSchema,
+  ThrottleFn,
+  AsyncFn,
+  ArrayFn,
+  ISbContentMangmntAPI,
+  ISbManagmentApiResult, // previously StoryblokManagmentApiResult
+  ISbStories, // previously Stories
+  ISbStory, // previously Story
+  ISbDimensions,
+  StoryblokComponentType,
+  ISbStoryData, // previously StoryData
+  ISbAlternateObject, // previously AlternateObject
+  ISbStoriesParams, // previously StoriesParams
+  ISbStoryParams, // previously StoryParams
+  ISbRichtext, // previously Richtext
+  ISbEventPayload,
+} from "@storyblok/js";

lib/vite-plugin-storyblok-components.js → lib/vite-plugin-storyblok-components.ts

@@ -3,18 +3,18 @@
  */
 import camelcase from "camelcase";
 
-export function vitePluginStoryblokComponents(components) {
+export function vitePluginStoryblokComponents(components?: object) {
   const virtualModuleId = "virtual:storyblok-components";
   const resolvedVirtualModuleId = "\0" + virtualModuleId;
 
   return {
     name: "vite-plugin-storyblok-components",
-    async resolveId(id) {
+    async resolveId(id: string) {
       if (id === virtualModuleId) {
         return resolvedVirtualModuleId;
       }
     },
-    async load(id) {
+    async load(id: string) {
       if (id === resolvedVirtualModuleId) {
         const imports = [];
         for await (const [key, value] of Object.entries(components)) {

lib/vite-plugin-storyblok-init.js → lib/vite-plugin-storyblok-init.ts

@@ -4,12 +4,12 @@ export function vitePluginStoryblokInit(accessToken, useCustomApi, apiOptions) {
 
   return {
     name: "vite-plugin-storyblok-init",
-    async resolveId(id) {
+    async resolveId(id: string) {
       if (id === virtualModuleId) {
         return resolvedVirtualModuleId;
       }
     },
-    async load(id) {
+    async load(id: string) {
       if (id === resolvedVirtualModuleId) {
         return `
           import { storyblokInit, apiPlugin } from "@storyblok/js";
@@ -18,7 +18,7 @@ export function vitePluginStoryblokInit(accessToken, useCustomApi, apiOptions) {
             use: ${useCustomApi ? "[]" : "[apiPlugin]"},
             apiOptions: ${JSON.stringify(apiOptions)},
           });
-          export const storyblokApiInstance = storyblokApi;
+          export const storyblokApiInstance = storyblokApi;  
         `;
       }
     },

lib/vite.config.js → lib/vite.config.ts

@@ -7,18 +7,10 @@ export default defineConfig(() => {
   return {
     build: {
       lib: {
-        entry: path.resolve(__dirname, "index.js"),
+        entry: path.resolve(__dirname, "index.ts"),
         name: "storyblokAstro",
         fileName: (format) => (format === "es" ? `${name}.mjs` : `${name}.js`),
       },
-      rollupOptions: {
-        output: {
-          globals: {
-            axios: "axios",
-          },
-        },
-        external: ["axios"], // FIX: temporary till we remove axios dependency in storyblok-js-client
-      },
     },
   };
 });