[Bug]: tsx story's parameters.docs.source.type = 'code' shows compiled js code

[zb-sj]

Describe the bug

Doc's source view shows precompiled code while trying to provide sample with TypeScript code.

It also includes unnecessary parts such as play, args etc..
where previously only showed what's in render part.

To Reproduce

zb-sj/storybook-issue-21747/Issue.stories.tsx

// Issue.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { within, userEvent } from '@storybook/testing-library';
import { useState } from 'react';

import { Button } from './Button';

const meta: Meta = {
  component: Button,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;

function SampleComponent(args: { foo: string }) {
  const [label, setLabel] = useState('hello');

  return <Button label={label} onClick={() => setLabel(`${args.foo} bar`)} />;
}

type Story = StoryObj<typeof SampleComponent>;

export const CodeIssue: Story = {
  render: SampleComponent,
  args: {
    foo: 'foo',
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const loginButton = await canvas.getByRole('button', {
      name: /Log in/i,
    });
    await userEvent.click(loginButton);
  },
  parameters: {
    docs: {
      source: {
        type: 'code',
      },
    },
  },
};

// code in docs
{
  render: SampleComponent,
  args: {
    foo: 'foo'
  },
  play: function () {
    var _play = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
      var canvasElement, canvas, loginButton;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            canvasElement = _ref.canvasElement;
            canvas = within(canvasElement);
            _context.next = 4;
            return canvas.getByRole('button', {
              name: /Log in/i
            });
          case 4:
            loginButton = _context.sent;
            _context.next = 7;
            return userEvent.click(loginButton);
          case 7:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    function play(_x) {
      return _play.apply(this, arguments);
    }
    return play;
  }(),
  parameters: {
    docs: {
      source: {
        type: 'code'
      }
    }
  }
}

System

Environment Info:

  System:
    OS: macOS 13.2
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    Yarn: 3.4.1 - /usr/local/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Safari: 16.3

Additional context

was first discussed at discord

[shilman]

@valentinpalkovic could this be due to the changes in #21629 ?

[valentinpalkovic]

@shilman Yes, the bug was caused by #21629. I have to investigate a proper solution.

[dohomi]

I experience the same issue. After transition from v6 => v7 all docs with render functions have not the same output as v6. It seems docs: "code" makes no difference:
https://tamagui-extras.vercel.app/?path=/docs/ui-forms-button--documentation#sizes

[mscrivo]

I experience the same issue. After transition from v6 => v7 all docs with render functions have not the same output as v6. It seems docs: "code" makes no difference: tamagui-extras.vercel.app/?path=/docs/ui-forms-button--documentation#sizes

same exact issue here. Is there a workaround to get show code to work with 7?

[Azcanba]

@mscrivo There is one but only when you are really desperate :)

you can create template literals ( the backticks ` ) from your code for example

const codeSnippet = <Box> Some text </Box>

and then you can pass it in the exact story like
parameters: { docs: { source: { code: codeSnippet } } }

[ccsenter]

Just kindly asking when to expect a fix for this issue. Right now it's kind of a breaking change for us, we have hundreds of stories and it's just not a practical solution to provide the code snippet in parameters.docs.source.code.

[valentinpalkovic]

@ccsenter we are actively working on it (#22048). I hope I am able to merge the PR tomorrow.

[ccsenter]

That's great!

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.4 containing PR #22048 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[Flcwl]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.4 containing PR #22048 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

@shilman To be latest please~

[shilman]

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.5 containing PR #22048 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

[bratanon]

It also includes unnecessary parts such as play, args etc..
where previously only showed what's in render part.

This is still an issue for me.

export const BasicCheckboxes: StoryObj<typeof Checkbox> = {
  render: () => (
    <>
      <Checkbox value="foo" />
      <Checkbox value="bar" defaultChecked />
      <Checkbox value="baz" disabled />
      <Checkbox value="qux" defaultChecked disabled />
    </>
  ),
  name: 'Basic checkboxes',
  tags: ['wat'],
  parameters: {}
};

Show code shows:

{
  render: () => <>
      <Checkbox value="foo" />
      <Checkbox value="bar" defaultChecked />
      <Checkbox value="baz" disabled />
      <Checkbox value="qux" defaultChecked disabled />
    </>,
  name: 'Basic checkboxes',
  tags: ['wat'],
  parameters: {}
}

Environment Info:

  System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.121
    Firefox: 112.0.1
  npmPackages:
    @storybook/addon-actions: ^7.0.7 => 7.0.7 
    @storybook/addon-essentials: ^7.0.7 => 7.0.7 
    @storybook/addon-interactions: ^7.0.7 => 7.0.7 
    @storybook/addon-links: ^7.0.7 => 7.0.7 
    @storybook/addon-mdx-gfm: ^7.0.7 => 7.0.7 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/addons: ^7.0.7 => 7.0.7 
    @storybook/react: ^7.0.7 => 7.0.7 
    @storybook/react-webpack5: ^7.0.7 => 7.0.7 
    @storybook/testing-library: ^0.1.0 => 0.1.0 
    @storybook/theming: ^7.0.7 => 7.0.7 

[valentinpalkovic]

The fix only aimed to not show compiled code anymore. I am not sure, whether we only want to display code from the render part. @JReinhold, @tmeasday might have further insights

[tmeasday]

It seems like maybe a reasonable thing to do, let's open a feature request for it?

[JReinhold]

@tmeasday considering this was the behavior in 6.5 I would consider this a regression and not a feature request. I've filed a separate bug for it at #22281