mosaico 1.0.0

data/vendor/assets/mosaico-0.16.0/mosaico/src/js/converter/stylesheet.js

@@ -0,0 +1,205 @@
+"use strict";
+
+// Parses CSS/stylesheets declarations -ko-blockdefs/-ko-themes
+// It returns KO bindings but doesn't depend on KO
+// Needs a bindingProvider
+// Also uses a blockDefsUpdater to update definitions while parsing the stylesheet.
+
+var cssParse = require("mensch/lib/parser.js");
+var console = require("console");
+var converterUtils = require("./utils.js");
+var elaborateDeclarations = require("./declarations.js");
+
+/* Temporary experimental code not used
+var _processStyleSheetRules_processThemes = function (bindingProvider, themeUpdater, rules) {
+  var sels, decls, i, j, k;
+  for( i = 0; i < rules.length; i++) {
+    if (rules[i].type == 'rule') {
+      sels = rules[i].selectors;
+      decls = rules[i].declarations;
+      for (j = 0; j < sels.length; j++) {
+        for (k = 0; k < decls.length; k++) if (decls[k].type == 'property') {
+          try {
+            var bindVal = bindingProvider('$'+decls[k].name);
+            themeUpdater(sels[j], decls[k].name, decls[k].value, bindVal);
+          } catch (e) {
+            console.log("Exception setting theme for", decls[k].name, decls[k].value, e);
+          }
+        }
+      }
+    }
+  }
+};
+*/
+
+var _processStyleSheetRules_processBlockDef = function(blockDefsUpdater, rules) {
+  var properties, namedProps, decls;
+  // name, contextName, globalStyle, themeOverride, extend, min, max, widget, options, category, variant, help, blockDescription, version, 
+  for (var i = 0; i < rules.length; i++) {
+    if (rules[i].type == 'rule') {
+      var sels = rules[i].selectors;
+      var hasDeclarations = false;
+      var hasPreviews = false;
+      for (var j = 0; j < sels.length; j++) {
+        if (sels[j].match(/:preview$/)) {
+          hasPreviews = true;
+        } else {
+          hasDeclarations = true;
+        }
+      }
+      if (hasPreviews && hasDeclarations) {
+        console.log("cannot mix selectors type (:preview and declarations) in @supports -ko-blockdefs ", sels);
+        throw "Cannot mix selectors type (:preview and declarations) in @supports -ko-blockdefs";
+      }
+      if (!hasPreviews && !hasDeclarations) {
+        console.log("cannot find known selectors in @supports -ko-blockdefs ", sels);
+        throw "Cannot find known selectors in @supports -ko-blockdefs";
+      }
+      if (hasDeclarations) {
+        properties = '';
+        namedProps = {};
+
+/*
+        name = undefined;
+        contextName = undefined;
+        globalStyle = undefined;
+        themeOverride = undefined;
+        extend = undefined;
+        max = undefined;
+        min = undefined;
+        widget = undefined;
+        options = undefined;
+        category = undefined;
+        variant = undefined;
+        help = undefined;
+        blockDescription = undefined;
+        version = undefined;
+        */
+        decls = rules[i].declarations;
+        for (var k = 0; k < decls.length; k++) if (decls[k].type == 'property') {
+          if (decls[k].name == 'label') namedProps.name = decls[k].value;
+          else if (decls[k].name == 'context') namedProps.contextName = decls[k].value;
+          else if (decls[k].name == 'properties') properties = decls[k].value;
+          else if (decls[k].name == 'theme') namedProps.globalStyle = '_theme_.' + decls[k].value;
+          else if (decls[k].name == 'themeOverride') namedProps.themeOverride = String(decls[k].value).toLowerCase() == 'true';
+          // else if (decls[k].name == 'extend') extend = decls[k].value;
+
+          // else if (decls[k].name == 'max') max = decls[k].value;
+          // else if (decls[k].name == 'min') min = decls[k].value;
+          // else if (decls[k].name == 'options') options = decls[k].value;
+
+          // else if (decls[k].name == 'widget') widget = decls[k].value;
+          // else if (decls[k].name == 'category') category = decls[k].value;
+          // else if (decls[k].name == 'variant') variant = decls[k].value;
+          // else if (decls[k].name == 'help') help = decls[k].value;
+          // else if (decls[k].name == 'blockDescription') blockDescription = decls[k].value;
+          // else if (decls[k].name == 'version') version = decls[k].value;
+          else {
+            namedProps[decls[k].name] = decls[k].value;
+            // TODO in past we detected unsupported properties, while now we simple push every declaration in a namedProperty.
+            // This make it harder to spot errors in declarations.
+            // console.warn("Unknown property processing @supports -ko-blockdefs ", decls[k], sels);
+          }
+        }
+        for (var l = 0; l < sels.length; l++) {
+          blockDefsUpdater(sels[l], properties, namedProps);
+        }
+      }
+      if (hasPreviews) {
+        for (var m = 0; m < sels.length; m++) {
+          var localBlockName = sels[m].substr(0, sels[m].indexOf(':'));
+          var previewBindings = rules[i].declarations;
+          blockDefsUpdater(localBlockName, undefined, { previewBindings: previewBindings });
+        }
+      }
+
+    } else {
+      // Ignoring comments or other content
+    }
+  }
+};
+
+var processStylesheetRules = function(style, rules, localWithBindingProvider, blockDefsUpdater, themeUpdater, templateUrlConverter, rootModelName, templateName) {
+  var newStyle = style;
+  var lastStart = null;
+
+  if (typeof rules == 'undefined') {
+    var styleSheet = cssParse(style, {
+      comments: true,
+      position: true
+    });
+    if (styleSheet.type != 'stylesheet' || typeof styleSheet.stylesheet == 'undefined') {
+      console.log("unable to process styleSheet", styleSheet);
+      throw "Unable to parse stylesheet";
+    }
+    rules = styleSheet.stylesheet.rules;
+  }
+
+  // WARN currenlty this parses rules in reverse order so that string replacements works using input "positions"
+  // otherwise it should compute new offsets on every replacement.
+  // But this create issues because of definitions being parsed in reverse order, so this is not a good idea.
+  // Sometimes, to work around this issues, you need to create 2 different <style> blocks.
+  var bindingProvider;
+
+  for (var i = rules.length - 1; i >= 0; i--) {
+    if (rules[i].type == 'supports' && rules[i].name == '-ko-blockdefs') {
+      _processStyleSheetRules_processBlockDef(blockDefsUpdater, rules[i].rules);
+      newStyle = converterUtils.removeStyle(newStyle, rules[i].position.start, lastStart, 0, 0, 0, '');
+      /* temporary experimental code not used
+      } else if (rules[i].type == 'supports' && rules[i].name == '-ko-themes') {
+        bindingProvider = localWithBindingProvider.bind(this, 'theme', '');
+        _processStyleSheetRules_processThemes(bindingProvider, themeUpdater, rules[i].rules);
+        newStyle = converterUtils.removeStyle(newStyle, rules[i].position.start, lastStart, 0, 0, 0, '');
+      */
+    } else if (rules[i].type == 'media' || rules[i].type == 'supports') {
+      newStyle = processStylesheetRules(newStyle, rules[i].rules, localWithBindingProvider, blockDefsUpdater, themeUpdater, templateUrlConverter, rootModelName, templateName);
+    } else if (rules[i].type == 'comment') {
+      // ignore comments
+    } else if (rules[i].type == 'rule') {
+      var sels = rules[i].selectors;
+      var newSel = "";
+      var foundBlockMatch = null;
+      for (var j = 0; j < sels.length; j++) {
+        if (newSel.length > 0) newSel += ", ";
+        var match = sels[j].match(/\[data-ko-block=([^ ]*)\]/);
+        if (match !== null) {
+          if (foundBlockMatch !== null && foundBlockMatch != match[1]) throw "Found multiple block-match attribute selectors: cannot translate it (" + foundBlockMatch + " vs " + match[1] + ")";
+          foundBlockMatch = match[1];
+        }
+        newSel += '<!-- ko text: templateMode ==\'wysiwyg\' ? \'#main-wysiwyg-area \' : \'\' --><!-- /ko -->' + sels[j];
+      }
+      if (foundBlockMatch) {
+        var loopPrefix = '<!-- ko foreach: $root.findObjectsOfType($data, \'' + foundBlockMatch + '\') -->';
+        var loopPostfix = '<!-- /ko -->';
+        var end = lastStart;
+        var spacing = " ";
+        if (rules[i].declarations.length > 0) {
+          if (rules[i].declarations[0].position.start.line != rules[i].position.end.line) {
+            spacing = "\n" + (new Array(rules[i].position.start.col)).join(" ");
+          }
+          end = rules[i].declarations[rules[i].declarations.length - 1].position.end;
+        }
+        if (end === null) newStyle += spacing + loopPostfix;
+        else if (end == lastStart) newStyle = converterUtils.removeStyle(newStyle, end, lastStart, 0, 0, 0, spacing + loopPostfix);
+        else newStyle = converterUtils.removeStyle(newStyle, end, lastStart, 0, 0, 0, spacing + '}' + spacing + loopPostfix);
+        newSel = loopPrefix + spacing + newSel.replace(new RegExp('\\[data-ko-block=' + foundBlockMatch + '\\]', 'g'), '<!-- ko text: \'#\'+id() -->' + foundBlockMatch + '<!-- /ko -->');
+
+        blockDefsUpdater(foundBlockMatch, '', { contextName: 'block' });
+      }
+      // TODO mensch update (using original mensch library we needed this line, while the patched one doesn't need this code)
+      // newSel += " {";
+      var localBlockName = foundBlockMatch ? foundBlockMatch : templateName;
+      bindingProvider = localWithBindingProvider.bind(this, localBlockName, '');
+      var elaboratedStyle = elaborateDeclarations(newStyle, rules[i].declarations, templateUrlConverter, bindingProvider);
+      if (elaboratedStyle !== null) newStyle = elaboratedStyle;
+
+      newStyle = converterUtils.removeStyle(newStyle, rules[i].position.start, rules[i].position.end, 0, 0, 0, newSel);
+    } else {
+      console.log("Unknown rule type", rules[i].type, "while parsing <style> rules");
+    }
+    lastStart = rules[i].position.start;
+  }
+  return newStyle;
+};
+
+module.exports = processStylesheetRules;

