Getiyo-Public/Getiyo-Developer-Documentation
1
0
Fork 0
Code Issues 6 Releases Wiki Activity

Updated specs

Mees van der Wijk
2025-08-28 00:21:12 +02:00
parent 3b0c54b870
commit febe203db5
3 changed files with 48 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
V1ModuleStructure.md

@@ -1,5 +1,7 @@
# V1 Module Structure
V1 modules represent the legacy approach to building Getiyo modules. They have several limitations: all TypeScript files are combined into a single global scope, modern JavaScript standards like import/export statements aren't supported, and there's no capability to import external Node packages. These constraints make development less efficient and maintainable. Additionally [gmt watch](./GetiyoModuleTool#watch) is not supported for V1 modules. For a significantly improved development experience with modern features, we strongly recommend using [V2 modules](./V2ModuleStructure) for all new module development.
Each module in Getiyo comprises four key components: module.json, 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](./GetiyoModuleTool), as described in the ["Setting up a development environment]"(./ModuleEnvironment) section of the documentation.
## Module.json

125
V2ModuleStructure.md

@@ -1,51 +1,71 @@
# V1 Module Structure
# V2 Module Structure
Each module in Getiyo comprises four key components: module.json, 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](./GetiyoModuleTool), as described in the ["Setting up a development environment]"(./ModuleEnvironment) section of the documentation.
## Module.json
The module.json file serves as the central configuration file for each module in Getiyo. It contains essential metadata that informs Getiyo about the module's identity, as well as the module's properties, triggers, and conditions. The [GetiyoModuleTool](./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 configuring the [module.json](./ModuleJSON) file and its various elements, consult the Module JSON section in the documentation.
## Server-Side
The server-side component of a Getiyo module is comprised of one or more TypeScript or JavaScript files, organized according to the structure outlined below. The server-side code utilizes the [ModuleServerAPI](./ModuleServerAPI), which facilitates communication with the ModuleClientAPI, file management, show control, and more. For a comprehensive overview of the ModuleServerAPI's features and capabilities, visit the [ModuleServerAPI](./ModuleServerAPI) section in the documentation. By familiarizing yourself with the API, you can better leverage its functionality to create powerful and versatile Getiyo modules.
V2 modules represent the modern approach to building Getiyo modules, offering significant improvements over V1 modules. 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](./GetiyoModuleTool), as described in the ["Setting up a development environment"](./ModuleEnvironment) section of the documentation.
```
Module Root
├── .dist Ouput folder for buid.
├── .gmt Internal files used for api definitions.
├── server
│ ├── **/*.ts
│ └── **/*.js
│ ├── 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
└── package.json
```
## 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](./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](./ModuleTS.md) 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](./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](./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.
```
_See bottom of the page for a complete directory structure_
## Page
A page of a module consists of an HTML file, TypeScript (or JavaScript), 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. The following representation illustrates the typical file structure for a module 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](./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
├── user (control/external)
│ ├── ts (Required)
│ │ ├── ModuleClientAPI.d.ts
│ │ └── **/*.ts
│ ├── js (Optional)
│ │ └── **/*.js
│ ├── scss (Optional)
│ │ └── **/*.scss
│ ├── css (Optional)
│ │ └── **/*.css
│ ├── lib (Optional)
│ │ ├── **/*.ts
│ │ ├── **/*.js
│ │ ├── **/*.scss
│ │ └── **/*.css
│ └── index.html
```
_See bottom of the page for a complete directory structure_
The only required directory is ts, as it contains the type definitions for the API in ModuleClientAPI.d.ts. If you prefer using plain JavaScript, create a js folder, but do not remove the ts directory. If you want to include any libraries create a lib folder and add the TypeScript, Javascript, Sass or css files their. They will automatically be included infront of your own script/style. Each page has access to the ModuleClientAPI which will automatically be connected to its server-side ModuleServerAPI. For a comprehensive overview of the ModuleClientAPI's features and capabilities, visit the [ModuleClientAPI](./ModuleClientAPI). section in the documentation.
### 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.
@@ -59,64 +79,3 @@ An external page is a unique module page without Getiyo UI elements that can be
It is possible to add static files to a module build that can be used by the [ModuleServerAPI](./ModuleServerAPI) later. Simple create a `Static` directory in the root of the module environment and place files inside it to add them to the build.
You can include static files in a module build for later use with the [ModuleServerAPI](./ModuleServerAPI). To do so, create a `static` directory at the root of the module environment and place the files inside. This will ensure that they are added to the build. By following this approach, you can easily store and manage static assets, such as images, fonts, or other files, that your module may need for its functionality.
## Example complete file structure
```
Module Root
├── user
│ ├── ts (Required)
│ │ ├── ModuleClientAPI.d.ts
│ │ └── **/*.ts
│ ├── js (Optional)
│ │ └── **/*.js
│ ├── scss (Optional)
│ │ └── **/*.scss
│ ├── css (Optional)
│ │ └── **/*.css
│ ├── lib (Optional)
│ │ ├── **/*.ts
│ │ ├── **/*.js
│ │ ├── **/*.scss
│ │ └── **/*.css
│ └── index.html
├── control
│ ├── ts (Required)
│ │ ├── ModuleClientAPI.d.ts
│ │ └── **/*.ts
│ ├── js (Optional)
│ │ └── **/*.js
│ ├── scss (Optional)
│ │ └── **/*.scss
│ ├── css (Optional)
│ │ └── **/*.css
│ ├── lib (Optional)
│ │ ├── **/*.ts
│ │ ├── **/*.js
│ │ ├── **/*.scss
│ │ └── **/*.css
│ └── index.html
├── external
│ ├── ts (Required)
│ │ ├── ModuleClientAPI.d.ts
│ │ └── **/*.ts
│ ├── js (Optional)
│ │ └── **/*.js
│ ├── scss (Optional)
│ │ └── **/*.scss
│ ├── css (Optional)
│ │ └── **/*.css
│ ├── lib (Optional)
│ │ ├── **/*.ts
│ │ ├── **/*.js
│ │ ├── **/*.scss
│ │ └── **/*.css
│ └── index.html
├── server
│ ├── **/*.ts
│ └── **/*.js
├── static
│ └── **/*.*
├── .dist
└── module.json
```

6
_Sidebar.md

@@ -8,11 +8,9 @@
### [Module Development](./ModuleDevelopmentIntroduction)
- [Introduction](./ModuleDevelopmentIntroduction)
- V2 Modules
- [Module Structure](./V2ModuleStructure)
- [V2 Module Structure](./V2ModuleStructure)
- [Module.json](./ModuleTS)
- V1 Modules
- [Module Structure](./V1ModuleStructure)
- [V1 Module Structure](./V1ModuleStructure)
- [Module.json](./ModuleJSON)
- [Development environment/Building](./ModuleEnvironment)
- Module Config