chore(webpack): moved config to @code-gear/config library

apps/server/.eslintrc.json

@@ -1,18 +1,4 @@
 {
   "extends": ["../../.eslintrc.js"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
+  "ignorePatterns": ["!**/*"]
 }

apps/server/tsconfig.json

@@ -11,6 +11,7 @@
     }
   ],
   "compilerOptions": {
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "resolveJsonModule": true
   }
 }

apps/server/webpack.config.ts

@@ -1,32 +1,6 @@
-const { composePlugins, withNx } = require('@nx/webpack')
-const path = require('path')
-const tsconfig = require('cg-config/src/tsconfig/paths/second-layer.json')
+const { buildWebpackConfig } = require('cg-config/src/webpack')
 
-module.exports = composePlugins(
-  withNx({
-    skipTypeChecking: true
-  }),
-  (config) => {
-    config.resolve.alias = {
-      '@': path.resolve(__dirname, 'src'),
-      ...Object.fromEntries(
-        Object.entries(tsconfig.compilerOptions.paths).map(
-          ([name, tsconfigPath]) => {
-            return [name, path.resolve(__dirname, tsconfigPath[0])]
-          }
-        )
-      )
-    }
-
-    // This solution actually don't work.
-
-    // config.resolve.plugins.push(
-    //   new TsconfigPathsPlugin({
-    //     configFile: 'libs/config/src/tsconfig/paths/second-layer.json',
-    //     baseUrl: '.'
-    //   })
-    // )
-
-    return config
-  }
-)
+module.exports = buildWebpackConfig({
+  rootDir: __dirname,
+  layer: 'second'
+})

libs/config/src/webpack/build-webpack-config.ts

@@ -1,3 +1,36 @@
+import { resolveTsconfigPaths } from './resolvers'
 import { composePlugins, withNx } from '@nx/webpack'
+import { Configuration } from 'webpack'
+import { WebpackConfigOptions, BuildWebpackConfigPayload } from './types'
 
-export const buildWebpackConfig = ()
+/**
+ * Combines your webpack config with nx modules and
+ * custom tsconfig paths
+ * @param rootDir {string} - root directory of current library
+ * @param layer {BuildWebpackConfigPayload.layer} - nesting level of your library to include the
+ * correct tsconfig paths depending on this
+ */
+
+export const buildWebpackConfig = ({
+  rootDir,
+  layer
+}: BuildWebpackConfigPayload) => {
+  return composePlugins(
+    withNx({
+      skipTypeChecking: true
+    }),
+    (config: Configuration) => {
+      const options: WebpackConfigOptions = {
+        layer,
+        config,
+        rootDir
+      }
+
+      config.resolve!.alias = {
+        ...resolveTsconfigPaths(options)
+      }
+
+      return config
+    }
+  )
+}

libs/config/src/webpack/index.ts

@@ -0,0 +1 @@
+export { buildWebpackConfig } from './build-webpack-config'

libs/config/src/webpack/resolvers/index.ts

@@ -0,0 +1 @@
+export { resolveTsconfigPaths } from './tsconfig-paths'

libs/config/src/webpack/resolvers/tsconfig-paths.ts

@@ -0,0 +1,36 @@
+import { WebpackConfigOptions } from '../types'
+import { resolve } from 'path'
+import secondLayer from '../../tsconfig/paths/second-layer.json'
+import thirdLayer from '../../tsconfig/paths/third-layer.json'
+
+/**
+ * adds tsconfig paths depending on the layer of your library
+ * @param options {WebpackConfigOptions} - options from
+ * buildWebpackConfig root function
+ */
+
+export const resolveTsconfigPaths = (
+  options: WebpackConfigOptions
+): Record<string, string> => {
+  const tsconfig = options.layer === 'second' ? secondLayer : thirdLayer
+
+  // This solution actually don't work.
+
+  // config.resolve.plugins.push(
+  //   new TsconfigPathsPlugin({
+  //     configFile: 'libs/config/src/tsconfig/paths/second-layer.json',
+  //     baseUrl: '.'
+  //   })
+  // )
+
+  return {
+    '@': resolve(options.rootDir, 'src'),
+    ...Object.fromEntries(
+      Object.entries(tsconfig.compilerOptions.paths).map(
+        ([name, tsconfigPath]) => {
+          return [name, resolve(options.rootDir, (tsconfigPath as [string])[0])]
+        }
+      )
+    )
+  }
+}

libs/config/src/webpack/types.ts

@@ -0,0 +1,10 @@
+import { Configuration } from 'webpack'
+
+export interface BuildWebpackConfigPayload {
+  rootDir: string
+  layer: 'second' | 'third'
+}
+
+export interface WebpackConfigOptions extends BuildWebpackConfigPayload {
+  config: Configuration
+}

libs/config/tsconfig.json

@@ -7,7 +7,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   },
   "files": [],
   "include": [],

package.json

@@ -124,6 +124,7 @@
     "@types/react-smooth-scrollbar": "^8.0.4",
     "@types/styled-components": "5.1.26",
     "@types/uuid": "^9.0.2",
+    "@types/webpack": "^5.28.2",
     "@types/wicg-file-system-access": "^2020.9.6",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
@@ -178,6 +179,7 @@
     "vite-plugin-webfont-dl": "^3.7.6",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.32.0",
+    "webpack": "^5.88.2",
     "yarnhook": "^0.6.0"
   },
   "dependencies": {

yarn.lock

@@ -2221,6 +2221,7 @@ __metadata:
     "@types/react-smooth-scrollbar": ^8.0.4
     "@types/styled-components": 5.1.26
     "@types/uuid": ^9.0.2
+    "@types/webpack": ^5.28.2
     "@types/wicg-file-system-access": ^2020.9.6
     "@typescript-eslint/eslint-plugin": ^5.58.0
     "@typescript-eslint/parser": ^5.58.0
@@ -2304,6 +2305,7 @@ __metadata:
     vite-plugin-webfont-dl: ^3.7.6
     vite-tsconfig-paths: ^4.2.0
     vitest: ^0.32.0
+    webpack: ^5.88.2
     workbox-cacheable-response: ^7.0.0
     workbox-expiration: ^7.0.0
     workbox-precaching: ^7.0.0
@@ -8999,6 +9001,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/webpack@npm:^5.28.2":
+  version: 5.28.2
+  resolution: "@types/webpack@npm:5.28.2"
+  dependencies:
+    "@types/node": "*"
+    tapable: ^2.2.0
+    webpack: ^5
+  checksum: 0b147aaaaa8992417a5ed65af83eb0df9b5247c38ab482f3c844495935a29c474cb21bc865ca36052c353034f40d14c8d232f0c831fdc1a6956baa985d7b1135
+  languageName: node
+  linkType: hard
+
 "@types/wicg-file-system-access@npm:^2020.9.6":
   version: 2020.9.6
   resolution: "@types/wicg-file-system-access@npm:2020.9.6"
@@ -27675,7 +27688,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack@npm:^5.80.0":
+"webpack@npm:^5, webpack@npm:^5.80.0, webpack@npm:^5.88.2":
   version: 5.88.2
   resolution: "webpack@npm:5.88.2"
   dependencies: