Merge pull request #173 from storyblok/feat/remove-axios

Feat/remove axios

README.md

@@ -45,6 +45,8 @@ npm install @storyblok/js
 // yarn add @storyblok/js
 ```
 
+> ⚠️ 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).
+
 #### From a CDN
 
 Install the file from the CDN:
@@ -63,6 +65,10 @@ import { storyblokInit, apiPlugin } from "@storyblok/js";
 const { storyblokApi } = storyblokInit({
   accessToken: "YOUR_ACCESS_TOKEN",
   use: [apiPlugin],
+  // if you are using a space located in US region, use apiOptions.region:
+  // apiOptions: {
+  // region: "us" // region code here
+  // }
 });
 ```
 

lib/index.ts

@@ -3,16 +3,14 @@ import {
   SbSDKOptions,
   StoryblokBridgeConfigV2,
   StoryblokBridgeV2,
-  StoryData,
+  ISbStoryData,
   SbInitResult,
-  Richtext,
+  ISbRichtext,
   StoryblokComponentType,
   SbRichTextOptions,
-  RichtextInstance,
 } from "./types";
 
-import RichTextResolver from "storyblok-js-client/source/richTextResolver";
-export { default as RichTextSchema } from "storyblok-js-client/source/schema";
+import { RichtextResolver } from "storyblok-js-client";
 
 let richTextResolver;
 
