@danielkalen/simplybind/comparison/dist/ReactJS@15.3.1/test.js

Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.

new TestSuite({
  'title': 'Input Update',
  'subtitle': 'Update the value of an input field 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue, input;
    _ = this;
    currentValue = 0;
    this.obj = {
      'prop': 'value'
    };
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    input = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        return React.DOM.input({
          'value': this.state.prop
        });
      },
      componentWillMount: function() {
        return _.input = this;
      }
    });
    ReactDOM.render(React.createElement(input), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.input;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.input.setState({
      'prop': this.getNewValue()
    });
  }
});

new TestSuite({
  'title': 'Input x100 Update',
  'subtitle': 'Update the value of 100 input fields 1,000 times',
  'measureMethod': 'sync',
  'warmUps': 10,
  'timesToRun': 1000,
  'setupFn': function(container$) {
    var _, currentValue, input;
    _ = this;
    currentValue = 0;
    this.obj = {
      'prop': 'value'
    };
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    input = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        var i, inputs;
        inputs = (function() {
          var j, results;
          results = [];
          for (i = j = 1; j <= 100; i = ++j) {
            results.push(React.DOM.input({
              'value': this.state.prop
            }));
          }
          return results;
        }).call(this);
        return React.DOM.div(null, inputs);
      },
      componentWillMount: function() {
        return _.input = this;
      }
    });
    ReactDOM.render(React.createElement(input), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.input;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.input.setState({
      'prop': this.getNewValue()
    });
  }
});

new TestSuite({
  'title': 'Input Transform',
  'subtitle': 'Update the value of an input field 10,000 times and apply a transform function',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue, input;
    _ = this;
    currentValue = 0;
    this.obj = {
      'prop': 'value'
    };
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    this.transform = function(value) {
      return value.toUpperCase();
    };
    input = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        return React.DOM.input({
          'value': _.transform(this.state.prop)
        });
      },
      componentWillMount: function() {
        return _.input = this;
      }
    });
    ReactDOM.render(React.createElement(input), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.input;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.input.setState({
      'prop': this.getNewValue()
    });
  }
});

new TestSuite({
  'title': 'Div HTML Update',
  'subtitle': 'Update the content of a div 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue, div;
    _ = this;
    currentValue = 0;
    this.obj = {
      'prop': 'value'
    };
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    div = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        return React.DOM.div({
          'dangerouslySetInnerHTML': {
            __html: this.state.prop
          }
        });
      },
      componentWillMount: function() {
        return _.div = this;
      }
    });
    ReactDOM.render(React.createElement(div), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.div;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.div.setState({
      'prop': this.getNewValue()
    });
  }
});

new TestSuite({
  'title': 'Div HTML Same Update',
  'subtitle': 'Update the content of a div with the same value 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue, div;
    _ = this;
    currentValue = 0;
    this.obj = {
      'prop': 'value'
    };
    div = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        return React.DOM.div({
          'dangerouslySetInnerHTML': {
            __html: this.state.prop
          }
        });
      },
      componentWillMount: function() {
        return _.div = this;
      }
    });
    ReactDOM.render(React.createElement(div), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.div;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.div.setState({
      'prop': 'value'
    });
  }
});

new TestSuite({
  'title': 'Div HTML Placeholder',
  'subtitle': 'Update a placeholder in the content of a div 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue, div;
    _ = this;
    currentValue = 0;
    this.obj = {
      'prop': 'value'
    };
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    div = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        return React.DOM.div({
          'dangerouslySetInnerHTML': {
            __html: 'Current ' + this.state.prop + ' Works.'
          }
        });
      },
      componentWillMount: function() {
        return _.div = this;
      }
    });
    ReactDOM.render(React.createElement(div), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.div;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.div.setState({
      'prop': this.getNewValue()
    });
  }
});

new TestSuite({
  'title': 'Div HTML 250 Placeholders',
  'subtitle': 'Update 250 placeholders in the content of a div 1,000 times',
  'measureMethod': 'sync',
  'warmUps': 100,
  'timesToRun': 1000,
  'setupFn': function(container$) {
    var _, currentValue, div;
    _ = this;
    currentValue = 0;
    this.obj = {
      'prop': 'value'
    };
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    div = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        return React.DOM.div({
          'dangerouslySetInnerHTML': {
            __html: (this.state.prop + ' ').repeat(250)
          }
        });
      },
      componentWillMount: function() {
        return _.div = this;
      }
    });
    ReactDOM.render(React.createElement(div), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.div;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.div.setState({
      'prop': this.getNewValue()
    });
  }
});

