feat(microbundle): target node environment

- update minor and patch versions
- add microbundle "--target node" flag + formats
- add missing babel-loader dependency
- remove development performance limits
- tweak compression webpack plugin paths
- remove unreliable lodash-webpack-plugin from core configuration
- replace ts-jest by babel-jest
- adjust tests (full coverage)
- add typecheck script
- upgrade to husky v6 (+ add hooks)
- refactor local configs

.eslintrc.js

@@ -1,8 +1,8 @@
 module.exports = {
   root: true,
   env: {
-    browser: true,
-    es6: true,
+    browser: false,
+    es2021: true,
     node: true,
   },
   extends: [
@@ -14,36 +14,23 @@ module.exports = {
     'plugin:import/warnings',
     'plugin:import/typescript',
     'prettier',
-    // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors.
-    // Make sure this is always the last configuration in the extends array.
-    'plugin:prettier/recommended',
   ],
-  ignorePatterns: ['dist/**/*', 'node_modules/**/*'],
+  ignorePatterns: ['dist/**/*', 'node_modules/**/*', 'reports/**/*'],
   parser: '@babel/eslint-parser',
   parserOptions: {
-    ecmaVersion: 2018,
-    ecmaFeatures: {
-      jsx: true,
-    },
-    requireConfigFile: false,
     sourceType: 'module',
   },
-  plugins: ['prettier', '@typescript-eslint'],
+  plugins: ['@typescript-eslint', 'import', 'prettier'],
   settings: {
     // 'import/extensions': ['.ts', '.tsx', '.d.s', '.js', '.jsx', '.json'],
     // 'import/parsers': {
     //   '@typescript-eslint/parser': ['.ts', '.tsx'],
     // },
     // 'import/resolvers': {
-    //   // typescript: {}
     //   typescript: {
     //     // always try to resolve types under `<roo/>@types` directory even it doesn't contain any source code, like `@types/unist`
-    //     alwaysTryTypes: true,
-    //     directory: [
-    //       './tsconfig.json',
-    //       './examples/*/tsconfig.json',
-    //       './packages/*/tsconfig.json',
-    //     ],
+    //     // alwaysTryTypes: true,
+    //     project: 'tsconfig.json'
     //   }
     // }
   },

.github/workflows/release.yml

@@ -23,10 +23,10 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
       # Install dependencies
       - name: Install
-        run: yarn install --frozen-lockfile
+        run: yarn install --frozen-lockfile --silent
       # Run all tests
       - name: Test
-        run: yarn run test
+        run: yarn run test --ci --coverage
 
   # Conventional release
   release:
@@ -55,7 +55,7 @@ jobs:
           git config user.email [email protected]
       # Install dependencies
       - name: Install
-        run: yarn install --frozen-lockfile
+        run: yarn install --frozen-lockfile --silent
       # Build all packages
       - name: Build
         run: yarn run build

.github/workflows/simulate-release.yml

@@ -23,7 +23,7 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
       # Install dependencies
       - name: Install
-        run: yarn install --frozen-lockfile
+        run: yarn install --frozen-lockfile --silent
       # Authenticate yarn towards registry.npmjs.org
       - name: Authenticate with Registry
         run: |

.github/workflows/test.yml

@@ -19,7 +19,7 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
       # Install dependencies
       - name: Install
-        run: yarn install --frozen-lockfile
+        run: yarn install --frozen-lockfile --silent
       # Run eslint
       - name: Lint
         run: yarn run lint
@@ -46,7 +46,7 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
       # Install dependencies
       - name: Install
-        run: yarn install --frozen-lockfile
+        run: yarn install --frozen-lockfile --silent
       # Run all tests
       - name: Test
-        run: yarn run test
+        run: yarn run test --ci --coverage

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

.husky/pre-push

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn run lint
+yarn run typecheck
+yarn run test

babel.config.json

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript"
+  ]
+}

jest.config.js

