Extend static methods not working

iPurpl3x

It seems not possible to extend (or override) static methods. I tried it with the static initProps(props) of flarum/tags/components/TagLinkButton and nothing happens, the extended code is never called.

clarkwinkelmann

iPurpl3x can you share your code ?

iPurpl3x

clarkwinkelmann Sure, here you go:

import { extend, override } from 'flarum/extend';
import TagLinkButton from 'flarum/tags/components/TagLinkButton';

export default function () {
	console.log('Will setup extend');
	extend(TagLinkButton.prototype, 'initProps', function () {
		console.log('extend TagLinkButton.prototype initProps');
	});
	console.log('Will setup override');
	override(TagLinkButton.prototype, 'initProps', function () {
		console.log('extend TagLinkButton.prototype initProps');
	});
}

When I load the All Discussions page (where these TagLinkButton components are rendered), I only the the two following logs:

Will setup extend
Will setup override

Adding a breakpoint to the actual initProps() method showed me that it is indeed executed.

datitisev

iPurpl3x Class prototypes are the properties & methods available to a class instance. To use the TagLinkButton.prototype.initProps that you're extending, that'd be called with (new TagLinkButton()).initProps().

To extend static methods, do not add .prototype at the end. extend(TagLinkButton, 'initProps', ...) should work.

iPurpl3x

datitisev OK I see. Yes this now seems to work.
My only issue now is that I don't get the original arguments in my extend callback. And the original static function does not return anything.

raafirivero

I'm sorry for asking so many questions these past few weeks but I come from a design-heavy background. And while I have been making websites for nearly 20 years, the SPA style is like learning a new language. I am trying to do something similar to the OP and am not understanding where I have made an error. Here is a simple example - the IndexPage has a navItems() function that has a font-awesome icon I would like to replace. The original function from IndexPage.js is as follows:

  navItems() {
    const items = new ItemList();
    const params = this.stickyParams();

    items.add(
      'allDiscussions',
      LinkButton.component({
        href: app.route('index', params),
        children: app.translator.trans('core.forum.index.all_discussions_link'),
        icon: 'far fa-comments',
      }),
      100
    );

    return items;
  }

My goal is to extend it, like so:

import { extend } from 'flarum/extend';
import IndexPage from 'flarum/components/IndexPage';

export default function () {
  extend(IndexPage, 'navItems', function() {
    console.log('extended');
    // do al the same stuff afterwards, with one change

I was careful not to use the .prototype method as datitisev mentioned and I've also attempted to have extend it using the new command like so: extend( (new IndexPage()).navItems(), function() {
– can someone please explain how to configure these lines of code so that I can replace an existing core function?

clarkwinkelmann

iPurpl3x you should be able to get the original arguments. That's

extend(class, method, function (returnedValue, originalArgument1, originalArgument2) {
  //
});

For methods that don't return anything, returnedValue will be undefined, but it will still be there.

iPurpl3x

clarkwinkelmann OK, my bad: I was checking the arguments object in the browser debugger and there was only one argument (the undefined returned value) but when I actually add the arguments to the function in my code, I get the original argument that I needed.

Thank you a lot for your patience and help.

askvortsov

raafirivero Are you looking to extend (do something else after the method has concluded, taking the original output as an argument), or override (replace it entirely, taking the original method as an argument)?

If extend, you're looking for:

import { extend } from 'flarum/extend';
import IndexPage from 'flarum/components/IndexPage';

export default function () {
  extend(IndexPage.prototype, 'navItems', function(items) {
    items.add('my-custom-item', ...);

askvortsov

raafirivero Here is a simple example - the IndexPage has a navItems() function that has a font-awesome icon I would like to replace.

extend(IndexPage.prototype, 'navItems', function(items) {
    item.replace('allDiscussions',
    LinkButton.component({
        href: app.route('index', params),
        children: app.translator.trans('core.forum.index.all_discussions_link'),
        icon: NEW_ICON_HERE,
      }),
}

raafirivero

askvortsov Thanks. I'd like to override some things for sure. So far I've been able to extend and add items to various parts of the UI - it's replacing and modifying existing ones that's given me the most trouble. The reason I'd like to override is that sometimes, for instance, a CSS class or other insignificant info is hidden in the body of the function and if I could override it I could just add things easily.

Simple example is the same IndexPage.js hardcodes a few CSS class names during its view() function. It would be much easier for me to just replace that function and add the one or two css classes there than to programatically select the node I want and do it there.

raafirivero

askvortsov For a more complex example: the real comment icon I'm trying to replace is the one on the DiscussionListItem.js - on the DiscussionListItem-count span. Another font-awesome icon. There is no mention of the comment icon on the DiscussionListItem.js page, only icon('fas fa-check') which gets inserted as its hover state. It would be much easier for me to replace the whole <span segment than to keep fishing for the icon.

askvortsov

Agreed that it's a bit of a pain to edit stuff in the JSX tree. To override the method, try:

import { override } from 'flarum/extend';

import IndexPage from 'flarum/components/IndexPage';

export default function () {
  override(IndexPage.prototype, 'view', function() {}
}

askvortsov

That icon is actually applied via CSS (you'll see if you inspect element on it). Adding in custom css to use a different icon should get the job done

raafirivero

askvortsov Awesome. last thing in this vein: there are a few CSS selectors coming from Flarum's core that have the !important flag. I'd rather just add my own class to the .app container and not have to get into an !important battle every time I want to change something. Looks like the body class is set in the init() function of IndexPage.js - is the best way to add my class to replace init() with the methods described above?

askvortsov

For this one, you could probably even extend init(), with your only line of code in the closure being this.bodyClass = YOUR_CLASS