@eva/fiber-eva/es/renderer.js

React EVA是一个让开发同学能够在React技术体系下，利用EVA JS的游戏研发能力，开发动画、游戏类场景的框架。它可以让开发同学用熟悉的JSX和Hooks语法编写动画、游戏场景的代码。

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["frameRate", "preventScroll", "transparent", "renderType", "backgroundColor", "HiRes", "LowRes", "width", "height", "style", "systems", "listeningProps", "component"],
    _excluded2 = ["style"],
    _excluded3 = ["style"],
    _excluded4 = ["name", "components", "children"];

function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

import ReactReconciler from 'react-reconciler';
import { GameObject, Game, System } from '@eva/eva.js';
import { RendererSystem } from '@eva/plugin-renderer';
import { Render, RenderSystem } from '@eva/plugin-renderer-render';
import { Text, TextSystem } from '@eva/plugin-renderer-text';
import { Event, EventSystem } from '@eva/plugin-renderer-event';

var _driver,
    _debug,
    _options,
    _root,
    _canvas,
    _hud,
    _background,
    _game,
    _textMap = {},
    _counter = {
  eva: 0,
  scene: 0,
  gameobject: 0,
  empty: 0,
  textMap: 0
},
    _firstRender = true;

function debugLog(debug, level) {
  if (debug) {
    var _console;

    for (var _len = arguments.length, message = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
      message[_key - 2] = arguments[_key];
    }

    (_console = console)[level].apply(_console, message);
  }
}

function useEvaDriver(filter, level) {
  if (level === void 0) {
    level = 'debug';
  }

  return function (target, methodName, descriptor) {
    var oldValue = descriptor.value;

    descriptor.value = function () {
      var returnValue;
      var driverName;

      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        args[_key2] = arguments[_key2];
      }

      if (filter.apply(void 0, args)) {
        driverName = 'Eva Driver';
        returnValue = oldValue.apply(this, args);
      } else {
        driverName = 'React Driver';
        returnValue = _driver[methodName].apply(_driver, args);
      }

      debugLog(_debug, level, "[" + driverName + "]", methodName, '(', args, ')', '=>', returnValue);
      return returnValue;
    };
  };
}

