examples/observer.html

<!--
// Copyright (C) 2011-2012 Software Languages Lab, Vrije Universiteit Brussel
// This code is dual-licensed under both the Apache License and the MPL

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/* Version: MPL 1.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * The Original Code is a demo of the Observe strawman
 *
 * The Initial Developer of the Original Code is
 * Tom Van Cutsem, Vrije Universiteit Brussel.
 * Portions created by the Initial Developer are Copyright (C) 2011-2012
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s):
 *
 */
-->

<!--
  This is a demo of the prototype implementation of the "Observe strawman proposal"
  at http://wiki.ecmascript.org/doku.php?id=strawman:observe
  as proposed by Rafael Weinstein, Erik Arvidsson and others
  
  Tested on:
  - Firefox 13
  - Chrome 20 (with experimental JS flag turned on).
-->

<html>
<head>
	<title>Observer Example</title>
</head>
<script src="../reflect.js"></script> 
<script src="observer.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>
// Observer module is a function that takes a global Object on which to install
// the necessary methods, and returns a "deliver" function.
// The "deliver" function should be called in a separate turn to deliver
// pending change records
var deliver = Observer(Object);

function assert(bool, msg) {
  var div = $("<div/>")
    .css('color', bool ? 'green' : 'red')
    .text(msg);
  $("#output").append(div);
}

// == Unit tests and page set-up ==

$(document).ready(function () {
  $('#deliver').click(deliver);
  
  var observableTarget = {};
  
  // Tests below taken from
  // http://wiki.ecmascript.org/doku.php?id=strawman:observe
  
  function observer(records) {
    var record;
    console.log(records);

    assert(records.length === 6, "expected 6 changes");
    
    /*{
      "type": "new",
      "object": o,
      "name": "x"
    },*/
    record = records[0];
    assert(record.type === "new", "0: type");
    assert(record.object === observableTarget, "0: target");
    assert(record.name === "x", "0: name");
    
    /*{
      "type": "updated",
      "object": o,
      "name": "x",
      "oldValue": 1
    },*/
    record = records[1];
    assert(record.type === "updated", "1: type");
    assert(record.object === observableTarget, "1: target");
    assert(record.name === "x", "1: name");
    assert(record.oldValue === 1, "1: oldValue");
    
    /*{
      "type": "new"
      "object": o,
      "name": "y"
    },*/
    record = records[2];
    assert(record.type === "new", "2: type");
    assert(record.object === observableTarget, "2: target");
    assert(record.name === "y", "2: name");
    
    /*{
      "type": "reconfigured",
      "object": o,
      "name": "x"
    },*/
    record = records[3];
    assert(record.type === "reconfigured", "3: type");
    assert(record.object === observableTarget, "3: target");
    assert(record.name === "x", "3: name");
        
    /*{
      "type": "new",
      "object": o,
      "name": "toString"
    },*/
    record = records[4];
    assert(record.type === "new", "4: type");
    assert(record.object === observableTarget, "4: target");
    assert(record.name === "toString", "4: name");
    
    /*{
      "type": "deleted",
      "object": o,
      "name": "x"
      // "oldValue" will only be present if the deleted property was a data property.
    }*/
    record = records[5];
    assert(record.type === "deleted", "5: type");
    assert(record.object === observableTarget, "5: target");
    assert(record.name === "x", "5: name");
  }

  var o = Object.createObservable(observableTarget);
  var o2 = {}
  Object.observe(o, observer);

  o.x = 1;
  o2.x = 2; // doesn't notify
  o.x = 3;
  o.y = 4;
  var tmp = 5;
  Object.defineProperty(o, "x",
    { get: function () { return tmp; },
      set: function (v) { tmp = v; },
      // FIXME: added due to bug in Firefox that auto-completes descriptors
      // https://bugzilla.mozilla.org/show_bug.cgi?id=601329
      configurable: true,
      enumerable: true });
  o.x = 6; // Doesn't notify
  o.toString = 7;
  delete o.x;
  Object.unobserve(o, observer);
  o.y = 8; // Doesn't notify
    
  assert(true, "tests done, press button to get notifications");
  
});
</script>

<body>
  <button id="deliver">Click to deliver all pending change records</button>
  <div id="output"></div>
</body>
</html>