Native TypeScript Compilation

.github/pull_request_template.md

@@ -4,12 +4,16 @@ Closes momentum-mod/game/issues/<!--(issue number here)-->
 
 ### Checks
 
--   [ ] **I have thoroughly tested all of the code I have modified/added/removed to ensure something else did not break**
--   [ ] I have followed [semantic commit messages](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716) e.g. `feat: Add foo`, `chore: Update bar`, etc...
+-   [ ] **I have thoroughly tested all of the code I have modified/added/removed to ensure something else did not
+        break**
+-   [ ] I have followed [semantic commit messages](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)
+        e.g. `feat: Add foo`, `chore: Update bar`, etc...
 -   [ ] My branch has a clear history of changes that can be easy to follow when being reviewed commit-by-commit
--   [ ] My branch is functionally complete; the only changes to be done will be those potentially requested in code review
+-   [ ] My branch is functionally complete; the only changes to be done will be those potentially requested in code
+        review
 -   [ ] All changes requested in review have been `fixup`ed into my original commits.
--   [ ] Fully tokenized all my strings (no hardcoded English strings!!) and supplied [bulk JSON strings](https://docs.momentum-mod.org/guide/localization/#bulk-adding-terms) below
+-   [ ] Fully tokenized all my strings (no hardcoded English strings!!) and supplied
+        [bulk JSON strings](https://docs.momentum-mod.org/guide/localization/#bulk-adding-terms) below
 
 ### POEditor JSON Strings (if needed)
 

.github/workflows/format.yml

@@ -27,4 +27,4 @@ jobs:
       run: npm run lint:check 
 
     - name: TypeScript Build
-      run: npm run build
+      run: npm run ts:check

.gitignore

@@ -9,7 +9,6 @@ node_modules
 # Specific files
 learn.vdf
 __types_momentum.js
-script_dist/
 
 # Generated by fontconfig
 .uuid

.prettierignore

@@ -1,2 +1 @@
 scripts/types/
-script_dist/

.prettierrc.json

@@ -8,5 +8,6 @@
 	"arrowParens": "always",
 	"endOfLine": "lf",
 	"bracketSpacing": true,
-	"bracketSameLine": false
+	"bracketSameLine": false,
+	"proseWrap": "always"
 }

LICENSE.md

@@ -1,7 +1,14 @@
 Copyright 2022 Momentum Team
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -4,44 +4,65 @@
 
 # Structure
 
-The repository primarily consists of XML, SCSS and JavaScript/TypeScript files. It also includes all icons and various images and videos used by the UI.
+The repository primarily consists of XML, SCSS and TypeScript files. It also includes all icons and various images and
+videos used by the UI.
 
 For a general overview of Panorama, see the [VDC page](https://developer.valvesoftware.com/wiki/Panorama).
 
 ## XML
 
-XML, found in the `layout/` folder, is used to describe the overall _layout_ of all panels. These panels can then be manipulated by JavaScript and C++ code.
+XML, found in the `layout/` folder, is used to describe the overall _layout_ of all panels. These panels can then be
+manipulated by JavaScript and C++ code.
 
 ## CSS/SCSS
 
-Panorama uses a variant of CSS for styling. Note that it does _not_ conform to the standard CSS spec, differing majorly in how it handles things like flow and scaling. A complete list of CSS properties can be found using `dump_panorama_css_properties markdown` in the ingame console (you will need to launch with -condebug and read the console.log output). The list is also kept on the [VDC](https://developer.valvesoftware.com/wiki/CSGO_Panorama_CSS_Properties) though this may not be fully up to date.
+Panorama uses a variant of CSS for styling. Note that it does _not_ conform to the standard CSS spec, differing majorly
+in how it handles things like flow and scaling. A complete list of CSS properties can be found using
+`dump_panorama_css_properties markdown` in the ingame console (you will need to launch with -condebug and read the
+console.log output). The list is also kept on the
+[VDC](https://developer.valvesoftware.com/wiki/CSGO_Panorama_CSS_Properties) though this may not be fully up to date.
 
-Momentum uses the [Sass](https://sass-lang.com/) preprocessor for all styling. This is compiled by the game itself on first load then cached for future loads if unchanged. Developers may therefore change any Sass styling and it will be recompiled on next launch or reload with `panorama_reload`, which is by default bound to F7.
+Momentum uses the [Sass](https://sass-lang.com/) preprocessor for all styling. This is compiled by the game itself on
+first load then cached for future loads if unchanged. Developers may therefore change any Sass styling and it will be
+recompiled on next launch or reload with `panorama_reload`, which is by default bound to F7.
 
-The Sass module structure, found in `styles/`, is quite conventional, with all top-level modules (besides `abstract/`) handled by `main.scss`. Any XML file then needs only include `main.scss` to access the entirety of the styling. We use the [BEM](http://getbem.com/) (Block Element Modifier) naming scheme for all classes, besides those that are referenced in C++ code, which use UpperCamelCase.
+The Sass module structure, found in `styles/`, is quite conventional, with all top-level modules (besides `abstract/`)
+handled by `main.scss`. Any XML file then needs only include `main.scss` to access the entirety of the styling. We use
+the [BEM](http://getbem.com/) (Block Element Modifier) naming scheme for all classes, besides those that are referenced
+in C++ code, which use UpperCamelCase.
 
 ## JavaScript/TypeScript
 
-Panorama uses the [V8 JavaScript engine](https://v8.dev) to interpret and run the JavaScript files, found in `scripts/`, at runtime, which are included in XML files within `<scripts>` tags (similar to regular web development).
+Panorama uses the [V8 JavaScript engine](https://v8.dev) to run JavaScript, with TypeScript compiler (tsc) built-in to
+the engine to provide native TypeScript support. Scripts can be found in `scripts/`, and are loaded at runtime through
+`<scripts>` tags in XML files.
 
-We also support TypeScript - any `.ts` file `scripts/` are compiled to corresponding JavaScript files in `script_dist/`, whilst `.js` are just copied over. Note that we don't use any kind of import/module/bundling system as it's not supported in engine code. Instead we just declare the same XML `<scripts>` tags and scripts get the same scope (yeah, old school). Use `/// <reference path="foo.ts" />` to keep TypeScript happy.
+Whilst loading plain JavaScript is still supported, practically all of our code is in TypeScript, and we expect
+contributors to use TypeScript for new code.
 
-JavaScript communicates with the game via events and APIs exposed by the game. The [pano-typed](https://github.com/StrataSource/pano-typed) package (submoduled in `scripts/types/`) which provides types and documentation for the exposed APIs and events. These are updated manually, and some things may be missing. A full list of which can be found by running `dump_panorama_events markdown` and `dump_panorama_js_scopes markdown` in-game (best to the game in `-condebug` and read `momentum/console.log`). Feel free to add any APIs/events to the `pano-typed` package! If anything is missing completely, please contact us in Discord and we can check in engine code for you.
+JavaScript communicates with the game via events and APIs exposed by the game. Types for these are includes in
+`scripts/types-mom` and `scripts/types`, which is a submodule of the
+[pano-typed](https://github.com/StrataSource/pano-typed) repo. and documentation for the exposed APIs and events. These
+are updated manually, and some things may be missing; please let us know if anything seems off and we'll check engine
+code.
 
-# Setup
-
-#### Requirements
-
--   Git
--   [Node.js](https://nodejs.org/en/download/)
+# Contributing
 
-#### Recommendations
+Most of our larger systems and components require significant work with (closed-source) game code, and thus require
+licensed C++ access or working in tandem with a licensed C++ developer. Our work until now has been done internally by
+the core team. For 0.9.1 and onwards, we have exposed enough events and APIs that non-team developers should be able to
+work on areas like HUD components (for a good example of non-licensed HUD work, see
+[`scripts/hud/cgaz.ts`](scripts/hud/cgaz.ts)). We will continue to expose data as we best see fit for custom panels.
 
-We highly suggest using @braem's [panorama-languages-support](https://marketplace.visualstudio.com/items?itemName=braemie.panorama-css) VSCode plugin for language support for Panorama's version of CSS
+Those looking to contribute should look for issues **NOT** marked with "Needs C++". We also greatly encourage you to
+check out the the #panorama channel in our [Discord](https://discord.gg/momentummod) - whilst Panorama itself is poorly
+documented, we are happy to help any potential contributors further there!
 
-### Guide
+### Basic Setup
 
-The easiest way to develop for Momentum Mod Panorama is to fork this repository and mount it in your `momentum/custom/` folder, for example:
+For non-licensed developers, you will need to have a Steam build of the game installed. The easiest way to develop
+Panorama changes on top of that is to mount the `panorama` folder in your `momentum/custom/` folder, by forking this
+repo (if not a team member), then:
 
 ```bash
 cd <Your Steam Momentum Mod or Momentum Mod Playtest install location>\momentum\custom\
@@ -52,25 +73,25 @@ git clone https://github.com/<your github account>/panorama.git
 
 You should end up with `momentum/custom/PanoramaDev/panorama` containing the contents of this repository.
 
-This will be mounted on game launch and override the files in your `momentum/panorama/` folder. To avoid any overlaps (e.g. if your branch renames or moves a file, the original file will still be mounted), you may want to temporarily rename your `momentum/panorama/` folder. (_NOTE: you'll need to do this after each Momentum Mod Steam update!_)
-
-Install [Node.js](https://nodejs.org/en/download/) if you don't have it
-already, then in a terminal run:
+This will be mounted on game launch and override the files in your `momentum/panorama/` folder. Mind that it's possible
+for overlaps, e.g. if your branch renames or moves a file, the original file will still be mounted, but this is very
+rarely an issue. If necessary, rename your `momentum/panorama/` folder. (_NOTE: you'll need to do this after each
+Momentum Mod Steam update!_)
 
-`npm install`
+### Type Checking, Linting and Formatting
 
-This will install necessary dev dependencies and setup commit hooks which will lint and auto-format your code on commit.
+Since adding native TypeScript support, a Node.js installation is not technically required. However, for performance the
+built-in compiler only transpiles to JavaScript, without performing type checks. We run type checks in CI, but you
+likely also want an editor with TypeScript support, and may want to run `npm run watch` (script for
+`tsc --noEmit  --watch`) to check types as you go.
 
-You will need to run:
+Linting and formatting is enforced in CI, run `npm install` to setup commit hooks for both, and use
+`npm run <format/lint>:<fix/check>` to format/lint your code.
 
-`npm run build`
-
-at least once to compile JS/TS scripts to JS, and after any changes to files in `scripts/`. Use watch mode if you want to compile on change with
-
-`npm run watch`
-
-# Contributing
+To get Node.js and NPM go to <https://nodejs.org/en/download/>
 
-Most of our larger systems and components require significant work with (closed-source) game code and thus requires licensed C++ access or working tandem licensed C++ developer. Our work until now has been done internally by the core team. For 0.9.1 and onwards, we have exposed enough events and APIs that non-team developers should be able to work on areas like HUD components (for an example of non-licensed HUD work, we recommend [`scripts/hud/cgaz.js`](scripts/hud/cgaz.js)). We will continue to expose data as we best see fit for custom panels.
+### Recommendations
 
-Therefore, those looking to contribute should look for issues **NOT** marked with "Needs C++". We also greatly encourage you to check out the the #panorama channel in our [Discord](https://discord.gg/momentummod) - whilst Panorama itself is poorly documented, we are happy to help any potential contributors further there!
+@braem's [panorama-languages-support](https://marketplace.visualstudio.com/items?itemName=braemie.panorama-css) VSCode
+plugin for language support for Panorama's version of CSS, which is invaluable for those unfamiliar with Panorama's
+unique CSS properties.