generator-reackt 0.3.3 → 0.6.0

package/templates/app/.eslintrc.js

@@ -1,185 +1,46 @@
-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')
-      }
-    }
-  }
-};
+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": {
+    "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/.stylelintrc

@@ -1,20 +1,25 @@
 {
-  "extends": "stylelint-config-recommended",
   "defaultSeverity": "warning",
-  "plugins": ["stylelint-a11y"],
+  "extends": "stylelint-config-recommended",
+  "customSyntax": "postcss-scss",
   "rules": {
+    "at-rule-allowed-list": null,
     "at-rule-disallowed-list": null,
     "at-rule-empty-line-before": [
       "always",
       {
-        "except": [ "blockless-after-blockless", "first-nested" ],
-        "ignore": [ "after-comment" ],
-        "ignoreAtRules": [ "else" ]
+        "except": [
+          "blockless-after-blockless",
+          "first-nested"
+        ],
+        "ignore": [
+          "after-comment"
+        ],
+        "ignoreAtRules": [
+          "else"
+        ]
       }
     ],
-    "at-rule-name-case": "lower",
-    "at-rule-name-newline-after": "always-multi-line",
-    "at-rule-name-space-after": "always-single-line",
     "at-rule-no-unknown": [
       true,
       {
@@ -34,190 +39,134 @@
       }
     ],
     "at-rule-no-vendor-prefix": true,
-    "at-rule-semicolon-newline-after": "always",
-    "at-rule-semicolon-space-before": "never",
-    "at-rule-allowed-list": null,
-    "block-closing-brace-empty-line-before": "never",
-    "block-closing-brace-newline-after": [
-      "always",
-      {
-        "ignoreAtRules": [ "else", "if" ]
-      }
-    ],
-    "block-closing-brace-newline-before": "always-multi-line",
-    "block-closing-brace-space-after": "always-single-line",
-    "block-closing-brace-space-before": "always-single-line",
     "block-no-empty": true,
-    "block-opening-brace-newline-after": "always",
-    "block-opening-brace-newline-before": "never-single-line",
-    "block-opening-brace-space-after": "always-single-line",
-    "block-opening-brace-space-before": "always",
-    "color-hex-case": "lower",
     "color-hex-length": "short",
     "color-named": [
       "never",
-      { "severity": "error" }
+      {
+        "severity": "error"
+      }
     ],
     "color-no-hex": null,
     "color-no-invalid-hex": true,
     "comment-empty-line-before": [
       "always",
       {
-        "ignore": [ "after-comment", "stylelint-commands" ]
+        "ignore": [
+          "after-comment",
+          "stylelint-commands"
+        ]
       }
     ],
     "comment-no-empty": true,
     "comment-whitespace-inside": "always",
-    "comment-word-disallowed-list": [ "/^TODO:/" ],
+    "comment-word-disallowed-list": [
+      "/^TODO:/"
+    ],
     "custom-media-pattern": null,
     "custom-property-empty-line-before": null,
     "custom-property-pattern": null,
-    "declaration-bang-space-after": "never",
-    "declaration-bang-space-before": "always",
     "declaration-block-no-duplicate-properties": true,
     "declaration-block-no-redundant-longhand-properties": true,
     "declaration-block-no-shorthand-property-overrides": true,
-    "declaration-block-semicolon-newline-after": "always",
-    "declaration-block-semicolon-newline-before": null,
-    "declaration-block-semicolon-space-after": "always-single-line",
-    "declaration-block-semicolon-space-before": "never",
     "declaration-block-single-line-max-declarations": 1,
-    "declaration-block-trailing-semicolon": "always",
-    "declaration-colon-newline-after": null,
-    "declaration-colon-space-after": "always",
-    "declaration-colon-space-before": "never",
-    "declaration-empty-line-before": "never",
     "declaration-no-important": true,
-    "declaration-property-unit-disallowed-list": {},
     "declaration-property-unit-allowed-list": {
-      "border": [ "px" ],
+      "border": [
+        "px"
+      ],
       "line-height": [],
-      "outline-offset": [ "px" ]
+      "outline-offset": [
+        "px"
+      ]
     },
-    "declaration-property-value-disallowed-list": {},
+    "declaration-property-unit-disallowed-list": {},
     "declaration-property-value-allowed-list": {},
+    "declaration-property-value-disallowed-list": {},
     "font-family-name-quotes": "always-unless-keyword",
     "font-family-no-duplicate-names": true,
     "font-family-no-missing-generic-family-keyword": true,
     "font-weight-notation": "numeric",
-    "function-disallowed-list": null,
+    "function-allowed-list": null,
     "function-calc-no-unspaced-operator": true,
-    "function-comma-newline-after": null,
-    "function-comma-newline-before": null,
-    "function-comma-space-after": "always",
-    "function-comma-space-before": null,
+    "function-disallowed-list": null,
     "function-linear-gradient-no-nonstandard-direction": true,
-    "function-max-empty-lines": 0,
-    "function-name-case": "lower",
-    "function-parentheses-newline-inside": null,
-    "function-parentheses-space-inside": "never",
     "function-url-no-scheme-relative": true,
     "function-url-quotes": "always",
-    "function-url-scheme-disallowed-list": null,
     "function-url-scheme-allowed-list": null,
-    "function-allowed-list": null,
-    "function-whitespace-after": "always",
-    "indentation": 2,
+    "function-url-scheme-disallowed-list": null,
     "keyframe-declaration-no-important": true,
     "length-zero-no-unit": true,
-    "max-empty-lines": 2,
-    "max-line-length": 100,
     "max-nesting-depth": 4,
-    "media-feature-colon-space-after": "always",
-    "media-feature-colon-space-before": "never",
+    "media-feature-name-allowed-list": null,
     "media-feature-name-disallowed-list": null,
-    "media-feature-name-case": "lower",
     "media-feature-name-no-unknown": true,
     "media-feature-name-no-vendor-prefix": true,
-    "media-feature-name-allowed-list": null,
-    "media-feature-parentheses-space-inside": "never",
-    "media-feature-range-operator-space-after": "always",
-    "media-feature-range-operator-space-before": "always",
-    "media-query-list-comma-newline-after": null,
-    "media-query-list-comma-newline-before": null,
-    "media-query-list-comma-space-after": null,
-    "media-query-list-comma-space-before": null,
     "no-descending-specificity": true,
     "no-duplicate-at-import-rules": true,
     "no-duplicate-selectors": true,
     "no-empty-source": true,
-    "no-eol-whitespace": true,
-    "no-extra-semicolons": true,
     "no-invalid-double-slash-comments": true,
-    "no-missing-end-of-source-newline": true,
     "no-unknown-animations": true,
-    "number-leading-zero": "always",
     "number-max-precision": [
       2,
       {
-        "ignoreUnits": [ "em", "rem" ]
+        "ignoreUnits": [
+          "em",
+          "rem"
+        ]
       }
     ],
-    "number-no-trailing-zeros": true,
+    "property-allowed-list": null,
     "property-disallowed-list": null,
-    "property-case": "lower",
     "property-no-unknown": true,
     "property-no-vendor-prefix": true,
-    "property-allowed-list": null,
     "rule-empty-line-before": [
       "always",
       {
-        "except": [ "first-nested" ],
-        "ignore": [ "after-comment" ]
+        "except": [
+          "first-nested"
+        ],
+        "ignore": [
+          "after-comment"
+        ]
       }
     ],
-    "selector-attribute-brackets-space-inside": "never",
-    "selector-attribute-operator-disallowed-list": null,
-    "selector-attribute-operator-space-after": "never",
-    "selector-attribute-operator-space-before": "never",
     "selector-attribute-operator-allowed-list": null,
+    "selector-attribute-operator-disallowed-list": null,
     "selector-attribute-quotes": "always",
     "selector-class-pattern": "[a-z]+",
-    "selector-combinator-disallowed-list": null,
-    "selector-combinator-space-after": "always",
-    "selector-combinator-space-before": "always",
     "selector-combinator-allowed-list": null,
-    "selector-descendant-combinator-no-non-space": true,
+    "selector-combinator-disallowed-list": null,
     "selector-id-pattern": null,
-    "selector-list-comma-newline-after": "always",
-    "selector-list-comma-newline-before": "never-multi-line",
-    "selector-list-comma-space-after": "always-single-line",
-    "selector-list-comma-space-before": null,
     "selector-max-attribute": 1,
     "selector-max-class": 3,
     "selector-max-combinators": 2,
     "selector-max-compound-selectors": 3,
-    "selector-max-empty-lines": 0,
     "selector-max-id": 1,
     "selector-max-pseudo-class": 2,
     "selector-max-specificity": [
       "0,5,1",
-      { "severity": "error" }
+      {
+        "severity": "error"
+      }
     ],
     "selector-max-type": 2,
     "selector-max-universal": 1,
     "selector-nested-pattern": null,
     "selector-no-qualifying-type": true,
     "selector-no-vendor-prefix": true,
+    "selector-pseudo-class-allowed-list": null,
     "selector-pseudo-class-disallowed-list": null,
-    "selector-pseudo-class-case": "lower",
     "selector-pseudo-class-no-unknown": true,
-    "selector-pseudo-class-parentheses-space-inside": "never",
-    "selector-pseudo-class-allowed-list": null,
-    "selector-pseudo-element-disallowed-list": null,
-    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-allowed-list": null,
     "selector-pseudo-element-colon-notation": "double",
+    "selector-pseudo-element-disallowed-list": null,
     "selector-pseudo-element-no-unknown": true,
-    "selector-pseudo-element-allowed-list": null,
-    "selector-type-case": "lower",
     "selector-type-no-unknown": true,
     "shorthand-property-no-redundant-values": true,
     "string-no-newline": true,
-    "string-quotes": "double",
     "time-min-milliseconds": 100,
-    "unit-disallowed-list": null,
-    "unit-case": "lower",
-    "unit-no-unknown": true,
     "unit-allowed-list": [
       "%",
       "deg",
@@ -231,47 +180,9 @@
       "vmin",
       "vw"
     ],
+    "unit-disallowed-list": null,
+    "unit-no-unknown": true,
     "value-keyword-case": "lower",
-    "value-list-comma-newline-after": "always-multi-line",
-    "value-list-comma-newline-before": null,
-    "value-list-comma-space-after": null,
-    "value-list-comma-space-before": "never",
-    "value-list-max-empty-lines": 0,
-    "value-no-vendor-prefix": true,
-    "a11y/media-prefers-reduced-motion": true,
-    "a11y/no-outline-none": true,
-    "a11y/selector-pseudo-class-focus": true,
-    "a11y/content-property-no-static-value": [
-      true,
-      { "severity": "warning" }
-    ],
-    "a11y/font-size-is-readable": [
-      true,
-      { "severity": "warning" }
-    ],
-    "a11y/line-height-is-vertical-rhythmed": [
-      true,
-      { "severity": "warning" }
-    ],
-    "a11y/no-display-none": [
-      true,
-      { "severity": "warning" }
-    ],
-    "a11y/no-spread-text": [
-      true,
-      { "severity": "warning" }
-    ],
-    "a11y/no-obsolete-attribute": [
-      true,
-      { "severity": "warning" }
-    ],
-    "a11y/no-obsolete-element": [
-      true,
-      { "severity": "warning" }
-    ],
-    "a11y/no-text-align-justify": [
-      true,
-      { "severity": "warning" }
-    ]
+    "value-no-vendor-prefix": true
   }
 }

