├── config
    ├── jest
    │   ├── CSSStub.js
    │   └── FileStub.js
    ├── polyfills.js
    ├── env.js
    ├── paths.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── .travis.yml
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── components
    │   ├── frame
    │   │   ├── frame.css
    │   │   └── index.js
    │   ├── favicon.svg
    │   ├── tab-close.css
    │   ├── tab-close.js
    │   ├── star.js
    │   ├── setting.js
    │   ├── back.js
    │   ├── forward.js
    │   ├── reload.js
    │   ├── tabs
    │   │   ├── tabs.css
    │   │   └── index.js
    │   ├── tab
    │   │   ├── index.js
    │   │   └── tab.css
    │   └── navigator
    │   │   ├── input.js
    │   │   ├── index.js
    │   │   └── navigator.css
    ├── reducers
    │   ├── index.js
    │   ├── active-tab.js
    │   ├── is-input-focus.js
    │   ├── input.js
    │   └── tabs.js
    ├── containers
    │   ├── app.css
    │   └── app.js
    ├── index.js
    ├── util.js
    └── actions
    │   └── index.js
├── .gitignore
├── scripts
    ├── test.js
    ├── build.js
    └── start.js
├── LICENSE
├── README.md
└── package.json


/config/jest/CSSStub.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 | 


--------------------------------------------------------------------------------
/config/jest/FileStub.js:
--------------------------------------------------------------------------------
1 | module.exports = "test-file-stub";
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js: node
3 | script: yarn lint
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wujunze/chrome-ui/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/components/frame/frame.css:
--------------------------------------------------------------------------------
 1 | .content {
 2 |   flex-grow: 1;
 3 |   display: flex;
 4 | 
 5 |   & iframe {
 6 |     border: 0;
 7 |     width: 100%
 8 |   }
 9 | }
