WebCord contains many sources and assets for each of its features – this may lead to the confusion to the developers, who don't know where they should place their code and where to find the part for the specific feature.
WebCord's local repositories usually has the following top-level folders:
-
sources
– this is the most important part of the WebCord's repository, as it contains all the source code files and assets (including compiled code to JavaScript). -
docs
– this is where this documentation is placed. It may contain the sub-folders with the translations of the documentation to different languages. -
node_modules
– this is the folder generated by NPM to store WebCord's dependencies. It shouldn't be pushed to the remote repository, but if it is there for some reason, please create a new issue as quickly as it is possible. -
out
– this is the folder containing the packaged version of the WebCord and its distributables (i.e*.deb
for Debian,*.rpm
for Fedora,*.AppImage
for Linux in general and*.zip
for Windows and MacOS).
Moreover, you may find these top-level files at your copy of WebCord's repository as well:
-
package.json
– this file contains the important metadata used bynpm
andelectron
like the WebCord's dependencies, path tomain
script, path to forge configuration or even that WebCord is WebCord. -
package-lock.json
– a file generated bynpm
and is used to lock dependencies to the various versions. As WebCord's release model in master tends to always use as much up-to-date dependency versions as it is possible, most dependencies aren't locked and there's no lock file published into the repository for that reason (see.gitignore
if you want to change that). -
yarn.lock
– a lock file similar topackage-lock.json
, except it is used by theyarn
package manager. -
tsconfig.json
– a JSON with Comments configuration file that contains the metadata. -
.eslintrc.json
– a linter configuration (ESLint).
To make code browsing much easier, the code and assets are grouped by their type in following folders:
-
code
– contains the code of the application in TypeScript format. As WebCord code is quite large nowadays, the code is separated into different files in following folders:-
main
– has the part of the code that is WebCord-specific and cannot be reused by the any other software without code modifications. -
modules
– includes the scripts that are made in such way they can be reused by different software without any code modifications. In the future, I will host them on the Node.js registry to allow others using them in their own software as modules. -
build
– folder that includes scripts associated with the build configuration; currently it is used for the Electron Forge only (forge.ts
).
-
-
assets
– contains all assets being part of the WebCord as a software. Assets in this folder are grouped in the following subfolders:-
icons
– contains all icons used by WebCord (including app icon and tray icons). -
translations
– a directory that includes official translations made to WebCord. -
web
– a folder for HTML internal web pages and their content (CSS/JSON files) used by WebCord.
-
-
app
– includes compiled application code to JavaScript language, with comments removed to save some space. I don't recommend messing with that files as they're overwritten bytsc
anyway, unless you want to find if TypeScript did messed anything during the compilation (which is rather not going to happen, at least with the stable features). It has the same structure ascode
folder.
Since initial release, WebCord has drastically changed that it's code became too large for developing it comfortably in single file. This also needed the naming scheme. So, in general, WebCord's source code files are named and put in the folders under following name scheme:
{processOrBuild}/[type]/{functionality}.ts
-
{processOrBuild}
indicates to which process this script belongs to. WebCord currently contains three folders that represents that:main
,renderer
andglobal
(for scripts that belongs to multiple processes). The exception to that rule is thebuild
directory that contains the WebCord's build configuration for the Electron Forge. -
[type]
subfolders groups code by its purpose. It can mean either aBrowserWindows
-associated scripts (windows
), window'spreload
s ormodules
on which other scripts depends on. There are also scripts that doesn't belong to these categories – they're put then directly inside the proper{process}
folder. -
{functionality}
shows directly what functionality this script implements. For instance,about.ts
indicates the scripts that implements the About window functionality.
Here's more detailed description of what's been already discussed above:
-
main.ts
– A script that is mainly responsible for loading another parts of the code from the other files and putting them together into the one program. It also handles the command-line flags (due to some flags work as a separate part of the application) and implements the default properties for the createdwebContents
(mainly to harden the app security). -
global.ts
– A script that has simple modules declarations used between multiple processes (i.e. both main and renderer process scripts).
-
about.ts
– defines the About window, which shows the information about the application itself (versions, contributors, licenses etc.) -
docs.ts
– defines the WebCord's documentation browser, using themarked
engine for the markdown rendering. -
main.ts
– contains the declaration of WebCord's main window, i.e. a such window that contains the Discord interface. -
settings.ts
– a window definition used for WebCord's new HTML-based configuration panel.
-
main.ts
– a preload script formainWindow
, basically loadscapturer.ts
andcosmetic.ts
scripts described in the next sections. -
settings.ts
– a front-end script for the WebCord's settings manager; it communicates via the IPC to load and fetch the configuration from the website. -
docs.ts
– a script providing the functionality for WebCord's markdown documentation reader. -
about.ts
– it is responsible for loading the About window content based on the translation files and pre-defined HTML file structure. -
capturer.ts
– communicates with screen capture BrowserView to show window list and send chosen source back to the Discord using IPC.
-
user.ts
– a module that fakes the WebCord's user agent, by generating it using Chromium engine version in current Electron release. -
l10n.ts
– defines the localization support within WebCord. -
package.ts
– Contains a class and functions to load and validate thepackage.json
file. It might be published in the future outside the WebCord's sources (as a standalone NPM package) once it will be designed to support allpackage.json
properties according to the NPM docs.
-
capturer.ts
– sends the request tomain.ts
using IPC and waits for it to respond with chosen source. -
cosmetic.ts
– does some cosmetic changes to the Discord website, removing from it some unnecessary content like the application download popups.
-
bug.ts
– a module which generates an URL to the new GitHub issue, which is an URL to abug
template pre-filled with some OS details that are available to the Electron. Current (as of WebCord ) implementation -
error.ts
– handlesuncaughtException
s, allowing for prettier output in some cases as well asdialog
GUI window displaying error message and simplified error stack. -
menus.ts
– includes modules that declares various (OS-native) menus, as well as some functions implementing various features called via it. -
config.ts
– contains classes and types used for reading and modifying various configuration files in WebCord. -
csp.ts
– defines the Content Security Policy information, that will be used by WebCord to overwrite the original CSP headers, allowing to block some third-party websites not being necessary for Discord to work. -
client.ts
– contains some globally-used properties within WebCord's main process. It contains some metadata not available inpackage.json
, like the URL to the Discord website. -
update.ts
– a module used to implement the updates notification functionality in WebCord.
-
build/forge.ts
– contains app's Electron Forge configurations. -
build/forge.d.ts
– includes types definitions for the Electron Forge configuration.