data/vendor/assets/mosaico-0.16.0/mosaico/src/js/converter/utils.js

@@ -0,0 +1,156 @@
+"use strict";
+var console = require('console');
+var jsep = require('jsep');
+
+jsep.addBinaryOp("or", 1);
+jsep.addBinaryOp("and", 2);
+jsep.addBinaryOp("eq", 6);
+jsep.addBinaryOp("neq", 6);
+jsep.addBinaryOp("lt", 7);
+jsep.addBinaryOp("lte", 7);
+jsep.addBinaryOp("gt", 7);
+jsep.addBinaryOp("gte", 7);
+
+var addSlashes = function(str) {
+  return str.replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\\0');
+};
+
+var removeStyle = function(style, startPos, endPos, skipRows, startOffset, endOffset, insert) {
+  var styleRows = style.split("\n");
+  var start = startOffset;
+  var end = endOffset;
+  for (var r = 1 + skipRows; r < startPos.line; r++) start += styleRows[r - 1 - skipRows].length + 1;
+  start += startPos.col;
+  if (endPos !== null) {
+    for (var r2 = 1 + skipRows; r2 < endPos.line; r2++) end += styleRows[r2 - 1 - skipRows].length + 1;
+    end += endPos.col;
+  } else end += style.length + 1;
+  var newStyle = style.substr(0, start - 1) + insert + style.substr(end - 1);
+  return newStyle;
+};
+
+var expressionGenerator = function(node, bindingProvider, defVal) {
+  function mapOperator(op) {
+    switch (op) {
+      case 'or':
+        return '||';
+      case 'and':
+        return '&&';
+      case 'lt':
+        return '<';
+      case 'lte':
+        return '<=';
+      case 'gt':
+        return '>';
+      case 'gte':
+        return '>=';
+      case 'eq':
+        return '==';
+      case 'neq':
+        return '!=';
+      default:
+        return op;
+    }
+  }
+
+  function gen(node, bindingProvider, lookupmember, defVal) {
+    if (typeof lookupmember == 'undefined') lookupmember = true;
+
+    if (typeof defVal !== 'undefined' && node.type !== "Identifier" && node.type !== "MemberExpression") console.log("Cannot apply default value to variable when using expressions");
+
+    if (node.type === "BinaryExpression" || node.type === "LogicalExpression") {
+      return '(' + gen(node.left, bindingProvider, lookupmember) + ' ' + mapOperator(node.operator) + ' ' + gen(node.right, bindingProvider, lookupmember) + ')';
+    } else if (node.type === 'CallExpression') {
+      var args = node.arguments.map(function(n) {
+        return gen(n, bindingProvider, lookupmember);
+      });
+      return gen(node.callee, bindingProvider, lookupmember) + '(' + args.join(', ') + ')';
+    } else if (node.type === "UnaryExpression") {
+      return node.operator + gen(node.argument, bindingProvider, lookupmember);
+    } else if (node.type == 'MemberExpression' && node.computed) {
+      throw "Unexpected computed member expression";
+      // return gen(node.object) + '[' + gen(node.property) + ']';
+    } else if (node.type == 'MemberExpression' && !node.computed) {
+      var me = gen(node.object, bindingProvider, false) + '.' + gen(node.property, bindingProvider, false);
+      if (lookupmember && node.object.name !== 'Math' && node.object.name !== 'Color') return bindingProvider(me, defVal) + '()';
+      return me;
+    } else if (node.type === "Literal") {
+      return node.raw;
+    } else if (node.type === 'Identifier') {
+      var id = node.name;
+      if (lookupmember) return bindingProvider(id, defVal) + '()';
+      else return id;
+    } else if (node.type === 'ConditionalExpression') {
+      return '(' + gen(node.test, bindingProvider, lookupmember) + ' ? ' + gen(node.consequent, bindingProvider, lookupmember) + ' : ' + gen(node.alternate, bindingProvider, lookupmember) + ')';
+    } else if (node.type === 'Compound') {
+      throw "Syntax error in expression: operator expected after " + gen(node.body[0], bindingProvider, false);
+    } else {
+      throw "Found an unsupported expression type: " + node.type;
+    }
+  }
+
+  return gen(node, bindingProvider, undefined, defVal);
+};
+
+var expressionBinding = function(expression, bindingProvider, defaultValue) {
+  var matches;
+  if (typeof defaultValue !== 'undefined' && defaultValue !== null) {
+    var check = expression.trim().replace(/@\[([^\]]+)\]|@([a-zA-Z0-9\._]+)\b/g, '###var###');
+    check = check.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+    if (check == '###var###') matches = [null, defaultValue];
+    else {
+      check = '^' + check.replace(/###var###/g, '(.+)') + '$';
+      matches = defaultValue.trim().match(new RegExp(check));
+      if (!matches) {
+        // TODO throw error?
+        console.log("Cannot find matches", matches, "for", defaultValue, expression, check, expression);
+        throw "Cannot find default value for " + expression + " in " + defaultValue;
+      }
+    }
+  }
+  try {
+    var vars = 0;
+    var result = "'" + expression.replace(/@\[([^\]]+)\]|@([a-zA-Z0-9\._]+)\b|(')/g, function(match, p1, p2, p3) {
+      // escaping..
+      if (p3) return "\\" + p3;
+      vars++;
+      var varName = p1 || p2;
+      var defVal;
+      if (matches) {
+        if (typeof matches[vars] !== 'undefined') {
+          defVal = matches[vars].trim();
+        } else {
+          console.log("ABZZZ Cannot find default value for", varName, "in", matches, "as", vars);
+        }
+      }
+      // in case we found p1 we are in a @[sequence] so we start an expression parser
+      if (p1) {
+        var parsetree = jsep(p1);
+        var gentree = expressionGenerator(parsetree, bindingProvider, defVal);
+        return "'+" + gentree + "+'";
+      }
+      return "'+" + bindingProvider(varName, defVal) + "()+'";
+    }) + "'";
+    result = result.replace(/(^|[^\\])''\+/g, '$1').replace(/\+''/g, '');
+
+    if (vars === 0 && result !== 'false' && result !== 'true') {
+      console.error("Unexpected expression with no valid @variable references", expression);
+    }
+    return result;
+  } catch (e) {
+    throw "Exception parsing expression " + expression + " " + e;
+  }
+};
+
+var conditionBinding = function(condition, bindingProvider) {
+  var parsetree = jsep(condition);
+  var gentree = expressionGenerator(parsetree, bindingProvider);
+  return gentree;
+};
+
+module.exports = {
+  addSlashes: addSlashes,
+  removeStyle: removeStyle,
+  conditionBinding: conditionBinding,
+  expressionBinding: expressionBinding
+};

