⬆️ Update packages

React from 16.X to 18.X
Webpack from 4.X to 5.X

package.json

@@ -5,7 +5,7 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "webpack --config webpack.config.js --env.prod --define process.env.NODE_ENV=\"'production'\"",
+    "build": "webpack --config webpack.config.js --env=prod",
     "docs": "jsdoc -c jsdoc.json",
     "test": "jest --config=jest.config.json",
     "test:watch": "jest --config=jest.config.json --watch",
@@ -15,7 +15,6 @@
     "deploy": "yarn build && npm publish",
     "typecheck": "tsc --noEmit"
   },
-  "peerDependencies": {},
   "devDependencies": {
     "@babel/compat-data": "^7.9.0",
     "@babel/plugin-transform-runtime": "^7.0.0-beta.33",
@@ -27,14 +26,13 @@
     "@testing-library/react-hooks": "^3.2.1",
     "@types/jest": "^24.0.22",
     "@types/node": "^14.6.4",
-    "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-loader": "^7.1.5",
     "babel-plugin-root-import": "^6.4.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
     "better-docs": "^2.3.0",
-    "copy-webpack-plugin": "^5.0.3",
+    "copy-webpack-plugin": "^11.0.0",
     "coveralls": "^3.0.3",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.11.2",
@@ -43,19 +41,19 @@
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.5.1",
     "jest": "^26.1.0",
     "jsdoc": "^3.6.4",
     "npm-run-all": "^4.1.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-test-renderer": "^16.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "source-map-loader": "^0.2.4",
     "ts-jest": "^24.1.0",
     "typescript": "^3.9.6",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1"
+    "webpack": "^5.80.0",
+    "webpack-cli": "^5.0.2",
+    "webpack-dev-server": "^4.13.3"
   },
   "repository": {
     "type": "git",
@@ -83,5 +81,8 @@
       "modules": true
     }
   },
-  "dependencies": {}
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "ts-loader": "^9.4.2"
+  }
 }

public/index.d.ts

@@ -1 +1 @@
-declare module "react-littera";
+declare module "@assembless/react-littera";

webpack.config.js

@@ -1,63 +1,55 @@
-const path = require('path')
-const CopyPlugin = require('copy-webpack-plugin')
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
 
-module.exports = env => {
-    const isProd = env.prod === true
-    let type = 'lib'
+module.exports = (env) => {
+  const isProd = env.prod === true;
+  let type = 'lib';
 
-    // eslint-disable-next-line no-console
-    console.log(`Compiling: ${type} in mode: ${isProd ? 'production' : 'development'}`)
+  console.log(`Compiling: ${type} in mode: ${isProd ? 'production' : 'development'}`);
 
-    const entries = {
-        lib: './src/index.ts',
-    }
+  const entries = {
+    lib: './src/index.ts',
+  };
 
-    const outputPaths = {
-        lib: path.resolve(__dirname, 'dist'),
-    }
+  const outputPaths = {
+    lib: path.resolve(__dirname, 'dist'),
+  };
 
-    const plugins = [new CopyPlugin([{ from: 'types', to: './' }])]
+  const plugins = [new CopyPlugin({ patterns: [{ from: 'types', to: './' }] })];
 
-    const config = {
-        mode: "production",
-        entry: entries[type],
-        output: {
-            path: outputPaths[type],
-            filename: 'index.js',
+  const config = {
+    mode: isProd ? 'production' : 'development',
+    entry: entries[type],
+    output: {
+      path: outputPaths[type],
+      filename: 'index.js',
+      libraryTarget: 'commonjs2',
+    },
+    devtool: 'source-map',
+    plugins,
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    },
+    module: {
+      rules: [
+        { test: /\.tsx?$/, use: 'ts-loader' },
+        { enforce: 'pre', test: /\.js$/, use: 'source-map-loader' },
+        {
+          test: /\.(js|jsx)$/,
+          use: 'babel-loader',
+          exclude: /node_modules/,
         },
-        devtool: 'source-map',
-        plugins,
-        resolve: {
-            extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.jsx'],
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
         },
-        module: {
-            rules: [
-                { test: /\.tsx?$/, use: 'awesome-typescript-loader' },
-                { test: /\.js$/, use: 'source-map-loader' },
-                {
-                    test: /\.(js|jsx)$/,
-                    use: 'babel-loader',
-                    exclude: /node_modules/,
-                },
-                {
-                    test: /\.css$/,
-                    use: ['style-loader', 'css-loader'],
-                },
-                {
-                    test: /\.svg$/,
-                    loader: 'raw-loader',
-                },
-            ],
+        {
+          test: /\.svg$/,
+          type: 'asset/source',
         },
-    }
+      ],
+    },
+  };
 
-    return {
-        ...config,
-        output: {
-            ...config.output,
-            libraryTarget: 'commonjs2',
-        },
-        // @see https://github.com/webpack/webpack/issues/603#issuecomment-215547651
-        externals: /^[^.]/,
-    }
-}
+  return config;
+};