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