Override/Extend Client-Side Core Search Module

wizseek

Dear NodeBB Community and team,

Like the configurability of NodeBB so far - server & client side hooks, helpers to setup page routes, override template, etc.

As the topic title suggested I am currently trying to override or extend the functionality of the core client Search module.

Different from the normal module that starts with forum/ these core modules are not initialized as part of action:ajaxify.end which means I am not able to use the method mentioned in this forum post.

Are there any other ways to override part or the whole core search module?

<baris>

For simple stuff you can use the hooks in public/src/modules/search.js, if you want to replace the whole thing I think you can do it by adding your own module in your plugin.json like below.

...
"modules": {
  "../modules/search.js": "public/mySearchModule.js"
}
...

If you go that route you will have to copy the entire search.js file from core and then modify it to your needs. Basically the file in the plugin will overwrite the one in core during build.

wizseek

Thanks @baris for your quick response!

I just tried adding modules but I am puzzled when I found my module is not in build/public/src/modules/.
I didn't see any relevant error message when my plugin builds, it says there is 1 AMD style module + the plugin is loaded.

The server side of the plugin looks to be working as my breakpoint hits the init() function of plugin's main JS file.

I used a different module name on purpose to check if it is built but the result is the same.
Wondering do I need to put the scripts and modules JS file inside a directory defined in staticDirs for the browser to have access?
Think that is not the case but I am not sure how to continue debug this.

I have included some of my code snippet below:

package.json

...
"main": "src/index.js",
...

plugin.json

...
"scripts": [
    "src/public/main.js"
],
"modules": {
    "searchv2.js": "src/public/modules/searchv2.js"
}
...

src/public/main.js

$(document).ready(() => {
  function setupSearchModule() {
    require(['searchv2'], (search) => {
      search.init();
    });
  }

  setupSearchModule();
});

src/public/modules/searchv2.js

define('searchv2', ['search'], (search) => {
  const Searchv2 = {};

  Searchv2.init = function () {
    if (!config.searchEnabled) {
      return;
    }

    search.showAndFocusInput();
  };

  return Searchv2;
});

src/index.js

...
const search = module.exports;

search.init = async function (params) {
  const { router } = params;
  const routeHelpers = require.main.require('./src/routes/helpers');
  ...
};
...

wizseek

@wizseek Maybe I should add that my goal for now is to override the behaviour of search.showAndFocusInput() to visit /search directly + remove the behaviour of hiding the button and display the search field when button is clicked.

I think I should be able archive one of the goals by using jquery to get the UI element of search/button component and change it's onclick to ajaxify.go('/search').

Can't think of how to override the showing and hiding behaviour of search components but I think if all else fail I will just override the whole search module as what you suggested. That is after I am able to have nodebb build the modules first

<baris>

I tried with the below plugin.json and I can see my module getting loaded..

"modules": {
		"searchv2.js": "public/searchv2.js"
	},

The path is to the file in the plugin folder.

define('searchv2', ['search'], (search) => {
	const Searchv2 = {};

	Searchv2.init = function () {
   	  console.log('v2 init');
		if (!config.searchEnabled) {
		return;
	  }

	  search.showAndFocusInput();
	};

	return Searchv2;
  });

You don't need staticDirs for doing this, thats for serving files via express static middleware.

wizseek

@baris Just found the root cause of the weird behaviour!

Turns out that there is a bug in my NodeBB dev startup scripts. One of the steps involves automatically symlink plugin packages for a more seamless plugin development.

The issue happens when the yarn link only happens after NodeBB build but before NodeBB start
Thus there is this weird behaviour of the plugin is loaded but its public assets are not built 🫠

Thank you for your pointers and help