generator-reackt 0.5.0 → 1.0.0

package/templates/app/src/index.tsx

@@ -0,0 +1,60 @@
+import { Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider, createHashRouter } 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';
+<% if (styleFramework === 'materialize') { %>
+import 'materialize-css';
+<% } %>
+import Layout from './components/Layout';
+import SuspenseFallback from './components/SuspenseFallback';
+import ErrorBoundary from './components/ErrorBoundary';
+<% if (flags.addRedux) { %>
+import rootSaga from './sagas';
+import rootReducer from './reducers';
+
+const composer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const sagaMiddleware = createSagaMiddleware();
+const enhancers = composer(applyMiddleware(sagaMiddleware));
+
+export const store = createStore(rootReducer, {}, enhancers);
+
+sagaMiddleware.run(rootSaga);
+<% } %>
+
+const rootElem = document.getElementById('root');
+
+if (rootElem) {
+  const root = createRoot(rootElem);
+  const router = createHashRouter([
+    {
+      path: '/',
+      element: <Layout />,
+      errorElement: <ErrorBoundary />,
+      children: [
+        {
+          index: true,
+          lazy: () => import(`./pages/index`)
+        }
+      ]
+    }
+  ]);
+
+  root.render(
+<% if (flags.addRedux) { %>
+      <Provider store={store}>
+<% } %>
+        <Suspense fallback={<SuspenseFallback />}>
+          <RouterProvider router={router} />
+        </Suspense>
+<% if (flags.addRedux) { %>
+      </Provider>
+<% } %>
+  )
+}

package/templates/app/src/pages/index.tsx

@@ -0,0 +1,3 @@
+export const Component = () => {
+  return <h1>Hello World</h1>;
+};

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

@@ -0,0 +1,36 @@
+import { ActionObject, AppState } from '../types';
+import { buildActions } from '../utils';
+
+export const types = buildActions('application', ['INIT_APP']);
+
+const initApp = () => ({
+  type: types.INIT_APP
+});
+
+export const actions = {
+  initApp
+};
+
+export const initialState: AppState = {
+  application: {
+    inited: false
+  }
+};
+
+export const reducer = (
+  state: AppState = initialState,
+  action: ActionObject = {}
+) => {
+  switch (action.type) {
+    case types.INIT_APP:
+      return {
+        ...state,
+        application: {
+          ...state.application,
+          inited: true
+        }
+      };
+    default:
+      return state;
+  }
+};

package/templates/app/src/reducers/{index.js → index.ts}

@@ -2,6 +2,7 @@ import { combineReducers } from 'redux';
 
 import { reducer as application } from './application';
 
+// Remember to update this when you add a new module
 export default combineReducers({
   application
 });

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

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

package/templates/app/src/sagas/{index.js → index.ts}

@@ -2,6 +2,7 @@ import { fork } from 'redux-saga/effects';
 
 import application from './application';
 
+// Remember to update this when you add a new module
 export default function* saga() {
   yield fork(application);
 }

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

@@ -0,0 +1,18 @@
+import { AppState } from '../types';
+import { getApplication, getApplicationInited } from './application';
+
+describe('application selectors', () => {
+  const state: AppState = {
+    application: {
+      inited: false
+    }
+  };
+
+  it('can getApplication', () => {
+    expect(getApplication(state)).toBe(state.application);
+  });
+
+  it('can getApplicationInited', () => {
+    expect(getApplicationInited(state).toBe(state.application.inited));
+  });
+});

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

@@ -0,0 +1,6 @@
+import { AppState } from '../types';
+
+export const getApplication = (state: AppState) => state.application;
+
+export const getApplicationInited = (state: AppState) =>
+  getApplication(state).inited;

package/templates/app/src/types/globals.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

package/templates/app/src/types/index.ts

@@ -0,0 +1,11 @@
+<% if (flags.addRedux) { %>
+export type AppState = {
+  application: {
+    inited: boolean;
+  };
+};
+
+export type ActionObject = {
+  type?: string;
+};
+<% } %>

package/templates/app/src/utils/{index.js → index.ts}

