diff --git a/backend/package.json b/backend/package.json index d31329d..5f5ec46 100644 --- a/backend/package.json +++ b/backend/package.json @@ -13,16 +13,16 @@ "keywords": [], "author": "András Schmelczer (https://schmelczer.dev/)", "devDependencies": { - "nodemon": "^2.0.4", - "concurrently": "^5.3.0", - "webpack": "^4.43.0", - "webpack-cli": "^3.3.11", - "terser-webpack-plugin": "^2.3.5", - "webpack-dev-server": "^3.10.3", "clean-webpack-plugin": "^3.0.0", + "concurrently": "^5.3.0", + "esbuild-loader": "^2.4.0", + "nodemon": "^2.0.4", "raw-loader": "^4.0.1", "resolve-url-loader": "^3.1.1", - "ts-loader": "^8.0.1" + "terser-webpack-plugin": "^2.3.5", + "webpack": "^4.43.0", + "webpack-cli": "^3.3.11", + "webpack-dev-server": "^3.10.3" }, "dependencies": { "cors": "^2.8.5", diff --git a/backend/tsconfig.json b/backend/tsconfig.json deleted file mode 100644 index 480d017..0000000 --- a/backend/tsconfig.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "compilerOptions": { - "outDir": "./dist/", - "sourceMap": true, - "noImplicitAny": false, - "target": "es5", - "downlevelIteration": true, - "allowJs": true, - "experimentalDecorators": true, - "moduleResolution": "node", - "module": "commonjs", - "esModuleInterop": true - } -} \ No newline at end of file diff --git a/backend/webpack.config.js b/backend/webpack.config.js index 281a1d1..2b572cd 100644 --- a/backend/webpack.config.js +++ b/backend/webpack.config.js @@ -1,13 +1,15 @@ const path = require('path'); -const TerserJSPlugin = require('terser-webpack-plugin'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const nodeExternals = require('webpack-node-externals'); +const { ESBuildPlugin } = require('esbuild-loader'); +const TerserJSPlugin = require('terser-webpack-plugin'); const PATHS = { entryPoint: path.resolve(__dirname, 'src/main.ts'), bundles: path.resolve(__dirname, 'dist'), }; -module.exports = { +module.exports = (env, argv) => ({ entry: { main: [PATHS.entryPoint], }, @@ -21,21 +23,29 @@ module.exports = { filename: '[name].js', path: PATHS.bundles, }, - devtool: 'source-map', + devtool: argv.mode === 'development' ? 'source-map' : false, watchOptions: { poll: true }, optimization: { - minimize: true, - usedExports: true, + minimize: argv.mode !== 'development', minimizer: [ new TerserJSPlugin({ - sourceMap: true, - cache: true, - test: /\.ts$/, + sourceMap: false, + test: /\.js$/, + terserOptions: { + keep_classnames: true, + } }), ], }, + plugins: [ + new ESBuildPlugin(), + new CleanWebpackPlugin({ + protectWebpackAssets: false, + cleanAfterEveryBuildPatterns: [], + }), + ], module: { rules: [ { @@ -50,14 +60,15 @@ module.exports = { }, { test: /\.ts$/, - use: { - loader: 'ts-loader', - }, - exclude: /node_modules/, + loader: 'esbuild-loader', + options: { + loader: 'ts', + target: 'es2015', + } }, ], }, resolve: { extensions: ['.ts', '.js'], }, -}; +}); diff --git a/frontend/package.json b/frontend/package.json index e2696ab..5b7e6f9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,7 +6,7 @@ "scripts": { "start": "webpack-dev-server --mode development", "lint": "eslint --fix \"src/**/*.ts\" && prettier --write \"src/**/*.ts\"", - "build": "webpack --mode production && find dist -type f -not -name '*.html' | xargs rm", + "build": "webpack --mode production", "try-build": "npm run build && cd dist && python3 -m http.server 8080", "initialize": "npm install" }, @@ -18,11 +18,9 @@ } }, "devDependencies": { - "webpack": "^4.43.0", - "webpack-cli": "^3.3.11", - "terser-webpack-plugin": "^2.3.5", - "webpack-dev-server": "^3.10.3", + "terser-webpack-plugin": "^4.2.2", "clean-webpack-plugin": "^3.0.0", + "esbuild-loader": "^2.4.0", "html-webpack-inline-source-plugin": "0.0.10", "html-webpack-plugin": "^3.2.0", "image-webpack-loader": "^6.0.0", @@ -34,7 +32,10 @@ "sass": "^1.26.3", "sass-loader": "^9.0.2", "svg-url-loader": "^6.0.0", - "ts-loader": "^8.0.1" + "webpack": "^4.43.0", + "webpack-bundle-analyzer": "^3.9.0", + "webpack-cli": "^3.3.11", + "webpack-dev-server": "^3.10.3" }, "browserslist": [ "defaults" @@ -42,4 +43,4 @@ "sideEffects": [ "*.scss" ] -} \ No newline at end of file +} diff --git a/frontend/src/scripts/game.ts b/frontend/src/scripts/game.ts index b55c94d..782512b 100644 --- a/frontend/src/scripts/game.ts +++ b/frontend/src/scripts/game.ts @@ -56,7 +56,7 @@ export class Game { this.socket.on(TransportEvents.ServerToPlayer, (serialized: string) => { const command = deserialize(serialized); - console.log(command); + //console.log(command); this.gameObjects.sendCommand(command); }); diff --git a/frontend/src/scripts/objects/game-object-container.ts b/frontend/src/scripts/objects/game-object-container.ts index 3accee6..0b4cf36 100644 --- a/frontend/src/scripts/objects/game-object-container.ts +++ b/frontend/src/scripts/objects/game-object-container.ts @@ -38,14 +38,15 @@ export class GameObjectContainer extends CommandReceiver { [DeleteObjectsCommand.type]: (c: DeleteObjectsCommand) => c.ids.forEach((id: Id) => this.objects.delete(id)), - [UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) => + [UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) => { c.objects.forEach((o) => { this.objects.delete(o.id); this.addObject(o); if (o.id === this.player.id) { this.player = o as CharacterView; } - }), + }); + }, }; protected defaultCommandExecutor(c: Command) { diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json deleted file mode 100644 index c042138..0000000 --- a/frontend/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "outDir": "./dist/", - "sourceMap": true, - "noImplicitAny": false, - "target": "es6", - "downlevelIteration": true, - "allowJs": true, - "experimentalDecorators": true, - "allowSyntheticDefaultImports": true, - "moduleResolution": "Node", - "module": "es6", - "lib": [ - "es2015", - "dom" - ] - } -} \ No newline at end of file diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 98bad7e..6df57c2 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -1,28 +1,29 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const TerserJSPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin'); const Sass = require('sass'); +const TerserJSPlugin = require('terser-webpack-plugin'); +const { ESBuildPlugin } = require('esbuild-loader'); +const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const PATHS = { entryPoint: path.resolve(__dirname, 'src/index.ts'), bundles: path.resolve(__dirname, 'dist'), }; -module.exports = { +module.exports = (env, argv) => ({ entry: { index: PATHS.entryPoint, }, target: 'web', output: { - filename: '[name].[contenthash].js', + filename: '[name].js', path: PATHS.bundles, }, - - devtool: 'source-map', + devtool: argv.mode === 'development' ? 'source-map' : false, devServer: { host: '0.0.0.0', disableHostCheck: true, @@ -31,19 +32,20 @@ module.exports = { }, }, optimization: { - minimize: false, - usedExports: true, + minimize: argv.mode !== 'development', minimizer: [ new TerserJSPlugin({ - sourceMap: true, - cache: true, - test: /\.ts$/, + sourceMap: false, + test: /\.js$/, + terserOptions: { + keep_classnames: true, + } }), new OptimizeCSSAssetsPlugin({}), ], }, plugins: [ - new CleanWebpackPlugin(), + new ESBuildPlugin(), new HtmlWebpackPlugin({ xhtml: true, template: './src/index.html', @@ -53,14 +55,18 @@ module.exports = { removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, - useShortDoctype: true, + useShortDoctype: true }, inlineSource: '.(js|css)$', }), new HtmlWebpackInlineSourcePlugin(), new MiniCssExtractPlugin({ - filename: '[name].[contenthash].css', - chunkFilename: '[id].[contenthash].css', + filename: '[name].css', + chunkFilename: '[id].css', + }), + new CleanWebpackPlugin({ + protectWebpackAssets: false, + cleanAfterEveryBuildPatterns: ['*.js', '*.css'], }), ], module: { @@ -98,14 +104,15 @@ module.exports = { }, { test: /\.ts$/, - use: { - loader: 'ts-loader', - }, - exclude: /node_modules/, + loader: 'esbuild-loader', + options: { + loader: 'ts', + target: 'es2015', + } }, ], }, resolve: { extensions: ['.ts', '.js'], }, -}; +}); diff --git a/package.json b/package.json index 045e143..2fa8566 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "scripts": { "start": "lerna run --parallel start", - "try-build": "lerna run --parallel try-build", + "try-build": "lerna run --parallel try-build-before && lerna run --parallel try-build", "build": "lerna run build", "initialize": "lerna run initialize" }, diff --git a/shared/package.json b/shared/package.json index 7c852f6..94afceb 100644 --- a/shared/package.json +++ b/shared/package.json @@ -2,9 +2,19 @@ "name": "shared", "private": true, "description": "Shared library between backend and frontend", - "main": "src/main.ts", + "main": "lib/main.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", + "start": "webpack --mode development --watch", + "lint": "eslint --fix \"src/**/*.ts\" && prettier --write \"src/**/*.ts\"", + "build": "webpack --mode production", + "try-build-before": "npm run build", "initialize": "npm install" + }, + "devDependencies": { + "clean-webpack-plugin": "^3.0.0", + "terser-webpack-plugin": "^2.3.8", + "ts-loader": "^8.0.3", + "webpack": "^4.43.0", + "webpack-cli": "^3.3.11" } } \ No newline at end of file diff --git a/shared/src/commands/types/step.ts b/shared/src/commands/types/step.ts index fd32dda..fb0181c 100644 --- a/shared/src/commands/types/step.ts +++ b/shared/src/commands/types/step.ts @@ -1,7 +1,7 @@ import { Command } from '../command'; export class StepCommand extends Command { - public constructor(public readonly deltaTimeInMiliseconds: DOMHighResTimeStamp) { + public constructor(public readonly deltaTimeInMiliseconds: number) { super(); } } diff --git a/shared/src/transport/serialization/serialize.ts b/shared/src/transport/serialization/serialize.ts index eb4d97f..4e93184 100644 --- a/shared/src/transport/serialization/serialize.ts +++ b/shared/src/transport/serialization/serialize.ts @@ -1,4 +1,4 @@ -export const serialize = (object): string => { +export const serialize = (object: any): string => { return JSON.stringify(object, (_, value) => { if (value?.__serializable_type) { return [value.__serializable_type, ...value.toArray()]; diff --git a/shared/tsconfig.json b/shared/tsconfig.json index c042138..786ccc7 100644 --- a/shared/tsconfig.json +++ b/shared/tsconfig.json @@ -1,18 +1,20 @@ { "compilerOptions": { - "outDir": "./dist/", + "outDir": "lib", "sourceMap": true, - "noImplicitAny": false, - "target": "es6", - "downlevelIteration": true, - "allowJs": true, + "declaration": true, + "declarationMap": true, + "target": "es2015", + "esModuleInterop": true, + "strict": true, "experimentalDecorators": true, - "allowSyntheticDefaultImports": true, + "downlevelIteration": true, "moduleResolution": "Node", "module": "es6", + "composite": true, "lib": [ - "es2015", - "dom" + "dom", + "es2017" ] } } \ No newline at end of file diff --git a/shared/webpack.config.js b/shared/webpack.config.js new file mode 100644 index 0000000..8db7d86 --- /dev/null +++ b/shared/webpack.config.js @@ -0,0 +1,48 @@ +const path = require('path'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); + +const PATHS = { + entryPoint: path.resolve(__dirname, 'src/main.ts'), + bundles: path.resolve(__dirname, 'lib'), +}; + +module.exports = (env, argv) => ({ + entry: { + main: PATHS.entryPoint, + }, + target: 'node', + output: { + filename: '[name].js', + path: PATHS.bundles, + libraryTarget: 'umd', + umdNamedDefine: true, + }, + devtool: argv.mode === 'development' ? 'source-map' : false, + watchOptions: { + poll: true, + ignored: /node_modules/ + }, + optimization: { + minimize: false, + }, + plugins: [ + new CleanWebpackPlugin({ + protectWebpackAssets: false, + cleanAfterEveryBuildPatterns: [], + }), + ], + module: { + rules: [ + { + test: /\.ts$/, + use: { + loader: 'ts-loader', + }, + exclude: /node_modules/, + } + ], + }, + resolve: { + extensions: ['.ts', '.js'], + }, +});