V2 Module Structure

V2 modules represent the modern approach to building Getiyo modules, offering significant improvements over V1 modules. They can be identified by having a module.ts file. They support modern JavaScript features like import/export statements and allow the use of external Node packages, making development more efficient and maintainable. Each module comprises four key components: module.ts, a server-side script, a user page, and optionally a control/external page. The detailed structure of each component is outlined below. You can automatically set up this file structure by using the GetiyoModuleTool, as described in the "Setting up a development environment" section of the documentation.

Module Root
├── .dist                       Ouput folder for buid.
├── .gmt                        Internal files used for api definitions.
├── shared                      Shared TypeScript function and type definitions between server and pages.
│   ├── **/*.ts
│   └── **/*.d.ts
├── server
│   ├── src                     Folder containing all server TypeScript files.
│   │   └── **/*.ts
│   ├── node_modules            Folder for installed node packages.
│   ├── package.json            Registry file for node packages.
│   └── tsconfig.json           TypeScript configuration file.
├── user (control/external)
│   ├── ts                      Folder containing all page TypeScript files.
│   │   └── **/*.ts
│   ├── scss                    Folder containing all page SCSS/CSS files.
│   │   ├── **/*.scss
│   │   └── **/*.css
│   ├── index.html              HTML for the page.
│   ├── node_modules            Folder for installed node packages.
│   ├── package.json            Registry file for node packages.
│   └── tsconfig.json           TypeScript configuration file.
├── icon.png
└── module.ts

Module.ts

The module.ts file serves as the central configuration file for each module in Getiyo. Unlike the old module.json file it has full type definitions making it easier to configure. It contains essential metadata that informs Getiyo about the module's identity, as well as the module's properties, triggers, and conditions. The GetiyoModuleTool can automatically generate this file for you, streamlining the setup process. However, if you want to modify or add properties, triggers, or conditions, you can refer to the module.json section in the documentation. To learn more about the module.ts file.

Server-Side

The server-side component of a Getiyo V2 module leverages modern JavaScript practices with full support for import/export statements and external node packages. You can use npm install to add any packages your module requires, significantly expanding development possibilities. Code is organized within the server/src directory with its own dependency management through package.json. The server-side code utilizes the ModuleServerAPI, which facilitates communication with the ModuleClientAPI, file management, show control, and integration with external services. Each module runs in an isolated environment, ensuring clean separation between modules. For a comprehensive overview of the ModuleServerAPI's features and capabilities, visit the ModuleServerAPI section in the documentation to learn how to create powerful, maintainable Getiyo modules.

Module Root
└── server
    ├── src                     Folder containing all server TypeScript files.
    │   └── **/*.ts
    ├── node_modules            Folder for installed node packages.
    ├── package.json            Registry file for node packages.
    └── tsconfig.json           TypeScript configuration file.

Page

A page of a module consists of an HTML file, TypeScript and Sass (or CSS). The user page is required because it is shown as the module to a user. The other pages are outside the renderer and not required. Each page can leverage modern JavaScript features including import/export statements and external npm packages through its own package.json. Pages have full access to the ModuleClientAPI, which automatically establishes connection with the server-side ModuleServerAPI, enabling real-time communication, property updates, and user interaction. The following representation illustrates the typical file structure for a module page:

Module Root
├── user (control/external)
│   ├── ts (Required)
│   │   └── **/*.ts
│   ├── scss (Optional)
│   │   └── **/*.scss
│   ├── css (Optional)
│   │   └── **/*.css
│   ├── lib (Optional)
│   │   ├── **/*.scss
│   │   └── **/*.css
│   └── index.html

Control Page

A control page is a specialized module page accessible only to moderators or admins of a Getiyo channel. This can be used to create a live control panel for your module. It can be opened directly or loaded into the broadcast view—a page where moderators or broadcasters can arrange a controller layout with control pages from different modules. The file structure for a control page is the same as that of a user page.

External Page

An external page is a unique module page without Getiyo UI elements that can be accessed by anyone with the URL. Unlike user and control pages, external pages are not scaled or queued. The file structure for an external page is the same as that of a user page.

Shared Files

The shared directory is a key component of the V2 module architecture, designed to promote code reuse between server-side and client-side components. You can add .ts and .d.ts files to this directory to define functions, interfaces, types, and constants that need to be accessible across your module's ecosystem. By exporting these shared elements, you ensure consistent type definitions and behavior between your server implementation and various pages (user, control, and external). This approach eliminates duplication, reduces the risk of inconsistencies, and improves maintainability. For example, you might define API response types, validation functions, or configuration constants in the shared directory, making them available to both server-side processing logic and client-side rendering components. The TypeScript compiler will ensure these shared definitions remain in sync across all parts of your module.

Static Files

You can include static files in a module build for later use with the ModuleServerAPI. To do so, create a static directory at the root of the module environment and place the files inside. Then you can use these files on the server side or make them available to client through api.addHost().

Introduction
GameLib
- Room
- Game
  - GamePlayer
  - Scoreboard
    - Details
    - State
- GameLib CollisionSpace

ModuleClientAPI

ModuleApi Shared

RuntimeStorage
Gamelib