[feature request] make transform support async function

[harkor]

Describe the bug

Since prettier 3.0.0, "prettier.format" return a Promise

So in rendered code in stories, the code shown is "[object Promise]"

In Stackblitz, u can see the right html formatting inside console.

# line 17 in .storybook/preview.js
    docs: {
      source: {
        transform: async (src, context) => {
          if (context.component) {
            const html = await prettier.format(decode(renderToStaticMarkup(context.originalStoryFn(context.args, context))), {
              parser: 'html',
              htmlWhitespaceSensitivity: 'ignore',
              plugins: [HTMLParser],
            });
            console.log(html);
            return html;
          }
        },
      },
    },

To Reproduce

Stackblitz: https://stackblitz.com/github/harkor/storybook-prettier
Repo: https://github.com/harkor/storybook-prettier

System

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
  Binaries:
    Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
    Yarn: 3.6.1 - ~/.nvm/versions/node/v18.12.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
  Browsers:
    Chrome: 115.0.5790.170
  npmPackages:
    @storybook/addon-essentials: ^7.0.24 => 7.0.24 
    @storybook/addon-interactions: ^7.0.24 => 7.0.24 
    @storybook/addon-links: ^7.0.24 => 7.0.24 
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8 
    @storybook/blocks: ^7.0.24 => 7.0.24 
    @storybook/react: ^7.0.24 => 7.0.24 
    @storybook/react-webpack5: ^7.0.24 => 7.0.24 
    @storybook/testing-library: ^0.2.0 => 0.2.0

Additional context

No response

[harkor]

Any clue ?

[MrErHu]

not support async function

[vanessayuenn]

hi @harkor, thanks for opening this issue. @MrErHu is right -- transform currently only supports synchronous function. The feature request of supporting async is a reasonable one but unfortunately not on our immediate roadmap at the moment.

[omarkawach]

Commenting to say I would also be interested in this feature. Same use case with the prettier API

[rajsite]

We switched to js-beautify with the html formatter configured as wrap_attributes: 'force-expand-multiline' due to the same issue. Switch to beautify example PR.

Would be nice to be able to use prettier so the snippets end up the same as in source usage but better than just being broken. Would love for async support on transform to make the roadmap!