[Feature Request]: Add `satisfies` support to `csf-tools`

[shilman]

Is your feature request related to a problem? Please describe

satisfies is a new TS 4.9 language feature, but our csf-tools does not support it yet.

const meta = {
  component: Button
} satisfies Meta<typeof Button>;

Describe the solution you'd like

Examples like the above parse cleanly & correctly

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.59 containing PR #20088 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[AleksandarDev]

@shilman I'm having problem with default export (without const).

Story

import { Accordion } from "@signalco/ui";
import { Meta, StoryObj } from "@storybook/react";

export default { component: Accordion, tags: ['docsPage'], args: {  } } satisfies Meta<typeof Accordion>;
type Story = StoryObj<typeof Accordion>;

export const Default: Story = {};

Error

in ./stories/Components/Accordion.stories.ts 10:2
Module parse failed: Unexpected token (10:2)
File was processed with these loaders:
 * ../../node_modules/.pnpm/babel-loader@8.3.0_lkd654lvpl423ugsqn5olungie/node_modules/babel-loader/lib/index.js
 * ../../node_modules/.pnpm/unplugin@0.10.2/node_modules/unplugin/dist/webpack/loaders/load.js
You may need an additional loader to handle the result of these loaders.
|   tags: ['docsPage'],
|   args: {}
> } satisfies Meta<typeof Accordion>);
| export var Default = {};
| Default.parameters = _objectSpread(_objectSpread({}, Default.parameters), {}, {

I also noticed there might be c/p error in tests for CsfFile here where satisfies is tested for default export case: https://github.com/storybookjs/storybook/pull/20088/files#diff-39551742826f8679fb529b2e6f5c093de3fb0c185f340e3799397e25e40977caR230

[nix6839]

@AleksandarDev Are you using Next.js framework in your storybook config?

It inherits babel settings from Next.js. And Next.js doesn't support satisfies operator yet in babel. Because babel is not a first-class support target for Next.js(Ref: https://github.com/vercel/next.js/issues/43799).

You can use swc addon. It would be great if StoryBook officially supported swc in the Next.js framework.

[AleksandarDev]

@nix6839 Thanks, works great with SWC addon.

It would be great if StoryBook officially supported swc in the Next.js framework.

I agree, this is default for Next.js when there is no babelrc (since v12?)...