[MIRROR] tgui: Upgrade to Yarn 2.4.1 and TypeScript 4.2 (#3947)

* tgui: Upgrade to Yarn 2.4.1 and TypeScript 4.2

* a

Co-authored-by: Aleksej Komarov <[email protected]>
Co-authored-by: Gandalf2k15 <[email protected]>

.vscode/settings.json

@@ -1,11 +1,13 @@
 {
-	"eslint.nodePath": "tgui/.yarn/sdks",
+	"eslint.nodePath": "./tgui/.yarn/sdks",
 	"eslint.workingDirectories": [
 		"./tgui"
 	],
+	"typescript.tsdk": "./tgui/.yarn/sdks/typescript/lib",
+	"typescript.enablePromptUseWorkspaceTsdk": true,
 	"search.exclude": {
-		"tgui/.yarn": true,
-		"tgui/.pnp.*": true
+		"**/.yarn": true,
+		"**/.pnp.*": true
 	},
 	"workbench.editorAssociations": [
 		{

tgui/.eslintrc.yml

@@ -1,6 +1,7 @@
-parser: '@babel/eslint-parser'
+root: true
+parser: '@typescript-eslint/parser'
 parserOptions:
-  ecmaVersion: 2019
+  ecmaVersion: 2020
   sourceType: module
   ecmaFeatures:
     jsx: true
@@ -279,7 +280,8 @@ rules:
   no-shadow-restricted-names: error
   ## Disallow the use of undeclared variables unless mentioned
   ## in /*global*/ comments
-  no-undef: error
+  ## NOTE: Pointless when TypeScript can check for this
+  # no-undef: error
   ## Disallow initializing variables to undefined
   no-undef-init: error
   ## Disallow the use of undefined as an identifier

tgui/.gitignore

@@ -10,6 +10,7 @@ package-lock.json
 !/.yarn/plugins
 !/.yarn/sdks
 !/.yarn/versions
+!/.yarn/lock.yml
 
 ## Build artifacts
 /public/.tmp/**/*

tgui/.yarn/sdks/eslint/bin/eslint.js

@@ -2,7 +2,7 @@
 
 const {existsSync} = require(`fs`);
 const {createRequire, createRequireFromPath} = require(`module`);
-const {resolve, dirname} = require(`path`);
+const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.js";
 

tgui/.yarn/sdks/eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint",
-  "version": "7.4.0-pnpify",
+  "version": "7.21.0-pnpify",
   "main": "./lib/api.js",
   "type": "commonjs"
 }

tgui/.yarn/sdks/typescript/bin/tsc

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/bin/tsc
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/bin/tsc your application uses
+module.exports = absRequire(`typescript/bin/tsc`);

tgui/.yarn/sdks/typescript/bin/tsserver

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/bin/tsserver
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/bin/tsserver your application uses
+module.exports = absRequire(`typescript/bin/tsserver`);

tgui/.yarn/sdks/typescript/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "typescript",
+  "version": "4.2.3-pnpify",
+  "main": "./lib/typescript.js",
+  "type": "commonjs"
+}

tgui/.yarnrc.yml

@@ -1,21 +1,17 @@
 enableScripts: false
 
 logFilters:
-  ## DISABLED_BUILD_SCRIPTS
   - code: YN0004
     level: discard
-  ## INCOMPATIBLE_OS - fsevents junk
   - code: YN0062
     level: discard
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
 
 preferAggregateCacheInfo: true
 
 preferInteractive: true
 
-yarnPath: .yarn/releases/yarn-2.4.0.cjs
+yarnPath: .yarn/releases/yarn-2.4.1.cjs

tgui/README.md

@@ -87,6 +87,7 @@ Run `.\bin\tgui.bat` with any of the options listed below.
 doing development on IE8).
 - `bin/tgui --lint` - Show problems with the code.
 - `bin/tgui --fix` - Auto-fix problems with the code.
+- `bin/tgui --test` - Run tests.
 - `bin/tgui --analyze` - Run a bundle analyzer.
 - `bin/tgui --clean` - Clean up project repo.
 - `bin/tgui [webpack options]` - Build the project with custom webpack

tgui/bin/tgui

@@ -63,12 +63,19 @@ task-dev-server() {
 }
 
 ## Run a linter through all packages
-task-eslint() {
+task-lint() {
   cd "${base_dir}"
-  yarn run eslint packages "${@}"
+  yarn run tsc
+  echo "tgui: type check passed"
+  yarn run eslint packages --ext .js,.jsx,.ts,.tsx,.cjs,.mjs "${@}"
   echo "tgui: eslint check passed"
 }
 
+task-test() {
+  cd "${base_dir}"
+  yarn run jest
+}
+
 ## Mr. Proper
 task-clean() {
   cd "${base_dir}"
@@ -147,21 +154,28 @@ fi
 if [[ ${1} == '--lint' ]]; then
   shift 1
   task-install
-  task-eslint "${@}"
+  task-lint "${@}"
   exit 0
 fi
 
 if [[ ${1} == '--lint-harder' ]]; then
   shift 1
   task-install
-  task-eslint -c .eslintrc-harder.yml "${@}"
+  task-lint -c .eslintrc-harder.yml "${@}"
   exit 0
 fi
 
 if [[ ${1} == '--fix' ]]; then
   shift 1
   task-install
-  task-eslint --fix "${@}"
+  task-lint --fix "${@}"
+  exit 0
+fi
+
+if [[ ${1} == '--test' ]]; then
+  shift 1
+  task-install
+  task-test "${@}"
   exit 0
 fi
 
@@ -182,7 +196,7 @@ fi
 ## Make a production webpack build + Run eslint
 if [[ -z ${1} ]]; then
   task-install
-  task-eslint --fix
+  task-lint --fix
   task-webpack --mode=production
   exit 0
 fi

tgui/docs/writing-tests.md

@@ -0,0 +1,23 @@
+## Jest
+
+You can now write and run unit tests in tgui.
+
+It's quite simple: create a file ending in `.test.ts` or `.spec.ts` (usually with the same filename as the file you're testing), and create a test case:
+
+```js
+test('something', () => {
+  expect('a').toBe('a');
+});
+```
+
+To run the tests, type the following into the terminal:
+
+```
+bin/tgui --test
+```
+
+There is an example test in `packages/common/react.spec.ts`.
+
+You can read more about Jest here: https://jestjs.io/docs/en/getting-started
+
+Note, that there is still no real solution to test UIs for now, even though a lot of the support is here (jest + jsdom). That will come later.