Install Farfetched
You will learn:
- How to install minimal setup of Farfetched
- How to choose the best integration for your tech stack
- How to get the best DX by installing a few additional tools
Basic setup
First, you need to install Farfetched and its peer dependency:
pnpm install @farfetched/core effector
yarn add @farfetched/core effector
npm install @farfetched/core effector
INFO
Farfetched declares Effector as a peer dependency to prevent two instances of Effector in the same application. Read more about relation between Farfetched and Effector in the statement.
Actually, that is all what you need to start, but consider installing one of the following integrations to improve your DX with popular tools:
effector-solid
and@farfetched/solid
with delicious helpers for Solideffector-react
with nice hooks for React
Additional tools
For some advanced usage, like cache
or server-side rendering, Farfetched requires a few code transformations. You can write it by hands, but it is a boring job that you can forward to a machine. Effector's ecosystem provides a few tools to help you with that.
Babel plugin
If your project already uses Babel, you do not have to install any additional packages, just modify your Babel config with the following plugin:
{
"plugins": ["effector/babel-plugin"]
}
INFO
Read more about effector/babel-plugin
configuration in the Effector's documentation.
SWC plugin
WARNING
Note that plugins for SWC are experimental and may not work as expected. We recommend to stick with Babel for now.
SWC is a blazing fast alternative to Babel. If you are using it, you can install effector-swc-plugin
to get the same DX as with Babel.
pnpm add --save-dev effector-swc-plugin @swc/core
yarn add --dev effector-swc-plugin @swc/core
npm install --dev effector-swc-plugin @swc/core
Now just modify your .swcrc
config to enable installed plugin:
{
"$schema": "https://json.schemastore.org/swcrc",
"jsc": {
"experimental": {
"plugins": ["effector-swc-plugin"]
}
}
}
INFO
Read more about effector-swc-plugin
configuration in the plugin documentation.
Vite
If you are using Vite, please read the recipe about it.
Deep dive
If you are interested in how code transformations works under the hood and why they are required for some use cases, you can dive into advanced article about SIDs.