3

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?

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.

| improve this answer | |
  • By "a bit chatty," do you mean that it is reporting errors that are not really problems? I just want to be sure that code I'm developing for a client won't suddenly break some time in the future. – Ben Aug 19 '16 at 11:42
  • 1
    @BenBurwell Yes it is, the scope of the CLI is limited involving static resources as Mohith Pointed.Even we got our package(since the underscore.js is attached to the window object) was cleared by the security review.So you are fine here. – Praveen Aug 19 '16 at 12:23
1

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 .

| improve this answer | |
1

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.

| improve this answer | |
0

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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.