SB7 Source code formatting changes?

[stable bane]

I recently upgraded to SB7 and noticed some changes in how the "show code" block is displayed. attached some before and after images of the upgrade's effect on the copy code. I did not do any special treatment on the code like transform or transformSource it just used to work out of the box from previous versions.

here is our preview.js

export const parameters = {
  a11y: {
    element: '#root',
    config: {},
    options: {},
    manual: false,
  },
  options: {
    storySort: {
      method: 'alphabetical',
    },
  },
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
  decorators: withTests({
    filesExt: '.test.ts',
    results,
  }),
};

export const decorators = [
  (Story) => (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={rktTheme}>
        <Story />
      </ThemeProvider>
    </StyledEngineProvider>
  ),
];

and our main.js

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  features: {
    postcss: false,
  },
  typescript: {
    check: true,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  addons: ['@storybook/addon-jest', '@storybook/addon-a11y', '@storybook/preset-scss', '@storybook/addon-docs'],
  webpackFinal(config) {
    delete config.resolve.alias['emotion-theming'];
    delete config.resolve.alias['@emotion/styled'];
    delete config.resolve.alias['@emotion/core'];
    return config;
  },
  staticDirs: ['../../static'],
  docs: {
    autodocs: true,
  },
};

Issue that might be related but not quite
https://github.com/storybookjs/storybook/issues/22362

[mild jacinth]

Hi @stable bane indeed in V7 we don't use the same api or tool to load the storysource code, however if it is just a formatting issue i will look at it to find a fix

[stable bane]

I could look into transformSource I've seen people setup prettier with that, but I wanted to understand what was different in old versions

[mild jacinth]

yes we actually use babel prettier to do that

it has nothing to do with the storysource code loader, it is just to format the generated source code

i will check back the code i'm not 100% sure of the implementation

[stable bane]

It's formatted just fine in my stories but seems like something is happening when its being displayed on the show code block

if we could either get the WYSIWYG treatment, or some docs on how to replicate the previous formatting that would be great

thanks for your time!