@@ -1,22 +1,24 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { pathsToModuleNameMapper } = require('ts-jest/utils');
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { compilerOptions } = require('./tsconfig.json');
 
 module.exports = {
-  collectCoverage: true,
   collectCoverageFrom: ['<rootDir>/src/**/*.(js|jsx|ts|tsx)', '!**/*.test.*', '!**/*.d.ts'],
   coverageDirectory: '<rootDir>/reports/coverage',
   coveragePathIgnorePatterns: ['node_modules', '<rootDir>/src/cli.ts'],
   coverageReporters: ['lcov', 'text'],
   displayName: 'unit',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
+  moduleFileExtensions: ['ts', 'js'],
+  moduleNameMapper: {
+    "src": "<rootDir>/src",
+    "src/(.*)": "<rootDir>/src/$1"
+  },
   rootDir: './',
-  testMatch: ['<rootDir>/tests/**/*.test.(js|jsx|ts|tsx)'],
+  /**
+   * We are not testing any UI at all
+   * @see https://jestjs.io/docs/en/configuration.html#testenvironment-string
+   */
+  testEnvironment: 'node',
+  testMatch: ['<rootDir>/tests/**/*.test.(js|ts)'],
   transform: {
-    '^.+\\.jsx?$': 'babel-jest',
-    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.[jt]sx?$': 'babel-jest'
   },
 };

package.json

@@ -1,9 +1,10 @@
 {
   "name": "@humblebee/config-webpack4",
   "description": "Centralized configuration for webpack v4",
-  "version": "0.1.1",
+  "version": "0.0.0-development",
   "source": "src/index.ts",
   "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
@@ -29,74 +30,96 @@
     "access": "public"
   },
   "scripts": {
-    "build": "microbundle --no-compress --tsconfig tsconfig.build.json",
-    "dev": "microbundle --no-compress --tsconfig tsconfig.build.json --watch",
+    "build": "microbundle --target node --tsconfig tsconfig.build.json --format cjs,esm",
+    "commit": "cz",
+    "dev": "microbundle --target node --tsconfig tsconfig.build.json --format cjs,esm --watch",
     "lint": "eslint \"{src,tests}/**/*.{ts,tsx,js,jsx}\"",
     "lint:fix": "eslint \"{src,tests}/**/*.{ts,tsx,js,jsx}\" --fix",
     "prebuild": "rimraf ./dist/*",
+    "prepare": "husky install",
     "semantic-release": "semantic-release",
-    "test": "jest --coverage"
+    "test": "jest",
+    "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
     "webpack": "^4.0",
     "webpack-dev-server": "^3.0"
   },
   "dependencies": {
+    "babel-loader": "^8.2.0",
     "clean-webpack-plugin": "^3.0.0",
     "compression-webpack-plugin": "^5.0.0",
     "copy-webpack-plugin": "^6.1.0",
     "dotenv-webpack": "^2.0.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.0",
     "imagemin-webpack-plugin": "^2.4.2",
-    "lodash-webpack-plugin": "^0.11.6",
     "terser-webpack-plugin": "^4.1.0",
     "webpack-merge": "^5.2.0",
     "webpack-subresource-integrity": "^1.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.15",
-    "@babel/eslint-parser": "^7.13.14",
-    "@commitlint/cli": "^12.1.1",
-    "@commitlint/config-conventional": "^12.1.1",
-    "@semantic-release/changelog": "^5.0.1",
-    "@semantic-release/commit-analyzer": "^8.0.1",
-    "@semantic-release/github": "^7.2.1",
-    "@semantic-release/npm": "^7.1.1",
-    "@semantic-release/release-notes-generator": "^9.0.2",
+    "@babel/core": "^7.14.0",
+    "@babel/eslint-parser": "^7.14.0",
+    "@babel/preset-env": "^7.14.0",
+    "@babel/preset-typescript": "^7.13.0",
+    "@commitlint/cli": "^12.1.0",
+    "@commitlint/config-conventional": "^12.1.0",
+    "@semantic-release/changelog": "^5.0.0",
+    "@semantic-release/commit-analyzer": "^8.0.0",
+    "@semantic-release/github": "^7.2.0",
+    "@semantic-release/npm": "^7.1.0",
+    "@semantic-release/release-notes-generator": "^9.0.0",
     "@types/compression-webpack-plugin": "^4.0.0",
     "@types/copy-webpack-plugin": "^6.4.0",
     "@types/dotenv-webpack": "^1.8.0",
-    "@types/jest": "^26.0.22",
-    "@types/lodash-webpack-plugin": "^0.11.4",
+    "@types/jest": "^26.0.23",
     "@types/terser-webpack-plugin": "^4.0.0",
     "@types/webpack": "^4.41.0",
     "@types/webpack-dev-server": "^3.11.0",
     "@types/webpack-subresource-integrity": "^1.2.0",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
-    "babel-jest": "^26.6.3",
-    "commitizen": "^4.2.3",
+    "babel-jest": "^27.0.0",
+    "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.3.5",
+    "eslint": "^7.27.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.0",
+    "eslint-plugin-jest": "^24.3.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "husky": "^4.2.3",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.4",
+    "husky": "^6.0.0",
+    "jest": "^27.0.0",
+    "lint-staged": "^11.0.0",
     "microbundle": "^0.13.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.0",
     "prettier-eslint": "^12.0.0",
-    "rimraf": "^3.0.2",
-    "semantic-release": "^17.4.2",
-    "ts-jest": "^26.5.5",
-    "typescript": "^4.2.4",
+    "rimraf": "^3.0.0",
+    "semantic-release": "^17.4.0",
+    "typescript": "^4.3",
     "webpack": "^4.46.0",
     "webpack-dev-server": "^3.11.0"
   },
   "resolutions": {
-    "@types/webpack": "^4.0"
+    "@types/svgo": "^1.3.0",
+    "@types/webpack": "^4.41"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{md,mdx,yml,yaml}": [
+      "prettier --write"
+    ],
+    "{src,tests}/**/*.{tx,tsx,js,jsx,mjs,md,mdx,css,yml,yaml}": [
+      "prettier --write"
+    ]
   }
 }

