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

BREAKING CHANGE: axios is no longer a dependency
storyblok · Jan 11, 2023 · 4100f5b · 4100f5b
2 parents e643cd0 + d2e26fd
commit 4100f5b
Show file tree

Hide file tree

Showing 7 changed files with 2,423 additions and 6,901 deletions.
diff --git a/README.md b/README.md
@@ -72,11 +72,12 @@ export default defineNuxtConfig({
 });
 ```
 
+> ⚠️ 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 module, you can pass all [_@storyblok/vue_ options](https://github.com/storyblok/storyblok-vue#storyblok-api) plus a `useApiClient` option. For spaces created in the United States, you have to set the `region` parameter accordingly `{ apiOptions: { region: 'us' } }`.
 
-
 ```js
 // Defaults
 ["@storyblok/nuxt", {
@@ -163,7 +164,7 @@ You can easily render rich text by using the `renderRichText` function that come
 </template>
 
 <script setup>
-  const props = defineProps({ blok: Object })
+  const props = defineProps({ blok: Object });
   const articleContent = computed(() => renderRichText(blok.articleContent));
 </script>
 ```
@@ -172,27 +173,27 @@ You can also set a **custom Schema and component resolver** by passing the optio
 
 ```html
 <script setup>
-  import cloneDeep from 'clone-deep'
+  import cloneDeep from "clone-deep";
 
-  const mySchema = cloneDeep(RichTextSchema) // you can make a copy of the default RichTextSchema
+  const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
   // ... and edit the nodes and marks, or add your own.
   // Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/v4/source/schema.js
 
-  const props = defineProps({ blok: Object })
+  const props = defineProps({ blok: Object });
 
   const articleContent = computed(() =>
     renderRichText(props.blok.articleContent, {
       schema: mySchema,
       resolver: (component, blok) => {
         switch (component) {
-          case 'my-custom-component':
-            return `<div class="my-component-class">${blok.text}</div>`
+          case "my-custom-component":
+            return `<div class="my-component-class">${blok.text}</div>`;
           default:
-            return 'Resolver not defined'
+            return "Resolver not defined";
         }
-      },
+      }
     })
-  )
+  );
 </script>
 ```
 

diff --git a/lib/README.md b/lib/README.md
@@ -7,11 +7,11 @@
 </div>
 
 <p align="center">
-  <a href="https://npmjs.com/package/@storyblok/nuxt-2">
-    <img src="https://img.shields.io/npm/v/@storyblok/nuxt-2/latest.svg?style=flat-square" alt="Storyblok JS Client" />
+  <a href="https://npmjs.com/package/@storyblok/nuxt">
+    <img src="https://img.shields.io/npm/v/@storyblok/nuxt/latest.svg?style=flat-square" alt="Storyblok JS Client" />
   </a>
-  <a href="https://npmjs.com/package/@storyblok/nuxt-2" rel="nofollow">
-    <img src="https://img.shields.io/npm/dt/@storyblok/nuxt-2.svg?style=flat-square" alt="npm">
+  <a href="https://npmjs.com/package/@storyblok/nuxt" rel="nofollow">
+    <img src="https://img.shields.io/npm/dt/@storyblok/nuxt.svg?style=flat-square" alt="npm">
   </a>
   </p>
 
@@ -46,13 +46,13 @@ npm install @storyblok/nuxt
 # yarn add @storyblok/nuxt
 ```
 
-Add following code to buildModules section of `nuxt.config.js` and replace the accessToken with API token from Storyblok space.
+Add following code to modules section of `nuxt.config.js` and replace the accessToken with API token from Storyblok space.
 
 ```js
 import { defineNuxtConfig } from "nuxt";
 
 export default defineNuxtConfig({
-  buildModules: [
+  modules: [
     ["@storyblok/nuxt", { accessToken: "<your-access-token>" }]
     // ...
   ]
@@ -65,16 +65,18 @@ You can also use the `storyblok` config if you prefer:
 import { defineNuxtConfig } from "nuxt";
 
 export default defineNuxtConfig({
-  buildModules: ["@storyblok/nuxt"],
+  modules: ["@storyblok/nuxt"],
   storyblok: {
     accessToken: "<your-access-token>"
   }
 });
 ```
 
