From 3465db6ba94dae68d2f371e2331417b3969f2ded Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Wed, 30 Aug 2023 09:25:14 +0200
Subject: [PATCH 1/3] feat: expose context on `StoryblokComponent` for template
 ref use

---
 lib/StoryblokComponent.vue        | 18 ++++++++++++++----
 playground/components/Feature.vue | 16 ++++++++++++----
 playground/components/Grid.vue    | 22 +++++++++++++++++-----
 playground/components/Page.vue    |  8 ++++----
 playground/components/Teaser.vue  |  7 +++----
 5 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/lib/StoryblokComponent.vue b/lib/StoryblokComponent.vue
index fb4b886f..0afe929e 100644
--- a/lib/StoryblokComponent.vue
+++ b/lib/StoryblokComponent.vue
@@ -1,12 +1,22 @@
-<template>
-  <component :is="blok.component" v-bind="{ ...$props, ...$attrs }"></component>
-</template>
-
 <script setup lang="ts">
+import { ref } from "vue";
 import type { SbBlokData } from "./types";
 
 export interface SbComponentProps {
   blok: SbBlokData;
 }
 defineProps<SbComponentProps>();
+
+const blokRef = ref();
+
+defineExpose({
+  value: blokRef,
+});
 </script>
+<template>
+  <component
+    ref="blokRef"
+    :is="blok.component"
+    v-bind="{ ...$props, ...$attrs }"
+  ></component>
+</template>
diff --git a/playground/components/Feature.vue b/playground/components/Feature.vue
index 3b696548..b7196438 100644
--- a/playground/components/Feature.vue
+++ b/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>
diff --git a/playground/components/Grid.vue b/playground/components/Grid.vue
index c4f2e362..3c0406cc 100644
--- a/playground/components/Grid.vue
+++ b/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>
diff --git a/playground/components/Page.vue b/playground/components/Page.vue
index 020a554a..cd882ab3 100644
--- a/playground/components/Page.vue
+++ b/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>
diff --git a/playground/components/Teaser.vue b/playground/components/Teaser.vue
index 3d53c4df..c61516af 100644
--- a/playground/components/Teaser.vue
+++ b/playground/components/Teaser.vue
@@ -1,3 +1,6 @@
+<script setup>
+defineProps({ blok: Object });
+</script>
 <template>
   <div
     v-editable="blok"
@@ -8,7 +11,3 @@
     {{ blok.headline }}
   </div>
 </template>
-
-<script setup>
-defineProps({ blok: Object });
-</script>

From 64cf98204462cf3e36e574a5ab119a5d34df7a94 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Wed, 30 Aug 2023 09:27:01 +0200
Subject: [PATCH 2/3] chore: adding space between script and template

---
 lib/StoryblokComponent.vue       | 1 +
 playground/components/Teaser.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/lib/StoryblokComponent.vue b/lib/StoryblokComponent.vue
index 0afe929e..c63181a7 100644
--- a/lib/StoryblokComponent.vue
+++ b/lib/StoryblokComponent.vue
@@ -13,6 +13,7 @@ defineExpose({
   value: blokRef,
 });
 </script>
+
 <template>
   <component
     ref="blokRef"
diff --git a/playground/components/Teaser.vue b/playground/components/Teaser.vue
index c61516af..1ed9265c 100644
--- a/playground/components/Teaser.vue
+++ b/playground/components/Teaser.vue
@@ -1,6 +1,7 @@
 <script setup>
 defineProps({ blok: Object });
 </script>
+
 <template>
   <div
     v-editable="blok"

From 40355debebb77333092c86f0088f4640da309c1c Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Mon, 18 Sep 2023 09:51:32 +0200
Subject: [PATCH 3/3] chore: fix error when merging

---
 lib/StoryblokComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/StoryblokComponent.vue b/lib/StoryblokComponent.vue
index b7ab1490..0b09ac64 100644
--- a/lib/StoryblokComponent.vue
+++ b/lib/StoryblokComponent.vue
@@ -41,7 +41,7 @@ if (!componentFound) {
 <template>
   <component
     ref="blokRef"
-    :is="blok.component"
+    :is="componentName"
     v-bind="{ ...$props, ...$attrs }"
   ></component>
 </template>