Skip to content

Commit

Permalink
Merge pull request #6457 from marmelab/improve-examples-observability
Browse files Browse the repository at this point in the history
[Demo] Improve learning experience by keeping component names in React DevTools
  • Loading branch information
djhi authored Jul 22, 2021
2 parents a387f3a + 8d368fa commit 75b7dd0
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 18 deletions.
21 changes: 21 additions & 0 deletions examples/crm/build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* Rewrite Webpack config without ejecting CRA thanks to rewire
* @link https://stackoverflow.com/questions/55165466/how-to-build-a-production-version-of-react-without-minification
*/
const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

/**
* Do not mangle component names in production, for better learning experience
* @link https://kentcdodds.com/blog/profile-a-react-app-for-performance#disable-function-name-mangling
*/
config.optimization.minimizer[0].options.terserOptions.keep_classnames = true;
config.optimization.minimizer[0].options.terserOptions.keep_fnames = true;

/**
* Do not disable component profiling in production, for better learning experience
* @link https://kentcdodds.com/blog/profile-a-react-app-for-performance#update-the-webpack-config-for-production-profiling
*/
config.resolve.alias['react-dom$'] = 'react-dom/profiling';
config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
5 changes: 3 additions & 2 deletions examples/crm/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,18 @@
"@types/react": "^16.9.13",
"@types/react-beautiful-dnd": "^13.0.0",
"@types/react-dom": "^16.9.9",
"rewire": "^5.0.0",
"source-map-explorer": "^2.0.0",
"typescript": "^4.0.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build": "node ./build.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"homepage": "https://marmelab.com/react-admin-crm",
"homepage": ".",
"browserslist": {
"production": [
">0.2%",
Expand Down
21 changes: 21 additions & 0 deletions examples/demo/build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* Rewrite Webpack config without ejecting CRA thanks to rewire
* @link https://stackoverflow.com/questions/55165466/how-to-build-a-production-version-of-react-without-minification
*/
const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

/**
* Do not mangle component names in production, for better learning experience
* @link https://kentcdodds.com/blog/profile-a-react-app-for-performance#disable-function-name-mangling
*/
config.optimization.minimizer[0].options.terserOptions.keep_classnames = true;
config.optimization.minimizer[0].options.terserOptions.keep_fnames = true;

/**
* Do not disable component profiling in production, for better learning experience
* @link https://kentcdodds.com/blog/profile-a-react-app-for-performance#update-the-webpack-config-for-production-profiling
*/
config.resolve.alias['react-dom$'] = 'react-dom/profiling';
config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
9 changes: 5 additions & 4 deletions examples/demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,24 +33,25 @@
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
"build": "node ./build.js",
"eject": "react-scripts test"
},
"homepage": "https://marmelab.com/react-admin-demo",
"homepage": ".",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"devDependencies": {
"@types/fetch-mock": "^7.3.2",
"@types/classnames": "^2.2.9",
"@types/fetch-mock": "^7.3.2",
"@types/jest": "^26.0.19",
"@types/node": "^12.12.14",
"@types/query-string": "5.1.0",
"@types/react": "^16.9.13",
"@types/react-dom": "^16.9.9",
"rewire": "^5.0.0",
"source-map-explorer": "^2.0.0",
"typescript": "^4.0.2"
}
Expand Down
102 changes: 90 additions & 12 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -8043,6 +8043,13 @@ eslint-scope@^5.1.1:
esrecurse "^4.3.0"
estraverse "^4.1.1"

eslint-utils@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
dependencies:
eslint-visitor-keys "^1.1.0"

eslint-utils@^2.0.0, eslint-utils@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
Expand Down Expand Up @@ -8076,6 +8083,49 @@ eslint-webpack-plugin@^2.1.0:
micromatch "^4.0.2"
schema-utils "^2.7.0"

eslint@^6.8.0:
version "6.8.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
dependencies:
"@babel/code-frame" "^7.0.0"
ajv "^6.10.0"
chalk "^2.1.0"
cross-spawn "^6.0.5"
debug "^4.0.1"
doctrine "^3.0.0"
eslint-scope "^5.0.0"
eslint-utils "^1.4.3"
eslint-visitor-keys "^1.1.0"
espree "^6.1.2"
esquery "^1.0.1"
esutils "^2.0.2"
file-entry-cache "^5.0.1"
functional-red-black-tree "^1.0.1"
glob-parent "^5.0.0"
globals "^12.1.0"
ignore "^4.0.6"
import-fresh "^3.0.0"
imurmurhash "^0.1.4"
inquirer "^7.0.0"
is-glob "^4.0.0"
js-yaml "^3.13.1"
json-stable-stringify-without-jsonify "^1.0.1"
levn "^0.3.0"
lodash "^4.17.14"
minimatch "^3.0.4"
mkdirp "^0.5.1"
natural-compare "^1.4.0"
optionator "^0.8.3"
progress "^2.0.0"
regexpp "^2.0.1"
semver "^6.1.2"
strip-ansi "^5.2.0"
strip-json-comments "^3.0.1"
table "^5.2.3"
text-table "^0.2.0"
v8-compile-cache "^2.0.3"

eslint@^7.11.0:
version "7.12.1"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.12.1.tgz#bd9a81fa67a6cfd51656cdb88812ce49ccec5801"
Expand Down Expand Up @@ -8161,6 +8211,15 @@ eslint@^7.7.0:
text-table "^0.2.0"
v8-compile-cache "^2.0.3"

espree@^6.1.2:
version "6.2.1"
resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
dependencies:
acorn "^7.1.1"
acorn-jsx "^5.2.0"
eslint-visitor-keys "^1.1.0"

espree@^7.2.0, espree@^7.3.0:
version "7.3.0"
resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.0.tgz#dc30437cf67947cf576121ebd780f15eeac72348"
Expand All @@ -8175,6 +8234,13 @@ esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==

esquery@^1.0.1:
version "1.4.0"
resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
dependencies:
estraverse "^5.1.0"

esquery@^1.2.0:
version "1.3.1"
resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
Expand Down Expand Up @@ -10446,7 +10512,7 @@ inquirer@^5.1.0:
strip-ansi "^4.0.0"
through "^2.3.6"

inquirer@^7.1.0:
inquirer@^7.0.0, inquirer@^7.1.0:
version "7.3.3"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
Expand Down Expand Up @@ -12081,6 +12147,14 @@ leven@^3.1.0:
resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==

levn@^0.3.0, levn@~0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
dependencies:
prelude-ls "~1.1.2"
type-check "~0.3.2"

levn@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
Expand All @@ -12089,14 +12163,6 @@ levn@^0.4.1:
prelude-ls "^1.2.1"
type-check "~0.4.0"

levn@~0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
dependencies:
prelude-ls "~1.1.2"
type-check "~0.3.2"

line-column@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
Expand Down Expand Up @@ -13717,7 +13783,7 @@ optimize-css-assets-webpack-plugin@5.0.4:
cssnano "^4.1.10"
last-call-webpack-plugin "^3.0.0"

optionator@^0.8.1:
optionator@^0.8.1, optionator@^0.8.3:
version "0.8.3"
resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
Expand Down Expand Up @@ -16151,6 +16217,11 @@ regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
define-properties "^1.1.3"
es-abstract "^1.17.0-next.1"

regexpp@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==

regexpp@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.0.0.tgz#dd63982ee3300e67b41c1956f850aa680d9d330e"
Expand Down Expand Up @@ -16533,6 +16604,13 @@ reusify@^1.0.4:
resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==

rewire@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/rewire/-/rewire-5.0.0.tgz#c4e6558206863758f6234d8f11321793ada2dbff"
integrity sha512-1zfitNyp9RH5UDyGGLe9/1N0bMlPQ0WrX0Tmg11kMHBpqwPJI4gfPpP7YngFyLbFmhXh19SToAG0sKKEFcOIJA==
dependencies:
eslint "^6.8.0"

rework-visit@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a"
Expand Down Expand Up @@ -16888,7 +16966,7 @@ semver@7.x, semver@^7.1.3, semver@^7.3.4:
dependencies:
lru-cache "^6.0.0"

semver@^6.0.0, semver@^6.3.0:
semver@^6.0.0, semver@^6.1.2, semver@^6.3.0:
version "6.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
Expand Down Expand Up @@ -17779,7 +17857,7 @@ strip-indent@^3.0.0:
dependencies:
min-indent "^1.0.0"

strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
strip-json-comments@^3.0.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
Expand Down

0 comments on commit 75b7dd0

Please sign in to comment.