Merge pull request #425 from storyblok/feature/403-defineexpose-not-w…

…orking-with-storyblokcomponent

feat: 403 defineexpose not working with storyblokcomponent

lib/StoryblokComponent.vue

@@ -1,7 +1,3 @@
-<template>
-  <component :is="componentName" v-bind="{ ...$props, ...$attrs }"></component>
-</template>
-
 <script setup lang="ts">
 import { ref, resolveDynamicComponent, inject } from "vue";
 import type { SbBlokData, SbVueSDKOptions } from "./types";
@@ -10,6 +6,13 @@ export interface SbComponentProps {
   blok: SbBlokData;
 }
 const props = defineProps<SbComponentProps>();
+
+const blokRef = ref();
+
+defineExpose({
+  value: blokRef,
+});
+
 const componentFound: boolean =
   typeof resolveDynamicComponent(props.blok.component) !== "string";
 
@@ -34,3 +37,11 @@ if (!componentFound) {
   }
 }
 </script>
+
+<template>
+  <component
+    ref="blokRef"
+    :is="componentName"
+    v-bind="{ ...$props, ...$attrs }"
+  ></component>
+</template>

playground/components/Feature.vue

@@ -1,9 +1,17 @@
+<script setup>
+defineProps({ blok: Object });
+
+function featureMethod() {
+  console.log("Hi from Feature.vue");
+}
+
+defineExpose({
+  featureMethod,
+});
+</script>
+
 <template>
   <div v-editable="blok" class="py-2" data-test="feature">
     <h1 class="text-lg">{{ blok.name }}</h1>
   </div>
 </template>
-
-<script setup>
-defineProps({ blok: Object });
-</script>

playground/components/Grid.vue

@@ -1,11 +1,23 @@
+<script setup>
+import { ref, watchEffect } from "vue";
+
+defineProps({ blok: Object });
+
+const blokRefs = ref([]);
+
+watchEffect(() => {
+  if (blokRefs.value.length > 0) {
+    blokRefs.value.forEach((blokRef) => {
+      blokRef.value.featureMethod();
+    });
+  }
+});
+</script>
+
 <template>
   <div v-editable="blok" class="flex py-8 mb-6" data-test="grid">
     <div v-for="blok in blok.columns" :key="blok._uid" class="flex-auto px-6">
-      <StoryblokComponent :blok="blok" />
+      <StoryblokComponent ref="blokRefs" :blok="blok" />
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({ blok: Object });
-</script>

playground/components/Page.vue

@@ -1,3 +1,7 @@
+<script setup>
+defineProps({ blok: Object });
+</script>
+
 <template>
   <div v-editable="blok" class="px-6" data-test="page">
     <StoryblokComponent
@@ -7,7 +11,3 @@
     />
   </div>
 </template>
-
-<script setup>
-defineProps({ blok: Object });
-</script>

playground/components/Teaser.vue

@@ -1,3 +1,7 @@
+<script setup>
+defineProps({ blok: Object });
+</script>
+
 <template>
   <div
     v-editable="blok"
@@ -8,7 +12,3 @@
     {{ blok.headline }}
   </div>
 </template>
-
-<script setup>
-defineProps({ blok: Object });
-</script>