feat: optional <Variant>, closes #38

examples/vue3/src/components/NoVariantTag.story.vue

@@ -0,0 +1,20 @@
+<template>
+  <Story
+    title="No variant tag"
+    :init-state="() => ({
+      meow: {
+        foo: 'bar',
+      },
+    })"
+  >
+    <template #default="{ state }">
+      <input v-model="state.meow.foo">
+    </template>
+
+    <template #controls="{ state }">
+      <HstInput v-model="state.meow.foo">
+        meow.foo
+      </HstInput>
+    </template>
+  </Story>
+</template>

packages/histoire/src/client/app/components/exposed/Story.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
-import { computed, defineComponent, provide, useAttrs, VNode } from 'vue'
+import { computed, defineComponent, provide, useAttrs, VNode, h, PropType } from 'vue'
 import { Story } from '../../types.js'
+import Variant from './Variant.vue'
 
 export default defineComponent({
   // eslint-disable-next-line vue/multi-word-component-names
@@ -9,6 +10,13 @@ export default defineComponent({
 
   inheritAttrs: false,
 
+  props: {
+    initState: {
+      type: Function as PropType<() => any | Promise<any>>,
+      default: null,
+    },
+  },
+
   setup () {
     const attrs = useAttrs() as {
       story: Story
@@ -23,6 +31,15 @@ export default defineComponent({
   },
 
   render () {
+    const [firstVariant] = this.story.variants
+    if (firstVariant.id === '_default') {
+      return h(Variant, {
+        variant: firstVariant,
+        initState: this.initState,
+        ...this.$attrs,
+      }, this.$slots)
+    }
+
     // Apply variant as attribute to each child vnode (should be `<Variant>` components)
     const vnodes: VNode[] = this.$slots.default()
       // @ts-expect-error custom option
@@ -35,6 +52,9 @@ export default defineComponent({
         vnode.props = {}
       }
       vnode.props.variant = this.story.variants[index]
+      if (!vnode.props.initState && !vnode.props['init-state']) {
+        vnode.props.initState = this.initState
+      }
     }
     return vnodes
   },

packages/histoire/src/client/server/Story.server.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, inject, PropType, provide, useAttrs } from 'vue'
+import { defineComponent, inject, onMounted, PropType, provide, useAttrs } from 'vue'
 import type { StoryFile, Story, Variant } from '../../node/types'
 
 export default defineComponent({
@@ -53,13 +53,36 @@ export default defineComponent({
       story.variants.push(variant)
     })
 
+    onMounted(() => {
+      if (!story.variants.length) {
+        story.variants.push({
+          id: '_default',
+          title: 'default',
+        })
+      }
+    })
+
     return {
       story,
     }
   },
 
   render () {
-    return this.$slots.default()
+    let suppressError = false
+    try {
+      return this.$slots.default({
+        get state () {
+          // No variant tags
+          suppressError = true
+          return {}
+        },
+      })
+    } catch (e) {
+      if (!suppressError) {
+        console.error(e)
+      }
+      return null
+    }
   },
 })
 </script>