False positive when using storybook/default-exports rule and having default export in the export block

[Michał Kleszczyński]

Describe the bug
The storybook/default-exports rule should check if file contains default export, but for cases when one would want to have only one export clause in all file it is breaking and reporting false positives.

To Reproduce
Create story similar to this - using Vue3,

import type { Meta, StoryObj } from '@storybook/vue3'
import ButtonComponent from '../components/Button.vue'

const meta: Meta = {
  component: ButtonComponent
}

const Button: StoryObj = {
  render: args => ({
    components: { ButtonComponent },
    setup() {
      return { args }
    },
    template: `<ButtonComponent v-bind="args" />`
  })
}

export {
  meta as default,
  Button
}

Expected behavior
Running eslint on the code above with applied storybook plugin should not report an error

[Yann Braga]

Hey @Magiczne ! Storybook has a big ecosystem of tools that depend on AST parsing (Storybook indexer, Storybook test runner, Storybook eslint plugin, Storybook automigrations, etc), so that we can read, analyse, write, or even migrate code for users.

Although your example might be valid, it is not what we use, neither what we recommend, so I'm not sure if it's a good idea to write the code like that. I can't say for certain as our ecosystem is growing, but it's possible that this is a scenario we don't account for (there is an insane amount of ways to write code in TS and JS, so we might miss some), and then you might have issues with some Storybook tooling. @shilman I'd love to hear your thoughts in this!

[Michael Shilman]

@yannbf Correct. If we don't support this in csf-tools then the linter is doing the right thing!

[Yann Braga]

I believe this settles it? I'll be closing the issue, but we might consider this if there are many people requesting the feature. It's mostly that it involves quite some work around all the tooling that we provide to be aligned.

In the meantime, I would recommend writing exports the other way instead:

import type { Meta, StoryObj } from '@storybook/vue3'
import ButtonComponent from '../components/Button.vue'

const meta: Meta = {
  component: ButtonComponent
}
export default Meta

export const Button: StoryObj = {
  render: args => ({
    components: { ButtonComponent },
    setup() {
      return { args }
    },
    template: `<ButtonComponent v-bind="args" />`
  })
}

Thank you!