From 34c1970e2b381e02cd3242a2c05f2721d82a433d Mon Sep 17 00:00:00 2001 From: Andy Tsai Date: Wed, 21 Mar 2018 11:31:28 +0800 Subject: [PATCH] add react-loadable and react-loading --- .babelrc | 7 +- package.json | 2 + src/containers/Loading/Loading.js | 15 +++ src/containers/Loading/Loading.less | 6 ++ src/containers/Loading/package.json | 3 + src/containers/index.js | 10 +- yarn.lock | 140 +++++++++++++++++++++++++++- 7 files changed, 174 insertions(+), 9 deletions(-) create mode 100644 src/containers/Loading/Loading.js create mode 100644 src/containers/Loading/Loading.less create mode 100644 src/containers/Loading/package.json diff --git a/.babelrc b/.babelrc index ce899db4..24199ad0 100644 --- a/.babelrc +++ b/.babelrc @@ -1,7 +1,7 @@ { "presets": [ "env", - "react", + "react", "stage-0" ], "plugins": [ @@ -9,6 +9,7 @@ "transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", - "react-hot-loader/babel" + "react-hot-loader/babel", + "emotion" ] -} \ No newline at end of file +} diff --git a/package.json b/package.json index 08bfb322..eaace309 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,9 @@ "react": "^16.2.0", "react-dom": "^16.2.0", "react-hot-loader": "^4.0.0", + "react-loadable": "^5.3.1", "react-router-dom": "^4.2.2", + "react-spinners": "^0.2.6", "rimraf": "^2.6.2", "style-loader": "^0.20.3", "webpack": "^4.1.1", diff --git a/src/containers/Loading/Loading.js b/src/containers/Loading/Loading.js new file mode 100644 index 00000000..b79ec0a3 --- /dev/null +++ b/src/containers/Loading/Loading.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; +import { RiseLoader } from 'react-spinners'; +import './Loading.less'; + +const Loading = () => ( +
+ +
+); + +export default Loading; diff --git a/src/containers/Loading/Loading.less b/src/containers/Loading/Loading.less new file mode 100644 index 00000000..2e312ab9 --- /dev/null +++ b/src/containers/Loading/Loading.less @@ -0,0 +1,6 @@ +.sweet-loading { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/containers/Loading/package.json b/src/containers/Loading/package.json new file mode 100644 index 00000000..3e21ff81 --- /dev/null +++ b/src/containers/Loading/package.json @@ -0,0 +1,3 @@ +{ + "main": "Loading.js" +} diff --git a/src/containers/index.js b/src/containers/index.js index 0b1bf9b4..e65200e1 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -1,10 +1,18 @@ import React from 'react'; // import package import { HashRouter as Router, Route, Switch } from 'react-router-dom'; +import Loadable from 'react-loadable'; // import relative path -import Home from './Home'; +import Loading from './Loading'; import NotFound from './NotFound'; +const LoadComponent = loader => Loadable({ + loader, + loading: Loading, +}) + +const Home = LoadComponent(() => import('./Home')); + const Main = () => ( diff --git a/yarn.lock b/yarn.lock index ef8aa37f..0398c2e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -32,6 +32,13 @@ dependencies: "@babel/types" "7.0.0-beta.42" +"@babel/helper-module-imports@7.0.0-beta.32": + version "7.0.0-beta.32" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.32.tgz#8126fc024107c226879841b973677a4f4e510a03" + dependencies: + "@babel/types" "7.0.0-beta.32" + lodash "^4.2.0" + "@babel/helper-split-export-declaration@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.42.tgz#0d0d5254220a9cc4e7e226240306b939dc210ee7" @@ -70,6 +77,14 @@ invariant "^2.2.0" lodash "^4.2.0" +"@babel/types@7.0.0-beta.32": + version "7.0.0-beta.32" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.32.tgz#c317d0ecc89297b80bbcb2f50608e31f6452a5ff" + dependencies: + esutils "^2.0.2" + lodash "^4.2.0" + to-fast-properties "^2.0.0" + "@babel/types@7.0.0-beta.42", "@babel/types@^7.0.0-beta.40": version "7.0.0-beta.42" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.42.tgz#1e2118767684880f6963801b272fd2b3348efacc" @@ -575,6 +590,12 @@ babel-loader@^7.1.4: loader-utils "^1.0.2" mkdirp "^0.5.1" +babel-macros@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/babel-macros/-/babel-macros-1.2.0.tgz#39e47ed6d286d4a98f1948d8bab45dac17e4e2d4" + dependencies: + cosmiconfig "3.1.0" + babel-messages@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e" @@ -587,6 +608,19 @@ babel-plugin-check-es2015-constants@^6.22.0: dependencies: babel-runtime "^6.22.0" +babel-plugin-emotion@^8.0.12, babel-plugin-emotion@^8.0.6: + version "8.0.12" + resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-8.0.12.tgz#2ed844001416b0ae2ff787a06b1804ec5f531c89" + dependencies: + "@babel/helper-module-imports" "7.0.0-beta.32" + babel-macros "^1.2.0" + babel-plugin-syntax-jsx "^6.18.0" + convert-source-map "^1.5.0" + emotion-utils "^8.0.12" + find-root "^1.1.0" + source-map "^0.5.7" + touch "^1.0.0" + babel-plugin-syntax-async-functions@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" @@ -631,7 +665,7 @@ babel-plugin-syntax-function-bind@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46" -babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: +babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -1488,6 +1522,10 @@ chalk@~0.4.0: has-color "~0.1.0" strip-ansi "~0.1.0" +change-emitter@^0.1.2: + version "0.1.6" + resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515" + chardet@^0.4.0: version "0.4.2" resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2" @@ -1823,6 +1861,15 @@ core-util-is@1.0.2, core-util-is@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" +cosmiconfig@3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-3.1.0.tgz#640a94bf9847f321800403cd273af60665c73397" + dependencies: + is-directory "^0.3.1" + js-yaml "^3.9.0" + parse-json "^3.0.0" + require-from-string "^2.0.1" + cosmiconfig@^2.1.0, cosmiconfig@^2.1.1: version "2.2.2" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892" @@ -2315,6 +2362,19 @@ emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" +emotion-utils@^8.0.12: + version "8.0.12" + resolved "https://registry.yarnpkg.com/emotion-utils/-/emotion-utils-8.0.12.tgz#5e0fd72db3008f26ce4f80b1972df08841df2168" + +emotion@^8.0.8: + version "8.0.12" + resolved "https://registry.yarnpkg.com/emotion/-/emotion-8.0.12.tgz#03de11ce26b1b2401c334b94d438652124c514c6" + dependencies: + babel-plugin-emotion "^8.0.12" + emotion-utils "^8.0.12" + stylis "^3.3.2" + stylis-rule-sheet "^0.0.5" + encodeurl@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" @@ -2729,7 +2789,7 @@ faye-websocket@~0.11.0: dependencies: websocket-driver ">=0.5.1" -fbjs@^0.8.16: +fbjs@^0.8.1, fbjs@^0.8.16: version "0.8.16" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" dependencies: @@ -2811,6 +2871,10 @@ find-cache-dir@^1.0.0: make-dir "^1.0.0" pkg-dir "^2.0.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + find-up@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" @@ -3292,7 +3356,7 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" -hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.5.0: +hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" @@ -3877,7 +3941,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" -js-yaml@^3.4.3, js-yaml@^3.9.1: +js-yaml@^3.4.3, js-yaml@^3.9.0, js-yaml@^3.9.1: version "3.11.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef" dependencies: @@ -4641,6 +4705,12 @@ nopt@^4.0.1: abbrev "1" osenv "^0.1.4" +nopt@~1.0.10: + version "1.0.10" + resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee" + dependencies: + abbrev "1" + normalize-package-data@^2.3.2, normalize-package-data@^2.3.4: version "2.4.0" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f" @@ -4946,6 +5016,12 @@ parse-json@^2.2.0: dependencies: error-ex "^1.2.0" +parse-json@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-3.0.0.tgz#fa6f47b18e23826ead32f263e744d0e1e847fb13" + dependencies: + error-ex "^1.3.1" + parse-json@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0" @@ -5428,7 +5504,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.4, prop-types@^15.6.0: +prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0: version "15.6.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" dependencies: @@ -5578,6 +5654,13 @@ react-dom@^16.2.0: object-assign "^4.1.1" prop-types "^15.6.0" +react-emotion@^8.0.6: + version "8.0.12" + resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-8.0.12.tgz#3dd94c151197e2e3399e34e3e118df141b5ebb7b" + dependencies: + babel-plugin-emotion "^8.0.12" + emotion-utils "^8.0.12" + react-hot-loader@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.0.0.tgz#3452fa9bc0d0ba9dfc5b0ccfa25101ca8dbd2de2" @@ -5588,6 +5671,12 @@ react-hot-loader@^4.0.0: prop-types "^15.6.0" shallowequal "^1.0.2" +react-loadable@^5.3.1: + version "5.3.1" + resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.3.1.tgz#9699e9a08fed49bacd69caaa282034b62a76bcdd" + dependencies: + prop-types "^15.5.0" + react-router-dom@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d" @@ -5611,6 +5700,16 @@ react-router@^4.2.0: prop-types "^15.5.4" warning "^3.0.0" +react-spinners@^0.2.6: + version "0.2.6" + resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.2.6.tgz#15ba678d07636c3cf760563b0efb7b2566f465cb" + dependencies: + babel-plugin-emotion "^8.0.6" + emotion "^8.0.8" + prop-types "^15.5.10" + react-emotion "^8.0.6" + recompose "0.26.0" + react@^16.2.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" @@ -5727,6 +5826,15 @@ rechoir@^0.6.2: dependencies: resolve "^1.1.6" +recompose@0.26.0: + version "0.26.0" + resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30" + dependencies: + change-emitter "^0.1.2" + fbjs "^0.8.1" + hoist-non-react-statics "^2.3.1" + symbol-observable "^1.0.4" + redent@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde" @@ -5882,6 +5990,10 @@ require-from-string@^1.1.0: version "1.2.1" resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418" +require-from-string@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.1.tgz#c545233e9d7da6616e9d59adfb39fc9f588676ff" + require-main-filename@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1" @@ -6484,6 +6596,14 @@ style-loader@^0.20.3: loader-utils "^1.1.0" schema-utils "^0.4.5" +stylis-rule-sheet@^0.0.5: + version "0.0.5" + resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f" + +stylis@^3.3.2: + version "3.5.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1" + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" @@ -6520,6 +6640,10 @@ symbol-observable@^0.2.2: version "0.2.4" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40" +symbol-observable@^1.0.4: + version "1.2.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" + table@4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36" @@ -6640,6 +6764,12 @@ toposort@^1.0.0: version "1.0.6" resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec" +touch@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de" + dependencies: + nopt "~1.0.10" + tough-cookie@~2.3.0: version "2.3.4" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"