// https://github.com/DavidWells/isomorphic-react-example/blob/master/app/routes/coreRoutes.js

var React = require('react/addons');
var ReactApp = React.createFactory(require('../components/ReactApp').ReactApp);

module.exports = function(app) {

    app.get('/', function(req, res){
        // React.renderToString takes your component
        // and generates the markup
        var reactHtml = React.renderToString(ReactApp({}));
        // Output html rendered by react
        // console.log(myAppHtml);
        res.render('index.ejs', {reactOutput: reactHtml});
    });

};

React.createClass({
    render: function () {
        return (
            <p>
                Hello {name}!           
            </p>
        );
    }
})

var MOD = 65521;

// This is a clean-room implementation of adler32 designed for detecting
// if markup is not what we expect it to be. It does not need to be
// cryptographically strong, only reasonably good at detecting if markup
// generated on the server is different than that on the client.
function adler32(data) {
  var a = 1;
  var b = 0;
  for (var i = 0; i < data.length; i++) {
    a = (a + data.charCodeAt(i)) % MOD;
    b = (b + a) % MOD;
  }
  return a | (b << 16);
}

/**
 * Finds the index of the first character
 * that's not common between the two given strings.
 *
 * @return {number} the index of the character where the strings diverge
 */
function firstDifferenceIndex(string1, string2) {
  var minLen = Math.min(string1.length, string2.length);
  for (var i = 0; i < minLen; i++) {
    if (string1.charAt(i) !== string2.charAt(i)) {
      return i;
    }
  }
  return string1.length === string2.length ? -1 : minLen;
}

_mountImageIntoNode: function(markup, container, shouldReuseMarkup) {
    ("production" !== process.env.NODE_ENV ? invariant(
      container && (
        (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE)
      ),
      'mountComponentIntoNode(...): Target container is not valid.'
    ) : invariant(container && (
      (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE)
    )));

    if (shouldReuseMarkup) {
      var rootElement = getReactRootElementInContainer(container);
      if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) {
        return;
      } else {
        var checksum = rootElement.getAttribute(
          ReactMarkupChecksum.CHECKSUM_ATTR_NAME
        );
        rootElement.removeAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);

        var rootMarkup = rootElement.outerHTML;
        rootElement.setAttribute(
          ReactMarkupChecksum.CHECKSUM_ATTR_NAME,
          checksum
        );

        var diffIndex = firstDifferenceIndex(markup, rootMarkup);
        var difference = ' (client) ' +
          markup.substring(diffIndex - 20, diffIndex + 20) +
          '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);

        ("production" !== process.env.NODE_ENV ? invariant(
          container.nodeType !== DOC_NODE_TYPE,
          'You\'re trying to render a component to the document using ' +
          'server rendering but the checksum was invalid. This usually ' +
          'means you rendered a different component type or props on ' +
          'the client from the one on the server, or your render() ' +
          'methods are impure. React cannot handle this case due to ' +
          'cross-browser quirks by rendering at the document root. You ' +
          'should look for environment dependent code in your components ' +
          'and ensure the props are the same client and server side:\n%s',
          difference
        ) : invariant(container.nodeType !== DOC_NODE_TYPE));

        if ("production" !== process.env.NODE_ENV) {
          ("production" !== process.env.NODE_ENV ? warning(
            false,
            'React attempted to reuse markup in a container but the ' +
            'checksum was invalid. This generally means that you are ' +
            'using server rendering and the markup generated on the ' +
            'server was not what the client was expecting. React injected ' +
            'new markup to compensate which works but you have lost many ' +
            'of the benefits of server rendering. Instead, figure out ' +
            'why the markup being generated is different on the client ' +
            'or server:\n%s',
            difference
          ) : null);
        }
      }
    }

    ("production" !== process.env.NODE_ENV ? invariant(
      container.nodeType !== DOC_NODE_TYPE,
      'You\'re trying to render a component to the document but ' +
        'you didn\'t use server rendering. We can\'t do this ' +
        'without using server rendering due to cross-browser quirks. ' +
        'See React.renderToString() for server rendering.'
    ) : invariant(container.nodeType !== DOC_NODE_TYPE));

    setInnerHTML(container, markup);
  }

