fix: Fix Vue warning 'Non-function value encountered' (#615)

Co-authored-by: Guillaume Chau <[email protected]>
histoire-dev · Nov 13, 2023 · 3ab40ae · 3ab40ae
1 parent e0c6057
commit 3ab40ae
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 19 deletions.
diff --git 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
@@ -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)
         },
       })