How to Contribute@ Codebase Tour
Our VSCode Extension is a Typescript project and we use npm for our package manager.
We have various dev-dependencies for unit tests, end-to-end tests, code linters, and type definitions for typescript compilation. Our e2e-tests and unit-tests are stored in their respective folders , and our JSDoc documentation is stored in the docs folder.
All of our config files for the different package management pipelines are in the config folder, and this includes stuff like the Typescript compiler config, ESLint config, and code coverage config files.
Our backend API using google cloud functions with firebase is in the cloud_functions folder, and these functions consist of endpoints that communicate with our application and populate the database with the corresponding data in the correct format.
As for actual dependencies, we only have three node packages: Firebase, simple-git, and xmlhttprequest-ts. Firebase is used to interface with Firebase's authentication feature which will be used to handle user accounts and user ids. Simple-git is used to run git commands on the user's local repositories to collect necessary data for our extension to work. Xmlhttprequest-ts is used to send HTTP requests to communicate with the backend endpoints that will write data into Firebase's realtime database.
The extensions core functionalities are all in the seven files in the src/ folder: auth.ts, commandsx.ts, config.ts, events.ts, git.ts, main.ts, and webview.ts. auth.ts contains authentication related functions, commands.ts contains functions which represent the core functions of our extension that can be run through the VSCode command palette, config.ts contains the Firebase configuration of our backend, events.ts contains an event listener that fires every time the user navigates to a new file within VSCode, and sends that file information over to the backend APIs. git.ts contains Git-related functions which are mostly encapsulated git commands that run on the user's local environment and sends that data back to the endpoints. main.ts contains the extensions main function where all the parts are put together, and webview.ts contains the webview part of our extension which allows a map to be displayed within a webview in VSCode.
Our unit-tests are set up in unit-tests/suite/, where any file ending in test.ts will be compiled into a unit-test and run with Mocha, our unit-testing library.
Our end-to-end tests are set up in e2e-tests/, where each file will be compiled into an e2e-test and run with vscode-extension-tester, which is our end-to-end testing library.
The extension's main function is called in main.ts, which activates our extension and initializes the Firebase authentication service and runs the simple-git functions we have from git.ts in order to collect basic data about the Git repository that the user's current open folder is in. main.ts also initializes the status bar button which can be clicked to reveal a command palette within VSCode. main.ts prevents the extension from running without user authentication, so the user must sign in or sign up in order for the extension to start working. After the user is authenticated,
main.ts loads the commands from commands.ts and auth.ts, where the user can choose to select a sign in/up option to authenticate, and select from the extension's core functionalities from commands.ts, namely displaying the current working file, creating a map, and loading a map. Authentication is handled by the functions in auth.ts using the Firebase package.
git.ts contains the functions that encapsulate git commands that will be run via the simple-git package before collecting data about the repository and sending it to the server.
events.ts contains a listener that will be run after the user is authenticated to keep track of the current file that the user is editing and update the database each time the user navigates away to a new file
webview.ts contains the function that will initialize the webview with the source code map inside of VSCode. The webview contains a barebones version of our webapp which will display the source code map inside VSCode and update in realtime.
