Observable extended array

[Kukkimonsuta]

I've got follwing class:

class CollectionPage<T> extends Array<T> {
    constructor(data: Array<T>, page: number, pageCount: number) {
        super();

        this.page = page;
        this.pageCount = pageCount;

        this.push.apply(this, data);
    }

    page: number;
    pageCount: number;
}

Is there a way to transform instance of this class into an observable array while keeping both extra properties?

[andykog]

To achieve this behaviour you have to extend mobx internal class ObservableArray, but you can't. Instead I would use something like

class CollectionPage<T> {
    @observable data: IObservableArray<T>
    @observable page: number
    @observable pageCount: number

    constructor(data: T[], page: number, pageCount: number) {
        this.data = observable(data);
        this.page = page;
        this.pageCount = pageCount;
    }
}

[Kukkimonsuta]

Allright, I suppose there are no plans to add support for extending ObservableArray? If not, please close this.

[andykog]

@mweststrate

[mweststrate]

Nope, it is not a much requested feature and might make other generic functionality harder in general.

[mweststrate]

No, observable array will actually be gone in the future in favor of real arrays with proxies. So that brings you back to what you should do: extend the Array class. .... .... Which is not possible in javascript. (Well, it is limited)

…

On di 2 jan. 2018 17:05 Francesco ***@***.***> wrote: No hope? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#456 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhMGNWJT4dXr0IlNbrLfmzw-gMAXPks5tGlO9gaJpZM4JathS> .

[francesco-carrella]

Thanks for the answer, I got the point.
It would be amazing to create your own iterable & observable class but javascript has limitation in that sense :/

[Kukkimonsuta]

Actually doesn't that mean that you can create own observable iterable once proxy overlords come to us?

class CollectionPage extends Array {
    constructor(data, page, pageCount) {
        super();

        this.page = page;
        this.pageCount = pageCount;

        this.push.apply(this, data);
    }
}

var inst = new CollectionPage(["cookies", "foos", "bars"], 0, 5);
var prox = new Proxy(inst, { 
    set: function (obj, prop, value) { 
        console.log('change', obj, prop, value); obj[prop] = value;
        return true;
    } 
});

console.log(inst);

prox[1] = "milk";
prox.page = 3;
prox.pop();
prox.push("more milk");

console.log(inst);

This works fine in chrome console right now, so I'd expect mobx to do it's magic and react to changes on both array values and page, pageCount properties.