generator-reackt 0.5.0 → 0.6.0

package/templates/app/src/index.js

@@ -1,50 +1,47 @@
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-
-import ReactDOM from 'react-dom';
-import { BrowserRouter as Router } from 'react-router-dom';
-<% if (flags.addRedux) { %>
-import { Provider } from 'react-redux';
-import createSagaMiddleware from 'redux-saga';
-import { applyMiddleware, createStore, compose } from 'redux';
-<% } %>
-
-<% if (flags.addFontAwesome) { %>
-  import './icons.js';
-<% } %>
-import './index.scss';
-import App from './components/App';
-<% if (flags.addRedux) { %>
-import rootSaga from './sagas';
-import rootReducer from './reducers';
-
-/* eslint-disable no-underscore-dangle */
-const composer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-/* eslint-enable */
-
-const sagaMiddleware = createSagaMiddleware();
-const enhancers = composer(applyMiddleware(sagaMiddleware));
-
-export const store = createStore(rootReducer, {}, enhancers);
-
-if (module.hot) {
-  module.hot.accept('./reducers', () => {
-    store.replaceReducer(require('./reducers').default);
-  });
-}
-
-sagaMiddleware.run(rootSaga);
-<% } %>
-
-ReactDOM.render(
-  <Router>
-<% if (flags.addRedux) { %>
-    <Provider store={store}>
-      <App />
-    </Provider>
-<% } else { %>
-    <App />
-<% } %>
-  </Router>,
-  document.getElementById('root')
-);
+import 'core-js/stable';
+
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter as Router } from 'react-router-dom';
+<% if (flags.addRedux) { %>
+import { Provider } from 'react-redux';
+import createSagaMiddleware from 'redux-saga';
+import { applyMiddleware, createStore, compose } from 'redux';
+<% } %>
+
+import './index.scss';
+import App from './components/App';
+<% if (flags.addRedux) { %>
+import rootSaga from './sagas';
+import rootReducer from './reducers';
+
+/* eslint-disable no-underscore-dangle */
+const composer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+/* eslint-enable */
+
+const sagaMiddleware = createSagaMiddleware();
+const enhancers = composer(applyMiddleware(sagaMiddleware));
+
+export const store = createStore(rootReducer, {}, enhancers);
+
+if (module.hot) {
+  module.hot.accept('./reducers', () => {
+    store.replaceReducer(require('./reducers').default);
+  });
+}
+
+sagaMiddleware.run(rootSaga);
+<% } %>
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+  <Router>
+<% if (flags.addRedux) { %>
+    <Provider store={store}>
+      <App />
+    </Provider>
+<% } else { %>
+    <App />
+<% } %>
+  </Router>
+)

package/templates/app/src/index.scss

@@ -1,16 +1,16 @@
-<% if (styleFramework === 'bulma') { %>
-@charset "utf-8";
-<% } %>
-<% if (styleFramework === 'bootstrap') { %>
-@import "~bootstrap/scss/bootstrap";
-<% } else if (styleFramework === 'uikit') { %>
-@import "~uikit/src/scss/variables-theme";
-@import "~uikit/src/scss/mixins-theme";
-@import "~uikit/src/scss/uikit-theme";
-<% } else if (styleFramework === 'foundation') { %>
-@import "~foundation-sites/scss/foundation";
-<% } else if (styleFramework === 'materialize') { %>
-@import "~materialize-css/sass/materialize";
-<% } else if (styleFramework === 'bulma') { %>
-@import "~bulma/bulma";
-<% } %>
+<% if (styleFramework === 'bulma') { %>
+@charset "utf-8";
+<% } %>
+<% if (styleFramework === 'bootstrap') { %>
+@import "~bootstrap/scss/bootstrap";
+<% } else if (styleFramework === 'uikit') { %>
+@import "~uikit/src/scss/variables-theme";
+@import "~uikit/src/scss/mixins-theme";
+@import "~uikit/src/scss/uikit-theme";
+<% } else if (styleFramework === 'foundation') { %>
+@import "~foundation-sites/scss/foundation";
+<% } else if (styleFramework === 'materialize') { %>
+@import "~materialize-css/sass/materialize";
+<% } else if (styleFramework === 'bulma') { %>
+@import "~bulma/bulma";
+<% } %>

