From 23e00caf72cd3f90f7a424838dcc75546c539544 Mon Sep 17 00:00:00 2001 From: piglovesyou Date: Sat, 2 Nov 2019 10:16:59 +0900 Subject: [PATCH 1/4] yarn add react@latest react-dom@latest --- package.json | 4 ++-- yarn.lock | 25 +++++++++++++++++-------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 66fdddde9..1c54d60f7 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,8 @@ "pretty-error": "^2.1.1", "prop-types": "^15.6.2", "query-string": "^6.1.0", - "react": "^16.5.2", - "react-dom": "^16.5.2", + "react": "^16.11.0", + "react-dom": "^16.11.0", "sequelize": "^5.15.1", "serialize-javascript": "^1.5.0", "source-map-support": "^0.5.9", diff --git a/yarn.lock b/yarn.lock index 11268ee76..cd400fe64 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7600,14 +7600,15 @@ react-dev-utils@^5.0.2: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@^16.5.2: - version "16.5.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7" +react-dom@^16.11.0: + version "16.11.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.11.0.tgz#7e7c4a5a85a569d565c2462f5d345da2dd849af5" + integrity sha512-nrRyIUE1e7j8PaXSPtyRKtz+2y9ubW/ghNgqKFHHAHaeP0fpF5uXR+sq8IMRHC+ZUxw7W9NyCDTBtwWxvkb0iA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - schedule "^0.5.0" + scheduler "^0.17.0" react-error-overlay@^4.0.1: version "4.0.1" @@ -7626,14 +7627,14 @@ react-test-renderer@^16.5.2: react-is "^16.5.2" schedule "^0.5.0" -react@^16.5.2: - version "16.5.2" - resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42" +react@^16.11.0: + version "16.11.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb" + integrity sha512-M5Y8yITaLmU0ynd0r1Yvfq98Rmll6q8AxaEe88c8e7LxO8fZ2cNgmFt0aGAS9wzf1Ao32NKXtCl+/tVVtkxq6g== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - schedule "^0.5.0" read-cache@^1.0.0: version "1.0.0" @@ -8197,6 +8198,14 @@ schedule@^0.5.0: dependencies: object-assign "^4.1.1" +scheduler@^0.17.0: + version "0.17.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe" + integrity sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^0.4.4, schema-utils@^0.4.5: version "0.4.5" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e" From 096fb8425e7a2245a211275ae83257097553dc19 Mon Sep 17 00:00:00 2001 From: piglovesyou Date: Sat, 2 Nov 2019 10:24:25 +0900 Subject: [PATCH 2/4] yarn add isomorphic-style-loader@latest --- package.json | 2 +- yarn.lock | 121 +++++++++++++++++++-------------------------------- 2 files changed, 45 insertions(+), 78 deletions(-) diff --git a/package.json b/package.json index 1c54d60f7..785760301 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "express-jwt": "^5.3.1", "graphql": "^0.13.2", "history": "^4.7.2", - "isomorphic-style-loader": "^4.0.0", + "isomorphic-style-loader": "^5.1.0", "jsonwebtoken": "^8.3.0", "node-fetch": "^2.2.0", "normalize.css": "^8.0.0", diff --git a/yarn.lock b/yarn.lock index cd400fe64..18ed26552 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1180,10 +1180,6 @@ arrify@^1.0.0, arrify@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" -asap@~2.0.3: - version "2.0.6" - resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" - asn1.js@^4.0.0: version "4.10.1" resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0" @@ -1436,7 +1432,7 @@ babel-register@^6.26.0: mkdirp "^0.5.1" source-map-support "^0.4.15" -babel-runtime@^6.22.0, babel-runtime@^6.25.0, babel-runtime@^6.26.0: +babel-runtime@^6.22.0, babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" dependencies: @@ -1553,6 +1549,11 @@ big.js@^3.1.3: version "3.2.0" resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e" +big.js@^5.2.2: + version "5.2.2" + resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" + integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== + binary-extensions@^1.0.0: version "1.11.0" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205" @@ -2297,10 +2298,6 @@ copy-descriptor@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" -core-js@^1.0.0: - version "1.2.7" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" - core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.7: version "2.5.7" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e" @@ -2867,12 +2864,6 @@ encodeurl@~1.0.1, encodeurl@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" -encoding@^0.1.11: - version "0.1.12" - resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" - dependencies: - iconv-lite "~0.4.13" - end-of-stream@^1.0.0, end-of-stream@^1.1.0: version "1.4.1" resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43" @@ -3503,18 +3494,6 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.16: - version "0.8.17" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" - dependencies: - core-js "^1.0.0" - isomorphic-fetch "^2.1.1" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - setimmediate "^1.0.5" - ua-parser-js "^0.7.18" - figures@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e" @@ -4103,9 +4082,12 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^2.2.2: - version "2.5.5" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" +hoist-non-react-statics@^3.0.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" + integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA== + dependencies: + react-is "^16.7.0" home-or-tmp@^2.0.0: version "2.0.0" @@ -4226,7 +4208,7 @@ iconv-lite@0.4.19: version "0.4.19" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b" -iconv-lite@0.4.23, iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13: +iconv-lite@0.4.23, iconv-lite@^0.4.17, iconv-lite@^0.4.4: version "0.4.23" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63" dependencies: @@ -4682,7 +4664,7 @@ is-root@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-root/-/is-root-1.0.0.tgz#07b6c233bc394cd9d02ba15c966bd6660d6342d5" -is-stream@^1.0.1, is-stream@^1.1.0: +is-stream@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" @@ -4752,21 +4734,14 @@ isobject@^3.0.0, isobject@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" -isomorphic-fetch@^2.1.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" - dependencies: - node-fetch "^1.0.1" - whatwg-fetch ">=0.10.0" - -isomorphic-style-loader@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/isomorphic-style-loader/-/isomorphic-style-loader-4.0.0.tgz#0d8faa12885e2830918c54815042c0e3b55dc38d" +isomorphic-style-loader@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/isomorphic-style-loader/-/isomorphic-style-loader-5.1.0.tgz#4845f90bb9828f3dfecc82d0574c9ed01bbaba2d" + integrity sha512-6KBucdRvmz5U5SMrdDUhDyTQ6nRmCjzjopJBDVkfx1+xsoiyNYVlcY1OqSH1SHKYRzVWhqWXIBGgeTl5L7gViw== dependencies: - babel-runtime "^6.25.0" - hoist-non-react-statics "^2.2.2" - loader-utils "^1.1.0" - prop-types "^15.5.10" + hoist-non-react-statics "^3.0.0" + loader-utils "^1.2.3" + react "^16.3.0" isstream@~0.1.2: version "0.1.2" @@ -5236,6 +5211,13 @@ json5@^0.5.0, json5@^0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821" +json5@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe" + integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow== + dependencies: + minimist "^1.2.0" + jsonfile@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66" @@ -5474,6 +5456,15 @@ loader-utils@1.1.0, loader-utils@^1.0.2, loader-utils@^1.1.0: emojis-list "^2.0.0" json5 "^0.5.0" +loader-utils@^1.2.3: + version "1.2.3" + resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7" + integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA== + dependencies: + big.js "^5.2.2" + emojis-list "^2.0.0" + json5 "^1.0.1" + localtunnel@1.9.0: version "1.9.0" resolved "https://registry.yarnpkg.com/localtunnel/-/localtunnel-1.9.0.tgz#8ffecdcf8c8a14f62df1056cf9d54acbb0bb9a8f" @@ -6048,13 +6039,6 @@ nice-try@^1.0.4: version "1.0.5" resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" -node-fetch@^1.0.1: - version "1.7.3" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" - dependencies: - encoding "^0.1.11" - is-stream "^1.0.1" - node-fetch@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.2.0.tgz#4ee79bde909262f9775f731e3656d0db55ced5b5" @@ -7381,12 +7365,6 @@ promise-inflight@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3" -promise@^7.1.1: - version "7.3.1" - resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" - dependencies: - asap "~2.0.3" - prompts@^0.1.9: version "0.1.14" resolved "https://registry.yarnpkg.com/prompts/-/prompts-0.1.14.tgz#a8e15c612c5c9ec8f8111847df3337c9cbd443b2" @@ -7394,14 +7372,6 @@ prompts@^0.1.9: kleur "^2.0.1" sisteransi "^0.1.1" -prop-types@^15.5.10: - version "15.6.1" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" - dependencies: - fbjs "^0.8.16" - loose-envify "^1.3.1" - object-assign "^4.1.1" - prop-types@^15.6.2: version "15.6.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" @@ -7618,6 +7588,11 @@ react-is@^16.5.2: version "16.5.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3" +react-is@^16.7.0: + version "16.11.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa" + integrity sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw== + react-test-renderer@^16.5.2: version "16.5.2" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.5.2.tgz#92e9d2c6f763b9821b2e0b22f994ee675068b5ae" @@ -7627,7 +7602,7 @@ react-test-renderer@^16.5.2: react-is "^16.5.2" schedule "^0.5.0" -react@^16.11.0: +react@^16.11.0, react@^16.3.0: version "16.11.0" resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb" integrity sha512-M5Y8yITaLmU0ynd0r1Yvfq98Rmll6q8AxaEe88c8e7LxO8fZ2cNgmFt0aGAS9wzf1Ao32NKXtCl+/tVVtkxq6g== @@ -8333,7 +8308,7 @@ set-value@^2.0.0: is-plain-object "^2.0.3" split-string "^3.0.1" -setimmediate@^1.0.4, setimmediate@^1.0.5: +setimmediate@^1.0.4: version "1.0.5" resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" @@ -9154,10 +9129,6 @@ ua-parser-js@0.7.17: version "0.7.17" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac" -ua-parser-js@^0.7.18: - version "0.7.18" - resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed" - uc.micro@^1.0.1, uc.micro@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.5.tgz#0c65f15f815aa08b560a61ce8b4db7ffc3f45376" @@ -9627,10 +9598,6 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3: dependencies: iconv-lite "0.4.19" -whatwg-fetch@>=0.10.0: - version "2.0.4" - resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f" - whatwg-fetch@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb" From e644a61d1dbfc362dbdea577f9dc8ab5cfbf6213 Mon Sep 17 00:00:00 2001 From: mglace Date: Mon, 18 Feb 2019 22:25:07 -0500 Subject: [PATCH 3/4] git cherry-pick 812d8ac9a414209333e8cbd586e71bca33bb4a77 With respect I used @mglace 's react-starter-kit folk * change deps versions (adopted higher ones) * include minimum change of react-style-guide.md Fixes kriasoft/react-starter-kit#1715 --- docs/react-style-guide.md | 32 ++++++++++++------------- src/client.js | 23 ++++++++++-------- src/components/App.js | 25 +++++++++++-------- src/components/ApplicationContext.js | 9 +++++++ src/components/Feedback/Feedback.js | 2 +- src/components/Footer/Footer.js | 2 +- src/components/Header/Header.js | 2 +- src/components/Layout/Layout.js | 2 +- src/components/Navigation/Navigation.js | 2 +- src/components/Page/Page.js | 2 +- src/routes/admin/Admin.js | 2 +- src/routes/contact/Contact.js | 2 +- src/routes/error/ErrorPage.js | 2 +- src/routes/home/Home.js | 2 +- src/routes/login/Login.js | 2 +- src/routes/not-found/NotFound.js | 2 +- src/routes/register/Register.js | 2 +- src/server.js | 5 ++-- 18 files changed, 69 insertions(+), 51 deletions(-) create mode 100644 src/components/ApplicationContext.js diff --git a/docs/react-style-guide.md b/docs/react-style-guide.md index 280641a66..745b45d3f 100644 --- a/docs/react-style-guide.md +++ b/docs/react-style-guide.md @@ -6,21 +6,21 @@ ### Table of Contents -* [Separate folder per UI component](#separate-folder-per-ui-component) -* [Prefer using functional components](#prefer-using-functional-components) -* [Use CSS Modules](#use-css-modules) -* [Use higher-order components](#use-higher-order-components) +- [Separate folder per UI component](#separate-folder-per-ui-component) +- [Prefer using functional components](#prefer-using-functional-components) +- [Use CSS Modules](#use-css-modules) +- [Use higher-order components](#use-higher-order-components) ### Separate folder per UI component -* Place each major UI component along with its resources in a separate folder\ +- Place each major UI component along with its resources in a separate folder\ This will make it easier to find related resources for any particular UI element (CSS, images, unit tests, localization files etc.). Removing such components during refactorings should also be easy. -* Avoid having CSS, images and other resource files shared between multiple +- Avoid having CSS, images and other resource files shared between multiple components.\ This will make your code more maintainable, easy to refactor. -* Add `package.json` file into each component's folder.\ +- Add `package.json` file into each component's folder.\ This will allow to easily reference such components from other places in your code.\ Use `import Nav from '../Navigation'` instead of `import Nav from '../Navigation/Navigation.js'` @@ -46,7 +46,7 @@ For more information google for ### Prefer using functional components -* Prefer using stateless functional components whenever possible.\ +- Prefer using stateless functional components whenever possible.\ Components that don't use state are better to be written as simple pure functions. ```jsx @@ -69,16 +69,16 @@ Navigation.propTypes = { items: PropTypes.array.isRequired }; ### Use CSS Modules -* Use CSS Modules\ +- Use CSS Modules\ This will allow using short CSS class names and at the same time avoid conflicts. -* Keep CSS simple and declarative. Avoid loops, mixins etc. -* Feel free to use variables in CSS via +- Keep CSS simple and declarative. Avoid loops, mixins etc. +- Feel free to use variables in CSS via [precss](https://github.com/jonathantneal/precss) plugin for [PostCSS](https://github.com/postcss/postcss) -* Prefer CSS class selectors instead of element and `id` selectors (see +- Prefer CSS class selectors instead of element and `id` selectors (see [BEM](https://bem.info/)) -* Avoid nested CSS selectors (see [BEM](https://bem.info/)) -* When in doubt, use `.root { }` class name for the root elements of your +- Avoid nested CSS selectors (see [BEM](https://bem.info/)) +- When in doubt, use `.root { }` class name for the root elements of your components ```scss @@ -127,7 +127,7 @@ Navigation.propTypes = { items: PropTypes.array.isRequired }; // Navigation.js import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Navigation.scss'; function Navigation() { @@ -156,7 +156,7 @@ export default withStyles(Navigation, s); ### Use higher-order components -* Use higher-order components (HOC) to extend existing React components.\ +- Use higher-order components (HOC) to extend existing React components.\ Here is an example: ```js diff --git a/src/client.js b/src/client.js index a6234d95d..4b0a7b6fb 100644 --- a/src/client.js +++ b/src/client.js @@ -19,18 +19,19 @@ import history from './history'; import { updateMeta } from './DOMUtils'; import router from './router'; +// Enables critical path CSS rendering +// https://github.com/kriasoft/isomorphic-style-loader +const insertCss = (...styles) => { + // eslint-disable-next-line no-underscore-dangle + const removeCss = styles.map(x => x._insertCss()); + return () => { + removeCss.forEach(f => f()); + }; +}; + // Global (context) variables that can be easily accessed from any React component // https://facebook.github.io/react/docs/context.html const context = { - // Enables critical path CSS rendering - // https://github.com/kriasoft/isomorphic-style-loader - insertCss: (...styles) => { - // eslint-disable-next-line no-underscore-dangle - const removeCss = styles.map(x => x._insertCss()); - return () => { - removeCss.forEach(f => f()); - }; - }, // Universal HTTP client fetch: createFetch(fetch, { baseUrl: window.App.apiUrl, @@ -78,7 +79,9 @@ async function onLocationChange(location, action) { const renderReactApp = isInitialRender ? ReactDOM.hydrate : ReactDOM.render; appInstance = renderReactApp( - {route.component}, + + {route.component} + , container, () => { if (isInitialRender) { diff --git a/src/components/App.js b/src/components/App.js index f20711f26..651438ed7 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -10,10 +10,10 @@ import React from 'react'; import PropTypes from 'prop-types'; +import StyleContext from 'isomorphic-style-loader/StyleContext'; +import ApplicationContext from './ApplicationContext'; + const ContextType = { - // Enables critical path CSS rendering - // https://github.com/kriasoft/isomorphic-style-loader - insertCss: PropTypes.func.isRequired, // Universal HTTP client fetch: PropTypes.func.isRequired, pathname: PropTypes.string.isRequired, @@ -44,20 +44,25 @@ const ContextType = { */ class App extends React.PureComponent { static propTypes = { + // Enables critical path CSS rendering + // https://github.com/kriasoft/isomorphic-style-loader + insertCss: PropTypes.func.isRequired, context: PropTypes.shape(ContextType).isRequired, children: PropTypes.element.isRequired, }; - static childContextTypes = ContextType; - - getChildContext() { - return this.props.context; - } - render() { + const { context, insertCss } = this.props; + // NOTE: If you need to add or modify header, footer etc. of the app, // please do that inside the Layout component. - return React.Children.only(this.props.children); + return ( + + + {React.Children.only(this.props.children)} + + + ); } } diff --git a/src/components/ApplicationContext.js b/src/components/ApplicationContext.js new file mode 100644 index 000000000..beb4844f5 --- /dev/null +++ b/src/components/ApplicationContext.js @@ -0,0 +1,9 @@ +import React from 'react'; + +const ApplicationContext = React.createContext({ + fetch: () => { + throw new Error('Fetch method not initialized.'); + }, +}); + +export default ApplicationContext; diff --git a/src/components/Feedback/Feedback.js b/src/components/Feedback/Feedback.js index 6c9712493..c22042aac 100644 --- a/src/components/Feedback/Feedback.js +++ b/src/components/Feedback/Feedback.js @@ -8,7 +8,7 @@ */ import React from 'react'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Feedback.css'; class Feedback extends React.Component { diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 5b6cc5de9..b861410c7 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -8,7 +8,7 @@ */ import React from 'react'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Footer.css'; import Link from '../Link'; diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 13a48096d..cfcb83745 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -8,7 +8,7 @@ */ import React from 'react'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Header.css'; import Link from '../Link'; import Navigation from '../Navigation'; diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js index 6c88b352e..05b8d957e 100644 --- a/src/components/Layout/Layout.js +++ b/src/components/Layout/Layout.js @@ -9,7 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; // external-global styles must be imported in your JS. import normalizeCss from 'normalize.css'; diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js index 56a1a7825..97fd0f7d3 100644 --- a/src/components/Navigation/Navigation.js +++ b/src/components/Navigation/Navigation.js @@ -9,7 +9,7 @@ import React from 'react'; import cx from 'classnames'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Navigation.css'; import Link from '../Link'; diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index 291cfbffd..55ab20c9a 100644 --- a/src/components/Page/Page.js +++ b/src/components/Page/Page.js @@ -9,7 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Page.css'; class Page extends React.Component { diff --git a/src/routes/admin/Admin.js b/src/routes/admin/Admin.js index c29775429..132883833 100644 --- a/src/routes/admin/Admin.js +++ b/src/routes/admin/Admin.js @@ -9,7 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Admin.css'; class Admin extends React.Component { diff --git a/src/routes/contact/Contact.js b/src/routes/contact/Contact.js index 5c8f398ab..923749a54 100644 --- a/src/routes/contact/Contact.js +++ b/src/routes/contact/Contact.js @@ -9,7 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Contact.css'; class Contact extends React.Component { diff --git a/src/routes/error/ErrorPage.js b/src/routes/error/ErrorPage.js index aff9d0794..59bca0f41 100644 --- a/src/routes/error/ErrorPage.js +++ b/src/routes/error/ErrorPage.js @@ -9,7 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './ErrorPage.css'; class ErrorPage extends React.Component { diff --git a/src/routes/home/Home.js b/src/routes/home/Home.js index c4e4b8f60..7c89ffaa6 100644 --- a/src/routes/home/Home.js +++ b/src/routes/home/Home.js @@ -9,7 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Home.css'; class Home extends React.Component { diff --git a/src/routes/login/Login.js b/src/routes/login/Login.js index 852919ce4..5991f44ae 100644 --- a/src/routes/login/Login.js +++ b/src/routes/login/Login.js @@ -9,7 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Login.css'; class Login extends React.Component { diff --git a/src/routes/not-found/NotFound.js b/src/routes/not-found/NotFound.js index 437b2ba00..e6bbf2ec7 100644 --- a/src/routes/not-found/NotFound.js +++ b/src/routes/not-found/NotFound.js @@ -9,7 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './NotFound.css'; class NotFound extends React.Component { diff --git a/src/routes/register/Register.js b/src/routes/register/Register.js index 3a5a61809..0a7fc257a 100644 --- a/src/routes/register/Register.js +++ b/src/routes/register/Register.js @@ -9,7 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Register.css'; class Register extends React.Component { diff --git a/src/server.js b/src/server.js index 2bad532b5..f8143028b 100644 --- a/src/server.js +++ b/src/server.js @@ -143,7 +143,6 @@ app.get('*', async (req, res, next) => { // Global (context) variables that can be easily accessed from any React component // https://facebook.github.io/react/docs/context.html const context = { - insertCss, fetch, // The twins below are wild, be careful! pathname: req.path, @@ -159,7 +158,9 @@ app.get('*', async (req, res, next) => { const data = { ...route }; data.children = ReactDOM.renderToString( - {route.component}, + + {route.component} + , ); data.styles = [{ id: 'css', cssText: [...css].join('') }]; From de480def141ebb1b236136ca228af04fecd10f35 Mon Sep 17 00:00:00 2001 From: piglovesyou Date: Sat, 2 Nov 2019 13:27:10 +0900 Subject: [PATCH 4/4] fix: update react-test-renderer too --- package.json | 2 +- src/components/Layout/Layout.test.js | 2 +- yarn.lock | 23 +++++++---------------- 3 files changed, 9 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 785760301..6a6a4d13b 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "react-deep-force-update": "^2.1.3", "react-dev-utils": "^5.0.2", "react-error-overlay": "^4.0.1", - "react-test-renderer": "^16.5.2", + "react-test-renderer": "^16.11.0", "rimraf": "^2.6.2", "stylelint": "^9.5.0", "stylelint-config-standard": "^18.2.0", diff --git a/src/components/Layout/Layout.test.js b/src/components/Layout/Layout.test.js index f2e249378..eb8929f27 100644 --- a/src/components/Layout/Layout.test.js +++ b/src/components/Layout/Layout.test.js @@ -19,7 +19,7 @@ describe('Layout', () => { test('renders children correctly', () => { const wrapper = renderer .create( - {}, fetch: () => {}, pathname: '' }}> + {}, pathname: '' }} insertCss={() => {}}>
diff --git a/yarn.lock b/yarn.lock index 18ed26552..b0f631081 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7584,23 +7584,20 @@ react-error-overlay@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89" -react-is@^16.5.2: - version "16.5.2" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3" - -react-is@^16.7.0: +react-is@^16.7.0, react-is@^16.8.6: version "16.11.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa" integrity sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw== -react-test-renderer@^16.5.2: - version "16.5.2" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.5.2.tgz#92e9d2c6f763b9821b2e0b22f994ee675068b5ae" +react-test-renderer@^16.11.0: + version "16.11.0" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.11.0.tgz#72574566496462c808ac449b0287a4c0a1a7d8f8" + integrity sha512-nh9gDl8R4ut+ZNNb2EeKO5VMvTKxwzurbSMuGBoKtjpjbg8JK/u3eVPVNi1h1Ue+eYK9oSzJjb+K3lzLxyA4ag== dependencies: object-assign "^4.1.1" prop-types "^15.6.2" - react-is "^16.5.2" - schedule "^0.5.0" + react-is "^16.8.6" + scheduler "^0.17.0" react@^16.11.0, react@^16.3.0: version "16.11.0" @@ -8167,12 +8164,6 @@ sax@^1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" -schedule@^0.5.0: - version "0.5.0" - resolved "https://registry.yarnpkg.com/schedule/-/schedule-0.5.0.tgz#c128fffa0b402488b08b55ae74bb9df55cc29cc8" - dependencies: - object-assign "^4.1.1" - scheduler@^0.17.0: version "0.17.0" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"