Skip to main content

main.js

Once you’ve developed all of your Incidents it is time to create your main.js file, the file that your package.json points to via it’s “main” field. The main.js file of your plugin defines all of the necessary information MotorCortex needs in order to properly load it and make your amazing Incidents available to the developers. Without it your plugin just can’t be loaded to MotorCortex. The main.js file of each plugin just exports a javascript object with the following properties:

  • npm_name: mandatory, specifies the unique name of your plugin and should be identical to your package.json “name” field
  • incidents: an array of all of the Incidents exposed by your plugin
  • compositeAttributes: (optional) if your Incidents support composite attributes this is the place to define them (more on this later)
  • Clip: That’s where you can place your Cusom Browser Clip
import MyIncident from "./src/MyIncident";

module.exports = {
  npm_name: "my-plugin-name",
  incidents: [
    {
      exportable: MyIncident,
      name: "MyIncident",
      attributesValidationRules: {
        animatedAttrs: {
          type: "object",
          props: {
            // validation rules as per [fastest-validator](https://www.npmjs.com/package/fastest-validator) library
          },
        },
      },
    },
  ],
};

incidents​

incidents keyword holds an array of objects each of which defines the exposed Incident. The structure of this object is simple:

  • exportable: a direct reference to the Class of the Incident
  • name: the name of your Incident in the outer world. For example if you name it “MyIncident”, then your Incident will be available on YouPlugin.MyIncident
  • attributesValidationRules: this object defines the attributes that your Incident expects / supports. Under the hood validation is performed by the fastest-validator library, so the object here follows all the rules of the specific library. There are more details on the attributesValidationsRules paragraph that follows. Even though the attributesValidationRules is optional it is bad practice not to define it.

Clip​

In contrast with normal Incidents, each plugin can only define just one Cusom (Browser) Clip. When defining a Custom Clip then you should not put it on the incidents array but you should place it on the “Clip” keyword of your main.js file. The schema though is identical to the schema of Incidents within the incidents array only this time you don’t need to define the name of it. The name will always be .Clip.

Clip: {
    exportable: MyCustomClipClass,
    attributesValidationRules: {...}
}

compositeAttributes​

There are cases that an Effect of yours might handle / animate an attribute that is composite. By composite we mean that this attribute is defined by a set of attributes. For example the position of an element on a 2D space should be defined as a composite attribute consisting of x and y, transform on css should be the combination of translateX, translateY, etc.

By defining your composite attributes you help MotorCortex handle these cases properly in terms of conflicts checks. For example, if Incident A alters the value of position.x and Incident B alters the value of position.y of the same element, as soon as they alter the attributes of the same composite attribute can not overlap with eachother.

Defining your compositeAttributes is very easy. The only thing you need to do is to define an object, the keys of which specify the name of your composite attributes and the value of which define an array containing (as strings) the names of the attributes that form it. E.g.

compositeAttributes: {
    position: [“x”, “y”]
}

or

compositeAttributes: {
  transform: [
    "translateX",
    "translateY",
    "translateZ",
    "rotate",
    "rotateX",
    "rotateY",
    "rotateZ",
    "scale",
    "scaleX",
    "scaleY",
    "scaleZ",
    "skewX",
    "skewY",
    "perspective",
  ];
}