package/templates/app/jsconfig.json

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

package/templates/app/src/components/{App/App.js → App.js}

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

package/templates/app/src/index.js

@@ -1,7 +1,6 @@
 import 'core-js/stable';
-import 'regenerator-runtime/runtime';
 
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 <% if (flags.addRedux) { %>
 import { Provider } from 'react-redux';
@@ -9,11 +8,8 @@ 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/App';
+import App from './components/App';
 <% if (flags.addRedux) { %>
 import rootSaga from './sagas';
 import rootReducer from './reducers';
@@ -36,7 +32,9 @@ if (module.hot) {
 sagaMiddleware.run(rootSaga);
 <% } %>
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+
+root.render(
   <Router>
 <% if (flags.addRedux) { %>
     <Provider store={store}>
@@ -45,9 +43,5 @@ ReactDOM.render(
 <% } else { %>
     <App />
 <% } %>
-  </Router>,
-  document.getElementById('root')
-);
-
-export default App;
-
+  </Router>
+)

package/templates/app/src/index.scss

@@ -1,7 +1,6 @@
 <% if (styleFramework === 'bulma') { %>
 @charset "utf-8";
 <% } %>
-@import "~normalize-scss/sass/normalize/import-now";
 <% if (styleFramework === 'bootstrap') { %>
 @import "~bootstrap/scss/bootstrap";
 <% } else if (styleFramework === 'uikit') { %>

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

@@ -1,4 +1,3 @@
-import webpack from 'webpack';
 import { resolve } from 'path';
 import HtmlPlugin from 'html-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
@@ -18,7 +17,7 @@ const plugins = [
     files: '**/*.scss',
     failOnError: true,
     quiet: false,
-    syntax: 'scss'
+    customSyntax: 'postcss-scss'
   }),
   new HtmlPlugin({
     template: './src/index.html'
@@ -27,10 +26,6 @@ const plugins = [
   new MiniCssExtractPlugin()
 ];
 
-if (dev) {
-  plugins.push(new webpack.HotModuleReplacementPlugin());
-}
-
 export default {
   mode: dev ? 'development' : 'production',
   devtool: dev ? 'eval-cheap-module-source-map' : 'cheap-module-source-map',
@@ -38,7 +33,6 @@ export default {
   devServer: {
     compress: dev,
     open: true,
-    overlay: true,
     historyApiFallback: true,
     hot: dev,
     port: 9000
@@ -100,7 +94,7 @@ export default {
     minimizer: [
       new TerserPlugin({
         terserOptions: {
-          ecma: 9
+          ecma: 12
         }
       }),
       new CssMinimizerPlugin()

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);