all imlementations using Angular all imlementations of Composition

a TypeScript implementation
of the Composition demo using Angular 



import {Component} from '@angular/core'

@Component({
  selector: '#app',
  template: `
    <field instruction="Enter name" (submission)="onSubmission($event)"></field>
    <p>Submitted name: {{submission}}</p>
  `
})
export class Form {
  submission: string = 'Steve'
  onSubmission(txt) {
    this.submission = txt;
  }
}

The same file in a composition helper implementation using CycleJS (10.0.5):

import xs from 'xstream'
import {div, p} from '@cycle/dom'
import Field from './field'
import withComponent from './extras'

function view ({childsinks: {submit$, DOM}}) {
  return xs.combine(submit$.startWith('Steve'), DOM).map(([submission, childvtree]) => div([
    childvtree,
    p('Submitted value: ' + submission)
  ]))
}

function Form (sources) {
  return {
    DOM: view(sources),
    instruction$: xs.of('Enter name')
  }
}

export default withComponent(Form, Field, 'instruction$')

The same file in an es6 implementation using Cyclow (0.4.0):

import {Block} from 'cyclow'
import Field from './field'

const Form = () => Block({
  components: {field: Field()},
  on: {
    init: () => [
      ['field.init', 'Enter name'],
      state => ({current: 'Steve'})
    ],
    'field.submission': submission => state => ({current: submission})
  },
  view: ({current}, {field}) => ({
    content: [
      field,
      {tag: 'p', content: `Submitted value: ${current}`}
    ],
    attrs: {id: 'app'}
  })
})

export default Form

The same file in a createClass implementation using React (15.2.0):

import React from 'react'
import Field from './field'

let Form = React.createClass({
  getInitialState: () => ({submission: 'Steve'}),
  onSubmission (txt) { this.setState({submission: txt}) },
  render () {
    return (
      <div>
        <Field instruction='Enter name' onSubmission={this.onSubmission} />
        <p>Submitted value: {this.state.submission}</p>
      </div>
    )
  }
})

export default Form