Close this search box.

Namespacing JavaScript Code for Managed Packages

Red Argyle Logo without name
Red Argyle logo

Every Salesforce developer will be called on to contribute to a managed package at some point or another. Fortunately, Salesforce does a great job at namespacing Apex and Visualforce code when building managed packages. But, for applications that use JavaScript living in static resources, that automatic namespacing falls down. JavaScript frameworks like Angular, React, and Ember are the current state of the web, and it’s becoming more popular to roll your own custom front-end for sites using one of these libraries. Our customers are expecting rich and responsive experiences–and modern JavaScript frameworks help us developers create those experiences. The trouble is, when you build a JavaScript application, most of the code either lives in static resources or is possibly hosted by another service entirely, such as Heroku. If you are working on a managed package, none of that JavaScript code gets parsed and prefixed as part of the packaging process.


Our way of answering the need for namespacing JavaScript code was to create a customized Grunt script. The script can be run against a directory containing the JavaScript for an application and generates the namespace prefix programmatically. There are currently two tasks in our script: “package” and “packageFromSF.” The “package” task will search through a directory and find all occurrences of “__c” and “__r” and add the namespace prefix where appropriate. The “packageFromSF” task accepts login credentials and will run a describe call against your Org to collect a list of all custom object and field names. Using that list, it will scan a directory and add the namespace prefix where these fields or objects are referenced.


Red ArgyleGrunt Script for Namespacing JavaScript Code
A Glimpse at Our Grunt Script for Namespacing JavaScript Code


The “packageFromSF” task has a bit higher certainty because the list of terms to search for is extracted from Salesforce and is built specifically from your Org. One issue we’ve had with using the describe method is that it does not return the child relationship name for lookup fields. That means that if your JavaScript code uses relationship queries, the list built during this task will not include those relationship names and your queries will not be completely prefixed. If your code is using relationship queries, we’ve found that the package task mentioned above does a good enough job at finding field and object references to be used as a substitute.


Our script for namespacing JavaScript code can be found in its current state here: Please feel free to use as is or fork and adjust to meet your needs. I would suggest always reviewing a diff of the code pre- and post-namespacing to ensure that the script has applied the namespace prefix correctly. Also keep in mind that this script does not namespace API requests such as remote actions or web service methods–you will need to manually add those yourself. I’m sure there are a lot of other Salesforce teams out there with similar scripts. How has your team handled the JavaScript namespacing conundrum when working on managed packages?


Happy coding!

Red Argyle logo
Red Argyle logo

Related Blog Posts