diff --git a/packages/histoire-plugin-vue/src/client/app/MountStory.ts b/packages/histoire-plugin-vue/src/client/app/MountStory.ts index a3d1b232..4aca1b6a 100644 --- a/packages/histoire-plugin-vue/src/client/app/MountStory.ts +++ b/packages/histoire-plugin-vue/src/client/app/MountStory.ts @@ -1,6 +1,6 @@ /* eslint-disable vue/one-component-per-file */ -import { App, createApp, h, Suspense, Component } from 'vue' +import { App, createApp, h, Suspense, Component, VNode } from 'vue' import { defineComponent as _defineComponent, PropType as _PropType, @@ -40,22 +40,26 @@ export default _defineComponent({ name: 'MountStorySubApp', render: () => { - let child = h(props.story.file.component, { + const vnode = h(props.story.file.component, { story: props.story, }) - for (const wrapper of wrappers) { - child = h(wrapper, { - story: props.story, - variant: null, - }, [ - child, - ]) + const children: VNode[] = [] + children.push(vnode) + + for (const [index, wrapper] of wrappers.entries()) { + children.push( + h(wrapper, { + story: props.story, + variant: null, + }, + () => children[index]), + ) } - return h(Suspense, [ - child, - ]) + return h(Suspense, undefined, + children.at(-1), + ) }, }) diff --git a/packages/histoire-plugin-vue/src/client/app/RenderStory.ts b/packages/histoire-plugin-vue/src/client/app/RenderStory.ts index 933d616a..b270d810 100644 --- a/packages/histoire-plugin-vue/src/client/app/RenderStory.ts +++ b/packages/histoire-plugin-vue/src/client/app/RenderStory.ts @@ -1,6 +1,6 @@ /* eslint-disable vue/one-component-per-file */ -import { App, createApp, onMounted, reactive, Component, h } from 'vue' +import { App, createApp, onMounted, reactive, Component, h, VNode } from 'vue' import { defineComponent as _defineComponent, onBeforeUnmount as _onBeforeUnmount, @@ -106,18 +106,19 @@ export default _defineComponent({ } } - let child = vnodes + const children: VNode[] = [] + children.push(vnodes) - for (const wrapper of wrappers) { - child = [ + for (const [index, wrapper] of wrappers.entries()) { + children.push( h(wrapper, { story: props.story, variant: props.variant, - }, child), - ] + }, () => children[index]), + ) } - return child + return children.at(-1) }, })