Merge pull request #71 from aleleba/PR-420915

PR-420915: Changing the logic for aliases for one source of truth on tsconfig.json and updating packages.

README.md

@@ -9,7 +9,7 @@ Tech(Library or Framework) | Version |
 React (Render Library) | 18.2.0
 Redux (Global State Management) | 4.2.1
 React Router DOM (Routing) | 6.8.1
-Jest (Testing) | 29.4.2
+Jest (Testing) | 29.4.3
 Typescript | 4.9.5
 
 ## Setup

config/index.ts

@@ -13,3 +13,5 @@ export const config = {
 	PREFIX_URL: process.env.PREFIX_URL ? process.env.PREFIX_URL : deFaultValues.PREFIX_URL,
 	ONLY_EXACT_PATH: process.env.ONLY_EXACT_PATH ? process.env.ONLY_EXACT_PATH === 'true' : deFaultValues.ONLY_EXACT_PATH,
 };
+
+export default config

jest.config.js

@@ -1,11 +1,17 @@
+const { pathsToModuleNameMapper } = require("ts-jest");
+const { compilerOptions } = require("./tsconfig");
+
+const aliases = pathsToModuleNameMapper(compilerOptions.paths, {
+  prefix: "<rootDir>"
+})
+
 module.exports = {
   setupFilesAfterEnv: ['<rootDir>/setupTest.ts'],
-  "testEnvironment": "jsdom",
+  testEnvironment: "jsdom",
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
   moduleNameMapper: {
+    ...aliases,
     "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.ts",
-    "@components": "<rootDir>/src/frontend/components/",
+    "\\.(css|sass|scss|less)$": "identity-obj-proxy",
-    "@styles": "<rootDir>/src/frontend/styles/",
+  }
-    "@config": "<rootDir>/config/",
+};
-    "\\.(css|sass|scss|less)$": "identity-obj-proxy"
-  },
-};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleleba/create-react-ssr",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "description": "Starter Kit of server side render of react",
   "bin": "./bin/cli.js",
   "main": "src/server/index",
