feat: Refactoring cong with separate block functions

* feat: Adding webpack conf as separate functions

* feat: Updating template, removing webpack-config.js, removing lodash dependency

* feat: Refactoring, fixes and adding Jest and some tests (WIP)

* chore : Fixing version, config, etc

* fix: Multiple fixes (missing import, wrong variable, ...)

* chore: Adding basic test for every block

.gitignore

@@ -65,3 +65,4 @@ typings/
 
 # Serverless directories
 .serverless
+/.history

.prettierrc

@@ -3,9 +3,10 @@
     "printWidth": 120,
     "overrides": [
         {
-            "files": ["package.json", "package-lock.json", "app/model/**", "app/services/**"],
+            "files": ["package.json", "package-lock.json"],
             "options": {
-                "printWidth": 50000
+                "printWidth": 50000,
+                "tabWidth": 2
             }
         }
     ]

jest.config.js

@@ -0,0 +1,180 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+    // All imported modules in your tests should be mocked automatically
+    // automock: false,
+
+    // Stop running tests after the first failure
+    // bail: false,
+
+    // Respect "browser" field in package.json when resolving modules
+    // browser: false,
+
+    // The directory where Jest should store its cached dependency information
+    // cacheDirectory: "C:\\Users\\Bazire\\AppData\\Local\\Temp\\jest",
+
+    // Automatically clear mock calls and instances between every test
+    clearMocks: true,
+
+    // Indicates whether the coverage information should be collected while executing the test
+    // collectCoverage: false,
+
+    // An array of glob patterns indicating a set of files for which coverage information should be collected
+    // collectCoverageFrom: null,
+
+    // The directory where Jest should output its coverage files
+    coverageDirectory: "coverage",
+
+    // An array of regexp pattern strings used to skip coverage collection
+    // coveragePathIgnorePatterns: [
+    //   "\\\\node_modules\\\\"
+    // ],
+
+    // A list of reporter names that Jest uses when writing coverage reports
+    // coverageReporters: [
+    //   "json",
+    //   "text",
+    //   "lcov",
+    //   "clover"
+    // ],
+
+    // An object that configures minimum threshold enforcement for coverage results
+    // coverageThreshold: null,
+
+    // Make calling deprecated APIs throw helpful error messages
+    // errorOnDeprecated: false,
+
+    // Force coverage collection from ignored files usin a array of glob patterns
+    // forceCoverageMatch: [],
+
+    // A path to a module which exports an async function that is triggered once before all test suites
+    // globalSetup: null,
+
+    // A path to a module which exports an async function that is triggered once after all test suites
+    // globalTeardown: null,
+
+    // A set of global variables that need to be available in all test environments
+    // globals: {},
+
+    // An array of directory names to be searched recursively up from the requiring module's location
+    // moduleDirectories: [
+    //   "node_modules"
+    // ],
+
+    // An array of file extensions your modules use
+    // moduleFileExtensions: [
+    //   "js",
+    //   "json",
+    //   "jsx",
+    //   "node"
+    // ],
+
+    // A map from regular expressions to module names that allow to stub out resources with a single module
+    // moduleNameMapper: {},
+
+    // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+    // modulePathIgnorePatterns: [],
+
+    // Activates notifications for test results
+    // notify: false,
+
+    // An enum that specifies notification mode. Requires { notify: true }
+    // notifyMode: "always",
+
+    // A preset that is used as a base for Jest's configuration
+    // preset: null,
+
+    // Run tests from one or more projects
+    // projects: null,
+
+    // Use this configuration option to add custom reporters to Jest
+    // reporters: undefined,
+
+    // Automatically reset mock state between every test
+    // resetMocks: false,
+
+    // Reset the module registry before running each individual test
+    // resetModules: false,
+
+    // A path to a custom resolver
+    // resolver: null,
+
+    // Automatically restore mock state between every test
+    // restoreMocks: false,
+
+    // The root directory that Jest should scan for tests and modules within
+    // rootDir: null,
+
+    // A list of paths to directories that Jest should use to search for files in
+    // roots: [
+    //   "<rootDir>"
+    // ],
+
+    // Allows you to use a custom runner instead of Jest's default test runner
+    // runner: "jest-runner",
+
+    // The paths to modules that run some code to configure or set up the testing environment before each test
+    // setupFiles: [],
+
+    // The path to a module that runs some code to configure or set up the testing framework before each test
+    // setupTestFrameworkScriptFile: null,
+
+    // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+    // snapshotSerializers: [],
+
+    // The test environment that will be used for testing
+    testEnvironment: "node",
+
+    // Options that will be passed to the testEnvironment
+    // testEnvironmentOptions: {},
+
+    // Adds a location field to test results
+    // testLocationInResults: false,
+
+    // The glob patterns Jest uses to detect test files
+    // testMatch: [
+    //   "**/__tests__/**/*.js?(x)",
+    //   "**/?(*.)+(spec|test).js?(x)"
+    // ],
+    testMatch: ["**/test/**/*.js?(x)"],
+
+    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+    testPathIgnorePatterns: ["\\\\node_modules\\\\", ".history"],
+
+    // The regexp pattern Jest uses to detect test files
+    // testRegex: "",
+
+    // This option allows the use of a custom results processor
+    // testResultsProcessor: null,
+
+    // This option allows use of a custom test runner
+    // testRunner: "jasmine2",
+
+    // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
+    // testURL: "about:blank",
+
+    // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
+    // timers: "real",
+
+    // A map from regular expressions to paths to transformers
+    transform: {}
+    // transform: null,
+
+    // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+    // transformIgnorePatterns: [
+    //   "\\\\node_modules\\\\"
+    // ],
+
+    // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+    // unmockedModulePathPatterns: undefined,
+
+    // Indicates whether each individual test should be reported during the run
+    // verbose: null,
+
+    // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+    // watchPathIgnorePatterns: [],
+
+    // Whether to use watchman for file crawling
+    // watchman: true,
+};

