From 50191fccf2595a05c2f946a7468580f2056efcf8 Mon Sep 17 00:00:00 2001
From: Conor Murphy <38164654+ConorMurphy21@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:13:21 -0800
Subject: [PATCH] Share types across client and server (#190)
* * pushing what I have from laptop
* definitely not working but want to work on desktop
* * move types to common package
* get server dev tools working with common package
* still need to get production build working
* * get everything working about build
* except resources aren't copied over to dist folder
* * copy the resources over properly
* * replace typescript enums with typescript unions as I have learned typescript enums have some downsides and unions are preferred
* * remove node_modules from the buildspec.yml because I webpack includes them in the bundle
* * migrate most of client over to common types
* still need to migrate options, midgameReconnect
* add typechecking to socketioClient
* * use same options types across the server and client
* refactor options a bit to make both sides agree
* fix client build (resolve common imports)
* * used TypedSocketClient instead of standard SocketIO client
* fix typing errors that ensued from that
* * convert enum to string union
* * update linting
* * minor renaming and prettier
---
.idea/HitOrMiss.iml | 2 +
.idea/codeStyles/Project.xml | 2 +
.idea/runConfigurations/server_tests.xml | 2 +-
buildspec.yml | 2 -
client/.eslintrc.cjs | 1 +
client/src/components/lobby/Options.vue | 21 +-
client/src/components/lobby/PlayerCard.vue | 7 +-
client/src/components/lobby/PlayerList.vue | 8 +-
.../responseMatching/ActiveMatching.vue | 2 +-
.../components/responseMatching/MatchCard.vue | 18 +-
.../responseMatching/MatchingSummary.vue | 8 +-
.../responseSelection/Selection.vue | 2 +-
client/src/directives/tooltip.ts | 3 +-
client/src/router/index.ts | 3 +-
client/src/socket/socket.ts | 5 +-
client/src/stores/game.ts | 98 +-
client/src/stores/room.ts | 8 +-
client/src/types/shims-vue.d.ts | 2 +-
client/src/types/vue-i18n.d.ts | 2 +-
client/src/views/Home.vue | 2 +-
client/tsconfig.json | 25 +-
client/vite.config.ts | 3 +-
common/package.json | 11 +
common/src/options.ts | 71 +
{server/src/types => common/src}/result.ts | 29 +-
.../src/socketioTypes.ts | 31 +-
common/src/stateTypes.ts | 54 +
common/tsconfig.json | 9 +
package-lock.json | 1923 +++++++++++------
package.json | 8 +-
server/.eslintrc.cjs | 1 +
server/package.json | 21 +-
server/src/index.ts | 20 +-
server/src/logger/logger.ts | 3 +-
server/src/routes/gameHandlers.ts | 74 +-
server/src/routes/registerHandlers.ts | 2 +-
server/src/routes/roomHandlers.ts | 9 +-
server/src/routes/roomService.ts | 6 +-
server/src/state/gameState.ts | 119 +-
server/src/state/options.ts | 65 -
server/src/state/pollService.ts | 21 +-
server/src/state/rooms.ts | 46 +-
server/src/types/stateTypes.ts | 44 -
server/tests/routes/createjoin.ts | 2 +-
server/tests/routes/lobby.ts | 4 +-
server/tests/routes/promptResponse.ts | 2 +-
server/tests/routes/responseSelection.ts | 4 +-
server/tests/state/autoMatch.ts | 8 +-
server/tests/state/completeCallbacks.ts | 23 +-
server/tests/state/pollService.ts | 55 +-
server/tests/state/selectionAccepts.ts | 18 +-
server/tests/state/selectionRotation.ts | 3 +-
server/tests/state/sikeDispute.ts | 9 +-
server/tests/state/voteSkipPrompt.ts | 17 +-
server/tsconfig.build.json | 11 -
server/tsconfig.json | 26 +-
server/webpack.config.js | 44 +
tsconfig.build.json | 12 +
tsconfig.json | 4 +
tsconfig.options.json | 32 +
60 files changed, 1837 insertions(+), 1230 deletions(-)
create mode 100644 common/package.json
create mode 100644 common/src/options.ts
rename {server/src/types => common/src}/result.ts (71%)
rename server/src/types/socketServerTypes.ts => common/src/socketioTypes.ts (66%)
create mode 100644 common/src/stateTypes.ts
create mode 100644 common/tsconfig.json
delete mode 100644 server/src/state/options.ts
delete mode 100644 server/src/types/stateTypes.ts
delete mode 100644 server/tsconfig.build.json
create mode 100644 server/webpack.config.js
create mode 100644 tsconfig.build.json
create mode 100644 tsconfig.options.json
diff --git a/.idea/HitOrMiss.iml b/.idea/HitOrMiss.iml
index ab05643..bac5a62 100644
--- a/.idea/HitOrMiss.iml
+++ b/.idea/HitOrMiss.iml
@@ -16,6 +16,8 @@
+
+
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index f986f2f..df209e9 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -7,6 +7,7 @@
+
@@ -15,6 +16,7 @@
+
diff --git a/.idea/runConfigurations/server_tests.xml b/.idea/runConfigurations/server_tests.xml
index 228d481..b8f8f09 100644
--- a/.idea/runConfigurations/server_tests.xml
+++ b/.idea/runConfigurations/server_tests.xml
@@ -6,7 +6,7 @@
$PROJECT_DIR$/server
true
bdd
- --require ts-node/register/transpile-only --exit
+ -r ts-node/register/transpile-only -r tsconfig-paths/register --exit
PATTERN
tests/**/*.ts
diff --git a/buildspec.yml b/buildspec.yml
index 27dd166..89bf22c 100644
--- a/buildspec.yml
+++ b/buildspec.yml
@@ -11,7 +11,6 @@ phases:
commands:
- echo Build started on `date`
- npm run build
- - npm prune --omit=dev
post_build:
commands:
- echo Build completed on `date`
@@ -20,6 +19,5 @@ artifacts:
files:
- '.ebextensions/**/*'
- 'dist/**/*'
- - 'node_modules/**/*'
- 'package.json'
- 'package-lock.json'
diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
index 5d57390..9735d61 100644
--- a/client/.eslintrc.cjs
+++ b/client/.eslintrc.cjs
@@ -20,6 +20,7 @@ module.exports = {
parser: '@typescript-eslint/parser'
},
rules: {
+ '@typescript-eslint/consistent-type-imports': ['error'],
'@typescript-eslint/no-unused-vars': ['off'],
'@typescript-eslint/no-unsafe-assignment': ['off'],
'vue/multi-word-component-names': ['off'],
diff --git a/client/src/components/lobby/Options.vue b/client/src/components/lobby/Options.vue
index 0ef5129..37b168a 100644
--- a/client/src/components/lobby/Options.vue
+++ b/client/src/components/lobby/Options.vue
@@ -121,20 +121,11 @@ import { useGameStore } from '@/stores/game.js';
import { mapState } from 'pinia';
import { defineComponent } from 'vue';
-type Options = {
- promptTimer: number;
- numRounds: number;
- autoNumRounds: boolean;
- promptSkipping: boolean;
- sikeDispute: boolean;
- sikeRetries: number;
- packs: Record;
- customPrompts: string;
-};
+import type { SettableOptions } from ':common/options';
type NumericKeyOfOptions = {
- [K in keyof Options]: Options[K] extends number ? K : never;
-}[keyof Options];
+ [K in keyof SettableOptions]: SettableOptions[K] extends number ? K : never;
+}[keyof SettableOptions];
export default defineComponent({
props: {
@@ -167,14 +158,14 @@ export default defineComponent({
onNumRoundChange(event: Event) {
this.onNumChange(event, 'numRounds', { autoNumRounds: false });
},
- onNumChange(event: Event, label: NumericKeyOfOptions, options?: Partial) {
+ onNumChange(event: Event, label: NumericKeyOfOptions, options?: Partial) {
const inputValue = parseInt((event.currentTarget! as HTMLInputElement).value);
const actualValue = this.options[label];
if (Math.abs(inputValue - actualValue) !== 0) {
this.validateNum(event, label, options);
}
},
- validateNum(event: Event, label: NumericKeyOfOptions, options?: Partial) {
+ validateNum(event: Event, label: NumericKeyOfOptions, options?: Partial) {
const input = event.currentTarget! as HTMLInputElement;
const inputValue = parseInt(input.value);
const max = parseInt(input.max);
@@ -197,7 +188,7 @@ export default defineComponent({
},
validateSikeDispute(event: Event) {
const input = event.currentTarget! as HTMLInputElement;
- const options: Partial = {};
+ const options: Partial = {};
options.sikeDispute = input.checked;
if (!input.checked) {
options.sikeRetries = 0;
diff --git a/client/src/components/lobby/PlayerCard.vue b/client/src/components/lobby/PlayerCard.vue
index c8764ec..4352212 100644
--- a/client/src/components/lobby/PlayerCard.vue
+++ b/client/src/components/lobby/PlayerCard.vue
@@ -5,12 +5,9 @@