mirror of
https://github.com/elyby/emails-renderer.git
synced 2025-05-31 14:12:05 +05:30
Upgrade project structure to webpack 4.
Remove unused dependencies. Rename all .jsx files into .js.
This commit is contained in:
@@ -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,
|
||||
}),
|
||||
};
|
||||
@@ -1,3 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
import { Table } from 'components/table';
|
||||
@@ -1,3 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function Html(props) {
|
||||
return (
|
||||
<html>
|
||||
@@ -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}) {
|
||||
@@ -1,3 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
export default function Content(props) {
|
||||
@@ -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() {
|
||||
@@ -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}) {
|
||||
@@ -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() {
|
||||
@@ -1,3 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
export default function Table(props) {
|
||||
@@ -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`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Component, PropTypes } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
@@ -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 (
|
||||
@@ -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';
|
||||
@@ -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,
|
||||
};
|
||||
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user