new TestSuite({
  'title': 'Div Text Update',
  'subtitle': 'Update the textContent of a div 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue, div;
    _ = this;
    currentValue = 0;
    this.obj = {
      'prop': 'value'
    };
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    div = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        return React.DOM.div(null, this.state.prop);
      },
      componentWillMount: function() {
        return _.div = this;
      }
    });
    ReactDOM.render(React.createElement(div), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.div;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.div.setState({
      'prop': this.getNewValue()
    });
  }
});

new TestSuite({
  'title': 'Div Text Placeholder',
  'subtitle': 'Update a placeholder in the textContent of a div 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue, div;
    _ = this;
    currentValue = 0;
    this.obj = {
      'prop': 'value'
    };
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    div = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        return React.DOM.div(null, 'Current ' + this.state.prop + ' Works.');
      },
      componentWillMount: function() {
        return _.div = this;
      }
    });
    ReactDOM.render(React.createElement(div), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.div;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.div.setState({
      'prop': this.getNewValue()
    });
  }
});

new TestSuite({
  'title': 'Create 1k DOM Els',
  'subtitle': 'Create 1000 elements from array & insert into a div',
  'measureMethod': 'sync',
  'warmUps': 10,
  'timesToRun': 10,
  'setupFn': function(container$) {
    var _, masterDiv;
    this.obj = {
      'divs': []
    };
    _ = this;
    masterDiv = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        return React.DOM.div(null, this.state.divs.map(function(itemValue) {
          return React.DOM.div(null, itemValue);
        }));
      },
      componentWillMount: function() {
        return _.masterDiv = this;
      }
    });
    ReactDOM.render(React.createElement(masterDiv), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.masterDiv;
    return delete this.getNewValue;
  },
  'testFn': function() {
    var divs, i;
    divs = (function() {
      var j, results;
      results = [];
      for (i = j = 1; j <= 1000; i = ++j) {
        results.push('value');
      }
      return results;
    })();
    return this.masterDiv.setState({
      divs: divs
    });
  }
});

new TestSuite({
  'title': 'Update 1k DOM Els',
  'subtitle': 'Update 1000 existing elements 100 times',
  'measureMethod': 'sync',
  'timesToRun': 100,
  'setupFn': function(container$) {
    var _, currentValue, masterDiv, subDiv;
    _ = this;
    this.obj = {
      'prop': 'value'
    };
    subDiv = React.createClass({
      render: function() {
        return React.DOM.div(null, this.props.prop);
      }
    });
    masterDiv = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        var i;
        return React.DOM.div(null, (function() {
          var j, results;
          results = [];
          for (i = j = 1; j <= 1000; i = ++j) {
            results.push(React.createElement(subDiv, this.state));
          }
          return results;
        }).call(this));
      },
      componentWillMount: function() {
        return _.masterDiv = this;
      }
    });
    currentValue = 0;
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    return ReactDOM.render(React.createElement(masterDiv), container$[0]);
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.masterDiv;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.masterDiv.setState({
      'prop': this.getNewValue()
    });
  }
});

new TestSuite({
  'title': 'Create DOM Bindings',
  'subtitle': 'Create 1000 bindings to DOM elements',
  'measureMethod': 'sync',
  'nonSharedTest': true,
  'timesToRun': 1,
  'setupFn': function(container$) {
    this.obj = {
      'prop': 'value'
    };
    return this.container$ = container$;
  },
  'teardownFn': function(container$) {
    ReactDOM.unmountComponentAtNode(container$[0]);
    container$.empty();
    delete this.obj;
    delete this.masterDiv;
    return delete this.getNewValue;
  },
  'testFn': function() {
    var _, masterDiv, subDiv;
    _ = this;
    subDiv = React.createClass({
      render: function() {
        return React.DOM.div(null, this.props.prop);
      }
    });
    masterDiv = React.createClass({
      getInitialState: function() {
        return _.obj;
      },
      render: function() {
        var i;
        return React.DOM.div(null, (function() {
          var j, results;
          results = [];
          for (i = j = 1; j <= 1000; i = ++j) {
            results.push(React.createElement(subDiv, this.state));
          }
          return results;
        }).call(this));
      }
    });
    return ReactDOM.render(React.createElement(masterDiv), this.container$[0]);
  }
});