// Code from TodoMVC[Observable] example

$Entry() => new Entry();
class Entry extends Component<int> {
  updateState() {
    _entry = entryStore.get(data);

    // each time Component is invalidated, old subscription will be
    // automatically canceled, so we just register a new one when
    // something is changed.
    addTransientSubscription(_entry.onChange.listen(invalidate));

    return true;
  }
  ...
}

class LineView extends Component<RichLine> {
  List<VNode> _fragments;

  set data(RichLine newData) {
    if (identical(data, newData)) {
      if (data.isNewer(this)) {
        invalidate();
      }
    } else {
      data_ = newData;
      invalidate();
    }
  }
  ...
}

library main;

import 'dart:html' as html;
import 'package:uix/uix.dart';

// Function to create new Box instances, it is used as an argument for
// virtual nodes that represent components.
// In the future, when metaclasses will be implemented in Dart, it
// won't be necessary to create this functions. Right now it is just a
// convention that will make it easier to migrate in the future by
// removing '$' prefix in all 'vComponent' invocations.
$Box() => new Box();

// Component<T> type parameter is used to specify type of the input data
// (props in React terms).
class Box extends Component<String> {
  // Tag name of the root element for this Component. Default tag 'div'.
  final tag = 'span';

  // Each time when Component is invalidated (new data is passed,
  // or invalidate() method is called), it will be updated during
  // writeDom phase.
  //
  // API is designed this way intentionally to improve developer
  // experience and get better stack traces when something is
  // failing, that is why there is no method like render() in
  // React.
  updateView() {
    // updateRoot method is used to update internal representation
    // using Virtual DOM API.
    //
    // vRoot node is used to represent root element.
    //
    // Call operator is overloaded for all virtual nodes and is used
    // to assign children, it accepts Lists, Iterables, VNodes and
    // Strings.
    updateRoot(vRoot()(
      vElement('span')(data)
    ));
  }
}

class Main extends Component<String> {
  updateView() {
    updateRoot(vRoot()([
      vElement('span')('Hello '),
      vComponent($Box, data: data)
    ]));
  }
}

main() {
  // Initialize uix library.
  initUix();

  final component = new Main()..data = 'uix';

  // Inject component into document body.
  injectComponent(component, html.document.body);
}