src/configurations/core.ts

@@ -1,11 +1,10 @@
 import path from 'path';
-import { Configuration } from 'webpack';
+import type { Configuration } from 'webpack';
 
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import { CleanWebpackPlugin, Options as CleanWebpackPluginOptions } from 'clean-webpack-plugin';
 import DotenvPlugin from 'dotenv-webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import LodashWebpackPlugin from 'lodash-webpack-plugin';
 
 export interface CoreConfigurationOptions {
   /** path of the build folder (default to "./dist") */
@@ -123,11 +122,6 @@ export const getCoreConfiguration = ({
         },
       ],
     }),
-    /**
-     * Lodash optimisation
-     * @see https://youmightnotneed.com/lodash/
-     */
-    new LodashWebpackPlugin(),
     /**
      * Build CSR template from file and inject scripts
      * @see https://webpack.js.org/plugins/html-webpack-plugin/

src/configurations/development.ts

@@ -77,8 +77,6 @@ export const getDevelopmentConfiguration = ({
      * You can still refer to it as a vague indicator
      */
     performance: {
-      maxEntrypointSize: 1536000,
-      maxAssetSize: 1536000,
       hints: 'warning',
     },
   }) as DevelopmentConfiguration;

src/configurations/get-webpack-configuration.ts

@@ -8,7 +8,7 @@ export type ConfigurationMode = 'development' | 'production';
 
 const getConfiguration = (
   mode: ConfigurationMode,
-  options: DevelopmentConfigurationOptions | ProductionConfigurationOptions,
+  options: DevelopmentConfigurationOptions | ProductionConfigurationOptions = {},
   extension?: Configuration,
 ): Configuration => {
   let configuration: Configuration;

src/configurations/index.ts

@@ -2,11 +2,14 @@ import { DevelopmentConfiguration } from './development';
 import { ProductionConfiguration } from './production';
 import getWebpackConfiguration from './get-webpack-configuration';
 
-export {
+export type {
   // Development specific configuration and types
   DevelopmentConfiguration,
   // Production specific configuration and types
   ProductionConfiguration,
+};
+
+export {
   // Helpers
   getWebpackConfiguration,
 };