package/templates/app/src/reducers/application.js

@@ -1,21 +1,21 @@
-import { buildActions } from 'utils';
-
-export const types = buildActions('application', ['INIT_APP']);
-
-const initApp = () => ({
-  type: types.INIT_APP
-});
-
-export const actions = {
-  initApp
-};
-
-export const initialState = {};
-
-export const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    default:
-      return state;
-  }
-};
-
+import { buildActions } from 'utils';
+
+export const types = buildActions('application', ['INIT_APP']);
+
+const initApp = () => ({
+  type: types.INIT_APP
+});
+
+export const actions = {
+  initApp
+};
+
+export const initialState = {};
+
+export const reducer = (state = initialState, action = {}) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};
+

package/templates/app/src/reducers/index.js

@@ -1,7 +1,7 @@
-import { combineReducers } from 'redux';
-
-import { reducer as application } from './application';
-
-export default combineReducers({
-  application
-});
+import { combineReducers } from 'redux';
+
+import { reducer as application } from './application';
+
+export default combineReducers({
+  application
+});

package/templates/app/src/sagas/application.js

@@ -1,9 +1,9 @@
-import { all } from 'redux-saga/effects';
-
-export const workers = {};
-
-export const watchers = {};
-
-export default function* saga() {
-  yield all(Object.values(watchers).map(watcher => watcher()));
-}
+import { all } from 'redux-saga/effects';
+
+export const workers = {};
+
+export const watchers = {};
+
+export default function* saga() {
+  yield all(Object.values(watchers).map(watcher => watcher()));
+}

package/templates/app/src/sagas/index.js

@@ -1,7 +1,7 @@
-import { fork } from 'redux-saga/effects';
-
-import application from './application';
-
-export default function* saga() {
-  yield fork(application);
-}
+import { fork } from 'redux-saga/effects';
+
+import application from './application';
+
+export default function* saga() {
+  yield fork(application);
+}

package/templates/app/src/selectors/application.js

@@ -1 +1 @@
-export const getApplication = state => state.application;
+export const getApplication = state => state.application;

package/templates/app/src/selectors/application.test.js

@@ -1,13 +1,13 @@
-import { getApplication } from './application';
-
-describe('application selectors', () => {
-  const state = {
-    application: {
-      test: true
-    }
-  };
-
-  it('getApplication', () => {
-    expect(getApplication(state)).toBe(state.application);
-  });
-});
+import { getApplication } from './application';
+
+describe('application selectors', () => {
+  const state = {
+    application: {
+      test: true
+    }
+  };
+
+  it('getApplication', () => {
+    expect(getApplication(state)).toBe(state.application);
+  });
+});

package/templates/app/src/utils/index.js

@@ -1,36 +1,36 @@
-<% if (flags.addJest) { %>
-import { createElement } from 'react';
-<% } %>
-
-<% if (flags.addRedux) { %>
-/* eslint-disable react/display-name, react/prop-types */
-
-/**
- * Creates an object containing action constants namespaced under the specified reducer.
- *
- * @param {string} reducer The name of the reducer or module
- * @param {string[]} actions A list of action names
- * @return {object} Object with action name keys and full action string values
- */
-export function buildActions(reducer, actions) {
-  const result = {};
-
-  for (const action of actions) {
-    result[action] = `${reducer}/${action}`;
-  }
-
-  return result;
-}
-<% } %>
-
-<% if (flags.addJest) { %>
-/**
- * Creates a mock component which will expose its props for snapshot testing purposes.
- *
- * @param {string} name The component/element name (e.g. "MyComponent")
- * @param {object} props An object containing props to setup
- * @return {object} Mock component with specified name and props
- */
-export const mockComponent = (name, props = {}) => () =>
-  createElement(name, props, props.children);
-<% } %>
+<% if (flags.addJest) { %>
+import { createElement } from 'react';
+<% } %>
+
+<% if (flags.addRedux) { %>
+/* eslint-disable react/display-name, react/prop-types */
+
+/**
+ * Creates an object containing action constants namespaced under the specified reducer.
+ *
+ * @param {string} reducer The name of the reducer or module
+ * @param {string[]} actions A list of action names
+ * @return {object} Object with action name keys and full action string values
+ */
+export function buildActions(reducer, actions) {
+  const result = {};
+
+  for (const action of actions) {
+    result[action] = `${reducer}/${action}`;
+  }
+
+  return result;
+}
+<% } %>
+
+<% if (flags.addJest) { %>
+/**
+ * Creates a mock component which will expose its props for snapshot testing purposes.
+ *
+ * @param {string} name The component/element name (e.g. "MyComponent")
+ * @param {object} props An object containing props to setup
+ * @return {object} Mock component with specified name and props
+ */
+export const mockComponent = (name, props = {}) => () =>
+  createElement(name, props, props.children);
+<% } %>