10 | 
11 | .hidden {
12 |   display: none;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
2 |   <path fill="#5a5a5a" d="M 18 2 H 6 v 28 h 20 V 10 l -8 -8 Z m 5 8 h -5 V 5 l 5 5 Z m 1 18 H 8 V 4 h 8 v 8 h 8 v 16 Z"></path>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | 
 6 | # testing
 7 | coverage
 8 | 
 9 | # production
10 | build
11 | 
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log
16 | yarn-error.log
17 | 


--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux'
 2 | import tabs from './tabs'
 3 | import activeTab from './active-tab'
 4 | import input from './input'
 5 | import isInputFocus from './is-input-focus'
 6 | 
 7 | export default combineReducers({
 8 |   tabs,
 9 |   activeTab,
10 |   input,
11 |   isInputFocus,
12 | })
13 | 


--------------------------------------------------------------------------------
/src/components/tab-close.css:
--------------------------------------------------------------------------------
 1 | .close {
 2 |   width: 12px;
 3 |   height: 12px;
 4 |   border-radius: 50%;
 5 |   z-index: 100;
 6 |   align-self: center;
 7 |   margin-left: 2px;
 8 |   margin-right: 2px;
 9 |   & path {
10 |     fill: #555;
11 |   }
12 |   &:hover {
13 |     background: #e25c4d;
14 |     & path {
15 |       fill: #fff;
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/reducers/active-tab.js:
--------------------------------------------------------------------------------
 1 | import { ADD_TAB, SELECT_TAB, CLOSE_TAB } from '../actions'
 2 | 
 3 | export default function activeTab(state = 0, action) {
 4 |   switch (action.type) {
 5 |     case ADD_TAB:
 6 |     case SELECT_TAB:
 7 |       return action.id
 8 |     case CLOSE_TAB:
 9 |       return action.activeId
10 |     default:
11 |       return state
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/tab-close.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import React from 'react'
 3 | import style from './tab-close.css'
 4 | 
 5 | const TabClose = props => (
 6 |   <svg
 7 |     viewBox="0 0 24 24"
 8 |     className={style.close}
 9 |     {...props}
10 |   >
11 |     <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
12 |   </svg>
13 | )
14 | 
15 | export default TabClose
16 | 


--------------------------------------------------------------------------------
/src/components/star.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import React from 'react'
 3 | 
 4 | const Star = () => (
 5 |   <svg viewBox="0 0 16 16">
 6 |     <path d="M 8 4 L 9.12 6.79 L 12 7.05 L 9.82 9.04 L 10.47 12 L 8 10.43 L 5.53 12 L 6.18 9.04 L 4 7.05 L 6.88 6.79 L 8 4 M 8 0.5 L 5.89 5.56 L 0.5 6.03 L 4.59 9.64 L 3.37 15 L 8 12.16 L 12.64 15 L 11.41 9.64 L 15.5 6.03 L 10.11 5.56 L 8 0.5 Z"></path>
 7 |   </svg>
 8 | )
 9 | 
10 | export default Star
11 | 


--------------------------------------------------------------------------------
/src/reducers/is-input-focus.js:
--------------------------------------------------------------------------------
 1 | import { FOCUS_INPUT, BLUR_INPUT, ADD_TAB, SELECT_TAB, CLOSE_TAB } from '../actions'
 2 | 
 3 | export default function isInputFocus(state = false, action) {
 4 |   switch (action.type) {
 5 |     case FOCUS_INPUT:
 6 |     case ADD_TAB:
 7 |       return true
 8 |     case BLUR_INPUT:
 9 |     case SELECT_TAB:
10 |     case CLOSE_TAB:
11 |       return false
12 |     default:
13 |       return state
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/reducers/input.js:
--------------------------------------------------------------------------------
 1 | import { CHANGE_INPUT, SELECT_TAB, ADD_TAB, FOCUS_INPUT, CLOSE_TAB } from '../actions'
 2 | 
 3 | export default function input(state = '', action) {
 4 |   switch (action.type) {
 5 |     case CHANGE_INPUT:
 6 |     case FOCUS_INPUT:
 7 |       return action.value
 8 |     case SELECT_TAB:
 9 |       return action.url
10 |     case CLOSE_TAB:
11 |       return action.url
12 |     case ADD_TAB:
13 |       return ''
14 |     default:
15 |       return state
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/setting.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import React from 'react'
 3 | 
 4 | const Setting = () => (
 5 |   <svg viewBox="0 0 16 16">
 6 |     <path d="M 7 3.5 C 7 2.67 7.67 2 8.5 2 C 9.33 2 10 2.67 10 3.5 C 10 4.33 9.33 5 8.5 5 C 7.67 5 7 4.33 7 3.5 Z M 7 8.5 C 7 7.67 7.67 7 8.5 7 C 9.33 7 10 7.67 10 8.5 C 10 9.33 9.33 10 8.5 10 C 7.67 10 7 9.33 7 8.5 Z M 7 13.5 C 7 12.67 7.67 12 8.5 12 C 9.33 12 10 12.67 10 13.5 C 10 14.33 9.33 15 8.5 15 C 7.67 15 7 14.33 7 13.5 Z"></path>
 7 |   </svg>
 8 | )
 9 | 
10 | export default Setting
11 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | process.env.NODE_ENV = 'test';
 3 | process.env.PUBLIC_URL = '';
 4 | 
 5 | // Load environment variables from .env file. Suppress warnings using silent
 6 | // if this file is missing. dotenv will never modify any environment variables
 7 | // that have already been set.
 8 | // https://github.com/motdotla/dotenv
 9 | require('dotenv').config({silent: true});
10 | 
11 | const jest = require('jest');
12 | const argv = process.argv.slice(2);
13 | 
14 | // Watch unless on CI
15 | if (!process.env.CI) {
16 |   argv.push('--watch');
17 | }
18 | 
19 | 
20 | jest.run(argv);
21 | 


--------------------------------------------------------------------------------
/src/components/back.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import React from 'react'
 3 | 
 4 | const Back = () => (
 5 |   <svg viewBox="0 0 32 32">
 6 |     <path d="M 4.22 14.03 C 3.53 14.15 3 14.77 3 15.5 C 3 16.25 3.53 16.86 4.24 16.98 L 4.02 17.19 L 14.36 27.51 C 14.65 27.81 15.05 28 15.5 28 C 16.33 28 17 27.33 17 26.5 C 17 26.05 16.8 25.65 16.49 25.38 L 16.55 25.32 L 8.22 17 L 27.51 17 C 28.33 17 29 16.33 29 15.5 C 29 14.67 28.33 14 27.51 14 L 8.2 14 L 16.55 5.66 C 16.81 5.34 17 4.94 17 4.5 C 17 3.68 16.33 3 15.5 3 C 15.06 3 14.66 3.2 14.39 3.5 L 14.36 3.47 L 4 13.81 Z"></path>
 7 |   </svg>
 8 | )
 9 | 
10 | export default Back
11 | 


--------------------------------------------------------------------------------
/src/components/forward.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import React from 'react'
 3 | 
 4 | const Forward = () => (
 5 |   <svg viewBox="0 0 32 32">
 6 |     <path d="M 27.78 14.03 C 28.47 14.15 29 14.77 29 15.5 C 29 16.25 28.47 16.86 27.76 16.98 L 27.98 17.19 L 17.64 27.51 C 17.35 27.81 16.95 28 16.5 28 C 15.67 28 15 27.33 15 26.5 C 15 26.05 15.2 25.65 15.51 25.38 L 15.45 25.32 L 23.78 17 L 4.49 17 C 3.67 17 3 16.33 3 15.5 C 3 14.67 3.67 14 4.49 14 L 23.8 14 L 15.45 5.66 C 15.19 5.34 15 4.94 15 4.5 C 15 3.68 15.67 3 16.5 3 C 16.94 3 17.34 3.2 17.61 3.5 L 17.64 3.47 L 28 13.81 Z"></path>
 7 |   </svg>
 8 | )
 9 | 
10 | export default Forward
11 | 


--------------------------------------------------------------------------------
/src/components/reload.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import React from 'react'
 3 | 
 4 | const Reload = () => (
 5 |   <svg viewBox="0 0 32 32">
 6 |     <path d="M 25.1 20.15 L 25.08 20.14 C 23.51 23.59 20.04 26 16 26 C 10.48 26 6 21.52 6 16 C 6 10.48 10.48 6 16 6 C 19.02 6 21.72 7.34 23.55 9.45 L 23.55 9.45 L 19 14 L 25.8 14 L 28.83 14 L 30 14 L 30 3 L 25.67 7.33 C 23.3 4.67 19.85 3 16 3 C 8.82 3 3 8.82 3 16 C 3 23.18 8.82 29 16 29 C 21.27 29 25.8 25.86 27.84 21.34 C 27.96 21.13 28.03 20.88 28.03 20.61 C 28.03 19.78 27.36 19.11 26.53 19.11 C 25.87 19.11 25.3 19.55 25.1 20.15 Z"></path>
 7 |   </svg>
 8 | )
 9 | 
10 | export default Reload
11 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | if (typeof Promise === 'undefined') {
 2 |   // Rejection tracking prevents a common issue where React gets into an
 3 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 4 |   // and the user has no idea what causes React's erratic future behavior.
 5 |   require('promise/lib/rejection-tracking').enable();
 6 |   window.Promise = require('promise/lib/es6-extensions.js');
 7 | }
 8 | 
 9 | // fetch() polyfill for making API calls.
10 | require('whatwg-fetch');
11 | 
12 | // Object.assign() is commonly used with React.
13 | // It will use the native implementation if it's present and isn't buggy.
14 | Object.assign = require('object-assign');
15 | 


--------------------------------------------------------------------------------
/src/containers/app.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --border-radius: 4px;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   padding: 0;
 8 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Copied from GitHub */
 9 | }
10 | 
11 | html, body {
12 |   height: 100%;
13 | }
14 | 
15 | ul {
16 |   margin: 0;
17 |   padding: 0;
18 | }
19 | 
20 | li {
21 |   list-style: none;
22 | }
23 | 
24 | :global(#root) {
25 |   height: 100%;
26 |   padding: 24px;
27 | }
28 | 
29 | *, *::before, *::after {
30 |   box-sizing: border-box;
31 | }
32 | 
33 | .app {
34 |   display: flex;
35 |   flex-direction: column;
36 |   height: 100%;
37 |   border-radius: var(--border-radius);
38 |   border: 1px solid #c1c1c1;
39 |   box-shadow: 0 0 20px #aaa;
40 | }
41 | 
42 | .content {
43 |   flex-grow: 1;
44 |   display: flex;
45 | }
46 | 


--------------------------------------------------------------------------------
/src/containers/app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { connect } from 'react-redux'
 3 | import { pick } from 'lodash'
 4 | import style from './app.css'
 5 | import Tabs from '../components/tabs'
 6 | import Navigator from '../components/navigator'
 7 | import Frame from '../components/frame'
 8 | 
 9 | const App = props => (
10 |   <div className={style.app}>
11 |     <Tabs {...props} />
12 |     <Navigator {...pick(props, ['dispatch', 'url', 'isInputFocus', 'input'])} />
13 |     <Frame {...props} />
14 |   </div>
15 | )
16 | 
17 | const mapStateToProps = state => ({
18 |   tabs: Object.keys(state.tabs).map(id => ({
19 |     id,
20 |     ...state.tabs[id],
21 |     isActive: state.activeTab === id,
22 |   })),
23 |   url: state.tabs[state.activeTab].url,
24 |   isInputFocus: state.isInputFocus,
25 |   input: state.input,
26 | })
27 | 
28 | export default connect(mapStateToProps)(App)
29 | 


--------------------------------------------------------------------------------
/src/components/frame/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | import { completeUrl } from '../../util'
 4 | import { loadSuccess } from '../../actions'
 5 | import style from './frame.css'
 6 | 
 7 | const handleLoad = ({ dispatch, id }) => () => dispatch(loadSuccess(id))
 8 | 
 9 | const Frame = ({ tabs, dispatch }) => (
10 |   <div className={style.content}>
11 |     {tabs.map(({ id, url, isActive }) => (
12 |       <iframe
13 |         className={classNames({ [style.hidden]: !isActive })}
14 |         src={url ? completeUrl(url) : null}
15 |         key={id}
16 |         onLoad={handleLoad({ dispatch, id })}
17 |       />
18 |     ))}
19 |   </div>
20 | )
21 | 
22 | Frame.propTypes = {
23 |   tabs: PropTypes.arrayOf(PropTypes.shape({
24 |     id: PropTypes.string.isRequired,
25 |     url: PropTypes.string,
26 |     isActive: PropTypes.bool,
27 |     isFailed: PropTypes.bool,
28 |   })),
29 |   dispatch: PropTypes.func,
30 | }
31 | 
32 | export default Frame
33 | 


--------------------------------------------------------------------------------
/src/components/tabs/tabs.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --background: #dbdbdb;
 3 |   --border: #bbb;
 4 |   --border-radius: 4px;
 5 | }
 6 | 
 7 | .container {
 8 |   display: flex;
 9 |   align-items: center;
10 |   background: var(--background);
11 |   border-top-left-radius: var(--border-radius);
12 |   border-top-right-radius: var(--border-radius);
13 | }
14 | 
15 | .tabs {
16 |   flex-grow: 1;
17 |   display: flex;
18 |   flex-wrap: nowrap;
19 |   border-top-left-radius: var(--border-radius);
20 |   border-top-right-radius: var(--border-radius);
21 |   height: 36px;
22 |   padding: 8px 20px 0 12px;
23 | }
24 | 
25 | .add {
26 |   background: #d0d0d0;
27 |   width: 26px;
28 |   height: 15px;
29 |   border-radius: 2px;
30 |   margin-left: 8px;
31 |   border: 1px solid var(--border);
32 |   align-self: center;
33 |   transform: skewx(25deg);
34 |   &:hover {
35 |     background: #d9d9d9;
36 |   }
37 | }
38 | 
39 | .widget {
40 |   margin: 0 8px;
41 |   height: 20px;
42 |   & iframe {
43 |     width: 53px;
44 |     height: 20px;
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { createStore, applyMiddleware, compose } from 'redux'
 4 | import { Provider } from 'react-redux'
 5 | import thunk from 'redux-thunk'
 6 | import Immutable from 'seamless-immutable'
 7 | import { v4 } from 'uuid'
 8 | import App from './containers/app'
 9 | import reducers from './reducers'
10 | 
11 | const id = v4()
12 | const presistedState = Immutable({
13 |   activeTab: id,
14 |   tabs: {
15 |     [id]: {
16 |       url: 'en.wikipedia.org',
17 |       title: 'Wikipedia',
18 |       isLoading: true,
19 |       isLoaded: false,
20 |       isFailed: false,
21 |     },
22 |   },
23 |   input: '',
24 | })
25 | 
26 | const middlewares = [thunk]
27 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose // eslint-disable-line
28 | const store = createStore(reducers, presistedState, composeEnhancers(
29 |   applyMiddleware(...middlewares),
30 | ))
31 | 
32 | ReactDOM.render(
33 |   <Provider store={store}>
34 |     <App />
35 |   </Provider>,
36 |   document.getElementById('root'),
37 | )
38 | 


--------------------------------------------------------------------------------
/src/components/tab/index.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import React, { PropTypes } from 'react'
 3 | import classNames from 'classnames'
 4 | import { getFavicon } from '../../util'
 5 | import TabClose from '../tab-close'
 6 | import style from './tab.css'
 7 | 
 8 | const Tab = ({
 9 |   id,
10 |   url,
11 |   title,
12 |   isActive,
13 |   select,
14 |   close,
15 | }) => (
16 |   <li
17 |     key={id}
18 |     onClick={select}
19 |     className={classNames(style.tab, {
20 |       [style.active]: isActive,
21 |     })}
22 |   >
23 |     <img
24 |       src={url === '' ? require('../favicon.svg') : getFavicon(url)}
25 |       className={style.favicon}
26 |       alt="favicon"
27 |     />
28 |     <div className={style.content}>{title}</div>
29 |     <TabClose onClick={close} />
30 |   </li>
31 | )
32 | 
33 | Tab.propTypes = {
34 |   id: PropTypes.string.isRequired,
35 |   url: PropTypes.string.isRequired,
36 |   title: PropTypes.string.isRequired,
37 |   isActive: PropTypes.bool.isRequired,
38 |   select: PropTypes.func.isRequired,
39 |   close: PropTypes.func.isRequired,
40 | }
41 | 
42 | export default Tab
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 pd4d10
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 2 | // injected into the application via DefinePlugin in Webpack configuration.
 3 | 
 4 | var REACT_APP = /^REACT_APP_/i;
 5 | 
 6 | function getClientEnvironment(publicUrl) {
 7 |   var processEnv = Object
 8 |     .keys(process.env)
 9 |     .filter(key => REACT_APP.test(key))
10 |     .reduce((env, key) => {
11 |       env[key] = JSON.stringify(process.env[key]);
12 |       return env;
13 |     }, {
14 |       // Useful for determining whether we’re running in production mode.
15 |       // Most importantly, it switches React into the correct mode.
16 |       'NODE_ENV': JSON.stringify(
17 |         process.env.NODE_ENV || 'development'
18 |       ),
19 |       // Useful for resolving the correct path to static assets in `public`.
20 |       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
21 |       // This should only be used as an escape hatch. Normally you would put
22 |       // images into the `src` and `import` them in code to get their paths.
23 |       'PUBLIC_URL': JSON.stringify(publicUrl)
24 |     });
25 |   return {'process.env': processEnv};
26 | }
27 | 
28 | module.exports = getClientEnvironment;
29 | 


--------------------------------------------------------------------------------
/src/components/navigator/input.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { changeInput, focusInput, blurInput } from '../../actions'
 3 | 
 4 | /* eslint-disable */
 5 | export default class Input extends Component {
 6 |   constructor() {
 7 |     super()
 8 |     this.handleChange = this.handleChange.bind(this)
 9 |     this.handleFocus = this.handleFocus.bind(this)
10 |     this.handleBlur = this.handleBlur.bind(this)
11 |   }
12 | 
13 |   handleChange(event) {
14 |     return this.props.dispatch(changeInput(event.target.value))
15 |   }
16 | 
17 |   handleFocus() {
18 |     const { url, dispatch } = this.props
19 |     dispatch(focusInput(url))
20 |   }
21 | 
22 |   handleBlur() {
23 |     return this.props.dispatch(blurInput())
24 |   }
25 | 
26 |   render() {
27 |     const { url, input, isInputFocus } = this.props
28 |     return (
29 |       <input
30 |         id="location"
31 |         type="text"
32 |         placeholder="Type URL here and press Enter"
33 |         value={isInputFocus ? input : url}
34 |         onChange={this.handleChange}
35 |         onFocus={this.handleFocus}
36 |         onBlur={this.handleBlur}
37 |         ref={$dom => (this.$input = $dom)}
38 |       />
39 |     )
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/tabs/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | import { pick } from 'lodash'
 3 | import { addTab, selectTab, closeTab } from '../../actions'
 4 | import Tab from '../tab'
 5 | import style from './tabs.css'
 6 | import { getGithubWidget, sendEvent } from '../../util'
 7 | 
 8 | /* eslint-disable */
 9 | const Tabs = ({ tabs, dispatch }) => (
10 |   <div className={style.container}>
11 |     <ul className={style.tabs}>
12 |       {tabs.map(tab => (
13 |         <Tab
14 |           key={tab.id}
15 |           {...pick(tab, ['id', 'url', 'title', 'isActive'])}
16 |           select={() => dispatch(selectTab(tab.id))}
17 |           close={(event) => {
18 |             event.stopPropagation()
19 |             return dispatch(closeTab(tab.id))
20 |           }}
21 |         />
22 |       ))}
23 |       <div onClick={() => dispatch(addTab())} className={style.add} />
24 |     </ul>
25 |     <div
26 |       className={style.widget}
27 |       dangerouslySetInnerHTML={{__html:getGithubWidget()}}
28 |       onMouseEnter={() => sendEvent('star', 'click')}
29 |     />
30 |   </div>
31 | )
32 | 
33 | Tabs.propTypes = {
34 |   tabs: PropTypes.arrayOf(PropTypes.object),
35 |   dispatch: PropTypes.func,
36 | }
37 | 
38 | export default Tabs
39 | 


--------------------------------------------------------------------------------
/src/components/navigator/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | import classNames from 'classnames'
 3 | import style from './navigator.css'
 4 | import Back from '../back'
 5 | import Forward from '../forward'
 6 | import Reload from '../reload'
 7 | import Star from '../star'
 8 | import Setting from '../setting'
 9 | import Input from './input'
10 | import { load } from '../../actions'
11 | 
12 | const handleSubmit = dispatch => (event) => {
13 |   event.preventDefault()
14 |   return dispatch(load())
15 | }
16 | 
17 | const Navigator = ({ url, isInputFocus, input, dispatch }) => (
18 |   <div className={style.nav}>
19 |     <a><Back /></a>
20 |     <a><Forward /></a>
21 |     <a><Reload /></a>
22 |     <form
23 |       onSubmit={handleSubmit(dispatch)}
24 |       className={classNames({
25 |         [style.active]: isInputFocus,
26 |       })}
27 |     >
28 |       <Input {...{ url, isInputFocus, input, dispatch }} />
29 |       <Star />
30 |     </form>
31 |     <a><Setting /></a>
32 |   </div>
33 | )
34 | 
35 | Navigator.propTypes = {
36 |   url: PropTypes.string.isRequired,
37 |   isInputFocus: PropTypes.bool.isRequired,
38 |   input: PropTypes.string.isRequired,
39 |   dispatch: PropTypes.func.isRequired,
40 | }
41 | 
42 | export default Navigator
43 | 


--------------------------------------------------------------------------------
/src/reducers/tabs.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ADD_TAB,
 3 |   CLOSE_TAB,
 4 |   UPDATE_URL,
 5 |   LOAD_START,
 6 |   LOAD_SUCCESS,
 7 |   LOAD_FAIL,
 8 | } from '../actions'
 9 | import { getTitle } from '../util'
10 | 
11 | export default function tabs(state = {}, action) {
12 |   switch (action.type) {
13 |     case ADD_TAB:
14 |       return state.set(action.id, {
15 |         title: 'New Tab',
16 |         url: '',
17 |         isLoading: false,
18 |         isLoaded: false,
19 |         isFailed: false,
20 |       })
21 |     case CLOSE_TAB:
22 |       return state.without(action.id)
23 |     case UPDATE_URL:
24 |       return state.setIn([action.id, 'url'], action.url)
25 |     case LOAD_START:
26 |       return state
27 |         .setIn([action.id, 'isLoading'], true)
28 |         .setIn([action.id, 'isLoaded'], false)
29 |         .setIn([action.id, 'url'], action.url)
30 |         .setIn([action.id, 'title'], getTitle(action.url))
31 |     case LOAD_SUCCESS:
32 |       return state
33 |         .setIn([action.id, 'isLoading'], false)
34 |         .setIn([action.id, 'isLoaded'], true)
35 |     case LOAD_FAIL:
36 |       return state
37 |         .setIn([action.id, 'isLoading'], false)
38 |         .setIn([action.id, 'isFailed'], true)
39 |     default:
40 |       return state
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Chrome UI
 2 | 
 3 | Chrome UI built with web stack.
 4 | 
 5 | Demo: https://pd4d10.github.io/chrome-ui/
 6 | 
 7 | ## Trouble Shooting
 8 | 
 9 | ### Webpage content is not loaded, just showing blank
10 | 
11 | Many websites like Google, Twitter or GitHub, refuse to show content in cross domain iframe, for secure reason.
12 | 
13 | Try `en.wikipedia.org` instead.
14 | 
15 | If you press F12 to open devtools, you will see messages like follows:
16 | 
17 | ```
18 | Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
19 | Refused to display 'https://twitter.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
20 | Refused to display 'https://github.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".
21 | ```
22 | 
23 | ### It is messed up in my browser
24 | 
25 | It is tested only on Chrome, for now.
26 | 
27 | If you find a bug or style mess, please submit an issue. Thanks!
28 | 
29 | ## Roadmap
30 | 
31 | * Add tests
32 | * Incognito mode theme
33 | 
34 | ## Contribute
35 | 
36 | ```sh
37 | git clone https://github.com/pd4d10/chrome-ui.git
38 | yarn
39 | yarn start
40 | 
41 | # You can also use npm instead:
42 | npm install
43 | npm start
44 | ```
45 | 
46 | ## License
47 | 
48 | MIT
49 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
 1 | import { capitalize } from 'lodash'
 2 | 
 3 | // Add 'https://' prefix to a URL
 4 | // Must be 'https://' here because GitHub pages is loaded over HTTPS
 5 | // HTTP request will be blocked by default
 6 | export function completeUrl(url) {
 7 |   if (/^https:\/\//.test(url)) {
 8 |     return url
 9 |   }
10 | 
11 |   if (/^http:\/\/(.*)/.test(url)) {
12 |     return url.replace(/^http/, 'https')
13 |   }
14 | 
15 |   return `https://${url}`
16 | }
17 | 
18 | // Guess favicon from url
19 | export function getFavicon(url) {
20 |   const a = document.createElement('a')
21 |   a.href = completeUrl(url)
22 | 
23 |   return `${a.protocol}//${a.host}/favicon.ico`
24 | }
25 | 
26 | // Fake title
27 | export function getTitle(url) {
28 |   const arr = url.split('.')
29 |   switch (arr.length) {
30 |     case 2: // twitter.com
31 |       return capitalize(arr[0])
32 |     case 3: // www.google.com
33 |     case 4: // www.google.co.uk
34 |       return capitalize(arr[1])
35 |     default:
36 |       return url
37 |   }
38 | }
39 | 
40 | // Github start widget
41 | export function getGithubWidget() {
42 |   return '<iframe src="https://ghbtns.com/github-btn.html?user=pd4d10&repo=chrome-ui&type=star" frameborder="0" scrolling="0"></iframe>'
43 | }
44 | 
45 | // Send analytic event
46 | export function sendEvent(...args) {
47 |   if (window.ga) {
48 |     window.ga('send', 'event', ...args)
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/components/navigator/navigator.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --hover: #ccc;
 3 |   --border: #bbb;
 4 |   --nav: #f2f2f2;
 5 |   --icon: #6d6d6d;
 6 |   --icon-hover: #dfdfdf;
 7 |   --icon-focus: #aaa;
 8 | }
 9 | 
10 | .nav {
11 |   display: flex;
12 |   align-items: center;
13 |   background: var(--nav);
14 |   border-top: 1px solid var(--border);
15 |   border-bottom: 1px solid #ddd;
16 |   padding-left: 4px;
17 |   padding-right: 4px;
18 |   height: 38px;
19 |   & a {
20 |     border-radius: 2px;
21 |     margin-left: 2px;
22 |     margin-right: 2px;
23 |     padding: 4px;
24 |     height: 24px;
25 |     &:hover {
26 |       background: var(--icon-hover);
27 |     }
28 |     &:focus {
29 |       background: var(--icon-focus);
30 |     }
31 |   }
32 |   & svg {
33 |     width: 16px;
34 |     height: 16px;
35 |     & path {
36 |       fill: var(--icon);
37 |     }
38 |   }
39 |   & form {
40 |     flex-grow: 1;
41 |     display: flex;
42 |     align-items: center;
43 |     background: #fff;
44 |     height: 28px;
45 |     border-radius: 4px;
46 |     margin-left: 4px;
47 |     margin-right: 2px;
48 |     border: 1px solid #ccc;
49 |     &.active {
50 |       border: 1px solid #399df7;
51 |       height: 26px;
52 |     }
53 |     & svg {
54 |       margin-right: 4px;
55 |     }
56 |     & input {
57 |       display: block;
58 |       border: none;
59 |       width: 100%;
60 |       padding-left: 20px;
61 |       font-size: 13.6px;
62 |       &:focus {
63 |         outline: none;
64 |       }
65 |       &:-webkit-autofill {
66 |         background-color: #fff;
67 |       }
68 |     }
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 7 |     <!--
 8 |       Notice the use of %PUBLIC_URL% in the tag above.
 9 |       It will be replaced with the URL of the `public` folder during the build.
10 |       Only files inside the `public` folder can be referenced from the HTML.
11 | 
12 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13 |       work correctly both with client-side routing and a non-root public URL.
14 |       Learn how to configure a non-root public URL by running `npm run build`.
15 |     -->
16 |     <title>Chrome UI</title>
17 |     <!-- Google Analytics -->
18 |     <script>
19 |       window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
20 |       ga('create', 'UA-90183544-1', 'auto');
21 |       ga('send', 'pageview');
22 |     </script>
23 |     <script async src='https://www.google-analytics.com/analytics.js'></script>
24 |     <!-- End Google Analytics -->
25 |   </head>
26 |   <body>
27 |     <div id="root"></div>
28 |     <!--
29 |       This HTML file is a template.
30 |       If you open it directly in the browser, you will see an empty page.
31 | 
32 |       You can add webfonts, meta tags, or analytics to this file.
33 |       The build step will place the bundled scripts into the <body> tag.
34 | 
35 |       To begin the development, run `npm start`.
36 |       To create a production bundle, use `npm run build`.
37 |     -->
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var fs = require('fs');
 3 | 
 4 | // Make sure any symlinks in the project folder are resolved:
 5 | // https://github.com/facebookincubator/create-react-app/issues/637
 6 | var appDirectory = fs.realpathSync(process.cwd());
 7 | function resolveApp(relativePath) {
 8 |   return path.resolve(appDirectory, relativePath);
 9 | }
10 | 
11 | // We support resolving modules according to `NODE_PATH`.
12 | // This lets you use absolute paths in imports inside large monorepos:
13 | // https://github.com/facebookincubator/create-react-app/issues/253.
14 | 
15 | // It works similar to `NODE_PATH` in Node itself:
16 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
17 | 
18 | // We will export `nodePaths` as an array of absolute paths.
19 | // It will then be used by Webpack configs.
20 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box.
21 | 
22 | var nodePaths = (process.env.NODE_PATH || '')
23 |   .split(process.platform === 'win32' ? ';' : ':')
24 |   .filter(Boolean)
25 |   .map(resolveApp);
26 | 
27 | // config after eject: we're in ./config/
28 | module.exports = {
29 |   appBuild: resolveApp('build'),
30 |   appPublic: resolveApp('public'),
31 |   appHtml: resolveApp('public/index.html'),
32 |   appIndexJs: resolveApp('src/index.js'),
33 |   appPackageJson: resolveApp('package.json'),
34 |   appSrc: resolveApp('src'),
35 |   testsSetup: resolveApp('src/setupTests.js'),
36 |   appNodeModules: resolveApp('node_modules'),
37 |   ownNodeModules: resolveApp('node_modules'),
38 |   nodePaths: nodePaths
39 | };
40 | 
41 | 
42 | 
43 | // config before publish: we're in ./packages/react-scripts/config/
44 | if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) {
45 |   module.exports = {
46 |     appBuild: resolveOwn('../../../build'),
47 |     appPublic: resolveOwn('../template/public'),
48 |     appHtml: resolveOwn('../template/public/index.html'),
49 |     appIndexJs: resolveOwn('../template/src/index.js'),
50 |     appPackageJson: resolveOwn('../package.json'),
51 |     appSrc: resolveOwn('../template/src'),
52 |     testsSetup: resolveOwn('../template/src/setupTests.js'),
53 |     appNodeModules: resolveOwn('../node_modules'),
54 |     ownNodeModules: resolveOwn('../node_modules'),
55 |     nodePaths: nodePaths
56 |   };
57 | }
58 | 


--------------------------------------------------------------------------------
/src/components/tab/tab.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --background: #dbdbdb;
 3 |   --hover: #eee;
 4 |   --border: #bbb;
 5 |   --nav: #f2f2f2;
 6 | }
 7 | 
 8 | .tab {
 9 |   flex-basis: 218px;
10 |   display: flex;
11 |   min-width: 0; /* http://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome */
12 |   align-items: center;
13 |   position: relative;
14 |   background-color: var(--background);
15 |   border-top: 1px solid var(--border);
16 |   margin: 0 5px;
17 |   font-size: 0;
18 |   transition: background-color .5s;
19 |   &:hover {
20 |     background: var(--hover);
21 |     &::before, &::after {
22 |       background: var(--hover);
23 |     }
24 |   }
25 |   &.active {
26 |     background: var(--nav);
27 |     height: 29px;
28 |     border-bottom: 1px solid var(--nav);
29 |     transition: all 0s;
30 |     &::before, &::after {
31 |       z-index: 10;
32 |       transition: all 0s;
33 |       align-self: flex-start;
34 |       height: 28px;
35 |       background: var(--nav);
36 |       border-bottom: 1px solid var(--nav);
37 |     }
38 |   }
39 |   & .favicon {
40 |     z-index: 100;
41 |     width: 16px;
42 |     height: 16px;
43 |     margin-left: 4px;
44 |     margin-right: 4px;
45 |     user-select: none;
46 |   }
47 |   & .close {
48 |     fill: #000;
49 |     width: 12px;
50 |     height: 12px;
51 |     border-radius: 50%;
52 |     &:hover {
53 |       fill: #fff;
54 |       background: #f00;
55 |     }
56 |   }
57 |   &::before {
58 |     content: '';
59 |     position: absolute;
60 |     z-index: 0;
61 |     left: 0;
62 |     width: 16px;
63 |     height: 28px;
64 |     background-color: var(--background);
65 |     border-left: 1px solid var(--border);
66 |     border-bottom: 1px solid var(--border);
67 |     transform: skewx(-25deg);
68 |     transform-origin: left top;
69 |     transition: background-color .5s;
70 |   }
71 |   &::after {
72 |     content: '';
73 |     position: absolute;
74 |     z-index: 1;
75 |     right: 0;
76 |     width: 16px;
77 |     height: 28px;
78 |     background-color: var(--background);
79 |     border-right: 1px solid var(--border);
80 |     border-bottom: 1px solid var(--border);
81 |     transform: skewx(25deg);
82 |     transform-origin: right top;
83 |     transition: background-color .5s;
84 |   }
85 | 
86 |   & .content {
87 |     flex-grow: 1;
88 |     padding-left: 2px;
89 |     font-size: 12.6px;
90 |     line-height: 28px;
91 |     cursor: default;
92 |     max-width: 200px;
93 |     user-select: none;
94 |     white-space: nowrap;
95 |     overflow: hidden;
96 |     text-overflow: clip;
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/src/actions/index.js:
--------------------------------------------------------------------------------
  1 | import { v4 } from 'uuid'
  2 | 
  3 | export const ADD_TAB = 'ADD_TAB'
  4 | export const CLOSE_TAB = 'CLOSE_TAB'
  5 | export const SELECT_TAB = 'SELECT_TAB'
  6 | export const UPDATE_URL = 'UPDATE_TITLE'
  7 | export const CHANGE_INPUT = 'CHANGE_INPUT'
  8 | export const FOCUS_INPUT = 'FOCUS_INPUT'
  9 | export const BLUR_INPUT = 'BLUR_INPUT'
 10 | 
 11 | export const LOAD_START = 'LOAD_START'
 12 | export const LOAD_SUCCESS = 'LOAD_SUCCESS'
 13 | export const LOAD_FAIL = 'LOAD_FAIL'
 14 | 
 15 | export const addTab = () => {
 16 |   // This is an ugly hack.
 17 |   // When new tab is opened, location input should focus.
 18 |   // It is too complex to do this in React way. 🌧
 19 |   document.querySelector('#location').focus()
 20 |   return {
 21 |     type: ADD_TAB,
 22 |     id: v4(),
 23 |   }
 24 | }
 25 | 
 26 | export const closeTab = id => (dispatch, getState) => {
 27 |   const state = getState()
 28 |   const { tabs } = state
 29 |   const allIds = Object.keys(tabs)
 30 | 
 31 |   // Do not close last tab
 32 |   if (allIds.length <= 1) {
 33 |     alert('This is the last tab :)') // eslint-disable-line
 34 |     return
 35 |   }
 36 | 
 37 |   // When active tab is closed, make right tab active
 38 |   // If no right, make left active
 39 |   let activeId = state.activeTab
 40 |   if (id === state.activeTab) {
 41 |     const position = allIds.indexOf(id)
 42 |     if (position < allIds.length - 1) {
 43 |       activeId = allIds[position + 1]
 44 |     } else {
 45 |       activeId = allIds[position - 1]
 46 |     }
 47 |   }
 48 | 
 49 |   dispatch({
 50 |     type: CLOSE_TAB,
 51 |     id,
 52 |     activeId,
 53 |     url: tabs[activeId].url,
 54 |   })
 55 | }
 56 | 
 57 | export const selectTab = id => (dispatch, getState) => dispatch({
 58 |   type: SELECT_TAB,
 59 |   id,
 60 |   url: getState().tabs[id].url,
 61 | })
 62 | 
 63 | export const updateUrl = ({ id, url }) => ({
 64 |   type: UPDATE_URL,
 65 |   id,
 66 |   url,
 67 | })
 68 | 
 69 | export const changeInput = value => ({
 70 |   type: CHANGE_INPUT,
 71 |   value,
 72 | })
 73 | 
 74 | export const focusInput = value => ({
 75 |   type: FOCUS_INPUT,
 76 |   value,
 77 | })
 78 | 
 79 | export const blurInput = () => ({
 80 |   type: BLUR_INPUT,
 81 | })
 82 | 
 83 | const loadStart = ({ id, url }) => ({
 84 |   type: LOAD_START,
 85 |   id,
 86 |   url,
 87 | })
 88 | 
 89 | export const loadSuccess = id => ({
 90 |   type: LOAD_SUCCESS,
 91 |   id,
 92 | })
 93 | 
 94 | export const load = () => (dispatch, getState) => {
 95 |   // Ugly hack either
 96 |   // Make loaction input blur after submit
 97 |   document.querySelector('#location').blur()
 98 | 
 99 |   const state = getState()
100 |   const id = state.activeTab
101 |   const url = state.input
102 |   dispatch(loadStart({ id, url }))
103 | }
104 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "chrome-ui",
  3 |   "version": "1.0.0",
  4 |   "author": "pd4d10 <pd4d10@gmail.com>",
  5 |   "homepage": "https://pd4d10.github.io/chrome-ui/",
  6 |   "devDependencies": {
  7 |     "autoprefixer": "6.5.1",
  8 |     "babel-core": "6.17.0",
  9 |     "babel-eslint": "7.0.0",
 10 |     "babel-jest": "16.0.0",
 11 |     "babel-loader": "6.2.5",
 12 |     "babel-preset-react-app": "^1.0.0",
 13 |     "case-sensitive-paths-webpack-plugin": "1.1.4",
 14 |     "chalk": "1.1.3",
 15 |     "connect-history-api-fallback": "1.3.0",
 16 |     "cross-spawn": "4.0.2",
 17 |     "css-loader": "0.25.0",
 18 |     "detect-port": "1.0.1",
 19 |     "dotenv": "2.0.0",
 20 |     "eslint": "^3.9.1",
 21 |     "eslint-config-airbnb": "^13.0.0",
 22 |     "eslint-loader": "1.6.0",
 23 |     "eslint-plugin-flowtype": "2.21.0",
 24 |     "eslint-plugin-import": "^2.1.0",
 25 |     "eslint-plugin-jsx-a11y": "2.2.3",
 26 |     "eslint-plugin-react": "^6.6.0",
 27 |     "extract-text-webpack-plugin": "1.0.1",
 28 |     "file-loader": "0.9.0",
 29 |     "filesize": "3.3.0",
 30 |     "find-cache-dir": "0.1.1",
 31 |     "fs-extra": "0.30.0",
 32 |     "gh-pages": "^0.12.0",
 33 |     "gzip-size": "3.0.0",
 34 |     "html-webpack-plugin": "2.24.0",
 35 |     "http-proxy-middleware": "0.17.2",
 36 |     "jest": "16.0.2",
 37 |     "json-loader": "0.5.4",
 38 |     "object-assign": "4.1.0",
 39 |     "path-exists": "2.1.0",
 40 |     "postcss-cssnext": "^2.9.0",
 41 |     "postcss-import": "^9.0.0",
 42 |     "postcss-loader": "1.0.0",
 43 |     "promise": "7.1.1",
 44 |     "react-dev-utils": "^0.3.0",
 45 |     "recursive-readdir": "2.1.0",
 46 |     "rimraf": "2.5.4",
 47 |     "strip-ansi": "3.0.1",
 48 |     "style-loader": "0.13.1",
 49 |     "url-loader": "0.5.7",
 50 |     "webpack": "1.13.2",
 51 |     "webpack-dev-server": "1.16.2",
 52 |     "webpack-manifest-plugin": "1.1.0",
 53 |     "whatwg-fetch": "1.0.0"
 54 |   },
 55 |   "dependencies": {
 56 |     "classnames": "^2.2.5",
 57 |     "history": "^4.5.0",
 58 |     "lodash": "^4.17.4",
 59 |     "react": "^15.4.0",
 60 |     "react-dom": "^15.4.0",
 61 |     "react-redux": "^4.4.6",
 62 |     "redux": "^3.6.0",
 63 |     "redux-thunk": "^2.1.0",
 64 |     "seamless-immutable": "^7.0.1",
 65 |     "uuid": "^3.0.1"
 66 |   },
 67 |   "scripts": {
 68 |     "start": "node scripts/start.js",
 69 |     "build": "node scripts/build.js",
 70 |     "test": "node scripts/test.js --env=jsdom",
 71 |     "lint": "eslint src/*",
 72 |     "deploy": "gh-pages -d build"
 73 |   },
 74 |   "jest": {
 75 |     "moduleFileExtensions": [
 76 |       "jsx",
 77 |       "js",
 78 |       "json"
 79 |     ],
 80 |     "moduleNameMapper": {
 81 |       "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/FileStub.js",
 82 |       "^.+\\.css$": "<rootDir>/config/jest/CSSStub.js"
 83 |     },
 84 |     "setupFiles": [
 85 |       "<rootDir>/config/polyfills.js"
 86 |     ],
 87 |     "testPathIgnorePatterns": [
 88 |       "<rootDir>/(build|docs|node_modules)/"
 89 |     ],
 90 |     "testEnvironment": "node"
 91 |   },
 92 |   "babel": {
 93 |     "presets": [
 94 |       "react-app"
 95 |     ]
 96 |   },
 97 |   "eslintConfig": {
 98 |     "extends": "airbnb",
 99 |     "env": {
100 |       "browser": true
101 |     },
102 |     "rules": {
103 |       "semi": [
104 |         "error",
105 |         "never"
106 |       ],
107 |       "react/jsx-filename-extension": "off"
108 |     }
109 |   }
110 | }
111 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | // Do this as the first thing so that any code reading it knows the right env.
  3 | process.env.NODE_ENV = 'production';
  4 | 
  5 | // Load environment variables from .env file. Suppress warnings using silent
  6 | // if this file is missing. dotenv will never modify any environment variables
  7 | // that have already been set.
  8 | // https://github.com/motdotla/dotenv
  9 | require('dotenv').config({silent: true});
 10 | 
 11 | var chalk = require('chalk');
 12 | var fs = require('fs-extra');
 13 | var path = require('path');
 14 | var filesize = require('filesize');
 15 | var gzipSize = require('gzip-size').sync;
 16 | var rimrafSync = require('rimraf').sync;
 17 | var webpack = require('webpack');
 18 | var config = require('../config/webpack.config.prod');
 19 | var paths = require('../config/paths');
 20 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 21 | var recursive = require('recursive-readdir');
 22 | var stripAnsi = require('strip-ansi');
 23 | 
 24 | // Warn and crash if required files are missing
 25 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 26 |   process.exit(1);
 27 | }
 28 | 
 29 | // Input: /User/dan/app/build/static/js/main.82be8.js
 30 | // Output: /static/js/main.js
 31 | function removeFileNameHash(fileName) {
 32 |   return fileName
 33 |     .replace(paths.appBuild, '')
 34 |     .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
 35 | }
 36 | 
 37 | // Input: 1024, 2048
 38 | // Output: "(+1 KB)"
 39 | function getDifferenceLabel(currentSize, previousSize) {
 40 |   var FIFTY_KILOBYTES = 1024 * 50;
 41 |   var difference = currentSize - previousSize;
 42 |   var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
 43 |   if (difference >= FIFTY_KILOBYTES) {
 44 |     return chalk.red('+' + fileSize);
 45 |   } else if (difference < FIFTY_KILOBYTES && difference > 0) {
 46 |     return chalk.yellow('+' + fileSize);
 47 |   } else if (difference < 0) {
 48 |     return chalk.green(fileSize);
 49 |   } else {
 50 |     return '';
 51 |   }
 52 | }
 53 | 
 54 | // First, read the current file sizes in build directory.
 55 | // This lets us display how much they changed later.
 56 | recursive(paths.appBuild, (err, fileNames) => {
 57 |   var previousSizeMap = (fileNames || [])
 58 |     .filter(fileName => /\.(js|css)$/.test(fileName))
 59 |     .reduce((memo, fileName) => {
 60 |       var contents = fs.readFileSync(fileName);
 61 |       var key = removeFileNameHash(fileName);
 62 |       memo[key] = gzipSize(contents);
 63 |       return memo;
 64 |     }, {});
 65 | 
 66 |   // Remove all content but keep the directory so that
 67 |   // if you're in it, you don't end up in Trash
 68 |   rimrafSync(paths.appBuild + '/*');
 69 | 
 70 |   // Start the webpack build
 71 |   build(previousSizeMap);
 72 | 
 73 |   // Merge with the public folder
 74 |   copyPublicFolder();
 75 | });
 76 | 
 77 | // Print a detailed summary of build files.
 78 | function printFileSizes(stats, previousSizeMap) {
 79 |   var assets = stats.toJson().assets
 80 |     .filter(asset => /\.(js|css)$/.test(asset.name))
 81 |     .map(asset => {
 82 |       var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
 83 |       var size = gzipSize(fileContents);
 84 |       var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
 85 |       var difference = getDifferenceLabel(size, previousSize);
 86 |       return {
 87 |         folder: path.join('build', path.dirname(asset.name)),
 88 |         name: path.basename(asset.name),
 89 |         size: size,
 90 |         sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
 91 |       };
 92 |     });
 93 |   assets.sort((a, b) => b.size - a.size);
 94 |   var longestSizeLabelLength = Math.max.apply(null,
 95 |     assets.map(a => stripAnsi(a.sizeLabel).length)
 96 |   );
 97 |   assets.forEach(asset => {
 98 |     var sizeLabel = asset.sizeLabel;
 99 |     var sizeLength = stripAnsi(sizeLabel).length;
100 |     if (sizeLength < longestSizeLabelLength) {
101 |       var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
102 |       sizeLabel += rightPadding;
103 |     }
104 |     console.log(
105 |       '  ' + sizeLabel +
106 |       '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
107 |     );
108 |   });
109 | }
110 | 
111 | // Print out errors
112 | function printErrors(summary, errors) {
113 |   console.log(chalk.red(summary));
114 |   console.log();
115 |   errors.forEach(err => {
116 |     console.log(err.message || err);
117 |     console.log();
118 |   });
119 | }
120 | 
121 | // Create the production build and print the deployment instructions.
122 | function build(previousSizeMap) {
123 |   console.log('Creating an optimized production build...');
124 |   webpack(config).run((err, stats) => {
125 |     if (err) {
126 |       printErrors('Failed to compile.', [err]);
127 |       process.exit(1);
128 |     }
129 | 
130 |     if (stats.compilation.errors.length) {
131 |       printErrors('Failed to compile.', stats.compilation.errors);
132 |       process.exit(1);
133 |     }
134 | 
135 |     console.log(chalk.green('Compiled successfully.'));
136 |     console.log();
137 | 
138 |     console.log('File sizes after gzip:');
139 |     console.log();
140 |     printFileSizes(stats, previousSizeMap);
141 |     console.log();
142 | 
143 |     var openCommand = process.platform === 'win32' ? 'start' : 'open';
144 |     var homepagePath = require(paths.appPackageJson).homepage;
145 |     var publicPath = config.output.publicPath;
146 |     if (homepagePath && homepagePath.indexOf('.github.io/') !== -1) {
147 |       // "homepage": "http://user.github.io/project"
148 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
149 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
150 |       console.log();
151 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
152 |       console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
153 |       console.log();
154 |       console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
155 |       console.log();
156 |       console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
157 |       console.log();
158 |       console.log('    ' + chalk.dim('// ...'));
159 |       console.log('    ' + chalk.yellow('"scripts"') + ': {');
160 |       console.log('      ' + chalk.dim('// ...'));
161 |       console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
162 |       console.log('    }');
163 |       console.log();
164 |       console.log('Then run:');
165 |       console.log();
166 |       console.log('  ' + chalk.cyan('npm') +  ' run deploy');
167 |       console.log();
168 |     } else if (publicPath !== '/') {
169 |       // "homepage": "http://mywebsite.com/project"
170 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
171 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
172 |       console.log();
173 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
174 |       console.log();
175 |     } else {
176 |       // no homepage or "homepage": "http://mywebsite.com"
177 |       console.log('The project was built assuming it is hosted at the server root.');
178 |       if (homepagePath) {
179 |         // "homepage": "http://mywebsite.com"
180 |         console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
181 |         console.log();
182 |       } else {
183 |         // no homepage
184 |         console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
185 |         console.log('For example, add this to build it for GitHub Pages:')
186 |         console.log();
187 |         console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
188 |         console.log();
189 |       }
190 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
191 |       console.log('You may also serve it locally with a static server:')
192 |       console.log();
193 |       console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
194 |       console.log('  ' + chalk.cyan('pushstate-server') + ' build');
195 |       console.log('  ' + chalk.cyan(openCommand) + ' http://localhost:9000');
196 |       console.log();
197 |     }
198 |   });
199 | }
200 | 
201 | function copyPublicFolder() {
202 |   fs.copySync(paths.appPublic, paths.appBuild, {
203 |     dereference: true,
204 |     filter: file => file !== paths.appHtml
205 |   });
206 | }
207 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | const path = require('path')
  2 | const autoprefixer = require('autoprefixer')
  3 | const webpack = require('webpack')
  4 | const findCacheDir = require('find-cache-dir')
  5 | const HtmlWebpackPlugin = require('html-webpack-plugin')
  6 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
  7 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
  8 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin')
  9 | const getClientEnvironment = require('./env')
 10 | const paths = require('./paths')
 11 | 
 12 | // Webpack uses `publicPath` to determine where the app is being served from.
 13 | // In development, we always serve from the root. This makes config easier.
 14 | const publicPath = '/'
 15 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 16 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 17 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 18 | const publicUrl = ''
 19 | // Get environment variables to inject into our app.
 20 | const env = getClientEnvironment(publicUrl)
 21 | 
 22 | // This is the development configuration.
 23 | // It is focused on developer experience and fast rebuilds.
 24 | // The production configuration is different and lives in a separate file.
 25 | module.exports = {
 26 |   // This makes the bundle appear split into separate modules in the devtools.
 27 |   // We don't use source maps here because they can be confusing:
 28 |   // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
 29 |   // You may want 'cheap-module-source-map' instead if you prefer source maps.
 30 |   devtool: 'eval',
 31 |   // These are the "entry points" to our application.
 32 |   // This means they will be the "root" imports that are included in JS bundle.
 33 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 34 |   entry: [
 35 |     // Include an alternative client for WebpackDevServer. A client's job is to
 36 |     // connect to WebpackDevServer by a socket and get notified about changes.
 37 |     // When you save a file, the client will either apply hot updates (in case
 38 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 39 |     // make a syntax error, this client will display a syntax error overlay.
 40 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 41 |     // to bring better experience for Create React App users. You can replace
 42 |     // the line below with these two lines if you prefer the stock client:
 43 |     // require.resolve('webpack-dev-server/client') + '?/',
 44 |     // require.resolve('webpack/hot/dev-server'),
 45 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 46 |     // We ship a few polyfills by default:
 47 |     require.resolve('./polyfills'),
 48 |     // Finally, this is your app's code:
 49 |     paths.appIndexJs,
 50 |     // We include the app code last so that if there is a runtime error during
 51 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 52 |     // changing JS code would still trigger a refresh.
 53 |   ],
 54 |   output: {
 55 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 56 |     path: paths.appBuild,
 57 |     // Add /* filename */ comments to generated require()s in the output.
 58 |     pathinfo: true,
 59 |     // This does not produce a real file. It's just the virtual path that is
 60 |     // served by WebpackDevServer in development. This is the JS bundle
 61 |     // containing code from all our entry points, and the Webpack runtime.
 62 |     filename: 'static/js/bundle.js',
 63 |     // This is the URL that app is served from. We use "/" in development.
 64 |     publicPath,
 65 |   },
 66 |   resolve: {
 67 |     // This allows you to set a fallback for where Webpack should look for modules.
 68 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 69 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 70 |     // if there any conflicts. This matches Node resolution mechanism.
 71 |     // https://github.com/facebookincubator/create-react-app/issues/253
 72 |     fallback: paths.nodePaths,
 73 |     // These are the reasonable defaults supported by the Node ecosystem.
 74 |     // We also include JSX as a common component filename extension to support
 75 |     // some tools, although we do not recommend using it, see:
 76 |     // https://github.com/facebookincubator/create-react-app/issues/290
 77 |     extensions: ['.js', '.json', '.jsx', ''],
 78 |     alias: {
 79 |       // Support React Native Web
 80 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 81 |       'react-native': 'react-native-web',
 82 |     },
 83 |   },
 84 | 
 85 |   module: {
 86 |     // First, run the linter.
 87 |     // It's important to do this before Babel processes the JS.
 88 |     preLoaders: [
 89 |       {
 90 |         test: /\.(js|jsx)$/,
 91 |         loader: 'eslint',
 92 |         include: paths.appSrc,
 93 |       },
 94 |     ],
 95 |     loaders: [
 96 |       // Process JS with Babel.
 97 |       {
 98 |         test: /\.(js|jsx)$/,
 99 |         include: paths.appSrc,
100 |         loader: 'babel',
101 |         query: {
102 | 
103 |           // This is a feature of `babel-loader` for webpack (not Babel itself).
104 |           // It enables caching results in ./node_modules/.cache/react-scripts/
105 |           // directory for faster rebuilds. We use findCacheDir() because of:
106 |           // https://github.com/facebookincubator/create-react-app/issues/483
107 |           cacheDirectory: findCacheDir({
108 |             name: 'react-scripts',
109 |           }),
110 |         },
111 |       },
112 |       // "postcss" loader applies autoprefixer to our CSS.
113 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
114 |       // "style" loader turns CSS into JS modules that inject <style> tags.
115 |       // In production, we use a plugin to extract that CSS to a file, but
116 |       // in development "style" loader enables hot editing of CSS.
117 |       {
118 |         test: /\.css$/,
119 |         loader: 'style!css?module&camelCase&importLoaders=1!postcss',
120 |       },
121 |       // JSON is not enabled by default in Webpack but both Node and Browserify
122 |       // allow it implicitly so we also enable it.
123 |       {
124 |         test: /\.json$/,
125 |         loader: 'json',
126 |       },
127 |       // "file" loader makes sure those assets get served by WebpackDevServer.
128 |       // When you `import` an asset, you get its (virtual) filename.
129 |       // In production, they would get copied to the `build` folder.
130 |       {
131 |         test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
132 |         loader: 'file',
133 |         query: {
134 |           name: 'static/media/[name].[hash:8].[ext]',
135 |         },
136 |       },
137 |       // "url" loader works just like "file" loader but it also embeds
138 |       // assets smaller than specified size as data URLs to avoid requests.
139 |       {
140 |         test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
141 |         loader: 'url',
142 |         query: {
143 |           limit: 10000,
144 |           name: 'static/media/[name].[hash:8].[ext]',
145 |         },
146 |       },
147 |     ],
148 |   },
149 | 
150 |   postcss() {
151 |     return [
152 |       require('postcss-cssnext'),
153 |       require('postcss-import'),
154 |       // autoprefixer({
155 |       //   browsers: [
156 |       //     '>1%',
157 |       //     'last 4 versions',
158 |       //     'Firefox ESR',
159 |       //     'not ie < 9', // React doesn't support IE8 anyway
160 |       //   ]
161 |       // }),
162 |     ]
163 |   },
164 |   plugins: [
165 |     // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
166 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
167 |     // In development, this will be an empty string.
168 |     new InterpolateHtmlPlugin({
169 |       PUBLIC_URL: publicUrl,
170 |     }),
171 |     // Generates an `index.html` file with the <script> injected.
172 |     new HtmlWebpackPlugin({
173 |       inject: true,
174 |       template: paths.appHtml,
175 |     }),
176 |     // Makes some environment variables available to the JS code, for example:
177 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
178 |     new webpack.DefinePlugin(env),
179 |     // This is necessary to emit hot updates (currently CSS only):
180 |     new webpack.HotModuleReplacementPlugin(),
181 |     // Watcher doesn't work well if you mistype casing in a path so we use
182 |     // a plugin that prints an error when you attempt to do this.
183 |     // See https://github.com/facebookincubator/create-react-app/issues/240
184 |     new CaseSensitivePathsPlugin(),
185 |     // If you require a missing module and then `npm install` it, you still have
186 |     // to restart the development server for Webpack to discover it. This plugin
187 |     // makes the discovery automatic so you don't have to restart.
188 |     // See https://github.com/facebookincubator/create-react-app/issues/186
189 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
190 |   ],
191 |   // Some libraries import Node modules but don't use them in the browser.
192 |   // Tell Webpack to provide empty mocks for them so importing them works.
193 |   node: {
194 |     fs: 'empty',
195 |     net: 'empty',
196 |     tls: 'empty',
197 |   },
198 | }
199 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | const path = require('path')
  2 | const autoprefixer = require('autoprefixer')
  3 | const webpack = require('webpack')
  4 | const HtmlWebpackPlugin = require('html-webpack-plugin')
  5 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
  6 | const ManifestPlugin = require('webpack-manifest-plugin')
  7 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
  8 | const url = require('url')
  9 | const paths = require('./paths')
 10 | const getClientEnvironment = require('./env')
 11 | 
 12 | function ensureSlash(path, needsSlash) {
 13 |   const hasSlash = path.endsWith('/')
 14 |   if (hasSlash && !needsSlash) {
 15 |     return path.substr(path, path.length - 1)
 16 |   } else if (!hasSlash && needsSlash) {
 17 |     return `${path}/`
 18 |   } else {
 19 |     return path
 20 |   }
 21 | }
 22 | 
 23 | // We use "homepage" field to infer "public path" at which the app is served.
 24 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
 25 | // single-page apps that may serve index.html for nested URLs like /todos/42.
 26 | // We can't use a relative path in HTML because we don't want to load something
 27 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 28 | const homepagePath = require(paths.appPackageJson).homepage
 29 | const homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/'
 30 | // Webpack uses `publicPath` to determine where the app is being served from.
 31 | // It requires a trailing slash, or the file assets will get an incorrect path.
 32 | const publicPath = ensureSlash(homepagePathname, true)
 33 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 34 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 35 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 36 | const publicUrl = ensureSlash(homepagePathname, false)
 37 | // Get environment variables to inject into our app.
 38 | const env = getClientEnvironment(publicUrl)
 39 | 
 40 | // Assert this just to be safe.
 41 | // Development builds of React are slow and not intended for production.
 42 | if (env['process.env'].NODE_ENV !== '"production"') {
 43 |   throw new Error('Production builds must have NODE_ENV=production.')
 44 | }
 45 | 
 46 | // This is the production configuration.
 47 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 48 | // The development configuration is different and lives in a separate file.
 49 | module.exports = {
 50 |   // Don't attempt to continue if there are any errors.
 51 |   bail: true,
 52 |   // We generate sourcemaps in production. This is slow but gives good results.
 53 |   // You can exclude the *.map files from the build during deployment.
 54 |   devtool: 'source-map',
 55 |   // In production, we only want to load the polyfills and the app code.
 56 |   entry: [
 57 |     require.resolve('./polyfills'),
 58 |     paths.appIndexJs,
 59 |   ],
 60 |   output: {
 61 |     // The build folder.
 62 |     path: paths.appBuild,
 63 |     // Generated JS file names (with nested folders).
 64 |     // There will be one main bundle, and one file per asynchronous chunk.
 65 |     // We don't currently advertise code splitting but Webpack supports it.
 66 |     filename: 'static/js/[name].[chunkhash:8].js',
 67 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 68 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 69 |     publicPath,
 70 |   },
 71 |   resolve: {
 72 |     // This allows you to set a fallback for where Webpack should look for modules.
 73 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 74 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 75 |     // if there any conflicts. This matches Node resolution mechanism.
 76 |     // https://github.com/facebookincubator/create-react-app/issues/253
 77 |     fallback: paths.nodePaths,
 78 |     // These are the reasonable defaults supported by the Node ecosystem.
 79 |     // We also include JSX as a common component filename extension to support
 80 |     // some tools, although we do not recommend using it, see:
 81 |     // https://github.com/facebookincubator/create-react-app/issues/290
 82 |     extensions: ['.js', '.json', '.jsx', ''],
 83 |     alias: {
 84 |       // Support React Native Web
 85 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 86 |       'react-native': 'react-native-web',
 87 |     },
 88 |   },
 89 | 
 90 |   module: {
 91 |     // First, run the linter.
 92 |     // It's important to do this before Babel processes the JS.
 93 |     preLoaders: [
 94 |       {
 95 |         test: /\.(js|jsx)$/,
 96 |         loader: 'eslint',
 97 |         include: paths.appSrc,
 98 |       },
 99 |     ],
100 |     loaders: [
101 |       // Process JS with Babel.
102 |       {
103 |         test: /\.(js|jsx)$/,
104 |         include: paths.appSrc,
105 |         loader: 'babel',
106 | 
107 |       },
108 |       // The notation here is somewhat confusing.
109 |       // "postcss" loader applies autoprefixer to our CSS.
110 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
111 |       // "style" loader normally turns CSS into JS modules injecting <style>,
112 |       // but unlike in development configuration, we do something different.
113 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
114 |       // (second argument), then grabs the result CSS and puts it into a
115 |       // separate file in our build process. This way we actually ship
116 |       // a single CSS file in production instead of JS code injecting <style>
117 |       // tags. If you use code splitting, however, any async bundles will still
118 |       // use the "style" loader inside the async code so CSS from them won't be
119 |       // in the main CSS file.
120 |       {
121 |         test: /\.css$/,
122 |         // "?-autoprefixer" disables autoprefixer in css-loader itself:
123 |         // https://github.com/webpack/css-loader/issues/281
124 |         // We already have it thanks to postcss. We only pass this flag in
125 |         // production because "css" loader only enables autoprefixer-powered
126 |         // removal of unnecessary prefixes when Uglify plugin is enabled.
127 |         // Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets
128 |         // including CSS. This is confusing and will be removed in Webpack 2:
129 |         // https://github.com/webpack/webpack/issues/283
130 |         loader: ExtractTextPlugin.extract('style', 'css?module&camelCase&importLoaders=1!postcss'),
131 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
132 |       },
133 |       // JSON is not enabled by default in Webpack but both Node and Browserify
134 |       // allow it implicitly so we also enable it.
135 |       {
136 |         test: /\.json$/,
137 |         loader: 'json',
138 |       },
139 |       // "file" loader makes sure those assets end up in the `build` folder.
140 |       // When you `import` an asset, you get its filename.
141 |       {
142 |         test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
143 |         loader: 'file',
144 |         query: {
145 |           name: 'static/media/[name].[hash:8].[ext]',
146 |         },
147 |       },
148 |       // "url" loader works just like "file" loader but it also embeds
149 |       // assets smaller than specified size as data URLs to avoid requests.
150 |       {
151 |         test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
152 |         loader: 'url',
153 |         query: {
154 |           limit: 10000,
155 |           name: 'static/media/[name].[hash:8].[ext]',
156 |         },
157 |       },
158 |     ],
159 |   },
160 |   postcss() {
161 |     return [
162 |       require('postcss-cssnext'),
163 |       require('postcss-import'),
164 |       // autoprefixer({
165 |       //   browsers: [
166 |       //     '>1%',
167 |       //     'last 4 versions',
168 |       //     'Firefox ESR',
169 |       //     'not ie < 9', // React doesn't support IE8 anyway
170 |       //   ]
171 |       // }),
172 |     ]
173 |   },
174 |   plugins: [
175 |     // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
176 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
177 |     // In production, it will be an empty string unless you specify "homepage"
178 |     // in `package.json`, in which case it will be the pathname of that URL.
179 |     new InterpolateHtmlPlugin({
180 |       PUBLIC_URL: publicUrl,
181 |     }),
182 |     // Generates an `index.html` file with the <script> injected.
183 |     new HtmlWebpackPlugin({
184 |       inject: true,
185 |       template: paths.appHtml,
186 |       minify: {
187 |         removeComments: true,
188 |         collapseWhitespace: true,
189 |         removeRedundantAttributes: true,
190 |         useShortDoctype: true,
191 |         removeEmptyAttributes: true,
192 |         removeStyleLinkTypeAttributes: true,
193 |         keepClosingSlash: true,
194 |         minifyJS: true,
195 |         minifyCSS: true,
196 |         minifyURLs: true,
197 |       },
198 |     }),
199 |     // Makes some environment variables available to the JS code, for example:
200 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
201 |     // It is absolutely essential that NODE_ENV was set to production here.
202 |     // Otherwise React will be compiled in the very slow development mode.
203 |     new webpack.DefinePlugin(env),
204 |     // This helps ensure the builds are consistent if source hasn't changed:
205 |     new webpack.optimize.OccurrenceOrderPlugin(),
206 |     // Try to dedupe duplicated modules, if any:
207 |     new webpack.optimize.DedupePlugin(),
208 |     // Minify the code.
209 |     new webpack.optimize.UglifyJsPlugin({
210 |       compress: {
211 |         screw_ie8: true, // React doesn't support IE8
212 |         warnings: false,
213 |       },
214 |       mangle: {
215 |         screw_ie8: true,
216 |       },
217 |       output: {
218 |         comments: false,
219 |         screw_ie8: true,
220 |       },
221 |     }),
222 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
223 |     new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
224 |     // Generate a manifest file which contains a mapping of all asset filenames
225 |     // to their corresponding output file so that tools can pick it up without
226 |     // having to parse `index.html`.
227 |     new ManifestPlugin({
228 |       fileName: 'asset-manifest.json',
229 |     }),
230 |   ],
231 |   // Some libraries import Node modules but don't use them in the browser.
232 |   // Tell Webpack to provide empty mocks for them so importing them works.
233 |   node: {
234 |     fs: 'empty',
235 |     net: 'empty',
236 |     tls: 'empty',
237 |   },
238 | }
239 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | process.env.NODE_ENV = 'development';
  3 | 
  4 | // Load environment variables from .env file. Suppress warnings using silent
  5 | // if this file is missing. dotenv will never modify any environment variables
  6 | // that have already been set.
  7 | // https://github.com/motdotla/dotenv
  8 | require('dotenv').config({silent: true});
  9 | 
 10 | var chalk = require('chalk');
 11 | var webpack = require('webpack');
 12 | var WebpackDevServer = require('webpack-dev-server');
 13 | var historyApiFallback = require('connect-history-api-fallback');
 14 | var httpProxyMiddleware = require('http-proxy-middleware');
 15 | var detect = require('detect-port');
 16 | var clearConsole = require('react-dev-utils/clearConsole');
 17 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 18 | var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 19 | var openBrowser = require('react-dev-utils/openBrowser');
 20 | var prompt = require('react-dev-utils/prompt');
 21 | var config = require('../config/webpack.config.dev');
 22 | var paths = require('../config/paths');
 23 | 
 24 | // Warn and crash if required files are missing
 25 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 26 |   process.exit(1);
 27 | }
 28 | 
 29 | // Tools like Cloud9 rely on this.
 30 | var DEFAULT_PORT = process.env.PORT || 3000;
 31 | var compiler;
 32 | var handleCompile;
 33 | 
 34 | // You can safely remove this after ejecting.
 35 | // We only use this block for testing of Create React App itself:
 36 | var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
 37 | if (isSmokeTest) {
 38 |   handleCompile = function (err, stats) {
 39 |     if (err || stats.hasErrors() || stats.hasWarnings()) {
 40 |       process.exit(1);
 41 |     } else {
 42 |       process.exit(0);
 43 |     }
 44 |   };
 45 | }
 46 | 
 47 | function setupCompiler(host, port, protocol) {
 48 |   // "Compiler" is a low-level interface to Webpack.
 49 |   // It lets us listen to some events and provide our own custom messages.
 50 |   compiler = webpack(config, handleCompile);
 51 | 
 52 |   // "invalid" event fires when you have changed a file, and Webpack is
 53 |   // recompiling a bundle. WebpackDevServer takes care to pause serving the
 54 |   // bundle, so if you refresh, it'll wait instead of serving the old one.
 55 |   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
 56 |   compiler.plugin('invalid', function() {
 57 |     clearConsole();
 58 |     console.log('Compiling...');
 59 |   });
 60 | 
 61 |   // "done" event fires when Webpack has finished recompiling the bundle.
 62 |   // Whether or not you have warnings or errors, you will get this event.
 63 |   compiler.plugin('done', function(stats) {
 64 |     clearConsole();
 65 | 
 66 |     // We have switched off the default Webpack output in WebpackDevServer
 67 |     // options so we are going to "massage" the warnings and errors and present
 68 |     // them in a readable focused way.
 69 |     var messages = formatWebpackMessages(stats.toJson({}, true));
 70 |     if (!messages.errors.length && !messages.warnings.length) {
 71 |       console.log(chalk.green('Compiled successfully!'));
 72 |       console.log();
 73 |       console.log('The app is running at:');
 74 |       console.log();
 75 |       console.log('  ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
 76 |       console.log();
 77 |       console.log('Note that the development build is not optimized.');
 78 |       console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
 79 |       console.log();
 80 |     }
 81 | 
 82 |     // If errors exist, only show errors.
 83 |     if (messages.errors.length) {
 84 |       console.log(chalk.red('Failed to compile.'));
 85 |       console.log();
 86 |       messages.errors.forEach(message => {
 87 |         console.log(message);
 88 |         console.log();
 89 |       });
 90 |       return;
 91 |     }
 92 | 
 93 |     // Show warnings if no errors were found.
 94 |     if (messages.warnings.length) {
 95 |       console.log(chalk.yellow('Compiled with warnings.'));
 96 |       console.log();
 97 |       messages.warnings.forEach(message => {
 98 |         console.log(message);
 99 |         console.log();
100 |       });
101 |       // Teach some ESLint tricks.
102 |       console.log('You may use special comments to disable some warnings.');
103 |       console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
104 |       console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
105 |     }
106 |   });
107 | }
108 | 
109 | // We need to provide a custom onError function for httpProxyMiddleware.
110 | // It allows us to log custom error messages on the console.
111 | function onProxyError(proxy) {
112 |   return function(err, req, res){
113 |     var host = req.headers && req.headers.host;
114 |     console.log(
115 |       chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
116 |       ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
117 |     );
118 |     console.log(
119 |       'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
120 |       chalk.cyan(err.code) + ').'
121 |     );
122 |     console.log();
123 | 
124 |     // And immediately send the proper error response to the client.
125 |     // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
126 |     if (res.writeHead && !res.headersSent) {
127 |         res.writeHead(500);
128 |     }
129 |     res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
130 |       host + ' to ' + proxy + ' (' + err.code + ').'
131 |     );
132 |   }
133 | }
134 | 
135 | function addMiddleware(devServer) {
136 |   // `proxy` lets you to specify a fallback server during development.
137 |   // Every unrecognized request will be forwarded to it.
138 |   var proxy = require(paths.appPackageJson).proxy;
139 |   devServer.use(historyApiFallback({
140 |     // Paths with dots should still use the history fallback.
141 |     // See https://github.com/facebookincubator/create-react-app/issues/387.
142 |     disableDotRule: true,
143 |     // For single page apps, we generally want to fallback to /index.html.
144 |     // However we also want to respect `proxy` for API calls.
145 |     // So if `proxy` is specified, we need to decide which fallback to use.
146 |     // We use a heuristic: if request `accept`s text/html, we pick /index.html.
147 |     // Modern browsers include text/html into `accept` header when navigating.
148 |     // However API calls like `fetch()` won’t generally accept text/html.
149 |     // If this heuristic doesn’t work well for you, don’t use `proxy`.
150 |     htmlAcceptHeaders: proxy ?
151 |       ['text/html'] :
152 |       ['text/html', '*/*']
153 |   }));
154 |   if (proxy) {
155 |     if (typeof proxy !== 'string') {
156 |       console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
157 |       console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
158 |       console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
159 |       process.exit(1);
160 |     }
161 | 
162 |     // Otherwise, if proxy is specified, we will let it handle any request.
163 |     // There are a few exceptions which we won't send to the proxy:
164 |     // - /index.html (served as HTML5 history API fallback)
165 |     // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
166 |     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
167 |     // Tip: use https://jex.im/regulex/ to visualize the regex
168 |     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
169 |     devServer.use(mayProxy,
170 |       // Pass the scope regex both to Express and to the middleware for proxying
171 |       // of both HTTP and WebSockets to work without false positives.
172 |       httpProxyMiddleware(pathname => mayProxy.test(pathname), {
173 |         target: proxy,
174 |         logLevel: 'silent',
175 |         onError: onProxyError(proxy),
176 |         secure: false,
177 |         changeOrigin: true
178 |       })
179 |     );
180 |   }
181 |   // Finally, by now we have certainly resolved the URL.
182 |   // It may be /index.html, so let the dev server try serving it again.
183 |   devServer.use(devServer.middleware);
184 | }
185 | 
186 | function runDevServer(host, port, protocol) {
187 |   var devServer = new WebpackDevServer(compiler, {
188 |     // Silence WebpackDevServer's own logs since they're generally not useful.
189 |     // It will still show compile warnings and errors with this setting.
190 |     clientLogLevel: 'none',
191 |     // By default WebpackDevServer serves physical files from current directory
192 |     // in addition to all the virtual build products that it serves from memory.
193 |     // This is confusing because those files won’t automatically be available in
194 |     // production build folder unless we copy them. However, copying the whole
195 |     // project directory is dangerous because we may expose sensitive files.
196 |     // Instead, we establish a convention that only files in `public` directory
197 |     // get served. Our build script will copy `public` into the `build` folder.
198 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_PATH%:
199 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
200 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
201 |     // Note that we only recommend to use `public` folder as an escape hatch
202 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
203 |     // for some reason broken when imported through Webpack. If you just want to
204 |     // use an image, put it in `src` and `import` it from JavaScript instead.
205 |     contentBase: paths.appPublic,
206 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
207 |     // for the WebpackDevServer client so it can learn when the files were
208 |     // updated. The WebpackDevServer client is included as an entry point
209 |     // in the Webpack development configuration. Note that only changes
210 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
211 |     hot: true,
212 |     // It is important to tell WebpackDevServer to use the same "root" path
213 |     // as we specified in the config. In development, we always serve from /.
214 |     publicPath: config.output.publicPath,
215 |     // WebpackDevServer is noisy by default so we emit custom message instead
216 |     // by listening to the compiler events with `compiler.plugin` calls above.
217 |     quiet: true,
218 |     // Reportedly, this avoids CPU overload on some systems.
219 |     // https://github.com/facebookincubator/create-react-app/issues/293
220 |     watchOptions: {
221 |       ignored: /node_modules/
222 |     },
223 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
224 |     https: protocol === "https",
225 |     host: host
226 |   });
227 | 
228 |   // Our custom middleware proxies requests to /index.html or a remote API.
229 |   addMiddleware(devServer);
230 | 
231 |   // Launch WebpackDevServer.
232 |   devServer.listen(port, (err, result) => {
233 |     if (err) {
234 |       return console.log(err);
235 |     }
236 | 
237 |     clearConsole();
238 |     console.log(chalk.cyan('Starting the development server...'));
239 |     console.log();
240 |     openBrowser(protocol + '://' + host + ':' + port + '/');
241 |   });
242 | }
243 | 
244 | function run(port) {
245 |   var protocol = process.env.HTTPS === 'true' ? "https" : "http";
246 |   var host = process.env.HOST || 'localhost';
247 |   setupCompiler(host, port, protocol);
248 |   runDevServer(host, port, protocol);
249 | }
250 | 
251 | // We attempt to use the default port but if it is busy, we offer the user to
252 | // run on a different port. `detect()` Promise resolves to the next free port.
253 | detect(DEFAULT_PORT).then(port => {
254 |   if (port === DEFAULT_PORT) {
255 |     run(port);
256 |     return;
257 |   }
258 | 
259 |   clearConsole();
260 |   var question =
261 |     chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') +
262 |     '\n\nWould you like to run the app on another port instead?';
263 | 
264 |   prompt(question, true).then(shouldChangePort => {
265 |     if (shouldChangePort) {
266 |       run(port);
267 |     }
268 |   });
269 | });
270 | 


--------------------------------------------------------------------------------