data/vendor/assets/mosaico-0.16.0/mosaico/src/js/converter/wrapper.js

@@ -0,0 +1,308 @@
+"use strict";
+
+// This is complex code to handle "live" model instrumentation and dependency tracking.
+// This adds _wrap and _unwrap methods to the model and also instrument the block list so to automatically
+// wrap/upwrap objects on simple array methods (push, splice)
+
+var ko = require("knockout");
+var kowrap = require("knockout.wrap");
+var console = require("console");
+
+var _getOptionsObject = function(options) {
+  var optionsCouples = options.split('|');
+  var opts = {};
+  for (var i = 0; i < optionsCouples.length; i++) {
+    var opt = optionsCouples[i].split('=');
+    opts[opt[0]] = opt.length > 1 ? opt[1] : opt[0];
+  }
+  return opts;
+};
+
+// generate a computed variable handling the fallback to theme variable
+var _makeComputed = function(target, def, nullIfEqual, schemeSelector, themePath, themes) {
+  var res = ko.computed({
+    'read': function() {
+      var val = target();
+      if (val === null) {
+        var scheme = ko.utils.unwrapObservable(schemeSelector);
+        if (typeof scheme == 'undefined' || scheme == 'custom') {
+          return ko.utils.unwrapObservable(def);
+        } else {
+          return themes[scheme][themePath];
+        }
+      } else {
+        return val;
+      }
+    },
+    'write': function(value) {
+      var scheme = ko.utils.unwrapObservable(schemeSelector);
+      var defVal;
+      if (typeof scheme == 'undefined' || scheme == 'custom') {
+        defVal = ko.utils.peekObservable(def);
+      } else {
+        defVal = themes[scheme][themePath];
+      }
+
+      if (!!nullIfEqual) {
+        if (value == defVal) target(null);
+        else target(value);
+      } else {
+        var current = ko.utils.peekObservable(target);
+        if (value != defVal || current !== null) target(value);
+      }
+
+    }
+  });
+  return res;
+};
+
+var _nextVariantFunction = function(ko, prop, variants) {
+  var currentValue = ko.utils.unwrapObservable(prop);
+  var variantValue;
+
+  for (var i = 0; i < variants.length; i++) {
+    variantValue = ko.utils.peekObservable(variants[i]);
+    if (variantValue == currentValue) break;
+  }
+
+  if (i == variants.length) {
+    console.warn("Didn't find a variant!", prop, currentValue, variants);
+    i = variants.length - 1;
+  }
+
+  var nextVariant = i + 1;
+  if (nextVariant == variants.length) nextVariant = 0;
+  var nextValue = ko.utils.peekObservable(variants[nextVariant]);
+
+  prop(nextValue);
+};
+
+var _getVariants = function(def) {
+  var variantProp = def._variant;
+  var variantOptions;
+  if (typeof def[variantProp] !== 'object' || typeof def[variantProp]._widget === 'undefined' || (typeof def[variantProp]._options !== 'string' && def[variantProp]._widget !== 'boolean')) {
+    console.error("Unexpected variant declaration", variantProp, def[variantProp]);
+    throw "Unexpected variant declaration: cannot find property " + variantProp + " or its _options string and it is not a boolean";
+  }
+  // TODO I read the "keys" but this is not 100% correct because they are not garanteed to be sorted as in declaration
+  if (typeof def[variantProp]._options == 'string') {
+    variantOptions = Object.keys(_getOptionsObject(def[variantProp]._options));
+  } else {
+    variantOptions = [true, false];
+  }
+  return variantOptions;
+};
+
+var _makeComputedFunction = function(def, defs, thms, ko, contentModel, isContent, t) {
+  if (typeof def == 'undefined') {
+    if (typeof ko.utils.unwrapObservable(t).type === 'undefined') {
+      console.log("TODO ERROR Found a non-typed def ", def, t);
+      throw "Found a non-typed def " + def;
+    }
+    var type = ko.utils.unwrapObservable(ko.utils.unwrapObservable(t).type);
+    def = defs[type];
+    if (typeof def !== 'object') console.log("TODO ERROR Found a non-object def ", def, "for", type);
+  }
+
+  if (typeof contentModel == 'undefined' && typeof isContent != 'undefined' && isContent) {
+    contentModel = t;
+  }
+
+  var selfPath = '$root.content().';
+
+  var pp = def._globalStyles;
+  if (typeof pp != 'undefined')
+    for (var p in pp)
+      if (pp.hasOwnProperty(p)) {
+        var schemePathOrig = '$root.content().theme().scheme';
+        var schemePath, vm, path;
+
+        if (pp[p].substr(0, selfPath.length) == selfPath) {
+          path = pp[p].substr(selfPath.length);
+          vm = contentModel;
+        } else {
+          throw "UNEXPECTED globalStyle path (" + pp[p] + ") outside selfPath (" + selfPath + ")";
+        }
+        if (schemePathOrig.substr(0, selfPath.length) == selfPath) {
+          schemePath = schemePathOrig.substr(selfPath.length);
+        } else {
+          console.log("IS THIS CORRECT?", schemePathOrig, selfPath);
+          schemePath = schemePathOrig;
+        }
+
+        var schemeSelector = vm;
+
+        var pathParts = path.split('().');
+        var themePath = '';
+        var skip = true;
+        for (var i = 0; i < pathParts.length; i++) {
+          vm = ko.utils.unwrapObservable(vm)[pathParts[i]];
+          // ugly thing to find the path to the schema color property (sometimes we have theme.bodyTheme, some other we have content.theme.bodyTheme...)
+          if (skip) {
+            if (pathParts[i] == 'theme') skip = false;
+          } else {
+            if (themePath.length > 0) themePath += '.';
+            themePath += pathParts[i];
+          }
+        }
+
+        var schemeParts = schemePath.split('().');
+        for (var i3 = 0; i3 < schemeParts.length; i3++) {
+          schemeSelector = ko.utils.unwrapObservable(schemeSelector)[schemeParts[i3]];
+        }
+
+        var nullIfEqual = true;
+        var tParts = p.split('.');
+        var target = t;
+        for (var i2 = 0; i2 < tParts.length; i2++) {
+          target = ko.utils.unwrapObservable(target)[tParts[i2]];
+        }
+
+        if (!ko.isObservable(target)) throw "Unexpected non observable target " + p + "/" + themePath;
+
+        target._defaultComputed = _makeComputed(target, vm, nullIfEqual, schemeSelector, themePath, thms);
+      }
+
+  if (typeof def._variant != 'undefined') {
+    var pParts = def._variant.split('.');
+    // looks in t and not contentModel because variants are declared on single blocks.
+    var pTarget = t;
+    var pParent = ko.utils.unwrapObservable(t);
+    for (var i4 = 0; i4 < pParts.length; i4++) {
+      pTarget = ko.utils.unwrapObservable(pTarget)[pParts[i4]];
+    }
+    if (typeof pTarget._defaultComputed != 'undefined') {
+      console.log("Found variant on a style property: beware variants should be only used on content properties because they don't match the theme fallback behaviour", def._variant);
+      pTarget = pTarget._defaultComputed;
+    }
+    if (typeof pTarget == 'undefined') {
+      console.log("ERROR looking for variant target", def._variant, t);
+      throw "ERROR looking for variant target " + def._variant;
+    }
+    pParent._nextVariant = _nextVariantFunction.bind(pTarget, ko, pTarget, _getVariants(def));
+  }
+
+  for (var prop2 in def)
+    if (def.hasOwnProperty(prop2)) {
+      var val = def[prop2];
+      if (typeof val == 'object' && val !== null && typeof val._context != 'undefined' && val._context == 'block') {
+        var propVm = contentModel[prop2]();
+        var newVm = _makeComputedFunction(defs[prop2], defs, thms, ko, contentModel, isContent, propVm);
+        t[prop2](newVm);
+      } else if (typeof val == 'object' && val !== null && val.type == 'blocks') {
+        var mainVm = contentModel[prop2]();
+        var blocksVm = mainVm.blocks();
+        var oldBlock, blockType, newBlock;
+        for (var ib = 0; ib < blocksVm.length; ib++) {
+          oldBlock = ko.utils.unwrapObservable(blocksVm[ib]);
+          blockType = ko.utils.unwrapObservable(oldBlock.type);
+          newBlock = _makeComputedFunction(defs[blockType], defs, thms, ko, contentModel, isContent, oldBlock);
+          blocksVm[ib](newBlock);
+        }
+
+        var blocksObs = mainVm.blocks;
+
+        _augmentBlocksObservable(blocksObs, _blockInstrumentFunction.bind(mainVm, undefined, defs, thms, ko, undefined, contentModel, isContent));
+
+        contentModel[prop2]._wrap = _makeBlocksWrap.bind(contentModel[prop2], blocksObs._instrumentBlock);
+        contentModel[prop2]._unwrap = _unwrap.bind(contentModel[prop2]);
+      }
+    }
+
+  return t;
+};
+
+var _augmentBlocksObservable = function(blocksObs, instrument) {
+  blocksObs._instrumentBlock = instrument;
+  if (typeof blocksObs.origPush == 'undefined') {
+    blocksObs.origPush = blocksObs.push;
+    blocksObs.push = _makePush.bind(blocksObs);
+    blocksObs.origSplice = blocksObs.splice;
+    blocksObs.splice = _makeSplice.bind(blocksObs);
+  }
+};
+
+var _makeBlocksWrap = function(instrument, inputModel) {
+  var model = ko.toJS(inputModel);
+  var input = model.blocks;
+  model.blocks = [];
+  var res = kowrap.fromJS(model, undefined, true)();
+  _augmentBlocksObservable(res.blocks, instrument);
+  for (var i = 0; i < input.length; i++) {
+    var obj = ko.toJS(input[i]);
+    // console.log("_makeBlocksWrap set blockId", obj.id, 'block_'+i);
+    obj.id = 'block_' + i;
+    res.blocks.push(obj);
+  }
+  this(res);
+};
+
+var _makePush = function() {
+  if (arguments.length > 1) throw "Array push with multiple arguments not implemented";
+  // unwrap observable blocks, otherwise visibility (dependency) handling breaks
+  if (arguments.length > 0 && ko.isObservable(arguments[0])) {
+    if (typeof arguments[0]._unwrap == 'function') {
+      arguments[0] = arguments[0]._unwrap();
+    } else {
+      console.log("WARN: pushing observable with no _unwrap function (TODO remove me, expected condition)");
+    }
+  }
+  if (!ko.isObservable(arguments[0])) {
+    var instrumented = this._instrumentBlock(arguments[0]);
+    return this.origPush.apply(this, [instrumented]);
+  } else {
+    return this.origPush.apply(this, arguments);
+  }
+};
+
+var _makeSplice = function() {
+  if (arguments.length > 3) throw "Array splice with multiple objects not implemented";
+  if (arguments.length > 2 && ko.isObservable(arguments[2])) {
+    if (typeof arguments[2]._unwrap == 'function') {
+      arguments[2] = arguments[2]._unwrap();
+    } else {
+      console.log("WARN: splicing observable with no _unwrap function (TODO remove me, expected condition)");
+    }
+  }
+  if (arguments.length > 2 && !ko.isObservable(arguments[2])) {
+    var instrumented = this._instrumentBlock(arguments[2]);
+    return this.origSplice.apply(this, [arguments[0], arguments[1], instrumented]);
+  } else {
+    return this.origSplice.apply(this, arguments);
+  }
+};
+
+// def, defs and themes are bound in "_modelInstrument" while the next parameters are exposed by this module
+var _blockInstrumentFunction = function(def, defs, themes, knockout, self, modelContent, isContent, self2) {
+  // ugly: sometimes we have to bind content but not self, so we repeat self at the end as "self2"
+  if (typeof self == 'undefined') self = self2;
+
+  var computedFunctions;
+  computedFunctions = {
+    '': _makeComputedFunction.bind(self, def, defs, themes, knockout, modelContent, isContent)
+  };
+
+  var res = kowrap.fromJS(self, computedFunctions, true);
+  res._unwrap = _unwrap.bind(res);
+  return res;
+};
+
+var _wrap = function(instrument, unwrapped) {
+  var newContent = ko.utils.unwrapObservable(instrument(ko, unwrapped, undefined, true));
+  this(newContent);
+};
+
+var _unwrap = function() {
+  return ko.toJS(this);
+};
+
+var _modelInstrument = function(model, modelDef, defs) {
+  var _instrument = _blockInstrumentFunction.bind(undefined, modelDef, defs, defs['themes']);
+  var res = _instrument(ko, model, undefined, true);
+  // res._instrument = _instrument;
+  res._wrap = _wrap.bind(res, _instrument);
+  res._unwrap = _unwrap.bind(res);
+  return res;
+};
+
+module.exports = _modelInstrument;