var EvaPropName = '__$eva$__';
var EvaRootAttrName = 'eva-root';
var EvaHudAttrName = 'eva-hud';
var EvaBgAttrName = 'eva-bg';
var EvaCanvasAttrName = 'eva-canvas';
var EvaElementTags = ['eva', 'scene', 'gameobject', 'hud', 'background'];
var TextStyleKeys = ['align', 'breakWords', 'dropShadow', 'dropShadowAlpha', 'dropShadowAngle', 'dropShadowBlur', 'dropShadowColor', 'dropShadowDistance', 'fill', 'fillGradientType', 'fillGradientStops', 'fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'fontWeight', 'letterSpacing', 'lineHeight', 'lineJoin', 'miterLimit', 'padding', 'stroke', 'strokeThickness', 'textBaseline', 'trim', 'whiteSpace', 'wordWrap', 'wordWrapWidth', 'leading'];
var TransformKeys = ['position', 'x', 'y', 'size', 'width', 'height', 'anchor', 'anchorX', 'anchorY', 'origin', 'originX', 'originY', 'scale', 'scaleX', 'scaleY', 'rotation', 'rotationX', 'rotationY'];
var TransformKeyRegExp = /^(anchor|origin|scale|rotation)([A-Z]+)$/;
var EventKeys = [/^on[A-Z]/];
var EventMap = {
  click: 'tap'
};
var CantRemoveComponents = ['Transform', 'Event', 'Render'];
var ListeningProps = [['alpha', 'zIndex', 'visible', 'sortableChildren'], Render // Render Component & It's filter
];
var ListeningPropsCached = {};

function findComponent(key) {
  if (ListeningPropsCached[key]) {
    return ListeningPropsCached[key];
  }

  for (var i = 0; i < ListeningProps.length; i += 2) {
    var filter = ListeningProps[i];
    var ComponentClass = ListeningProps[i + 1];

    if (filter instanceof Array && filter.indexOf(key) > -1 || filter instanceof RegExp && filter.test(key) || filter instanceof Function && filter(key)) {
      ListeningPropsCached[key] = ComponentClass;
      return ComponentClass;
    }
  }

  return undefined;
}

function processListeningProps(gameObject, restProps) {
  var map = {};

  for (var key in restProps) {
    var ComponentClass = findComponent(key);

    if (ComponentClass) {
      var options = map[ComponentClass.componentName] || {
        ComponentClass: ComponentClass,
        InitParams: {}
      };
      options.InitParams[key] = restProps[key];
      map[ComponentClass.componentName] = options;
    }
  }

  for (var componentName in map) {
    var _options2 = map[componentName];
    var component = gameObject.getComponent(_options2.ComponentClass);

    if (!component) {
      gameObject.addComponent(new _options2.ComponentClass(_options2.InitParams));
    } else {
      for (var _key3 in _options2.InitParams) {
        component[_key3] = _options2.InitParams[_key3];
      }
    }
  }
}

function yeep() {
  return true;
}

function noop() {
  return false;
}

function isGameObject(node) {
  return node instanceof GameObject;
}

function getTransformKey(key) {
  if (key === 'x' || key === 'y') {
    return ['position', key];
  } else if (key === 'width' || key === 'height') {
    return ['size', key];
  } else {
    var matches = key.match(TransformKeyRegExp);

    if (matches) {
      return [matches[1], matches[2].toLowerCase()];
    } else {
      return [key];
    }
  }
}

function getTransformProps(props) {
  var result = {};

  for (var _iterator = _createForOfIteratorHelperLoose(TransformKeys), _step; !(_step = _iterator()).done;) {
    var key = _step.value;

    if (typeof key === 'string' && props.hasOwnProperty(key) && typeof props[key] !== 'undefined') {
      var value = props[key];

      var _getTransformKey = getTransformKey(key),
          mainKey = _getTransformKey[0],
          subKey = _getTransformKey[1];

      if (subKey === undefined) {
        result[mainKey] = value;
      } else {
        if (result[mainKey] === undefined) {
          result[mainKey] = {};
        }

        result[mainKey][subKey.toLowerCase()] = value;
      }
    }
  }

  return result;
}

function getTextStyleProps(props) {
  var result = {};

  for (var _iterator2 = _createForOfIteratorHelperLoose(TextStyleKeys), _step2; !(_step2 = _iterator2()).done;) {
    var key = _step2.value;

    if (typeof key === 'string' && props.hasOwnProperty(key) && typeof props[key] !== 'undefined') {
      result[key] = props[key];
    }
  }

  return result;
}

function getEventProps(props) {
  var result = {};

  for (var _iterator3 = _createForOfIteratorHelperLoose(EventKeys), _step3; !(_step3 = _iterator3()).done;) {
    var key = _step3.value;

    for (var propKey in props) {
      if (key.test(propKey)) {
        result[propKey] = props[propKey];
      }
    }
  }

  return result;
}

function setEvaElement(el) {
  if (!(el instanceof GameObject || el instanceof TextNode || el instanceof EmptyNode)) {
    Object.defineProperty(el, EvaPropName, {
      writable: false,
      configurable: true,
      enumerable: false,
      value: true
    });
  }
}

function isEvaElement(el) {
  if (el instanceof GameObject || el instanceof TextNode || el instanceof EmptyNode) {
    return true;
  } else {
    return el[EvaPropName] === true;
  }
}

function setEvaHud(el) {
  if (el instanceof Element) {
    el.setAttribute(EvaHudAttrName, 'true');
  }
}

function isEvaHud(el) {
  if (el instanceof Element) {
    return el.getAttribute(EvaHudAttrName) === 'true';
  }

  return false;
}

function isGameObjectTree(node, parent) {
  return isGameObject(node) && isGameObject(parent);
}

function isSceneNode(node, parentNode) {
  return isGameObject(node) && (parentNode === null || parentNode === void 0 ? void 0 : parentNode.gameInstance) instanceof Game // (node._r?.type === 'scene' ||
  //  ||
  //   (node.parent != null && node.parent === node.scene))
  ;
}

function isBgNode(node) {
  return node instanceof HTMLElement && node.getAttribute(EvaBgAttrName) === 'true';
}

function isHudNode(node) {
  return node instanceof HTMLElement && node.getAttribute(EvaHudAttrName) === 'true';
}

function isEvaNode(node) {
  return node instanceof HTMLElement && node.getAttribute(EvaRootAttrName) === 'true';
}

function isEventName(propName) {
  return propName.startsWith('on') && window.hasOwnProperty(propName.toLowerCase());
}

var EmptyNode = /*#__PURE__*/function (_GameObject) {
  _inheritsLoose(EmptyNode, _GameObject);

  function EmptyNode(name) {
    return _GameObject.call(this, name, {}) || this;
  }

  return EmptyNode;
}(GameObject);

var TextNode = function TextNode(name, textComponent, index) {
  this.index = void 0;
  this.name = void 0;
  this.textComponent = void 0;
  this.index = index;
  this.name = name;
  this.textComponent = textComponent;
};

function setStyle(domElement, styles) {
  Object.keys(styles).forEach(function (name) {
    var rawValue = styles[name];
    var isEmpty = rawValue === null || typeof rawValue === 'boolean' || rawValue === ''; // Unset the style to its default values using an empty string

    if (isEmpty) domElement.style[name] = '';else {
      var value = typeof rawValue === 'number' ? rawValue + "px" : rawValue;
      domElement.style[name] = value;
    }
  });
}

function addEventListener(node, eventName, eventHandler) {
  eventName = EventMap[eventName] || eventName;
  var eventComponent = node.getComponent(Event);

  if (!eventComponent) {
    eventComponent = node.addComponent(new Event());
  }

  return eventComponent.on(eventName, eventHandler);
}

var NO_CONTEXT = {};

function appendChild(parent, node) {
  // if (node instanceof TextNode) return;
  if (isGameObjectTree(node, parent)) {
    parent.addChild(node);
  } else if (isSceneNode(node, parent)) {
    _game.scene.addChild(node);
  } else {
    parent.appendChild(node);
  }
}

function removeChild(parent, node) {
  if (isGameObject(node) || isSceneNode(node, parent)) {
    // gameobject
    // parent.removeChild(node);
    node.destroy();
  } else if (isBgNode(node)) {
    parent.removeChild(node);
  } else if (isHudNode(node)) {
    parent.removeChild(node);
  } else if (isEvaNode(node)) {
    parent.removeChild(node);

    _destroyGame();
  } else {
    parent.removeChild(node);
  }
}

function insertBefore(parent, node, before) {
  parent = parent || before.parent || before.parentNode;

  if (isGameObjectTree(node, parent)) {
    var index = parent.transform.children.indexOf(before.transform);

    if (index > -1) {
      parent.addChild(node);
      var transform = parent.transform.children.pop();

      if (index === 0) {
        parent.transform.children.unshift(transform);
      } else {
        parent.transform.children.splice(index, -1, transform);
      }
    }
  } else if (isSceneNode(node, parent)) {
    parent.scene.addChild(node);
  } // else if (isBgNode(node)) {
  //   this._driver.insertBefore(node, this._canvas);
  // } else if (isHudNode(node)) {
  //   this._driver.insertBefore(node, this._canvas);
  // } else {
  //   this._driver.insertBefore(node, before, parent);
  // }

} // get diff between 2 objects


function shallowDiff(oldObj, newObj) {
  // Return a diff between the new and the old object
  var uniqueProps = new Set([].concat(Object.keys(oldObj), Object.keys(newObj)));
  var changedProps = Array.from(uniqueProps).filter(function (propName) {
    return oldObj[propName] !== newObj[propName];
  });
  return changedProps;
}

function _updateTextComponent(textComponent) {
  var textId = textComponent._textId;
  textComponent.text = _textMap[textId].join('');
}
/** attr */


function _setTransform(gameObject, propKey, propValue) {
  var _getTransformKey2 = getTransformKey(propKey),
      mainKey = _getTransformKey2[0],
      subKey = _getTransformKey2[1];

  if (subKey === undefined) {
    gameObject.transform[mainKey] = propValue;
  } else {
    if (gameObject.transform[mainKey] === undefined) {
      gameObject.transform[mainKey] = {};
    }

    gameObject.transform[mainKey][subKey] = propValue;
  }
}

function _setTextStyle(gameObject, propKey, propValue) {
  var textComponent = gameObject.getComponent(Text);

  if (textComponent) {
    textComponent.style[propKey] = propValue;
  }
}

function _findChangedComponents(node, propValue) {
  var newTypes = propValue.map(function (item) {
    return item;
  });
  var changedComponents = [];
  node.components.forEach(function (component) {
    var index = newTypes.indexOf(component);

    if (index > -1) {
      newTypes[index] = false;
    } else if (CantRemoveComponents.indexOf(component.name) < 0) {
      changedComponents.push([component, true]);
    }
  });
  newTypes.forEach(function (item, index) {
    if (item !== false) {
      changedComponents.push([propValue[index], false]);
    }
  });
  return changedComponents;
}

function _setComponent(gameObject, component, isRemove) {
  if (isRemove === void 0) {
    isRemove = false;
  }

  var has = gameObject.getComponent(component.name);

  if (!has && !isRemove) {
    gameObject.addComponent(component);
  } else if (has && isRemove) {
    gameObject.removeComponent(component.name);
  }
}

function setAttribute(node, propKey, propValue) {
  if (propKey === 'name') {
    node.name = propValue;
  } else if (propKey === 'components') {
    var changedComponents = _findChangedComponents(node, propValue);

    for (var _iterator4 = _createForOfIteratorHelperLoose(changedComponents), _step4; !(_step4 = _iterator4()).done;) {
      var _step4$value = _step4.value,
          component = _step4$value[0],
          isRemove = _step4$value[1];

      _setComponent(node, component, isRemove);
    }
  } else if (TransformKeys.indexOf(propKey) > -1) {
    _setTransform(node, propKey, propValue);
  } else if (TextStyleKeys.indexOf(propKey) > -1) {
    _setTextStyle(node, propKey, propValue);
  } else {
    var _processListeningProp;

    processListeningProps(node, (_processListeningProp = {}, _processListeningProp[propKey] = propValue, _processListeningProp));
  }
}

function _destroyGame() {
  try {
    var _destroy, _ref;

    _game.pause();

    (_destroy = (_ref = _game).destroy) === null || _destroy === void 0 ? void 0 : _destroy.call(_ref);
  } catch (e) {}
}

function _createGame(options) {
  var _extends2, _extends3;

  if (options === void 0) {
    options = {
      width: 100,
      height: 100
    };
  }

  _options = _extends({}, options);

  var _options3 = _options,
      _options3$frameRate = _options3.frameRate,
      frameRate = _options3$frameRate === void 0 ? 60 : _options3$frameRate,
      _options3$preventScro = _options3.preventScroll,
      preventScroll = _options3$preventScro === void 0 ? false : _options3$preventScro,
      _options3$transparent = _options3.transparent,
      transparent = _options3$transparent === void 0 ? true : _options3$transparent,
      _options3$renderType = _options3.renderType,
      renderType = _options3$renderType === void 0 ? 0 : _options3$renderType,
      _options3$backgroundC = _options3.backgroundColor,
      backgroundColor = _options3$backgroundC === void 0 ? 0x000000 : _options3$backgroundC,
      _options3$HiRes = _options3.HiRes,
      HiRes = _options3$HiRes === void 0 ? true : _options3$HiRes,
      LowRes = _options3.LowRes,
      width = _options3.width,
      height = _options3.height,
      _options3$style = _options3.style,
      style = _options3$style === void 0 ? {} : _options3$style,
      _options3$systems = _options3.systems,
      systems = _options3$systems === void 0 ? [] : _options3$systems,
      _options3$listeningPr = _options3.listeningProps,
      listeningProps = _options3$listeningPr === void 0 ? [] : _options3$listeningPr,
      component = _options3.component,
      props = _objectWithoutPropertiesLoose(_options3, _excluded);

  if (_options.resolution === undefined && HiRes === true) {
    _options.resolution = 2;
  } else if (_options.resolution === undefined && LowRes === true) {
    _options.resolution = 1;
  }

  _root = document.createElement('div', _extends({}, props, (_extends2 = {}, _extends2[EvaRootAttrName] = 'true', _extends2.component = component, _extends2)));

  _root.setAttribute(EvaRootAttrName, 'true');

  _canvas = document.createElement('canvas', _extends({}, props, (_extends3 = {}, _extends3[EvaCanvasAttrName] = 'true', _extends3._parent = _root, _extends3)));

  _canvas.setAttribute(EvaCanvasAttrName, 'true');

  setStyle(_root, _extends({
    width: width,
    height: height,
    position: 'relative'
  }, style));
  setStyle(_canvas, {
    position: 'absolute',
    left: '0',
    top: '0',
    zIndex: '1'
  });

  _root.appendChild(_canvas);

  var systemCached = {};
  var canvasWidth = width + '';
  var canvasHeight = height + '';

  if (canvasWidth.match(/[\d\.]+%/)) {
    canvasWidth = 750 * parseFloat(canvasWidth) / 100 + '';
  }

  if (canvasHeight.match(/[\d\.]+%/)) {
    canvasHeight = window.innerHeight / window.innerWidth * 750 * parseFloat(canvasHeight) / 100 + '';
  }

  _game = new Game({
    frameRate: frameRate,
    autoStart: true,
    systems: [new RendererSystem({
      canvas: _canvas,
      width: Number(canvasWidth),
      height: Number(canvasHeight),
      transparent: transparent,
      preventScroll: preventScroll,
      renderType: renderType,
      backgroundColor: backgroundColor,
      resolution: _options.resolution / 2
    }), new RenderSystem(), new TextSystem(), new EventSystem()].concat(systems.map(function (system) {
      if (system instanceof System) {
        return system;
      } else if (typeof system === 'function') {
        return system(props);
      }
    }).filter(function (system) {
      var systemName = system.constructor.systemName;

      if (!systemName || systemCached[systemName] !== true) {
        systemName && (systemCached[systemName] = true);
        return true;
      }

      return false;
    }))
  });
  _game.scene.transform.size.width = Number(canvasWidth);
  _game.scene.transform.size.height = Number(canvasHeight);
  Object.defineProperty(_root, 'gameInstance', {
    value: _game,
    writable: false,
    enumerable: false,
    configurable: true
  });
  ListeningProps.push.apply(ListeningProps, listeningProps);
  Object.defineProperty(_root, 'listeningProps', {
    value: ListeningProps,
    writable: false,
    enumerable: false,
    configurable: true
  });
  setEvaElement(_root);
  console.log(_root);
  return _root;
}

function _createHUD(_ref2) {
  var style = _ref2.style,
      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);

  _hud = document.createElement('div', _extends({}, props));

  _hud.setAttribute(EvaHudAttrName, 'true');

  setStyle(_hud, _extends({
    width: _options.width,
    height: _options.height,
    position: 'absolute',
    left: '0',
    top: '0',
    pointerEvents: 'none',
    zIndex: '2'
  }, style));
  setEvaElement(_hud);
  return _hud;
}

