Naming Convention

Although the naming of plugins, functions, or events is not an enforced rule, we recommend a few conventions to standardize things.

1. Plugin Name: Let's consider a plugin which provides authentication, named as Auth.
2. Class Name: The name of the class will be your plugin name suffixed with 'Plugin' i.e. AuthPlugin.
3. getPluginName: When returning the name of the plugin, we add <plugin_name> with @, followed by the version. ex : Auth@1.0.0 (<plugin_name>@).
4. Adding functions: While functions can be added to pluginStore with any name, to ensure uniqueness across plugins, we recommend the format <plugin_name>.<function_name>. Ex : Auth.authenticate.
5. Events: Events can be added and dispatched from pluginStore using any name. To show which event belongs to which plugin, we recommend the format <plugin_name>.<event_name> Ex: Auth.checking.

Example :

AuthPlugin.tsx

import React from "react";
import { IPlugin, PluginStore } from "react-pluggable";

class AuthPlugin implements IPlugin {
  getPluginName(): string {
    return "Auth@1.0.0"; //line 2
  }

  getDependencies(): string[] {
    return [];
  }

  public pluginStore: any;

  init(pluginStore: PluginStore): void {
    this.pluginStore = pluginStore;
  }

  authenticate = (credentials: object) => {
    // checks the credentials and returns username if matches.
    return { name: "username" };
  };

  activate(): void {
    this.pluginStore.addFunction(
      "Auth.authenticate", //line 3
      (credentials: object) => this.authenticate(credentials)
    );
  }

  deactivate(): void {
    this.pluginStore.removeFunction("Auth.authenticate"); //line 4
  }
}

export default AuthPlugin;

We have seen in the class AuthPlugin that the name of the plugin is used several times. An alternate way is to define a variable that stores the name of the plugin and use that variable in the class wherever we want the plugin name.

AuthPlugin

import React from "react";
import { IPlugin, PluginStore } from "react-pluggable";

class AuthPlugin implements IPlugin {
  private namespace = "Auth";

  getPluginName(): string {
    return `${this.namespace}@1.0.0`; //line 2
  }

  getDependencies(): string[] {
    return [];
  }

  public pluginStore: any;

  init(pluginStore: PluginStore): void {
    this.pluginStore = pluginStore;
  }

  authenticate = (credentials: object) => {
    // checks the credentials and returns username if matches.
    return { name: "username" };
  };

  activate(): void {
    this.pluginStore.addFunction(
      `${this.namespace}.authenticate`, //line 3
      (credentials: object) => this.authenticate(credentials)
    );
  }

  deactivate(): void {
    this.pluginStore.removeFunction(`${this.namespace}.authenticate`); //line 4
  }
}

export default AuthPlugin;