fix: init state sometimes not being taken into account

histoire-dev · Feb 12, 2022 · fb9c775 · fb9c775
1 parent 9d5b969
commit fb9c775
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/packages/histoire/src/client/app/components/sandbox/SandboxVue3.vue b/packages/histoire/src/client/app/components/sandbox/SandboxVue3.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { App, createApp, onMounted, onUnmounted, PropType, ref } from 'vue'
+import { App, createApp, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import { Story, Variant } from '../../types'
 
 const props = defineProps({
@@ -21,8 +21,11 @@ const props = defineProps({
 
 const sandbox = ref<HTMLDivElement>()
 let app: App
+let mounting = false
+
+async function mountVariant () {
+ mounting = true
 
-onMounted(async () => {
  await props.variant.initState()
 
  app = createApp({
@@ -35,10 +38,22 @@ onMounted(async () => {
  const target = document.createElement('div')
  sandbox.value.appendChild(target)
  app.mount(target)
+}
+
+onMounted(async () => {
+ if (props.variant.initState) {
+ await mountVariant()
+ }
+})
+
+watch(() => props.variant.initState, value => {
+ if (value && !mounting) {
+ mountVariant()
+ }
 })
 
 onUnmounted(() => {
- app.unmount()
+ app?.unmount()
 })
 </script>
 

diff --git a/packages/histoire/src/client/app/util/mapping.ts b/packages/histoire/src/client/app/util/mapping.ts
@@ -31,7 +31,7 @@ export function mapVariant (variant: Variant): Variant {
  return {
  ...variant,
  state: {},
- initState: () => ({}),
+ initState: null,
  slots: () => ({}),
  }
 }