Merge pull request #150 from Kanaye/master

Debugging enhancments (custom Messages and more )

Author: Kanaye

build/tasks/debug.js

@@ -9,6 +9,8 @@ module.exports = function (grunt) {
   grunt.registerTask('debug', function () {
     var code = grunt.file.read('dist/blocks.js');
     var queries = {};
+    var methods = {};
+    var methodId = 0;
     var parsed = API().parse(code, {
       onparse: function (data, node) {
         if (data.examples) {
@@ -62,12 +64,39 @@ module.exports = function (grunt) {
         if (func) {
           // FunctionExpression.BlockStatement.body(Array)
           var funcBody = func.body.body;
-          esprima.parse('blocks.debug && blocks.debug.checkArgs(' + toValueString(data) + ', Array.prototype.slice.call(arguments), {})').body.forEach(function (chunk) {
-            funcBody.unshift(chunk);
+          methods[++methodId] = data;
+          funcBody.unshift.apply(funcBody, esprima.parse('var __METHOD_ID = ' + methodId + '; if (blocks.debug && blocks.debug.available()) { blocks.debug.checkArgs(blocks.debug.methods[__METHOD_ID], Array.prototype.slice.call(arguments), {});}').body);
+        }
+      }
+    });
+
+    var estraverse = require('estraverse');
+    var regexDebugMessage = /@debugMessage\((:?"|')(.*?)\1,?\s*(Error|Warning|Info)?\)/mi;
+    function insertMessageIfExsists(raw ,node, parent) {
+      var message = regexDebugMessage.exec(raw);
+      if (message) {
+        var debugChunks =  esprima.parse('blocks.debug.throwMessage(\'' + message[2] + '\', blocks.debug.methods[__METHOD_ID] || null ' + (message[3] ? ',\'' + message[3] + '\'' : '') + ');' ).body;
+        debugChunks.unshift(parent.body.indexOf(node));
+        debugChunks.unshift(0);
+        parent.body.splice.apply(parent.body, debugChunks);
+      }
+    }
+    estraverse.traverse(parsed.parseTree(), {
+      enter: function (node, parent) {
+        if (node.trailingComments) {
+          node.trailingComments.forEach(function (comment) {
+           insertMessageIfExsists(comment.value, node, parent);
+          });
+        }
+
+        if (node.leadingComments) {
+          node.leadingComments.forEach(function (comment) {
+            insertMessageIfExsists(comment.value, node, parent);
           });
         }
       }
     });
+
     var targetCode = escodegen.generate(parsed.parseTree(), {
       format: {
         indent: {
@@ -79,8 +108,9 @@ module.exports = function (grunt) {
       comment: true
     });
 
+
     targetCode = insertSourceCode(targetCode, grunt.file.read('lib/blocks/jsdebug.js'));
-    targetCode = insertSourceCode(targetCode, 'blocks.debug.queries = ' + toValueString(queries));
+    targetCode = insertSourceCode(targetCode, 'blocks.debug.queries = ' + toValueString(queries) + '; blocks.debug.methods = ' + toValueString(methods) + ';');
     // enable blocks.debug after the framework initialized completly (jsdebug uses some functions that aren't initialized when they are needed the first time)
     targetCode = insertSourceCode(targetCode, 'blocks.debug.enabled = true;', true);
     grunt.file.write('dist/blocks.js', targetCode);

lib/blocks/jsdebug.js

@@ -20,6 +20,9 @@ blocks.debug = {
   addType: function (name, checkCallback) {
     customTypes[name.toLowerCase()] = checkCallback;
   },
+  available: function () {
+    return blocks.debug.enabled && !blocks.debug.executing && blocks.debug.paused === 0;
+  },
   paused: 0,
   checkArgs: debugFunc(function (method, args, options) {
     if (!blocks.debug.enabled) {
@@ -37,6 +40,44 @@ blocks.debug = {
     blocks.debug.printErrors(method, args, options, errors);
   }),
 
+  throwMessage: debugFunc(function(errorMessage, method, style) {
+    if (!errorMessage) return;
+
+    var type = typeof style == 'string' ? style : 'Info';
+
+    if (!style || typeof style != 'object') {
+        style = defaultStyles[type.toLowerCase()];
+    }
+
+    var message = blocks.debug.Message();
+
+    message.addSpan(type, style).addText(' in ');
+
+    // No method => No name and no usage, so we at least print a stack trace
+    if (!method) {
+      message.addText('unspecified method - ')
+        .addText(errorMessage);
+
+      message.beginCollapsedGroup();
+
+      message.addText('Stack trace:')
+        .newLine()
+        .addText(new Error().stack);
+
+      message.endGroup();
+    }
+
+    // Print method name, error message and add usage
+    if (method) {
+      message.addSpan(method.name + '()', {background: '#EEE'})
+        .addText(' - ')
+        .addText(errorMessage);
+      addMethodReference(message, method, true);
+    }
+
+    message.print();
+  }),
+
   printErrors: function (method, args, options, errors) {
     if (!blocks.debug.enabled) {
       return;
@@ -52,7 +93,7 @@ blocks.debug = {
     }
 
     message
-      .addSpan('Arguments mismatch:', { background: 'yellow'})
+      .addSpan('Arguments mismatch:', defaultStyles.info)
       .addText(' ');
 
     if (one) {
@@ -95,10 +136,10 @@ blocks.debug = {
   queryNotExists: debugFunc(function (query, element) {
     var message = blocks.debug.Message();
     message.beginSpan({ 'font-weight': 'bold' });
-    message.addSpan('Warning:', { background: 'orange', padding: '0 3px' });
+    message.addSpan('Warning:', blocks.extend({}, defaultStyles.warning, {padding: '0 3px' }));
 
     message.addText(' ');
-    message.addSpan(query.name, { background: 'red', color: 'white' });
+    message.addSpan(query.name, defaultStyles.error);
     message.addSpan('(' + query.params.join(', ') + ')', { background: '#EEE' });
 
     message.addText(' - data-query ');
@@ -122,14 +163,14 @@ blocks.debug = {
 
     message.beginCollapsedGroup();
     message.beginSpan({ 'font-weight': 'bold' });
-    message.addSpan('Critical:', { background: 'red', color: 'white' });
+    message.addSpan('Critical:', defaultStyles.error);
     message.addText(' ');
     message.beginSpan({ background: '#EEE' });
     message.addText(query.name + '(');
     for (var i = 0; i < params.length; i++) {
       param = params[i];
       if (param == failedParameter) {
-        message.addSpan(param, { background: 'red', color: 'white' });
+        message.addSpan(param, defaultStyles.error);
       } else {
         message.addText(param);
       }
@@ -154,9 +195,9 @@ blocks.debug = {
     var message = new blocks.debug.Message();
 
     message.beginSpan({ 'font-weight': 'bold' });
-    message.addSpan('Critical:', { background: 'red', color: 'white' });
+    message.addSpan('Critical:', defaultStyles.error);
     message.addText(' ');
-    message.addSpan('{{' + expressionText + '}}', { background: 'red', color: 'white' });
+    message.addSpan('{{' + expressionText + '}}', defaultStyles.error);
     message.addText(' - exception thrown while executing expression');
     message.endSpan();
 
@@ -244,7 +285,7 @@ function addError(message, error, method, paramNames) {
   }
 
   message.beginSpan({
-    'background-color': '#EEE'
+    'background': '#EEE'
   });
 
   message.addText(method.name + '(');
@@ -258,11 +299,7 @@ function addError(message, error, method, paramNames) {
         }
         for (index = error.actual; index < error.expected; index++) {
           message
-            .beginSpan({
-              'background-color': 'red',
-              padding: '0 5px',
-              color: 'white'
-            })
+            .beginSpan(blocks.extend({}, defaultStyles.error, {  padding: '0 5px'}))
             .addText(paramNames[index] || '?')
             .endSpan();
           if (index != error.expected - 1) {
@@ -279,11 +316,7 @@ function addError(message, error, method, paramNames) {
           message.addText(', ');
         }
         for (index = error.expected; index < error.actual; index++) {
-          message.addSpan(paramNames[index], {
-            'background-color': 'red',
-            'text-decoration': 'line-through',
-            color: 'white'
-          });
+          message.addSpan(paramNames[index], blocks.extend({}, defaultStyles.error, {'text-decoration': 'line-through'}));
           if (index != error.actual - 1) {
             message.addText(', ');
           }
@@ -295,10 +328,7 @@ function addError(message, error, method, paramNames) {
       case 'param':
         for (index = 0; index < paramNames.length; index++) {
           if (method.params[index] == error.param) {
-            message.addSpan(paramNames[index], {
-              'background-color': 'red',
-              color: 'white'
-            });
+            message.addSpan(paramNames[index], defaultStyles.error);
           } else {
             message.addText(paramNames[index]);
           }
@@ -556,30 +586,6 @@ function addMethodSignature(message, method) {
   message.newLine();
 }
 
-function examples(method) {
-  var examples = method.examples;
-
-  if (examples) {
-    console.groupCollapsed('%cUsage examples', 'color: blue;');
-
-    for (var i = 0; i < examples.length; i++) {
-      console.log(examples[i].code);
-      if (i != examples.length - 1) {
-        console.log('-------------------------------');
-      }
-    }
-
-    console.groupEnd();
-  }
-}
-
-function params(method) {
-  var params = method.params;
-  for (var i = 0; i < params.length; i++) {
-    console.log('    ' + method.params[i].name + ': ' + method.params[i].description);
-  }
-}
-
 function hasArgumentsParam(method) {
   var params = method.params;
   for (var i = 0; i < params.length; i++) {
@@ -828,3 +834,16 @@ var highlightjs = {
     color: '#e7635f'
   }
 };
+
+var defaultStyles = {
+  warning: {
+    background: 'orange'
+  },
+  error: {
+    background: 'red',
+    color: 'white'
+  },
+  info: {
+    background: 'yellow'
+  }
+};

src/mvc/Application.js

@@ -261,6 +261,12 @@ define([
       if (arguments.length == 1) {
         return this._views[name];
       }
+
+      if (this._started) {
+        // @debugMessage('Views can not be constructed / added after the application has been started. Try to add your views synchronous before document.readyState is "complete".', Error);
+        return;
+      }
+
       if (blocks.isString(prototype)) {
         this._viewPrototypes[prototype] = this._createView(nestedViewPrototype);
         nestedViewPrototype.options.parentView = name;

src/query/DomQuery.js

@@ -216,7 +216,9 @@ define([
 
         if (VirtualElement.Is(element)) {
           if (VirtualComment.Is(element) && !method.supportsComments) {
-            // TODO: Should throw debug message
+            // @if DEBUG
+            blocks.debug.throwMessage('data-query ' + methods[i].name + ' does not support to be executed as on a comment.', blocks.debug.queries[methods[i].name], 'Error');
+            // @endif
             continue;
           }
 

src/query/Expression.js

@@ -9,7 +9,7 @@ define([
     Html: 0,
     ValueOnly: 2,
     NodeWise: 4,
-    
+
     Create: function (text, attributeName, element) {
       var index = -1;
       var endIndex = 0;
@@ -55,7 +55,7 @@ define([
 
       character = text.substring(endIndex);
       if (character) {
-        result.push({ 
+        result.push({
           value: character
         });
       }
@@ -95,15 +95,15 @@ define([
           if ((expression.nodeLength - lastNodeIndex) == 2) {
             value[expression.nodeLength - 2] = null;
           }
-          value[expression.nodeLength - 1] = tempValue; 
+          value[expression.nodeLength - 1] = tempValue;
         } else {
           value = Expression.Execute(context, elementData, expression[0], expression, type);
         }
       } else {
         while (++index < length) {
           lastNodeIndex = expression.nodeLength;
           chunk = expression[index];
-          
+
           if (chunk.value) {
             if (type !== Expression.ValueOnly && expression.nodeLength === 0) {
               expression.nodeLength++;
@@ -121,7 +121,7 @@ define([
           } else {
             value +=  tempValue;
           }
-        }  
+        }
       }
 
       expression.lastResult = value;
@@ -142,7 +142,7 @@ define([
       // jshint -W054
       // Disable JSHint error: The Function constructor is a form of eval
       func = parameterQueryCache[expression] = parameterQueryCache[expression] ||
-        new Function('c', 'with(c){with($this){ return ' + expression + '}}');
+        new Function('c', 'with(c){with($this){ return ' + expression + '}}'/*@if DEBUG */ + '//# sourceURL=' + encodeURI(entireExpression.text)/* @endif */);
 
       Observer.startObserving();
 

src/query/observable.js

@@ -37,9 +37,9 @@ define([
       } else if (!blocks.equals(value, currentValue, false) && Events.trigger(observable, 'changing', value, currentValue) !== false) {
         observable.update = blocks.noop;
         if (!observable._dependencyType) {
-          if (blocks.isArray(currentValue) && blocks.isArray(value) && observable.reset) {
+          if (blocks.isArray(currentValue) && (blocks.isArray(value) || !value) && observable.reset) {
             observable.reset(value);
-          } else {
+          } else if (!blocks.isArray(currentValue) && !observable.reset) {
             observable.__value__ = value;
           }
         } else if (observable._dependencyType == 2) {
@@ -368,6 +368,11 @@ define([
 
           array = blocks.unwrap(array);
 
+          if (!blocks.isArray(array) && !!array) {
+          //@debugMessage('Array-Observables can not be reseted to a non array type! Reset got aborted.', Warning);
+            return;
+          }
+
           var current = this.__value__;
           var chunkManager = this._chunkManager;
           var addCount = Math.max(array.length - current.length, 0);