This is a new typescript project template intended for VirtEx
Modules / Features
Vite as bundler
Vitest for unit testing
Typedoc for documentation
Bootstrap for styling
Implement simple typescript router
Bootstrap based navigation (SPA)
Learnings from the Phase I Project
Avoid "any" type, for example see how to cast json into a class with baseutil methods
Clean service for database access. The service should have no knowledge of the database json structure.
Types of Files and Naming Conventions
Files contain code for different purposes. Here are a few conventions
utils are files that have only or mostly static functions. Examples navbarUtils.ts with class NavbarUtils
services are files that contain classes that need to be instantiated. Examples are firebaseService.ts with class FirebaseService
models are files that contain strongly typed models reflecting the database. Examples are playerModel.ts with PlayerModel
handlers are files containing class that manipulate models. Example playerHandler.ts with class PlayerHandler
html are html files and can are clearly identified by their extensions
test are typescript files that do unit test for typescript classes (in particular handlers). Example playerHandler.test.ts
Folder Structure
The folder structure should offer a "meaningfull" way to organize all files.
One good rule for "meaningful" can be that a developer can find files without knowing berforehand where they are.
Here are some guiding princles for this approach:
Keep related files close together Examples for related files can be:
The player model is only used in playerhandler; the files should be next to each other
The unit test for the playerhandler should be next to the the playerhandler
Keep utils and services at the closest folder where they are used
Servcices like firebase or s3 should be in a folder services
Utilities like baseUtils should be in a folder utils.
Angular like components Establish a habit of grouping angular like components together. An example is the placement component.
placement.ts is the typescript code for the component. It is invoked by the parent and the parent holds a handle to the component. The parent can supply a callback if necessary.
placement.html contains the html for this component. It is injected into the dom by the constructor of the placement.ts class.
placement.css contains any specific css for this component. It is injected by the placement.ts class.
The main entry points:
index.html with index.ts
appexercise.html with appexercise.ts
These two entry points provide different functionality:
admin index.html handles all admin and developer functionality
exercise appexercise.html handles the exercise and nothing else