fix(vue2): shared controls not working, fix #266

examples/vue2/src/SharedControls.story.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const options = [
+  { label: 'Crash Bandicoot', value: 'crash-bandicoot' },
+  { label: 'The Last of Us', value: 'the-last-of-us' },
+  { label: 'Ghost of Tsushima', value: 'ghost-of-tsushima' },
+]
+
+const state = reactive({
+  text: 'Hello',
+  checkbox: false,
+  number: 20,
+  longText: 'Longer text...',
+  select: 'crash-bandicoot',
+  fn: () => { /* noop */ },
+})
+
+defineExpose({
+  state,
+})
+</script>
+
+<template>
+  <Story title="Shared Controls">
+    <template #controls>
+      <HstText
+        v-model="state.text"
+        title="HstText"
+      />
+      <HstCheckbox
+        v-model="state.checkbox"
+        title="HstCheckbox"
+      />
+      <HstNumber
+        v-model="state.number"
+        title="HstNumber"
+      />
+      <HstTextarea
+        v-model="state.longText"
+        title="HstTextarea"
+      />
+      <HstSelect
+        v-model="state.select"
+        title="HstSelect"
+        :options="options"
+      />
+    </template>
+
+    <Variant
+      title="variant 1"
+    >
+      <h1>Variant 1</h1>
+      <pre>{{ state }}</pre>
+    </Variant>
+
+    <Variant
+      title="variant 2"
+    >
+      <h1>Variant 2</h1>
+      <pre>{{ state }}</pre>
+    </Variant>
+  </Story>
+</template>

packages/histoire-plugin-vue2/src/client/app/RenderStory.ts

@@ -111,9 +111,19 @@ export default _defineComponent({
         },
 
         render: () => {
-          const vnodes = props.variant.slots()?.[props.slotName]?.({
+          const ensureFn = (fn: any) => {
+            if (typeof fn === 'function') {
+              return fn
+            } else if (fn != null) {
+              return () => fn
+            } else {
+              return null
+            }
+          }
+
+          const vnodes = ensureFn(props.variant.slots()?.[props.slotName])?.({
             state: externalState,
-          }) ?? props.story.slots()?.[props.slotName]?.({
+          }) ?? ensureFn(props.story.slots()?.[props.slotName])?.({
             state: externalState,
           })