From c56eb03413431df6e6005dab41b220837aec4205 Mon Sep 17 00:00:00 2001
From: Gorkem Baris Yesiltas <gorkemyesiltas@hotmail.com>
Date: Wed, 8 May 2024 12:26:24 +0200
Subject: [PATCH] feat(typing): added generic support and imporved return type
 and updated examples

---
 README.md                                    | 30 ++++++++++++++++++++
 package-lock.json                            |  2 +-
 playground/pages/articles/[slug].vue         | 20 +++++++++----
 playground/pages/index.vue                   |  3 +-
 src/runtime/composables/useAsyncStoryblok.ts | 13 +++++----
 5 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index eec52f8..5e44337 100755
--- a/README.md
+++ b/README.md
@@ -275,6 +275,36 @@ Which is the short-hand equivalent to using `useStoryblokApi` inside `useState`
 
 > The `useState` is an SSR-friendly `ref` replacement. Its value will be preserved after server-side rendering (during client-side hydration).
 
+You can also use the `useAsyncStoryblok` composable in a type-safe way:
+
+```html
+<script setup lang="ts">
+  import type { SbBlokData } from "@storyblok/js";
+
+  type MyArticleSbBlock = SbBlokData & {
+    title: string;
+    body: string;
+  };
+
+  const story = await useAsyncStoryblok<MyArticleSbBlock>(
+    "vue",
+    { version: "draft", resolve_relations: "Article.author" }, // API Options
+    { resolveRelations: ["Article.author"], resolveLinks: "url" } // Bridge Options
+  );
+
+  if (story.value.status) {
+    throw createError({
+      statusCode: story.value.status,
+      statusMessage: story.value.response
+    });
+  }
+</script>
+
+<template>
+  <StoryblokComponent v-if="story" :blok="story.content" />
+</template>
+```
+
 #### Rendering Rich Text
 
 You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/nuxt` and a Vue computed property:
diff --git a/package-lock.json b/package-lock.json
index 417c6e1..af2fe63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
         "@nuxt/module-builder": "^0.6.0",
         "@nuxt/schema": "^3.8.0",
         "@nuxt/test-utils": "^3.8.0",
-        "@nuxtjs/eslint-config-typescript": "*",
+        "@nuxtjs/eslint-config-typescript": "latest",
         "@types/node": "^20.8.10",
         "cypress": "^13.4.0",
         "eslint": "^8.52.0",
diff --git a/playground/pages/articles/[slug].vue b/playground/pages/articles/[slug].vue
index d196aec..2966381 100644
--- a/playground/pages/articles/[slug].vue
+++ b/playground/pages/articles/[slug].vue
@@ -1,13 +1,23 @@
 <script setup lang="ts">
+import type { ISbComponentType } from "storyblok-js-client";
+
 const path = useRoute();
-const story = await useAsyncStoryblok(`vue/articles/${path.params.slug}`, {
-  version: "draft",
-  language: "en"
-});
+
+type SbArticle = ISbComponentType<"article"> & {
+  title: string;
+};
+
+const story = await useAsyncStoryblok<SbArticle>(
+  `vue/articles/${path.params.slug}`,
+  {
+    version: "draft",
+    language: "en"
+  }
+);
 </script>
 
 <template>
   <main v-editable class="container mx-auto pt-24">
-    <h2>{{ story.content.title }}</h2>
+    <h2>{{ story?.content.title }}</h2>
   </main>
 </template>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 0042b5b..b611ff6 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { SbBlokData } from "@storyblok/js";
 // const storyblokApi = useStoryblokApi();
 // // Checking custom Flush method
 // storyblokApi.flushCache();
 
-const story = await useAsyncStoryblok("vue", {
+const story = await useAsyncStoryblok<SbBlokData>("vue", {
   version: "draft",
   language: "en",
   resolve_relations: "popular-articles.articles"
diff --git a/src/runtime/composables/useAsyncStoryblok.ts b/src/runtime/composables/useAsyncStoryblok.ts
index f0281af..0a0e1ac 100644
--- a/src/runtime/composables/useAsyncStoryblok.ts
+++ b/src/runtime/composables/useAsyncStoryblok.ts
@@ -1,15 +1,18 @@
 import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
 import type { ISbStoriesParams, StoryblokBridgeConfigV2, ISbStoryData } from '@storyblok/vue';
+import type { ISbComponentType } from 'storyblok-js-client';
 import { useState, onMounted, useAsyncData } from "#imports";
 
-export const useAsyncStoryblok = async (
+export const useAsyncStoryblok = async <
+  SbComponent extends ISbComponentType<string>,
+>(
   url: string,
   apiOptions: ISbStoriesParams = {},
-  bridgeOptions: StoryblokBridgeConfigV2 = {}
-) => {
+  bridgeOptions: StoryblokBridgeConfigV2 = {},
+): Promise<Ref<ISbStoryData<SbComponent> | undefined>> => {
   const storyblokApiInstance = useStoryblokApi();
   const uniqueKey = `${JSON.stringify(apiOptions)}${url}`;
-  const story = useState<ISbStoryData>(`${uniqueKey}-state`);
+  const story = useState<ISbStoryData<SbComponent>>(`${uniqueKey}-state`);
 
   onMounted(() => {
     if (story.value && story.value.id) {
@@ -28,7 +31,7 @@ export const useAsyncStoryblok = async (
         apiOptions
       );
     })
-    if(data) {
+    if (data) {
       story.value = data.value?.data.story
     }
   }