Compare commits
553 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b252e807be | ||
|
|
3b7b50f51f | ||
|
|
d027eca037 | ||
|
|
c96fbd43c4 | ||
|
|
2f696fb289 | ||
|
|
887ccf2534 | ||
|
|
a34c28aaf9 | ||
|
|
f428b39aa1 | ||
|
|
32b3646202 | ||
|
|
cee6c8d54b | ||
|
|
a359efcd68 | ||
|
|
84506e9473 | ||
|
|
44485824f7 | ||
|
|
2586adb41c | ||
|
|
cff02339dd | ||
|
|
a7ba8745cb | ||
|
|
4b8c8bfa7e | ||
|
|
e3dbfcd19d | ||
|
|
2cb3e9060f | ||
|
|
1daac009b3 | ||
|
|
546b9f6d59 | ||
|
|
37639a7c87 | ||
|
|
eb0967749c | ||
|
|
9d80600b63 | ||
|
|
021abead6f | ||
|
|
383128d3d0 | ||
|
|
f1ae286b15 | ||
|
|
62b34d3573 | ||
|
|
56b0878f8c | ||
|
|
eb38eace01 | ||
|
|
af98484233 | ||
|
|
cbf4858b39 | ||
|
|
4221082c8e | ||
|
|
2f89ee4cd5 | ||
|
|
c26241e8a1 | ||
|
|
d62013bfe1 | ||
|
|
c4efcecd98 | ||
|
|
d6d0a17359 | ||
|
|
b26ebafdef | ||
|
|
ea72bd2f92 | ||
|
|
e2317870f1 | ||
|
|
7dc3b723cd | ||
|
|
dfa0f402d4 | ||
|
|
c4aaff43f6 | ||
|
|
ae2fa05da5 | ||
|
|
5f47b8370c | ||
|
|
8faba4cb2f | ||
|
|
0be0c9ca72 | ||
|
|
5f0258bc04 | ||
|
|
6941c84de2 | ||
|
|
7bc32d9148 | ||
|
|
b1e6227e67 | ||
|
|
f3f308ffaf | ||
|
|
e7020c6106 | ||
|
|
dc204718f0 | ||
|
|
e4a9af594f | ||
|
|
c22c398cec | ||
|
|
8862cb0e35 | ||
|
|
4f3eb847b3 | ||
|
|
f11140a0a6 | ||
|
|
c653f07ca8 | ||
|
|
7ceb3fdff9 | ||
|
|
3e9af29f7f | ||
|
|
4eccc7696e | ||
|
|
788d9c8678 | ||
|
|
900ce3cc5f | ||
|
|
4b6a66900f | ||
|
|
651edfe54d | ||
|
|
636d515e62 | ||
|
|
a3b3125c5c | ||
|
|
d6ab9fde20 | ||
|
|
99f82d7243 | ||
|
|
3f2c6bebc0 | ||
|
|
002af59ea3 | ||
|
|
3ec1319427 | ||
|
|
2fefe1edce | ||
|
|
784e29fd65 | ||
|
|
74d10acb03 | ||
|
|
0a7d248cc5 | ||
|
|
0a095d55f4 | ||
|
|
08f6e2f603 | ||
|
|
a1457be82f | ||
|
|
724d87ea40 | ||
|
|
87384331e8 | ||
|
|
0db185e5d7 | ||
|
|
9774f127f8 | ||
|
|
53970c95be | ||
|
|
3842de7f5f | ||
|
|
a941c9928e | ||
|
|
a0924bb67a | ||
|
|
ac6c3d3eae | ||
|
|
9c7bb68d01 | ||
|
|
451cb4c623 | ||
|
|
e8ea302025 | ||
|
|
6bb7a6c60e | ||
|
|
1a60ccde97 | ||
|
|
ed3c401c9e | ||
|
|
be1d6848f0 | ||
|
|
5934242b7e | ||
|
|
e19372d5f4 | ||
|
|
58c129dff9 | ||
|
|
f5b5d9a5f3 | ||
|
|
cd443ca3da | ||
|
|
5b7af23023 | ||
|
|
2039cf87ee | ||
|
|
7149218fa4 | ||
|
|
cb8283877a | ||
|
|
107c74cd7a | ||
|
|
5cef4e9780 | ||
|
|
4aaf555d80 | ||
|
|
dc84614b0c | ||
|
|
625fc71ebb | ||
|
|
659cef8a98 | ||
|
|
6cc07e595a | ||
|
|
fec4df7150 | ||
|
|
88fbe7cc58 | ||
|
|
7eb00d77e9 | ||
|
|
6784bf841e | ||
|
|
7268e9423f | ||
|
|
309de75dc5 | ||
|
|
3dc13b49b9 | ||
|
|
96540f5afd | ||
|
|
6b504aa08b | ||
|
|
e0d718e49c | ||
|
|
01651c2f14 | ||
|
|
f647c99f0a | ||
|
|
1e4e30f9a2 | ||
|
|
139a6d9f9c | ||
|
|
742ad40cec | ||
|
|
d161c0a805 | ||
|
|
9b6bedc109 | ||
|
|
887c2a7386 | ||
|
|
86561ea4e6 | ||
|
|
760706b92b | ||
|
|
92ffaf51d5 | ||
|
|
57e56e8175 | ||
|
|
8a6f8eddde | ||
|
|
2d90a5ba61 | ||
|
|
7c78a4d0d4 | ||
|
|
d3fe28ccd0 | ||
|
|
aac960738a | ||
|
|
d3e0241469 | ||
|
|
22e6d6a6d2 | ||
|
|
1a1d339466 | ||
|
|
3ac0f9fc9a | ||
|
|
e71c772d12 | ||
|
|
00b883302c | ||
|
|
e33d5e7bb1 | ||
|
|
7217ae2671 | ||
|
|
994651f5f9 | ||
|
|
f23fd9c145 | ||
|
|
b12a61d7c6 | ||
|
|
f40e975f3f | ||
|
|
017cc60cf3 | ||
|
|
b0e883b4dc | ||
|
|
9cbc399916 | ||
|
|
ecf1fa5827 | ||
|
|
cf707bc9f7 | ||
|
|
b9cae83735 | ||
|
|
a622002aed | ||
|
|
f5b00d332a | ||
|
|
188230ed62 | ||
|
|
a5c102546b | ||
|
|
ee785cea3a | ||
|
|
e6b4020059 | ||
|
|
aa50560d83 | ||
|
|
1f48f2a157 | ||
|
|
4c213db337 | ||
|
|
7327d9fc5f | ||
|
|
c636a24ab6 | ||
|
|
064d1cf34a | ||
|
|
35ebcd3c55 | ||
|
|
1c8c0bb99e | ||
|
|
d6d06c6ecc | ||
|
|
bd8054ef05 | ||
|
|
725a0679b2 | ||
|
|
c7e6ff57f6 | ||
|
|
ea4f9ef2c6 | ||
|
|
bbc2a37ab8 | ||
|
|
d23d35d15a | ||
|
|
eef19d1a04 | ||
|
|
92ec06b65c | ||
|
|
e2d954d1e7 | ||
|
|
1d9e1aaf2d | ||
|
|
a92c60c8cc | ||
|
|
1ecf70469d | ||
|
|
73ee739d02 | ||
|
|
fadd204d35 | ||
|
|
dd653e305d | ||
|
|
13a7fc0d07 | ||
|
|
4f9905e4d3 | ||
|
|
42979fa4ff | ||
|
|
db8498e15c | ||
|
|
1b94dd8f40 | ||
|
|
181b8454b1 | ||
|
|
01ac4e13d3 | ||
|
|
bf916998f2 | ||
|
|
7ccf5eebc0 | ||
|
|
fec4d82416 | ||
|
|
6d2cc9121a | ||
|
|
853784bc3f | ||
|
|
612ab8f7bd | ||
|
|
29d9a13ffb | ||
|
|
4c2ff9ca34 | ||
|
|
63dff641cf | ||
|
|
f918eaa38c | ||
|
|
49f47947c5 | ||
|
|
bde2c2905b | ||
|
|
781cb6db90 | ||
|
|
c4c17f4f4f | ||
|
|
6aa47d0ebf | ||
|
|
81c8a0732d | ||
|
|
dfbee7f109 | ||
|
|
2714c5d6f2 | ||
|
|
2402eb5a99 | ||
|
|
d957c00dca | ||
|
|
0845e3efae | ||
|
|
3806959a6d | ||
|
|
0b18dbc001 | ||
|
|
f788099ab7 | ||
|
|
e52a41c7be | ||
|
|
45efe53fd2 | ||
|
|
7610b39759 | ||
|
|
94a04746c2 | ||
|
|
b6a74e8abe | ||
|
|
58ccca7f75 | ||
|
|
e97536deb5 | ||
|
|
6851ef63b7 | ||
|
|
e559120849 | ||
|
|
c9cf3bb0c5 | ||
|
|
b1a1e1440b | ||
|
|
89789f974b | ||
|
|
e4e3cb9125 | ||
|
|
d94efdaa96 | ||
|
|
507c52b220 | ||
|
|
330a594d4b | ||
|
|
13b86c3220 | ||
|
|
ce88118f88 | ||
|
|
e6e5795dab | ||
|
|
b12825dee9 | ||
|
|
9bd86524e2 | ||
|
|
609ba0776b | ||
|
|
31f223fc9e | ||
|
|
8b569f5573 | ||
|
|
0ea0bd7d2d | ||
|
|
83ba002377 | ||
|
|
99a02b92d7 | ||
|
|
8fd061c819 | ||
|
|
9bc9c80617 | ||
|
|
3c2848d785 | ||
|
|
c022e0f61b | ||
|
|
49711c27aa | ||
|
|
47d9b441d4 | ||
|
|
d9b99c2d6f | ||
|
|
b06a057dd4 | ||
|
|
a5ea866492 | ||
|
|
2eb3bdb7a3 | ||
|
|
19c9ec1544 | ||
|
|
3ead8e3d11 | ||
|
|
6d6208a7fa | ||
|
|
15707df9bc | ||
|
|
a0b2f21987 | ||
|
|
ea47c6c9f3 | ||
|
|
76c780f3a9 | ||
|
|
556dfa96c5 | ||
|
|
ea6b0b9e56 | ||
|
|
547c811365 | ||
|
|
d26a0ceb1a | ||
|
|
9ce9d5913b | ||
|
|
83e53e59de | ||
|
|
30dec0b6a0 | ||
|
|
fa87fc1234 | ||
|
|
3f52012b40 | ||
|
|
b0091b516c | ||
|
|
1f0e950538 | ||
|
|
a42b28ff58 | ||
|
|
fbeace0f81 | ||
|
|
7a99d421c9 | ||
|
|
5724abb1ed | ||
|
|
0898f44329 | ||
|
|
24a6ed9201 | ||
|
|
3ee0f9c321 | ||
|
|
f9b2f3f53e | ||
|
|
ed7f3299fd | ||
|
|
562937ce28 | ||
|
|
abb04d53f4 | ||
|
|
083c2fa33f | ||
|
|
eae015d0ee | ||
|
|
e46589f784 | ||
|
|
0b5cb01d2f | ||
|
|
0c788b272f | ||
|
|
9aa593096e | ||
|
|
cef5a9d791 | ||
|
|
480d599895 | ||
|
|
813a536d0f | ||
|
|
33ac4ccc76 | ||
|
|
f409f18c0f | ||
|
|
658bd6a67d | ||
|
|
d284e50900 | ||
|
|
459e68f93b | ||
|
|
5bdd8f8640 | ||
|
|
23c85e45b7 | ||
|
|
e3aea2ee0c | ||
|
|
33c1227063 | ||
|
|
0fdb244c6d | ||
|
|
fed91d4a82 | ||
|
|
7f80adf253 | ||
|
|
c24c9e602c | ||
|
|
d8cfaf830f | ||
|
|
a7c4734802 | ||
|
|
8e14fbdc0e | ||
|
|
5b5b7d100d | ||
|
|
431525248b | ||
|
|
248d304421 | ||
|
|
4ff6c8ad51 | ||
|
|
e3075c6cbc | ||
|
|
be7d5de803 | ||
|
|
bf961b2c2a | ||
|
|
c002957436 | ||
|
|
fddf68752e | ||
|
|
55c84b449e | ||
|
|
bcf765dcf3 | ||
|
|
9424d2be52 | ||
|
|
c9767eaae4 | ||
|
|
52f253cfc8 | ||
|
|
f9acc6517a | ||
|
|
75bb7f7355 | ||
|
|
0e591c19ca | ||
|
|
c9d8f02c8e | ||
|
|
0640447cb3 | ||
|
|
d4eed6320c | ||
|
|
237cdbb2fc | ||
|
|
75bdef3e45 | ||
|
|
4eee8efbae | ||
|
|
043584fc6c | ||
|
|
8e5f7ea1d1 | ||
|
|
0a779234d2 | ||
|
|
de204315c6 | ||
|
|
37d795f9bc | ||
|
|
e3ff7dfab3 | ||
|
|
18b46dbb62 | ||
|
|
88b3ce1e7d | ||
|
|
fd857723bd | ||
|
|
4c96ea3517 | ||
|
|
e3d9944ed0 | ||
|
|
d3d258ba5b | ||
|
|
e1fd23515a | ||
|
|
33f553da2c | ||
|
|
331320b80b | ||
|
|
2e578d1f64 | ||
|
|
cfb998a906 | ||
|
|
2af1bffce1 | ||
|
|
738e33cd7f | ||
|
|
0febbe14de | ||
|
|
3b45fd540f | ||
|
|
4c758f484e | ||
|
|
0a207cc1f1 | ||
|
|
6102e015c3 | ||
|
|
20700b9e67 | ||
|
|
780f01a993 | ||
|
|
3d4afaaa5d | ||
|
|
870def7781 | ||
|
|
5ab16ba05d | ||
|
|
f1b8acc7b5 | ||
|
|
dd499fdee2 | ||
|
|
2fb27e9598 | ||
|
|
1dcaad3f8e | ||
|
|
6fe2c0c425 | ||
|
|
58d3bf0352 | ||
|
|
f271ce3b03 | ||
|
|
0a9b79096b | ||
|
|
12b8de2861 | ||
|
|
de16bd5883 | ||
|
|
93572503dd | ||
|
|
23d90ff554 | ||
|
|
ffa032b146 | ||
|
|
654b347d58 | ||
|
|
868c19523d | ||
|
|
252b153e86 | ||
|
|
9220805ebf | ||
|
|
324d956969 | ||
|
|
32525e5797 | ||
|
|
76c5058590 | ||
|
|
c149e9594d | ||
|
|
023e79f085 | ||
|
|
5eca790f0a | ||
|
|
7fa746f7c8 | ||
|
|
37843c4706 | ||
|
|
f60002cd14 | ||
|
|
c031dd3b10 | ||
|
|
4bb397d6e5 | ||
|
|
118e64c400 | ||
|
|
62c4231389 | ||
|
|
741eea6c73 | ||
|
|
4ca56fea73 | ||
|
|
b63c215ac9 | ||
|
|
a99bc749cb | ||
|
|
63a6f74321 | ||
|
|
b18fb3b74d | ||
|
|
b394c5a833 | ||
|
|
910464838a | ||
|
|
f39ed9ee25 | ||
|
|
14bac3b37a | ||
|
|
e9de762c45 | ||
|
|
4ea5b1d20b | ||
|
|
2aa83f71cc | ||
|
|
4bc42dfe73 | ||
|
|
ddf7a5b5f6 | ||
|
|
f6b0e9d59b | ||
|
|
fbc70acf2d | ||
|
|
5720d80e67 | ||
|
|
08656fec3f | ||
|
|
0751a8f0a1 | ||
|
|
b189a7a9c0 | ||
|
|
88348f8c85 | ||
|
|
d4aced0b21 | ||
|
|
2b7ef84999 | ||
|
|
0d18bee5f3 | ||
|
|
6bcf1e5790 | ||
|
|
02d18739d6 | ||
|
|
a30ccf5583 | ||
|
|
7c08596f40 | ||
|
|
02ea1c044c | ||
|
|
ced25b13a4 | ||
|
|
597c4bca44 | ||
|
|
07ea77092d | ||
|
|
5613670284 | ||
|
|
59fe162fe5 | ||
|
|
eecc70cf96 | ||
|
|
431706a330 | ||
|
|
cf7532a1d6 | ||
|
|
eaa87d8b5b | ||
|
|
9c4fea0d1c | ||
|
|
69f231639d | ||
|
|
8a98319d58 | ||
|
|
7e16bb70b1 | ||
|
|
774d877518 | ||
|
|
029dd9bb77 | ||
|
|
645a32032a | ||
|
|
6cfdfa8636 | ||
|
|
4c37b3f818 | ||
|
|
c2e3735ffb | ||
|
|
24c909502d | ||
|
|
77f045ccdc | ||
|
|
36aeb76e5f | ||
|
|
300374d9a8 | ||
|
|
b6d4923fb0 | ||
|
|
4658413aea | ||
|
|
2221fe1132 | ||
|
|
07ac1ea11f | ||
|
|
f1d5e0421b | ||
|
|
8ac8f35db4 | ||
|
|
2d42e44128 | ||
|
|
f414b96c03 | ||
|
|
5af1ac1836 | ||
|
|
9afcad69d1 | ||
|
|
ee5805da65 | ||
|
|
e82227b698 | ||
|
|
bf82413930 | ||
|
|
58deb56ca1 | ||
|
|
4b90c16c15 | ||
|
|
4bd2bfef69 | ||
|
|
c4a2717796 | ||
|
|
ea32d3659c | ||
|
|
d786436367 | ||
|
|
1b7b3bd006 | ||
|
|
84a9d1821b | ||
|
|
f8c5781102 | ||
|
|
777f999db5 | ||
|
|
a276e32f51 | ||
|
|
80dc66474d | ||
|
|
0e32f3669e | ||
|
|
4cb8bc68ba | ||
|
|
65d56feeeb | ||
|
|
a4a466dd26 | ||
|
|
3323ba8f0d | ||
|
|
fb3bd7f583 | ||
|
|
1235527398 | ||
|
|
15e8c64633 | ||
|
|
b4d07a679a | ||
|
|
72296a4385 | ||
|
|
8c153e6427 | ||
|
|
97ec6b66d0 | ||
|
|
ef762b50a7 | ||
|
|
4b46fb97a8 | ||
|
|
e7c875bda8 | ||
|
|
b0305f8b7e | ||
|
|
404810aba8 | ||
|
|
fd93cfb229 | ||
|
|
6d37c780ed | ||
|
|
3ce19cdfb3 | ||
|
|
c4ed771b1f | ||
|
|
7ec2988c71 | ||
|
|
499a3324b1 | ||
|
|
cf1a728e21 | ||
|
|
a07e3ad0b5 | ||
|
|
faada22274 | ||
|
|
4c00e8f69a | ||
|
|
0ac7832631 | ||
|
|
7a8977d175 | ||
|
|
7dd0009c60 | ||
|
|
c7b896be20 | ||
|
|
97654abcaa | ||
|
|
7e99f8eec3 | ||
|
|
7938338441 | ||
|
|
fdb12c2ea3 | ||
|
|
4686b1361a | ||
|
|
d424c06a99 | ||
|
|
079a983672 | ||
|
|
ffa4af3be0 | ||
|
|
caf773d5a6 | ||
|
|
b80668577d | ||
|
|
0495462ad5 | ||
|
|
30d40aa15f | ||
|
|
bacf855ed8 | ||
|
|
33669c1390 | ||
|
|
3a3aa47d32 | ||
|
|
b6526e70d6 | ||
|
|
8af4fbb0f0 | ||
|
|
84d945f7da | ||
|
|
171d3e64a0 | ||
|
|
e1d7e0bece | ||
|
|
59ce7e4a8f | ||
|
|
9f6e8e466a | ||
|
|
9bc285b67e | ||
|
|
6ec7c79cf7 | ||
|
|
3dd6235041 | ||
|
|
3ce6c88952 | ||
|
|
688c56d79c | ||
|
|
aa7ea0637e | ||
|
|
b3aa6ba924 | ||
|
|
be61bebd92 | ||
|
|
6c74abe0ed | ||
|
|
83fe3ddaee | ||
|
|
a7b717162f | ||
|
|
7332a0fe8a | ||
|
|
4f23af6a15 | ||
|
|
30e65b2ba7 | ||
|
|
edaa7881bd | ||
|
|
ff542ff7d7 | ||
|
|
7203dcb145 | ||
|
|
4346b10363 | ||
|
|
d06a7ef606 | ||
|
|
8571e6814b | ||
|
|
1d628ef207 | ||
|
|
cff20b7a4c | ||
|
|
7a92c4bf95 | ||
|
|
8e76af2192 | ||
|
|
ddb56ac56a | ||
|
|
6c61658bba | ||
|
|
757022d229 | ||
|
|
b0e208a155 | ||
|
|
6de0ab3293 |
@@ -1,422 +0,0 @@
|
||||
version: 2
|
||||
|
||||
aliases:
|
||||
- &docker
|
||||
- image: circleci/openjdk:8-jdk-node-browsers
|
||||
|
||||
- &environment
|
||||
TZ: /usr/share/zoneinfo/America/Los_Angeles
|
||||
|
||||
- &restore_yarn_cache
|
||||
restore_cache:
|
||||
name: Restore node_modules cache
|
||||
keys:
|
||||
- v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
- v1-node-{{ arch }}-{{ .Branch }}-
|
||||
- v1-node-{{ arch }}-
|
||||
- &run_yarn
|
||||
run:
|
||||
name: Install Packages
|
||||
command: yarn --frozen-lockfile
|
||||
|
||||
- &attach_workspace
|
||||
at: build
|
||||
|
||||
- &process_artifacts
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: node ./scripts/rollup/consolidateBundleSizes.js
|
||||
- run: ./scripts/circleci/upload_build.sh
|
||||
- run: ./scripts/circleci/pack_and_store_artifact.sh
|
||||
- store_artifacts:
|
||||
path: ./node_modules.tgz
|
||||
- store_artifacts:
|
||||
path: ./build.tgz
|
||||
- store_artifacts:
|
||||
path: ./build/bundle-sizes.json
|
||||
- store_artifacts:
|
||||
# TODO: Update release script to use local file instead of pulling
|
||||
# from artifacts.
|
||||
path: ./scripts/error-codes/codes.json
|
||||
- persist_to_workspace:
|
||||
root: build
|
||||
paths:
|
||||
- bundle-sizes.json
|
||||
|
||||
jobs:
|
||||
setup:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- run:
|
||||
name: Nodejs Version
|
||||
command: node --version
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- save_cache:
|
||||
name: Save node_modules cache
|
||||
key: v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- ~/.cache/yarn
|
||||
|
||||
lint:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: node ./scripts/prettier/index
|
||||
- run: node ./scripts/tasks/eslint
|
||||
- run: ./scripts/circleci/check_license.sh
|
||||
- run: ./scripts/circleci/check_modules.sh
|
||||
- run: ./scripts/circleci/test_print_warnings.sh
|
||||
|
||||
flow:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: node ./scripts/tasks/flow-ci
|
||||
|
||||
test_source:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: yarn test --maxWorkers=2
|
||||
|
||||
test_source_experimental:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: experimental
|
||||
command: yarn test --maxWorkers=2
|
||||
|
||||
test_source_persistent:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: yarn test-persistent --maxWorkers=2
|
||||
|
||||
test_source_prod:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: yarn test-prod --maxWorkers=2
|
||||
|
||||
build:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
parallelism: 20
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: |
|
||||
./scripts/circleci/add_build_info_json.sh
|
||||
./scripts/circleci/update_package_versions.sh
|
||||
yarn build
|
||||
- run: echo "stable" >> build/RELEASE_CHANNEL
|
||||
- persist_to_workspace:
|
||||
root: build
|
||||
paths:
|
||||
- RELEASE_CHANNEL
|
||||
- facebook-www
|
||||
- node_modules
|
||||
- react-native
|
||||
- dist
|
||||
- sizes/*.json
|
||||
|
||||
build_experimental:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
parallelism: 20
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: experimental
|
||||
command: |
|
||||
./scripts/circleci/add_build_info_json.sh
|
||||
./scripts/circleci/update_package_versions.sh
|
||||
yarn build
|
||||
- run: echo "experimental" >> build/RELEASE_CHANNEL
|
||||
- persist_to_workspace:
|
||||
root: build
|
||||
paths:
|
||||
- RELEASE_CHANNEL
|
||||
- facebook-www
|
||||
- node_modules
|
||||
- react-native
|
||||
- dist
|
||||
- sizes/*.json
|
||||
|
||||
# These jobs are named differently so we can distinguish the stable and
|
||||
# and experimental artifacts
|
||||
process_artifacts: *process_artifacts
|
||||
process_artifacts_experimental: *process_artifacts
|
||||
|
||||
sizebot:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
# This runs in the process_artifacts job, too, but it's faster to run
|
||||
# this step in both jobs instead of running the jobs sequentially
|
||||
- run: node ./scripts/rollup/consolidateBundleSizes.js
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: node ./scripts/tasks/danger
|
||||
|
||||
sizebot_experimental:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
# This runs in the process_artifacts job, too, but it's faster to run
|
||||
# this step in both jobs instead of running the jobs sequentially
|
||||
- run: node ./scripts/rollup/consolidateBundleSizes.js
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: experimental
|
||||
command: node ./scripts/tasks/danger
|
||||
|
||||
lint_build:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run: yarn lint-build
|
||||
- run: scripts/circleci/check_minified_errors.sh
|
||||
|
||||
test_build:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: yarn test-build --maxWorkers=2
|
||||
|
||||
test_build_experimental:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: experimental
|
||||
command: yarn test-build --maxWorkers=2
|
||||
|
||||
test_build_devtools:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: yarn test-build --maxWorkers=2
|
||||
|
||||
test_dom_fixtures:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- run:
|
||||
name: Run DOM fixture tests
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: |
|
||||
cd fixtures/dom
|
||||
yarn --frozen-lockfile
|
||||
yarn prestart
|
||||
yarn test --maxWorkers=2
|
||||
|
||||
test_fuzz:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
name: Run fuzz tests
|
||||
command: |
|
||||
FUZZ_TEST_SEED=$RANDOM yarn test fuzz --maxWorkers=2
|
||||
FUZZ_TEST_SEED=$RANDOM yarn test-prod fuzz --maxWorkers=2
|
||||
|
||||
test_build_prod:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: stable
|
||||
command: yarn test-build-prod --maxWorkers=2
|
||||
|
||||
test_build_prod_experimental:
|
||||
docker: *docker
|
||||
environment: *environment
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace: *attach_workspace
|
||||
- *restore_yarn_cache
|
||||
- *run_yarn
|
||||
- run:
|
||||
environment:
|
||||
RELEASE_CHANNEL: experimental
|
||||
command: yarn test-build-prod --maxWorkers=2
|
||||
|
||||
workflows:
|
||||
version: 2
|
||||
stable:
|
||||
jobs:
|
||||
- setup
|
||||
- lint:
|
||||
requires:
|
||||
- setup
|
||||
- flow:
|
||||
requires:
|
||||
- setup
|
||||
- test_source:
|
||||
requires:
|
||||
- setup
|
||||
- test_source_prod:
|
||||
requires:
|
||||
- setup
|
||||
- test_source_persistent:
|
||||
requires:
|
||||
- setup
|
||||
- build:
|
||||
requires:
|
||||
- setup
|
||||
- process_artifacts:
|
||||
requires:
|
||||
- build
|
||||
- sizebot:
|
||||
requires:
|
||||
- build
|
||||
- lint_build:
|
||||
requires:
|
||||
- build
|
||||
- test_build:
|
||||
requires:
|
||||
- build
|
||||
- test_build_prod:
|
||||
requires:
|
||||
- build
|
||||
- test_build_devtools:
|
||||
requires:
|
||||
- build
|
||||
- test_dom_fixtures:
|
||||
requires:
|
||||
- build
|
||||
|
||||
experimental:
|
||||
jobs:
|
||||
- setup
|
||||
- test_source_experimental:
|
||||
requires:
|
||||
- setup
|
||||
- build_experimental:
|
||||
requires:
|
||||
- setup
|
||||
- process_artifacts_experimental:
|
||||
requires:
|
||||
- build_experimental
|
||||
- sizebot_experimental:
|
||||
requires:
|
||||
- build_experimental
|
||||
- test_build_experimental:
|
||||
requires:
|
||||
- build_experimental
|
||||
- test_build_prod_experimental:
|
||||
requires:
|
||||
- build_experimental
|
||||
- lint_build:
|
||||
requires:
|
||||
- build_experimental
|
||||
|
||||
fuzz_tests:
|
||||
triggers:
|
||||
- schedule:
|
||||
# Fuzz tests run hourly
|
||||
cron: "0 * * * *"
|
||||
filters:
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
jobs:
|
||||
- setup
|
||||
- test_fuzz:
|
||||
requires:
|
||||
- setup
|
||||
@@ -1,18 +0,0 @@
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
max_line_length = 80
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = 0
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[COMMIT_EDITMSG]
|
||||
max_line_length = 0
|
||||
@@ -1,21 +0,0 @@
|
||||
# Third party
|
||||
**/node_modules
|
||||
|
||||
# Not written by hand
|
||||
packages/react-art/npm/lib
|
||||
|
||||
# Build products
|
||||
build/
|
||||
coverage/
|
||||
fixtures/
|
||||
scripts/bench/benchmarks/**/*.js
|
||||
|
||||
# React repository clone
|
||||
scripts/bench/remote-repo/
|
||||
|
||||
packages/react-devtools-core/dist
|
||||
packages/react-devtools-extensions/chrome/build
|
||||
packages/react-devtools-extensions/firefox/build
|
||||
packages/react-devtools-extensions/shared/build
|
||||
packages/react-devtools-inline/dist
|
||||
packages/react-devtools-shell/dist
|
||||
155
.eslintrc.js
155
.eslintrc.js
@@ -1,155 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const {
|
||||
es5Paths,
|
||||
esNextPaths,
|
||||
} = require('./scripts/shared/pathsByLanguageVersion');
|
||||
|
||||
const OFF = 0;
|
||||
const ERROR = 2;
|
||||
|
||||
module.exports = {
|
||||
extends: 'fbjs',
|
||||
|
||||
// Stop ESLint from looking for a configuration file in parent folders
|
||||
root: true,
|
||||
|
||||
plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
|
||||
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
ecmaVersion: 8,
|
||||
sourceType: 'script',
|
||||
ecmaFeatures: {
|
||||
experimentalObjectRestSpread: true,
|
||||
},
|
||||
},
|
||||
|
||||
// We're stricter than the default config, mostly. We'll override a few rules
|
||||
// and then enable some React specific ones.
|
||||
rules: {
|
||||
'accessor-pairs': OFF,
|
||||
'brace-style': [ERROR, '1tbs'],
|
||||
'comma-dangle': [ERROR, 'always-multiline'],
|
||||
'consistent-return': OFF,
|
||||
'dot-location': [ERROR, 'property'],
|
||||
'dot-notation': ERROR,
|
||||
'eol-last': ERROR,
|
||||
eqeqeq: [ERROR, 'allow-null'],
|
||||
indent: OFF,
|
||||
'jsx-quotes': [ERROR, 'prefer-double'],
|
||||
'keyword-spacing': [ERROR, {after: true, before: true}],
|
||||
'no-bitwise': OFF,
|
||||
'no-inner-declarations': [ERROR, 'functions'],
|
||||
'no-multi-spaces': ERROR,
|
||||
'no-restricted-syntax': [ERROR, 'WithStatement'],
|
||||
'no-shadow': ERROR,
|
||||
'no-unused-expressions': ERROR,
|
||||
'no-unused-vars': [ERROR, {args: 'none'}],
|
||||
'no-use-before-define': OFF,
|
||||
'no-useless-concat': OFF,
|
||||
quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
|
||||
'space-before-blocks': ERROR,
|
||||
'space-before-function-paren': OFF,
|
||||
'valid-typeof': [ERROR, {requireStringLiterals: true}],
|
||||
|
||||
// We apply these settings to files that should run on Node.
|
||||
// They can't use JSX or ES6 modules, and must be in strict mode.
|
||||
// They can, however, use other ES6 features.
|
||||
// (Note these rules are overridden later for source files.)
|
||||
'no-var': ERROR,
|
||||
strict: ERROR,
|
||||
|
||||
// Enforced by Prettier
|
||||
// TODO: Prettier doesn't handle long strings or long comments. Not a big
|
||||
// deal. But I turned it off because loading the plugin causes some obscure
|
||||
// syntax error and it didn't seem worth investigating.
|
||||
'max-len': OFF,
|
||||
|
||||
// React & JSX
|
||||
// Our transforms set this automatically
|
||||
'react/jsx-boolean-value': [ERROR, 'always'],
|
||||
'react/jsx-no-undef': ERROR,
|
||||
// We don't care to do this
|
||||
'react/jsx-sort-prop-types': OFF,
|
||||
'react/jsx-space-before-closing': ERROR,
|
||||
'react/jsx-uses-react': ERROR,
|
||||
'react/no-is-mounted': OFF,
|
||||
// This isn't useful in our test code
|
||||
'react/react-in-jsx-scope': ERROR,
|
||||
'react/self-closing-comp': ERROR,
|
||||
// We don't care to do this
|
||||
'react/jsx-wrap-multilines': [
|
||||
ERROR,
|
||||
{declaration: false, assignment: false},
|
||||
],
|
||||
|
||||
// Prevent for...of loops because they require a Symbol polyfill.
|
||||
// You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
|
||||
'no-for-of-loops/no-for-of-loops': ERROR,
|
||||
|
||||
// CUSTOM RULES
|
||||
// the second argument of warning/invariant should be a literal string
|
||||
'react-internal/no-primitive-constructors': ERROR,
|
||||
'react-internal/no-to-warn-dev-within-to-throw': ERROR,
|
||||
'react-internal/warning-and-invariant-args': ERROR,
|
||||
},
|
||||
|
||||
overrides: [
|
||||
{
|
||||
// We apply these settings to files that we ship through npm.
|
||||
// They must be ES5.
|
||||
files: es5Paths,
|
||||
parser: 'espree',
|
||||
parserOptions: {
|
||||
ecmaVersion: 5,
|
||||
sourceType: 'script',
|
||||
},
|
||||
rules: {
|
||||
'no-var': OFF,
|
||||
strict: ERROR,
|
||||
},
|
||||
},
|
||||
{
|
||||
// We apply these settings to the source files that get compiled.
|
||||
// They can use all features including JSX (but shouldn't use `var`).
|
||||
files: esNextPaths,
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
ecmaVersion: 8,
|
||||
sourceType: 'module',
|
||||
},
|
||||
rules: {
|
||||
'no-var': ERROR,
|
||||
strict: OFF,
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/__tests__/*.js'],
|
||||
rules: {
|
||||
// https://github.com/jest-community/eslint-plugin-jest
|
||||
'jest/no-focused-tests': ERROR,
|
||||
'jest/valid-expect': ERROR,
|
||||
'jest/valid-expect-in-promise': ERROR,
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['packages/react-native-renderer/**/*.js'],
|
||||
globals: {
|
||||
nativeFabricUIManager: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
globals: {
|
||||
SharedArrayBuffer: true,
|
||||
|
||||
spyOnDev: true,
|
||||
spyOnDevAndProd: true,
|
||||
spyOnProd: true,
|
||||
__PROFILE__: true,
|
||||
__UMD__: true,
|
||||
__EXPERIMENTAL__: true,
|
||||
trustedTypes: true,
|
||||
},
|
||||
};
|
||||
1
.gitattributes
vendored
1
.gitattributes
vendored
@@ -1 +0,0 @@
|
||||
* text=auto
|
||||
14
.github/ISSUE_TEMPLATE.md
vendored
14
.github/ISSUE_TEMPLATE.md
vendored
@@ -1,14 +0,0 @@
|
||||
<!--
|
||||
Note: if the issue is about documentation or the website, please file it at:
|
||||
https://github.com/reactjs/reactjs.org/issues/new
|
||||
-->
|
||||
|
||||
**Do you want to request a *feature* or report a *bug*?**
|
||||
|
||||
**What is the current behavior?**
|
||||
|
||||
**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:**
|
||||
|
||||
**What is the expected behavior?**
|
||||
|
||||
**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**
|
||||
14
.github/PULL_REQUEST_TEMPLATE.md
vendored
14
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -1,14 +0,0 @@
|
||||
**Before submitting a pull request,** please make sure the following is done:
|
||||
|
||||
1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
|
||||
2. Run `yarn` in the repository root.
|
||||
3. If you've fixed a bug or added code that should be tested, add tests!
|
||||
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
|
||||
5. Run `yarn test-prod` to test in the production environment. It supports the same options as `yarn test`.
|
||||
6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
|
||||
7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
|
||||
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
|
||||
9. Run the [Flow](https://flowtype.org/) typechecks (`yarn flow`).
|
||||
10. If you haven't already, complete the CLA.
|
||||
|
||||
**Learn more about contributing:** https://reactjs.org/docs/how-to-contribute.html
|
||||
35
.gitignore
vendored
35
.gitignore
vendored
@@ -1,35 +0,0 @@
|
||||
.DS_STORE
|
||||
node_modules
|
||||
scripts/flow/*/.flowconfig
|
||||
*~
|
||||
*.pyc
|
||||
.grunt
|
||||
_SpecRunner.html
|
||||
__benchmarks__
|
||||
build/
|
||||
remote-repo/
|
||||
coverage/
|
||||
.module-cache
|
||||
fixtures/dom/public/react-dom.js
|
||||
fixtures/dom/public/react.js
|
||||
test/the-files-to-test.generated.js
|
||||
*.log*
|
||||
chrome-user-data
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
.idea
|
||||
*.iml
|
||||
.vscode
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
packages/react-devtools-core/dist
|
||||
packages/react-devtools-extensions/chrome/build
|
||||
packages/react-devtools-extensions/chrome/*.crx
|
||||
packages/react-devtools-extensions/chrome/*.pem
|
||||
packages/react-devtools-extensions/firefox/build
|
||||
packages/react-devtools-extensions/firefox/*.xpi
|
||||
packages/react-devtools-extensions/firefox/*.pem
|
||||
packages/react-devtools-extensions/shared/build
|
||||
packages/react-devtools-inline/dist
|
||||
packages/react-devtools-shell/dist
|
||||
164
.mailmap
164
.mailmap
@@ -1,164 +0,0 @@
|
||||
Adam Timberlake <adam.timberlake@gmail.com>
|
||||
Alex Mykyta <dancingwithcows@gmail.com>
|
||||
Alex Pien <alexpien@gmail.com>
|
||||
Alex Pien <alexpien@gmail.com> <pien@pien-mbp.dhcp.thefacebook.com>
|
||||
Alex Pien <alexpien@gmail.com> <pien@pien-mbp.local>
|
||||
Andreas Savvides <asavvides@twitter.com> <AnSavvides@users.noreply.github.com>
|
||||
Andreas Savvides <asavvides@twitter.com> <andreas@nibbli.com>
|
||||
Andreas Svensson <andreas@syranide.com>
|
||||
Andres Suarez <zertosh@gmail.com>
|
||||
Andrew Kulakov <avk@8xx8.ru>
|
||||
Andrew Sokolov <asokolov@atlassian.com>
|
||||
Anto Aravinth <anto.aravinth.cse@gmail.com>
|
||||
Baraa Hamodi <bhamodi@uwaterloo.ca> <baraa@optimizely.com>
|
||||
Ben Halpern <bendhalpern@gmail.com>
|
||||
Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
|
||||
Benjamin Woodruff <github@benjam.info> <bgw@fb.com>
|
||||
Bill Fisher <fisherwebdev@gmail.com>
|
||||
Blaine Kasten <blainekasten@gmail.com>
|
||||
Brandon Tilley <brandon@brandontilley.com>
|
||||
Changsoon Bok <winmain@gmail.com>
|
||||
Cheng Lou <chenglou92@gmail.com> <chenglou@fb.com>
|
||||
Christian Oliff <christianoliff@yahoo.com>
|
||||
Christoph Pojer <christoph.pojer@gmail.com>
|
||||
Christoph Pojer <christoph.pojer@gmail.com> <cpojer@fb.com>
|
||||
Connor McSheffrey <c@conr.me> <connor.mcsheffrey@gmail.com>
|
||||
Conor Hastings <hastings.conorm@gmail.com> <conor@socialtables.com>
|
||||
Dan Schafer <dschafer@fb.com>
|
||||
Daniel Gasienica <daniel@gasienica.ch> <daniel@fiftythree.com>
|
||||
Daniel Gasienica <daniel@gasienica.ch> <dgasienica@zynga.com>
|
||||
Daniel Hejl <daniel.hejl@hotmail.com>
|
||||
Daniel Lo Nigro <daniel@dan.cx> <danlo@fb.com>
|
||||
Dave Galbraith <dave@jut.io>
|
||||
Dennis Johnson <songawee@gmail.com>
|
||||
Dmitry Blues <dmitri.blyus@gmail.com>
|
||||
Dongsheng Liu <bellanchor@gmail.com>
|
||||
Erik Harper <eharper@mixpo.com>
|
||||
Evan Coonrod <evan@paloalto.com>
|
||||
Fabio M. Costa <fabiomcosta@gmail.com> <fabs@fb.com>
|
||||
Felix Kling <felix.kling@gmx.net> <fkling@fb.com>
|
||||
François-Xavier Bois <fxbois@gmail.com>
|
||||
Fyodor Ivanishchev <cbrwizard@gmail.com>
|
||||
Gabe Levi <gabelevi@gmail.com> <glevi@fb.com>
|
||||
Geert Pasteels <geert.pasteels@gmail.com>
|
||||
George A Sisco III <george.sisco@gmail.com>
|
||||
Georgii Dolzhykov <thorn.mailbox@gmail.com>
|
||||
Harry Hull <harry.hull1@gmail.com>
|
||||
Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
|
||||
Hyeock Kwon <doublus@gmail.com>
|
||||
Ian Obermiller <ian@obermillers.com> <iano@fb.com>
|
||||
Ilia Pavlenkov <dortonway@gmail.com>
|
||||
Ilyá Belsky <gelias.gbelsky@gmail.com>
|
||||
Ingvar Stepanyan <me@rreverser.com> <rreverser@ubuntu.rreverser.a4.internal.cloudapp.net>
|
||||
Irae Carvalho <irae@irae.pro.br>
|
||||
Ivan Vergiliev <ivan.vergiliev@gmail.com>
|
||||
JJ Weber <jj.weber@gmail.com>
|
||||
Jae Hun Ro <jhr24@duke.edu>
|
||||
Jaime Mingo <j.mingov@3boll.com>
|
||||
James Brantly <james@jbrantly.com>
|
||||
Jan Hancic <jan.hancic@gmail.com> <jan.hancic@caplin.com>
|
||||
Jan Kassens <jan@kassens.net> <jkassens@fb.com>
|
||||
Jason Bonta <jbonta@gmail.com> <jasonbonta@fb.com>
|
||||
Jason Quense <monastic.panic@gmail.com>
|
||||
Jason Trill <jason@jasontrill.com>
|
||||
Jeff Chan <jefftchan@gmail.com> <jeff@quizlet.com>
|
||||
Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
|
||||
Jeff Morrison <jeff@anafx.com> <jeffmo@fb.com>
|
||||
Jeff Morrison <jeff@anafx.com> <lbljeffmo@gmail.com>
|
||||
Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
|
||||
Jim Sproch <jsproch@fb.com>
|
||||
Jim Sproch <jsproch@fb.com> <jsfb@github>
|
||||
Jim Sproch <jsproch@fb.com> <none@no-reply.com>
|
||||
Jinwoo Oh <arkist@gmail.com>
|
||||
Jinxiu Lee <lee.jinxiu@gmail.com>
|
||||
Jiyeon Seo <zzzeons@gmail.com>
|
||||
Jon Chester <jonchester@fb.com>
|
||||
Jon Madison <jon@tfftech.com>
|
||||
Jonathan Hsu <jhiswin@gmail.com>
|
||||
Jonathan Persson <persson.jonathan@gmail.com> <jonathan.persson@creuna.se>
|
||||
Jordan Walke <jordojw@gmail.com>
|
||||
Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
|
||||
Joseph Savona <joesavona@fb.com> <josephsavona@users.noreply.github.com>
|
||||
Josh Duck <josh@fb.com> <github@joshduck.com>
|
||||
Juan Serrano <germ13@users.noreply.github.com>
|
||||
Jun Wu <quark@lihdd.net>
|
||||
Justin Robison <jrobison151@gmail.com>
|
||||
Keito Uchiyama <projects@keito.me> <keito@fb.com>
|
||||
Kevin Coughlin <kevintcoughlin@gmail.com> <kevincoughlin@tumblr.com>
|
||||
Krystian Karczewski <karcz.k@gmail.com>
|
||||
Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
|
||||
Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
|
||||
Marcin K. <katzoo@github.mail>
|
||||
Mark Anderson <undernewmanagement@users.noreply.github.com>
|
||||
Mark Funk <mfunk86@gmail.com> <mark@boomtownroi.com>
|
||||
Martin Andert <mandert@gmail.com>
|
||||
Mathieu M-Gosselin <mathieumg@gmail.com> <mathieumg@atx33.com>
|
||||
Matsunoki <himkt@klis.tsukuba.ac.jp>
|
||||
Matt Brookes <matt@brookes.net>
|
||||
Matt Dunn-Rankin <mdunnrankin@gmail.com> <matchu1993@gmail.com>
|
||||
Matt Zabriskie <mzabriskie@gmail.com>
|
||||
Matthew Johnston <matthewjohnston4@outlook.com> <matthewjohnston4@users.noreply.github.com>
|
||||
Matthew Looi <looi.matthew@gmail.com>
|
||||
Mattijs Kneppers <mattijs@arttech.nl>
|
||||
Max Heiber <max.heiber@gmail.com>
|
||||
Max Stoiber <contact@mstoiber.com>
|
||||
Michal Srb <xixixao@seznam.cz> xixixao <xixixao@seznam.cz>
|
||||
Michelle Todd <himichelletodd@gmail.com> <michelle@khanacademy.org>
|
||||
Mihai Parparita <mihai.parparita@gmail.com> <mihai@persistent.info>
|
||||
Minwe LUO <minwe@yunshipei.com>
|
||||
Murray M. Moss <murray@mmoss.name> <MMoss@cainc.com>
|
||||
Murray M. Moss <murray@mmoss.name> <mmoss@users.noreply.github.com>
|
||||
Neri Marschik <marschik_neri@cyberagent.co.jp>
|
||||
Nick Gavalas <njg57@cornell.edu>
|
||||
Nick Thompson <ncthom91@gmail.com> <nickt@instagram.com>
|
||||
Patrick Stapleton <github@gdi2290.com>
|
||||
Paul O’Shannessy <paul@oshannessy.com> <poshannessy@fb.com>
|
||||
Paul Shen <paul@mnml0.com> <paulshen@fb.com>
|
||||
Pete Hunt <floydophone@gmail.com>
|
||||
Pete Hunt <floydophone@gmail.com> <pete.hunt@fb.com>
|
||||
Pete Hunt <floydophone@gmail.com> <pete@instagram.com>
|
||||
Pete Hunt <floydophone@gmail.com> <phunt@instagram.com>
|
||||
Petri Lievonen <plievone@cc.hut.fi>
|
||||
Petri Lievonen <plievone@cc.hut.fi> <petri.lievonen@tkk.fi>
|
||||
Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
|
||||
Pouja Nikray <poujanik@gmail.com>
|
||||
Rainer Oviir <roviir@gmail.com> <raineroviir@rainers-MacBook-Pro.local>
|
||||
Ray <ray@tomo.im>
|
||||
Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
|
||||
Richard Livesey <Livesey7@hotmail.co.uk>
|
||||
Rob Arnold <robarnold@cs.cmu.edu>
|
||||
Robert Binna <rbinna@gmail.com> <speedskater@users.noreply.github.com>
|
||||
Robin Frischmann <robin@rofrischmann.de>
|
||||
Sander Spies <sandermail@gmail.com>
|
||||
Scott Feeney <scott@oceanbase.org> <smf@fb.com>
|
||||
Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
|
||||
Sergey Rubanov <chi187@gmail.com>
|
||||
Shogun Sea <shogunsea08@gmail.com> <xxin@groupon.com>
|
||||
Soichiro Kawamura <mail@w-st.com>
|
||||
Sophie Alpert <git@sophiebits.com> <balpert@fb.com>
|
||||
Sophie Alpert <git@sophiebits.com> <ben@benalpert.com>
|
||||
Sophie Alpert <git@sophiebits.com> <sophiebits@fb.com>
|
||||
Sophie Alpert <git@sophiebits.com> <spicyjalapeno@gmail.com>
|
||||
Sota Ohara <ohrst.18@gmail.com>
|
||||
Steven Luscher <react@steveluscher.com> <github@steveluscher.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@fb.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@instagram.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@users.noreply.github.com>
|
||||
Stoyan Stefanov <ssttoo@ymail.com>
|
||||
Tengfei Guo <terryr3rd@yeah.net> <tfguo369@gmail.com>
|
||||
Thomas Aylott <oblivious@subtlegradient.com> <aylott@fb.com>
|
||||
Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
|
||||
Tomoya Suzuki <tmysz.dev@gmail.com>
|
||||
Vasiliy Loginevskiy <Yeti.or@gmail.com>
|
||||
Vasiliy Loginevskiy <Yeti.or@gmail.com> <yeti-or@yandex-team.ru>
|
||||
Vjeux <vjeuxx@gmail.com>
|
||||
Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>
|
||||
Volkan Unsal <spocksplanet@gmail.com>
|
||||
Wander Wang <wander.wang@ismole.com>
|
||||
Xavier Morel <xmo-odoo@users.noreply.github.com>
|
||||
YouBao Nong <noyobo@gmail.com> <nongyoubao@alibaba-inc.com>
|
||||
Yutaka Nakajima <nakazye@gmail.com>
|
||||
Zach Bruggeman <mail@bruggie.com> <zbruggeman@me.com>
|
||||
iawia002 <z2d@jifangcheng.com> <850127508@qq.com>
|
||||
元彦 <yuanyan@users.noreply.github.com>
|
||||
张敏 <cookfront@gmail.com>
|
||||
@@ -1,6 +0,0 @@
|
||||
packages/react-devtools-core/dist
|
||||
packages/react-devtools-extensions/chrome/build
|
||||
packages/react-devtools-extensions/firefox/build
|
||||
packages/react-devtools-extensions/shared/build
|
||||
packages/react-devtools-inline/dist
|
||||
packages/react-devtools-shell/dist
|
||||
@@ -1,21 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
|
||||
|
||||
module.exports = {
|
||||
bracketSpacing: false,
|
||||
singleQuote: true,
|
||||
jsxBracketSameLine: true,
|
||||
trailingComma: 'es5',
|
||||
printWidth: 80,
|
||||
parser: 'babylon',
|
||||
|
||||
overrides: [
|
||||
{
|
||||
files: esNextPaths,
|
||||
options: {
|
||||
trailingComma: 'all',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
1937
CHANGELOG.md
1937
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
@@ -1,76 +0,0 @@
|
||||
# Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as
|
||||
contributors and maintainers pledge to make participation in our project and
|
||||
our community a harassment-free experience for everyone, regardless of age, body
|
||||
size, disability, ethnicity, sex characteristics, gender identity and expression,
|
||||
level of experience, education, socio-economic status, nationality, personal
|
||||
appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment
|
||||
include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||
advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic
|
||||
address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable
|
||||
behavior and are expected to take appropriate and fair corrective action in
|
||||
response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or
|
||||
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||
permanently any contributor for other behaviors that they deem inappropriate,
|
||||
threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies within all project spaces, and it also applies when
|
||||
an individual is representing the project or its community in public spaces.
|
||||
Examples of representing a project or community include using an official
|
||||
project e-mail address, posting via an official social media account, or acting
|
||||
as an appointed representative at an online or offline event. Representation of
|
||||
a project may be further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported by contacting the project team at <opensource-conduct@fb.com>. All
|
||||
complaints will be reviewed and investigated and will result in a response that
|
||||
is deemed necessary and appropriate to the circumstances. The project team is
|
||||
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||
Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||
faith may face temporary or permanent repercussions as determined by other
|
||||
members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
||||
|
||||
[homepage]: https://www.contributor-covenant.org
|
||||
|
||||
For answers to common questions about this code of conduct, see
|
||||
https://www.contributor-covenant.org/faq
|
||||
@@ -1,5 +0,0 @@
|
||||
# Contributing to React
|
||||
|
||||
Want to contribute to React? There are a few things you need to know.
|
||||
|
||||
We wrote a **[contribution guide](https://reactjs.org/contributing/how-to-contribute.html)** to help you get started.
|
||||
21
LICENSE
21
LICENSE
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) Facebook, Inc. and its affiliates.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
75
README.md
75
README.md
@@ -1,75 +0,0 @@
|
||||
# [React](https://reactjs.org/) · [](https://github.com/facebook/react/blob/master/LICENSE) [](https://www.npmjs.com/package/react) [](https://circleci.com/gh/facebook/react) [](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
|
||||
|
||||
React is a JavaScript library for building user interfaces.
|
||||
|
||||
* **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
|
||||
* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
|
||||
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
|
||||
|
||||
[Learn how to use React in your own project](https://reactjs.org/docs/getting-started.html).
|
||||
|
||||
## Installation
|
||||
|
||||
React has been designed for gradual adoption from the start, and **you can use as little or as much React as you need**:
|
||||
|
||||
* Use [Online Playgrounds](https://reactjs.org/docs/getting-started.html#online-playgrounds) to get a taste of React.
|
||||
* [Add React to a Website](https://reactjs.org/docs/add-react-to-a-website.html) as a `<script>` tag in one minute.
|
||||
* [Create a New React App](https://reactjs.org/docs/create-a-new-react-app.html) if you're looking for a powerful JavaScript toolchain.
|
||||
|
||||
You can use React as a `<script>` tag from a [CDN](https://reactjs.org/docs/cdn-links.html), or as a `react` package on [npm](https://www.npmjs.com/).
|
||||
|
||||
## Documentation
|
||||
|
||||
You can find the React documentation [on the website](https://reactjs.org/docs).
|
||||
|
||||
Check out the [Getting Started](https://reactjs.org/docs/getting-started.html) page for a quick overview.
|
||||
|
||||
The documentation is divided into several sections:
|
||||
|
||||
* [Tutorial](https://reactjs.org/tutorial/tutorial.html)
|
||||
* [Main Concepts](https://reactjs.org/docs/hello-world.html)
|
||||
* [Advanced Guides](https://reactjs.org/docs/jsx-in-depth.html)
|
||||
* [API Reference](https://reactjs.org/docs/react-api.html)
|
||||
* [Where to Get Support](https://reactjs.org/community/support.html)
|
||||
* [Contributing Guide](https://reactjs.org/docs/how-to-contribute.html)
|
||||
|
||||
You can improve it by sending pull requests to [this repository](https://github.com/reactjs/reactjs.org).
|
||||
|
||||
## Examples
|
||||
|
||||
We have several examples [on the website](https://reactjs.org/). Here is the first one to get you started:
|
||||
|
||||
```jsx
|
||||
function HelloMessage({ name }) {
|
||||
return <div>Hello {name}</div>;
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<HelloMessage name="Taylor" />,
|
||||
document.getElementById('container')
|
||||
);
|
||||
```
|
||||
|
||||
This example will render "Hello Taylor" into a container on the page.
|
||||
|
||||
You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. If you're using React as a `<script>` tag, read [this section](https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx) on integrating JSX; otherwise, the [recommended JavaScript toolchains](https://reactjs.org/docs/create-a-new-react-app.html) handle it automatically.
|
||||
|
||||
## Contributing
|
||||
|
||||
The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.
|
||||
|
||||
### [Code of Conduct](https://code.fb.com/codeofconduct)
|
||||
|
||||
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.fb.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
|
||||
|
||||
### [Contributing Guide](https://reactjs.org/contributing/how-to-contribute.html)
|
||||
|
||||
Read our [contributing guide](https://reactjs.org/contributing/how-to-contribute.html) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.
|
||||
|
||||
### Good First Issues
|
||||
|
||||
To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/facebook/react/labels/good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started.
|
||||
|
||||
### License
|
||||
|
||||
React is [MIT licensed](./LICENSE).
|
||||
41
appveyor.yml
41
appveyor.yml
@@ -1,41 +0,0 @@
|
||||
image: Visual Studio 2017
|
||||
|
||||
# Fix line endings in Windows. (runs before repo cloning)
|
||||
init:
|
||||
- git config --global core.autocrlf input
|
||||
|
||||
environment:
|
||||
JAVA_HOME: C:\Program Files\Java\jdk1.8.0
|
||||
matrix:
|
||||
- nodejs_version: 10
|
||||
|
||||
# Finish on first failed build
|
||||
matrix:
|
||||
fast_finish: true
|
||||
|
||||
platform:
|
||||
- x64
|
||||
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
|
||||
# Disable Visual Studio build and deploy
|
||||
build: off
|
||||
deploy: off
|
||||
|
||||
install:
|
||||
- ps: Install-Product node $env:nodejs_version $env:platform
|
||||
- yarn install --frozen-lockfile
|
||||
|
||||
test_script:
|
||||
- node --version
|
||||
- yarn lint
|
||||
# - yarn flow-ci
|
||||
- yarn build
|
||||
- yarn test
|
||||
- yarn prettier
|
||||
|
||||
cache:
|
||||
- node_modules
|
||||
- "%LOCALAPPDATA%/Yarn"
|
||||
@@ -1,27 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
'@babel/plugin-syntax-jsx',
|
||||
'@babel/plugin-transform-react-jsx',
|
||||
'@babel/plugin-transform-flow-strip-types',
|
||||
['@babel/plugin-proposal-class-properties', {loose: true}],
|
||||
'syntax-trailing-function-commas',
|
||||
[
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
{loose: true, useBuiltIns: true},
|
||||
],
|
||||
['@babel/plugin-transform-template-literals', {loose: true}],
|
||||
'@babel/plugin-transform-literals',
|
||||
'@babel/plugin-transform-arrow-functions',
|
||||
'@babel/plugin-transform-block-scoped-functions',
|
||||
'@babel/plugin-transform-object-super',
|
||||
'@babel/plugin-transform-shorthand-properties',
|
||||
'@babel/plugin-transform-computed-properties',
|
||||
'@babel/plugin-transform-for-of',
|
||||
['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
|
||||
'@babel/plugin-transform-parameters',
|
||||
['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
|
||||
['@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}],
|
||||
],
|
||||
};
|
||||
295
dangerfile.js
295
dangerfile.js
@@ -1,295 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Hi, if this is your first time editing/reading a Dangerfile, here's a summary:
|
||||
// It's a JS runtime which helps you provide continuous feedback inside GitHub.
|
||||
//
|
||||
// You can see the docs here: http://danger.systems/js/
|
||||
//
|
||||
// If you want to test changes Danger, I'd recommend checking out an existing PR
|
||||
// and then running the `danger pr` command.
|
||||
//
|
||||
// You'll need a GitHub token, you can re-use this one:
|
||||
//
|
||||
// 0a7d5c3cad9a6dbec2d9 9a5222cf49062a4c1ef7
|
||||
//
|
||||
// (Just remove the space)
|
||||
//
|
||||
// So, for example:
|
||||
//
|
||||
// `DANGER_GITHUB_API_TOKEN=[ENV_ABOVE] yarn danger pr https://github.com/facebook/react/pull/11865
|
||||
|
||||
const {markdown, danger, warn} = require('danger');
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
const {generateResultsArray} = require('./scripts/rollup/stats');
|
||||
const {existsSync, readFileSync} = require('fs');
|
||||
const {exec} = require('child_process');
|
||||
|
||||
// This must match the name of the CI job that creates the build artifacts
|
||||
const RELEASE_CHANNEL =
|
||||
process.env.RELEASE_CHANNEL === 'experimental' ? 'experimental' : 'stable';
|
||||
const artifactsJobName =
|
||||
process.env.RELEASE_CHANNEL === 'experimental'
|
||||
? 'process_artifacts_experimental'
|
||||
: 'process_artifacts';
|
||||
|
||||
if (!existsSync('./build/bundle-sizes.json')) {
|
||||
// This indicates the build failed previously.
|
||||
// In that case, there's nothing for the Dangerfile to do.
|
||||
// Exit early to avoid leaving a redundant (and potentially confusing) PR comment.
|
||||
warn(
|
||||
'No bundle size information found. This indicates the build ' +
|
||||
'job failed.'
|
||||
);
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
const currentBuildResults = JSON.parse(
|
||||
readFileSync('./build/bundle-sizes.json')
|
||||
);
|
||||
|
||||
/**
|
||||
* Generates a Markdown table
|
||||
* @param {string[]} headers
|
||||
* @param {string[][]} body
|
||||
*/
|
||||
function generateMDTable(headers, body) {
|
||||
const tableHeaders = [
|
||||
headers.join(' | '),
|
||||
headers.map(() => ' --- ').join(' | '),
|
||||
];
|
||||
|
||||
const tablebody = body.map(r => r.join(' | '));
|
||||
return tableHeaders.join('\n') + '\n' + tablebody.join('\n');
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a user-readable string from a percentage change
|
||||
* @param {number} change
|
||||
* @param {boolean} includeEmoji
|
||||
*/
|
||||
function addPercent(change, includeEmoji) {
|
||||
if (!isFinite(change)) {
|
||||
// When a new package is created
|
||||
return 'n/a';
|
||||
}
|
||||
const formatted = (change * 100).toFixed(1);
|
||||
if (/^-|^0(?:\.0+)$/.test(formatted)) {
|
||||
return `${formatted}%`;
|
||||
} else {
|
||||
if (includeEmoji) {
|
||||
return `:small_red_triangle:+${formatted}%`;
|
||||
} else {
|
||||
return `+${formatted}%`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setBoldness(row, isBold) {
|
||||
if (isBold) {
|
||||
return row.map(element => `**${element}**`);
|
||||
} else {
|
||||
return row;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the commit that represents the merge between the current branch
|
||||
* and master.
|
||||
*/
|
||||
function git(args) {
|
||||
return new Promise(res => {
|
||||
exec('git ' + args, (err, stdout, stderr) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
} else {
|
||||
res(stdout.trim());
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
(async function() {
|
||||
// Use git locally to grab the commit which represents the place
|
||||
// where the branches differ
|
||||
const upstreamRepo = danger.github.pr.base.repo.full_name;
|
||||
if (upstreamRepo !== 'facebook/react') {
|
||||
// Exit unless we're running in the main repo
|
||||
return;
|
||||
}
|
||||
|
||||
markdown(`## Size changes (${RELEASE_CHANNEL})`);
|
||||
|
||||
const upstreamRef = danger.github.pr.base.ref;
|
||||
await git(`remote add upstream https://github.com/facebook/react.git`);
|
||||
await git('fetch upstream');
|
||||
const baseCommit = await git(`merge-base HEAD upstream/${upstreamRef}`);
|
||||
|
||||
let previousBuildResults = null;
|
||||
try {
|
||||
let baseCIBuildId = null;
|
||||
const statusesResponse = await fetch(
|
||||
`https://api.github.com/repos/facebook/react/commits/${baseCommit}/status`
|
||||
);
|
||||
const {statuses, state} = await statusesResponse.json();
|
||||
if (state === 'failure') {
|
||||
warn(`Base commit is broken: ${baseCommit}`);
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < statuses.length; i++) {
|
||||
const status = statuses[i];
|
||||
if (status.context === `ci/circleci: ${artifactsJobName}`) {
|
||||
if (status.state === 'success') {
|
||||
baseCIBuildId = /\/facebook\/react\/([0-9]+)/.exec(
|
||||
status.target_url
|
||||
)[1];
|
||||
break;
|
||||
}
|
||||
if (status.state === 'pending') {
|
||||
warn(`Build job for base commit is still pending: ${baseCommit}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (baseCIBuildId === null) {
|
||||
warn(`Could not find build artifacts for base commit: ${baseCommit}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const baseArtifactsInfoResponse = await fetch(
|
||||
`https://circleci.com/api/v1.1/project/github/facebook/react/${baseCIBuildId}/artifacts`
|
||||
);
|
||||
const baseArtifactsInfo = await baseArtifactsInfoResponse.json();
|
||||
|
||||
for (let i = 0; i < baseArtifactsInfo.length; i++) {
|
||||
const info = baseArtifactsInfo[i];
|
||||
if (info.path === 'home/circleci/project/build/bundle-sizes.json') {
|
||||
const resultsResponse = await fetch(info.url);
|
||||
previousBuildResults = await resultsResponse.json();
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
warn(`Failed to fetch build artifacts for base commit: ${baseCommit}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (previousBuildResults === null) {
|
||||
warn(`Could not find build artifacts for base commit: ${baseCommit}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Take the JSON of the build response and
|
||||
// make an array comparing the results for printing
|
||||
const results = generateResultsArray(
|
||||
currentBuildResults,
|
||||
previousBuildResults
|
||||
);
|
||||
|
||||
const packagesToShow = results
|
||||
.filter(
|
||||
r =>
|
||||
Math.abs(r.prevFileSizeAbsoluteChange) >= 300 || // bytes
|
||||
Math.abs(r.prevGzipSizeAbsoluteChange) >= 100 // bytes
|
||||
)
|
||||
.map(r => r.packageName);
|
||||
|
||||
if (packagesToShow.length) {
|
||||
let allTables = [];
|
||||
|
||||
// Highlight React and React DOM changes inline
|
||||
// e.g. react: `react.production.min.js`: -3%, `react.development.js`: +4%
|
||||
|
||||
if (packagesToShow.includes('react')) {
|
||||
const reactProd = results.find(
|
||||
r => r.bundleType === 'UMD_PROD' && r.packageName === 'react'
|
||||
);
|
||||
if (
|
||||
reactProd.prevFileSizeChange !== 0 ||
|
||||
reactProd.prevGzipSizeChange !== 0
|
||||
) {
|
||||
const changeSize = addPercent(reactProd.prevFileSizeChange, true);
|
||||
const changeGzip = addPercent(reactProd.prevGzipSizeChange, true);
|
||||
markdown(`React: size: ${changeSize}, gzip: ${changeGzip}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (packagesToShow.includes('react-dom')) {
|
||||
const reactDOMProd = results.find(
|
||||
r => r.bundleType === 'UMD_PROD' && r.packageName === 'react-dom'
|
||||
);
|
||||
if (
|
||||
reactDOMProd.prevFileSizeChange !== 0 ||
|
||||
reactDOMProd.prevGzipSizeChange !== 0
|
||||
) {
|
||||
const changeSize = addPercent(reactDOMProd.prevFileSizeChange, true);
|
||||
const changeGzip = addPercent(reactDOMProd.prevGzipSizeChange, true);
|
||||
markdown(`ReactDOM: size: ${changeSize}, gzip: ${changeGzip}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Show a hidden summary table for all diffs
|
||||
|
||||
// eslint-disable-next-line no-var,no-for-of-loops/no-for-of-loops
|
||||
for (var name of new Set(packagesToShow)) {
|
||||
const thisBundleResults = results.filter(r => r.packageName === name);
|
||||
const changedFiles = thisBundleResults.filter(
|
||||
r => r.prevFileSizeChange !== 0 || r.prevGzipSizeChange !== 0
|
||||
);
|
||||
|
||||
const mdHeaders = [
|
||||
'File',
|
||||
'Filesize Diff',
|
||||
'Gzip Diff',
|
||||
'Prev Size',
|
||||
'Current Size',
|
||||
'Prev Gzip',
|
||||
'Current Gzip',
|
||||
'ENV',
|
||||
];
|
||||
|
||||
const mdRows = changedFiles.map(r => {
|
||||
const isProd = r.bundleType.includes('PROD');
|
||||
return setBoldness(
|
||||
[
|
||||
r.filename,
|
||||
addPercent(r.prevFileSizeChange, isProd),
|
||||
addPercent(r.prevGzipSizeChange, isProd),
|
||||
r.prevSize,
|
||||
r.prevFileSize,
|
||||
r.prevGzip,
|
||||
r.prevGzipSize,
|
||||
r.bundleType,
|
||||
],
|
||||
isProd
|
||||
);
|
||||
});
|
||||
|
||||
allTables.push(`\n## ${name}`);
|
||||
allTables.push(generateMDTable(mdHeaders, mdRows));
|
||||
}
|
||||
|
||||
const summary = `
|
||||
<details>
|
||||
<summary>Details of bundled changes.</summary>
|
||||
|
||||
<p>Comparing: ${baseCommit}...${danger.github.pr.head.sha}</p>
|
||||
|
||||
|
||||
${allTables.join('\n')}
|
||||
|
||||
</details>
|
||||
`;
|
||||
markdown(summary);
|
||||
} else {
|
||||
markdown('No significant bundle size changes to report.');
|
||||
}
|
||||
})();
|
||||
1
fixtures/art/.gitignore
vendored
1
fixtures/art/.gitignore
vendored
@@ -1 +0,0 @@
|
||||
bundle.js
|
||||
@@ -1,10 +0,0 @@
|
||||
# VectorWidget example
|
||||
|
||||
To try this example, run:
|
||||
|
||||
```
|
||||
yarn
|
||||
yarn build
|
||||
```
|
||||
|
||||
in this directory, then open index.html in your browser.
|
||||
@@ -1,148 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var Circle = require('react-art/Circle');
|
||||
var React = require('react');
|
||||
var ReactART = require('react-art');
|
||||
var Group = ReactART.Group;
|
||||
var Shape = ReactART.Shape;
|
||||
var Surface = ReactART.Surface;
|
||||
var Transform = ReactART.Transform;
|
||||
|
||||
var MOUSE_UP_DRAG = 0.978;
|
||||
var MOUSE_DOWN_DRAG = 0.9;
|
||||
var MAX_VEL = 11;
|
||||
var CLICK_ACCEL = 3;
|
||||
var BASE_VEL = 0.15;
|
||||
|
||||
/**
|
||||
* An animated SVG component.
|
||||
*/
|
||||
class VectorWidget extends React.Component {
|
||||
/**
|
||||
* Initialize state members.
|
||||
*/
|
||||
state = {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};
|
||||
|
||||
/**
|
||||
* When the component is mounted into the document - this is similar to a
|
||||
* constructor, but invoked when the instance is actually mounted into the
|
||||
* document. Here, we'll just set up an animation loop that invokes our
|
||||
* method. Binding of `this.onTick` is not needed because all React methods
|
||||
* are automatically bound before being mounted.
|
||||
*/
|
||||
componentDidMount() {
|
||||
this._interval = window.setInterval(this.onTick, 20);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.clearInterval(this._interval);
|
||||
}
|
||||
|
||||
onTick = () => {
|
||||
var nextDegrees = this.state.degrees + BASE_VEL + this.state.velocity;
|
||||
var nextVelocity = this.state.velocity * this.state.drag;
|
||||
this.setState({degrees: nextDegrees, velocity: nextVelocity});
|
||||
};
|
||||
|
||||
/**
|
||||
* When mousing down, we increase the friction down the velocity.
|
||||
*/
|
||||
handleMouseDown = () => {
|
||||
this.setState({drag: MOUSE_DOWN_DRAG});
|
||||
};
|
||||
|
||||
/**
|
||||
* Cause the rotation to "spring".
|
||||
*/
|
||||
handleMouseUp = () => {
|
||||
var nextVelocity = Math.min(this.state.velocity + CLICK_ACCEL, MAX_VEL);
|
||||
this.setState({velocity: nextVelocity, drag: MOUSE_UP_DRAG});
|
||||
};
|
||||
|
||||
/**
|
||||
* This is the "main" method for any component. The React API allows you to
|
||||
* describe the structure of your UI component at *any* point in time.
|
||||
*/
|
||||
render() {
|
||||
return (
|
||||
<Surface width={700} height={700} style={{cursor: 'pointer'}}>
|
||||
{this.renderGraphic(this.state.degrees)}
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Better SVG support for React coming soon.
|
||||
*/
|
||||
renderGraphic = rotation => {
|
||||
return (
|
||||
<Group onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
|
||||
<Group x={210} y={135}>
|
||||
<Shape fill="rgba(0,0,0,0.1)" d={BORDER_PATH} />
|
||||
<Shape fill="#7BC7BA" d={BG_PATH} />
|
||||
<Shape fill="#DCDCDC" d={BAR_PATH} />
|
||||
<Shape fill="#D97B76" d={RED_DOT_PATH} />
|
||||
<Shape fill="#DBBB79" d={YELLOW_DOT_PATH} />
|
||||
<Shape fill="#A6BD8A" d={GREEN_DOT_PATH} />
|
||||
<Group x={55} y={29}>
|
||||
<Group rotation={rotation} originX={84} originY={89}>
|
||||
<Group x={84} y={89}>
|
||||
<Circle fill="#FFFFFF" radius={16} />
|
||||
</Group>
|
||||
<Group>
|
||||
<Shape d={RING_ONE_PATH} stroke="#FFFFFF" strokeWidth={8} />
|
||||
<Shape
|
||||
d={RING_TWO_PATH}
|
||||
transform={RING_TWO_ROTATE}
|
||||
stroke="#FFFFFF"
|
||||
strokeWidth={8}
|
||||
/>
|
||||
<Shape
|
||||
d={RING_THREE_PATH}
|
||||
transform={RING_THREE_ROTATE}
|
||||
stroke="#FFFFFF"
|
||||
strokeWidth={8}
|
||||
/>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
var BORDER_PATH =
|
||||
'M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4';
|
||||
var BG_PATH =
|
||||
'M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1';
|
||||
var BAR_PATH =
|
||||
'M3.00191459,0 C1.34400294,0 0,1.34559019 0,3.00878799 L0,21 C0,21 0,21 0,21 L280,21 C280,21 280,21 280,21 L280,3.00878799 C280,1.34708027 278.657605,0 276.998085,0 L3.00191459,0 Z M3.00191459,0';
|
||||
var RED_DOT_PATH =
|
||||
'M12.5,17 C16.0898511,17 19,14.0898511 19,10.5 C19,6.91014895 16.0898511,4 12.5,4 C8.91014895,4 6,6.91014895 6,10.5 C6,14.0898511 8.91014895,17 12.5,17 Z M12.5,17';
|
||||
var YELLOW_DOT_PATH =
|
||||
'M31.5,17 C35.0898511,17 38,14.0898511 38,10.5 C38,6.91014895 35.0898511,4 31.5,4 C27.9101489,4 25,6.91014895 25,10.5 C25,14.0898511 27.9101489,17 31.5,17 Z M31.5,17';
|
||||
var GREEN_DOT_PATH =
|
||||
'M50.5,17 C54.0898511,17 57,14.0898511 57,10.5 C57,6.91014895 54.0898511,4 50.5,4 C46.9101489,4 44,6.91014895 44,10.5 C44,14.0898511 46.9101489,17 50.5,17 Z M50.5,17';
|
||||
var RING_ONE_PATH =
|
||||
'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
|
||||
var RING_TWO_PATH =
|
||||
'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
|
||||
var RING_THREE_PATH =
|
||||
'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
|
||||
var RING_TWO_ROTATE = new Transform()
|
||||
.translate(84.0, 89.0)
|
||||
.rotate(-240.0)
|
||||
.translate(-84.0, -89.0);
|
||||
var RING_THREE_ROTATE = new Transform()
|
||||
.translate(84.0, 89.0)
|
||||
.rotate(-300.0)
|
||||
.translate(-84.0, -89.0);
|
||||
|
||||
module.exports = VectorWidget;
|
||||
@@ -1,7 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var VectorWidget = require('./VectorWidget');
|
||||
|
||||
ReactDOM.render(<VectorWidget />, document.getElementById('container'));
|
||||
@@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>VectorWidget</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<p>If you're seeing this message, it means you haven't generated the bundle file for this example. Try running:</p>
|
||||
|
||||
<pre><code>
|
||||
npm install
|
||||
npm run build
|
||||
</code></pre>
|
||||
|
||||
<p>then reload the page.</p>
|
||||
</div>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.24.0",
|
||||
"babel-loader": "^6.4.1",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-preset-es2015": "^6.6.0",
|
||||
"babel-preset-react": "^6.5.0",
|
||||
"react": "link:../../build/node_modules/react",
|
||||
"react-art": "link:../../build/node_modules/react-art/",
|
||||
"react-dom": "link:../../build/node_modules/react-dom",
|
||||
"webpack": "^1.14.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack app.js bundle.js"
|
||||
}
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
var webpack = require('webpack');
|
||||
var path = require('path');
|
||||
|
||||
module.exports = {
|
||||
context: __dirname,
|
||||
entry: './app.js',
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
query: {
|
||||
presets: [
|
||||
require.resolve('babel-preset-es2015'),
|
||||
require.resolve('babel-preset-react'),
|
||||
],
|
||||
plugins: [require.resolve('babel-plugin-transform-class-properties')],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify('development'),
|
||||
},
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
react: require.resolve('react'),
|
||||
},
|
||||
},
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
24
fixtures/attribute-behavior/.gitignore
vendored
24
fixtures/attribute-behavior/.gitignore
vendored
@@ -1,24 +0,0 @@
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
/public/react.development.js
|
||||
/public/react-dom.development.js
|
||||
/public/react-dom-server.browser.development.js
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,31 +0,0 @@
|
||||
# Attribute Behavior Fixture
|
||||
|
||||
**WIP:** This is an MVP, still needs polish.
|
||||
|
||||
### Known Issues
|
||||
- There are currently two errors thrown when the page loads;
|
||||
`SyntaxError: missing ; before statement`
|
||||
|
||||
## Instructions
|
||||
|
||||
`cd fixtures/attribute-behavior && yarn install && yarn start`
|
||||
|
||||
## Interpretation
|
||||
|
||||
Each row is an attribute which could be set on some DOM component. Some of
|
||||
them are invalid or mis-capitalized or mixed up versions of real ones.
|
||||
Each column is a value which can be passed to that attribute.
|
||||
Every cell has a box on the left and a box on the right.
|
||||
The left box shows the property (or attribute) assigned by React 15.\*, and the
|
||||
right box shows the property (or attribute) assigned by the latest version of
|
||||
React 16.
|
||||
|
||||
Right now, we use a purple outline to call out cases where the assigned property
|
||||
(or attribute) has changed between React 15 and 16.
|
||||
|
||||
---
|
||||
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
|
||||
|
||||
You can find the guide for how to do things in a CRA [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"name": "attribute-behavior",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"file-saver": "^1.3.3",
|
||||
"glamor": "^2.20.40",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-scripts": "1.0.11",
|
||||
"react-virtualized": "^9.9.0"
|
||||
},
|
||||
"scripts": {
|
||||
"prestart":
|
||||
"cp ../../build/node_modules/react/umd/react.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js public/",
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
@@ -1,40 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import './index.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 14.9</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@0.14.9/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@0.14.9/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/14.9.html">http://localhost:3000/14.9.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.0</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.0/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.0/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.0.html">http://localhost:3000/15.0.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.1</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.1/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.1/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.1.html">http://localhost:3000/15.1.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.2</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.2/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.2/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.2.html">http://localhost:3000/15.2.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.3</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.3/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.3/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.3.html">http://localhost:3000/15.3.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.4</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.4/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.4/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.4.html">http://localhost:3000/15.4.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.5</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.5/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.5/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.5.html">http://localhost:3000/15.5.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 15.6</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@15.6/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@15.6/dist/react-dom.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/15.6.html">http://localhost:3000/15.6.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.0</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@16.0/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.0/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.0.html">http://localhost:3000/16.0.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.1</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@16.1/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.1/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.1.html">http://localhost:3000/16.1.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.2</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@16.2/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.2/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.2.html">http://localhost:3000/16.2.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.3</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@16.3/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.3/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.3.html">http://localhost:3000/16.3.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.4</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/react@16.4/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.4/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.4.html">http://localhost:3000/16.4.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.5</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/schedule@0.5.0/umd/schedule.development.js"></script>
|
||||
<script src="https://unpkg.com/schedule@0.5.0/umd/schedule-tracing.development.js"></script>
|
||||
<script src="https://unpkg.com/react@16.5/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.5/umd/react-dom.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.5.html">http://localhost:3000/16.5.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.6</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler.development.js"></script>
|
||||
<script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler-tracing.development.js"></script>
|
||||
<script src="https://unpkg.com/react@16.6/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.6/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/react-cache@2.0.0-alpha.1/umd/react-cache.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.6.html">http://localhost:3000/16.6.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React 16.7</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler.development.js"></script>
|
||||
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler-tracing.development.js"></script>
|
||||
<script src="https://unpkg.com/react@16.7/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16.7/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/react-cache@2.0.0-alpha.1/umd/react-cache.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/16.7.html">http://localhost:3000/16.7.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React canary</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/scheduler@canary/umd/scheduler.development.js"></script>
|
||||
<script src="https://unpkg.com/scheduler@canary/umd/scheduler-tracing.development.js"></script>
|
||||
<script src="https://unpkg.com/react@canary/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@canary/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/canary.html">http://localhost:3000/canary.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React DevTools regression test</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="canary.html"></iframe>
|
||||
<iframe src="next.html"></iframe>
|
||||
<iframe src="16.7.html"></iframe>
|
||||
<iframe src="16.6.html"></iframe>
|
||||
<iframe src="16.5.html"></iframe>
|
||||
<iframe src="16.4.html"></iframe>
|
||||
<iframe src="16.3.html"></iframe>
|
||||
<iframe src="16.2.html"></iframe>
|
||||
<iframe src="16.1.html"></iframe>
|
||||
<iframe src="16.0.html"></iframe>
|
||||
<iframe src="15.6.html"></iframe>
|
||||
<iframe src="15.5.html"></iframe>
|
||||
<iframe src="15.4.html"></iframe>
|
||||
<iframe src="15.3.html"></iframe>
|
||||
<iframe src="15.2.html"></iframe>
|
||||
<iframe src="15.1.html"></iframe>
|
||||
<iframe src="15.0.html"></iframe>
|
||||
<iframe src="14.9.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>React next</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Enable DevTools to inspect React inside of an <iframe>
|
||||
// This must run before React is loaded
|
||||
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
|
||||
<script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
|
||||
<script src="https://unpkg.com/react@next/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@next/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
|
||||
<br/><br/>
|
||||
Use the <code>server</code> script instead:
|
||||
<br/><br/>
|
||||
<code>node ./fixtures/devtools/regression/server.js</code><br/>
|
||||
<code>open <a href="http://localhost:3000/next.html">http://localhost:3000/next.html</a></code>
|
||||
</div>
|
||||
|
||||
<script src="shared.js" type="text/babel"></script>
|
||||
|
||||
<!--
|
||||
This is a great way to try React but it's not suitable for production.
|
||||
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
|
||||
Learn more at https://reactjs.org/docs/getting-started.html
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,16 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const finalhandler = require('finalhandler');
|
||||
const http = require('http');
|
||||
const serveStatic = require('serve-static');
|
||||
|
||||
// Serve fixtures folder
|
||||
const serve = serveStatic(__dirname, {index: 'index.html'});
|
||||
|
||||
// Create server
|
||||
const server = http.createServer(function onRequest(req, res) {
|
||||
serve(req, res, finalhandler(req, res));
|
||||
});
|
||||
|
||||
// Listen
|
||||
server.listen(3000);
|
||||
@@ -1,328 +0,0 @@
|
||||
/* eslint-disable no-fallthrough, react/react-in-jsx-scope, react/jsx-no-undef */
|
||||
/* global React ReactCache ReactDOM SchedulerTracing ScheduleTracing */
|
||||
|
||||
const apps = [];
|
||||
|
||||
const pieces = React.version.split('.');
|
||||
const major =
|
||||
pieces[0] === '0' ? parseInt(pieces[1], 10) : parseInt(pieces[0], 10);
|
||||
const minor =
|
||||
pieces[0] === '0' ? parseInt(pieces[2], 10) : parseInt(pieces[1], 10);
|
||||
|
||||
// Convenience wrapper to organize API features in DevTools.
|
||||
function Feature({children, label, version}) {
|
||||
return (
|
||||
<div className="Feature">
|
||||
<div className="FeatureHeader">
|
||||
<code className="FeatureCode">{label}</code>
|
||||
<small>{version}</small>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Simplify interaction tracing for tests below.
|
||||
let trace = null;
|
||||
if (typeof SchedulerTracing !== 'undefined') {
|
||||
trace = SchedulerTracing.unstable_trace;
|
||||
} else if (typeof ScheduleTracing !== 'undefined') {
|
||||
trace = ScheduleTracing.unstable_trace;
|
||||
} else {
|
||||
trace = (_, __, callback) => callback();
|
||||
}
|
||||
|
||||
// https://github.com/facebook/react/blob/master/CHANGELOG.md
|
||||
switch (major) {
|
||||
case 16:
|
||||
switch (minor) {
|
||||
case 7:
|
||||
if (typeof React.useState === 'function') {
|
||||
// Hooks
|
||||
function Hooks() {
|
||||
const [count, setCount] = React.useState(0);
|
||||
const incrementCount = React.useCallback(
|
||||
() => setCount(count + 1),
|
||||
[count]
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
count: {count}{' '}
|
||||
<button onClick={incrementCount}>increment</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
apps.push(
|
||||
<Feature key="Hooks" label="Hooks" version="16.7+">
|
||||
<Hooks />
|
||||
</Feature>
|
||||
);
|
||||
}
|
||||
case 6:
|
||||
// memo
|
||||
function LabelComponent({label}) {
|
||||
return <label>{label}</label>;
|
||||
}
|
||||
const AnonymousMemoized = React.memo(({label}) => (
|
||||
<label>{label}</label>
|
||||
));
|
||||
const Memoized = React.memo(LabelComponent);
|
||||
const CustomMemoized = React.memo(LabelComponent);
|
||||
CustomMemoized.displayName = 'MemoizedLabelFunction';
|
||||
apps.push(
|
||||
<Feature key="memo" label="memo" version="16.6+">
|
||||
<AnonymousMemoized label="AnonymousMemoized" />
|
||||
<Memoized label="Memoized" />
|
||||
<CustomMemoized label="CustomMemoized" />
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// Suspense
|
||||
const loadResource = ([text, ms]) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve(text);
|
||||
}, ms);
|
||||
});
|
||||
};
|
||||
const getResourceKey = ([text, ms]) => text;
|
||||
const Resource = ReactCache.unstable_createResource(
|
||||
loadResource,
|
||||
getResourceKey
|
||||
);
|
||||
class Suspending extends React.Component {
|
||||
state = {useSuspense: false};
|
||||
useSuspense = () => this.setState({useSuspense: true});
|
||||
render() {
|
||||
if (this.state.useSuspense) {
|
||||
const text = Resource.read(['loaded', 2000]);
|
||||
return text;
|
||||
} else {
|
||||
return <button onClick={this.useSuspense}>load data</button>;
|
||||
}
|
||||
}
|
||||
}
|
||||
apps.push(
|
||||
<Feature key="Suspense" label="Suspense" version="16.6+">
|
||||
<React.Suspense fallback={<div>loading...</div>}>
|
||||
<Suspending />
|
||||
</React.Suspense>
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// lazy
|
||||
const LazyWithDefaultProps = React.lazy(
|
||||
() =>
|
||||
new Promise(resolve => {
|
||||
function FooWithDefaultProps(props) {
|
||||
return (
|
||||
<h1>
|
||||
{props.greeting}, {props.name}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
FooWithDefaultProps.defaultProps = {
|
||||
name: 'World',
|
||||
greeting: 'Bonjour',
|
||||
};
|
||||
resolve({
|
||||
default: FooWithDefaultProps,
|
||||
});
|
||||
})
|
||||
);
|
||||
apps.push(
|
||||
<Feature key="lazy" label="lazy" version="16.6+">
|
||||
<React.Suspense fallback={<div>loading...</div>}>
|
||||
<LazyWithDefaultProps greeting="Hello" />
|
||||
</React.Suspense>
|
||||
</Feature>
|
||||
);
|
||||
case 5:
|
||||
case 4:
|
||||
// unstable_Profiler
|
||||
class ProfilerChild extends React.Component {
|
||||
state = {count: 0};
|
||||
incrementCount = () =>
|
||||
this.setState(prevState => ({count: prevState.count + 1}));
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
count: {this.state.count}{' '}
|
||||
<button onClick={this.incrementCount}>increment</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
const onRender = (...args) => {};
|
||||
const Profiler = React.unstable_Profiler || React.Profiler;
|
||||
apps.push(
|
||||
<Feature
|
||||
key="unstable_Profiler"
|
||||
label="unstable_Profiler"
|
||||
version="16.4+">
|
||||
<Profiler id="count" onRender={onRender}>
|
||||
<div>
|
||||
<ProfilerChild />
|
||||
</div>
|
||||
</Profiler>
|
||||
</Feature>
|
||||
);
|
||||
case 3:
|
||||
// createContext()
|
||||
const LocaleContext = React.createContext();
|
||||
LocaleContext.displayName = 'LocaleContext';
|
||||
const ThemeContext = React.createContext();
|
||||
apps.push(
|
||||
<Feature key="createContext" label="createContext" version="16.3+">
|
||||
<ThemeContext.Provider value="blue">
|
||||
<ThemeContext.Consumer>
|
||||
{theme => <div>theme: {theme}</div>}
|
||||
</ThemeContext.Consumer>
|
||||
</ThemeContext.Provider>
|
||||
<LocaleContext.Provider value="en-US">
|
||||
<LocaleContext.Consumer>
|
||||
{locale => <div>locale: {locale}</div>}
|
||||
</LocaleContext.Consumer>
|
||||
</LocaleContext.Provider>
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// forwardRef()
|
||||
const AnonymousFunction = React.forwardRef((props, ref) => (
|
||||
<div ref={ref}>{props.children}</div>
|
||||
));
|
||||
const NamedFunction = React.forwardRef(function named(props, ref) {
|
||||
return <div ref={ref}>{props.children}</div>;
|
||||
});
|
||||
const CustomName = React.forwardRef((props, ref) => (
|
||||
<div ref={ref}>{props.children}</div>
|
||||
));
|
||||
CustomName.displayName = 'CustomNameForwardRef';
|
||||
apps.push(
|
||||
<Feature key="forwardRef" label="forwardRef" version="16.3+">
|
||||
<AnonymousFunction>AnonymousFunction</AnonymousFunction>
|
||||
<NamedFunction>NamedFunction</NamedFunction>
|
||||
<CustomName>CustomName</CustomName>
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// StrictMode
|
||||
class StrictModeChild extends React.Component {
|
||||
render() {
|
||||
return 'StrictModeChild';
|
||||
}
|
||||
}
|
||||
apps.push(
|
||||
<Feature key="StrictMode" label="StrictMode" version="16.3+">
|
||||
<React.StrictMode>
|
||||
<StrictModeChild />
|
||||
</React.StrictMode>
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// unstable_AsyncMode (later renamed to unstable_ConcurrentMode, then ConcurrentMode)
|
||||
const ConcurrentMode =
|
||||
React.ConcurrentMode ||
|
||||
React.unstable_ConcurrentMode ||
|
||||
React.unstable_AsyncMode;
|
||||
apps.push(
|
||||
<Feature
|
||||
key="AsyncMode/ConcurrentMode"
|
||||
label="AsyncMode/ConcurrentMode"
|
||||
version="16.3+">
|
||||
<ConcurrentMode>
|
||||
<div>
|
||||
unstable_AsyncMode was added in 16.3, renamed to
|
||||
unstable_ConcurrentMode in 16.5, and then renamed to
|
||||
ConcurrentMode in 16.7
|
||||
</div>
|
||||
</ConcurrentMode>
|
||||
</Feature>
|
||||
);
|
||||
case 2:
|
||||
// Fragment
|
||||
apps.push(
|
||||
<Feature key="Fragment" label="Fragment" version="16.4+">
|
||||
<React.Fragment>
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
</React.Fragment>
|
||||
</Feature>
|
||||
);
|
||||
case 1:
|
||||
case 0:
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case 15:
|
||||
break;
|
||||
case 14:
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
function Even() {
|
||||
return <small>(even)</small>;
|
||||
}
|
||||
|
||||
// Simple stateful app shared by all React versions
|
||||
class SimpleApp extends React.Component {
|
||||
state = {count: 0};
|
||||
incrementCount = () => {
|
||||
const updaterFn = prevState => ({count: prevState.count + 1});
|
||||
trace('Updating count', performance.now(), () => this.setState(updaterFn));
|
||||
};
|
||||
render() {
|
||||
const {count} = this.state;
|
||||
return (
|
||||
<div>
|
||||
{count % 2 === 0 ? (
|
||||
<span>
|
||||
count: {count} <Even />
|
||||
</span>
|
||||
) : (
|
||||
<span>count: {count}</span>
|
||||
)}{' '}
|
||||
<button onClick={this.incrementCount}>increment</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
apps.push(
|
||||
<Feature key="Simple stateful app" label="Simple stateful app" version="any">
|
||||
<SimpleApp />
|
||||
</Feature>
|
||||
);
|
||||
|
||||
// This component, with the version prop, helps organize DevTools at a glance.
|
||||
function TopLevelWrapperForDevTools({version}) {
|
||||
let header = <h1>React {version}</h1>;
|
||||
if (version.includes('canary')) {
|
||||
const commitSha = version.match(/.+canary-(.+)/)[1];
|
||||
header = (
|
||||
<h1>
|
||||
React canary{' '}
|
||||
<a href={`https://github.com/facebook/react/commit/${commitSha}`}>
|
||||
{commitSha}
|
||||
</a>
|
||||
</h1>
|
||||
);
|
||||
} else if (version.includes('alpha')) {
|
||||
header = <h1>React next</h1>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{header}
|
||||
{apps}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
TopLevelWrapperForDevTools.displayName = 'React';
|
||||
|
||||
ReactDOM.render(
|
||||
<TopLevelWrapperForDevTools version={React.version} />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
@@ -1,37 +0,0 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.Feature {
|
||||
margin: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.FeatureHeader {
|
||||
font-size: 16px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.FeatureCode {
|
||||
background-color: #eee;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
@@ -1,313 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>TODO List</title>
|
||||
|
||||
<!-- DevTools -->
|
||||
<script src="http://localhost:8097"></script>
|
||||
|
||||
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/immutable@4.0.0-rc.12/dist/immutable.js"></script>
|
||||
|
||||
<!-- Don't use this in production: -->
|
||||
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
.Input {
|
||||
font-size: 1rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.IconButton {
|
||||
padding: 0.25rem;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.List {
|
||||
margin: 0.5rem 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ListItem {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.Label {
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
color: #555;
|
||||
}
|
||||
.Label:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.IconButton {
|
||||
padding: 0.25rem;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="text/babel">
|
||||
const { Fragment, useCallback, useState } = React;
|
||||
|
||||
function List(props) {
|
||||
const [newItemText, setNewItemText] = useState("");
|
||||
const [items, setItems] = useState([
|
||||
{ id: 1, isComplete: true, text: "First" },
|
||||
{ id: 2, isComplete: true, text: "Second" },
|
||||
{ id: 3, isComplete: false, text: "Third" }
|
||||
]);
|
||||
const [uid, setUID] = useState(4);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (newItemText !== "") {
|
||||
setItems([
|
||||
...items,
|
||||
{
|
||||
id: uid,
|
||||
isComplete: false,
|
||||
text: newItemText
|
||||
}
|
||||
]);
|
||||
setUID(uid + 1);
|
||||
setNewItemText("");
|
||||
}
|
||||
}, [newItemText, items, uid]);
|
||||
|
||||
const handleKeyPress = useCallback(
|
||||
event => {
|
||||
if (event.key === "Enter") {
|
||||
handleClick();
|
||||
}
|
||||
},
|
||||
[handleClick]
|
||||
);
|
||||
|
||||
const handleChange = useCallback(
|
||||
event => {
|
||||
setNewItemText(event.currentTarget.value);
|
||||
},
|
||||
[setNewItemText]
|
||||
);
|
||||
|
||||
const removeItem = useCallback(
|
||||
itemToRemove => setItems(items.filter(item => item !== itemToRemove)),
|
||||
[items]
|
||||
);
|
||||
|
||||
const toggleItem = useCallback(
|
||||
itemToToggle => {
|
||||
const index = items.indexOf(itemToToggle);
|
||||
|
||||
setItems(
|
||||
items
|
||||
.slice(0, index)
|
||||
.concat({
|
||||
...itemToToggle,
|
||||
isComplete: !itemToToggle.isComplete
|
||||
})
|
||||
.concat(items.slice(index + 1))
|
||||
);
|
||||
},
|
||||
[items]
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<h1>List</h1>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="New list item..."
|
||||
className="Input"
|
||||
value={newItemText}
|
||||
onChange={handleChange}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
<button
|
||||
className="IconButton"
|
||||
disabled={newItemText === ""}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<span role="img" aria-label="Add item">
|
||||
➕
|
||||
</span>
|
||||
</button>
|
||||
<ul className="List">
|
||||
{items.map(item => (
|
||||
<ListItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
removeItem={removeItem}
|
||||
toggleItem={toggleItem}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
function ListItem({ item, removeItem, toggleItem }) {
|
||||
const handleDelete = useCallback(() => {
|
||||
removeItem(item);
|
||||
}, [item, removeItem]);
|
||||
|
||||
const handleToggle = useCallback(() => {
|
||||
toggleItem(item);
|
||||
}, [item, toggleItem]);
|
||||
|
||||
return (
|
||||
<li className="ListItem">
|
||||
<button className="IconButton" onClick={handleDelete}>
|
||||
🗑
|
||||
</button>
|
||||
<label className="Label">
|
||||
<input
|
||||
className="Input"
|
||||
checked={item.isComplete}
|
||||
onChange={handleToggle}
|
||||
type="checkbox"
|
||||
/>{" "}
|
||||
{item.text}
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function SimpleValues() {
|
||||
return (
|
||||
<ChildComponent
|
||||
string="abc"
|
||||
emptyString=""
|
||||
number={123}
|
||||
undefined={undefined}
|
||||
null={null}
|
||||
nan={NaN}
|
||||
infinity={Infinity}
|
||||
true={true}
|
||||
false={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
class Custom {
|
||||
_number = 42;
|
||||
get number() {
|
||||
return this._number;
|
||||
}
|
||||
}
|
||||
|
||||
function CustomObject() {
|
||||
return <ChildComponent customObject={new Custom()} />;
|
||||
}
|
||||
|
||||
const object = {
|
||||
string: "abc",
|
||||
longString: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890",
|
||||
emptyString: "",
|
||||
number: 123,
|
||||
boolean: true,
|
||||
undefined: undefined,
|
||||
null: null
|
||||
};
|
||||
|
||||
function ObjectProps() {
|
||||
return (
|
||||
<ChildComponent
|
||||
object={{
|
||||
outer: {
|
||||
inner: object
|
||||
}
|
||||
}}
|
||||
array={["first", "second", "third"]}
|
||||
objectInArray={[object]}
|
||||
arrayInObject={{ array: ["first", "second", "third"] }}
|
||||
deepObject={{
|
||||
// Known limitation: we won't go deeper than several levels.
|
||||
// In the future, we might offer a way to request deeper access on demand.
|
||||
a: {
|
||||
b: {
|
||||
c: {
|
||||
d: {
|
||||
e: {
|
||||
f: {
|
||||
g: {
|
||||
h: {
|
||||
i: {
|
||||
j: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const set = new Set(['abc', 123]);
|
||||
const map = new Map([['name', 'Brian'], ['food', 'sushi']]);
|
||||
const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);
|
||||
const mapOfMaps = new Map([['first', map], ['second', map]]);
|
||||
const typedArray = Int8Array.from([100, -100, 0]);
|
||||
const immutable = Immutable.fromJS({
|
||||
a: [{ hello: 'there' }, 'fixed', true],
|
||||
b: 123,
|
||||
c: {
|
||||
'1': 'xyz',
|
||||
xyz: 1,
|
||||
},
|
||||
});
|
||||
|
||||
function UnserializableProps() {
|
||||
return (
|
||||
<ChildComponent
|
||||
map={map}
|
||||
set={set}
|
||||
mapOfMaps={mapOfMaps}
|
||||
setOfSets={setOfSets}
|
||||
typedArray={typedArray}
|
||||
immutable={immutable}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ChildComponent(props: any) {
|
||||
return null;
|
||||
}
|
||||
|
||||
function InspectableElements() {
|
||||
return (
|
||||
<Fragment>
|
||||
<SimpleValues />
|
||||
<ObjectProps />
|
||||
<UnserializableProps />
|
||||
<CustomObject />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Fragment>
|
||||
<List />
|
||||
<InspectableElements />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
25
fixtures/dom/.gitignore
vendored
25
fixtures/dom/.gitignore
vendored
@@ -1,25 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
|
||||
# testing
|
||||
coverage
|
||||
|
||||
# production
|
||||
build
|
||||
public/scheduler-unstable_mock.development.js
|
||||
public/scheduler-unstable_mock.production.min.js
|
||||
public/react.development.js
|
||||
public/react.production.min.js
|
||||
public/react-dom.development.js
|
||||
public/react-dom.production.min.js
|
||||
public/react-dom-server.browser.development.js
|
||||
public/react-dom-server.browser.production.min.js
|
||||
public/react-dom-test-utils.development.js
|
||||
public/react-dom-test-utils.production.min.js
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
npm-debug.log
|
||||
@@ -1,17 +0,0 @@
|
||||
# DOM Fixtures
|
||||
|
||||
A set of DOM test cases for quickly identifying browser issues.
|
||||
|
||||
## Setup
|
||||
|
||||
To reference a local build of React, first run `yarn build` at the root
|
||||
of the React project. Then:
|
||||
|
||||
```
|
||||
cd fixtures/dom
|
||||
yarn
|
||||
yarn start
|
||||
```
|
||||
|
||||
The `start` command runs a script that copies over the local build of react into
|
||||
the public directory.
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "react-fixtures",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"react-scripts": "^1.0.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/standalone": "^7.0.0",
|
||||
"art": "^0.10.3",
|
||||
"classnames": "^2.2.5",
|
||||
"codemirror": "^5.40.0",
|
||||
"core-js": "^2.4.1",
|
||||
"jest-diff": "^24.8.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"query-string": "^4.2.3",
|
||||
"react": "^15.4.1",
|
||||
"react-dom": "^15.4.1",
|
||||
"semver": "^5.5.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"prestart": "cp ../../build/node_modules/scheduler/umd/scheduler-unstable_mock.development.js ../../build/node_modules/scheduler/umd/scheduler-unstable_mock.production.min.js ../../build/node_modules/react/umd/react.development.js ../../build/node_modules/react-dom/umd/react-dom.development.js ../../build/node_modules/react/umd/react.production.min.js ../../build/node_modules/react-dom/umd/react-dom.production.min.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.development.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.production.min.js public/ && cp -a ../../build/node_modules/. node_modules",
|
||||
"build": "react-scripts build && cp build/index.html build/200.html",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>sanity test for ReactTestUtils.act</title>
|
||||
</head>
|
||||
<body>
|
||||
this page tests whether act runs properly in a browser.
|
||||
<br />
|
||||
your console should say "5"
|
||||
<script src="scheduler-unstable_mock.development.js"></script>
|
||||
<script src="react.development.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler =
|
||||
window.SchedulerMock;
|
||||
</script>
|
||||
<script src="react-dom.development.js"></script>
|
||||
<script src="react-dom-test-utils.development.js"></script>
|
||||
<script>
|
||||
// from ReactTestUtilsAct-test.js
|
||||
function App() {
|
||||
let [state, setState] = React.useState(0);
|
||||
async function ticker() {
|
||||
await null;
|
||||
setState(x => x + 1);
|
||||
}
|
||||
React.useEffect(() => {
|
||||
ticker();
|
||||
}, [Math.min(state, 4)]);
|
||||
return state;
|
||||
}
|
||||
|
||||
async function testAsyncAct() {
|
||||
const el = document.createElement("div");
|
||||
await ReactTestUtils.act(async () => {
|
||||
ReactDOM.render(React.createElement(App), el);
|
||||
});
|
||||
// all 5 ticks present and accounted for
|
||||
console.log(el.innerHTML);
|
||||
}
|
||||
|
||||
testAsyncAct();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
@@ -1,33 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tag above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
|
||||
<script src="https://unpkg.com/expect@1.20.2/umd/expect.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start`.
|
||||
To create a production bundle, use `npm run build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 20.46348"><title>logo</title><path d="M18.91 6.633q-.367-.126-.74-.234.062-.252.115-.506c.56-2.72.194-4.912-1.058-5.634-1.2-.692-3.162.03-5.144 1.755q-.293.255-.572.525-.187-.18-.38-.352C9.053.344 6.97-.432 5.72.29 4.523.984 4.168 3.045 4.67 5.623q.077.383.17.762c-.293.084-.578.173-.85.268-2.435.85-3.99 2.18-3.99 3.56 0 1.425 1.67 2.855 4.206 3.72q.308.106.622.196-.102.407-.18.82c-.482 2.533-.106 4.545 1.09 5.235 1.234.712 3.306-.02 5.325-1.784q.24-.208.48-.442.302.293.62.568c1.956 1.682 3.886 2.36 5.08 1.67 1.235-.715 1.636-2.876 1.115-5.505q-.06-.3-.138-.614.218-.064.428-.133C21.285 13.07 23 11.657 23 10.213c0-1.386-1.605-2.725-4.09-3.58zM12.73 2.756c1.698-1.478 3.285-2.06 4.01-1.644.77.444 1.068 2.235.584 4.584q-.047.23-.103.457a23.538 23.538 0 0 0-3.076-.486A23.08 23.08 0 0 0 12.2 3.24q.258-.248.528-.484zM6.79 11.39q.313.604.653 1.19.347.6.722 1.183a20.922 20.922 0 0 1-2.12-.34c.204-.657.454-1.34.746-2.032zm0-2.31c-.286-.678-.53-1.345-.73-1.99.655-.147 1.355-.267 2.084-.358q-.366.57-.705 1.16-.34.586-.65 1.188zm.522 1.156q.454-.945.98-1.854.522-.91 1.114-1.775c.684-.052 1.385-.08 2.094-.08.712 0 1.414.028 2.098.08q.585.865 1.108 1.77.526.906.992 1.845-.46.948-.988 1.862-.523.908-1.104 1.78c-.682.05-1.387.074-2.106.074-.716 0-1.412-.022-2.082-.066q-.596-.87-1.124-1.783-.526-.91-.982-1.854zm8.25 2.34q.346-.603.666-1.22A20.867 20.867 0 0 1 17 13.38a20.852 20.852 0 0 1-2.145.365q.364-.578.706-1.17zm.656-3.495q-.318-.604-.66-1.196-.338-.582-.7-1.15c.733.093 1.436.216 2.097.367a20.96 20.96 0 0 1-.737 1.98zM11.51 3.945a21.013 21.013 0 0 1 1.354 1.634q-1.358-.065-2.718 0c.447-.59.905-1.138 1.365-1.634zM6.214 1.14c.77-.445 2.47.19 4.264 1.783.115.102.23.208.345.318a23.545 23.545 0 0 0-1.96 2.426 24.008 24.008 0 0 0-3.068.477q-.088-.352-.158-.71v.002c-.433-2.21-.146-3.876.577-4.294zM5.09 13.183q-.285-.082-.566-.177A8.324 8.324 0 0 1 1.84 11.58a2.03 2.03 0 0 1-.857-1.368c0-.837 1.248-1.905 3.33-2.63q.393-.138.792-.25a23.565 23.565 0 0 0 1.12 2.904 23.922 23.922 0 0 0-1.134 2.946zm5.326 4.48a8.322 8.322 0 0 1-2.575 1.61 2.03 2.03 0 0 1-1.612.062c-.725-.42-1.027-2.034-.616-4.2q.074-.385.168-.764a23.104 23.104 0 0 0 3.1.448 23.91 23.91 0 0 0 1.974 2.44q-.214.207-.438.403zm1.122-1.112c-.466-.502-.93-1.058-1.384-1.656q.66.026 1.346.026.703 0 1.388-.03a20.894 20.894 0 0 1-1.35 1.66zm5.967 1.367a2.03 2.03 0 0 1-.753 1.428c-.725.42-2.275-.126-3.947-1.564q-.287-.246-.578-.526a23.09 23.09 0 0 0 1.928-2.448 22.936 22.936 0 0 0 3.115-.48q.07.284.124.556a8.32 8.32 0 0 1 .11 3.035zm.834-4.907c-.127.042-.256.082-.388.12a23.06 23.06 0 0 0-1.164-2.913 23.05 23.05 0 0 0 1.12-2.87c.234.067.463.14.683.215 2.13.732 3.428 1.816 3.428 2.65 0 .89-1.403 2.044-3.68 2.798z" fill="#61dafb"/><path d="M11.5 8.159a2.054 2.054 0 1 1-2.054 2.052A2.054 2.054 0 0 1 11.5 8.16" fill="#61dafb"/></svg>
|
||||
|
Before Width: | Height: | Size: 2.8 KiB |
@@ -1,86 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Renderer</title>
|
||||
<style>
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
#status {
|
||||
font-size: 12px;
|
||||
left: 8px;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 16px;
|
||||
margin: -8px 0 0;
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
top: 50%;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#output {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
padding: 4px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #eee;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #aaa;
|
||||
font-size: 11px;
|
||||
padding: 4px 6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<p id="status">Loading</p>
|
||||
|
||||
<menu class="controls">
|
||||
<button class="button" id="hydrate">Hydrate</button>
|
||||
<button class="button" id="reload">Reload</button>
|
||||
</menu>
|
||||
</header>
|
||||
|
||||
<div id="output"></div>
|
||||
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
|
||||
<script src="renderer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,201 +0,0 @@
|
||||
/**
|
||||
* Supports render.html, a piece of the hydration fixture. See /hydration
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function() {
|
||||
var Fixture = null;
|
||||
var output = document.getElementById('output');
|
||||
var status = document.getElementById('status');
|
||||
var hydrate = document.getElementById('hydrate');
|
||||
var reload = document.getElementById('reload');
|
||||
var renders = 0;
|
||||
var failed = false;
|
||||
|
||||
var needsReactDOM = getBooleanQueryParam('needsReactDOM');
|
||||
var needsCreateElement = getBooleanQueryParam('needsCreateElement');
|
||||
|
||||
function unmountComponent(node) {
|
||||
// ReactDOM was moved into a separate package in 0.14
|
||||
if (needsReactDOM) {
|
||||
ReactDOM.unmountComponentAtNode(node);
|
||||
} else if (React.unmountComponentAtNode) {
|
||||
React.unmountComponentAtNode(node);
|
||||
} else {
|
||||
// Unmounting for React 0.4 and lower
|
||||
React.unmountAndReleaseReactRootNode(node);
|
||||
}
|
||||
}
|
||||
|
||||
function createElement(value) {
|
||||
// React.createElement replaced function invocation in 0.12
|
||||
if (needsCreateElement) {
|
||||
return React.createElement(value);
|
||||
} else {
|
||||
return value();
|
||||
}
|
||||
}
|
||||
|
||||
function getQueryParam(key) {
|
||||
var pattern = new RegExp(key + '=([^&]+)(&|$)');
|
||||
var matches = window.location.search.match(pattern);
|
||||
|
||||
if (matches) {
|
||||
return decodeURIComponent(matches[1]);
|
||||
}
|
||||
|
||||
handleError(new Error('No key found for' + key));
|
||||
}
|
||||
|
||||
function getBooleanQueryParam(key) {
|
||||
return getQueryParam(key) === 'true';
|
||||
}
|
||||
|
||||
function setStatus(label) {
|
||||
status.innerHTML = label;
|
||||
}
|
||||
|
||||
function prerender() {
|
||||
setStatus('Generating markup');
|
||||
|
||||
return Promise.resolve()
|
||||
.then(function() {
|
||||
const element = createElement(Fixture);
|
||||
|
||||
// Server rendering moved to a separate package along with ReactDOM
|
||||
// in 0.14.0
|
||||
if (needsReactDOM) {
|
||||
return ReactDOMServer.renderToString(element);
|
||||
}
|
||||
|
||||
// React.renderComponentToString was renamed in 0.12
|
||||
if (React.renderToString) {
|
||||
return React.renderToString(element);
|
||||
}
|
||||
|
||||
// React.renderComponentToString became synchronous in React 0.9.0
|
||||
if (React.renderComponentToString.length === 1) {
|
||||
return React.renderComponentToString(element);
|
||||
}
|
||||
|
||||
// Finally, React 0.4 and lower emits markup in a callback
|
||||
return new Promise(function(resolve) {
|
||||
React.renderComponentToString(element, resolve);
|
||||
});
|
||||
})
|
||||
.then(function(string) {
|
||||
output.innerHTML = string;
|
||||
setStatus('Markup only (No React)');
|
||||
})
|
||||
.catch(handleError);
|
||||
}
|
||||
|
||||
function render() {
|
||||
setStatus('Hydrating');
|
||||
|
||||
var element = createElement(Fixture);
|
||||
|
||||
// ReactDOM was split out into another package in 0.14
|
||||
if (needsReactDOM) {
|
||||
// Hydration changed to a separate method in React 16
|
||||
if (ReactDOM.hydrate) {
|
||||
ReactDOM.hydrate(element, output);
|
||||
} else {
|
||||
ReactDOM.render(element, output);
|
||||
}
|
||||
} else if (React.render) {
|
||||
// React.renderComponent was renamed in 0.12
|
||||
React.render(element, output);
|
||||
} else {
|
||||
React.renderComponent(element, output);
|
||||
}
|
||||
|
||||
setStatus(renders > 0 ? 'Re-rendered (' + renders + 'x)' : 'Hydrated');
|
||||
renders += 1;
|
||||
hydrate.innerHTML = 'Re-render';
|
||||
}
|
||||
|
||||
function handleError(error) {
|
||||
console.log(error);
|
||||
failed = true;
|
||||
setStatus('Javascript Error');
|
||||
output.innerHTML = error;
|
||||
}
|
||||
|
||||
function loadScript(src) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var script = document.createElement('script');
|
||||
script.async = true;
|
||||
script.src = src;
|
||||
|
||||
script.onload = resolve;
|
||||
script.onerror = function(error) {
|
||||
reject(new Error('Unable to load ' + src));
|
||||
};
|
||||
|
||||
document.body.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
function injectFixture(src) {
|
||||
Fixture = new Function(src + '\nreturn Fixture;')();
|
||||
|
||||
if (typeof Fixture === 'undefined') {
|
||||
setStatus('Failed');
|
||||
output.innerHTML = 'Please name your root component "Fixture"';
|
||||
} else {
|
||||
prerender().then(function() {
|
||||
if (getBooleanQueryParam('hydrate')) {
|
||||
render();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function reloadFixture(code) {
|
||||
renders = 0;
|
||||
unmountComponent(output);
|
||||
injectFixture(code);
|
||||
}
|
||||
|
||||
window.onerror = handleError;
|
||||
|
||||
reload.onclick = function() {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
hydrate.onclick = render;
|
||||
|
||||
loadScript(getQueryParam('reactPath'))
|
||||
.then(function() {
|
||||
if (needsReactDOM) {
|
||||
return Promise.all([
|
||||
loadScript(getQueryParam('reactDOMPath')),
|
||||
loadScript(getQueryParam('reactDOMServerPath')),
|
||||
]);
|
||||
}
|
||||
})
|
||||
.then(function() {
|
||||
if (failed) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('message', function(event) {
|
||||
var data = JSON.parse(event.data);
|
||||
|
||||
switch (data.type) {
|
||||
case 'code':
|
||||
reloadFixture(data.payload);
|
||||
break;
|
||||
default:
|
||||
throw new Error(
|
||||
'Renderer Error: Unrecognized message "' + data.type + '"'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
window.parent.postMessage(JSON.stringify({type: 'ready'}), '*');
|
||||
})
|
||||
.catch(handleError);
|
||||
})();
|
||||
Binary file not shown.
@@ -1,97 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @emails react-core
|
||||
*/
|
||||
|
||||
let React;
|
||||
let TestUtils;
|
||||
let TestRenderer;
|
||||
|
||||
global.__DEV__ = process.env.NODE_ENV !== 'production';
|
||||
|
||||
expect.extend(require('../toWarnDev'));
|
||||
|
||||
describe('unmocked scheduler', () => {
|
||||
beforeEach(() => {
|
||||
jest.resetModules();
|
||||
React = require('react');
|
||||
TestUtils = require('react-dom/test-utils');
|
||||
TestRenderer = require('react-test-renderer');
|
||||
});
|
||||
|
||||
it('flushes work only outside the outermost act() corresponding to its own renderer', () => {
|
||||
let log = [];
|
||||
function Effecty() {
|
||||
React.useEffect(() => {
|
||||
log.push('called');
|
||||
}, []);
|
||||
return null;
|
||||
}
|
||||
// in legacy mode, this tests whether an act only flushes its own effects
|
||||
TestRenderer.act(() => {
|
||||
TestUtils.act(() => {
|
||||
TestRenderer.create(<Effecty />);
|
||||
});
|
||||
expect(log).toEqual([]);
|
||||
});
|
||||
expect(log).toEqual(['called']);
|
||||
|
||||
log = [];
|
||||
// for doublechecking, we flip it inside out, and assert on the outermost
|
||||
TestUtils.act(() => {
|
||||
TestRenderer.act(() => {
|
||||
TestRenderer.create(<Effecty />);
|
||||
});
|
||||
expect(log).toEqual(['called']);
|
||||
});
|
||||
expect(log).toEqual(['called']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('mocked scheduler', () => {
|
||||
beforeEach(() => {
|
||||
jest.resetModules();
|
||||
jest.mock('scheduler', () =>
|
||||
require.requireActual('scheduler/unstable_mock')
|
||||
);
|
||||
React = require('react');
|
||||
TestUtils = require('react-dom/test-utils');
|
||||
TestRenderer = require('react-test-renderer');
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.unmock('scheduler');
|
||||
});
|
||||
|
||||
it('flushes work only outside the outermost act()', () => {
|
||||
let log = [];
|
||||
function Effecty() {
|
||||
React.useEffect(() => {
|
||||
log.push('called');
|
||||
}, []);
|
||||
return null;
|
||||
}
|
||||
// with a mocked scheduler, this tests whether it flushes all work only on the outermost act
|
||||
TestRenderer.act(() => {
|
||||
TestUtils.act(() => {
|
||||
TestRenderer.create(<Effecty />);
|
||||
});
|
||||
expect(log).toEqual([]);
|
||||
});
|
||||
expect(log).toEqual(['called']);
|
||||
|
||||
log = [];
|
||||
// for doublechecking, we flip it inside out, and assert on the outermost
|
||||
TestUtils.act(() => {
|
||||
TestRenderer.act(() => {
|
||||
TestRenderer.create(<Effecty />);
|
||||
});
|
||||
expect(log).toEqual([]);
|
||||
});
|
||||
expect(log).toEqual(['called']);
|
||||
});
|
||||
});
|
||||
@@ -1,197 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @emails react-core
|
||||
*/
|
||||
|
||||
let React;
|
||||
let ReactDOM;
|
||||
let ReactART;
|
||||
let ARTSVGMode;
|
||||
let ARTCurrentMode;
|
||||
let TestUtils;
|
||||
let TestRenderer;
|
||||
let ARTTest;
|
||||
|
||||
global.__DEV__ = process.env.NODE_ENV !== 'production';
|
||||
global.__EXPERIMENTAL__ = process.env.RELEASE_CHANNEL === 'experimental';
|
||||
|
||||
expect.extend(require('../toWarnDev'));
|
||||
|
||||
function App(props) {
|
||||
return 'hello world';
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
jest.resetModules();
|
||||
React = require('react');
|
||||
ReactDOM = require('react-dom');
|
||||
ReactART = require('react-art');
|
||||
ARTSVGMode = require('art/modes/svg');
|
||||
ARTCurrentMode = require('art/modes/current');
|
||||
TestUtils = require('react-dom/test-utils');
|
||||
TestRenderer = require('react-test-renderer');
|
||||
|
||||
ARTCurrentMode.setCurrent(ARTSVGMode);
|
||||
|
||||
ARTTest = function ARTTestComponent(props) {
|
||||
return (
|
||||
<ReactART.Surface width={150} height={200}>
|
||||
<ReactART.Group>
|
||||
<ReactART.Shape
|
||||
d="M0,0l50,0l0,50l-50,0z"
|
||||
fill={new ReactART.LinearGradient(['black', 'white'])}
|
||||
key="a"
|
||||
width={50}
|
||||
height={50}
|
||||
x={50}
|
||||
y={50}
|
||||
opacity={0.1}
|
||||
/>
|
||||
<ReactART.Shape
|
||||
fill="#3C5A99"
|
||||
key="b"
|
||||
scale={0.5}
|
||||
x={50}
|
||||
y={50}
|
||||
title="This is an F"
|
||||
cursor="pointer">
|
||||
M64.564,38.583H54l0.008-5.834c0-3.035,0.293-4.666,4.657-4.666
|
||||
h5.833V16.429h-9.33c-11.213,0-15.159,5.654-15.159,15.16v6.994
|
||||
h-6.99v11.652h6.99v33.815H54V50.235h9.331L64.564,38.583z
|
||||
</ReactART.Shape>
|
||||
</ReactART.Group>
|
||||
</ReactART.Surface>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
it("doesn't warn when you use the right act + renderer: dom", () => {
|
||||
TestUtils.act(() => {
|
||||
TestUtils.renderIntoDocument(<App />);
|
||||
});
|
||||
});
|
||||
|
||||
it("doesn't warn when you use the right act + renderer: test", () => {
|
||||
TestRenderer.act(() => {
|
||||
TestRenderer.create(<App />);
|
||||
});
|
||||
});
|
||||
|
||||
it('resets correctly across renderers', () => {
|
||||
function Effecty() {
|
||||
React.useEffect(() => {}, []);
|
||||
return null;
|
||||
}
|
||||
TestUtils.act(() => {
|
||||
TestRenderer.act(() => {});
|
||||
expect(() => {
|
||||
TestRenderer.create(<Effecty />);
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"], {
|
||||
withoutStack: true,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('warns when using the wrong act version - test + dom: render', () => {
|
||||
expect(() => {
|
||||
TestRenderer.act(() => {
|
||||
TestUtils.renderIntoDocument(<App />);
|
||||
});
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"], {
|
||||
withoutStack: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('warns when using the wrong act version - test + dom: updates', () => {
|
||||
let setCtr;
|
||||
function Counter(props) {
|
||||
const [ctr, _setCtr] = React.useState(0);
|
||||
setCtr = _setCtr;
|
||||
return ctr;
|
||||
}
|
||||
TestUtils.renderIntoDocument(<Counter />);
|
||||
expect(() => {
|
||||
TestRenderer.act(() => {
|
||||
setCtr(1);
|
||||
});
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"]);
|
||||
});
|
||||
|
||||
it('warns when using the wrong act version - dom + test: .create()', () => {
|
||||
expect(() => {
|
||||
TestUtils.act(() => {
|
||||
TestRenderer.create(<App />);
|
||||
});
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"], {
|
||||
withoutStack: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('warns when using the wrong act version - dom + test: .update()', () => {
|
||||
const root = TestRenderer.create(<App key="one" />);
|
||||
expect(() => {
|
||||
TestUtils.act(() => {
|
||||
root.update(<App key="two" />);
|
||||
});
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"], {
|
||||
withoutStack: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('warns when using the wrong act version - dom + test: updates', () => {
|
||||
let setCtr;
|
||||
function Counter(props) {
|
||||
const [ctr, _setCtr] = React.useState(0);
|
||||
setCtr = _setCtr;
|
||||
return ctr;
|
||||
}
|
||||
TestRenderer.create(<Counter />);
|
||||
expect(() => {
|
||||
TestUtils.act(() => {
|
||||
setCtr(1);
|
||||
});
|
||||
}).toWarnDev(["It looks like you're using the wrong act()"]);
|
||||
});
|
||||
|
||||
it('does not warn when nesting react-act inside react-dom', () => {
|
||||
TestUtils.act(() => {
|
||||
TestUtils.renderIntoDocument(<ARTTest />);
|
||||
});
|
||||
});
|
||||
|
||||
it('does not warn when nesting react-act inside react-test-renderer', () => {
|
||||
TestRenderer.act(() => {
|
||||
TestRenderer.create(<ARTTest />);
|
||||
});
|
||||
});
|
||||
|
||||
it("doesn't warn if you use nested acts from different renderers", () => {
|
||||
TestRenderer.act(() => {
|
||||
TestUtils.act(() => {
|
||||
TestRenderer.create(<App />);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
if (__EXPERIMENTAL__) {
|
||||
it('warns when using createRoot() + .render', () => {
|
||||
const root = ReactDOM.createRoot(document.createElement('div'));
|
||||
expect(() => {
|
||||
TestRenderer.act(() => {
|
||||
root.render(<App />);
|
||||
});
|
||||
}).toWarnDev(
|
||||
[
|
||||
'In Concurrent or Sync modes, the "scheduler" module needs to be mocked',
|
||||
"It looks like you're using the wrong act()",
|
||||
],
|
||||
{
|
||||
withoutStack: true,
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import Header from './Header';
|
||||
import Fixtures from './fixtures';
|
||||
import '../style.css';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<Fixtures />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,18 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
const React = window.React;
|
||||
|
||||
const propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
class Fixture extends React.Component {
|
||||
render() {
|
||||
const {children} = this.props;
|
||||
|
||||
return <div className="test-fixture">{children}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
Fixture.propTypes = propTypes;
|
||||
|
||||
export default Fixture;
|
||||
@@ -1,26 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
const React = window.React;
|
||||
|
||||
const propTypes = {
|
||||
title: PropTypes.node.isRequired,
|
||||
description: PropTypes.node,
|
||||
};
|
||||
|
||||
class FixtureSet extends React.Component {
|
||||
render() {
|
||||
const {title, description, children} = this.props;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h1>{title}</h1>
|
||||
{description && <p>{description}</p>}
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FixtureSet.propTypes = propTypes;
|
||||
|
||||
export default FixtureSet;
|
||||
@@ -1,107 +0,0 @@
|
||||
import {parse, stringify} from 'query-string';
|
||||
import VersionPicker from './VersionPicker';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class Header extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
const query = parse(window.location.search);
|
||||
const version = query.version || 'local';
|
||||
const production = query.production || false;
|
||||
const versions = [version];
|
||||
|
||||
this.state = {version, versions, production};
|
||||
}
|
||||
handleVersionChange(version) {
|
||||
const query = parse(window.location.search);
|
||||
query.version = version;
|
||||
if (query.version === 'local') {
|
||||
delete query.version;
|
||||
}
|
||||
window.location.search = stringify(query);
|
||||
}
|
||||
handleProductionChange(event) {
|
||||
const query = parse(window.location.search);
|
||||
query.production = event.target.checked;
|
||||
if (!query.production) {
|
||||
delete query.production;
|
||||
}
|
||||
window.location.search = stringify(query);
|
||||
}
|
||||
handleFixtureChange(event) {
|
||||
window.location.pathname = event.target.value;
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="header__inner">
|
||||
<span className="header__logo">
|
||||
<img
|
||||
src={process.env.PUBLIC_URL + '/react-logo.svg'}
|
||||
alt="React"
|
||||
width="20"
|
||||
height="20"
|
||||
/>
|
||||
<a href="/">
|
||||
DOM Test Fixtures (v
|
||||
{React.version})
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<div className="header-controls">
|
||||
<input
|
||||
id="react_production"
|
||||
className="header__checkbox"
|
||||
type="checkbox"
|
||||
checked={this.state.production}
|
||||
onChange={this.handleProductionChange}
|
||||
/>
|
||||
<label htmlFor="react_production" className="header__label">
|
||||
Production
|
||||
</label>
|
||||
<label htmlFor="example">
|
||||
<span className="sr-only">Select an example</span>
|
||||
<select
|
||||
value={window.location.pathname}
|
||||
onChange={this.handleFixtureChange}>
|
||||
<option value="/">Home</option>
|
||||
<option value="/hydration">Hydration</option>
|
||||
<option value="/range-inputs">Range Inputs</option>
|
||||
<option value="/text-inputs">Text Inputs</option>
|
||||
<option value="/number-inputs">Number Input</option>
|
||||
<option value="/password-inputs">Password Input</option>
|
||||
<option value="/selects">Selects</option>
|
||||
<option value="/textareas">Textareas</option>
|
||||
<option value="/input-change-events">
|
||||
Input change events
|
||||
</option>
|
||||
<option value="/buttons">Buttons</option>
|
||||
<option value="/date-inputs">Date Inputs</option>
|
||||
<option value="/error-handling">Error Handling</option>
|
||||
<option value="/event-pooling">Event Pooling</option>
|
||||
<option value="/custom-elements">Custom Elements</option>
|
||||
<option value="/media-events">Media Events</option>
|
||||
<option value="/pointer-events">Pointer Events</option>
|
||||
<option value="/mouse-events">Mouse Events</option>
|
||||
<option value="/selection-events">Selection Events</option>
|
||||
<option value="/suspense">Suspense</option>
|
||||
</select>
|
||||
</label>
|
||||
<label htmlFor="global_version">
|
||||
<span className="sr-only">Select a version to test</span>
|
||||
<VersionPicker
|
||||
id="global_version"
|
||||
name="global_version"
|
||||
version={this.state.version}
|
||||
onChange={this.handleVersionChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@@ -1,58 +0,0 @@
|
||||
const React = window.React;
|
||||
const ReactDOM = window.ReactDOM;
|
||||
|
||||
class IframePortal extends React.Component {
|
||||
iframeRef = null;
|
||||
|
||||
handleRef = ref => {
|
||||
if (ref !== this.iframeRef) {
|
||||
this.iframeRef = ref;
|
||||
if (ref) {
|
||||
if (ref.contentDocument && this.props.head) {
|
||||
ref.contentDocument.head.innerHTML = this.props.head;
|
||||
}
|
||||
// Re-render must take place in the next tick (Firefox)
|
||||
setTimeout(() => {
|
||||
this.forceUpdate();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const ref = this.iframeRef;
|
||||
let portal = null;
|
||||
if (ref && ref.contentDocument) {
|
||||
portal = ReactDOM.createPortal(
|
||||
this.props.children,
|
||||
ref.contentDocument.body
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<iframe
|
||||
title="Iframe portal"
|
||||
style={{border: 'none', height: this.props.height}}
|
||||
ref={this.handleRef}
|
||||
/>
|
||||
{portal}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class IframeSubtree extends React.Component {
|
||||
warned = false;
|
||||
render() {
|
||||
if (!this.warned) {
|
||||
console.error(
|
||||
`IFrame has not yet been implemented for React v${React.version}`
|
||||
);
|
||||
this.warned = true;
|
||||
}
|
||||
return <div>{this.props.children}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default (ReactDOM.createPortal ? IframePortal : IframeSubtree);
|
||||
@@ -1,26 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
function csv(string) {
|
||||
return string.split(/\s*,\s*/);
|
||||
}
|
||||
|
||||
export default function IssueList({issues}) {
|
||||
if (!issues) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (typeof issues === 'string') {
|
||||
issues = csv(issues);
|
||||
}
|
||||
|
||||
let links = issues.reduce((memo, issue, i) => {
|
||||
return memo.concat(
|
||||
i > 0 && i < issues.length ? ', ' : null,
|
||||
<a href={'https://github.com/facebook/react/issues/' + issue} key={issue}>
|
||||
{issue}
|
||||
</a>
|
||||
);
|
||||
}, []);
|
||||
|
||||
return <span>{links}</span>;
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
import cn from 'classnames';
|
||||
import semver from 'semver';
|
||||
import PropTypes from 'prop-types';
|
||||
import IssueList from './IssueList';
|
||||
import {parse} from 'query-string';
|
||||
import {semverString} from './propTypes';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
const propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
title: PropTypes.node.isRequired,
|
||||
resolvedIn: semverString,
|
||||
introducedIn: semverString,
|
||||
resolvedBy: PropTypes.string,
|
||||
};
|
||||
|
||||
class TestCase extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
complete: false,
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = e => {
|
||||
this.setState({
|
||||
complete: e.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
title,
|
||||
description,
|
||||
introducedIn,
|
||||
resolvedIn,
|
||||
resolvedBy,
|
||||
affectedBrowsers,
|
||||
relatedIssues,
|
||||
children,
|
||||
} = this.props;
|
||||
|
||||
let {complete} = this.state;
|
||||
|
||||
const {version} = parse(window.location.search);
|
||||
const isTestFixed =
|
||||
!version || !resolvedIn || semver.gte(version, resolvedIn);
|
||||
|
||||
complete = !isTestFixed || complete;
|
||||
|
||||
return (
|
||||
<section className={cn('test-case', complete && 'test-case--complete')}>
|
||||
<h2 className="test-case__title type-subheading">
|
||||
<label>
|
||||
<input
|
||||
className="test-case__title__check"
|
||||
type="checkbox"
|
||||
checked={complete}
|
||||
onChange={this.handleChange}
|
||||
/>{' '}
|
||||
{title}
|
||||
</label>
|
||||
</h2>
|
||||
|
||||
<dl className="test-case__details">
|
||||
{introducedIn && <dt>First broken in: </dt>}
|
||||
{introducedIn && (
|
||||
<dd>
|
||||
<a
|
||||
href={'https://github.com/facebook/react/tag/v' + introducedIn}>
|
||||
<code>{introducedIn}</code>
|
||||
</a>
|
||||
</dd>
|
||||
)}
|
||||
|
||||
{resolvedIn && <dt>First supported in: </dt>}
|
||||
{resolvedIn && (
|
||||
<dd>
|
||||
<a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>
|
||||
<code>{resolvedIn}</code>
|
||||
</a>
|
||||
</dd>
|
||||
)}
|
||||
|
||||
{resolvedBy && <dt>Fixed by: </dt>}
|
||||
{resolvedBy && (
|
||||
<dd>
|
||||
<a
|
||||
href={
|
||||
'https://github.com/facebook/react/pull/' +
|
||||
resolvedBy.slice(1)
|
||||
}>
|
||||
<code>{resolvedBy}</code>
|
||||
</a>
|
||||
</dd>
|
||||
)}
|
||||
|
||||
{affectedBrowsers && <dt>Affected browsers: </dt>}
|
||||
{affectedBrowsers && <dd>{affectedBrowsers}</dd>}
|
||||
|
||||
{relatedIssues && <dt>Related Issues: </dt>}
|
||||
{relatedIssues && (
|
||||
<dd>
|
||||
<IssueList issues={relatedIssues} />
|
||||
</dd>
|
||||
)}
|
||||
</dl>
|
||||
|
||||
<p className="test-case__desc">{description}</p>
|
||||
|
||||
<div className="test-case__body">
|
||||
{!isTestFixed && (
|
||||
<p className="test-case__invalid-version">
|
||||
<strong>Note:</strong> This test case was fixed in a later version
|
||||
of React. This test is not expected to pass for the selected
|
||||
version, and that's ok!
|
||||
</p>
|
||||
)}
|
||||
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TestCase.propTypes = propTypes;
|
||||
|
||||
TestCase.Steps = class extends React.Component {
|
||||
render() {
|
||||
const {children} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<h3>Steps to reproduce:</h3>
|
||||
<ol>{children}</ol>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
TestCase.ExpectedResult = class extends React.Component {
|
||||
render() {
|
||||
const {children} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<h3>Expected Result:</h3>
|
||||
<p>{children}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
export default TestCase;
|
||||
@@ -1,41 +0,0 @@
|
||||
import getVersionTags from '../tags';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class VersionPicker extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
const version = props.version || 'local';
|
||||
const versions = [version];
|
||||
this.state = {versions};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
getVersionTags().then(tags => {
|
||||
let versions = tags.map(tag => tag.name.slice(1));
|
||||
versions = [`local`, ...versions];
|
||||
this.setState({versions});
|
||||
});
|
||||
}
|
||||
|
||||
onChange = event => {
|
||||
this.props.onChange(event.target.value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {version, id, name} = this.props;
|
||||
const {versions} = this.state;
|
||||
|
||||
return (
|
||||
<select id={id} name={name} value={version} onChange={this.onChange}>
|
||||
{versions.map(version => (
|
||||
<option key={version} value={version}>
|
||||
{version}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default VersionPicker;
|
||||
@@ -1,43 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
function onButtonClick() {
|
||||
window.alert(`This shouldn't have happened!`);
|
||||
}
|
||||
|
||||
export default class ButtonTestCases extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Buttons">
|
||||
<TestCase
|
||||
title="onClick with disabled buttons"
|
||||
description="The onClick event handler should not be invoked when clicking on a disabled buyaton">
|
||||
<TestCase.Steps>
|
||||
<li>Click on the disabled button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Nothing should happen
|
||||
</TestCase.ExpectedResult>
|
||||
<button disabled onClick={onButtonClick}>
|
||||
Click Me
|
||||
</button>
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="onClick with disabled buttons containing other elements"
|
||||
description="The onClick event handler should not be invoked when clicking on a disabled button that contains other elements">
|
||||
<TestCase.Steps>
|
||||
<li>Click on the disabled button, which contains a span</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Nothing should happen
|
||||
</TestCase.ExpectedResult>
|
||||
<button disabled onClick={onButtonClick}>
|
||||
<span>Click Me</span>
|
||||
</button>
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
|
||||
const React = window.React;
|
||||
const ReactDOM = window.ReactDOM;
|
||||
|
||||
const supportsCustomElements = typeof customElements !== 'undefined';
|
||||
|
||||
class HelloWorld extends React.Component {
|
||||
render() {
|
||||
return <h1>Hello, world!</h1>;
|
||||
}
|
||||
}
|
||||
|
||||
if (supportsCustomElements) {
|
||||
// Babel breaks web components.
|
||||
// https://github.com/w3c/webcomponents/issues/587
|
||||
// eslint-disable-next-line no-new-func
|
||||
const MyElement = new Function(
|
||||
'React',
|
||||
'ReactDOM',
|
||||
'HelloWorld',
|
||||
`
|
||||
return class MyElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const shadowRoot = this.attachShadow({ mode:'open' });
|
||||
ReactDOM.render(React.createElement(HelloWorld), shadowRoot);
|
||||
}
|
||||
}`
|
||||
)(React, ReactDOM, HelloWorld);
|
||||
customElements.define('my-element', MyElement);
|
||||
}
|
||||
|
||||
export default class ButtonTestCases extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet
|
||||
title="Custom Elements"
|
||||
description="Support for Custom Element DOM standards.">
|
||||
<TestCase title="Rendering into shadow root">
|
||||
<TestCase.ExpectedResult>
|
||||
You should see "Hello, World" printed below.{' '}
|
||||
</TestCase.ExpectedResult>
|
||||
{supportsCustomElements ? (
|
||||
<my-element />
|
||||
) : (
|
||||
<div>This browser does not support custom elements.</div>
|
||||
)}
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import Fixture from '../../Fixture';
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
import SwitchDateTestCase from './switch-date-test-case';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class DateInputFixtures extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Dates">
|
||||
<TestCase title="Switching between date and datetime-local">
|
||||
<TestCase.Steps>
|
||||
<li>Type a date into the date picker</li>
|
||||
<li>Toggle "Switch type"</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The month, day, and year values should correctly transfer. The
|
||||
hours/minutes/seconds should not be discarded.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<Fixture>
|
||||
<SwitchDateTestCase />
|
||||
</Fixture>
|
||||
</TestCase>
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DateInputFixtures;
|
||||
@@ -1,67 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
const startDate = new Date();
|
||||
/**
|
||||
* This test case was originally provided by @richsoni,
|
||||
* https://github.com/facebook/react/issues/8116
|
||||
*/
|
||||
class SwitchDateTestCase extends React.Component {
|
||||
state = {
|
||||
fullDate: false,
|
||||
date: startDate,
|
||||
};
|
||||
|
||||
render() {
|
||||
const attrs = this.inputAttrs();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<b>{attrs.type}</b> input type ({attrs.value})
|
||||
</p>
|
||||
<p>
|
||||
<input
|
||||
type={attrs.type}
|
||||
value={attrs.value}
|
||||
onChange={this.onInputChange}
|
||||
/>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.fullDate}
|
||||
onChange={this.updateFullDate}
|
||||
/>{' '}
|
||||
Switch type
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
inputAttrs() {
|
||||
if (this.state.fullDate) {
|
||||
return {
|
||||
type: 'datetime-local',
|
||||
value: this.state.date.toISOString().replace(/\..*Z/, ''),
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
type: 'date',
|
||||
value: this.state.date.toISOString().replace(/T.*/, ''),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
onInputChange = ({target: {value}}) => {
|
||||
const date = value ? new Date(Date.parse(value)) : startDate;
|
||||
this.setState({date});
|
||||
};
|
||||
|
||||
updateFullDate = () => {
|
||||
this.setState({
|
||||
fullDate: !this.state.fullDate,
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export default SwitchDateTestCase;
|
||||
@@ -1,377 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import TestCase from '../../TestCase';
|
||||
|
||||
const React = window.React;
|
||||
const ReactDOM = window.ReactDOM;
|
||||
|
||||
function BadRender(props) {
|
||||
props.doThrow();
|
||||
}
|
||||
|
||||
class BadDidMount extends React.Component {
|
||||
componentDidMount() {
|
||||
this.props.doThrow();
|
||||
}
|
||||
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
class ErrorBoundary extends React.Component {
|
||||
static defaultProps = {
|
||||
buttonText: 'Trigger error',
|
||||
badChildType: BadRender,
|
||||
};
|
||||
state = {
|
||||
shouldThrow: false,
|
||||
didThrow: false,
|
||||
error: null,
|
||||
};
|
||||
componentDidCatch(error) {
|
||||
this.setState({error, didThrow: true});
|
||||
}
|
||||
triggerError = () => {
|
||||
this.setState({
|
||||
shouldThrow: true,
|
||||
});
|
||||
};
|
||||
render() {
|
||||
if (this.state.didThrow) {
|
||||
if (this.state.error) {
|
||||
return <p>Captured an error: {this.state.error.message}</p>;
|
||||
} else {
|
||||
return <p>Captured an error: {'' + this.state.error}</p>;
|
||||
}
|
||||
}
|
||||
if (this.state.shouldThrow) {
|
||||
const BadChild = this.props.badChildType;
|
||||
return <BadChild doThrow={this.props.doThrow} />;
|
||||
}
|
||||
return <button onClick={this.triggerError}>{this.props.buttonText}</button>;
|
||||
}
|
||||
}
|
||||
class Example extends React.Component {
|
||||
state = {key: 0};
|
||||
restart = () => {
|
||||
this.setState(state => ({key: state.key + 1}));
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.restart}>Reset</button>
|
||||
<ErrorBoundary
|
||||
buttonText={this.props.buttonText}
|
||||
doThrow={this.props.doThrow}
|
||||
key={this.state.key}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TriggerErrorAndCatch extends React.Component {
|
||||
container = document.createElement('div');
|
||||
|
||||
triggerErrorAndCatch = () => {
|
||||
try {
|
||||
ReactDOM.flushSync(() => {
|
||||
ReactDOM.render(
|
||||
<BadRender
|
||||
doThrow={() => {
|
||||
throw new Error('Caught error');
|
||||
}}
|
||||
/>,
|
||||
this.container
|
||||
);
|
||||
});
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<button onClick={this.triggerErrorAndCatch}>
|
||||
Trigger error and catch
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function silenceWindowError(event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
class SilenceErrors extends React.Component {
|
||||
state = {
|
||||
silenceErrors: false,
|
||||
};
|
||||
componentDidMount() {
|
||||
if (this.state.silenceErrors) {
|
||||
window.addEventListener('error', silenceWindowError);
|
||||
}
|
||||
}
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (!prevState.silenceErrors && this.state.silenceErrors) {
|
||||
window.addEventListener('error', silenceWindowError);
|
||||
} else if (prevState.silenceErrors && !this.state.silenceErrors) {
|
||||
window.removeEventListener('error', silenceWindowError);
|
||||
}
|
||||
}
|
||||
componentWillUnmount() {
|
||||
if (this.state.silenceErrors) {
|
||||
window.removeEventListener('error', silenceWindowError);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
value={this.state.silenceErrors}
|
||||
onChange={() =>
|
||||
this.setState(state => ({
|
||||
silenceErrors: !state.silenceErrors,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
Silence errors
|
||||
</label>
|
||||
{this.state.silenceErrors && (
|
||||
<div>
|
||||
{this.props.children}
|
||||
<br />
|
||||
<hr />
|
||||
<b style={{color: 'red'}}>
|
||||
Don't forget to uncheck "Silence errors" when you're done with
|
||||
this test!
|
||||
</b>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
class GetEventTypeDuringUpdate extends React.Component {
|
||||
state = {};
|
||||
|
||||
onClick = () => {
|
||||
this.expectUpdate = true;
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.expectUpdate) {
|
||||
this.expectUpdate = false;
|
||||
this.setState({eventType: window.event.type});
|
||||
setTimeout(() => {
|
||||
this.setState({cleared: !window.event});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="test-fixture">
|
||||
<button onClick={this.onClick}>Trigger callback in event.</button>
|
||||
{this.state.eventType ? (
|
||||
<p>
|
||||
Got <b>{this.state.eventType}</b> event.
|
||||
</p>
|
||||
) : (
|
||||
<p>Got no event</p>
|
||||
)}
|
||||
{this.state.cleared ? (
|
||||
<p>Event cleared correctly.</p>
|
||||
) : (
|
||||
<p>Event failed to clear.</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SilenceRecoverableError extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SilenceErrors>
|
||||
<ErrorBoundary
|
||||
badChildType={BadRender}
|
||||
buttonText={'Throw (render phase)'}
|
||||
doThrow={() => {
|
||||
throw new Error('Silenced error (render phase)');
|
||||
}}
|
||||
/>
|
||||
<ErrorBoundary
|
||||
badChildType={BadDidMount}
|
||||
buttonText={'Throw (commit phase)'}
|
||||
doThrow={() => {
|
||||
throw new Error('Silenced error (commit phase)');
|
||||
}}
|
||||
/>
|
||||
</SilenceErrors>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TrySilenceFatalError extends React.Component {
|
||||
container = document.createElement('div');
|
||||
|
||||
triggerErrorAndCatch = () => {
|
||||
try {
|
||||
ReactDOM.flushSync(() => {
|
||||
ReactDOM.render(
|
||||
<BadRender
|
||||
doThrow={() => {
|
||||
throw new Error('Caught error');
|
||||
}}
|
||||
/>,
|
||||
this.container
|
||||
);
|
||||
});
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SilenceErrors>
|
||||
<button onClick={this.triggerErrorAndCatch}>Throw fatal error</button>
|
||||
</SilenceErrors>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class ErrorHandlingTestCases extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Error handling">
|
||||
<TestCase
|
||||
title="Break on uncaught exceptions"
|
||||
description="In DEV, errors should be treated as uncaught, even though React catches them internally">
|
||||
<TestCase.Steps>
|
||||
<li>Open the browser DevTools</li>
|
||||
<li>Make sure "Pause on exceptions" is enabled</li>
|
||||
<li>Make sure "Pause on caught exceptions" is disabled</li>
|
||||
<li>Click the "Trigger error" button</li>
|
||||
<li>Click the reset button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
The DevTools should pause at the line where the error was thrown, in
|
||||
the BadRender component. After resuming, the "Trigger error" button
|
||||
should be replaced with "Captured an error: Oops!" Clicking reset
|
||||
should reset the test case.
|
||||
<br />
|
||||
<br />
|
||||
In the console, you should see <b>two</b> messages: the actual error
|
||||
("Oops") printed natively by the browser with its JavaScript stack,
|
||||
and our addendum ("The above error occurred in BadRender component")
|
||||
with a React component stack.
|
||||
</TestCase.ExpectedResult>
|
||||
<Example
|
||||
doThrow={() => {
|
||||
throw new Error('Oops!');
|
||||
}}
|
||||
/>
|
||||
</TestCase>
|
||||
<TestCase title="Throwing null" description="">
|
||||
<TestCase.Steps>
|
||||
<li>Click the "Trigger error" button</li>
|
||||
<li>Click the reset button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
The "Trigger error" button should be replaced with "Captured an
|
||||
error: null". Clicking reset should reset the test case.
|
||||
</TestCase.ExpectedResult>
|
||||
<Example
|
||||
doThrow={() => {
|
||||
throw null; // eslint-disable-line no-throw-literal
|
||||
}}
|
||||
/>
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Cross-origin errors (development mode only)"
|
||||
description="">
|
||||
<TestCase.Steps>
|
||||
<li>Click the "Trigger cross-origin error" button</li>
|
||||
<li>Click the reset button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
The "Trigger error" button should be replaced with "Captured an
|
||||
error: A cross-origin error was thrown [...]". The actual error
|
||||
message should be logged to the console: "Uncaught Error: Expected
|
||||
true to be false".
|
||||
</TestCase.ExpectedResult>
|
||||
<Example
|
||||
buttonText="Trigger cross-origin error"
|
||||
doThrow={() => {
|
||||
// The `expect` module is loaded via unpkg, so that this assertion
|
||||
// triggers a cross-origin error
|
||||
window.expect(true).toBe(false);
|
||||
}}
|
||||
/>
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Errors are logged even if they're caught (development mode only)"
|
||||
description="">
|
||||
<TestCase.Steps>
|
||||
<li>Click the "Trigger render error and catch" button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Open the console. "Uncaught Error: Caught error" should have been
|
||||
logged by the browser. You should also see our addendum ("The above
|
||||
error...").
|
||||
</TestCase.ExpectedResult>
|
||||
<TriggerErrorAndCatch />
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Recoverable errors can be silenced with preventDefault (development mode only)"
|
||||
description="">
|
||||
<TestCase.Steps>
|
||||
<li>Check the "Silence errors" checkbox below</li>
|
||||
<li>Click the "Throw (render phase)" button</li>
|
||||
<li>Click the "Throw (commit phase)" button</li>
|
||||
<li>Uncheck the "Silence errors" checkbox</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Open the console. You shouldn't see <b>any</b> messages in the
|
||||
console: neither the browser error, nor our "The above error"
|
||||
addendum, from either of the buttons. The buttons themselves should
|
||||
get replaced by two labels: "Captured an error: Silenced error
|
||||
(render phase)" and "Captured an error: Silenced error (commit
|
||||
phase)".
|
||||
</TestCase.ExpectedResult>
|
||||
<SilenceRecoverableError />
|
||||
</TestCase>
|
||||
<TestCase
|
||||
title="Fatal errors cannot be silenced with preventDefault (development mode only)"
|
||||
description="">
|
||||
<TestCase.Steps>
|
||||
<li>Check the "Silence errors" checkbox below</li>
|
||||
<li>Click the "Throw fatal error" button</li>
|
||||
<li>Uncheck the "Silence errors" checkbox</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
Open the console. "Error: Caught error" should have been logged by
|
||||
React. You should also see our addendum ("The above error...").
|
||||
</TestCase.ExpectedResult>
|
||||
<TrySilenceFatalError />
|
||||
</TestCase>
|
||||
|
||||
{window.hasOwnProperty('event') ? (
|
||||
<TestCase
|
||||
title="Error handling does not interfere with window.event"
|
||||
description="">
|
||||
<TestCase.Steps>
|
||||
<li>Click the "Trigger callback in event" button</li>
|
||||
</TestCase.Steps>
|
||||
<TestCase.ExpectedResult>
|
||||
You should see "Got <b>click</b> event" and "Event cleared
|
||||
successfully" below.
|
||||
</TestCase.ExpectedResult>
|
||||
<GetEventTypeDuringUpdate />
|
||||
</TestCase>
|
||||
) : null}
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
class HitBox extends React.Component {
|
||||
state = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
onMouseMove: n => n,
|
||||
};
|
||||
|
||||
onMove = event => {
|
||||
this.setState({x: event.clientX, y: event.clientY});
|
||||
this.props.onMouseMove(event);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {x, y} = this.state;
|
||||
|
||||
const boxStyle = {
|
||||
padding: '10px 20px',
|
||||
border: '1px solid #d9d9d9',
|
||||
margin: '10px 0 20px',
|
||||
};
|
||||
|
||||
return (
|
||||
<div onMouseMove={this.onMove} style={boxStyle}>
|
||||
<p>Trace your mouse over this box.</p>
|
||||
<p>
|
||||
Last movement: {x},{y}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HitBox;
|
||||
@@ -1,18 +0,0 @@
|
||||
import FixtureSet from '../../FixtureSet';
|
||||
import MouseMove from './mouse-move';
|
||||
import Persistence from './persistence';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class EventPooling extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<FixtureSet title="Event Pooling">
|
||||
<MouseMove />
|
||||
<Persistence />
|
||||
</FixtureSet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default EventPooling;
|
||||
@@ -1,47 +0,0 @@
|
||||
import TestCase from '../../TestCase';
|
||||
import HitBox from './hit-box';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class MouseMove extends React.Component {
|
||||
state = {
|
||||
events: [],
|
||||
};
|
||||
|
||||
checkEvent = event => {
|
||||
let {events} = this.state;
|
||||
|
||||
if (event.type === 'mousemove' && events.indexOf(event) === -1) {
|
||||
this.setState({events: events.concat(event)});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {events} = this.state;
|
||||
|
||||
return (
|
||||
<TestCase title="Mouse Move" description="">
|
||||
<TestCase.Steps>
|
||||
<li>Mouse over the box below</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
Mousemove should share the same instance of the event between
|
||||
dispatches.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<HitBox onMouseMove={this.checkEvent} />
|
||||
|
||||
<p>
|
||||
Was the event pooled?{' '}
|
||||
<b>
|
||||
{events.length ? (events.length <= 1 ? 'Yes' : 'No') : 'Unsure'} (
|
||||
{events.length} events)
|
||||
</b>
|
||||
</p>
|
||||
</TestCase>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MouseMove;
|
||||
@@ -1,62 +0,0 @@
|
||||
import TestCase from '../../TestCase';
|
||||
import HitBox from './hit-box';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
class Persistence extends React.Component {
|
||||
state = {
|
||||
persisted: 0,
|
||||
pooled: [],
|
||||
};
|
||||
|
||||
addPersisted = event => {
|
||||
let {persisted, pooled} = this.state;
|
||||
|
||||
event.persist();
|
||||
|
||||
if (event.type === 'mousemove') {
|
||||
this.setState({
|
||||
persisted: persisted + 1,
|
||||
pooled: pooled.filter(e => e !== event),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
addPooled = event => {
|
||||
let {pooled} = this.state;
|
||||
|
||||
if (event.type === 'mousemove' && pooled.indexOf(event) === -1) {
|
||||
this.setState({pooled: pooled.concat(event)});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {pooled, persisted} = this.state;
|
||||
|
||||
return (
|
||||
<TestCase title="Persistence" description="">
|
||||
<TestCase.Steps>
|
||||
<li>Mouse over the pooled event box</li>
|
||||
<li>Mouse over the persisted event box</li>
|
||||
</TestCase.Steps>
|
||||
|
||||
<TestCase.ExpectedResult>
|
||||
The pool size should not increase above 1, but reduce to 0 when
|
||||
hovering over the persisted region.
|
||||
</TestCase.ExpectedResult>
|
||||
|
||||
<h2>Add Pooled Event:</h2>
|
||||
<HitBox onMouseMove={this.addPooled} />
|
||||
|
||||
<h2>Add Persisted Event:</h2>
|
||||
<HitBox onMouseMove={this.addPersisted} />
|
||||
|
||||
<p>Pool size: {pooled.length}</p>
|
||||
|
||||
<p>Persisted size: {persisted}</p>
|
||||
</TestCase>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Persistence;
|
||||
@@ -1,117 +0,0 @@
|
||||
const React = window.React;
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="container">
|
||||
<h1>DOM Test Fixtures</h1>
|
||||
<p>
|
||||
Use this site to test browser quirks and other behavior that can not be
|
||||
captured through unit tests.
|
||||
</p>
|
||||
<section>
|
||||
<h2>Tested Browsers</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser</th>
|
||||
<th>Versions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Chrome - Desktop</td>
|
||||
<td>
|
||||
49<sup>*</sup>, Latest
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome - Android</td>
|
||||
<td>Latest</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox Desktop</td>
|
||||
<td>
|
||||
<a href="https://www.mozilla.org/en-US/firefox/organizations/">
|
||||
ESR<sup>†</sup>
|
||||
</a>, Latest
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Internet Explorer</td>
|
||||
<td>9, 10, 11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Microsoft Edge</td>
|
||||
<td>14, Latest</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Safari - Desktop</td>
|
||||
<td>7, Latest</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Safari - iOS</td>
|
||||
<td>7, Latest</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<footer>
|
||||
<small>* Chrome 49 is the last release for Windows XP.</small>
|
||||
<br />
|
||||
<small>
|
||||
† Firefox Extended Support Release (ESR) is used by many
|
||||
institutions.
|
||||
</small>
|
||||
</footer>
|
||||
</section>
|
||||
<section>
|
||||
<h2>How do I test browsers I don't have access to?</h2>
|
||||
<p>
|
||||
Getting test coverage across all of these browsers can be difficult,
|
||||
particularly for older versions of evergreen browsers. Fortunately
|
||||
there are a handful of tools that make browser testing easy.
|
||||
</p>
|
||||
<section>
|
||||
<h3>Paid services</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://browserstack.com">BrowserStack</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://saucelabs.com">Sauce Labs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://crossbrowsertesting.com/">CrossBrowserTesting</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
These services provide access to all browsers we test, however they
|
||||
cost money. There is no obligation to pay for them. Maintainers have
|
||||
access to a BrowserStack subscription; feel free to contact a
|
||||
maintainer or mention browsers where extra testing is required.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Browser downloads</h3>
|
||||
<p>A handful of browsers are available for download directly:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">
|
||||
Internet Explorer (9-11) and MS Edge virtual machines
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.chromium.org/getting-involved/download-chromium#TOC-Downloading-old-builds-of-Chrome-Chromium">
|
||||
Chromium snapshots (for older versions of Chrome)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.mozilla.org/en-US/firefox/organizations/">
|
||||
Firefox Extended Support Release (ESR)
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
import {findDOMNode} from '../../../find-dom-node';
|
||||
|
||||
const React = window.React;
|
||||
|
||||
export class CodeEditor extends React.Component {
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.textarea = findDOMNode(this);
|
||||
|
||||
// Important: CodeMirror incorrectly lays out the editor
|
||||
// if it executes before CSS has loaded
|
||||
// https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
|
||||
Promise.all([
|
||||
import('codemirror'),
|
||||
import('codemirror/mode/jsx/jsx'),
|
||||
import('codemirror/lib/codemirror.css'),
|
||||
import('./codemirror-paraiso-dark.css'),
|
||||
]).then(([CodeMirror]) => this.install(CodeMirror));
|
||||
}
|
||||
|
||||
install(CodeMirror) {
|
||||
if (!this.textarea) {
|
||||
return;
|
||||
}
|
||||
|
||||
const {onChange} = this.props;
|
||||
|
||||
this.editor = CodeMirror.fromTextArea(this.textarea, {
|
||||
mode: 'jsx',
|
||||
theme: 'paraiso-dark',
|
||||
lineNumbers: true,
|
||||
});
|
||||
|
||||
this.editor.on('change', function(doc) {
|
||||
onChange(doc.getValue());
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.editor) {
|
||||
this.editor.toTextArea();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<textarea
|
||||
defaultValue={this.props.code}
|
||||
autoComplete="off"
|
||||
hidden={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent IE9 from raising an error on an unrecognized element:
|
||||
* See https://github.com/facebook/react/issues/13610
|
||||
*/
|
||||
const supportsDetails = !(
|
||||
document.createElement('details') instanceof HTMLUnknownElement
|
||||
);
|
||||
|
||||
export class CodeError extends React.Component {
|
||||
render() {
|
||||
const {error, className} = this.props;
|
||||
|
||||
if (!error) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (supportsDetails) {
|
||||
const [summary, ...body] = error.message.split(/\n+/g);
|
||||
|
||||
if (body.length >= 0) {
|
||||
return <div className={className}>{summary}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<details className={className}>
|
||||
<summary>{summary}</summary>
|
||||
{body.join('\n')}
|
||||
</details>
|
||||
);
|
||||
}
|
||||
|
||||
return <div className={className}>{error.message}</div>;
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
/**
|
||||
* Babel works across all browsers, however it requires many polyfills.
|
||||
*/
|
||||
|
||||
import 'core-js/es6/weak-map';
|
||||
import 'core-js/es6/weak-set';
|
||||
import 'core-js/es6/number';
|
||||
import 'core-js/es6/string';
|
||||
import 'core-js/es6/array';
|
||||
import 'core-js/modules/es6.object.set-prototype-of';
|
||||
|
||||
import {transform} from '@babel/standalone';
|
||||
|
||||
const presets = ['es2015', 'stage-3', 'react'];
|
||||
|
||||
export function compile(raw) {
|
||||
return transform(raw, {presets}).code;
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
/**
|
||||
* Name: Paraíso (Dark)
|
||||
* Author: Jan T. Sott
|
||||
* License: Creative Commons Attribution-ShareAlike 4.0 Unported License.
|
||||
* https://creativecommons.org/licenses/by-sa/4.0/deed.en_US
|
||||
*
|
||||
* Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror)
|
||||
* Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
|
||||
*/
|
||||
|
||||
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
|
||||
.cm-s-paraiso-dark div.CodeMirror-selected { background: #41323f; }
|
||||
.cm-s-paraiso-dark .CodeMirror-line::selection, .cm-s-paraiso-dark .CodeMirror-line > span::selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::selection { background: rgba(65, 50, 63, .99); }
|
||||
.cm-s-paraiso-dark .CodeMirror-line::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(65, 50, 63, .99); }
|
||||
.cm-s-paraiso-dark .CodeMirror-gutters { background: #2f1e2e; border-right: 0px; }
|
||||
.cm-s-paraiso-dark .CodeMirror-guttermarker { color: #ef6155; }
|
||||
.cm-s-paraiso-dark .CodeMirror-guttermarker-subtle { color: #776e71; }
|
||||
.cm-s-paraiso-dark .CodeMirror-linenumber { color: #776e71; }
|
||||
.cm-s-paraiso-dark .CodeMirror-cursor { border-left: 1px solid #8d8687; }
|
||||
|
||||
.cm-s-paraiso-dark span.cm-comment { color: #e96ba8; }
|
||||
.cm-s-paraiso-dark span.cm-atom { color: #815ba4; }
|
||||
.cm-s-paraiso-dark span.cm-number { color: #815ba4; }
|
||||
|
||||
.cm-s-paraiso-dark span.cm-property, .cm-s-paraiso-dark span.cm-attribute { color: #48b685; }
|
||||
.cm-s-paraiso-dark span.cm-keyword { color: #ef6155; }
|
||||
.cm-s-paraiso-dark span.cm-string { color: #fec418; }
|
||||
|
||||
.cm-s-paraiso-dark span.cm-variable { color: #48b685; }
|
||||
.cm-s-paraiso-dark span.cm-variable-2 { color: #06b6ef; }
|
||||
.cm-s-paraiso-dark span.cm-def { color: #f99b15; }
|
||||
.cm-s-paraiso-dark span.cm-bracket { color: #b9b6b0; }
|
||||
.cm-s-paraiso-dark span.cm-tag { color: #ef6155; }
|
||||
.cm-s-paraiso-dark span.cm-link { color: #815ba4; }
|
||||
.cm-s-paraiso-dark span.cm-error { background: #ef6155; color: #8d8687; }
|
||||
|
||||
.cm-s-paraiso-dark .CodeMirror-activeline-background { background: #4D344A; }
|
||||
.cm-s-paraiso-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user