@@ -11,7 +11,8 @@
     "lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
     "lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "check-updates": "npx npm-check-updates -u && npm i"
   },
   "repository": {
     "type": "git",
@@ -31,7 +32,7 @@
   },
   "homepage": "https://github.com/aleleba/create-react-ssr#readme",
   "dependencies": {
-    "@babel/register": "^7.18.9",
+    "@babel/register": "^7.21.0",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "helmet": "^6.0.1",
@@ -59,25 +60,25 @@
     "workbox-streams": "^6.5.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@redux-devtools/extension": "^3.2.5",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.4.0",
-    "@types/node": "^18.13.0",
+    "@types/node": "^18.14.0",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^18.0.11",
     "@types/webpack": "^5.28.0",
     "@types/webpack-hot-middleware": "^2.25.6",
-    "@types/webpack-node-externals": "^2.5.3",
+    "@types/webpack-node-externals": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.51.0",
+    "@typescript-eslint/parser": "^5.53.0",
-    "babel-jest": "^29.4.2",
+    "babel-jest": "^29.4.3",
     "babel-loader": "^9.1.2",
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^10.0.0",
@@ -89,15 +90,17 @@
     "eslint-webpack-plugin": "^4.0.0",
     "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.4.2",
+    "jest": "^29.4.3",
-    "jest-environment-jsdom": "^29.4.2",
+    "jest-environment-jsdom": "^29.4.3",
     "jest-fetch-mock": "^3.0.3",
     "mini-css-extract-plugin": "^2.7.2",
     "react-refresh": "^0.14.0",
-    "sass": "^1.58.0",
+    "resolve-ts-aliases": "^1.0.1",
+    "sass": "^1.58.3",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.6",
+    "ts-jest": "^29.0.5",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.5",
     "url-loader": "^4.1.1",

src/@types/index.d.ts

@@ -2,7 +2,3 @@ declare module "*.svg" {
     const content: any;
     export default content;
 }
-
-declare module "@config" {
-    export const config: any;
-}

src/__mocks__/ProviderMock.tsx

@@ -5,7 +5,7 @@ import { createMemoryHistory } from 'history';
 import initialStateReducer from '../frontend/reducers/initialState';
 import setStore from '../frontend/setStore';
 
-const ProviderMock = ({ children, initialState }) => {
+export const ProviderMock = ({ children, initialState }: { children: any, initialState?: any}) => {
     let initialStateMock = initialStateReducer
 
     if(initialState !== undefined){
@@ -24,4 +24,4 @@ const ProviderMock = ({ children, initialState }) => {
     )
 }
 
-export default ProviderMock;
+export default ProviderMock;

src/__mocks__/fileMock.ts

@@ -1 +1,2 @@
-module.exports = ''; 
+export const fileMock = '';
+module.exports = fileMock;

src/__mocks__/index.ts

@@ -0,0 +1 @@
+export * from './ProviderMock';

src/frontend/actions/testAction.ts

@@ -14,7 +14,7 @@ export interface IChangeHelloPayload {
 export type TTest = IChangeHello
 
 const changeHello = (payload: string) => ({
-    type: 'CREATE_USER',
+    type: ActionTypesTest.ChangeHello,
     payload
 })
 

src/frontend/components/__tests__/App.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ProviderMock from '../../../__mocks__/ProviderMock';
+import { ProviderMock } from '@mocks';
-import App from '../App';
+import App from '@components/App';
 
 describe('<App/> Component', () => {
     beforeEach(() => {
@@ -15,7 +15,7 @@ describe('<App/> Component', () => {
         }));
 
         render(
-            <ProviderMock initialState={undefined}>
+            <ProviderMock>
                 <App />
             </ProviderMock>
         )

tsconfig.json

@@ -26,13 +26,27 @@
       "node"
     ],
     "sourceMap": true,
-    "baseUrl": "**/*",
+    "baseUrl": ".",
     "outDir": "build",
     "skipLibCheck": true,
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "paths": {
+      "@components/*": ["src/frontend/components/*"],
+      "@components": ["src/frontend/components"],
+      "@styles/*": ["src/frontend/styles/*"],
+      "@styles": ["src/frontend/styles"],
+      "@actions/*": ["src/frontend/actions/*"],
+      "@actions": ["src/frontend/actions"],
+      "@reducers/*": ["src/frontend/reducers"],
+      "@reducers": ["src/frontend/reducers"],
+      "@config/*": ["config/*"],
+      "@config": ["config"],
+      "@mocks/*": ["src/__mocks__/*"],
+      "@mocks": ["src/__mocks__"]
+    }
   },
   "include": [
-    "**/*"
+    "."
   ],
   "exclude": [
    "node_modules",

webpack.config.dev.server.ts

@@ -1,6 +1,7 @@
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpackNodeExternals from 'webpack-node-externals';
 import WebpackShellPluginNext from 'webpack-shell-plugin-next';
+import { resolveTsAliases } from "resolve-ts-aliases";
 import path from 'path';
 import { Configuration } from 'webpack';
 const ROOT_DIR = path.resolve(__dirname);
@@ -10,6 +11,7 @@ const scriptExtensions = /\.(tsx|ts|js|jsx|mjs)$/;
 const styleExtensions = /\.(css|less|styl|scss|sass|sss)$/;
 const fontsExtensions = /\.(eot|otf|ttf|woff|woff2)$/;
 const fontsAndImagesExtensions = /\.(png|jpg|jpeg|gif|svg|ico|mp4|avi|ttf|otf|eot|woff|woff2|pdf)$/;
+const alias = resolveTsAliases(path.resolve("tsconfig.json"));
 
 const config: Configuration = {
   target: 'node',
@@ -20,11 +22,7 @@ const config: Configuration = {
   },
   resolve: {
     extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
-    alias: {
+    alias,
-			'@components': path.resolve(__dirname, 'src/frontend/components/'),
-			'@styles': path.resolve(__dirname, 'src/frontend/styles/'),
-      '@config': path.resolve(__dirname, 'config/'),
-		},
   },
   module: {
     rules: [

webpack.config.dev.ts

@@ -6,10 +6,12 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
+import { resolveTsAliases } from "resolve-ts-aliases";
 
 const ROOT_DIR = path.resolve(__dirname);
 const resolvePath = (...args: string[]) => path.resolve(ROOT_DIR, ...args);
 const BUILD_DIR = resolvePath('build');
+const alias = resolveTsAliases(path.resolve("tsconfig.json"));
 
 const copyPatterns = [
 	{
@@ -41,11 +43,7 @@ const config: Configuration = {
 	},
 	resolve: {
 		extensions: ['.js', '.jsx','.ts','.tsx', '.json'],
-		alias: {
+		alias,
-			'@components': path.resolve(__dirname, '../src/frontend/components/'),
-			'@styles': path.resolve(__dirname, '../src/frontend/styles/'),
-      		'@config': path.resolve(__dirname, '../config/'),
-		},
 	},
 	devtool: 'inline-source-map',
 	mode: 'development',

webpack.config.ts

@@ -10,12 +10,14 @@ import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
+import { resolveTsAliases } from "resolve-ts-aliases";
 
 const ROOT_DIR = path.resolve(__dirname);
 const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args);
 const BUILD_DIR = resolvePath('build');
 const { InjectManifest } = require('workbox-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
+const alias = resolveTsAliases(path.resolve("tsconfig.json"));
 
 const copyPatterns = [
 	{
@@ -50,11 +52,7 @@ const frontendConfig = {
 	},
 	resolve: {
 		extensions: ['.js', '.jsx','.ts','.tsx', '.json'],
-		alias: {
+		alias,
-			'@components': path.resolve(__dirname, 'src/frontend/components/'),
-			'@styles': path.resolve(__dirname, 'src/frontend/styles/'),
-			'@config': path.resolve(__dirname, 'config/'),
-		}
 	},
 	mode: 'production',
 	module: {
@@ -160,11 +158,7 @@ const serverConfig = {
 	},
 	resolve: {
 		extensions: ['.js', '.jsx','.ts','.tsx', '.json'],
-		alias: {
+		alias,
-			'@components': path.resolve(__dirname, 'src/frontend/components/'),
-			'@styles': path.resolve(__dirname, 'src/frontend/styles/'),
-      		'@config': path.resolve(__dirname, 'config/'),	
-		}
 	},
 	mode: 'production',
 	module: {