work in progress: observable implementation using detailed change records

lib/templating.dart

 // Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 /** Common utility functions used by code generated by the dwc compiler. */
 library templating;
 
 import 'dart:async';
 import 'dart:html';
 import 'dart:uri';
 import 'package:web_ui/safe_html.dart';
 import 'package:web_ui/watcher.dart';
+import 'package:web_ui/observe.dart';
+export 'src/utils.dart' show setImmediate;
 
 /**
  * Take the value of a bound expression and creates an HTML node with its value.
  * Normally bindings are associated with text nodes, unless [binding] has the
  * [SafeHtml] type, in which case an html element is created for it.
  */
 Node nodeForBinding(binding) => binding is SafeHtml
     ? new Element.html(binding.toString()) : new Text(binding.toString());
 
 /**
@@ skipping 106 matching lines @@
  *   * binding classes with a string:
  *
  *         bindCssClasses(e, () => "${class1 != null ? class1 : ''} "
  *                                 "${class2 != null ? class2 : ''}");
  *
  *   * binding classes separately:
  *
  *         bindCssClasses(e, () => class1);
  *         bindCssClasses(e, () => class2);
  */
-WatcherDisposer bindCssClasses(Element elem, dynamic exp()) {
+ChangeUnobserver bindCssClasses(Element elem, dynamic exp()) {
   return watchAndInvoke(exp, (e) {
     updateCssClass(elem, false, e.oldValue);
     updateCssClass(elem, true, e.newValue);
   });
 }
 
 /** Bind the result of [exp] to the style attribute in [elem]. */
-WatcherDisposer bindStyle(Element elem, Map<String, String> exp()) {
+ChangeUnobserver bindStyle(Element elem, Map<String, String> exp()) {
   return watchAndInvoke(exp, (e) {
     if (e.oldValue is Map<String, String>) {
       var props = e.newValue;
       if (props is! Map<String, String>) props = const {};
       for (var property in e.oldValue.keys) {
         if (!props.containsKey(property)) {
           // Value will not be overwritten with new setting. Remove.
           elem.style.removeProperty(property);
         }
       }
@@ skipping 72 matching lines @@
 
   void remove() {
     _subscription.cancel();
     _subscription = null;
   }
 }
 
 /** Represents a generic data binding and a corresponding action. */
 class Binding extends TemplateItem {
   final exp;
-  final ValueWatcher action;
-  WatcherDisposer stopper;
+  final ChangeObserver action;
+  ChangeUnobserver stopper;
 
   Binding(this.exp, this.action);
 
   void create() {}
   void insert() {
     if (stopper != null) throw new StateError('binding already attached');
     stopper = watchAndInvoke(exp, action);
   }
   void remove() {
     stopper();
     stopper = null;
   }
 }
 
 /** Represents a binding to a style attribute. */
 class StyleAttrBinding extends TemplateItem {
   final exp;
   final Element elem;
-  WatcherDisposer stopper;
+  ChangeUnobserver stopper;
 
   StyleAttrBinding(this.elem, this.exp);
 
   void create() {}
   void insert() {
     if (stopper != null) throw new StateError('style binding already attached');
     stopper = bindStyle(elem, exp);
   }
   void remove() {
     stopper();
     stopper = null;
   }
 }
 
 /** Represents a binding to a class attribute. */
 class ClassAttrBinding extends TemplateItem {
   final Element elem;
   final exp;
-  WatcherDisposer stopper;
+  ChangeUnobserver stopper;
 
   ClassAttrBinding(this.elem, this.exp);
 
   void create() {}
   void insert() {
     if (stopper != null) throw new StateError('class binding already attached');
     stopper = bindCssClasses(elem, exp);
   }
   void remove() {
     stopper();
@@ skipping 14 matching lines @@
    * or from a DOM property (which is internally also a Dart expression).
    */
   final Getter getter;
 
   /**
    * Whether this is a binding that assigns a DOM attribute accepting URL
    * values. If so, the value assigned to the attribute needs to be sanitized.
    */
   final bool isUrl;
 
-  WatcherDisposer stopper;
+  ChangeUnobserver stopper;
 
   DomPropertyBinding(this.getter, this.setter, this.isUrl);
 
   void create() {}
   void insert() {
     if (stopper != null) throw new StateError('data binding already attached.');
     stopper = watchAndInvoke(getter, (e) {
       setter(isUrl ? sanitizeUri(e.newValue) : e.newValue);
     });
   }
@@ skipping 43 matching lines @@
   final List<Node> nodes = [];
 
   Template(this.node);
 
   /** Associate the event listener while this template is visible.  */
   void listen(Stream<Event> stream, EventListener listener) {
     children.add(new Listener(stream, (e) { listener(e); dispatch(); }));
   }
 
   /** Run [action] when [exp] changes (while this template is visible).  */
-  void bind(exp, ValueWatcher action) {
+  void bind(exp, ChangeObserver action) {
     children.add(new Binding(exp, action));
   }
 
   /** Create and bind a [Node] to [exp] while this template is visible. */
   Node contentBind(Function exp) {
     var bindNode = new Text('');
     children.add(new Binding(() => '${exp()}', (e) {
       bindNode = updateBinding(exp(), bindNode, e.newValue);
     }));
     return bindNode;
@@ skipping 92 matching lines @@
 // </tr>
 //
 // We can't necessarily rely on child position because of possible mutation,
 // unless we're willing to say that "if" requires a fixed number of children.
 // If that's the case, we need a way to check for this error case and alert the
 // developer.
 abstract class PlaceholderTemplate extends Template {
   /** Expression watch by this template (condition or loop expression). */
   final exp;
 
-  WatcherDisposer stopper;
+  ChangeUnobserver stopper;
 
   PlaceholderTemplate(Node reference, this.exp)
       : super(reference);
 
   void create() {}
 
   void insert() {
     super.create();
     if (nodes.length > 0) {
       var parent = node.parentNode;
@@ skipping 80 matching lines @@
 }
 
 /**
  * A template loop of the form `<td template iterate="x in list ">`. Unlike
  * [LoopTemplate], here we insert children directly then node annotated with the
  * template attribute.
  */
 class LoopTemplateInAttribute extends Template {
   final LoopIterationSetup iterSetup;
   final exp;
-  WatcherDisposer stopper;
+  ChangeUnobserver stopper;
 
   LoopTemplateInAttribute(Node node, this.exp, this.iterSetup) : super(node);
 
   void create() {}
 
   void insert() {
     stopper = watchAndInvoke(exp, (e) {
       _removeInternal();
       for (var x in e.newValue) {
         iterSetup(x, this);
       }
       super.create();
       node.nodes.addAll(nodes);
       super.insert();
     });
   }
 
   void _removeInternal() {
     super.remove();
     node.nodes.clear();
     nodes.clear();
   }
 
   void remove() {
     _removeInternal();
     stopper();
     stopper = null;
   }
 }