TypeScript and Vue 3

[MaxLeiter]

This is a wide reaching PR, so to summarize my changes:

• four tsconfigs:
  • ./tsconfig.base.json: shared values the other three extends
  • ./tsconfig.json: for the webpack.config.ts
  • ./src/tsconfig.json: server stuff
  • ./client/tsconfig.json: client stuff
• three build commands in package.json now:
  • yarn build:client: runs webpack
  • yarn build:server: runs tsc to compile the server typescript files to src/dist
  • yarn build: runs yarn build:*
• yarn dev now evokes ts-node to interpret the server side TS on the fly.
• yarn start will run the compiled server (in src/dist)
• dep changes:
  • added cross-env: sets env vars in package.json scripts for multiple platforms (this can probably be removed in the future)
  • added typings for packages without support for them
  • added necessary babel plugins and removed obsolete ones
  • added nyc typescript config (@istanbuljs/nyc-config-typescript)
  • added eslint-define-config, eslint-define-config
  • added ts-loader, ts-node, ts-sinon,
  • added tsconfig-paths, tsconfig-paths-webpack-plugin, which allow webpack/ts files to use path aliases (i.e. @components/)
  • updated vuex to 4.0 (was 3.6.2)
  • replaced vue-draggable with a hand-rolled Vue component using SortableJS (which vue-draggable uses under the hood)
• I replaced most imports with requires but a few are left if they had advanced usage, like for loading client-side commands.

I've also moved us to Vue 3 for proper TypeScript support. We now use the composition API in our components

Sorry for the commit mess, I'll squash before merging. I used ts-migrate to try and automate some things but it really just renamed the files for me and made a bunch of commits while doing so.

[itsjohncs]

The comment in your commit describing what each tsconfig.json is for is quite useful. It'd be nice to also have that information at the top of each file.

I don't think I fully understand the scope of this PR. Are you just trying to get The Lounge to integrate TS into its build process such that TS can be used, or are you also trying to convert as much of the codebase as possible to fully-typed TS?

[nemchik]

The comment in your commit describing what each tsconfig.json is for is quite useful. It'd be nice to also have that information at the top of each file.

https://github.com/microsoft/TypeScript-Babel-Starter/blob/master/tsconfig.json

this file can be used as a template to include all comments (including unused options).

[MaxLeiter]

@itsjohncs I was planning to convert the server to typescript and leave the client for incremental changes, but it's looking to be easier to convert everything to typescript to satisfy tsc/eslint/ts-node. There will be a lot left to desire type-wise but it should be a much improved DX experience.

That being said, if you and @bookworm would prefer I split the configuration changes into another PR for ease of review I can see how it goes.

[itsjohncs]

I suspect we'll want to go the "test it a lot" style of review then 😅. This'll be too big of a change to actually audit I'd think. I think whenever you think it's ready we should just land it onto master and then triage and fix any issues over time afterwards.