Source code

Revision control

Other Tools

1
[//]: # (
2
This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.
3
)
4
5
# Upgrading React
6
7
## Introduction
8
9
We use a version of React that has a few minor tweaks. We want to use an un-minified production version anyway so you need to build React yourself.
10
11
## First, Upgrade react-prop-types.js
12
13
You should start by upgrading our prop-types library to match the latest version of React. Please follow the instructions in `devtools/client/shared/vendor/REACT_PROP_TYPES_UPGRADING.md` before continuing.
14
15
## Getting the Source
16
17
```bash
19
cd react
20
git checkout v16.8.6 # or the version you are targetting
21
```
22
23
## Preparing to Build
24
25
We need to disable minification and tree shaking as they overcomplicate the upgrade process without adding any benefits.
26
27
- Open `scripts/rollup/build.js`
28
- Find a method called `function getRollupOutputOptions()`
29
- After `sourcemap: false` add `treeshake: false` and `freeze: false`
30
- Remove `freeze: !isProduction,` from the same section.
31
- Change this:
32
33
```js
34
// Apply dead code elimination and/or minification.
35
isProduction &&
36
```
37
38
To this:
39
40
```js
41
{
42
transformBundle(source) {
43
return (
44
source.replace(/['"]react['"]/g,
45
"'devtools/client/shared/vendor/react'")
46
.replace(/createElementNS\(['"]http:\/\/www\.w3\.org\/1999\/xhtml['"], ['"]devtools\/client\/shared\/vendor\/react['"]\)/g,
47
"createElementNS('http://www.w3.org/1999/xhtml', 'react'")
48
.replace(/['"]react-dom['"]/g,
49
"'devtools/client/shared/vendor/react-dom'")
50
.replace(/rendererPackageName:\s['"]devtools\/client\/shared\/vendor\/react-dom['"]/g,
51
"rendererPackageName: 'react-dom'")
52
.replace(/ocument\.createElement\(/g,
53
"ocument.createElementNS('http://www.w3.org/1999/xhtml', ")
54
);
55
},
56
},
57
// Apply dead code elimination and/or minification.
58
false &&
59
```
60
61
- Find `await createBundle` and remove all bundles in that block except for `UMD_DEV`, `UMD_PROD` and `NODE_DEV`.
62
63
## Building
64
65
```bash
66
npm install --global yarn
67
yarn
68
yarn build
69
```
70
71
### Copy the Files Into your Firefox Repo
72
73
```bash
74
cd <react repo root>
75
cp build/dist/react.production.min.js <gecko-dev>/devtools/client/shared/vendor/react.js
76
cp build/dist/react-dom.production.min.js <gecko-dev>/devtools/client/shared/vendor/react-dom.js
77
cp build/dist/react-dom-server.browser.production.min.js <gecko-dev>/devtools/client/shared/vendor/react-dom-server.js
78
cp build/dist/react-dom-test-utils.production.min.js <gecko-dev>/devtools/client/shared/vendor/react-dom-test-utils.js
79
cp build/dist/react.development.js <gecko-dev>/devtools/client/shared/vendor/react-dev.js
80
cp build/dist/react-dom.development.js <gecko-dev>/devtools/client/shared/vendor/react-dom-dev.js
81
cp build/dist/react-dom-server.browser.development.js <gecko-dev>/devtools/client/shared/vendor/react-dom-server-dev.js
82
cp build/dist/react-dom-test-utils.development.js <gecko-dev>/devtools/client/shared/vendor/react-dom-test-utils-dev.js
83
cp build/dist/react-test-renderer-shallow.production.min.js <gecko-dev>/devtools/client/shared/vendor/react-test-renderer-shallow.js
84
cp build/dist/react-test-renderer.production.min.js <gecko-dev>/devtools/client/shared/vendor/react-test-renderer.js
85
```
86
87
From this point we will no longer need your react repository so feel free to delete it.
88
89
## Debugger
90
91
### Update React
92
93
- Open `devtools/client/debugger/package.json`
94
- Under `dependencies` update `react` and `react-dom` to the required version.
95
- Under `devDependencies` you may also need to update `enzyme`, `enzyme-adapter-react-16` and `enzyme-to-json` to versions compatible with the new react version.
96
97
### Build the debugger
98
99
#### Check your .mozconfig
100
101
- Ensure you are not in debug mode (`ac_add_options --disable-debug`).
102
- Ensure you are not using the debug version of react (`ac_add_options --disable-debug-js-modules`).
103
104
#### First build Firefox
105
106
```bash
107
cd <srcdir> # where sourcedir is the root of your Firefox repo.
108
./mach build
109
```
110
111
#### Now update the debugger source
112
113
```bash
114
# Go to the debugger folder.
115
cd devtools/client/debugger
116
117
# Remove all node_modules folders.
118
find . -name "node_modules" -exec rm -rf '{}' +
119
120
# Install the new react and enzyme modules.
121
yarn
122
```
123
124
### Run the debugger tests
125
126
#### First run locally
127
128
```bash
129
node bin/try-runner.js
130
```
131
132
If there any failures fix them.
133
134
**NOTE: If there are any jest failures you will get better output by running the jest tests directly using:**
135
136
```bash
137
yarn test
138
```
139
140
If any tests fail then fix them.
141
142
#### Commit your changes
143
144
Use `hg commit` or `hg amend` to commit your changes.
145
146
#### Push to try
147
148
Just because the tests run fine locally they may still fail on try. You should first ensure that `node bin/try-runner.js` passes on try:
149
150
```bash
151
cd <srcdir> # where sourcedir is the root of your Firefox repo.
152
`./mach try fuzzy`
153
```
154
155
- When the interface appears type `debugger`.
156
- Press `<enter>`.
157
158
Once these tests pass on try then push to try as normal e.g. `./mach try -b do -p all -u all -t all -e all`.
159
160
If try passes then go celebrate otherwise you are on your own.