3.4 KiB

Raw Blame History

Local Component Development

Summary

Our team needs to be able quickly fix potential issues discovered in status-web and make progress independently of the status-web release process. To achieve these goals, we will maintain our own git fork of status-web, while always trying to upstream our work.

In this repository, we will include our fork of status-web as a git submodule that is used as a local dependency in the yarn workspace in order to make it very easy to experiment with changes to status-web while maintaining the ability to prepare clean feature branches that will be submitted as PRs to the upstream repo.

Workflow

When facing an issue in status-web or aiming to introduce a new feature or component, it's highly beneficial to be able to assess your modifications in real-time within nimbus-gui. Regrettably, achieving this seamlessly with the tooling provided by yarn isn't straightforward. Hence, our custom scripts offer a viable alternative.

I. Switch to local component development mode

To begin local component development, run the following command:

yarn local_deps:begin

This command will:

Check and update the status-web submodule if necessary
Build the status-web packages
Replace the @status-im/components package installed by yarn with the local version we just built

Now we depend on the local version of @status-im/components and can make changes to it

II. Make the required changes

Inside the vendor/status-web directory, you can find the source code. For example, if you want to make changes to the components, they are located in vendor/status-web/packages/components. Now in order to make changes and examine them in real-time, you can follow the steps below:

Make the required changes
Build and install the changes running:
```
yarn local_deps:build
```
Examine the changes in nimbus-gui's dev environment

III. Push the changes to our `status-web` fork

Once you are satisfied with the changes, you can push them to our fork of status-web

Navigate to the vendor/status-web directory and examine the changes
```
cd vendor/status-web
git status
```
Do not mind the changes in the following files, you should not commit them: apps/mobile/package.json, packages/colors/package.json, packages/icons/package.json, yarn.lock

Commit your changes

git checkout -b <your-branch-name>
git add <your-changes>
git commit
git push

Create a PR to the nimbus-gui/status-web repository

IV. Exit local component development mode

Now with the changes pushed to our fork of status-web, you can exit the local component development mode by running the following command:

yarn local_deps:end

This will check if you have any uncommitted changes and will remind you to commit them if you do. It will also restore the original @status-im/components package, by installing it with yarn.

V. Update packages and submodule

Having the PR merged, you can update the @status-im/components package and the status-web submodule in nimbus-gui.

Update the @status-im/components package by setting the correct revision in the package.json file and run yarn install

Update the status-web submodule:

cd vendor/status-web
git pull
cd ../..
git add vendor/status-web
git commit -m "chore(vendor): Update status-web submodule"

3.4 KiB Raw Blame History