fix: keyed resolvers and reactivity

storyblok · Nov 4, 2024 · d131b1d · d131b1d
1 parent e0621b4
commit d131b1d
Show file tree

Hide file tree

Showing 5 changed files with 675 additions and 786 deletions.
diff --git a/lib/components/StoryblokRichText.vue b/lib/components/StoryblokRichText.vue
@@ -1,18 +1,32 @@
 <script setup lang="ts">
-import type { VNode } from "vue";
-import type { StoryblokRichTextNode } from "@storyblok/js";
+import { ref, watch, type VNode } from "vue";
+import type {
+  StoryblokRichTextNode,
+  StoryblokRichTextResolvers,
+} from "@storyblok/js";
 import { useStoryblokRichText } from "../composables/useStoryblokRichText";
 import type { StoryblokRichTextProps } from "../types";
 
 const props = defineProps<StoryblokRichTextProps>();
 
-const { render } = useStoryblokRichText({
-  resolvers: props.resolvers ?? {},
-});
+const renderedDoc = ref();
+const root = () => renderedDoc.value;
 
-const root = () => render(props.doc as StoryblokRichTextNode<VNode>);
+watch(
+  [props.doc, props.resolvers],
+  ([doc, resolvers]) => {
+    const { render } = useStoryblokRichText({
+      resolvers: (resolvers as StoryblokRichTextResolvers<VNode>) ?? {},
+    });
+    renderedDoc.value = render(doc as StoryblokRichTextNode<VNode>);
+  },
+  {
+    immediate: true,
+  }
+);
 </script>
 
 <template>
   <root />
 </template>
+ß
diff --git a/lib/composables/useStoryblokRichText.ts b/lib/composables/useStoryblokRichText.ts
@@ -25,6 +25,7 @@ export function useStoryblokRichText(options: StoryblokRichTextOptions<VNode>) {
   const mergedOptions: StoryblokRichTextOptions<VNode> = {
     renderFn: h,
     textFn: createTextVNode,
+    keyedResolvers: true,
     resolvers: {
       [BlockTypes.COMPONENT]: componentResolver,
       ...options.resolvers,

diff --git a/lib/package.json b/lib/package.json
@@ -25,26 +25,26 @@
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
-    "@storyblok/js": "^3.1.6"
+    "@storyblok/js": "^3.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.7",
+    "@babel/core": "^7.26.0",
     "@cypress/vite-dev-server": "^5.2.0",
     "@cypress/vue": "^6.0.1",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vue/babel-preset-app": "^5.0.8",
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "^0.1.3",
     "@vue/vue3-jest": "^29.2.6",
-    "babel-jest": "^29.4.3",
-    "cypress": "^13.15.0",
-    "eslint-plugin-cypress": "^2.15.1",
+    "babel-jest": "^29.7.0",
+    "cypress": "^13.15.1",
+    "eslint-plugin-cypress": "^2.15.2",
     "eslint-plugin-jest": "^28.8.3",
-    "jest": "^29.6.4",
+    "jest": "^29.7.0",
     "typescript": "^4.9.5",
-    "vite": "^5.4.8",
-    "vue": "^3.5.10",
-    "vue-tsc": "^1.8.0"
+    "vite": "^5.4.10",
+    "vue": "^3.5.12",
+    "vue-tsc": "^1.8.27"
   },
   "babel": {
     "presets": [