Create Plugins

Learn to Create Plugins

Plugins in the Athena Framework are made in a specific way. Meaning, that following this general structure will help you create robust plugins without touching the core of the framework.

It is important that when a plugin is created that is does not adjust the core of the Athena Framework. This ensures that compatability is future-proof and additional updates to the plugin can be made without over complicating it.

Structure

All plugins should be placed inside the src/core/plugins folder.

The folder structure is very specific.

It consists of several folders inside your main folder.

• server

  • This should all be server-side code

• client

  • This should all be client-side code

• shared

  • This should be shared between server, client, and webview

• webview

  • This is a WebView Page you want to inject

  • DOES NOT SUPPORT IMAGES, SOUNDS, ETC. THEY BELONG IN THE src-webviews/public folder

src/core/plugins/core-example
  |───dependencies.json
  ├───client
  │   │   index.ts
  |   │
  │   └───src  
  │       │   file1.ts
  │       │   file2.ts
  │       │   file3.ts
  |
  ├───server
  │   │   index.ts
  │   │
  │   └───src
  │       │   file1.ts
  │       │   file2.ts
  │       │   file3.ts
  │
  ├───shared
  │   │   file1.ts
  │   │   file2.ts
  │   │   file3.ts
  │
  └───webview
      │   Example.vue
      │   tsconfig.json
      │
      ├───components
      │       Component1.vue
      │       Component2.vue
      │       Component3.vue

Naming

Rules for Files and Folder(s)

• Plugins should use kebab-case for folder names.

  • ie. door-plugin

• File names should be camelCase.

  • ie. mainDoorController.ts

• Plugins should use their respective folders for imports

  • Server: src/core/plugins/example-plugin/server

    • The main import file for the plugin should be called index.ts.

  • Client: src/core/plugins/example-plugin/client

    • The main import file for the plugin should be called index.ts.

  • Shared: src/core/plugins/example-plugin/shared

  • WebView: src/core/plugins/example-plugin/webview

    • There must be a main *.vue file in this folder.

    • Keep all components and additional vue files in subfolders.

• Entry file for a Plugin should be index.ts

  • This applies to both client and server.

It is up to you as the plugin creator to provide GOOD instruction(s) on installation and removal of the plugin.

Dependencies

If you have server-side dependencies for an npm package you can create a dependencies.json in the root of your plugin structure to auto-install dependencies for an end-user.

{
    "dependencies": [
      "discord.js@latest"
    ],
    "devDependencies": [
      "glob"
    ]
}

Dependencies in devDependencies will not be installed during production mode of the server. Meaning if you want to use an npm package in the game mode you should put it in dependencies.

Example dependencies.json

Registering a Server Plugin

In your plugin's index file you should register your plugin.

import * as alt from 'alt-server';
import { PluginSystem } from '../../server/systems/plugins';

const PLUGIN_NAME = 'Example Plugin';

PluginSystem.registerPlugin(PLUGIN_NAME, () => {
    // Initialize other things for your plugin here...
    alt.log(`~lg~${PLUGIN_NAME} was Loaded`);
});

Learn from Example

Last but not least you should always look at the existing plugins to get a general idea of how they work and how they're being implemented.