Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: when I use JSX in CSF,the show code is not work well #28265

Open
TaurusWood opened this issue Jun 18, 2024 · 0 comments
Open

[Bug]: when I use JSX in CSF,the show code is not work well #28265

TaurusWood opened this issue Jun 18, 2024 · 0 comments

Comments

@TaurusWood
Copy link

Describe the bug

export const Primary: Story = {
  render: (args) => ({
    components: { Button },
    setup() {
      return { args };
    },
    render() {
      return (
        <Button v-bind="args" />
      )
    },
  }),
  args: {
    primary: true,
    label: 'Button',
  },
};

then I click showcode I get this
WX20240618-134722

But when I repleace it

export const Primary: Story = {
  render: (args) => ({
    components: { Button },
    setup() {
      return { args };
    },
    template: '<Button v-bind="args" />',
  }),
  args: {
    primary: true,
    label: 'Button',
  },
};

It work well. Why is there such a difference? Template only supports String. For stories that compare use case scenarios, using JSX is definitely convenient because it has good type support, code inference, and formatting.

Reproduction link

https://stackblitz.com/edit/github-zeehca?file=src%2Fstories%2FButton.stories.tsx

Reproduction steps

  1. look Reproduction link Button stories
  2. click showcode with button stories

System

System:
    OS: macOS 12.7.1
    CPU: (8) arm64 Apple M1
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.16.1/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    pnpm: 9.1.0 - ~/.nvm/versions/node/v18.16.1/bin/pnpm <----- active
  Browsers:
    Chrome: 125.0.6422.176
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-actions: ^8.1.1 => 8.1.6
    @storybook/addon-docs: ^8.1.10 => 8.1.10
    @storybook/addon-essentials: ^8.1.1 => 8.1.6
    @storybook/addon-interactions: ^8.1.1 => 8.1.6
    @storybook/addon-links: ^8.1.1 => 8.1.6
    @storybook/addon-viewport: ^8.1.6 => 8.1.6
    @storybook/blocks: ^8.1.1 => 8.1.6
    @storybook/channels: ^8.1.1 => 8.1.6
    @storybook/core-events: ^8.1.1 => 8.1.6
    @storybook/preview-api: ^8.1.1 => 8.1.6
    @storybook/test: ^8.1.1 => 8.1.6
    @storybook/theming: ^8.1.5 => 8.1.6
    @storybook/types: ^8.1.1 => 8.1.6
    @storybook/vue3: ^8.1.1 => 8.1.6
    @storybook/vue3-vite: ^8.1.1 => 8.1.6
    storybook: ^8.1.1 => 8.1.6
    storybook-addon-deep-controls: ^0.6.2 => 0.6.2

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant