feat(core): React.PureComponent generators (react-boilerplate#811)

* feat(react): use React.PureComponent in demo app * feat(internals): generator support for PureComponent * chore(eslint): add missing eslint-disable on HomePage * Update appveyor.yml * Update appveyor.yml
riseofthetigers · Nov 2, 2016 · f719214 · f719214
1 parent a37c3e6
commit f719214
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 13 deletions.
diff --git a/app/containers/HomePage/index.js b/app/containers/HomePage/index.js
@@ -26,7 +26,7 @@ import { changeUsername } from './actions';
 import { selectUsername } from './selectors';
 import { selectRepos, selectLoading, selectError } from 'containers/App/selectors';
 
-export class HomePage extends React.Component {
+export class HomePage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   /**
    * when initial state username is not null, submit the form to load repos
    */

diff --git a/app/containers/LanguageProvider/index.js b/app/containers/LanguageProvider/index.js
@@ -12,7 +12,7 @@ import { createSelector } from 'reselect';
 import { IntlProvider } from 'react-intl';
 import { selectLocale } from './selectors';
 
-export class LanguageProvider extends React.Component { // eslint-disable-line react/prefer-stateless-function
+export class LanguageProvider extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
       <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>

diff --git a/app/containers/LocaleToggle/index.js b/app/containers/LocaleToggle/index.js
@@ -15,7 +15,7 @@ import { appLocales } from '../../i18n';
 import { changeLocale } from '../LanguageProvider/actions';
 import { selectLocale } from '../LanguageProvider/selectors';
 
-export class LocaleToggle extends React.Component { // eslint-disable-line
+export class LocaleToggle extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
       <Wrapper>

diff --git a/app/containers/RepoListItem/index.js b/app/containers/RepoListItem/index.js
@@ -16,7 +16,7 @@ import RepoLink from './RepoLink';
 import Wrapper from './Wrapper';
 import { selectCurrentUser } from 'containers/App/selectors';
 
-export class RepoListItem extends React.Component { // eslint-disable-line react/prefer-stateless-function
+export class RepoListItem extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {
     const item = this.props.item;
     let nameprefix = '';

diff --git a/internals/generators/component/es6.pure.js.hbs b/internals/generators/component/es6.pure.js.hbs
@@ -0,0 +1,33 @@
+/**
+*
+* {{ properCase name }}
+*
+*/
+
+import React from 'react';
+
+{{#if wantMessages}}
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+{{/if}}
+{{#if wantCSS}}
+import styles from './styles.css';
+{{/if}}
+
+class {{ properCase name }} extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      {{#if wantCSS}}
+      <div className={{curly true}}styles.{{ camelCase name }}{{curly}}>
+      {{else}}
+      <div>
+      {{/if}}
+      {{#if wantMessages}}
+        <FormattedMessage {...messages.header} />
+      {{/if}}
+      </div>
+    );
+  }
+}
+
+export default {{ properCase name }};
diff --git a/internals/generators/component/index.js b/internals/generators/component/index.js
@@ -11,7 +11,7 @@ module.exports = {
     name: 'type',
     message: 'Select the type of component',
     default: 'Stateless Function',
-    choices: () => ['ES6 Class', 'Stateless Function'],
+    choices: () => ['Stateless Function', 'ES6 Class (Pure)', 'ES6 Class'],
   }, {
     type: 'input',
     name: 'name',
@@ -32,10 +32,30 @@ module.exports = {
   }],
   actions: (data) => {
     // Generate index.js and index.test.js
+    let componentTemplate;
+
+    switch (data.type) {
+      case 'ES6 Class': {
+        componentTemplate = './component/es6.js.hbs';
+        break;
+      }
+      case 'ES6 Class (Pure)': {
+        componentTemplate = './component/es6.pure.js.hbs';
+        break;
+      }
+      case 'Stateless Function': {
+        componentTemplate = './component/stateless.js.hbs';
+        break;
+      }
+      default: {
+        componentTemplate = './component/es6.js.hbs';
+      }
+    }
+
     const actions = [{
       type: 'add',
       path: '../../app/components/{{properCase name}}/index.js',
-      templateFile: data.type === 'ES6 Class' ? './component/es6.js.hbs' : './component/stateless.js.hbs',
+      templateFile: componentTemplate,
       abortOnFail: true,
     }, {
       type: 'add',

diff --git a/internals/generators/container/index.js b/internals/generators/container/index.js
@@ -18,6 +18,12 @@ module.exports = {
 
       return 'The name is required';
     },
+  }, {
+    type: 'list',
+    name: 'component',
+    message: 'Select a base component:',
+    default: 'PureComponent',
+    choices: () => ['PureComponent', 'Component'],
   }, {
     type: 'confirm',
     name: 'wantHeaders',

diff --git a/internals/generators/container/index.js.hbs b/internals/generators/container/index.js.hbs
@@ -20,7 +20,7 @@ import messages from './messages';
 import styles from './styles.css';
 {{/if}}
 
-export class {{ properCase name }} extends React.Component { // eslint-disable-line react/prefer-stateless-function
+export class {{ properCase name }} extends React.{{{ component }}} { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
       {{#if wantCSS}}

diff --git a/internals/templates/appContainer.js b/internals/templates/appContainer.js
@@ -13,7 +13,7 @@
 
 import React from 'react';
 
-export default class App extends React.Component { // eslint-disable-line react/prefer-stateless-function
+export default class App extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
 
   static propTypes = {
     children: React.PropTypes.node,

diff --git a/internals/templates/homePage/homePage.js b/internals/templates/homePage/homePage.js
@@ -13,8 +13,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 
-export default class HomePage extends React.Component { // eslint-disable-line react/prefer-stateless-function
-
+export default class HomePage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
       <h1>

diff --git a/internals/templates/languageProvider/languageProvider.js b/internals/templates/languageProvider/languageProvider.js
@@ -12,7 +12,7 @@ import { createSelector } from 'reselect';
 import { IntlProvider } from 'react-intl';
 import { selectLocale } from './selectors';
 
-export class LanguageProvider extends React.Component { // eslint-disable-line react/prefer-stateless-function
+export class LanguageProvider extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
       <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>

diff --git a/internals/templates/notFoundPage/notFoundPage.js b/internals/templates/notFoundPage/notFoundPage.js
@@ -13,8 +13,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 
-export default class NotFound extends React.Component { // eslint-disable-line react/prefer-stateless-function
-
+export default class NotFound extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
       <h1>