feat: setupFile, closes #24

examples/vue3/src/components/InjectDemo.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+
+console.log('injecting demo')
+const demo = inject('demo')
+</script>
+
+<template>
+  <div class="demo">
+    {{ demo }}
+  </div>
+</template>

examples/vue3/src/components/StorySetup.story.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import InjectDemo from './InjectDemo.vue'
+</script>
+
+<template>
+  <Story title="Story setup">
+    <Variant>
+      <InjectDemo />
+    </Variant>
+  </Story>
+</template>

examples/vue3/src/histoire.css

@@ -0,0 +1,3 @@
+.demo {
+  color: #10B981;
+}

examples/vue3/src/histoire.setup.ts

@@ -0,0 +1,6 @@
+import './histoire.css'
+import { defineVue3StorySetup } from 'histoire/client'
+
+export default defineVue3StorySetup(({ app }) => {
+  app.provide('demo', 42)
+})

examples/vue3/vite.config.ts

@@ -5,5 +5,6 @@ import { defineConfig } from 'vite'
 export default defineConfig({
   histoire: {
     // Alternative way of specifying histoire config
+    setupFile: '/histoire.setup.ts',
   },
 })

packages/histoire/client.d.ts

@@ -0,0 +1,2 @@
+// https://github.com/microsoft/TypeScript/issues/33079
+export * from './dist/client/index'

packages/histoire/package.json

@@ -20,6 +20,10 @@
       "import": "./dist/node/index.js",
       "types": "./dist/node/index.d.ts"
     },
+    "./client": {
+      "import": "./dist/client/index.js",
+      "types": "./dist/client/index.d.ts"
+    },
     "./*": "./*"
   },
   "main": "./dist/node/index.js",

packages/histoire/src/client/app/components/sandbox/SandboxVue3.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { App, createApp, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import { Story, Variant } from '../../types'
+// @ts-expect-error virtual module id
+import setup from '$histoire-setup'
 
 const props = defineProps({
   variant: {
@@ -35,6 +37,15 @@ async function mountVariant () {
       })
     },
   })
+
+  if (typeof setup === 'function') {
+    await setup({
+      app,
+      story: props.story,
+      variant: props.variant,
+    })
+  }
+
   const target = document.createElement('div')
   sandbox.value.appendChild(target)
   app.mount(target)

packages/histoire/src/client/index.ts

@@ -0,0 +1,12 @@
+import type { App } from 'vue'
+import type { Story, Variant } from './app/types.js'
+
+export type Vue3StorySetupHandler = (payload: {
+  app: App
+  story: Story
+  variant: Variant
+}) => Promise<void> | void
+
+export function defineVue3StorySetup (handler: Vue3StorySetupHandler): Vue3StorySetupHandler {
+  return handler
+}

packages/histoire/src/node/build.ts

@@ -41,19 +41,20 @@ export async function build (ctx: Context) {
       },
       outDir: ctx.config.outDir,
       emptyOutDir: true,
+      cssCodeSplit: false,
     },
   })
   const result = Array.isArray(results) ? results[0] : results as RollupOutput
 
+  const styleOutput = result.output.find(o => o.name === 'style.css' && o.type === 'asset')
+
   // Index
   const indexOutput = result.output.find(o => o.name === 'index' && o.type === 'chunk')
-  const indexStyleOutput = result.output.find(o => o.name === 'index.css' && o.type === 'asset')
-  await writeHtml(indexOutput.fileName, indexStyleOutput.fileName, 'index.html', ctx)
+  await writeHtml(indexOutput.fileName, styleOutput.fileName, 'index.html', ctx)
 
   // Sandbox
   const sandboxOutput = result.output.find(o => o.name === 'sandbox' && o.type === 'chunk')
-  const sandboxStyleOutput = result.output.find(o => o.name === 'sandbox.css' && o.type === 'asset')
-  await writeHtml(sandboxOutput.fileName, sandboxStyleOutput.fileName, '__sandbox.html', ctx)
+  await writeHtml(sandboxOutput.fileName, styleOutput.fileName, '__sandbox.html', ctx)
 }
 
 async function writeHtml (jsEntryFile: string, cssEntryFile: string, htmlFileName: string, ctx: Context) {

packages/histoire/src/node/config.ts

@@ -15,6 +15,7 @@ export interface HistoireConfig {
     file?: 'title' | 'path' | ((file: TreeFile) => string[])
     order?: 'asc' | ((a: string, b: string) => number)
   }
+  setupFile?: string
 }
 
 export function getDefaultConfig (): HistoireConfig {

packages/histoire/src/node/plugin.ts

@@ -7,6 +7,8 @@ import { makeTree } from './tree.js'
 
 export const STORIES_ID = '$histoire-stories'
 export const RESOLVED_STORIES_ID = `/${STORIES_ID}-resolved`
+export const SETUP_ID = '$histoire-setup'
+export const NOOP_ID = '/$histoire-noop'
 
 export async function createVitePlugins (ctx: Context): Promise<Plugin[]> {
   const userViteConfig = {} // @TODO
@@ -18,7 +20,6 @@ export async function createVitePlugins (ctx: Context): Promise<Plugin[]> {
 
     config () {
       const baseConfig = defineConfig({
-
         optimizeDeps: {
           // force include vue to avoid duplicated copies when linked + optimized
           include: [
@@ -37,10 +38,19 @@ export async function createVitePlugins (ctx: Context): Promise<Plugin[]> {
         : baseConfig
     },
 
-    resolveId (id) {
+    async resolveId (id, importer) {
       if (id.startsWith(STORIES_ID)) {
         return RESOLVED_STORIES_ID
       }
+      if (id.startsWith(SETUP_ID)) {
+        if (ctx.config.setupFile) {
+          return this.resolve(ctx.config.setupFile, importer, {
+            skipSelf: true,
+          })
+        } else {
+          return NOOP_ID
+        }
+      }
     },
 
     load (id) {
@@ -74,6 +84,9 @@ if (import.meta.hot) {
   })
 }`
       }
+      if (id === NOOP_ID) {
+        return `export default () => {}`
+      }
     },
 
     handleHotUpdate (updateContext) {