Upgrade project structure to webpack 4.

Remove unused dependencies.
Rename all .jsx files into .js.
This commit is contained in:
ErickSkrauch
2019-03-17 01:37:00 +03:00
parent 1f102b71b0
commit cb84df8f96
29 changed files with 2890 additions and 2298 deletions

View File

@@ -1,4 +1,5 @@
import { PropTypes } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { IntlProvider, addLocaleData } from 'react-intl';
@@ -32,12 +33,12 @@ addLocaleData(ptLocaleData);
addLocaleData(ukLocaleData);
addLocaleData(viLocaleData);
import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from './constants';
import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from './params';
import BaseLayout from 'components/BaseLayout';
export default function App({type, payload = {}}) {
let {locale} = payload;
let { locale } = payload;
if (!locale || SUPPORTED_LANGUAGES.indexOf(locale) === -1) {
locale = DEFAULT_LANGUAGE;
@@ -58,6 +59,6 @@ export default function App({type, payload = {}}) {
App.propTypes = {
type: PropTypes.string.isRequired,
payload: PropTypes.shape({
locale: PropTypes.string
})
locale: PropTypes.string,
}),
};

View File

@@ -1,3 +1,5 @@
import React from 'react';
import styles from './styles';
import { Table } from 'components/table';

View File

@@ -1,3 +1,5 @@
import React from 'react';
export default function Html(props) {
return (
<html>

View File

@@ -1,4 +1,5 @@
import { PropTypes } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage as Message } from 'react-intl';
@@ -6,7 +7,6 @@ import { colors, green } from 'components/ui/colors';
import { Button, Input } from 'components/ui';
import styles from './styles';
import messages from './messages.intl.json';
export default function Code({code, link, label, color = green}) {

View File

@@ -1,3 +1,5 @@
import React from 'react';
import styles from './styles';
export default function Content(props) {

View File

@@ -1,10 +1,10 @@
import { Table } from 'components/table';
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { Table } from 'components/table';
import { BitmapText } from 'components/text';
import styles from './styles';
import messages from './messages.intl.json';
export default function Footer() {

View File

@@ -1,9 +1,10 @@
import { Table } from 'components/table';
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage as Message } from 'react-intl';
import { PropTypes } from 'react';
import { Table } from 'components/table';
import styles from './styles';
import messages from './messages.intl.json';
export default function Userbar({username, title}) {

View File

@@ -1,7 +1,8 @@
import React from 'react';
import { Table } from 'components/table';
import styles from './styles';
import logoImage from './logo.png';
export default function Userbar() {

View File

@@ -1,3 +1,5 @@
import React from 'react';
import styles from './styles';
export default function Table(props) {

View File

@@ -1,5 +1,5 @@
import { PropTypes } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage as Message } from 'react-intl';
export function BitmapText(props) {
@@ -19,18 +19,18 @@ export function BitmapText(props) {
src = require(`emails/${componentPath}/images/${props.intl.locale}/${fileName}.png`);
// TODO: we can improve this loader in future by adding an option to disable file emitting
// because this thing is handled by url-loader
size = require(`image-size!emails/${componentPath}/images/${props.intl.locale}/${fileName}.png`);
size = require(`image-size-loader!emails/${componentPath}/images/${props.intl.locale}/${fileName}.png`);
} catch (err) { // fallback to default locale
src = require(`emails/${componentPath}/images/${props.intl.defaultLocale}/${fileName}.png`);
size = require(`image-size!emails/${componentPath}/images/${props.intl.defaultLocale}/${fileName}.png`);
size = require(`image-size-loader!emails/${componentPath}/images/${props.intl.defaultLocale}/${fileName}.png`);
}
} catch (err) { // try components
try {
src = require(`components/${componentPath}/images/${props.intl.locale}/${fileName}.png`);
size = require(`image-size!components/${componentPath}/images/${props.intl.locale}/${fileName}.png`);
size = require(`image-size-loader!components/${componentPath}/images/${props.intl.locale}/${fileName}.png`);
} catch (err) { // fallback to default locale
src = require(`components/${componentPath}/images/${props.intl.defaultLocale}/${fileName}.png`);
size = require(`image-size!components/${componentPath}/images/${props.intl.defaultLocale}/${fileName}.png`);
size = require(`image-size-loader!components/${componentPath}/images/${props.intl.defaultLocale}/${fileName}.png`);
}
}

View File

@@ -1,4 +1,5 @@
import { Component, PropTypes } from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from './styles';

View File

@@ -1,18 +1,18 @@
import { Component, PropTypes } from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { colors, green } from 'components/ui/colors';
import styles from './styles';
export default class Input extends Component {
static propTypes = {
value: PropTypes.string.isRequired,
color: PropTypes.oneOf(Object.values(colors))
color: PropTypes.oneOf(Object.values(colors)),
};
static defaultProps = {
color: green
color: green,
};
render() {
@@ -29,5 +29,4 @@ export default class Input extends Component {
</div>
);
}
}

View File

@@ -1,19 +1,19 @@
import { Component } from 'react';
import React, { Component } from 'react';
import App from 'App';
import List from './List';
import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from 'constants';
import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from 'params';
const EVAILABLE_EMAILS = require.context('emails', true, /index\.js$/).keys().map((path) => path.split('/')[1]);
const AVAILABLE_EMAILS = require.context('emails', true, /index\.js$/).keys().map((path) => path.split('/')[1]);
export default class DevApp extends Component {
state = {
locale: DEFAULT_LANGUAGE,
type: EVAILABLE_EMAILS[0],
type: AVAILABLE_EMAILS[0],
fixture: 'default',
isMinimized: false
isMinimized: false,
};
componentWillMount() {
@@ -63,7 +63,7 @@ export default class DevApp extends Component {
/>
<List label="Email"
items={EVAILABLE_EMAILS}
items={AVAILABLE_EMAILS}
active={type}
onChange={this.onTypeChange}
/>

View File

@@ -1,4 +1,5 @@
import { PropTypes } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
export default function List({label, items, active, onChange}) {
return (

View File

@@ -1,5 +1,5 @@
import { PropTypes } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage as Message } from 'react-intl';
import { Userbar, Header, Content, Footer } from 'components/layout';

View File

@@ -1,5 +1,5 @@
import { PropTypes } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage as Message } from 'react-intl';
import { Userbar, Header, Content, Footer } from 'components/layout';
@@ -128,5 +128,5 @@ export default function Register({username, link, code}) {
Register.propTypes = {
username: PropTypes.string,
link: PropTypes.string,
code: PropTypes.string
code: PropTypes.string,
};

View File

@@ -1,11 +1,9 @@
import 'babel-polyfill';
import { Html } from 'components';
// NOTE: we are requiring with require(), to enable dynamic dependencies
// depending on ENV, where App is running in.
// This allows us better support of hmr and reduces bundle size
const React = require('react');
/* global process: false */
// eslint-disable-next-line no-negated-condition
if (process.env.NODE_ENV !== 'production') {
@@ -18,11 +16,13 @@ if (process.env.NODE_ENV !== 'production') {
);
} else {
const ReactDOMServer = require('react-dom/server');
const { Html } = require('components');
const App = require('App').default;
module.exports = {
default(props) {
if (props.assetsHost) {
// noinspection JSUnresolvedVariable
__webpack_public_path__ = props.assetsHost.replace(/\/*$/, '/'); // eslint-disable-line
Reflect.deleteProperty(props, 'assetsHost');