refactor: generate a shared library as a client/server dependency

Generate a new nx:js library that contains shared models for client/server packages
Update webpack config to resolve paths from root tsconfig.
Install dev dependency `tsconfig-paths-webpack-plugin` to facilitate this.

Author: traunts

nx.json

@@ -21,7 +21,7 @@
       "dependsOn": ["^build"]
     },
     "watch": {
-      "dependsOn": ["^build"]
+      "dependsOn": ["^watch"]
     }
   },
   "workspaceLayout": {
@@ -40,9 +40,5 @@
       "unitTestRunner": "jest"
     }
   },
-  "pluginsConfig": {
-    "@nrwl/js": {
-      "analyzeSourceFiles": true
-    }
-  }
+  "pluginsConfig": {}
 }

package-lock.json

@@ -125,6 +125,7 @@
     "ts-jest": "28.0.5",
     "ts-loader": "^9.4.2",
     "ts-node": "10.9.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.9.4"
   },
   "scripts": {

package.json

@@ -1,6 +1,7 @@
 const { composePlugins, withNx, withWeb } = require('@nrwl/webpack');
 
 const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 // Nx plugins for webpack.
 module.exports = composePlugins(withNx(), withWeb(), (config) => {
@@ -14,6 +15,11 @@ module.exports = composePlugins(withNx(), withWeb(), (config) => {
   };
 
   config.resolve = {
+    plugins: [
+      new TsconfigPathsPlugin({
+        configFile: path.join(__dirname, 'tsconfig.app.json'),
+      }),
+    ],
     mainFields: ['module', 'main'],
     extensions: ['.ts', '.js'], // support ts-files and js-files
   };

packages/client/webpack.config.js

@@ -1,6 +1,7 @@
 const { composePlugins, withNx, withWeb } = require('@nrwl/webpack');
 
 const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 // Nx plugins for webpack.
 module.exports = composePlugins(withNx(), withWeb(), (config) => {
@@ -13,6 +14,11 @@ module.exports = composePlugins(withNx(), withWeb(), (config) => {
   };
 
   config.resolve = {
+    plugins: [
+      new TsconfigPathsPlugin({
+        configFile: path.join(__dirname, 'tsconfig.app.json'),
+      }),
+    ],
     mainFields: ['module', 'main'],
     extensions: ['.ts', '.js'], // support ts-files and js-files
   };

packages/server/webpack.config.js

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@nrwl/js/babel",
+      {
+        "useBuiltIns": "usage"
+      }
+    ]
+  ]
+}

packages/shared/.babelrc

@@ -0,0 +1,21 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "parserOptions": {
+        "project": ["packages/shared/tsconfig.*?.json"]
+      },
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/shared/.eslintrc.json

@@ -0,0 +1,11 @@
+# shared
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build shared` to build the library.
+
+## Running unit tests
+
+Run `nx test shared` to execute the unit tests via [Jest](https://jestjs.io).

packages/shared/README.md

@@ -0,0 +1,15 @@
+/* eslint-disable */
+export default {
+  displayName: 'shared',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  transform: {
+    '^.+\\.[tj]s$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/packages/shared',
+};

packages/shared/jest.config.ts

@@ -0,0 +1,5 @@
+{
+  "name": "shared",
+  "version": "0.0.1",
+  "type": "commonjs"
+}