Working hello world output.

HTML/client/shell.js

@@ -22,7 +22,7 @@ tc.shell.prototype = {
   // Hook into the given set of handlers.
   hook: function (handlers) {
     var self = this;
-    handlers = handlers || [];
+    handlers = handlers || {};
     handlers['shell'] = function (m,a) { self.shellHandler(m, a); };
     return handlers;
   },

HTML/index.html

@@ -24,6 +24,7 @@
 
   <script type="text/javascript" charset="utf-8" src="outputview/outputview.js"></script>
   <script type="text/javascript" charset="utf-8" src="outputview/outputnode.js"></script>
+  <script type="text/javascript" charset="utf-8" src="outputview/outputfactory.js"></script>
 
   <script type="text/javascript" charset="utf-8" src="commandview/commandview.js"></script>
   <script type="text/javascript" charset="utf-8" src="commandview/commandcontext.js"></script>

HTML/outputview/outputfactory.js

@@ -0,0 +1,55 @@
+(function ($) {
+
+var ov = termkit.outputView;
+
+/**
+ * Constructs node objects of the right class.
+ */
+ov.outputFactory = function () {
+
+};
+
+ov.outputFactory.prototype = {
+
+  construct: function (properties) {
+    var type = widgets[properties.type];
+    if (type) {
+      return new type(properties);
+    }
+  },
+
+};
+
+var widgets = ov.outputFactory.widgets = {};
+
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Raw output
+ */
+widgets.raw = function (properties) {
+
+  // Initialize node.
+  ov.outputNode.call(this, properties);
+
+  this.$contents = this.$element.find('> div.contents');
+};
+
+widgets.raw.prototype = $.extend(new ov.outputNode(), {
+
+  // Return active markup for this widget.
+  $markup: function () {
+    var $outputNode = $('<div class="termkitOutputNode widgetRaw"><div class="contents"></div></div>').data('controller', this);
+    var self = this;
+    return $outputNode;
+  },
+
+  // Update markup to match.
+  updateElement: function () {
+    this.$contents.text(this.contents);
+    this.$element.data('controller', this);
+  },
+
+});
+
+})(jQuery);

HTML/outputview/outputnode.js

@@ -11,15 +11,13 @@ ov.outputNode = function (properties) {
   for (i in properties) this[i] = properties[i];
 
   this.$element = this.$markup();
+  this.$children = $([]);
 
   this.children = [];
   this.parent = null;
   this.root = this;
 
-  this.contents = null;
   this.index = {};
-
-  this.updateElement();
 };
 
 ov.outputNode.prototype = {
@@ -31,29 +29,33 @@ ov.outputNode.prototype = {
     return $outputNode;
   },
 
+  // Update markup to match.
+  updateElement: function () {
+    this.$element.data('controller', this);
+  },
+
   // Pass-through length of array
   get length() {
     return this.children.length;
   },
 
   // Update children to match.
   updateChildren: function () {
-    // Detach children.
-    var $e = this.$element;
-    $e.children().detach();
+    var self = this;
 
-    // Re-attach based on contents array.
+    // Detach children.
+    this.$children.detach();
+    this.$children = $([]);
+
+    // Re-attach based on children array.
     $.each(this.children, function () {
-      $e.append(this.$element);
+      self.$children = self.$children.add(this.$element);
+      self.$element.append(this.$element);
+
+      this.updateElement();
     });
   },
 
-  // Update markup to match.
-  updateElement: function () {
-    this.$element.text(this.contents);
-    this.$element.data('controller', this);
-  },
-
   // Adopt node index.
   mergeIndex: function (node) {
     for (id in node.index) {
@@ -114,14 +116,14 @@ ov.outputNode.prototype = {
     }
     var args = [ index, 0 ];
 
-    // Add elements.
-    [].splice.apply(this.children, args);
-
     // Allow both single object and array.
     $.each(oneOrMany(collection), function () {
       self.adopt(this);
       args.push(this);
     });
+
+    // Add elements.
+    [].splice.apply(this.children, args);
   },
 
   // Remove node at index.

HTML/outputview/outputview.js

@@ -7,7 +7,8 @@ var ov = termkit.outputView = function () {
   var self = this;
 
   this.$element = this.$markup();
-
+
+  this.factory = new ov.outputFactory();
 };
 
 ov.prototype = {
@@ -25,24 +26,27 @@ ov.prototype = {
 
   // Update the element's markup in response to internal changes.
   updateElement: function () {
-
+    this.root.updateChildren();
   },
 
   // Hook into the given set of handlers.
   hook: function (handlers) {
     var self = this;
-    handlers = handlers || [];
+    handlers = handlers || {};
     handlers['view'] = function (m,a) { self.viewHandler(m, a); };
     return handlers;
   },
 
   // Handler for view.* invocations.
   viewHandler: function (method, args) {
+    var self = this;
+
     switch (method) {
       case 'view.add':
         var target = this.root.getNode(args.target);
-        var nodes = oneOrMany(args.contents).map(function (node) { return new ov.outputNode(node); });
+        var nodes = oneOrMany(args.objects).map(function (node) { return self.factory.construct(node); });
         target.add(nodes, args.offset);
+        this.updateElement();
         break;
 
       case 'view.remove':
@@ -53,6 +57,7 @@ ov.prototype = {
         else if (target.parent) {
           target.parent.remove(target);
         }
+        this.updateElement();
         break;
 
       case 'view.replace':

HTML/termkit.js

@@ -52,5 +52,5 @@ function bug(object, type) {
 }
 
 function oneOrMany(object) {
-  return (object.constructor == [].constructor) ? object : [ object ];
+  return (typeof object == 'object' && object.constructor == [].constructor) ? object : [ object ];
 }

Node/shell/shell.js

@@ -50,7 +50,7 @@ exports.shell = function (sequence, args, exit, router) {
 
 exports.shell.prototype = {
   run: function (sequence, args) {
-    this.send([sequence, 'run', args ]);
+    this.send([ sequence, 'run', args ]);
   },
 
   close: function () {
@@ -67,7 +67,7 @@ exports.shell.prototype = {
     while (this.buffer.indexOf("\u0000") >= 0) {
       var chunk = this.buffer.split("\u0000").shift();
       var data = JSON.parse(chunk);
-      console.log('processing ', data);
+
       this.router.send(this.id, data[0], data[1], data[2]);
       this.buffer = this.buffer.substring(chunk.length + 1);
     }