diff --git a/docs/extending/dev-setup.mdx b/docs/extending/dev-setup.mdx index 7386b7997..e2215999b 100644 --- a/docs/extending/dev-setup.mdx +++ b/docs/extending/dev-setup.mdx @@ -23,7 +23,7 @@ When developing Flipper plugins we recommend the following IDEs: ### TypeScript -Flipper Desktop is written in TypeScript. +Flipper Desktop is written in TypeScript. Using our internal "VSCode @ FB" as IDE is strongly recommended (`code-fb`). Make sure to install the `[FB-Internal]` "ESLint" and "Pretter" extensions are enabled. @@ -50,7 +50,7 @@ When developing Flipper plugins we strongly recommend to run from Flipper itself - Automatic refresh after code changes. - React and Redux Dev Tools. - [Debugging](debugging) using Chrome Dev Tools or Visual Studio Code. -- Additional debug information like React warnings and performance metrics. +- Additional debug information like React warnings and performance metrics. Prerequisites for Flipper development build: - node ≥ 14 @@ -75,19 +75,29 @@ Tip: start with `yarn start --fast-refresh` for experimental fast refresh. -``` -fbclone fbsource +```bash +fbclone fbsource --sparse tools/scm/sparse/xplat/flipper-js cd ~/fbsource/xplat/sonar/desktop yarn yarn start ``` +A note on sparse profiles: We have a minimal profile for working with the Flipper JavaScript +files in `fbsource` for plugin developers. This will drastically reduce the size of your checkout, but +won't include the files necessary to, for instance, build and work on mobile apps. + +If you have an existing sparse checkout, you can add the Flipper profile with + +```bash +hg sparse enable tools/scm/sparse/xplat/flipper-js +``` + Tip: start with `yarn start --fast-refresh` for experimental fast refresh. Tip: start wih `yarn start --public-build` to preview changes for public builds. Use VSCode to hack on Flipper. -To make sure ESLint and Prettier are applied correctly, make sure to open either `sonar` or `sonar/desktop` as workspace folder in VSCode: `code-fb ~/fbsource/xplat/sonar`. +To make sure ESLint and Prettier are applied correctly, make sure to open either `sonar` or `sonar/desktop` as workspace folder in VSCode: `code-fb ~/fbsource/xplat/sonar`. @@ -121,9 +131,9 @@ Options: which means that all plugins loaded. [array] --open-dev-tools Open Dev Tools window on startup. The flag is disabled by default. Env var FLIPPER_OPEN_DEV_TOOLS is equivalent - to the command-line option "--open-dev-tools". If - "FLIPPER_UPDATE_DEV_TOOLS=true" is set additionally, - Flipper will try to update the dev tools from the play + to the command-line option "--open-dev-tools". If + "FLIPPER_UPDATE_DEV_TOOLS=true" is set additionally, + Flipper will try to update the dev tools from the play store. [boolean] --dev-server-port Dev server port. 3000 by default. Env var "PORT=3001" is equivalent to the command-line option "--dev-server-port @@ -155,7 +165,7 @@ To start Flipper against a specific OnDemand instance, set FB_ONDEMAND flag, e.g ## Submitting a diff / PR -Make sure your new functionality is covered with tests, and run `yarn test` or `yarn test --watch` in the `desktop/` directory to verify that they pass. +Make sure your new functionality is covered with tests, and run `yarn test` or `yarn test --watch` in the `desktop/` directory to verify that they pass. See the [testing](testing) page for more details on writing and running test.