fix: add fille to built components to infer tag name

packages/histoire/src/client/app/codegen/vue3.ts

@@ -82,6 +82,8 @@ function getTagName (vnode: VNode) {
  return asyncComp.name ?? getNameFromFile(asyncComp.__file)
  } else if (vnode.type?.name) {
  return vnode.type.name
+ } else if (vnode.type?.__file) {
+ return getNameFromFile(vnode.type.__file)
  }
  return 'Anonymous'
 }

packages/histoire/src/node/commands/build.ts

@@ -11,6 +11,7 @@ export async function buildCommand () {
  }
  const ctx: Context = {
  config,
+ mode: 'build',
  }
  await build(ctx)
 }

packages/histoire/src/node/commands/dev.ts

@@ -15,6 +15,7 @@ export async function devCommand (options: DevOptions) {
  }
  const ctx: Context = {
  config,
+ mode: 'dev',
  }
  const server = await createServer(ctx)
  await server.listen(options.port)

packages/histoire/src/node/context.ts

@@ -2,4 +2,5 @@ import { HistoireConfig } from './config.js'
 
 export interface Context {
  config: HistoireConfig
+ mode: 'dev' | 'build'
 }

packages/histoire/src/node/plugin.ts

@@ -1,3 +1,4 @@
+import { relative } from 'pathe'
 import { defineConfig, mergeConfig, Plugin } from 'vite'
 import { APP_PATH, DIST_CLIENT_PATH } from './alias.js'
 import { Context } from './context.js'
@@ -116,8 +117,32 @@ if (import.meta.hot) {
  }
  },
  }
- return [
+
+ const plugins = [
  vitePlugin,
  vuePlugin,
  ]
+
+ if (ctx.mode === 'build') {
+ // Add file name in build mode to have components names instead of <Anonymous>
+ const include = [/\.vue$/]
+ const exclude = [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
+ const fileNamePlugin: Plugin = {
+ name: 'histoire-file-name-plugin',
+ enforce: 'post',
+
+ transform (code, id) {
+ if (exclude.some(r => r.test(id))) return
+ if (include.some(r => r.test(id))) {
+ const file = relative(ctx.config.sourceDir, id)
+ const index = code.indexOf('export default')
+ const result = `${code.substring(0, index)}_sfc_main.__file = '${file}'\n${code.substring(index)}`
+ return result
+ }
+ },
+ }
+ plugins.push(fileNamePlugin)
+ }
+
+ return plugins
 }