feat(vue3): defineExpose is no longer needed

histoire-dev · Jun 3, 2022 · ad6e6b9 · ad6e6b9
1 parent 63cd293
commit ad6e6b9
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 51 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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')