@@ -1,5 +1,5 @@
 <% if (flags.addJest) { %>
-import { createElement } from 'react';
+import { createElement, ComponentProps } from 'react';
 <% } %>
 
 <% if (flags.addRedux) { %>
@@ -28,9 +28,9 @@ export function buildActions(reducer, actions) {
  * 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
+ * @param {ComponentProps} props An object containing props to set
  * @return {object} Mock component with specified name and props
  */
-export const mockComponent = (name, props = {}) => () =>
+export const mockComponent = (name: string, props: ComponentProps = {}) => () =>
   createElement(name, props, props.children);
 <% } %>

package/templates/app/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "rootDir": ".",
+  <% if (flags.addJest) { %>
+    "types": ["jest"],
+  <% } %>
+  <% if (styleFramework === 'uikit') { %>
+    // uikit-react ships a broken index.d.ts that would otherwise fail the build
+    "skipLibCheck": true,
+  <% } %>
+    "jsx": "react-jsx"
+  },
+  "include": ["src/", ".storybook/"]
+}

package/templates/app/webpack.config.nts

@@ -0,0 +1,121 @@
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import autoprefixer from 'autoprefixer';
+import HtmlPlugin from 'html-webpack-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+<% if (flags.addCnamePlugin) { %>
+import CnameWebpackPlugin from 'cname-webpack-plugin';
+<% } %>
+import StylelintPlugin from 'stylelint-webpack-plugin';
+import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import { type Configuration, type WebpackPluginInstance } from 'webpack';
+import { CleanWebpackPlugin as CleanPlugin } from 'clean-webpack-plugin';
+
+import 'webpack-dev-server';
+
+const dev = process.env.NODE_ENV === 'development';
+
+const plugins: WebpackPluginInstance[] = [
+  new CleanPlugin(),
+  new HtmlPlugin({
+    template: './src/index.html'
+  }),
+  new MiniCssExtractPlugin(),
+<% if (flags.addCnamePlugin) { %>
+  new CnameWebpackPlugin({
+    domain: '<%= deploy.domain %>'
+  })
+<% } %>
+];
+
+if (dev) {
+  plugins.push(
+    new StylelintPlugin({
+      configFile: '.stylelintrc',
+      context: 'src',
+      files: '**/*.scss',
+      failOnError: true,
+      quiet: false,
+      customSyntax: 'postcss-scss'
+    }),
+    new ESLintPlugin()
+  );
+}
+
+const config: Configuration = {
+  mode: dev ? 'development' : 'production',
+  devtool: dev ? 'eval-cheap-module-source-map' : false,
+  entry: './src/index.tsx',
+  devServer: {
+    open: true,
+    historyApiFallback: true,
+    client: {
+      overlay: {
+        warnings: false
+      }
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: ['ts-loader'],
+        exclude: [/\.stories\.tsx$/, /node_modules/]
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                ident: 'postcss',
+                plugins: [autoprefixer, postcssFlexbugsFixes]
+              },
+              sourceMap: dev
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                quietDeps: true
+              }
+            }
+          }
+        ]
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: 'html-loader',
+            options: { minimize: true }
+          }
+        ]
+      }
+    ]
+  },
+  output: {
+    path: resolve(dirname(fileURLToPath(import.meta.url)), 'dist'),
+    filename: '[name].js',
+    chunkFilename: '[name].js',
+    publicPath: '/'
+  },
+  plugins,
+  resolve: {
+    extensions: ['.js', '.ts', '.tsx', '.json'],
+    modules: ['node_modules', 'src']
+  },
+  optimization: {
+    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
+  },
+  ignoreWarnings: [/import rules are/]
+};
+
+export default config;

package/templates/component/index.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import <%= component.name %> from './<%= component.name %>';
+
+const meta = {
+  title: 'Components/<%= component.name %>',
+  component: <%= component.name %>
+} satisfies Meta<typeof <%= component.name %>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/templates/component/{index.js → index.tsx}

