Как сделать так чтобы я мог использовать декораторы в проекте с Vite React MobX Typescript SWC?

Для использования декораторов в проекте с использованием Vite, React, MobX, Typescript и SWC вам потребуется выполнить несколько шагов.

1. Установите необходимые зависимости:

   npm install react react-dom mobx mobx-react-lite mobx-react swc @babel/preset-typescript --save

2. В файле tsconfig.json, добавьте опцию "experimentalDecorators": true в раздел compilerOptions, чтобы обеспечить поддержку экспериментальных декораторов:

   {
     "compilerOptions": {
       "experimentalDecorators": true,
       // остальные настройки
     }
   }

3. Создайте файл .babelrc и добавьте следующую конфигурацию:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "modules": false,
           "targets": {
             "node": "current"
           }
         }
       ],
       [
         "@babel/preset-react",
         {
           "runtime": "automatic"
         }
       ],
       "@babel/preset-typescript"
     ],
     "plugins": [
       [
         "@babel/plugin-proposal-decorators",
         {
           "legacy": true
         }
       ]
     ]
   }

4. Создайте файл vite.config.ts (если его еще нет) и добавьте следующую конфигурацию:

   import reactRefresh from '@vitejs/plugin-react-refresh';
   import swc from 'vite-plugin-swc';

   export default {
     plugins: [reactRefresh(), swc()],
   };

5. Теперь вы можете использовать декораторы в своем проекте. Например, у вас может быть компонент React, к которому вы применяете декоратор MobX:

   import { observer } from 'mobx-react';

   @observer
   class MyComponent extends React.Component {
     // ваш код компонента
   }

Обратите внимание, что декоратор @observer берет на себя роль обертки для вашего компонента и автоматически обновляет его при изменении данных в MobX.

6. Дополнительно, вы также можете использовать декораторы для аннотаций типов с помощью MobX:

   import { observable } from 'mobx';

   class MyStore {
     @observable counter = 0;
   }

Рекомендуется декорировать свойство @observable, чтобы MobX мог отслеживать изменения этого свойства и автоматически обновлять компоненты, которые зависят от него.

Это базовая настройка для использования декораторов в проекте с Vite, React, MobX, Typescript и SWC. Однако, учтите, что использование декораторов связано с экспериментальной функциональностью и некоторые инструменты или библиотеки могут не полностью поддерживать эту функциональность. Поэтому перед использованием декораторов рекомендуется проверить совместимость с вашими инструментами и библиотеками.