@@ -22,7 +20,7 @@ export const useStoryblokBridge = <
   T extends StoryblokComponentType<string> = any
 >(
   id: Number,
-  cb: (newStory: StoryData<T>) => void,
+  cb: (newStory: ISbStoryData<T>) => void,
   options: StoryblokBridgeConfigV2 = {}
 ) => {
   if (typeof window === "undefined") {
@@ -87,7 +85,7 @@ export const storyblokInit = (pluginOptions: SbSDKOptions = {}) => {
   }
 
   // Rich Text resolver
-  richTextResolver = new RichTextResolver(richText.schema);
+  richTextResolver = new RichtextResolver(richText.schema);
   if (richText.resolver) {
     setComponentResolver(richTextResolver, richText.resolver);
   }
@@ -110,9 +108,9 @@ const setComponentResolver = (resolver, resolveFn) => {
 };
 
 export const renderRichText = (
-  data: Richtext,
+  data: ISbRichtext,
   options?: SbRichTextOptions,
-  resolverInstance?: RichtextInstance,
+  resolverInstance?: RichtextResolver
 ): string => {
   let localResolver = resolverInstance || richTextResolver;
   if (!localResolver) {
@@ -132,7 +130,7 @@ export const renderRichText = (
   }
 
   if (options) {
-    localResolver = new RichTextResolver(options.schema);
+    localResolver = new RichtextResolver(options.schema);
     if (options.resolver) {
       setComponentResolver(localResolver, options.resolver);
     }

lib/modules/api.ts

@@ -1,5 +1,5 @@
-import StoryblokClient, { StoryblokConfig } from "storyblok-js-client";
-import { SbSDKOptions, SbPluginFactory } from "../types";
+import StoryblokClient from "storyblok-js-client";
+import { SbPluginFactory } from "../types";
 
 const apiFactory: SbPluginFactory = (options = {}) => {
   const { apiOptions } = options;

lib/package.json

@@ -18,7 +18,7 @@
     "dev": "vite build --watch",
     "build": "vite build && tsc --project tsconfig.json",
     "test": "npm run test:unit && npm run test:e2e",
-    "test:unit": "jest __tests__",
+    "test:unit": "vitest run",
     "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",
     "cy:playground": "npm run demo --prefix ../playground",
@@ -27,20 +27,17 @@
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
-    "storyblok-js-client": "^4.5.8"
+    "storyblok-js-client": "^5.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.0",
-    "@babel/preset-env": "^7.19.0",
     "@tsconfig/recommended": "^1.0.1",
-    "babel-jest": "^28.1.0",
     "cypress": "^9.6.1",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^26.9.0",
-    "jest": "^28.1.3",
-    "jest-console": "^0.1.0",
+    "isomorphic-fetch": "^3.0.0",
     "start-server-and-test": "^1.14.0",
-    "vite": "^2.9.15"
+    "vite": "^2.9.15",
+    "vitest": "^0.25.3"
   },
   "babel": {
     "presets": [

lib/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`@storyblok/js > Rich Text Resolver > should return the rendered HTML when passing a RichText object 1`] = `"<p>Hola<b>in bold</b></p>"`;

lib/__tests__/index.test.js → lib/tests/index.test.js

@@ -1,14 +1,18 @@
-import { getLog } from "jest-console";
 import {
   storyblokInit,
   apiPlugin,
   storyblokEditable,
   renderRichText,
 } from "@storyblok/js";
+import { describe, it, expect, vi, afterEach } from "vitest";
 
 import richTextFixture from "../fixtures/richTextObject.json";
 
 describe("@storyblok/js", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   describe("Api", () => {
     it("Is not loaded by default", () => {
       const result = storyblokInit({
@@ -30,18 +34,16 @@ describe("@storyblok/js", () => {
     });
 
     it("Logs an error if no access token is provided", () => {
+      const spy = vi.spyOn(console, "error");
       storyblokInit({
         accessToken: null,
         apiOptions: { accessToken: null },
         use: [apiPlugin],
       });
 
-      expect(getLog().logs).toEqual([
-        [
-          "error",
-          "You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication",
-        ],
-      ]);
+      expect(spy).toBeCalledWith(
+        "You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication"
+      );
     });
   });
 
@@ -70,9 +72,13 @@ describe("@storyblok/js", () => {
       expect(renderRichText(richTextFixture)).toMatchSnapshot();
     });
     it("should return an empty string and warn in console when it's a falsy value", () => {
+      const spy = vi.spyOn(console, "warn");
       storyblokInit({ accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt", bridge: false });
       expect(renderRichText(null)).toBe("");
-      expect(getLog().logs).toMatchSnapshot();
+      expect(spy)
+        .toBeCalledWith(`null is not a valid Richtext object. This might be because the value of the richtext field is empty.
+    
+  For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`);
     });
     it("should return an empty string when the value it's an empty string", () => {
       storyblokInit({ accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt", bridge: false });

lib/tests/setup.js

@@ -0,0 +1 @@
+import 'isomorphic-fetch'

lib/types.ts

@@ -1,6 +1,7 @@
 import StoryblokJSClient, {
-  StoryblokConfig,
-  StoryblokComponent,
+  ISbConfig,
+  ISbComponentType,
+  ISbStoryData,
 } from "storyblok-js-client";
 
 export type StoryblokClient = StoryblokJSClient;
@@ -21,21 +22,37 @@ export interface SbInitResult {
 export type SbPluginFactory = (options: SbSDKOptions) => any;
 export type SbBlokKeyDataTypes = string | number | object | boolean | undefined;
 
-export interface SbBlokData extends StoryblokComponent<string> {
+export interface SbBlokData extends ISbComponentType<string> {
   [index: string]: SbBlokKeyDataTypes;
 }
 export interface SbRichTextOptions {
-  schema?: StoryblokConfig["richTextSchema"];
-  resolver?: StoryblokConfig["componentResolver"];
+  schema?: ISbConfig["richTextSchema"];
+  resolver?: ISbConfig["componentResolver"];
 }
 export interface SbSDKOptions {
   bridge?: boolean;
   accessToken?: string;
   use?: any[];
-  apiOptions?: StoryblokConfig;
+  apiOptions?: ISbConfig;
   richText?: SbRichTextOptions;
 }
 
+export interface ISbEventPayload<S extends ISbComponentType<string> = any> {
+  action:
+    | "customEvent"
+    | "published"
+    | "input"
+    | "change"
+    | "unpublished"
+    | "enterEditmode";
+  event?: string;
+  story?: ISbStoryData<S>;
+  slug?: string;
+  slugChanged?: boolean;
+  storyId?: number;
+  reload?: boolean;
+}
+
 // TODO: temporary till the right bridge types are updated on storyblok-js-client
 export interface StoryblokBridgeConfigV2 {
   resolveRelations?: string[];
@@ -57,23 +74,31 @@ export interface StoryblokBridgeV2 {
       | "unpublished"
       | "enterEditmode"
       | string[],
-    callback: (payload?: StoryblokEventPayload) => void
+    callback: (payload?: ISbEventPayload) => void
   ) => void;
 }
 
 export type {
-  StoryblokConfig,
-  StoryblokCache,
-  StoryblokCacheProvider,
-  StoryblokResult,
-  StoryblokManagmentApiResult,
-  StoryblokComponent as StoryblokComponentType,
-  StoryData,
-  AlternateObject,
-  Stories,
-  Story,
-  StoriesParams,
-  StoryParams,
-  Richtext,
-  RichtextInstance,
+  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,
+  ISbComponentType as StoryblokComponentType,
+  ISbStoryData, // previously StoryData
+  ISbAlternateObject, // previously AlternateObject
+  ISbStoriesParams, // previously StoriesParams
+  ISbStoryParams, // previously StoryParams
+  ISbRichtext, // previously Richtext
+  RichtextResolver,
 } from "storyblok-js-client";

lib/vite.config.ts

@@ -12,9 +12,9 @@ export default defineConfig(() => {
         fileName: (format) =>
           format === "es" ? `${libName}.mjs` : `${libName}.js`,
       },
-      rollupOptions: {
-        external: ["axios"],
-      },
+    },
+    test: {
+      setupFiles: ["./tests/setup.js"],
     },
   };
 });