@@ -1,12 +1,9 @@
-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>;
-  }
+export default function <%= component.name %>() {
+  return <h1>Hello World</h1>;
 }
 
 <% if (flags.addRedux) { %>

package/generators/es.regexp.flags-ccfbed60.js

@@ -1 +0,0 @@
-"use strict";var e=require("../internals/descriptors"),r=require("../internals/object-define-property"),t=require("../internals/regexp-flags"),i=require("../internals/fails"),s=RegExp.prototype;e&&i((function(){return"sy"!==Object.getOwnPropertyDescriptor(s,"flags").get.call({dotAll:!0,sticky:!0})}))&&r.f(s,"flags",{configurable:!0,get:t});

package/templates/app/.babelrc

@@ -1,9 +0,0 @@
-{
-  "presets": ["@babel/preset-env", ["@babel/preset-react", { "runtime": "automatic" }]],
-  "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-transform-runtime",
-    "@babel/plugin-transform-regenerator"
-  ]
-}

package/templates/app/.eslintrc.js

@@ -1,185 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  "env": {
-    "browser": true,
-    "es2020": true,
-    <% if (flags.addJest) { %>
-    "jest": true,
-    <% } %>
-    "node": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:prettier/recommended",
-    "plugin:jsx-a11y/recommended",
-    "plugin:import/recommended",
-    "plugin:react-hooks/recommended",
-    <% if (flags.addJest) { %>
-    "plugin:jest/recommended"
-    <% } %>
-  ],
-  "parser": "@babel/eslint-parser",
-  "parserOptions": {
-    "requireConfigFile": false,
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12
-  },
-  "rules": {
-    "accessor-pairs": 2,
-    "block-scoped-var": 2,
-    "callback-return": 0,
-    "camelcase": 2,
-    "complexity": 0,
-    "consistent-return": 0,
-    "consistent-this": [2, "self"],
-    "constructor-super": 2,
-    "curly": 2,
-    "default-case": 2,
-    "dot-notation": 2,
-    "eol-last": 0,
-    "eqeqeq": 2,
-    "func-names": [2, "never"],
-    "func-style": [2, "declaration", { "allowArrowFunctions": true }],
-    "guard-for-in": 2,
-    "handle-callback-err": 0,
-    "id-length": 0,
-    "id-match": 0,
-    "indent": [0, 4],
-    "init-declarations": 0,
-    "linebreak-style": 0,
-    "lines-around-comment": 0,
-    "max-depth": 0,
-    "max-len": 0,
-    "max-nested-callbacks": 0,
-    "max-params": 0,
-    "max-statements": 0,
-    "new-cap": [2, { "properties": false }],
-    "newline-after-var": 1,
-    "no-alert": 2,
-    "no-array-constructor": 2,
-    "no-bitwise": 2,
-    "no-caller": 2,
-    "no-catch-shadow": 0,
-    "no-class-assign": 2,
-    "no-cond-assign": 2,
-    "no-const-assign": 2,
-    "no-constant-condition": 2,
-    "no-continue": 2,
-    "no-control-regex": 2,
-    "no-delete-var": 2,
-    "no-div-regex": 2,
-    "no-dupe-args": 2,
-    "no-dupe-keys": 2,
-    "no-duplicate-case": 2,
-    "no-else-return": 0,
-    "no-empty-character-class": 2,
-    "no-empty": 2,
-    "no-eq-null": 2,
-    "no-eval": 2,
-    "no-ex-assign": 2,
-    "no-extend-native": 2,
-    "no-extra-bind": 2,
-    "no-extra-boolean-cast": 2,
-    "no-extra-parens": 0,
-    "no-fallthrough": 2,
-    "no-floating-decimal": 2,
-    "no-func-assign": 2,
-    "no-implicit-coercion": 2,
-    "no-implied-eval": 2,
-    "no-inline-comments": 0,
-    "no-inner-declarations": 2,
-    "no-invalid-regexp": 2,
-    "no-invalid-this": 2,
-    "no-irregular-whitespace": 1,
-    "no-iterator": 2,
-    "no-label-var": 2,
-    "no-labels": 2,
-    "no-lone-blocks": 2,
-    "no-lonely-if": 2,
-    "no-loop-func": 2,
-    "no-mixed-requires": 2,
-    "no-multi-str": 2,
-    "no-native-reassign": 2,
-    "no-negated-in-lhs": 2,
-    "no-nested-ternary": 2,
-    "no-new-func": 2,
-    "no-new-object": 2,
-    "no-new-require": 2,
-    "no-new-wrappers": 2,
-    "no-new": 2,
-    "no-obj-calls": 2,
-    "no-octal-escape": 2,
-    "no-octal": 2,
-    "no-param-reassign": 0,
-    "no-path-concat": 2,
-    "no-plusplus": 0,
-    "no-process-env": 0,
-    "no-process-exit": 2,
-    "no-proto": 2,
-    "no-redeclare": 2,
-    "no-regex-spaces": 2,
-    "no-restricted-modules": 2,
-    "no-return-assign": 2,
-    "no-script-url": 2,
-    "no-self-compare": 2,
-    "no-sequences": 2,
-    "no-shadow-restricted-names": 0,
-    "no-shadow": 2,
-    "no-sparse-arrays": 2,
-    "no-sync": 2,
-    "no-ternary": 0,
-    "no-this-before-super": 2,
-    "no-throw-literal": 2,
-    "no-undef-init": 2,
-    "no-undef": 2,
-    "no-undefined": 0,
-    "no-underscore-dangle": 2,
-    "no-unexpected-multiline": 2,
-    "no-unneeded-ternary": 0,
-    "no-unreachable": 2,
-    "no-unused-expressions": 2,
-    "no-unused-vars": 2,
-    "no-use-before-define": 2,
-    "no-useless-call": 2,
-    "no-var": 0,
-    "no-void": 0,
-    "no-warning-comments": 1,
-    "no-with": 2,
-    "object-shorthand": 0,
-    "one-var": 0,
-    "operator-assignment": 2,
-    "prefer-const": 2,
-    "prefer-spread": 0,
-    "radix": 2,
-    "require-yield": 2,
-    "sort-vars": 0,
-    "space-return-throw-case": 0,
-    "spaced-comment": 1,
-    "strict": [2, "function"],
-    "use-isnan": 2,
-    "valid-jsdoc": 0,
-    "valid-typeof": 2,
-    "vars-on-top": 2,
-    "yoda": 2,
-    "no-console": 2,
-    "no-debugger": 2,
-    "prettier/prettier": 2,
-    "jsx-a11y/label-has-for": 0,
-    "react/jsx-uses-react": 0,
-    "react/react-in-jsx-scope": 0
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    },
-    "import/resolver": {
-      "webpack": {
-        "config": path.join(__dirname, 'webpack.config.babel.js')
-      }
-    }
-  }
-};

