DocsPage code preview indentation is wrong

[danielcolinjames]

Describe the bug
When creating stories for a DocsPage with an MDX file, the code preview underneath the story seems to have the wrong indentation, even though it's correct in the file.

To Reproduce
Steps to reproduce the behavior:

1. Create a Component.stories.mdx file
2. Output a <Story name="default"><Preview><Component /></Preview></Story>
3. Go to DocsPage for that component
4. Click "Code" button to bring up code preview
5. See wrong indentation for code preview

Expected behavior
The indentation (and line breaks) would be identical to how it shows up in the MDX file.

Screenshots
The code:

and how it shows up in the DocsPage <Preview>:

Code snippets
If applicable, add code samples to help explain your problem.

System:
Environment Info:

System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Binaries:
Node: 12.6.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Browsers:
Chrome: 76.0.3809.87
Firefox: 68.0.1
Safari: 12.1.2
npmPackages:
@storybook/addon-actions: ^5.2.0-rc.10 => 5.2.0-rc.11
@storybook/addon-docs: ^5.2.0-rc.11 => 5.2.0-rc.11
@storybook/addon-links: ^5.2.0-rc.10 => 5.2.0-rc.11
@storybook/addons: ^5.2.0-rc.10 => 5.2.0-rc.11
@storybook/react: ^5.2.0-rc.10 => 5.2.0-rc.11

Additional context
The same exact indentation abnormality (2nd through 2nd last lines are indented one tab too far left, and last line indented two tabs too far right) seems to happen for all my DocsPage code previews, so I figured it's either a configuration issue somewhere on my end, or a bug with the DocsPage code preview.

Thanks!

---

IssueHunt Summary

Backers (Total: $20.00)

• kylemh ($20.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[mbbillz]

Having the same issue, looks especially strange with render prop components... 😆

[shilman]

@atanasster can you help out here?

[atanasster]

can someone please paste source code in text form to reproduce the issue instead of pics

[shilman]

@atanasster i think we have plenty of examples in the monorepo already, e.g.

https://storybook.js.org/docs/basics/writing-stories/#loading-stories

https://storybookjs-next.now.sh/official-storybook/?path=/docs/addons-a11y-form--without-label

[atanasster]

Thanks

[shilman]

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.7 containing PR #9513 that references this issue. Upgrade today to try it out!

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

[mrtraser]

Indentation still wrong for *.mdx files in storybook v5.3.8

Source:

Result:

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.9 containing PR #9609 that references this issue. Upgrade today to try it out!

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

[tklives]

Hey y'all!

I am also still very much interested in any potential fixes or workarounds for this issue. Any additional info to share on this yet? :)

Thanks!
TK

[ndelangen]

We should now be lazy-loading the syntaxhighlighter.. Maybe we can restart the effort to employ prettier for formatting?

[frassinier]

Here is a workaround for now, by editing your preview.js

import prettier from 'prettier/standalone';
import prettierBabel from 'prettier/parser-babel';

export const parameters = {
  docs: {
    transformSource: input =>
      prettier.format(input, {
        parser: 'babel',
        plugins: [prettierBabel],
      }),
  },
};

Hope it can help!

[01taylop]

@frassinier

Whilst this solution did work for me, running Storybook took a lot longer and I see this getting logged for a number of different files:

Note: The code generator has deoptimised the styling of /PATH/node_modules/prettier/standalone.js as it exceeds the max of 500KB.

It seems the issue occurs as soon as I add the prettier/standalone import.

[mpalpha]

@01taylop
My workaround may work for you.

[wisteria-hill-technologies]

Hi, I tried the workaround by @frassinier.
But, it added semicolon at the end of the code block and also it did not parse a component with a prop which passes a component, and doc breaks.

Instead, I did below using pretty library:

import pretty from 'pretty';
...
export const parameters = {
  docs: {
     transformSource: input => pretty(input)
  }
  ...
}

For your information. This worked for me.

[ndelangen]

This is fixed in 7.0 beta

[MrErHu]

Ridiculous, this problem still has not been solved in 2023！

[ndelangen]

Would you be so kind to explain to us how you concluded this is in fact not yet fixed in the current latest version?

We can re-open this if you supply a reproduction repo.

[PauliCZ44]

Here is a workaround for now, by editing your preview.js

import prettier from 'prettier/standalone';
import prettierBabel from 'prettier/parser-babel';

export const parameters = {
  docs: {
    transformSource: input =>
      prettier.format(input, {
        parser: 'babel',
        plugins: [prettierBabel],
      }),
  },
};

Hope it can help!

This work like a charm in SB 7.5

[lwkchan]

It seems like the solution which uses prettier/standalone and prettier/parser-babel above do not work if you use prettier v3 or later. This is because from v3, prettier's format function is asychrnous returning a promise (see release note). However, Storybook's transformSource is expected to be a function which returns a string.

Using 'prettier-synchronized' didn't work for me either, since it looks like it needs to be used in a node environment

[JamesIves]

It seems like the solution which uses prettier/standalone and prettier/parser-babel above do not work if you use prettier v3 or later. This is because from v3, prettier's format function is asychrnous returning a promise (see release note). However, Storybook's transformSource is expected to be a function which returns a string.

Using 'prettier-synchronized' didn't work for me either, since it looks like it needs to be used in a node environment

Also running into this. Curious if there's any workarounds.

[karlschwaier]

I had the same issue and found a workaround by installing Prettier v2 with npm aliasing.

"prettier": "3.3.2",
"prettier-v2": "npm:[email protected]",

preview.ts:

import prettier from 'prettier-v2';
import HTMLParser from 'prettier-v2/parser-html';

[caseywatts]

I got this working! Prettier parsing of the code preview.
Thanks to a lot of clues in this thread, plus this thread

package.json

  "dependencies": {
    "prettier": "^3.3.3",
    "prettier-v2": "npm:[email protected]"
  },

preview.ts

import type { Preview } from "@storybook/web-components";
import prettier from "prettier-v2";
import HTMLParser from "prettier-v2/parser-html";

const preview: Preview = {
    docs: {
      source: {
        transform: (input) =>
          prettier.format(input, {
            parser: "html",
            plugins: [HTMLParser],
          }),
      },
    },
  },
};

export default preview;

('prettier-synchronized' didn't work for me either)