[@storybook/addons-storysource]: Can storysource addon show markup if my stories don't use the render function?

[petegivens]

Summary

Storybook can automatically render my components without my having to specify a render function. A story in CSF can be as simple as export const Basic: Story = {};

However, if stories are written that way, the storysource addon will show {} as the source code. Is there any way for the addon to show the markup that gets rendered by storybook?

For example, if my story is this:

export const Info: Story = {
  args: { status: 'info', message: 'I am an informational banner' },
};

Storysource will display the code like so:

Obviously that's not very useful for developers who want to use the actual component. I would expect to see the generated render function, something like:

<Banner status="info" message="I am an informational banner" />

or

export const Info: Story = {
  args: { status: 'info', message: 'I am an informational banner' },
  render: ({ args }) => <Banner status="info" message="I am an informational banner" />
};

Ideally it would only show me the return of the render function, but the above would be fine too.

Is there any way to achieve what I'm looking for without manually writing the render function for every story?

Additional information

No response

Create a reproduction

No response

[oleggrishechkin]

Hi, @petegivens. Hope you already find the solution, but if not I have one. You can write custom addon with code below:

import * as React from 'react';
import type { StoryId } from '@storybook/types';
import { SyntaxHighlighter } from '@storybook/components';
import { SNIPPET_RENDERED } from '@storybook/docs-tools';
import { useChannel } from '@storybook/manager-api';

type SnippetRenderedArgs = {
  id: StoryId;
  args: Record<string, any>;
  source: string;
};

export const SourceTab = () => {
  const [{ source }, handleSnippetRendered] = React.useState<SnippetRenderedArgs>({
    id: '',
    args: {},
    source: '',
  });

  useChannel({ [SNIPPET_RENDERED]: handleSnippetRendered });

  const sourceAvailable = Boolean(source);

  return (
    <SyntaxHighlighter
      padded
      wrapLongLines
      language="tsx"
      copyable={sourceAvailable}
      bordered={sourceAvailable}
    >
      {sourceAvailable ? source : 'Compiling...'}
    </SyntaxHighlighter>
  );
};

It show you rendered React tree. It isn't exactly the same as story code but very similar with all args