update dependencies

- downgrade kill-port because of tiaanduplessis/kill-port#61

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .ultra.cache.json
 dist
+build

.nvmrc

@@ -1 +1 @@
-v14.16.1
+v20.9.0

package.json

@@ -5,8 +5,10 @@
 	"main": "index.js",
 	"scripts": {
 		"start": "ultra start:all",
-		"start:all": "pnpm --filter frontend start || pnpm --filter backend start",
-		"build": "ultra --recursive build",
+		"start:all": "pnpm run build:watch || pnpm --filter frontend start || pnpm --filter backend start",
+		"build": "tsc --build packages/backend/ packages/frontend/ --incremental",
+		"build:watch": "pnpm run build --watch",
+		"spr": "set-project-references",
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"update": "pnpm update --interactive --recursive --latest"
 	},
@@ -18,31 +20,37 @@
 	"author": "Anton Bessonov",
 	"license": "MIT",
 	"devDependencies": {
-		"@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
-		"@types/node": "16.11.11",
-		"autoprefixer": "10.4.7",
+		"@bessonovs/set-project-references": "0.0.10",
+		"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
+		"@types/node": "20.9.1",
+		"autoprefixer": "10.4.16",
 		"compression-webpack-plugin": "10.0.0",
-		"css-loader": "6.7.1",
-		"css-minimizer-webpack-plugin": "4.0.0",
-		"fork-ts-checker-webpack-plugin": "7.2.11",
-		"html-webpack-plugin": "5.5.0",
-		"kill-port": "2.0.0",
-		"mini-css-extract-plugin": "2.6.0",
-		"nodemon": "2.0.16",
-		"nodemon-webpack-plugin": "4.7.1",
-		"postcss": "8.4.14",
-		"postcss-loader": "7.0.0",
-		"postcss-preset-env": "7.6.0",
-		"react-refresh": "0.13.0",
-		"react-refresh-typescript": "2.0.4",
-		"source-map-loader": "3.0.1",
-		"tailwindcss": "3.0.24",
-		"ts-loader": "9.3.0",
-		"typescript": "4.7.2",
+		"css-loader": "6.8.1",
+		"css-minimizer-webpack-plugin": "5.0.1",
+		"html-webpack-plugin": "5.5.3",
+		"kill-port": "1.6.1",
+		"mini-css-extract-plugin": "2.7.6",
+		"nodemon": "3.0.1",
+		"nodemon-webpack-plugin": "4.8.2",
+		"postcss": "8.4.31",
+		"postcss-loader": "7.3.3",
+		"postcss-preset-env": "9.3.0",
+		"react-refresh": "0.14.0",
+		"source-map-loader": "4.0.1",
+		"tailwindcss": "3.3.5",
+		"typescript": "5.2.2",
 		"ultra-runner": "3.10.5",
-		"webpack": "5.72.1",
-		"webpack-cli": "4.9.2",
-		"webpack-dev-server": "4.9.0",
-		"webpack-merge": "5.8.0"
+		"webpack": "5.89.0",
+		"webpack-cli": "5.1.4",
+		"webpack-dev-server": "4.15.1",
+		"webpack-merge": "5.10.0"
+	},
+	"packageManager": "pnpm@8.10.5",
+	"pnpm": {
+		"updateConfig": {
+			"ignoreDependencies": [
+				"kill-port"
+			]
+		}
 	}
 }

packages/backend/package.json

@@ -13,12 +13,11 @@
 	"author": "Anton Bessonov",
 	"license": "MIT",
 	"dependencies": {
-		"@bessonovs/node-http-router": "1.0.0",
-		"micro": "9.3.5-canary.3",
+		"@bessonovs/node-http-router": "2.3.0",
+		"micro": "10.0.1",
 		"shared": "1.0.0"
 	},
 	"devDependencies": {
-		"@types/micro": "7.3.7",
-		"@types/node": "16.11.11"
+		"@types/node": "20.9.1"
 	}
 }

packages/backend/src/index.ts

@@ -1,24 +1,24 @@
 import http from 'http'
 import { backend } from 'shared'
-import micro, { sendError } from 'micro'
+import { send, serve } from 'micro'
 import {
-	Router,
 	EndpointMatcher,
+	NodeHttpRouter,
 } from '@bessonovs/node-http-router'
 
-const router = new Router((req, res) => sendError(req, res, { statusCode: 404 }))
+const router = new NodeHttpRouter(({ data: { res } }) => send(res, 404))
 
 const [address, port] = ['0.0.0.0', 3000]
 
-const server = http.createServer(micro(router.serve)).listen(port, address)
+const server = http.createServer(serve(router.serve)).listen(port, address)
 server.once('listening', () => {
 	// eslint-disable-next-line no-console
 	console.log(`started at http://${address}:${port}`)
 })
 
 router.addRoute({
-	matcher: new EndpointMatcher<{name: string}>('GET', /^\/hello\/(?<name>[^/]+)$/),
-	handler: (req, res, match) => {
-		return `Hello ${match.match.groups.name} ${backend()}!`
+	matcher: new EndpointMatcher<{ name: string }>('GET', /^\/hello\/(?<name>[^/]+)$/),
+	handler({ match: { result } }) {
+		return `Hello ${result.match.groups.name} ${backend()}!`
 	},
 })

packages/backend/tsconfig.json

@@ -3,9 +3,16 @@
 	"compilerOptions": {
 		"baseUrl": ".",
 		"rootDir": "./src",
-		"outDir": "./build"
+		"outDir": "./build",
+		"tsBuildInfoFile": "build/.tsbuildinfo",
+		"types": []
 	},
 	"include": [
 		"./src/**/*"
+	],
+	"references": [
+		{
+			"path": "../shared"
+		}
 	]
-}
+}