var Test = React.createClass({
  getInitialState: function() {
    return {name: 'world'};
  },
  render: function() {
    return (
        <p>Hello</p>
        <p>
            Hello {this.state.name}!
        </p>
    );
  }
});

React.render(
  <Test />,
  document.getElementById('content')
);

// ES6 Object.assign，有点像jQuery.extend，具体参见：http://es6.ruanyifeng.com/#docs/object
var assign = require('react/lib/Object.assign'),
    Transaction = require("react/lib/Transaction");

// 要包裹的方法
function dosth() {
    console.log('dosth');
}

// 创建一个Transaction的子类
function MyTransaction() {
    this.reinitializeTransaction();
}

// mixin
assign(
    MyTransaction.prototype,
    Transaction.Mixin,
    {
        // 需要实现一个getTransactionWrappers方法，获取需要的包裹
        getTransactionWrappers: function() {
            return [{
                // 第一个包裹的初始化方法
                initialize: function (e) {
                    console.log('init first');
                },
                // 第一个包裹的完成方法
                close: function () {
                    console.log('close first');
                }
            }, {
                // 第二个包裹的初始化方法
                initialize: function (e) {
                    console.log('init second');
                },
                // 第二个包裹的完成方法
                close: function () {
                    console.log('close second');
                }
            }];
        }
    }
);

var myTransaction = new MyTransaction();

// 包裹dosth方法，scope是this
myTransaction.perform(dosth, this);
// init first
// init second
// dosth
// close first
// close second

// 前面省略
assign(
    MyTransaction.prototype,
    Transaction.Mixin,
    {
        getTransactionWrappers: function() {
            return [{
                initialize: function (e) {
                    // 让这里抛出错误
                    dosthundefined();
                    console.log('init first');
                },
                close: function () {
                    console.log('close first');
                }
            }, {
                initialize: function (e) {
                    console.log('init second');
                },
                close: function () {
                    console.log('close second');
                }
            }];
        }
    }
);

var myTransaction = new MyTransaction();

myTransaction.perform(dosth, this);
// init second
// close second
// Uncaught ReferenceError: dosthundefined is not defined

// 前面省略
function dosth() {
    dosthundefined();
    console.log('dosth');
}
// 中间省略
myTransaction.perform(dosth, this);
// init first
// init second
// close first
// close second
// Uncaught ReferenceError: dosthundefined is not defined

{
    // tag的名字
    tagName: 'p',
    // 节点包含属性
    properties: {
        style: {
            color: '#fff'
        }
    },
    // 子节点
    children: [],
    // 该节点的唯一表示，后面会讲有啥用
    key: 1
}

// 创建一个div
react.createElement('div', null, [
    // 子节点img
    react.createElement('img', { src: "avatar.png", class: "profile" }),
    // 子节点h3
    react.createElement('h3', null, [[user.firstName, user.lastName].join(' ')])
]);

function create(vds, parent) {
  // 首先看看是不是数组，如果不是数组统一成数组
  !Array.isArray(vds) && (vds = [vds]);
  //  如果没有父元素则创建个fragment来当父元素
  parent = parent || document.createDocumentFragment();
  var node;
  // 遍历所有VNode
  vds.forEach(function (vd) {
    // 如果VNode是文字节点
    if (isText(vd)) {
      // 创建文字节点
      node = document.createTextNode(vd.text);
    // 否则是元素
    } else {
      // 创建元素
      node = document.createElement(vd.tag);
    }
    // 将元素塞入父容器
    parent.appendChild(node);
    // 看看有没有子VNode，有孩子则处理孩子VNode
    vd.children && vd.children.length &&
      create(vd.children, node);

    // 看看有没有属性，有则处理属性
    vd.properties &&
      setProps({ style: {} }, vd.properties, node);
  });
  return parent;
}