lib/blocks/assets.js

@@ -0,0 +1,50 @@
+const { ensureConfig, safeMerge } = require("../utils");
+
+module.exports = blockConfig => (processEnv, argv) => argConfig => {
+    const defaultConf = {
+        handleDefault: true,
+        defaultsExclude: [/\.ejs$/, /\.(js|jsx)$/, /\.css$/, /\.json$/],
+        miscName: "misc/[name]_[sha512:hash:base64:7].[ext]",
+        assets: [
+            {
+                test: /\.(ttf|eot|woff|woff2|svg)(\?.*)?$/,
+                limit: 10000,
+                name: "fonts/[name]_[sha512:hash:base64:7].[ext]"
+            },
+            {
+                test: /\.(png|jpg|jpeg|gif)(\?.*)?$/,
+                limit: 10000,
+                name: "img/[name]_[sha512:hash:base64:7].[ext]"
+            }
+        ]
+    };
+    const mergedConf = safeMerge(defaultConf, blockConfig);
+    const config = ensureConfig(argConfig);
+
+    const exclude = [];
+
+    mergedConf.assets.forEach(elt => {
+        config.module.rules.push({
+            test: elt.test,
+            loader: "url-loader",
+            options: {
+                limit: elt.limit,
+                name: elt.name
+            }
+        });
+        exclude.push(elt.test);
+    });
+
+    if (mergedConf.handleDefault) {
+        exclude.push(...mergedConf.defaultsExclude);
+        config.module.rules.push({
+            loader: "file-loader",
+            exclude,
+            options: {
+                name: mergedConf.miscName
+            }
+        });
+    }
+
+    return config;
+};

lib/blocks/babel.js

