Upgrading to Marty 0.9, React 0.13 and ES6/7

es6.md

import / export

let Constants = require('./constants');
let Something = {};
module.exports = Something;

for:

import Constants from './constants';
let Something = {};
default export Something;

get & set

class Bar {
  constructor() {
    this._something = 'blah'
  }
  
  get something() {
    return this._something
  }
  
  set something(val) {
    this._something = val
  }
}


let bar = new Bar()
console.log(bar.something)
bar.something = 'other'
console.log(bar.something)

marty-action-creators.md

marty action creators

let Constants = require('./constants');
let Marty = require('marty');

let ActionCreators = Marty.createActionCreators({
  add: Constants.MODULE_ADD()
});

module.exports = ActionCreators;

for:

import Constants from './constants';
import Marty from 'marty';

export class ActionCreators extends Marty.ActionCreators {
  add(something) {
    this.dispatch(Constants.MODULE_ADD, something);
  }
}

export default Marty.register(ActionCreators);

marty-constants.md

marty-constants

import Marty from 'marty';

export default Marty.createConstants([
  'MODULE_ADD'
]);

for:

import Marty from 'marty';

export default Marty.createConstants([
  'MODULE_ADD'
]);

marty-containers.md

marty containers

Replaces Marty.StateMixin.

TODO PureRenderMixin?

// container.js
let Component = require('./component.react');
let Mixin = require('./mixin');
let PureRenderMixin = require('react/addons').PureRenderMixin;
let React =require('react');

let Container = React.createClass({
  mixins: [
    Mixin,
    PureRenderMixin
  ],

  render: function() {
    return <Component {...this.state.toObject()} />;
  }
});

module.exports = Container;

// mixin.js
let Store = require('./store');
let Marty = require('marty');
let Immutable = require('Immutable');

let Mixin = Marty.createStateMixin({
  listenTo: [Store],

  getState: function() {
    return Immutable.Map({
      some: Store.getSome()
    });
  }
});

module.exports = Mixin;

for:

// container.js
import Component from './component.react'
import Store from './store'
import Immutable from 'Immutable'
import React from 'react'

let Container = Marty.createContainer(Component, {
  listenTo: Store,
  fetch: {
    some() { return Store.some }
  }
}

export default Container

Getting something like this?

An error occured when handling the DONE state of a fetch TypeError: type.toUpperCase is not a function {stack: (...), message: "type.toUpperCase is not a function"}message: "type.toUpperCase is not a function"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: Errorwhen @ when.js:45render @ createContainer.js:65ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:767ReactCompositeComponentMixin._renderValidatedComponent @ ReactCompositeComponent.js:793ReactPerf.measure.wrapper @ ReactPerf.js:70ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:227ReactPerf.measure.wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:192ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:287ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:197ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:237ReactPerf.measure.wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactMultiChild.Mixin._mountChildByNameAtIndex @ ReactMultiChild.js:400ReactMultiChild.Mixin._updateChildren @ ReactMultiChild.js:306ReactMultiChild.Mixin.updateChildren @ ReactMultiChild.js:251ReactDOMComponent.Mixin._updateDOMChildren @ ReactDOMComponent.js:466ReactDOMComponent.Mixin.updateComponent @ ReactDOMComponent.js:317ReactDOMComponent.Mixin.receiveComponent @ ReactDOMComponent.js:301ReactReconciler.receiveComponent @ ReactReconciler.js:97ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:726ReactCompositeComponentMixin

You probably missed the Component in your createContainer call.

Check out that it reads:

let Container = Marty.createContainer(Component, {
  // ...
});

instead of:

let Container = Marty.createContainer({
  // ...
});

marty-stores

`TODO` setters should work for handlers?

So this should work:

```
class Store extends Marty.Store {
  constructor(options) {
    super(options)
    
    this.id = 'Store'; // Make sure you set your id!
    
    this.handlers = {
      event: Constants.EVENT,
      anotherEvent: Constants.ANOTHER_EVENT
    }
  }
  
  set event(something) {
    this.state = this.state.set('something', something)
  }
  
  anotherEvent(something) {
    this.state = this.state.set('another', something)
  }
}
```

module-index.md

module index

module.exports = {
  ActionCreators: require('./action-creators'),
  Component: require('./component.react'),
  Constants: require('./constants'),
  Container: require('./container.react'),
  Store: require('./store')
};

for:

export { default as ActionCreators } from './action-creators'
export { default as Component } from './component'
export { default as Container } from './container'
export { default as Constants } from './constants'
export { default as Store } from './store'

Imports work as follow then:

Instead of:

let module = require('./module');

you do:

import * as Module from './module';

react.md

react

overall

• replace this.getDOMNode for React.findDOMNode(this)
• importing transitions:

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

let ReactCSSTransitionGroup = require('react/addons').ReactCSSTransitionGroup;

for:

import React from 'react'
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup'

TODO can we get away with not having to convert immutables toObject() in, say:

  render() {
    return <Component {...this.state.toObject()} />;
  }

component

let React = require('react');

let Component = React.createClass({
  props: {
    some: React.PropTypes.string.isRequired
  },
  
  render: function() {
    return <div onClick={this.doSomething}>this.props.some</div>;
  },

  doSomething: function() {
    // do something
  }
});

module.exports = Component;

for:

import React from 'react';

export default class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  
  render() {
    return <div onClick={this.doSomething}>this.props.some</div>;
  }

  doSomething() {
    // do something
  }
});

Component.propTypes = {
  some: React.PropTypes.string.isRequired
};