Link to ES6 object does not work

[bartko-s]

Following code do this. You can add car to the list of cars. You can change manufacturer name. When I have defined items in state as ES6 classes then I cannot change the manufacturer name. With literal objects everything works fine. Is this bug or I do something wrong?

import React from 'react';
import ReactDOM from 'react-dom';
import Link from 'valuelink';
import { Input } from 'valuelink/tags';

class CarModel {
    constructor() {
        this.manufacturer = 'default';
    }
}

class Car extends React.Component {
    render() {
        let carLink = this.props.carLink;
        let val = carLink.value.manufacturer;
        return (
            <li><Input type="text" valueLink={ carLink.at('manufacturer') } /> { val }</li>
        )
    }
}

class CarList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            cars: []
        };
    }

    handleAdd() {
        let cars = this.state.cars;
        cars.push(new CarModel());

        this.setState({ cars })
    }

    render() {
        let cars = Link.state(this, 'cars').map((car, i) => (
            <Car key={ i } carLink={ car } />
        ));

        return (
            <div>
                <ul>{ cars }</ul>
                <button onClick={ this.handleAdd.bind(this) }>Add Car</button>
            </div>
        )
    }
}

ReactDOM.render(
    <CarList />,
    document.getElementById('root')
);

[gaperton]

Is this bug or I do something wrong?

It's the feature. When carLink.at('manufacturer') is updated, it assumes that carLink is the plain object or array because it needs to know how to properly clone it. That's how nested link update is done: it creates the copies of the parent chain so that setState or other state management libraries could detect that direct state member is changed using the shallow comparison.

Therefore, no classes as state members are supported. As this is not the way to go in a large application, we're at Verizon/Volicon are not using NestedLink alone, but as a part of NestedReact. Which replaces React's state with observable and serializable classes. https://github.com/Volicon/NestedReact

Here is an example. In order to get ES6 classes syntax you need to use "rc" version. It will be released soon.

https://github.com/Volicon/NestedReact/tree/develop/examples/checklistTree

[gaperton]

As an alternative, it is possible to create the fork of NestedLink to support immutable classes.

The easiest way to go is to add your own "helper". Put it in the third option to the switch (note that built-ins like Date should still go through the dummyHelper). Here:
https://github.com/Volicon/NestedLink/blob/master/valuelink.ts#L298

Helper is a combination of clone, map, and remove functions. That's what NestedLink must know how to do for your classes in order to operate properly. clone is essential. Others are needed only if you want to use corresponding operations in your classes.

I would just forward these operations to the object in your helper, and created the base class with such an operation. Generic "clone" operation can be implemented in the base class like this:

clone(){
    const copy = new this.constructor();
    Object.assign( copy, this );
    return copy;
}

In simple cases, it should work just fine.

[bartko-s]

ok. Thank you.