feat(types): improve SbRichText props types

storyblok · Jul 8, 2024 · ce7daa0 · ce7daa0
1 parent f6d6bea
commit ce7daa0
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 26 deletions.
diff --git a/lib/StoryblokComponent.vue b/lib/StoryblokComponent.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import { ref, resolveDynamicComponent, inject } from "vue";
-import type { SbBlokData, SbVueSDKOptions } from "./types";
+import type { SbComponentProps, SbVueSDKOptions } from "./types";
 
-export interface SbComponentProps {
-  blok: SbBlokData;
-}
 const props = defineProps<SbComponentProps>();
 
 const blokRef = ref();

diff --git a/lib/components/SbRichText.vue b/lib/components/SbRichText.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useSbRichText } from "../composables/useRichText";
+import type { SbRichTextProps } from "../types";
 
-const props = defineProps<{ doc: any; resolvers?: any }>();
+const props = defineProps<SbRichTextProps>();
 
 const { render } = useSbRichText({
   resolvers: props.resolvers,

diff --git a/lib/composables/useRichText.ts b/lib/composables/useRichText.ts
@@ -1,14 +1,16 @@
 import type { VNode } from "vue";
 import { createTextVNode, h } from "vue";
 import type {
-  Node,
-  NodeResolver,
-  SbRichtextOptions,
+  SbRichTextNode,
+  SbRichTextNodeResolver,
+  SbRichTextOptions,
 } from "@storyblok/richtext";
 import { BlockTypes, richTextResolver } from "@storyblok/richtext";
 import StoryblokComponent from "../StoryblokComponent.vue";
 
-const componentResolver: NodeResolver<VNode> = (node: Node<VNode>): VNode => {
+const componentResolver: SbRichTextNodeResolver<VNode> = (
+  node: SbRichTextNode<VNode>
+): VNode => {
   return h(
     StoryblokComponent,
     {
@@ -19,8 +21,8 @@ const componentResolver: NodeResolver<VNode> = (node: Node<VNode>): VNode => {
   );
 };
 
-export function useSbRichText(options: SbRichtextOptions<VNode>) {
-  const mergedOptions: SbRichtextOptions<VNode> = {
+export function useSbRichText(options: SbRichTextOptions<VNode>) {
+  const mergedOptions: SbRichTextOptions<VNode> = {
     renderFn: h,
     textFn: createTextVNode,
     resolvers: {

diff --git a/lib/index.ts b/lib/index.ts
@@ -15,6 +15,8 @@ import type {
   SbVueSDKOptions,
 } from "./types";
 
+export * from "@storyblok/richtext";
+
 export {
   useStoryblokBridge,
   apiPlugin,

diff --git a/lib/package.json b/lib/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@storyblok/js": "^3.0.8",
-    "@storyblok/richtext": "^0.2.0"
+    "@storyblok/richtext": "^0.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

diff --git a/lib/types.ts b/lib/types.ts
@@ -1,5 +1,7 @@
-import type { SbSDKOptions } from "@storyblok/js";
+import type { SbBlokData, SbSDKOptions } from "@storyblok/js";
 import type StoryblokComponent from "./StoryblokComponent.vue";
+import type { SbRichTextNode, SbRichTextResolvers } from "@storyblok/richtext";
+import type { VNode } from "vue";
 
 declare module "@vue/runtime-core" {
   export interface GlobalComponents {
@@ -47,3 +49,12 @@ export interface SbVueSDKOptions extends SbSDKOptions {
    */
   customFallbackComponent?: string;
 }
+
+export interface SbComponentProps {
+  blok: SbBlokData;
+}
+
+export interface SbRichTextProps {
+  doc: SbRichTextNode<VNode>;
+  resolvers?: SbRichTextResolvers<VNode>;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/playground/pages/Home.vue b/playground/pages/Home.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useStoryblokBridge, useStoryblokApi } from "@storyblok/vue";
+import { onMounted, ref, VNode } from "vue";
+import {
+  useStoryblokBridge,
+  useStoryblokApi,
+  SbRichText,
+  SbRichTextNode,
+  BlockTypes,
+} from "@storyblok/vue";
 
 const version = import.meta.env.MODE === "production" ? "published" : "draft";
 
@@ -16,8 +22,8 @@ onMounted(() => {
   useStoryblokBridge(story.value.id, (evStory) => (story.value = evStory));
 });
 
-const doc = {
-  type: "doc",
+const doc: SbRichTextNode<VNode> = {
+  [BlockTypes.DOCUMENT]: "doc",
   content: [
     {
       type: "bullet_list",
@@ -74,6 +80,6 @@ const doc = {
 </script>
 
 <template>
-  <SbRichText :doc="doc" />
+  <SbRichText v-if="doc" :doc="doc" />
   <StoryblokComponent v-if="story" :blok="story.content" />
 </template>