glortho

import React from 'react';
import { Api } from 'jetset';

function create( users ) {
  users
    .create({ name: 'foo' })
    .then( data => console.log( 'Successfully created', data ) );
}

function Users({ users }) {

glortho

const groupStyle = 'font-weight: normal; color: gray';
const stackStyle = 'color: gray';

function dispatchDecoratorFactory( ACTION ) {
  return function dispatchDecorator( target, key, descriptor ) {
    const fn = descriptor.value;
    descriptor.value = function decoratedMethod( ...args ) {
      if ( myModeFlag === 'debug' ) {
        console.groupCollapsed( `%c${target.constructor.name}.${key}(%O) -> ${ACTION}`, groupStyle, args );
        console.debug( `%c${( new Error() ).stack}`, stackStyle );

glortho

// Note: See one implementation of this here: https://gist.github.com/jedverity/458bc65fee43fb9873e1

@listenTo( MyStore )
class MyViewController extends React.Component {
  render() {
    const { fromMyStore } = this.props.MyStore;
  }
}

glortho

import React from 'react';
import autobind from 'autobind-decorator';

// Note: Assumes stores have a unique `key` prop and a `getState()` method

function listenTo( stores = [] ) {

  const storesArray = [].concat( stores );

  return function listenToDecorator( WrappedComponent ) {

glortho

// Note: examples below use https://gist.github.com/jedverity/b3e3a06761daefeca110

class MyActionCreator {
  @dispatch('SOME-ACTION')
  updateStore(data) {
    return data; // this will be dispatched with 'SOME-ACTION' as the actionType
  }
  @dispatch('SOME-ASYNC-ACTION')
  postData(data) {
    return MyApi.post('/url', data );

glortho

class MyComponent extends React.Component {
  @keydown('up')
  goUp(event) {
    event.preventDefault();
    this.setState({ index: -1 });
  }
}

// as a higher-order component
@keydown( 'up', 'down', 'shift+enter' )

glortho

class MyClass extends React.Component {
  @autobind
  myMethod() {
    console.log( `${this.props} works now` );
  }
}

@autobind
class MyClass extends React.Component {
  myMethod() {

glortho

/**
 * Usage:
 * 
 * import React from 'react';
 * import nullable from 'prop_nullable';
 * 
 * let myClass = React.createClass({
 *    propTypes: {
 *      myProp: nullable( React.PropTypes.string ).isRequired,
 *      myOtherProp: nullable( [React.PropTypes.string, React.PropTypes.number] )

glortho

/**
* Dispatch decorators for Flux (using ES2016 via Babel stage 1)
*
* There are some nice things about this:
*
* 1. Action types are specified at design time.
* 2. Any method's return value can be dispatched by prepending the decorator, without breaking up method definition itself.
* 3. Easier testing of action creator methods by forcing return value + simpler mocking of dispatch.
* 4. Easier grokking of all actions attached to a given class.
*/

glortho

#!/bin/sh
"exec" "twxec" "-e" "pare_data_structure" "$0" "$@"

def pare_data_structure(msg):
    pmsg = {}
    pmsg['body'] = msg['body']
    pmsg['link'] = msg['link']
    pmsg['umens'] = msg['umens']
    pmsg['actor'] = {'languages': msg['actor']['languages'],
                     'preferredUsername': msg['actor']['preferredUsername'],