package/templates/app/webpack.config.babel.js

@@ -1,103 +1,103 @@
-import { resolve } from 'path';
-import HtmlPlugin from 'html-webpack-plugin';
-import ESLintPlugin from 'eslint-webpack-plugin';
-import TerserPlugin from 'terser-webpack-plugin';
-import StylelintPlugin from 'stylelint-webpack-plugin';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { CleanWebpackPlugin as CleanPlugin } from 'clean-webpack-plugin';
-import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
-
-const dev = process.env.NODE_ENV === 'development';
-
-const plugins = [
-  new CleanPlugin(),
-  new StylelintPlugin({
-    configFile: '.stylelintrc',
-    context: 'src',
-    files: '**/*.scss',
-    failOnError: true,
-    quiet: false,
-    customSyntax: 'postcss-scss'
-  }),
-  new HtmlPlugin({
-    template: './src/index.html'
-  }),
-  new ESLintPlugin(),
-  new MiniCssExtractPlugin()
-];
-
-export default {
-  mode: dev ? 'development' : 'production',
-  devtool: dev ? 'eval-cheap-module-source-map' : 'cheap-module-source-map',
-  entry: './src/index.js',
-  devServer: {
-    compress: dev,
-    open: true,
-    historyApiFallback: true,
-    hot: dev,
-    port: 9000
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: ['babel-loader']
-      },
-      {
-        test: /\.(sa|sc|c)ss$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                ident: 'postcss',
-                plugins: [
-                  require('autoprefixer'),
-                  require('postcss-flexbugs-fixes')
-                ]
-              },
-              sourceMap: dev
-            }
-          },
-          'sass-loader'
-        ]
-      },
-      {
-        test: /\.html$/,
-        use: [
-          {
-            loader: 'html-loader',
-            options: { minimize: true }
-          }
-        ]
-      }
-    ]
-  },
-  output: {
-    path: resolve(__dirname, 'dist'),
-    filename: 'main.js',
-    chunkFilename: '[name].js'
-  },
-  plugins,
-  resolve: {
-    extensions: ['.js', '.json'],
-    modules: ['node_modules', 'src'],
-    alias: {
-      components: resolve(__dirname, 'src/components'),
-      utils: resolve(__dirname, 'src/utils')
-    }
-  },
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          ecma: 12
-        }
-      }),
-      new CssMinimizerPlugin()
-    ]
-  }
-};
+import { resolve } from 'path';
+import HtmlPlugin from 'html-webpack-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import StylelintPlugin from 'stylelint-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { CleanWebpackPlugin as CleanPlugin } from 'clean-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+
+const dev = process.env.NODE_ENV === 'development';
+
+const plugins = [
+  new CleanPlugin(),
+  new StylelintPlugin({
+    configFile: '.stylelintrc',
+    context: 'src',
+    files: '**/*.scss',
+    failOnError: true,
+    quiet: false,
+    customSyntax: 'postcss-scss'
+  }),
+  new HtmlPlugin({
+    template: './src/index.html'
+  }),
+  new ESLintPlugin(),
+  new MiniCssExtractPlugin()
+];
+
+export default {
+  mode: dev ? 'development' : 'production',
+  devtool: dev ? 'eval-cheap-module-source-map' : 'cheap-module-source-map',
+  entry: './src/index.js',
+  devServer: {
+    compress: dev,
+    open: true,
+    historyApiFallback: true,
+    hot: dev,
+    port: 9000
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                ident: 'postcss',
+                plugins: [
+                  require('autoprefixer'),
+                  require('postcss-flexbugs-fixes')
+                ]
+              },
+              sourceMap: dev
+            }
+          },
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: 'html-loader',
+            options: { minimize: true }
+          }
+        ]
+      }
+    ]
+  },
+  output: {
+    path: resolve(__dirname, 'dist'),
+    filename: 'main.js',
+    chunkFilename: '[name].js'
+  },
+  plugins,
+  resolve: {
+    extensions: ['.js', '.json'],
+    modules: ['node_modules', 'src'],
+    alias: {
+      components: resolve(__dirname, 'src/components'),
+      utils: resolve(__dirname, 'src/utils')
+    }
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          ecma: 12
+        }
+      }),
+      new CssMinimizerPlugin()
+    ]
+  }
+};

