CSF linter / sanitizing loader

CSF is based on ES modules, but Storybook’s source tooling, such as loaders and codemods assume certain things about those modules. We should write a linter or sanitizing loader to check for those things.

For example, most tools assume that there is a default export with a title:

export default {
  title: 'Foo/bar/baz'
  ...
}

The following code is equivalent at runtime:

const config = {
  title: 'Foo/bar/baz'
  ...
};

export default config;

However, because the source (AST) is different, many tools will ignore these files as poorly-formed CSF. We should write a checker to warn users when they don’t have well-formed CSF.

• ESlint module that checks in your code editor
• Babel/webpack loader that executes at load time

[shilman]

@Sidnioulz I believe the default export must have either component OR title. Any chance you can make a PR to fix the docs?

[shilman]

@benbender yeah. this is in flux – I’ve created a shared library for CSF static analysis which fixes the example I gave above. We’ll update more tooling to use that, and we should also document its limitations. i suspect any documentation will happen in concert with the linter.