Merge pull request #21506 from storybookjs/valentin/fix-property-decorator-usage

Update babelParse to use legacy decorator syntax

code/lib/csf-tools/src/CsfFile.test.ts

@@ -507,6 +507,33 @@ describe('CsfFile', () => {
               __id: foo-bar--a
       `);
     });
+
+    it('support for parameter decorators', () => {
+      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',
+        }
+      `)
+      ).toMatchInlineSnapshot(`
+      meta:
+        title: Chip
+      stories: []
+      `);
+    });
   });
 
   describe('error handling', () => {

code/lib/csf-tools/src/babelParse.ts

@@ -5,12 +5,7 @@ import type { ParserOptions } from '@babel/parser';
 export const parserOptions: ParserOptions = {
   sourceType: 'module',
   // FIXME: we should get this from the project config somehow?
-  plugins: [
-    'jsx',
-    'typescript',
-    ['decorators', { decoratorsBeforeExport: true }],
-    'classProperties',
-  ],
+  plugins: ['jsx', 'typescript', 'decorators-legacy', 'classProperties'],
   tokens: true,
 };