package/templates/component/index.js

@@ -1,19 +1,19 @@
-import React, { Component } from 'react';
-<% if (flags.addRedux) { %>
-import { connect } from 'react-redux';
-<% } %>
-
-export class <%= component.name %> extends Component {
-  render() {
-    return <h1>Hello World</h1>;
-  }
-}
-
-<% if (flags.addRedux) { %>
-export default connect(
-  null,
-  null
-)(<%= component.name %>);
-<% } else { %>
-export default <%= component.name %>;
-<% } %>
+import React, { Component } from 'react';
+<% if (flags.addRedux) { %>
+import { connect } from 'react-redux';
+<% } %>
+
+export class <%= component.name %> extends Component {
+  render() {
+    return <h1>Hello World</h1>;
+  }
+}
+
+<% if (flags.addRedux) { %>
+export default connect(
+  null,
+  null
+)(<%= component.name %>);
+<% } else { %>
+export default <%= component.name %>;
+<% } %>

package/templates/component/index.test.js

@@ -1,14 +1,14 @@
-import renderer from 'react-test-renderer';
-
-import <%=component.name %> from './<%=component.name %>';
-
-describe('<<%= component.name %> />', () => {
-  it('renders correctly', () => {
-    const component = renderer.create(
-      <<%=component.name %> />
-    );
-    const tree = component.toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});
+import renderer from 'react-test-renderer';
+
+import <%=component.name %> from './<%=component.name %>';
+
+describe('<<%= component.name %> />', () => {
+  it('renders correctly', () => {
+    const component = renderer.create(
+      <<%=component.name %> />
+    );
+    const tree = component.toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/templates/module/reducer/index.js

@@ -1,20 +1,20 @@
-import { buildActions } from 'utils';
-
-export const types = buildActions('<%= module.name %>', ['INIT_APP']);
-
-const initApp = () => ({
-  type: types.INIT_APP
-});
-
-export const actions = {
-  initApp
-};
-
-export const initialState = {};
-
-export const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    default:
-      return state;
-  }
-};
+import { buildActions } from 'utils';
+
+export const types = buildActions('<%= module.name %>', ['INIT_APP']);
+
+const initApp = () => ({
+  type: types.INIT_APP
+});
+
+export const actions = {
+  initApp
+};
+
+export const initialState = {};
+
+export const reducer = (state = initialState, action = {}) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};

package/templates/module/saga/index.js

@@ -1,9 +1,9 @@
-import { all } from 'redux-saga/effects';
-
-export const workers = {};
-
-export const watchers = {};
-
-export default function* saga() {
-  yield all(Object.values(watchers));
-}
+import { all } from 'redux-saga/effects';
+
+export const workers = {};
+
+export const watchers = {};
+
+export default function* saga() {
+  yield all(Object.values(watchers));
+}