feat(packages/sui-decorators): Create @Deprecated() decorator

[oriolpuig]

Description

Frontend Tech Community has agreed to create, use, and standardize the @Deprecated() decorator. It will help us to manage the death code and monitor it to keep our code as clean as possible.

New decorator: @Deprecated()

Imagine you are refactoring a code, or disabling a functionality. How sure you are, that your code is not being used? For those cases, if you use the @Deprecated() decorator, you will be able to see a console.warn on your terminal or browser console (it's disabled on production by default).

If you want to monitor the health of your code, this decorator brings you the possibility to integrate yourself into your application and send it to your desired platform.

This decorator has 2 required parameters:

• key: Used to enable you the possibility of monitoring and know how many times the deprecated code has been called.
• message: Used to display the message into the terminal or browser console. It's enabled only for non-production environments.

Linting Rules

With this Pull Request, also we will add some linting rules for this decorator to help the DX and make our life easier.

The linting rules are:

• The @Deprecated() decorator MUST be used only on Classes and Methods.
  • An ESLint error will appear.
  • A quick fix to remove it will appear.
• The @Deprecated() decorator MUST have a key provided.
  • An ESLint error will appear
  • A quick fix to autocomplete the key will appear with the current method/class name.
• The @Deprecated() decorator MUST have a message provided.
  • An ESLint error will appear
  • A quick fix to autocomplete the key will appear with the current method/class name.
• A method/class with a @Deprecated() decorator, will be highlighted as a warning.
  • An ESLint error will appear.

Example of usage:

@Deprecated({ key: 'DummyUseCase#execute', message: 'The [DummyUseCase#execute] method is deprecated. Use the [SuperDummyUseCase#execute] instead' })
function execute() {
  if(error) {
    throw new Error('this is not ok')
  }
  return 'this is ok'
}

Example of visualisation on your Browser Console

Example

Client test ✅

Server test ✅