+> ⚠️ 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 module, you can pass all [_@storyblok/vue_ options](https://github.com/storyblok/storyblok-vue#storyblok-api) plus a `useApiClient` options:
+When you initialize the module, you can pass all [_@storyblok/vue_ options](https://github.com/storyblok/storyblok-vue#storyblok-api) plus a `useApiClient` option. For spaces created in the United States, you have to set the `region` parameter accordingly `{ apiOptions: { region: 'us' } }`.
 
 ```js
 // Defaults
@@ -102,7 +104,7 @@ To link your Vue components to their equivalent you created in Storyblok:
 <div v-editable="blok" / >
 ```
 
-- Finally, use `<StoryblokComponent>` which available globally in the Nuxt app:
+- Finally, use `<StoryblokComponent>` which is available globally in the Nuxt app:
 
 ```html
 <StoryblokComponent :blok="blok" />
@@ -114,28 +116,31 @@ To link your Vue components to their equivalent you created in Storyblok:
 
 #### Composition API
 
-The simplest way is by using the `useStoryblok` one-liner composable (it's autoimported):
+The simplest way is by using the `useAsyncStoryblok` one-liner composable (it's autoimported) and passing as a first parameter a name of your content page from Storyblok (in this case, our content page name is `vue`, by default you get a content page named `home`):
 
 ```html
 <script setup>
-  const story = await useStoryblok("vue", { version: "draft" });
+  const story = await useAsyncStoryblok("vue", { version: "draft" });
 </script>
 
 <template>
   <StoryblokComponent v-if="story" :blok="story.content" />
 </template>
 ```
 
-Which is the short-hand equivalent to using `useStoryblokApi` and `useStoryblokBridge` functions separately:
+Which is the short-hand equivalent to using `useStoryblokApi` inside `useAsyncData` and `useStoryblokBridge` functions separately:
 
 ```html
 <script setup>
   const story = ref(null);
   const storyblokApi = useStoryblokApi();
-  const { data } = await storyblokApi.get("cdn/stories/vue", {
+  const { data } = await useAsyncData(
+    'vue',
+    async () => await storyblokApi.get(`cdn/stories/vue`, {
     version: "draft"
-  });
-  story.value = data.story;
+  })
+  );
+  story.value = data.value.data.story;
 
   onMounted(() => {
     useStoryblokBridge(story.value.id, (evStory) => (story.value = evStory));
@@ -147,42 +152,64 @@ Which is the short-hand equivalent to using `useStoryblokApi` and `useStoryblokB
 </template>
 ```
 
+> Using `useAsyncData` SSR and SSG capabilities are enabled.
+
 #### Rendering Rich Text
 
-You can easily render rich text by using the auto-imported `renderRichText` and a computed property:
+You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/nuxt` and a Vue computed property:
 
 ```html
 <template>
   <div v-html="articleContent"></div>
 </template>
 
 <script setup>
+  const props = defineProps({ blok: Object });
   const articleContent = computed(() => renderRichText(blok.articleContent));
 </script>
 ```
 
-You can also set a **custom Schema and component resolver** by passing the options as the second parameter to `renderRichText` function:
+You can also set a **custom Schema and component resolver** by passing the options as the second parameter of the `renderRichText` function:
 
-```js
-renderRichText(blok.richTextField, {
-  schema: mySchema,
-  resolver: (component, blok) => {
-    switch (component) {
-      case "my-custom-component":
-        return `<div class="my-component-class">${blok.text}</div>`;
-        break;
-      default:
-        return `Component ${component} not found`;
-    }
-  }
-});
+```html
+<script setup>
+  import cloneDeep from "clone-deep";
+
+  const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
+  // ... and edit the nodes and marks, or add your own.
+  // Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/v4/source/schema.js
+
+  const props = defineProps({ blok: Object });
+
+  const articleContent = computed(() =>
+    renderRichText(props.blok.articleContent, {
+      schema: mySchema,
+      resolver: (component, blok) => {
+        switch (component) {
+          case "my-custom-component":
+            return `<div class="my-component-class">${blok.text}</div>`;
+          default:
+            return "Resolver not defined";
+        }
+      }
+    })
+  );
+</script>
 ```
 
 ### API
 
+#### useAsyncStoryblok(slug, apiOptions, bridgeOptions)
+
+(Recommended Option) Use [`useAsyncData`](https://v3.nuxtjs.org/api/composables/use-async-data/) and [`useState`](https://v3.nuxtjs.org/api/composables/use-state) under the hood for generating SSR or SSG applications.
+
+Check the available [apiOptions](https://github.com/storyblok/storyblok-js-client#class-storyblok) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
+
 #### useStoryblok(slug, apiOptions, bridgeOptions)
 
-Check the available [apiOptions](https://github.com/storyblok/storyblok-js-client#class-storyblok) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt-beta) (passed to the Storyblok Bridge).
+It could be helpful to use `useStoryblok` instead of `useAsyncStoryblok` when we need to make client-side requests, for example, getting personalized data for a logged user.
+
+Check the available [apiOptions](https://github.com/storyblok/storyblok-js-client#class-storyblok) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
 
 #### useStoryblokApi()
 
@@ -195,7 +222,7 @@ Use this one-line function to cover the most common use case: updating the story
 ## 🔗 Related Links
 
 - **[Live Demo on Stackblitz](https://stackblitz.com/edit/nuxt-3-sdk-demo?file=pages%2Findex.vue&terminal=dev)**
-- **[Nuxt.js Hub](https://www.storyblok.com/tc/nuxtjs?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt-beta)**: Learn how to develop your own Nuxt.js applications that use Storyblok APIs to retrieve and manage content;
+- **[Nuxt.js Hub](https://www.storyblok.com/tc/nuxtjs?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt)**: Learn how to develop your own Nuxt.js applications that use Storyblok APIs to retrieve and manage content;
 - **[Storyblok & Nuxt.js on GitHub](https://github.com/search?q=org%3Astoryblok+topic%3Anuxt)**: Check all of our Nuxt.js open source repos;
 - **[Storyblok CLI](https://github.com/storyblok/storyblok)**: A simple CLI for scaffolding Storyblok projects and fieldtypes.
 
@@ -209,5 +236,5 @@ Use this one-line function to cover the most common use case: updating the story
 
 ### Contributing
 
-Please see our [contributing guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and our [code of conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt-beta).
+Please see our [contributing guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and our [code of conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt).
 This project use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check [this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) about it in semantic-release FAQ.
diff --git a/lib/cypress.json b/lib/cypress.json
@@ -1,5 +1,6 @@
 {
   "baseUrl": "http://localhost:3000",
   "viewportWidth": 1600,
-  "viewportHeight": 1400
+  "viewportHeight": 1400,
+  "pluginsFile": false
 }
diff --git a/lib/package.json b/lib/package.json
@@ -1,17 +1,17 @@
 {
   "name": "@storyblok/nuxt",
   "version": "0.0.1",
-  "description": "Storyblok Nuxt.js module",
-  "main": "./src/module.js",
-  "module": "./src/module.js",
+  "description": "Storyblok Nuxt module",
+  "type": "module",
   "exports": {
     ".": {
-      "import": "./src/module.js",
-      "require": "./src/module.js"
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
     }
   },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
   "files": [
-    "src",
     "dist"
   ],
   "repository": "https://github.com/storyblok/storyblok-nuxt",
@@ -27,16 +27,16 @@
     "test:e2e-watch": "start-server-and-test playground:run http://localhost:3000 cy:open"
   },
   "dependencies": {
-    "@storyblok/vue": "^6.3.0"
+    "@storyblok/vue": "^7.0.0",
+    "@nuxt/kit": "^3.0.0"
   },
   "devDependencies": {
-    "@nuxt/kit": "^3.0.0-rc.7",
     "@babel/core": "^7.15.0",
     "@nuxt/module-builder": "latest",
     "babel-jest": "^28.1.3",
     "cypress": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "jest": "^26.6.3",
+    "jest": "^29.3.1",
     "start-server-and-test": "^1.14.0",
     "vite": "^2.9.14"
   },

diff --git a/lib/src/module.js b/lib/src/module.js
@@ -1,54 +1,48 @@
-import { resolve } from "path";
-import { fileURLToPath } from "url";
-
 import {
   defineNuxtModule,
   addPlugin,
   addComponentsDir,
   addImports,
-  addImportsDir
+  addImportsDir,
+  createResolver
 } from "@nuxt/kit";
 
 export default defineNuxtModule({
   meta: {
     name: "@storyblok/nuxt",
     configKey: "storyblok"
   },
-  defaults: {},
+  defaults: {
+    usePlugin: true
+  },
   setup(options, nuxt) {
-    const axiosIndex = nuxt.options.build.transpile.indexOf("axios");
-    if (axiosIndex !== -1) {
-      nuxt.options.build.transpile.splice(axiosIndex, 1);
-    }
-    nuxt.options.vite.optimizeDeps.include =
-      nuxt.options.vite.optimizeDeps.include || [];
-    nuxt.options.vite.optimizeDeps.include.push("axios");
+    const resolver = createResolver(import.meta.url);
 
     // Enable dirs
     // nuxt.options.components.dirs = ["~/components/storyblok"];
     addComponentsDir({ path: "~/storyblok", global: true, pathPrefix: false });
 
-    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
-    nuxt.options.build.transpile.push(runtimeDir);
+    nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
     nuxt.options.build.transpile.push("@storyblok/nuxt");
     nuxt.options.build.transpile.push("@storyblok/vue");
 
     // Add plugin
     nuxt.options.runtimeConfig.public.storyblok = options;
-    if (options.usePlugin !== false)
-      addPlugin(resolve(__dirname, "runtime", `./plugin`));
+    if (options.usePlugin !== false) {
+      addPlugin(resolver.resolve("./runtime/plugin"));
+    }
 
-    // Autoimports
+    // Add auto imports
     const names = [
       "useStoryblok",
       "useStoryblokApi",
       "useStoryblokBridge",
       "renderRichText",
       "RichTextSchema"
     ];
-    names.forEach((name) =>
-      addImports({ name, as: name, from: "@storyblok/vue" })
-    );
-    addImportsDir(resolve(runtimeDir, `./composables`));
+    for (const name of names) {
+      addImports({ name, as: name, from: "@storyblok/vue" });
+    }
+    addImportsDir(resolver.resolve("./runtime/composables"));
   }
 });