function _createBackground(_ref3) {
  var style = _ref3.style,
      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);

  _background = document.createElement('div', _extends({}, props));

  _background.setAttribute(EvaBgAttrName, 'true');

  setStyle(_background, _extends({
    width: _options.width,
    height: _options.height,
    position: 'absolute',
    left: '0',
    top: '0',
    pointerEvents: 'none',
    zIndex: '0'
  }, style));
  setEvaElement(_background);
  return _background;
}

var HostConfig = {
  getRootHostContext: function getRootHostContext(rootContainerInstance) {
    return NO_CONTEXT;
  },
  getChildHostContext: function getChildHostContext(parentHostContext, type, rootContainerInstance) {
    return NO_CONTEXT;
  },
  getChildHostContextForEventComponent: function getChildHostContextForEventComponent(parentHostContext) {
    return parentHostContext;
  },
  getPublicInstance: function getPublicInstance(instance) {
    return instance;
  },
  prepareForCommit: function prepareForCommit() {
    // noop
    return null;
  },
  resetAfterCommit: function resetAfterCommit() {// noop
  },
  createInstance: function createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
    if (type == 'eva') {
      return _root;
    } else if (type === 'hud') {
      return _createHUD(props);
    } else if (type === 'background') {
      return _createBackground(props);
    }

    if (EvaElementTags.indexOf(type) > -1) {
      var _props$name = props.name,
          name = _props$name === void 0 ? "" + type + _counter[type]++ : _props$name,
          _props$components = props.components,
          components = _props$components === void 0 ? [] : _props$components,
          _props$children = props.children,
          children = _props$children === void 0 ? '' : _props$children,
          restProps = _objectWithoutPropertiesLoose(props, _excluded4);

      var transform = getTransformProps(restProps);
      var gameObject = new GameObject(name, transform);
      var events = getEventProps(restProps);

      for (var _name in events) {
        addEventListener(gameObject, _name.slice(2).toLowerCase(), events[_name]);
      }

      if (type === 'scene') {
        var design = restProps.design || 750;
        var realSize = _game.scene.transform.size;
        var scale = realSize.width / design;
        var designSize = {
          width: design,
          height: realSize.height / scale
        };
        gameObject.transform.size.width = designSize.width;
        gameObject.transform.size.height = designSize.height;
        gameObject.transform.scale.x = scale;
        gameObject.transform.scale.y = scale;
      } else if (type === 'gameobject') {
        if (components) {
          for (var _iterator5 = _createForOfIteratorHelperLoose(components), _step5; !(_step5 = _iterator5()).done;) {
            var component = _step5.value;
            gameObject.addComponent(component);
          }

          if (children && (typeof children === 'string' || typeof children === 'number')) {
            var textComponent = gameObject.getComponent(Text);

            if (!textComponent) {
              var style = getTextStyleProps(_extends({}, restProps));
              textComponent = gameObject.addComponent(new Text({
                text: props.children,
                style: style
              }));
            }
          }
        }
      }

      processListeningProps(gameObject, restProps);
      return gameObject;
    } else {
      //normal react element
      var domElement = document.createElement(type, props);
      Object.keys(props).forEach(function (propName) {
        var propValue = props[propName];

        if (propName === 'style') {
          setStyle(domElement, propValue);
        } else if (propName === 'children') {
          if (typeof propValue === 'string' || typeof propValue === 'number') {
            domElement.textContent = propValue;
          }
        } else if (propName === 'className') {
          domElement.setAttribute('class', propValue);
        } else if (isEventName(propName)) {
          var eventName = propName.toLowerCase().replace('on', '');
          domElement.addEventListener(eventName, propValue);
        } else {
          domElement.setAttribute(propName, propValue);
        }
      });
      return domElement;
    }
  },
  hideInstance: function hideInstance(instance) {
    instance.visible = false;
  },
  unhideInstance: function unhideInstance(instance, props) {
    var visible = props !== undefined && props !== null && props.hasOwnProperty('visible') ? props.visible : true;
    instance.visible = visible;
  },
  finalizeInitialChildren: function finalizeInitialChildren(wordElement, type, props) {
    return false;
  },
  prepareUpdate: function prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, hostContext) {
    if (instance instanceof Game) {
      return true;
    } else if (instance instanceof GameObject) {
      return true;
    } else {
      return shallowDiff(oldProps, newProps);
    }
  },
  commitUpdate: function commitUpdate(instance, updatePayload, type, oldProps, newProps) {
    // noop
    if (instance instanceof Game) {} else if (instance instanceof GameObject) {
      for (var prop in newProps) {
        var value = newProps[prop];
        var lastValue = oldProps != null ? oldProps[prop] : undefined;

        if (!newProps.hasOwnProperty(prop) || value === lastValue || value == null && lastValue == null) {
          continue;
        }

        if (prop === 'children') continue;

        if (value != null) {
          if (prop === 'style') {
            setStyle(instance, value);
          } else if (isEventName(prop)) {
            addEventListener(instance, prop.slice(2).toLowerCase(), value);
          } else {
            setAttribute(instance, prop, value);
          }
        }
      }

      if (instance instanceof TextNode) {
        var textComponent = instance.textComponent,
            index = instance.index;
        var textId = textComponent._textId;
        _textMap[textId][index] = newProps.children;

        _updateTextComponent(textComponent);
      } else {// updateText(node, newProps.children );
      }
    } else {
      updatePayload.forEach(function (propName) {
        // children changes is done by the other methods like `commitTextUpdate`
        if (propName === 'children') {
          var propValue = newProps[propName];

          if (typeof propValue === 'string' || typeof propValue === 'number') {
            instance.textContent = propValue;
          }

          return;
        }

        if (propName === 'style') {
          // Return a diff between the new and the old styles
          var styleDiffs = shallowDiff(oldProps.style, newProps.style);
          var finalStyles = styleDiffs.reduce(function (acc, styleName) {
            // Style marked to be unset
            if (!newProps.style[styleName]) acc[styleName] = '';else acc[styleName] = newProps.style[styleName];
            return acc;
          }, {});
          setStyle(instance, finalStyles);
        } else if (newProps[propName] || typeof newProps[propName] === 'number') {
          if (isEventName(propName)) {
            var eventName = propName.toLowerCase().replace('on', '');
            instance.removeEventListener(eventName, oldProps[propName]);
            instance.addEventListener(eventName, newProps[propName]);
          } else {
            instance.setAttribute(propName, newProps[propName]);
          }
        } else {
          if (isEventName(propName)) {
            var _eventName = propName.toLowerCase().replace('on', '');

            instance.removeEventListener(_eventName, oldProps[propName]);
          } else {
            instance.removeAttribute(propName);
          }
        }
      });
    }
  },
  shouldDeprioritizeSubtree: function shouldDeprioritizeSubtree(type, props) {// noop
  },
  shouldSetTextContent: function shouldSetTextContent(type, props) {
    return typeof props.children === 'string' || typeof props.children === 'number';
  },
  createTextInstance: function createTextInstance(text, rootContainerInstance, internalInstanceHandler) {
    return document.createTextNode(text);
  },
  unhideTextInstance: function unhideTextInstance(textInstance, text) {// noop
  },
  mountEventComponent: function mountEventComponent() {// noop
  },
  updateEventComponent: function updateEventComponent() {// noop
  },
  handleEventTarget: function handleEventTarget() {// noop
  },
  scheduleTimeout: setTimeout,
  cancelTimeout: clearTimeout,
  noTimeout: -1,
  warnsIfNotActing: false,
  now: Date.now,
  isPrimaryRenderer: false,
  supportsMutation: true,
  supportsPersistence: false,
  supportsHydration: false,

  /**
   * -------------------------------------------
   * Mutation
   * -------------------------------------------
   */
  appendInitialChild: appendChild,
  appendChild: appendChild,
  appendChildToContainer: function appendChildToContainer(parent, child) {
    parent.appendChild(child);
  },
  removeChild: removeChild,
  removeChildFromContainer: removeChild,
  insertBefore: insertBefore,
  insertInContainerBefore: function insertInContainerBefore() {
    // noop
    return false;
  },
  commitMount: function commitMount(instance, updatePayload, type, oldProps, newProps) {// noop
  },
  commitTextUpdate: function commitTextUpdate(textInstance, oldText, newText) {
    textInstance.nodeValue = newText;
  },
  resetTextContent: function resetTextContent(evaElement) {// noop
  },
  clearContainer: function clearContainer(container) {// TODO implement this
    // container.removeAllChildrenRecursive();
  },
  beforeActiveInstanceBlur: function beforeActiveInstanceBlur(internalInstanceHandle) {// noop
  },
  afterActiveInstanceBlur: function afterActiveInstanceBlur() {// noop
  },
  preparePortalMount: function preparePortalMount(portalInstance) {// noop
  }
};

function createRenderer() {
  var reconciler = ReactReconciler(HostConfig);
  return {
    reconciler: reconciler,
    createInstance: _createGame
  };
}

export default createRenderer;