How can I create global utilities for a Lightning app under LockerService?

Question

I have several functions that I want to use in various Lightning components, and I don't want to copy and paste them into multiple Helpers, as they will quickly become difficult to maintain.

For example, I have the following as the utils Static Resource:

(function(w) {
  w.Utils = {};
  w.Utils.getSix = function() {
    return 6;
  };
})(window);

I have a Lightning component, myComponent, that includes:

<ltng:require scripts="{!$Resource.utils}" />

In myComponentController.js, I am able to use the following:

({
  "myControllerFunc": function() {
    if (Utils.getSix() === 6) {
      // do stuff
    }
  }
})

And this seems to be working fine when I test my app. However, when I installed the Lightning CLI to lint my code, I get errors

• From the secure-window rule stating that Utils is an invalid SecureWindow API, and
• From the no-undef rule stating that Utils is not defined.

I would rather not be getting errors from the linter, because I want to ensure my code will continue to run in the future when Salesforce will undoubtedly change things.

How can I write code that can be used in multiple components while respecting the wishes of the LockerService?

Answer 1

I was building a managed component for the Lightning Component Exchange and was using Underscore.js to do most the data manipulation works and it would with Locker Service enabled.

When tested with Lightning CLI, some of the errors reported in the lines where _(underscore) was used.

secure-window _ Invalid SecureWindow API

secure-window _ is not defined

Raised a question in the Partner community, and got response that Lightning CLI is bit chatty at the moment.So I think we are good here.

Answer 2

This is a definite false positive from linter. Linter currently does not have functionality to look at static resource functions .I would just ignore the warning from linter .

Answer 3

Here is a nice article which explains how to modularizing code in lightning components using global utilities in static resources?

window.counter = (function(){

    var value = 0; // private

    return { //public API

        increment: function() {
            value = value + 1;
            return value;
        },

        getValue: function() {
            return value;
        }

    };

}());

Even though window.counter looks like a global declaration, counter is attached to the LockerService secure window object and therefore is a namespace variable, not a global variable.

Answer 4

You can define your utilities in the helper method of a custom component CmpRoot, and make all your components inherit from CmpRoot so your utilities will be available directly from their helpers as they are inherited.

<component extends="c:CmpRoot">

</component>