source code transform with prettier in 7.0

[tkonopka]

Thanks for the ongoing work on storybook and new releases. I'd like to share feedback on migration to 7.0 and interaction with source code transform with prettier.

After upgrading to 7.0, source transforms for docs appear to work differently than in 6.5. The transform function is sometimes given json-like strings. This caused me trouble when coupled with 'prettier' and 'Canvas' components. In case the effect is relevant to others, this note summarizes the effect and a possible solution. If this is expected and/or uninteresting, please feel free to close.

My configuration in .storybook/preview.js for v6.5 included imports:

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

and a source transform block as follows:

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

After upgrading and with this hint from the migration guide, I changed the block to:

  docs: {
    source: {
      transform: input => 
        prettier.format(input, { parser: 'babel', plugins: [prettierBabel] }),
    }
  }

This makes <Story of={...} /> constructs work in docs pages, but causes babel errors when wrapped with <Canvas>. It turns out that the transform attempts to process strings that resemble json. The strings represent args from my StoryObj objects, and they cause the formatter to fail (unexpected token etc., and the whole page breaks.)

The error is thrown in prettier and not storybook, but I'm not sure if those strings reaching the transform is a bug or expected behavior.

My workaround to avoid the errors is now to try-catch like this:

  docs: {
    source: {
      transform: input => {
        try {
          return prettier.format(input, { parser: 'babel', plugins: [prettierBabel] })
        } catch (e) {
          return input
        }
      }
    }
  }

Thanks!