From ad6e6b99229fc04f288d9c956e6e626bfe059d52 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Fri, 3 Jun 2022 23:16:42 +0200
Subject: [PATCH] feat(vue3): defineExpose is no longer needed

---
 docs/examples/vue3/controlled-stories.md      | 12 -------
 docs/guide/vue3/controls.md                   | 22 +------------
 .../vue3/src/components/StateSetup.story.vue  |  5 ---
 packages/histoire-plugin-nuxt/src/index.ts    | 12 +------
 packages/histoire/src/node/build.ts           | 33 +++++++++++++++++--
 5 files changed, 33 insertions(+), 51 deletions(-)

diff --git a/docs/examples/vue3/controlled-stories.md b/docs/examples/vue3/controlled-stories.md
index a96505c4..26a49f37 100644
--- a/docs/examples/vue3/controlled-stories.md
+++ b/docs/examples/vue3/controlled-stories.md
@@ -14,10 +14,6 @@ import MyComponent from './MyComponent.vue'
 const state = reactive({
   text: "Hello world"
 })
-
-defineExpose({
-  state
-})
 </script>
 
 <template>
@@ -42,10 +38,6 @@ import MyComponent from './MyComponent.vue'
 const state = reactive({
   text: "Hello world"
 })
-
-defineExpose({
-  state
-})
 </script>
 
 <template>
@@ -75,10 +67,6 @@ import MyComponent from './MyComponent.vue'
 const state = reactive({
   text: "Hello world"
 })
-
-defineExpose({
-  state
-})
 </script>
 
 <template>
diff --git a/docs/guide/vue3/controls.md b/docs/guide/vue3/controls.md
index 457b1751..2a6e9c2a 100644
--- a/docs/guide/vue3/controls.md
+++ b/docs/guide/vue3/controls.md
@@ -85,11 +85,9 @@ export default defineComponent({
 </template>
 ```
 
-If you are using the `<script setup>` syntax, the component is closed by default - meaning no properties can be accessed from the outside. We need to use [defineExpose](https://vuejs.org/api/sfc-script-setup.html#defineexpose) so that Histoire is able to access your state properties.
-
 Example with Composition API (Script Setup):
 
-```vue{12-16}
+```vue
 <script lang="ts" setup>
 import { reactive, count } from 'vue'
 import MyButton from './MyButton.vue'
@@ -100,12 +98,6 @@ const state = reactive({
 })
 
 const message = ref('Meow!')
-
-// Histoire will inspect and synchronize this
-defineExpose({
-  state,
-  message,
-})
 </script>
 
 <template>
@@ -133,10 +125,6 @@ const state = reactive({
   colorId: 'primary',
 })
 
-defineExpose({
-  state,
-})
-
 // Some fixture/configuration data
 const colors = {
   primary: '#f00',
@@ -169,10 +157,6 @@ const state = reactive({
   disabled: false,
   content: "Hello world"
 })
-
-defineExpose({
-  state,
-})
 </script>
 
 <template>
@@ -233,10 +217,6 @@ const state = reactive({
   disabled: false,
   content: "Hello world"
 })
-
-defineExpose({
-  state,
-})
 </script>
 
 <template>
diff --git a/examples/vue3/src/components/StateSetup.story.vue b/examples/vue3/src/components/StateSetup.story.vue
index ebc70d16..4bb4548e 100644
--- a/examples/vue3/src/components/StateSetup.story.vue
+++ b/examples/vue3/src/components/StateSetup.story.vue
@@ -7,11 +7,6 @@ const state = reactive({
 })
 
 const synced = ref('hello')
-
-defineExpose({
-  state,
-  synced,
-})
 </script>
 
 <template>
diff --git a/packages/histoire-plugin-nuxt/src/index.ts b/packages/histoire-plugin-nuxt/src/index.ts
index 6897c892..24abf039 100644
--- a/packages/histoire-plugin-nuxt/src/index.ts
+++ b/packages/histoire-plugin-nuxt/src/index.ts
@@ -16,20 +16,10 @@ export function HstNuxt (): Plugin {
   return {
     name: '@histoire/plugin-nuxt',
 
-    async config (config, mode) {
+    async config () {
       const nuxtConfig = await useNuxtViteConfig()
       nuxt = nuxtConfig.nuxt
       const plugins = nuxtConfig.viteConfig.plugins.filter((p: any) => !ignorePlugins.includes(p?.name))
-
-      // Disable devServer integration from vue plugin
-      if (mode === 'build') {
-        const vuePlugin = plugins.find((p: any) => p.name === 'vite:vue')
-        if (vuePlugin) {
-          // @ts-expect-error override method
-          vuePlugin.configureServer = () => { /* noop */ }
-        }
-      }
-
       return {
         vite: {
           resolve: {
diff --git a/packages/histoire/src/node/build.ts b/packages/histoire/src/node/build.ts
index 04c2e4ee..29b3571a 100644
--- a/packages/histoire/src/node/build.ts
+++ b/packages/histoire/src/node/build.ts
@@ -65,7 +65,7 @@ export async function build (ctx: Context) {
   const variantCount = ctx.storyFiles.reduce((sum, file) => sum + (file.story?.variants.length ?? 0), 0)
   const emptyStoryCount = ctx.storyFiles.length - storyCount
 
-  const results = await viteBuild(mergeViteConfig(await getViteConfigWithPlugins(false, ctx), {
+  const buildViteConfig = mergeViteConfig(await getViteConfigWithPlugins(false, ctx), {
     mode: 'development',
     build: {
       rollupOptions: {
@@ -86,7 +86,36 @@ export async function build (ctx: Context) {
       cssCodeSplit: false,
       minify: false,
     },
-  }))
+  })
+
+  // For @vite/plugin-vue: Always put our vite server
+  // Disable template inlining
+  // (so that we no longer need defineExpose)
+  // Nuxt: replaces the Nuxt vite dev server
+  buildViteConfig.plugins.push({
+    name: 'histoire-vue-plugin-override',
+    config (config) {
+      const vuePlugin = config.plugins.find((p: any) => p.name === 'vite:vue')
+      if (vuePlugin) {
+        const original = vuePlugin.configureServer.bind(vuePlugin)
+        vuePlugin.configureServer = () => {
+          original({
+            ...server,
+            config: {
+              ...server.config,
+              server: {
+                ...server.config.server,
+                hmr: false,
+              },
+            },
+          })
+        }
+        vuePlugin.configureServer()
+      }
+    },
+  })
+
+  const results = await viteBuild(buildViteConfig)
   const result = Array.isArray(results) ? results[0] : results as RollupOutput
 
   const styleOutput = result.output.find(o => o.name === 'style.css' && o.type === 'asset')