fix: Fix Vue warning 'Non-function value encountered'

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),
+          )
         },
       })
 

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)
         },
       })
 

packages/histoire/src/node/server.ts

@@ -33,7 +33,8 @@ export async function createServer (ctx: Context, options: CreateServerOptions =
     }
   }
 
-  const { server: nodeServer } = await getViteServer(true) // Should be run after the first one to get a fresh vite.config.js
+  // Should be run sequentially to get a fresh vite.config.js each time
+  const { server: nodeServer } = await getViteServer(true) // Run before normal vite to prevent breaking HMR in Nuxt
   const { server, viteConfigFile } = await getViteServer(false)
   await watchStories(ctx)
   const { stop: stopMdFileWatcher } = await createMarkdownFilesWatcher(ctx)