[Bug]: Decorators cannot be used to decorate parameters

[valentinpalkovic]

Describe the bug

The babel parser in code/lib/csf-tools/src/babelParse.ts: throws an error parsing the following code:

import { Component, Input, Output, EventEmitter, Inject, HostBinding } from '@angular/core';
import { CHIP_COLOR } from './chip-color.token';

@Component({
  selector: 'storybook-chip',
})
export class ChipComponent {
  // The error occurs on the Inject decorator used on a parameter
  constructor(@Inject(CHIP_COLOR) chipColor: string) {
    this.backgroundColor = chipColor;
  }
}
export default {
  title: 'Chip',
}

Error:

SyntaxError: Decorators cannot be used to decorate parameters.

Problem:

The babel parser is set up with some default options, which are too universal and might need to be more complete for some projects. In the shown example, a decorator is used on a parameter, which is not supported in earlier decorator proposals.

Solving the issue:

1. Ignore errors, which are not fatal, like some Syntax Errors

Setting errorRecovery to true will drop non-fatal errors and will not abort the execution.

TODO items:

1. Set errorRecovery to true.
2. Write an extensive test suite to cover different errors and figure out, which kind of errors lead to a fatal error.

2. Extend default babel configuration to support decorators on parameters

The default babel parser options in code/lib/csf-tools/src/babelParse.ts can be adjusted to support parameter decorators.

To Reproduce

Take the above code and add a unit test in code/lib/csf-tools/src/CsfFile.test.ts. Parsing the code should fail immediately:

it('reproduction', () => {
  expect(parse(dedent`
    import { Component, Input, Output, EventEmitter, Inject, HostBinding } from '@angular/core';
    import { CHIP_COLOR } from './chip-color.token';
    
    @Component({
      selector: 'storybook-chip',
    })
    export class ChipComponent {
      // The error occurs on the Inject decorator used on a parameter
      constructor(@Inject(CHIP_COLOR) chipColor: string) {
        this.backgroundColor = chipColor;
      }
    }
    export default {
      title: 'Chip',
    }
  `, true).toMatchInlineSnapshot(`...`)
})

System

No response

Additional context

No response

[shilman]

In the short term, let's just add this to our standard babelParse. Error recovery seems too scary to add at this point (or ever?)

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-rc.1 containing PR #21506 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease