status-im/MyCrypto
2
0
Fork 0
mirror of https://github.com/status-im/MyCrypto.git synced 2025-01-22 17:08:55 +00:00
Code Issues Projects Releases Wiki Activity

reformat everything

Browse Source
This commit is contained in:
Daniel Ternyak 2017-07-03 22:28:56 -05:00
parent bd531c91fc
commit 12fa008755
40 changed files with 17477 additions and 13062 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common/actions/common.js
View File

@ -1,4 +1,4 @@
export const LOCATION_CHANGE = '@@router/LOCATION_CHANGE' export const LOCATION_CHANGE = '@@router/LOCATION_CHANGE';
// I'm not sure, but I guess that if you use redux-devtools extension your APP_INIT should be look like: // I'm not sure, but I guess that if you use redux-devtools extension your APP_INIT should be look like:
// export const APP_INIT = '@@INIT' // export const APP_INIT = '@@INIT'
export const APP_INIT = '@@redux/INIT' export const APP_INIT = '@@redux/INIT';

52
common/actions/notifications.js
View File

@ -3,41 +3,45 @@
export type NOTIFICATION_LEVEL = 'danger' | 'warning' | 'success' | 'info'; export type NOTIFICATION_LEVEL = 'danger' | 'warning' | 'success' | 'info';
export type Notification = { export type Notification = {
level: NOTIFICATION_LEVEL, level: NOTIFICATION_LEVEL,
msg: string, msg: string,
duration?: number duration?: number
}; };
export type ShowNotificationAction = { export type ShowNotificationAction = {
type: 'SHOW_NOTIFICATION', type: 'SHOW_NOTIFICATION',
payload: Notification payload: Notification
}; };
export type CloseNotificationAction = { export type CloseNotificationAction = {
type: 'CLOSE_NOTIFICATION', type: 'CLOSE_NOTIFICATION',
payload: Notification payload: Notification
}; };
export type NotificationsAction = ShowNotificationAction | CloseNotificationAction; export type NotificationsAction =
| ShowNotificationAction
| CloseNotificationAction;
export function showNotification( export function showNotification(
level: NOTIFICATION_LEVEL = 'info', level: NOTIFICATION_LEVEL = 'info',
msg: string, msg: string,
duration?: number duration?: number
): ShowNotificationAction { ): ShowNotificationAction {
return { return {
type: 'SHOW_NOTIFICATION', type: 'SHOW_NOTIFICATION',
payload: { payload: {
level, level,
msg, msg,
duration duration
} }
}; };
} }
export function closeNotification(notification: Notification): CloseNotificationAction { export function closeNotification(
return { notification: Notification
type: 'CLOSE_NOTIFICATION', ): CloseNotificationAction {
payload: notification return {
}; type: 'CLOSE_NOTIFICATION',
payload: notification
};
} }

141
common/api/utils.js
View File

@ -2,55 +2,55 @@
// feel free to replace with your code // feel free to replace with your code
// (get, post are used in ApiServices) // (get, post are used in ApiServices)
import { getLocalToken } from 'api/AuthSvc';
import config from 'config';
import {getLocalToken} from 'api/AuthSvc'; window.BASE_API = config.BASE_API;
import config from 'config'
window.BASE_API = config.BASE_API
function requestWrapper(method) { function requestWrapper(method) {
return async function (url, data = null, params = {}) { return async function(url, data = null, params = {}) {
if (method === 'GET') { if (method === 'GET') {
// is it a GET? // is it a GET?
// GET doesn't have data // GET doesn't have data
params = data; params = data;
data = null; data = null;
} else if (data === Object(data)) { } else if (data === Object(data)) {
// (data === Object(data)) === _.isObject(data) // (data === Object(data)) === _.isObject(data)
data = JSON.stringify(data) data = JSON.stringify(data);
} else { } else {
throw new Error(`XHR invalid, check ${method} on ${url}`) throw new Error(`XHR invalid, check ${method} on ${url}`);
}
// default params for fetch = method + (Content-Type)
let defaults = {
method: method,
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
}
// check that req url is relative and request was sent to our domain
if (url.match(/^https?:\/\//gi) > -1) {
let token = getLocalToken();
if (token) {
defaults.headers['Authorization'] = `JWT ${token}`;
}
url = window.BASE_API + url;
}
if (data) {
defaults.body = data;
}
let paramsObj = {...defaults, headers: {...params, ...defaults.headers}}
return await fetch(url, paramsObj)
.then(parseJSON)
.catch((err) => {
console.error(err)
});
} }
// default params for fetch = method + (Content-Type)
let defaults = {
method: method,
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
};
// check that req url is relative and request was sent to our domain
if (url.match(/^https?:\/\//gi) > -1) {
let token = getLocalToken();
if (token) {
defaults.headers['Authorization'] = `JWT ${token}`;
}
url = window.BASE_API + url;
}
if (data) {
defaults.body = data;
}
let paramsObj = {
...defaults,
headers: { ...params, ...defaults.headers }
};
return await fetch(url, paramsObj).then(parseJSON).catch(err => {
console.error(err);
});
};
} }
// middlewares // middlewares
@ -64,28 +64,27 @@ function requestWrapper(method) {
* @return {Object} response result with "ok" property * @return {Object} response result with "ok" property
*/ */
async function parseJSON(res) { async function parseJSON(res) {
let json; let json;
try { try {
json = await res.json() json = await res.json();
} catch (e) { } catch (e) {
return {data: {}, ok: false} return { data: {}, ok: false };
} }
// simplest validation ever, ahah :) // simplest validation ever, ahah :)
if (!res.ok) { if (!res.ok) {
return {data: json, ok: false} return { data: json, ok: false };
} }
// resultOK - is a function with side effects // resultOK - is a function with side effects
// It removes ok property from result object // It removes ok property from result object
return {data: json, ok: true} return { data: json, ok: true };
} }
export const get = requestWrapper('GET');
export const get = requestWrapper('GET') export const post = requestWrapper('POST');
export const post = requestWrapper('POST') export const put = requestWrapper('PUT');
export const put = requestWrapper('PUT') export const patch = requestWrapper('PATCH');
export const patch = requestWrapper('PATCH') export const del = requestWrapper('DELETE');
export const del = requestWrapper('DELETE')
// USAGE: // USAGE:
// get('https://www.google.com', { // get('https://www.google.com', {
@ -108,11 +107,11 @@ export const del = requestWrapper('DELETE')
* @return {bool} - indicates was request successful or not * @return {bool} - indicates was request successful or not
*/ */
export function resultOK(result) { export function resultOK(result) {
if (result) { if (result) {
let ok = result.ok let ok = result.ok;
delete result.ok delete result.ok;
return ok //look at parseJSON return ok; //look at parseJSON
} else { } else {
return false return false;
} }
} }

38
common/components/Root/index.jsx
View File

@ -1,24 +1,24 @@
import React, {Component} from 'react' import React, { Component } from 'react';
import {Provider} from 'react-redux' import { Provider } from 'react-redux';
import {Router} from 'react-router' import { Router } from 'react-router';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
export default class Root extends Component { export default class Root extends Component {
static propTypes = { static propTypes = {
store: PropTypes.object, store: PropTypes.object,
history: PropTypes.object, history: PropTypes.object,
routes: PropTypes.func routes: PropTypes.func
}; };
render() { render() {
const {store, history, routes} = this.props; const { store, history, routes } = this.props;
// key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395 // key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
return ( return (
<Provider store={store} key={Math.random()}> <Provider store={store} key={Math.random()}>
<Router history={history} key={Math.random()}> <Router history={history} key={Math.random()}>
{routes()} {routes()}
</Router> </Router>
</Provider> </Provider>
); );
} }
} }

116
common/containers/App/Notifications.jsx
View File

@ -5,74 +5,74 @@ import { closeNotification } from 'actions/notifications';
import type { Notification } from 'actions/notifications'; import type { Notification } from 'actions/notifications';
class NotificationRow extends React.Component { class NotificationRow extends React.Component {
props: { props: {
notification: Notification, notification: Notification,
onClose: (n: Notification) => void onClose: (n: Notification) => void
}; };
render() { render() {
const { msg, level } = this.props.notification; const { msg, level } = this.props.notification;
let className = ''; let className = '';
switch (level) { switch (level) {
case 'danger': case 'danger':
className = 'alert-danger'; className = 'alert-danger';
break; break;
case 'success': case 'success':
className = 'alert-success'; className = 'alert-success';
break; break;
case 'warning': case 'warning':
className = 'alert-warning'; className = 'alert-warning';
break; break;
}
return (
<div
className={`alert popup ${className} animated-show-hide`}
role="alert"
aria-live="assertive"
>
<span className="sr-only">{level}</span>
<div className="container" dangerouslySetInnerHTML={{ __html: msg }} />
<i
tabIndex="0"
aria-label="dismiss"
className="icon-close"
onClick={this.onClose}
/>
</div>
);
} }
onClose = () => { return (
this.props.onClose(this.props.notification); <div
}; className={`alert popup ${className} animated-show-hide`}
role="alert"
aria-live="assertive"
>
<span className="sr-only">{level}</span>
<div className="container" dangerouslySetInnerHTML={{ __html: msg }} />
<i
tabIndex="0"
aria-label="dismiss"
className="icon-close"
onClick={this.onClose}
/>
</div>
);
}
onClose = () => {
this.props.onClose(this.props.notification);
};
} }
export class Notifications extends React.Component { export class Notifications extends React.Component {
props: { props: {
notifications: Notification[], notifications: Notification[],
closeNotification: (n: Notification) => void closeNotification: (n: Notification) => void
}; };
render() { render() {
if (!this.props.notifications.length) { if (!this.props.notifications.length) {
return null; return null;
}
return (
<div className="alerts-container">
{this.props.notifications.map((n, i) =>
<NotificationRow
key={`${n.level}-${i}`}
notification={n}
onClose={this.props.closeNotification}
/>
)}
</div>
);
} }
return (
<div className="alerts-container">
{this.props.notifications.map((n, i) =>
<NotificationRow
key={`${n.level}-${i}`}
notification={n}
onClose={this.props.closeNotification}
/>
)}
</div>
);
}
} }
const mapStateToProps = state => ({ const mapStateToProps = state => ({
notifications: state.notifications notifications: state.notifications
}); });
export default connect(mapStateToProps, { closeNotification })(Notifications); export default connect(mapStateToProps, { closeNotification })(Notifications);

68
common/containers/Tabs/Help/index.js
View File

@ -1,27 +1,47 @@
import React from 'react'; import React from 'react';
const Help = () => ( const Help = () =>
<section className="container" style={{minHeight: '50%'}}> <section className="container" style={{ minHeight: '50%' }}>
<div className="tab-content"> <div className="tab-content">
<article className="tab-pane help active"> <article className="tab-pane help active">
<h1 translate="NAV_Help">Help</h1> <h1 translate="NAV_Help">Help</h1>
<article className="collapse-container"> <article className="collapse-container">
<div> <div>
<ul> <ul>
<li><h3><a <li>
href="https://www.reddit.com/r/ethereum/comments/47nkoi/psa_check_your_ethaddressorg_wallets_and_any/d0eo45o" <h3>
target="_blank"><span className="text-danger" translate="HELP_Warning">If you created a wallet -or- downloaded the repo before <strong>Dec. 31st, 2015</strong>, please check your wallets &amp; <a
download a new version of the repo. Click for details.</span></a></h3></li> href="https://www.reddit.com/r/ethereum/comments/47nkoi/psa_check_your_ethaddressorg_wallets_and_any/d0eo45o"
<li><h3>This target="_blank"
page is deprecated. Please check out our more up-to-date and >
searchable <a href="https://myetherwallet.groovehq.com/help_center" target="_blank">Knowledge <span className="text-danger" translate="HELP_Warning">
Base. </a></h3></li> If you created a wallet -or- downloaded the repo before{' '}
</ul> <strong>Dec. 31st, 2015</strong>, please check your
</div> wallets &amp;
</article> download a new version of the repo. Click for details.
</article> </span>
</div> </a>
</section> </h3>
); </li>
<li>
<h3>
This
page is deprecated. Please check out our more up-to-date and
searchable{' '}
<a
href="https://myetherwallet.groovehq.com/help_center"
target="_blank"
>
Knowledge
Base.{' '}
</a>
</h3>
</li>
</ul>
</div>
</article>
</article>
</div>
</section>;
export default Help export default Help;

3
common/containers/Tabs/SendTransaction/components/GasField.jsx
View File

@ -15,7 +15,8 @@ export default class GasField extends React.Component {
return ( return (
<div className="row form-group"> <div className="row form-group">
<div className="col-sm-11 clearfix"> <div className="col-sm-11 clearfix">
<label>{translate('TRANS_gas')}{' '} <label>
{translate('TRANS_gas')}{' '}
</label> </label>
<input <input
className={`form-control ${isFinite(parseFloat(value)) && className={`form-control ${isFinite(parseFloat(value)) &&

2
common/containers/index.js
View File

@ -1 +1 @@
export App from './App' export App from './App';

1260
common/translations/ar.js
View File

File diff suppressed because it is too large Load Diff

1247
common/translations/de.js
View File

File diff suppressed because it is too large Load Diff

1246
common/translations/el.js
View File

File diff suppressed because it is too large Load Diff

1220
common/translations/en.js
View File

File diff suppressed because it is too large Load Diff

1249
common/translations/es.js
View File

File diff suppressed because it is too large Load Diff

1266
common/translations/fi.js
View File

File diff suppressed because it is too large Load Diff

1256
common/translations/fr.js
View File

File diff suppressed because it is too large Load Diff

1251
common/translations/hu.js
View File

File diff suppressed because it is too large Load Diff

1236
common/translations/id.js
View File

File diff suppressed because it is too large Load Diff

1238
common/translations/it.js
View File

File diff suppressed because it is too large Load Diff

1210
common/translations/ja.js
View File

File diff suppressed because it is too large Load Diff

1162
common/translations/ko.js
View File

File diff suppressed because it is too large Load Diff

75
common/translations/markup.js
View File

@ -5,46 +5,53 @@ const BOLD_REGEXP = /(\*\*)(.*?)\1/;
const LINK_REGEXP = /\[([^\[]+)\]\(([^\)]+)\)/; const LINK_REGEXP = /\[([^\[]+)\]\(([^\)]+)\)/;
function decodeHTMLEntities(text) { function decodeHTMLEntities(text) {
var entities = [['amp', '&'], ['lt', '<'], ['gt', '>']]; var entities = [['amp', '&'], ['lt', '<'], ['gt', '>']];
for (var i = 0, max = entities.length; i < max; ++i) for (var i = 0, max = entities.length; i < max; ++i)
text = text.replace(new RegExp('&' + entities[i][0] + ';', 'g'), entities[i][1]); text = text.replace(
new RegExp('&' + entities[i][0] + ';', 'g'),
entities[i][1]
);
return text; return text;
} }
function linkify(mdString: string) { function linkify(mdString: string) {
const parts = mdString.split(LINK_REGEXP); const parts = mdString.split(LINK_REGEXP);
if (parts.length === 1) { if (parts.length === 1) {
return decodeHTMLEntities(parts[0]); return decodeHTMLEntities(parts[0]);
} }
const result = []; const result = [];
let key = 0; let key = 0;
let i = 0; let i = 0;
while (i + 1 < parts.length) { while (i + 1 < parts.length) {
result.push(decodeHTMLEntities(parts[i])); result.push(decodeHTMLEntities(parts[i]));
result.push(<a key={'linkify-' + key} href={parts[i + 2]} target="_blank">{parts[i + 1]}</a>); result.push(
key++; <a key={'linkify-' + key} href={parts[i + 2]} target="_blank">
i += 3; {parts[i + 1]}
} </a>
result.push(decodeHTMLEntities(parts[parts.length - 1])); );
return result.filter(Boolean); key++;
i += 3;
}
result.push(decodeHTMLEntities(parts[parts.length - 1]));
return result.filter(Boolean);
} }
export function markupToReact(mdString: string) { export function markupToReact(mdString: string) {
const parts = mdString.split(BOLD_REGEXP); const parts = mdString.split(BOLD_REGEXP);
if (parts.length === 1) { if (parts.length === 1) {
return linkify(parts[0]); return linkify(parts[0]);
} }
let result = []; let result = [];
let key = 0; let key = 0;
let i = 0; let i = 0;
while (i + 1 < parts.length) { while (i + 1 < parts.length) {
result = result.concat(linkify(parts[i])); result = result.concat(linkify(parts[i]));
result.push(<b key={'boldify-' + key}>{parts[i + 2]}</b>); result.push(<b key={'boldify-' + key}>{parts[i + 2]}</b>);
key++; key++;
i += 3; i += 3;
} }
result = result.concat(linkify(parts.pop())); result = result.concat(linkify(parts.pop()));
return result.filter(Boolean); return result.filter(Boolean);
} }

1225
common/translations/nl.js
View File

File diff suppressed because it is too large Load Diff

1250
common/translations/no.js
View File

File diff suppressed because it is too large Load Diff

1247
common/translations/pl.js
View File

File diff suppressed because it is too large Load Diff

1244
common/translations/pt.js
View File

File diff suppressed because it is too large Load Diff

1242
common/translations/ru.js
View File

File diff suppressed because it is too large Load Diff

1234
common/translations/sk.js
View File

File diff suppressed because it is too large Load Diff

1236
common/translations/sl.js
View File

File diff suppressed because it is too large Load Diff

1138
common/translations/sv.js
View File

File diff suppressed because it is too large Load Diff

1250
common/translations/tr.js
View File

File diff suppressed because it is too large Load Diff

1258
common/translations/vi.js
View File

File diff suppressed because it is too large Load Diff

1215
common/translations/zhcn.js
View File

File diff suppressed because it is too large Load Diff

1176
common/translations/zhtw.js
View File

File diff suppressed because it is too large Load Diff

128
spec/translations/markup.spec.js
View File

@ -2,74 +2,86 @@ import React from 'react';
import { markupToReact } from 'translations/markup'; import { markupToReact } from 'translations/markup';
describe('markupToReact', () => { describe('markupToReact', () => {
it('passes plain string as is', () => { it('passes plain string as is', () => {
const value = 'string'; const value = 'string';
const expected = 'string'; const expected = 'string';
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
}); });
it('transforms bold syntax', () => { it('transforms bold syntax', () => {
let value = '**foo**'; let value = '**foo**';
let expected = [<b key="boldify-0">foo</b>]; let expected = [<b key="boldify-0">foo</b>];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = '**foo** bar'; value = '**foo** bar';
expected = [<b key="boldify-0">foo</b>, ' bar']; expected = [<b key="boldify-0">foo</b>, ' bar'];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = 'bar **foo**'; value = 'bar **foo**';
expected = ['bar ', <b key="boldify-0">foo</b>]; expected = ['bar ', <b key="boldify-0">foo</b>];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = 'bar **foo** baz'; value = 'bar **foo** baz';
expected = ['bar ', <b key="boldify-0">foo</b>, ' baz']; expected = ['bar ', <b key="boldify-0">foo</b>, ' baz'];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = '**foo****bar**'; value = '**foo****bar**';
expected = [<b key="boldify-0">foo</b>, <b key="boldify-1">bar</b>]; expected = [<b key="boldify-0">foo</b>, <b key="boldify-1">bar</b>];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
}); });
it('transforms link syntax', () => { it('transforms link syntax', () => {
let value = '[foo](http://google.com)'; let value = '[foo](http://google.com)';
let expected = [<a key="linkify-0" href="http://google.com" target="_blank">foo</a>]; let expected = [
expect(markupToReact(value)).toEqual(expected); <a key="linkify-0" href="http://google.com" target="_blank">foo</a>
];
expect(markupToReact(value)).toEqual(expected);
value = '[foo](http://google.com) bar'; value = '[foo](http://google.com) bar';
expected = [<a key="linkify-0" href="http://google.com" target="_blank">foo</a>, ' bar']; expected = [
expect(markupToReact(value)).toEqual(expected); <a key="linkify-0" href="http://google.com" target="_blank">foo</a>,
' bar'
];
expect(markupToReact(value)).toEqual(expected);
value = 'bar [foo](http://google.com)'; value = 'bar [foo](http://google.com)';
expected = ['bar ', <a key="linkify-0" href="http://google.com" target="_blank">foo</a>]; expected = [
expect(markupToReact(value)).toEqual(expected); 'bar ',
<a key="linkify-0" href="http://google.com" target="_blank">foo</a>
];
expect(markupToReact(value)).toEqual(expected);
value = 'bar [foo](http://google.com) baz'; value = 'bar [foo](http://google.com) baz';
expected = ['bar ', <a key="linkify-0" href="http://google.com" target="_blank">foo</a>, ' baz']; expected = [
expect(markupToReact(value)).toEqual(expected); 'bar ',
<a key="linkify-0" href="http://google.com" target="_blank">foo</a>,
' baz'
];
expect(markupToReact(value)).toEqual(expected);
value = '[foo](http://google.com)[bar](http://google.ca)'; value = '[foo](http://google.com)[bar](http://google.ca)';
expected = [ expected = [
<a key="linkify-0" href="http://google.com" target="_blank">foo</a>, <a key="linkify-0" href="http://google.com" target="_blank">foo</a>,
<a key="linkify-1" href="http://google.ca" target="_blank">bar</a> <a key="linkify-1" href="http://google.ca" target="_blank">bar</a>
]; ];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
}); });
it('converts mixed syntax', () => { it('converts mixed syntax', () => {
let value = 'Bold **foo** link [foo](http://google.com) text'; let value = 'Bold **foo** link [foo](http://google.com) text';
let expected = [ let expected = [
'Bold ', 'Bold ',
<b key="boldify-0">foo</b>, <b key="boldify-0">foo</b>,
' link ', ' link ',
<a key="linkify-0" href="http://google.com" target="_blank">foo</a>, <a key="linkify-0" href="http://google.com" target="_blank">foo</a>,
' text' ' text'
]; ];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
}); });
it('converts html entities', () => { it('converts html entities', () => {
let value = '&amp;&amp;'; let value = '&amp;&amp;';
let expected = '&&'; let expected = '&&';
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
}) });
}); });

16
webpack_config/config.js
View File

@ -1,18 +1,24 @@
'use strict' 'use strict';
const path = require('path') const path = require('path');
module.exports = { module.exports = {
port: 3000, port: 3000,
title: 'MEW', title: 'MEW',
publicPath: process.env.BUILD_GH_PAGES ? '/react-semantic.ui-starter/' : '/', publicPath: process.env.BUILD_GH_PAGES ? '/react-semantic.ui-starter/' : '/',
srcPath: path.join(__dirname, './../common'), srcPath: path.join(__dirname, './../common'),
// add these dependencies to a standalone vendor bundle // add these dependencies to a standalone vendor bundle
vendor: [ vendor: [
'react', 'react-dom', 'react-router', 'redux', 'react-router-redux', 'redux-thunk', 'whatwg-fetch' 'react',
'react-dom',
'react-router',
'redux',
'react-router-redux',
'redux-thunk',
'whatwg-fetch'
], ],
// enable babelrc // enable babelrc
babel: { babel: {
babelrc: true babelrc: true
}, },
cssModules: false cssModules: false
} };

14
webpack_config/log-plugin.js
View File

@ -1,15 +1,17 @@
'use strict' 'use strict';
const chalk = require('chalk') const chalk = require('chalk');
// this plugin if for loggin url after each time the compilation is done. // this plugin if for loggin url after each time the compilation is done.
module.exports = class LogPlugin { module.exports = class LogPlugin {
constructor(port) { constructor(port) {
this.port = port this.port = port;
} }
apply(compiler) { apply(compiler) {
compiler.plugin('done', () => { compiler.plugin('done', () => {
console.log(`> App is running at ${chalk.yellow(`http://localhost:${this.port}`)}\n`) console.log(
}) `> App is running at ${chalk.yellow(`http://localhost:${this.port}`)}\n`
);
});
} }
} };

82
webpack_config/server.js
View File

@ -1,57 +1,59 @@
'use strict' 'use strict';
const path = require('path') const path = require('path');
const express = require('express') const express = require('express');
const webpack = require('webpack') const webpack = require('webpack');
const webpackConfig = require('./webpack.dev') const webpackConfig = require('./webpack.dev');
const config = require('./config') const config = require('./config');
const LogPlugin = require('./log-plugin') const LogPlugin = require('./log-plugin');
const app = express() const app = express();
const port = config.port const port = config.port;
webpackConfig.entry.client = [ webpackConfig.entry.client = [
'react-hot-loader/patch', 'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true', 'webpack-hot-middleware/client?reload=true',
'webpack/hot/only-dev-server', 'webpack/hot/only-dev-server',
webpackConfig.entry.client webpackConfig.entry.client
] ];
webpackConfig.plugins.push(new LogPlugin(port)) webpackConfig.plugins.push(new LogPlugin(port));
let compiler let compiler;
try { try {
compiler = webpack(webpackConfig) compiler = webpack(webpackConfig);
} catch (err) { } catch (err) {
console.log(err.message) console.log(err.message);
process.exit(1) process.exit(1);
} }
const devMiddleWare = require('webpack-dev-middleware')(compiler, { const devMiddleWare = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath, publicPath: webpackConfig.output.publicPath,
quiet: true, quiet: true,
inline: true, inline: true,
headers: { headers: {
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': '*', 'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Headers': '*' 'Access-Control-Allow-Headers': '*'
} }
}) });
app.use(devMiddleWare) app.use(devMiddleWare);
app.use(require('webpack-hot-middleware')(compiler, { app.use(
require('webpack-hot-middleware')(compiler, {
log: console.log log: console.log
})) })
);
const mfs = devMiddleWare.fileSystem const mfs = devMiddleWare.fileSystem;
const file = path.join(webpackConfig.output.path, 'index.html') const file = path.join(webpackConfig.output.path, 'index.html');
devMiddleWare.waitUntilValid() devMiddleWare.waitUntilValid();
app.get('*', (req, res) => { app.get('*', (req, res) => {
devMiddleWare.waitUntilValid(() => { devMiddleWare.waitUntilValid(() => {
const html = mfs.readFileSync(file) const html = mfs.readFileSync(file);
res.end(html) res.end(html);
}) });
}) });
app.listen(port) app.listen(port);

38
webpack_config/utils.js
View File

@ -1,28 +1,28 @@
'use strict' 'use strict';
const path = require('path') const path = require('path');
const config = require('./config') const config = require('./config');
const _ = module.exports = {} const _ = (module.exports = {});
_.cwd = (file) => { _.cwd = file => {
return path.join(process.cwd(), file || '') return path.join(process.cwd(), file || '');
} };
_.outputPath = path.join(__dirname, '../dist') _.outputPath = path.join(__dirname, '../dist');
_.outputIndexPath = path.join(__dirname, '../dist/index.html') _.outputIndexPath = path.join(__dirname, '../dist/index.html');
_.target = 'web' _.target = 'web';
_.loadersOptions = () => { _.loadersOptions = () => {
const isProd = process.env.NODE_ENV === 'production' const isProd = process.env.NODE_ENV === 'production';
return { return {
minimize: isProd, minimize: isProd,
options: { options: {
// css-loader relies on context // css-loader relies on context
context: process.cwd(), context: process.cwd(),
babel: config.babel babel: config.babel
}
} }
} };
};

54
webpack_config/webpack.dev.js
View File

@ -1,31 +1,33 @@
'use strict' 'use strict';
process.env.NODE_ENV = 'development' process.env.NODE_ENV = 'development';
const webpack = require('webpack') const webpack = require('webpack');
const base = require('./webpack.base') const base = require('./webpack.base');
const FriendlyErrors = require('friendly-errors-webpack-plugin') const FriendlyErrors = require('friendly-errors-webpack-plugin');
base.devtool = 'source-map' base.devtool = 'source-map';
base.module.loaders.push({ base.module.loaders.push(
test: /\.css$/, {
loaders: ['style-loader', 'css-loader', 'resolve-url-loader'] test: /\.css$/,
}, loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
{ },
test: /\.scss$/, {
loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader'] test: /\.scss$/,
}, loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader']
{ },
test: /\.less$/, {
loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'less-loader'] test: /\.less$/,
}) loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'less-loader']
}
);
base.plugins.push( base.plugins.push(
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development') 'process.env.NODE_ENV': JSON.stringify('development')
}), }),
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(), new webpack.NoEmitOnErrorsPlugin(),
new FriendlyErrors() new FriendlyErrors()
) );
module.exports = base module.exports = base;

152
webpack_config/webpack.prod.js
View File

@ -1,94 +1,86 @@
'use strict' 'use strict';
process.env.NODE_ENV = 'production' process.env.NODE_ENV = 'production';
const webpack = require('webpack') const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ProgressPlugin = require('webpack/lib/ProgressPlugin') const ProgressPlugin = require('webpack/lib/ProgressPlugin');
// const OfflinePlugin = require('offline-plugin') // const OfflinePlugin = require('offline-plugin')
const base = require('./webpack.base') const base = require('./webpack.base');
const config = require('./config') const config = require('./config');
const fs = require('fs') const fs = require('fs');
const distFolder = 'dist/'; const distFolder = 'dist/';
if (fs.existsSync(distFolder)) fs.rmdirSync(distFolder);
if (fs.existsSync(distFolder)) base.devtool = 'cheap-source-map';
fs.rmdirSync(distFolder)
base.devtool = 'cheap-source-map'
base.module.loaders.push( base.module.loaders.push(
{ {
test: /\.css$/, test: /\.css$/,
use: ExtractTextPlugin.extract( use: ExtractTextPlugin.extract({
{ fallback: 'style-loader',
fallback: 'style-loader', use: 'css-loader'
use: 'css-loader' })
} },
) {
}, test: /\.scss$/,
{ use: ExtractTextPlugin.extract({
test: /\.scss$/, fallback: 'style-loader',
use: ExtractTextPlugin.extract( use: ['css-loader', 'sass-loader']
{ })
fallback: 'style-loader', },
use: ['css-loader', 'sass-loader'] {
} test: /\.less$/,
) use: ExtractTextPlugin.extract({
}, fallback: 'style-loader',
{ use: ['css-loader', 'less-loader']
test: /\.less$/, })
use: ExtractTextPlugin.extract( }
{ );
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
}
)
}
)
// a white list to add dependencies to vendor chunk // a white list to add dependencies to vendor chunk
base.entry.vendor = config.vendor base.entry.vendor = config.vendor;
// use hash filename to support long-term caching // use hash filename to support long-term caching
base.output.filename = '[name].[chunkhash:8].js' base.output.filename = '[name].[chunkhash:8].js';
// add webpack plugins // add webpack plugins
base.plugins.push( base.plugins.push(
new ProgressPlugin(), new ProgressPlugin(),
new ExtractTextPlugin('[name].[chunkhash:8].css'), new ExtractTextPlugin('[name].[chunkhash:8].css'),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production') 'process.env.NODE_ENV': JSON.stringify('production')
}), }),
new webpack.optimize.UglifyJsPlugin({ new webpack.optimize.UglifyJsPlugin({
sourceMap: true, sourceMap: true,
compress: { compress: {
warnings: false warnings: false
}, },
output: { output: {
comments: false comments: false
} }
}), }),
// extract vendor chunks // extract vendor chunks
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', name: 'vendor',
filename: 'vendor.[chunkhash:8].js' filename: 'vendor.[chunkhash:8].js'
}) })
// For progressive web apps // For progressive web apps
// new OfflinePlugin({ // new OfflinePlugin({
// relativePaths: false, // relativePaths: false,
// AppCache: false, // AppCache: false,
// ServiceWorker: { // ServiceWorker: {
// events: true // events: true
// } // }
// }) // })
) );
// minimize webpack output // minimize webpack output
base.stats = { base.stats = {
// Add children information // Add children information
children: false, children: false,
// Add chunk information (setting this to `false` allows for a less verbose output) // Add chunk information (setting this to `false` allows for a less verbose output)
chunks: false, chunks: false,
// Add built modules information to chunk information // Add built modules information to chunk information
chunkModules: false, chunkModules: false,
chunkOrigins: false, chunkOrigins: false,
modules: false modules: false
} };
module.exports = base module.exports = base;