react-reflow basic sample (typescript)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://jspm.io/system.js"></script>
    <script src="config.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script>
      System.import('app').catch(console.error.bind(console));
    </script>
  </body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Context from './context.ts';
import { Editor } from './components.ts';

ReactDOM.render((
  <div>
    <Context>
      <Editor/>
    </Context>
  </div>
), document.querySelector('#app'));

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true,
    jsx: 'react'
  },
  map: {
    'typescript': 'https://unpkg.com/typescript@2.2.2/lib/typescript.js',
    
    'rxjs': 'https://unpkg.com/rxjs@5.3.0/bundles/Rx.js',
    'react': 'https://unpkg.com/react@15.3.2/dist/react.min.js',
    'react-dom': 'https://unpkg.com/react-dom@15.3.2/dist/react-dom.min.js',
    'react-reflow': 'https://unpkg.com/react-reflow@0.6.2/lib/reflow.js',
    
    'app': './src',
  },
  packages: {
    app: {
      main: './main.tsx',
      defaultExtension: false,
    },
  }
});

export default (n: number) => {
  return { a: n };
}

export default (n: number) => {
  return { b: n };
}

export type EditorProps = {
  a?: number,
  b?: number,
  c?: number,
  updateA?: (n:number) => void,
  updateB?: (n:number) => void,
}

import { updateA, updateB } from '../actions.ts';

export default {
  mapState: observe => observe('a', 'b', 'c'),
  mapHandlers: ({dispatch}) => ({
    updateA: (n: number) => dispatch(updateA(n)),
    updateB: (n: number) => dispatch(updateB(n)),
  })
}

export { default as updateA } from './actions/updateA.ts';
export { default as updateB } from './actions/updateB.ts';

import { provide } from 'react-reflow';
import _Editor from './components/Editor.tsx';
import provideEditor from './providers/provideEditor.ts';

export const Editor = provide(provideEditor)(_Editor);

import React, { Component } from 'react';
import { EditorProps } from '../types.ts';

export default class extends Component<EditorProps, {}> {
  render() {
    return (
      <div>
        <input type="text" 
               defaultValue={this.props.a} 
               onChange={({target}) => this.props.updateA(Number(target.value))}/>
        +
        <input type="text" 
               defaultValue={this.props.b}
               onChange={({target}) => this.props.updateB(Number(target.value))}/>
        =
        <span>{this.props.c}</span>
      </div>
    )
  }
}

import { createContext } from 'react-reflow';

export default createContext({
  state: {
    a: 1,
    b: 2,
    c: observe => observe('a', 'b').map(({a, b}) => a + b),
  },
  
  startup: ({dispatch}) => {
    console.log('???');
  }
})