How to redraw a Component without clearing properties?

matteocontrini

Hi,
I've been fighting with Mithril.js for some hours, and I'm asking for help 😁

I'm having an issue when m.redraw() is called from within a Flarum Component. It appears that the call doesn't actually redraw anything most of the times, and when it does it recreates the whole Component from scratch, so all the proprerties on the component are lost.

This is a sample code for the component (full extension sample on GitHub here):

import Component from 'flarum/Component';

export default class Button extends Component {
    init() {
        console.log('init called');
        
        this.count = 1;
    }

    view() {
        console.log('redrawing. count: ' + this.count);

        return m('button', { onclick: this.inc.bind(this) }, this.count);
    }

    inc() {
        this.count++;
        m.redraw();
        
        console.log('inc called. count=' + this.count);
    }
}

Combined with:

extend(TextEditor.prototype, 'controlItems', function (items) {
    let button = new Button();
    items.add('redraw-test', button);
});

It adds a simple button near the "Post" button in the editor. When you click that button, it increments a component property and then asks for a redraw of the component, so that the updated value is shown in the button.

The thing is that it just doesn't work. Instead of redrawing the view, it appears that the whole Component instance is recreated, and new properties are set in init().

Am I missing something? I've looked at other extensions and components in flarum/core and I don't see any particular difference from my approach...

Thank you!

EDIT: fixed sample code

clarkwinkelmann

Not sure why the component would be re-created, but here are a few comments I can make:

First, calling m.redraw() in an onclick shouldn't make any difference, as any DOM event like that one triggers a redraw automatically. (I know it's like that in Mithril v1.x and I'm pretty sure it's also the case in v0.x`.

I'd suggest storing your state outside of the component itself, that way it's safe even if the component gets re-created. You could use a global variable or store it inside a Flarum object, like as a property on the forum object (app.forum.attribute('key')(value) or something like that, after having registred the new attribute via a JS Model extend call).

Normally the components shouldn't be destroyed if they stay in the same order. If not, key properties would be the solution, but I'm not sure whether Flarum makes use of these. Maybe there's something to find and contribute to core there.

matteocontrini

Thanks for your answer!

clarkwinkelmann First, calling m.redraw() in an onclick shouldn't make any difference, as any DOM event like that one triggers a redraw automatically

It could be, but Flarum core itself redraws the components even in DOM event handlers. The most similar example I could find is this one, in UploadImageButton.js. It extends Button instead of Component directly, but I don't think it should make much difference. There, in the upload() function (onclick handler) a property is set and then the component is redrawn:

L42-L43:

this.loading = true;
m.redraw();

clarkwinkelmann I'd suggest storing your state outside of the component itself, that way it's safe even if the component gets re-created. You could use a global variable or store it inside a Flarum object

That could be a solution but a bit of a hack in my opinion. There could be more than one instance of the same component on the same page, so it would be difficult to keep track of which one the data belongs too.

clarkwinkelmann If not, key properties would be the solution, but I'm not sure whether Flarum makes use of these

I don't know what they are 🤔

matteocontrini

Does anyone else have an idea why this isn't working? It seems a pretty basic thing that should just work 🧐

clarkwinkelmann

matteocontrini I just re-read your topic and I think I found your issue. To render the component you have to use MyComponent.component() instead of using new MyComponent. Your code is actually re-creating the Flarum component on each redraw, so even if Mithril re-uses the mithril component associated, you're loosing the Flarum component's properties everytime.

Here's an example where something like you do is achieved: https://github.com/flagrow/fonts/blob/02b45bff8e07afe1015910e6e44fe00aad90e812/js/src/admin/index.js#L20

matteocontrini

clarkwinkelmann awsome, that works! Thank you very much. It's even easier if I use JSX actually, so something like:

items.add('redraw-test', <Button />);

Thank you again.