package/templates/app/.storybook/addons.js

@@ -1 +0,0 @@
-import '@storybook/addon-knobs/register';

package/templates/app/.storybook/config.js

@@ -1,14 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { configure, addDecorator } from '@storybook/react';
-
-import '../src/index.scss';
-
-function loadStories() {
-  const req = require.context('../src/components', true, /\.stories\.js$/);
-
-  req.keys().forEach(filename => req(filename));
-}
-
-addDecorator(withKnobs);
-
-configure(loadStories, module);

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

@@ -1,7 +0,0 @@
-import webpack from '../webpack.config.babel';
-
-export default async ({ config }) => ({
-  ...config,
-  module: webpack.module,
-  resolve: webpack.resolve
-});

package/templates/app/jsconfig.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "jsx": "react",
-    "baseUrl": "./src"
-  },
-  "include": ["src/"]
-}

package/templates/app/src/components/App.js

@@ -1,14 +0,0 @@
-<% if (flags.addRedux) { %>
-import { connect } from 'react-redux';
-<% } %>
-
-export default function App() {
-  return <h1>Hello World</h1>;
-}
-
-<% if (flags.addRedux) { %>
-export default connect(
-  null,
-  null
-)(App);
-<% } %>

package/templates/app/src/icons.js

@@ -1,4 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
-
-library.add(faCircle);

package/templates/app/src/index.js

@@ -1,50 +0,0 @@
-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')
-);