How to test local changes on polkadot.js

This is aimed for TypeScript/JavaScript newbies, so they don't lose too much time figuring out the development process if they need to submit a PR to one of the repositories of Polkadot.JS

Let's take the example of changing some code in their common repo and integrating it in the extension project

1. Clone both repos and run yarn and yanr build to make sure their latest commits actually compile.

2. Now make some changes in common and it is time to integrate this local version of the module into extension

   There is a command that is supposed to do just that for us yarn polkadot-dev-copy-to extension however this command will overwrite all files in our local extension/node-modules/@polkadot directory. This includes all the .d.ts files that were there, which in turn will not allow us to compile.

   As a workaround we can write a simple script to build our common repo which generates some js and cjs files. Then copies those files to the extension repo without overwriting the .d.ts there. And finally builds the extension repo itself.

   For this example consider that we have modified the following file

# Go in the common repo
cd path/to/common/

# Build common repo
yarn build

# Copy all necessary files to extension folders, js and cjs files.
cp \
path/to/common/node_modules/@polkadot/networks/build/index.js \
path/to/extension/node_modules/@polkadot/networks/index.js

cp \
path/to/common/node_modules/@polkadot/networks/build/index.cjs \
path/to/extension/node_modules/@polkadot/networks/index.cjs

# Go to extension repo folder
cd path/to/extension

# Build extension project.
yarn build

3. Install the extension to your browser.

   Please follow this very short guide.

4. Keep adding files to the script in section 2.

   As you keep working on different ts files in the common repo you will need to include their corresponding .js and .cjs files to the script so they can be copied over accordingly.

5. Hopefully soon we will figure out how the Polkadot.JS team does this internally but until then you can iterate sort of fast with this method.

6. Happy coding!