Any simple way to share constants between helper methods in a Lightning Component?

Question

With events being fired and also handled in a helper, I have multiple copies of simple constants and so there is some risk of silent failure due to typos.

Given the helper functions are defined as properties of an object, it appears possible to define constants in the same way and reference them via the helper instance:

({
    ADD_ACTION : 'ADD',
    EDIT_ACTION : 'EDIT',

    onRowAction : function(component, event, helper) {
        var action = event.getParam('action');
        switch(action.name) {
            case this.ADD_ACTION:
                ...
            case this.EDIT_ACTION:
                ...
        }
    },
})

But is there a better way to share constants between helper methods in a single Lightning Component?

PS

itzmukeshy7's use of objects to group the constants is a nice refinement:

({
    actions: {
        ADD: 'ADD',
        EDIT: 'EDIT'
    },

    onRowAction : function(component, event, helper) {
        var action = event.getParam('action');
        switch(action.name) {
            case this.actions.ADD:
                ...
            case this.actions.EDIT:
                ...
        }
    },
})

Answer 1

Yes, we can take help of inheritance;

baseComponent.cmp

<aura:component extensible="true">
  <!-- more content here like Attributes/Event -->
  {!v.body}
</aura:component>

baseComponentHelper.js

({
  constants: {
    'ADD_ACTION': 'ADD',
    'EDIT_ACTION': 'EDIT'
  },
  /* some more reusable methods like(server calling) */
})

anotherComponent.js

<aura:component extends="c:baseComponent">
  <!-- more content here -->
  {!v.body}
</aura:component>

anotherComponentController.js

({
  onRowAction : function(component, event, helper) {
    var action = event.getParam('action');
    switch(action.name) {
      case helper.constants.ADD_ACTION:
        ...
      case helper.constants.EDIT_ACTION:
        ...
    }
  },
})

anotherComponentHelper.js

({
  onRowAction : function(component, event, helper) {
    var action = event.getParam('action');
    switch(action.name) {
      case this.constants.ADD_ACTION:
        ...
      case this.constants.EDIT_ACTION:
        ...
    }
  },
})

Answer 2

You could use ltng:require to import a static resource. Of course, this has the drawback that such constants won't be available on init, but it would be available shortly after. The constants would be available in both your helper and controller.

Another alternative would be to use Custom Labels, just like you'd use in Visualforce; the $Label value provider will allow you to get those values in init if you need to. Again, you can use them in both the controller and helper.

Both of these designs presume that you don't want to have to deal with inheritance, particularly because you can't extend more than one component (it's not a "mixin" system like in Ruby).

Answer 3

You can pass an object into the nested components from the outer container.
See: With Summer 18 and LockerService is there any global storage?

<aura:component>
    <aura:attribute name="globals" type="Object" default="constants: { 'ADD_ACTION': 'ADD', 'EDIT_ACTION': 'EDIT'}"/>

and then include a component giving it access to the "global"

<c:InnerComponent globals="{!v.globals}"/>