Overriding client-side js

razibal

I need to be able to customize some client-side js files - specifically, the public/src/ajaxify.js file in my custom theme. I run nodeBB within an iframe and I need to send some postMessages to the parent application depending on the api response(s).
What is the correct way to do this? Do I just create a customized file in my theme in public/ajaxify.js and load it in the scripts section in plugin.json? Will that automagically override the standard file? I realize that some of this can be done with hooks, but I guess I'm hoping that, in addition to plugins and hooks, there is a mechanism for overriding the 'standard' file(s).

julian

If you want to run custom code on every single page navigation, your best bet would be to listen for action:ajaxify.end

By that point, ajaxify.data would be repopulated with the new API response, and you can make your call as necessary. No need to update/change ajaxify.js

razibal

@julian I already run custom code on the action:ajaxify:end hook, I was looking for customization options 'closer to the metal' so to speak as I need to be able to handle errors in the api requests for rate-limiting and some other functionaility related to the parent application. I guess I should reword my question to be more generic as in "is it possible to override the client-side JS?", similar to how the server-side files can be over-ridden. Adding the customized cient js to the theme does work, but both files excecute, so its not really an override.

julian

Sure, if you want to intercept the logic so that you can run your own logic before the expected client-side js is executed, listen for the filter:script.load or static:script.init hooks.

The former passes in the scripts to be loaded/executed, giving you the opportunity to append/remove/replace as needed.

The latter lets you intercept the call to .init() just prior, and lets you override it if you'd like.

<baris>

Hmm those hooks won't let you override ajaxify.js though, what you can try is replacing ajaxify.loadData with your custom one.

// in your plugin client javascript
ajaxify.loadData = function (url, callback) {
  // custom implementation, copy code from core ajaxify.js loadData and modify to your needs
};

razibal

@baris That should work, I'll give it a shot.

I love the customizability of nodeBB. Particularly the ability to override templates and language files in the custom themes. It would be amazing if that capability could be extended to other file types as well just by placing the customized files in a folder structure that mimics the structure of the core files.