packages/backend/webpack.config.js

@@ -1,4 +1,5 @@
 const { merge } = require('webpack-merge')
+const path = require('path')
 const NodemonPlugin = require('nodemon-webpack-plugin')
 const {
 	config,
@@ -10,9 +11,9 @@ module.exports = merge(config({
 }), {
 	name: 'backend',
 	target: 'node',
-	entry: './src/index.ts',
+	entry: './build/index.js',
 	resolve: {
-		extensions: ['.ts', '.js'],
+		extensions: ['.js'],
 	},
 	optimization: {
 		minimize: false,
@@ -21,22 +22,9 @@ module.exports = merge(config({
 	},
 	plugins: [
 		isDev && new NodemonPlugin({
+			watch: path.resolve('build', '.tsbuildinfo'),
 			delay: '100',
 			exec: 'kill-port --port 3000,9228 > /dev/null; node -r source-map-support/register --inspect=0.0.0.0:9228',
 		}),
 	].filter(Boolean),
-	module: {
-		rules: [
-			{
-				test: /\.tsx?$/,
-				exclude: /node_modules/,
-				use: {
-					loader: 'ts-loader',
-					options: {
-						transpileOnly: true,
-					},
-				},
-			},
-		],
-	},
 })

packages/frontend/package.json

@@ -13,13 +13,13 @@
 	"author": "Anton Bessonov",
 	"license": "MIT",
 	"dependencies": {
-		"react": "18.1.0",
-		"react-dom": "18.1.0",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
 		"shared": "1.0.0"
 	},
 	"devDependencies": {
-		"@types/react": "18.0.9",
-		"@types/react-dom": "18.0.5",
-		"@types/webpack-env": "1.17.0"
+		"@types/react": "18.2.37",
+		"@types/react-dom": "18.2.15",
+		"@types/webpack-env": "1.18.4"
 	}
 }

packages/frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { frontend } from 'shared'
-import './index.css'
+import '../src/index.css'
 
 export function App() {
 	return (

packages/frontend/src/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { App } from './App'
 
-render(<App />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container!)
+root.render(<App />);
 
 module.hot?.accept()

packages/frontend/tsconfig.json

@@ -4,9 +4,18 @@
 		"baseUrl": ".",
 		"rootDir": "./src",
 		"outDir": "./build",
-		"jsx": "react"
+		"tsBuildInfoFile": "build/.tsbuildinfo",
+		"jsx": "react",
+		"types": [
+			"webpack-env",
+		]
 	},
 	"include": [
 		"./src/**/*"
+	],
+	"references": [
+		{
+			"path": "../shared"
+		}
 	]
-}
+}

packages/frontend/webpack.config.js

@@ -2,7 +2,6 @@ const path = require('path')
 const webpack = require('webpack')
 const { merge } = require('webpack-merge')
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
-const ReactRefreshTypeScript = require('react-refresh-typescript')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { isDev, isProd, config } = require('../../webpack.common.config.js')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
@@ -18,7 +17,7 @@ module.exports = merge(config({
 }), {
 	name: 'frontend',
 	target: 'web',
-	entry: './src/index.tsx',
+	entry: './build/index.js',
 	output: {
 		path: path.resolve(__dirname, 'dist', ...RELEASE_PATH.split('/')),
 		publicPath: RELEASE_PATH,
@@ -57,19 +56,6 @@ module.exports = merge(config({
 	].filter(Boolean),
 	module: {
 		rules: [
-			{
-				test: /\.tsx?$/,
-				exclude: /node_modules/,
-				use: {
-					loader: 'ts-loader',
-					options: {
-						transpileOnly: true,
-						getCustomTransformers: () => ({
-							before: isDev ? [ReactRefreshTypeScript()] : [],
-						}),
-					},
-				},
-			},
 			isProd && {
 				test: /\.js$/,
 				exclude: /node_modules/,

packages/shared/tsconfig.json

@@ -3,6 +3,10 @@
 	"compilerOptions": {
 		"rootDir": "./src",
 		"outDir": "./build",
+		"tsBuildInfoFile": "build/.tsbuildinfo",
+		"types": [
+			"node",
+		]
 	},
 	"include": [
 		"./src/**/*"

tsconfig.base.json

@@ -5,9 +5,10 @@
 			"dom",
 			"es2019"
 		],
-		"module": "ES6",
+		"module": "ES2022",
 		"moduleResolution": "node",
 		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
 		"skipLibCheck": true,
 		"skipDefaultLibCheck": true,
 		"pretty": true,
@@ -16,7 +17,10 @@
 		"strictNullChecks": true,
 		"resolveJsonModule": true,
 		"sourceMap": true,
-		"noUncheckedIndexedAccess": true
+		"noUncheckedIndexedAccess": true,
+		"composite": true,
+		"declarationMap": true,
+		"types": []
 	},
 	"include": [
 		"./src/**/*"

webpack.common.config.js

@@ -1,6 +1,5 @@
 const path = require('path')
 const webpack = require('webpack')
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 
 const mode = process.env.NODE_ENV ?? 'development'
 const isProd = mode === 'production'
@@ -32,15 +31,14 @@ module.exports = {
 				// https://github.com/TypeStrong/ts-loader#usage-with-webpack-watch
 				new webpack.WatchIgnorePlugin({
 					paths: [
-						/\.js$/,
+						/^\.tsbuildinfo$/,
 						/\.d\.ts$/,
 						/\.map$/,
 					]
 				}),
-				new ForkTsCheckerWebpackPlugin(),
 			].filter(Boolean),
 			resolve: {
-				extensions: ['.tsx', '.ts', '.js'],
+				extensions: ['.js'],
 				fallback: {
 					fs: false,
 					buffer: false,