Add JS helper file, similar to formatters-custom.js

Hey Team,

We want to clean up some of the repetitive code in our codebase and move it to helper functions so it can be reused. We want to do something similar to the formatter functions. static/js/formatters-custom.js, which are used in the following way:

var fDate = Formatter.bigDate(profile, 'time.start');

I created a helpers.js file in static/js/heplers.js and wanted to confirm what is the best way to export it.

Do I need to clone formatters.js to /static/js and import/export there? (screenshot beolw)

And what needs to be done if I want my helper to be used as Helper.getTitle() instead of Formatter.getTitle() for example?

Thank you!

Hi Petya,
We don’t strongly recommend people to not override formatters.js, since that could result in missing formatters in future theme upgrades.

To add extra formatters, you can add them to static/js/formatters-custom.js, which should already be overridden for you by default (but if it’s not then first override the file).
Afterwards, you can add a
export * from './helpers.js' which will export all the functions exported from helpers.js as part of Formatters.

If you would like them under a different namespace, first, override static/js/custom-modules.js
Then, you can do the following, which imports your functions under Helpers, then exposes Helpers to the window.

import * as Helpers from './helpers.js';
global.Helpers = Helpers;

Please let me know if there are any issues with this approach!