@@ -0,0 +1,51 @@
+const { ensureConfig, safeMerge, deduplicate } = require("../utils");
+
+module.exports = blockConfig => (processEnv, argv) => argConfig => {
+    const isDev = processEnv.NODE_ENV === "development";
+    const isHotReload = processEnv.HOT_RELOAD === "true";
+
+    const defaultConf = {
+        useCache: isDev,
+        mode: processEnv.NODE_ENV,
+        hot: isHotReload,
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        extensions: [".js", ".jsx"]
+    };
+
+    const mergedConf = safeMerge(defaultConf, blockConfig);
+    const config = ensureConfig(argConfig);
+
+    config.module.rules.push({
+        test: mergedConf.test,
+        exclude: mergedConf.exclude,
+        use: [
+            {
+                loader: "thread-loader"
+            },
+            mergedConf.useCache && {
+                loader: "cache-loader"
+            },
+            {
+                loader: "babel-loader",
+                options: {
+                    cacheDirectory: false,
+                    presets: [
+                        [
+                            "@thc/babel-preset-react",
+                            {
+                                mode: mergedConf.mode,
+                                hot: mergedConf.hot
+                            }
+                        ]
+                    ],
+                    babelrc: false
+                }
+            }
+        ].filter(Boolean)
+    });
+
+    config.resolve.extensions = deduplicate(config.resolve.extensions, mergedConf.extensions);
+
+    return config;
+};

lib/blocks/css.js

@@ -0,0 +1,50 @@
+const { ensureConfig, safeMerge } = require("../utils");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+
+module.exports = blockConfig => (processEnv, argv) => argConfig => {
+    const defaultConf = {
+        extractCss: processEnv.HOT_RELOAD !== "true",
+        filename: `css/[name]_${processEnv.npm_package_version}.bundle.css`,
+        chunkFilename: "css/[name]_[hash].css"
+    };
+
+    const mergedConf = { ...defaultConf, ...(blockConfig || {}) };
+    const config = ensureConfig(argConfig);
+
+    config.module.rules.push({
+        test: /\.css/,
+        use: [
+            {
+                loader: mergedConf.extractCss ? MiniCssExtractPlugin.loader : "style-loader"
+            },
+            {
+                loader: "css-loader",
+                options: {
+                    minimize: false,
+                    importLoaders: 1
+                }
+            },
+            {
+                loader: "postcss-loader",
+                options: {
+                    // Other options should go into postcss.config.js
+                    config: {
+                        path: path.join(process.cwd(), "postcss.config.js")
+                    }
+                }
+            }
+        ]
+    });
+
+    if (mergedConf.extractCss) {
+        config.plugins.push(
+            new MiniCssExtractPlugin({
+                filename: mergedConf.filename,
+                chunkFilename: mergedConf.chunkFilename
+            })
+        );
+    }
+
+    return config;
+};

lib/blocks/entry.js

@@ -0,0 +1,36 @@
+const { ensureConfig, safeMerge } = require("../utils");
+
+const enhanceForHotReload = entries => {
+    return [
+        "@thc/webpack-react/lib/override/react-hot-dev-client",
+        "react-error-overlay",
+        "webpack/hot/only-dev-server"
+    ].concat(entries);
+};
+
+module.exports = blockConfig => (processEnv, argv) => argConfig => {
+    const isHotReload = processEnv.HOT_RELOAD === "true";
+
+    const defaultConf = {
+        polyfill: ["@babel/polyfill", /*Needed for Opera Mini*/ "whatwg-fetch"],
+        hot: isHotReload,
+        entries: {
+            main: "./src/app.js"
+        }
+    };
+
+    const mergedConf = safeMerge(defaultConf, blockConfig);
+    const config = ensureConfig(argConfig);
+
+    if (mergedConf.polyfill) {
+        config.entry.polyfill = mergedConf.polyfill;
+    }
+
+    const enhance = mergedConf.hot ? enhanceForHotReload : elt => elt;
+
+    for (let key in mergedConf.entries) {
+        config.entry[key] = enhance(mergedConf.entries[key]);
+    }
+
+    return config;
+};