module SomeThing = {
#1 SomeThing

let x = 30;
let z = 10;

};

module OtherThing = {
#1 OtherThing
let y = SomeThing.x;

};

module ReactEventRe = {
#1 ReactEventRe
type synthetic('a);

module MakeSyntheticWrapper = (Type: {type t;}) => {
  [@bs.get] external bubbles : Type.t => bool = "";
  [@bs.get] external cancelable : Type.t => bool = "";
  [@bs.get] external currentTarget : Type.t => Dom.element = ""; /* Should return Dom.evetTarget */
  [@bs.get] external defaultPrevented : Type.t => bool = "";
  [@bs.get] external eventPhase : Type.t => int = "";
  [@bs.get] external isTrusted : Type.t => bool = "";
  [@bs.get] external nativeEvent : Type.t => Js.t({..}) = ""; /* Should return Dom.event */
  [@bs.send.pipe: Type.t] external preventDefault : unit = "";
  [@bs.send.pipe: Type.t] external isDefaultPrevented : bool = "";
  [@bs.send.pipe: Type.t] external stopPropagation : unit = "";
  [@bs.send.pipe: Type.t] external isPropagationStopped : bool = "";
  [@bs.get] external target : Type.t => Dom.element = ""; /* Should return Dom.evetTarget */
  [@bs.get] external timeStamp : Type.t => float = "";
  [@bs.get] external _type : Type.t => string = "type";
  [@bs.send.pipe: Type.t] external persist : unit = "";
};

module Synthetic = {
  type tag;
  type t = synthetic(tag);
  [@bs.get] external bubbles : synthetic('a) => bool = "";
  [@bs.get] external cancelable : synthetic('a) => bool = "";
  [@bs.get] external currentTarget : synthetic('a) => Dom.element = ""; /* Should return Dom.evetTarget */
  [@bs.get] external defaultPrevented : synthetic('a) => bool = "";
  [@bs.get] external eventPhase : synthetic('a) => int = "";
  [@bs.get] external isTrusted : synthetic('a) => bool = "";
  [@bs.get] external nativeEvent : synthetic('a) => Js.t({..}) = ""; /* Should return Dom.event */
  [@bs.send.pipe: synthetic('a)] external preventDefault : unit = "";
  [@bs.send.pipe: synthetic('a)] external isDefaultPrevented : bool = "";
  [@bs.send.pipe: synthetic('a)] external stopPropagation : unit = "";
  [@bs.send.pipe: synthetic('a)] external isPropagationStopped : bool = "";
  [@bs.get] external target : synthetic('a) => Dom.element = ""; /* Should return Dom.evetTarget */
  [@bs.get] external timeStamp : synthetic('a) => float = "";
  [@bs.get] external _type : synthetic('a) => string = "type";
  [@bs.send.pipe: synthetic('a)] external persist : unit = "";
};

/* Cast any event type to the general synthetic type. This is safe, since synthetic is more general */
external toSyntheticEvent : synthetic('a) => Synthetic.t = "%identity";

module Clipboard = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
  [@bs.get] external clipboardData : t => Js.t({..}) = ""; /* Should return Dom.dataTransfer */
};

module Composition = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
  [@bs.get] external data : t => string = "";
};

module Keyboard = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
  [@bs.get] external altKey : t => bool = "";
  [@bs.get] external charCode : t => int = "";
  [@bs.get] external ctrlKey : t => bool = "";
  [@bs.send.pipe: t] external getModifierState : string => bool = "";
  [@bs.get] external key : t => string = "";
  [@bs.get] external keyCode : t => int = "";
  [@bs.get] external locale : t => string = "";
  [@bs.get] external location : t => int = "";
  [@bs.get] external metaKey : t => bool = "";
  [@bs.get] external repeat : t => bool = "";
  [@bs.get] external shiftKey : t => bool = "";
  [@bs.get] external which : t => int = "";
};

module Focus = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
  [@bs.get] external relatedTarget : t => Dom.element = ""; /* Should return Dom.eventTarget */
};

module Form = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
};

module Mouse = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
  [@bs.get] external altKey : t => bool = "";
  [@bs.get] external button : t => int = "";
  [@bs.get] external buttons : t => int = "";
  [@bs.get] external clientX : t => int = "";
  [@bs.get] external clientY : t => int = "";
  [@bs.get] external ctrlKey : t => bool = "";
  [@bs.send.pipe: t] external getModifierState : string => bool = "";
  [@bs.get] external metaKey : t => bool = "";
  [@bs.get] external pageX : t => int = "";
  [@bs.get] external pageY : t => int = "";
  [@bs.get] external relatedTarget : t => Dom.element = ""; /* Should return Dom.eventTarget */
  [@bs.get] external screenX : t => int = "";
  [@bs.get] external screenY : t => int = "";
  [@bs.get] external shiftKey : t => bool = "";
};

module Selection = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
};

module Touch = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
  [@bs.get] external altKey : t => bool = "";
  [@bs.get] external changedTouches : t => Js.t({..}) = ""; /* Should return Dom.touchList */
  [@bs.get] external ctrlKey : t => bool = "";
  [@bs.send.pipe: t] external getModifierState : string => bool = "";
  [@bs.get] external metaKey : t => bool = "";
  [@bs.get] external shiftKey : t => bool = "";
  [@bs.get] external targetTouches : t => Js.t({..}) = ""; /* Should return Dom.touchList */
  [@bs.get] external touches : t => Js.t({..}) = ""; /* Should return Dom.touchList */
};

module UI = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
  [@bs.get] external detail : t => int = "";
  [@bs.get] external view : t => Dom.window = ""; /* Should return DOMAbstractView/WindowProxy */
};

module Wheel = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
  [@bs.get] external deltaMode : t => int = "";
  [@bs.get] external deltaX : t => float = "";
  [@bs.get] external deltaY : t => float = "";
  [@bs.get] external deltaZ : t => float = "";
};

module Media = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
};

module Image = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
};

module Animation = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
  [@bs.get] external animationName : t => string = "";
  [@bs.get] external pseudoElement : t => string = "";
  [@bs.get] external elapsedTime : t => float = "";
};

module Transition = {
  type tag;
  type t = synthetic(tag);
  include
    MakeSyntheticWrapper(
      {
        type nonrec t = t;
      },
    );
  [@bs.get] external propertyName : t => string = "";
  [@bs.get] external pseudoElement : t => string = "";
  [@bs.get] external elapsedTime : t => float = "";
};

};

module ReasonReactOptimizedCreateClass = {
#1 ReasonReactOptimizedCreateClass
let _assign = Js.Obj.assign;

let emptyObject = Js.Obj.empty();

[%%bs.raw
  {|
/**
 * Copyright 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 */

// 'use strict';

// var _assign = require('object-assign');

// var emptyObject = require('emptyObject');
// var _invariant = require('invariant');

// if (process.env.NODE_ENV !== 'production') {
//   var warning = require('fbjs/lib/warning');
// }

var MIXINS_KEY = 'mixins';

// Helper function to allow the creation of anonymous functions which do not
// have .name set to the name of the variable being assigned to.
function identity(fn) {
  return fn;
}

var ReactPropTypeLocationNames;
// if (process.env.NODE_ENV !== 'production') {
//   ReactPropTypeLocationNames = {
//     prop: 'prop',
//     context: 'context',
//     childContext: 'child context'
//   };
// } else {
  ReactPropTypeLocationNames = {};
// }
|}
];

let factory = [%bs.raw
  {|
function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
  /**
   * Policies that describe methods in `ReactClassInterface`.
   */

  var injectedMixins = [];

  /**
   * Composite components are higher-level components that compose other composite
   * or host components.
   *
   * To create a new type of `ReactClass`, pass a specification of
   * your new class to `React.createClass`. The only requirement of your class
   * specification is that you implement a `render` method.
   *
   *   var MyComponent = React.createClass({
   *     render: function() {
   *       return <div>Hello World</div>;
   *     }
   *   });
   *
   * The class specification supports a specific protocol of methods that have
   * special meaning (e.g. `render`). See `ReactClassInterface` for
   * more the comprehensive protocol. Any other properties and methods in the
   * class specification will be available on the prototype.
   *
   * @interface ReactClassInterface
   * @internal
   */
  var ReactClassInterface = {
    /**
     * An array of Mixin objects to include when defining your component.
     *
     * @type {array}
     * @optional
     */
    mixins: 'DEFINE_MANY',

    /**
     * An object containing properties and methods that should be defined on
     * the component's constructor instead of its prototype (static methods).
     *
     * @type {object}
     * @optional
     */
    statics: 'DEFINE_MANY',

    /**
     * Definition of prop types for this component.
     *
     * @type {object}
     * @optional
     */
    propTypes: 'DEFINE_MANY',

    /**
     * Definition of context types for this component.
     *
     * @type {object}
     * @optional
     */
    contextTypes: 'DEFINE_MANY',

    /**
     * Definition of context types this component sets for its children.
     *
     * @type {object}
     * @optional
     */
    childContextTypes: 'DEFINE_MANY',

    // ==== Definition methods ====

    /**
     * Invoked when the component is mounted. Values in the mapping will be set on
     * `this.props` if that prop is not specified (i.e. using an `in` check).
     *
     * This method is invoked before `getInitialState` and therefore cannot rely
     * on `this.state` or use `this.setState`.
     *
     * @return {object}
     * @optional
     */
    getDefaultProps: 'DEFINE_MANY_MERGED',

    /**
     * Invoked once before the component is mounted. The return value will be used
     * as the initial value of `this.state`.
     *
     *   getInitialState: function() {
     *     return {
     *       isOn: false,
     *       fooBaz: new BazFoo()
     *     }
     *   }
     *
     * @return {object}
     * @optional
     */
    getInitialState: 'DEFINE_MANY_MERGED',

    /**
     * @return {object}
     * @optional
     */
    getChildContext: 'DEFINE_MANY_MERGED',

    /**
     * Uses props from `this.props` and state from `this.state` to render the
     * structure of the component.
     *
     * No guarantees are made about when or how often this method is invoked, so
     * it must not have side effects.
     *
     *   render: function() {
     *     var name = this.props.name;
     *     return <div>Hello, {name}!</div>;
     *   }
     *
     * @return {ReactComponent}
     * @required
     */
    render: 'DEFINE_ONCE',

    // ==== Delegate methods ====

    /**
     * Invoked when the component is initially created and about to be mounted.
     * This may have side effects, but any external subscriptions or data created
     * by this method must be cleaned up in `componentWillUnmount`.
     *
     * @optional
     */
    componentWillMount: 'DEFINE_MANY',

    /**
     * Invoked when the component has been mounted and has a DOM representation.
     * However, there is no guarantee that the DOM node is in the document.
     *
     * Use this as an opportunity to operate on the DOM when the component has
     * been mounted (initialized and rendered) for the first time.
     *
     * @param {DOMElement} rootNode DOM element representing the component.
     * @optional
     */
    componentDidMount: 'DEFINE_MANY',

    /**
     * Invoked before the component receives new props.
     *
     * Use this as an opportunity to react to a prop transition by updating the
     * state using `this.setState`. Current props are accessed via `this.props`.
     *
     *   componentWillReceiveProps: function(nextProps, nextContext) {
     *     this.setState({
     *       likesIncreasing: nextProps.likeCount > this.props.likeCount
     *     });
     *   }
     *
     * NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop
     * transition may cause a state change, but the opposite is not true. If you
     * need it, you are probably looking for `componentWillUpdate`.
     *
     * @param {object} nextProps
     * @optional
     */
    componentWillReceiveProps: 'DEFINE_MANY',

    /**
     * Invoked while deciding if the component should be updated as a result of
     * receiving new props, state and/or context.
     *
     * Use this as an opportunity to `return false` when you're certain that the
     * transition to the new props/state/context will not require a component
     * update.
     *
     *   shouldComponentUpdate: function(nextProps, nextState, nextContext) {
     *     return !equal(nextProps, this.props) ||
     *       !equal(nextState, this.state) ||
     *       !equal(nextContext, this.context);
     *   }
     *
     * @param {object} nextProps
     * @param {?object} nextState
     * @param {?object} nextContext
     * @return {boolean} True if the component should update.
     * @optional
     */
    shouldComponentUpdate: 'DEFINE_ONCE',

    /**
     * Invoked when the component is about to update due to a transition from
     * `this.props`, `this.state` and `this.context` to `nextProps`, `nextState`
     * and `nextContext`.
     *
     * Use this as an opportunity to perform preparation before an update occurs.
     *
     * NOTE: You **cannot** use `this.setState()` in this method.
     *
     * @param {object} nextProps
     * @param {?object} nextState
     * @param {?object} nextContext
     * @param {ReactReconcileTransaction} transaction
     * @optional
     */
    componentWillUpdate: 'DEFINE_MANY',

    /**
     * Invoked when the component's DOM representation has been updated.
     *
     * Use this as an opportunity to operate on the DOM when the component has
     * been updated.
     *
     * @param {object} prevProps
     * @param {?object} prevState
     * @param {?object} prevContext
     * @param {DOMElement} rootNode DOM element representing the component.
     * @optional
     */
    componentDidUpdate: 'DEFINE_MANY',

    /**
     * Invoked when the component is about to be removed from its parent and have
     * its DOM representation destroyed.
     *
     * Use this as an opportunity to deallocate any external resources.
     *
     * NOTE: There is no `componentDidUnmount` since your component will have been
     * destroyed by that point.
     *
     * @optional
     */
    componentWillUnmount: 'DEFINE_MANY',

    // ==== Advanced methods ====

    /**
     * Updates the component's currently mounted DOM representation.
     *
     * By default, this implements React's rendering and reconciliation algorithm.
     * Sophisticated clients may wish to override this.
     *
     * @param {ReactReconcileTransaction} transaction
     * @internal
     * @overridable
     */
    updateComponent: 'OVERRIDE_BASE'
  };

  /**
   * Mapping from class specification keys to special processing functions.
   *
   * Although these are declared like instance properties in the specification
   * when defining classes using `React.createClass`, they are actually static
   * and are accessible on the constructor instead of the prototype. Despite
   * being static, they must be defined outside of the "statics" key under
   * which all other static methods are defined.
   */
  var RESERVED_SPEC_KEYS = {
    displayName: function(Constructor, displayName) {
      Constructor.displayName = displayName;
    },
    mixins: function(Constructor, mixins) {
      if (mixins) {
        for (var i = 0; i < mixins.length; i++) {
          mixSpecIntoComponent(Constructor, mixins[i]);
        }
      }
    },
    childContextTypes: function(Constructor, childContextTypes) {
      // if (process.env.NODE_ENV !== 'production') {
      //   validateTypeDef(Constructor, childContextTypes, 'childContext');
      // }
      Constructor.childContextTypes = _assign(
        {},
        Constructor.childContextTypes,
        childContextTypes
      );
    },
    contextTypes: function(Constructor, contextTypes) {
      // if (process.env.NODE_ENV !== 'production') {
      //   validateTypeDef(Constructor, contextTypes, 'context');
      // }
      Constructor.contextTypes = _assign(
        {},
        Constructor.contextTypes,
        contextTypes
      );
    },
    /**
     * Special case getDefaultProps which should move into statics but requires
     * automatic merging.
     */
    getDefaultProps: function(Constructor, getDefaultProps) {
      if (Constructor.getDefaultProps) {
        Constructor.getDefaultProps = createMergedResultFunction(
          Constructor.getDefaultProps,
          getDefaultProps
        );
      } else {
        Constructor.getDefaultProps = getDefaultProps;
      }
    },
    propTypes: function(Constructor, propTypes) {
      // if (process.env.NODE_ENV !== 'production') {
      //   validateTypeDef(Constructor, propTypes, 'prop');
      // }
      Constructor.propTypes = _assign({}, Constructor.propTypes, propTypes);
    },
    statics: function(Constructor, statics) {
      mixStaticSpecIntoComponent(Constructor, statics);
    },
    autobind: function() {}
  };

  function validateTypeDef(Constructor, typeDef, location) {
    for (var propName in typeDef) {
      // if (typeDef.hasOwnProperty(propName)) {
      //   // use a warning instead of an _invariant so components
      //   // don't show up in prod but only in __DEV__
      //   // if (process.env.NODE_ENV !== 'production') {
      //   //   warning(
      //   //     typeof typeDef[propName] === 'function',
      //   //     '%s: %s type `%s` is invalid; it must be a function, usually from ' +
      //   //       'React.PropTypes.',
      //   //     Constructor.displayName || 'ReactClass',
      //   //     ReactPropTypeLocationNames[location],
      //   //     propName
      //   //   );
      //   // }
      // }
    }
  }

  function validateMethodOverride(isAlreadyDefined, name) {
    var specPolicy = ReactClassInterface.hasOwnProperty(name)
      ? ReactClassInterface[name]
      : null;

    // Disallow overriding of base class methods unless explicitly allowed.
    if (ReactClassMixin.hasOwnProperty(name)) {
      // _invariant(
      //   specPolicy === 'OVERRIDE_BASE',
      //   'ReactClassInterface: You are attempting to override ' +
      //     '`%s` from your class specification. Ensure that your method names ' +
      //     'do not overlap with React methods.',
      //   name
      // );
    }

    // Disallow defining methods more than once unless explicitly allowed.
    if (isAlreadyDefined) {
      // _invariant(
      //   specPolicy === 'DEFINE_MANY' || specPolicy === 'DEFINE_MANY_MERGED',
      //   'ReactClassInterface: You are attempting to define ' +
      //     '`%s` on your component more than once. This conflict may be due ' +
      //     'to a mixin.',
      //   name
      // );
    }
  }

  /**
   * Mixin helper which handles policy validation and reserved
   * specification keys when building React classes.
   */
  function mixSpecIntoComponent(Constructor, spec) {
    if (!spec) {
      // if (process.env.NODE_ENV !== 'production') {
      //   var typeofSpec = typeof spec;
      //   var isMixinValid = typeofSpec === 'object' && spec !== null;
      //
      //   if (process.env.NODE_ENV !== 'production') {
      //     warning(
      //       isMixinValid,
      //       "%s: You're attempting to include a mixin that is either null " +
      //         'or not an object. Check the mixins included by the component, ' +
      //         'as well as any mixins they include themselves. ' +
      //         'Expected object but got %s.',
      //       Constructor.displayName || 'ReactClass',
      //       spec === null ? null : typeofSpec
      //     );
      //   }
      // }

      return;
    }

    // _invariant(
    //   typeof spec !== 'function',
    //   "ReactClass: You're attempting to " +
    //     'use a component class or function as a mixin. Instead, just use a ' +
    //     'regular object.'
    // );
    // _invariant(
    //   !isValidElement(spec),
    //   "ReactClass: You're attempting to " +
    //     'use a component as a mixin. Instead, just use a regular object.'
    // );

    var proto = Constructor.prototype;
    var autoBindPairs = proto.__reactAutoBindPairs;

    // By handling mixins before any other properties, we ensure the same
    // chaining order is applied to methods with DEFINE_MANY policy, whether
    // mixins are listed before or after these methods in the spec.
    if (spec.hasOwnProperty(MIXINS_KEY)) {
      RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
    }

    for (var name in spec) {
      if (!spec.hasOwnProperty(name)) {
        continue;
      }

      if (name === MIXINS_KEY) {
        // We have already handled mixins in a special case above.
        continue;
      }

      var property = spec[name];
      var isAlreadyDefined = proto.hasOwnProperty(name);
      validateMethodOverride(isAlreadyDefined, name);

      if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
        RESERVED_SPEC_KEYS[name](Constructor, property);
      } else {
        // Setup methods on prototype:
        // The following member methods should not be automatically bound:
        // 1. Expected ReactClass methods (in the "interface").
        // 2. Overridden methods (that were mixed in).
        var isReactClassMethod = ReactClassInterface.hasOwnProperty(name);
        var isFunction = typeof property === 'function';
        var shouldAutoBind =
          isFunction &&
          !isReactClassMethod &&
          !isAlreadyDefined &&
          spec.autobind !== false;

        if (shouldAutoBind) {
          autoBindPairs.push(name, property);
          proto[name] = property;
        } else {
          if (isAlreadyDefined) {
            var specPolicy = ReactClassInterface[name];

            // These cases should already be caught by validateMethodOverride.
            // _invariant(
            //   isReactClassMethod &&
            //     (specPolicy === 'DEFINE_MANY_MERGED' ||
            //       specPolicy === 'DEFINE_MANY'),
            //   'ReactClass: Unexpected spec policy %s for key %s ' +
            //     'when mixing in component specs.',
            //   specPolicy,
            //   name
            // );

            // For methods which are defined more than once, call the existing
            // methods before calling the new property, merging if appropriate.
            if (specPolicy === 'DEFINE_MANY_MERGED') {
              proto[name] = createMergedResultFunction(proto[name], property);
            } else if (specPolicy === 'DEFINE_MANY') {
              proto[name] = createChainedFunction(proto[name], property);
            }
          } else {
            proto[name] = property;
            // if (process.env.NODE_ENV !== 'production') {
            //   // Add verbose displayName to the function, which helps when looking
            //   // at profiling tools.
            //   if (typeof property === 'function' && spec.displayName) {
            //     proto[name].displayName = spec.displayName + '_' + name;
            //   }
            // }
          }
        }
      }
    }
  }

  function mixStaticSpecIntoComponent(Constructor, statics) {
    if (!statics) {
      return;
    }
    for (var name in statics) {
      var property = statics[name];
      if (!statics.hasOwnProperty(name)) {
        continue;
      }

      var isReserved = name in RESERVED_SPEC_KEYS;
      // _invariant(
      //   !isReserved,
      //   'ReactClass: You are attempting to define a reserved ' +
      //     'property, `%s`, that shouldn\'t be on the "statics" key. Define it ' +
      //     'as an instance property instead; it will still be accessible on the ' +
      //     'constructor.',
      //   name
      // );

      var isInherited = name in Constructor;
      // _invariant(
      //   !isInherited,
      //   'ReactClass: You are attempting to define ' +
      //     '`%s` on your component more than once. This conflict may be ' +
      //     'due to a mixin.',
      //   name
      // );
      Constructor[name] = property;
    }
  }

  /**
   * Merge two objects, but throw if both contain the same key.
   *
   * @param {object} one The first object, which is mutated.
   * @param {object} two The second object
   * @return {object} one after it has been mutated to contain everything in two.
   */
  function mergeIntoWithNoDuplicateKeys(one, two) {
    // _invariant(
    //   one && two && typeof one === 'object' && typeof two === 'object',
    //   'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.'
    // );

    for (var key in two) {
      if (two.hasOwnProperty(key)) {
        // _invariant(
        //   one[key] === undefined,
        //   'mergeIntoWithNoDuplicateKeys(): ' +
        //     'Tried to merge two objects with the same key: `%s`. This conflict ' +
        //     'may be due to a mixin; in particular, this may be caused by two ' +
        //     'getInitialState() or getDefaultProps() methods returning objects ' +
        //     'with clashing keys.',
        //   key
        // );
        one[key] = two[key];
      }
    }
    return one;
  }

  /**
   * Creates a function that invokes two functions and merges their return values.
   *
   * @param {function} one Function to invoke first.
   * @param {function} two Function to invoke second.
   * @return {function} Function that invokes the two argument functions.
   * @private
   */
  function createMergedResultFunction(one, two) {
    return function mergedResult() {
      var a = one.apply(this, arguments);
      var b = two.apply(this, arguments);
      if (a == null) {
        return b;
      } else if (b == null) {
        return a;
      }
      var c = {};
      mergeIntoWithNoDuplicateKeys(c, a);
      mergeIntoWithNoDuplicateKeys(c, b);
      return c;
    };
  }

  /**
   * Creates a function that invokes two functions and ignores their return vales.
   *
   * @param {function} one Function to invoke first.
   * @param {function} two Function to invoke second.
   * @return {function} Function that invokes the two argument functions.
   * @private
   */
  function createChainedFunction(one, two) {
    return function chainedFunction() {
      one.apply(this, arguments);
      two.apply(this, arguments);
    };
  }

  /**
   * Binds a method to the component.
   *
   * @param {object} component Component whose method is going to be bound.
   * @param {function} method Method to be bound.
   * @return {function} The bound method.
   */
  function bindAutoBindMethod(component, method) {
    var boundMethod = method.bind(component);
    // if (process.env.NODE_ENV !== 'production') {
    //   boundMethod.__reactBoundContext = component;
    //   boundMethod.__reactBoundMethod = method;
    //   boundMethod.__reactBoundArguments = null;
    //   var componentName = component.constructor.displayName;
    //   var _bind = boundMethod.bind;
    //   boundMethod.bind = function(newThis) {
    //     for (
    //       var _len = arguments.length,
    //         args = Array(_len > 1 ? _len - 1 : 0),
    //         _key = 1;
    //       _key < _len;
    //       _key++
    //     ) {
    //       args[_key - 1] = arguments[_key];
    //     }
    //
    //     // User is trying to bind() an autobound method; we effectively will
    //     // ignore the value of "this" that the user is trying to use, so
    //     // let's warn.
    //     if (newThis !== component && newThis !== null) {
    //       if (process.env.NODE_ENV !== 'production') {
    //         warning(
    //           false,
    //           'bind(): React component methods may only be bound to the ' +
    //             'component instance. See %s',
    //           componentName
    //         );
    //       }
    //     } else if (!args.length) {
    //       if (process.env.NODE_ENV !== 'production') {
    //         warning(
    //           false,
    //           'bind(): You are binding a component method to the component. ' +
    //             'React does this for you automatically in a high-performance ' +
    //             'way, so you can safely remove this call. See %s',
    //           componentName
    //         );
    //       }
    //       return boundMethod;
    //     }
    //     var reboundMethod = _bind.apply(boundMethod, arguments);
    //     reboundMethod.__reactBoundContext = component;
    //     reboundMethod.__reactBoundMethod = method;
    //     reboundMethod.__reactBoundArguments = args;
    //     return reboundMethod;
    //   };
    // }
    return boundMethod;
  }

  /**
   * Binds all auto-bound methods in a component.
   *
   * @param {object} component Component whose method is going to be bound.
   */
  function bindAutoBindMethods(component) {
    var pairs = component.__reactAutoBindPairs;
    for (var i = 0; i < pairs.length; i += 2) {
      var autoBindKey = pairs[i];
      var method = pairs[i + 1];
      component[autoBindKey] = bindAutoBindMethod(component, method);
    }
  }

  var IsMountedPreMixin = {
    componentDidMount: function() {
      this.__isMounted = true;
    }
  };

  var IsMountedPostMixin = {
    componentWillUnmount: function() {
      this.__isMounted = false;
    }
  };

  /**
   * Add more to the ReactClass base class. These are all legacy features and
   * therefore not already part of the modern ReactComponent.
   */
  var ReactClassMixin = {
    /**
     * TODO: This will be deprecated because state should always keep a consistent
     * type signature and the only use case for this, is to avoid that.
     */
    replaceState: function(newState, callback) {
      this.updater.enqueueReplaceState(this, newState, callback);
    },

    /**
     * Checks whether or not this composite component is mounted.
     * @return {boolean} True if mounted, false otherwise.
     * @protected
     * @final
     */
    isMounted: function() {
      // if (process.env.NODE_ENV !== 'production') {
      //   warning(
      //     this.__didWarnIsMounted,
      //     '%s: isMounted is deprecated. Instead, make sure to clean up ' +
      //       'subscriptions and pending requests in componentWillUnmount to ' +
      //       'prevent memory leaks.',
      //     (this.constructor && this.constructor.displayName) ||
      //       this.name ||
      //       'Component'
      //   );
      //   this.__didWarnIsMounted = true;
      // }
      return !!this.__isMounted;
    }
  };

  var ReactClassComponent = function() {};
  _assign(
    ReactClassComponent.prototype,
    ReactComponent.prototype,
    ReactClassMixin
  );

  /**
   * Creates a composite component class given a class specification.
   * See https://facebook.github.io/react/docs/top-level-api.html#react.createclass
   *
   * @param {object} spec Class specification (which must define `render`).
   * @return {function} Component constructor function.
   * @public
   */
  function createClass(spec) {
    // To keep our warnings more understandable, we'll use a little hack here to
    // ensure that Constructor.name !== 'Constructor'. This makes sure we don't
    // unnecessarily identify a class without displayName as 'Constructor'.
    var Constructor = identity(function(props, context, updater) {
      // This constructor gets overridden by mocks. The argument is used
      // by mocks to assert on what gets mounted.

      // if (process.env.NODE_ENV !== 'production') {
      //   warning(
      //     this instanceof Constructor,
      //     'Something is calling a React component directly. Use a factory or ' +
      //       'JSX instead. See: https://fb.me/react-legacyfactory'
      //   );
      // }

      // Wire up auto-binding
      if (this.__reactAutoBindPairs.length) {
        bindAutoBindMethods(this);
      }

      this.props = props;
      this.context = context;
      this.refs = emptyObject;
      this.updater = updater || ReactNoopUpdateQueue;

      this.state = null;

      // ReactClasses doesn't have constructors. Instead, they use the
      // getInitialState and componentWillMount methods for initialization.

      var initialState = this.getInitialState ? this.getInitialState() : null;
      // if (process.env.NODE_ENV !== 'production') {
      //   // We allow auto-mocks to proceed as if they're returning null.
      //   if (
      //     initialState === undefined &&
      //     this.getInitialState._isMockFunction
      //   ) {
      //     // This is probably bad practice. Consider warning here and
      //     // deprecating this convenience.
      //     initialState = null;
      //   }
      // }
      // _invariant(
      //   typeof initialState === 'object' && !Array.isArray(initialState),
      //   '%s.getInitialState(): must return an object or null',
      //   Constructor.displayName || 'ReactCompositeComponent'
      // );

      this.state = initialState;
    });
    Constructor.prototype = new ReactClassComponent();
    Constructor.prototype.constructor = Constructor;
    Constructor.prototype.__reactAutoBindPairs = [];

    injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor));

    mixSpecIntoComponent(Constructor, IsMountedPreMixin);
    mixSpecIntoComponent(Constructor, spec);
    mixSpecIntoComponent(Constructor, IsMountedPostMixin);

    // Initialize the defaultProps property after all mixins have been merged.
    if (Constructor.getDefaultProps) {
      Constructor.defaultProps = Constructor.getDefaultProps();
    }

    // if (process.env.NODE_ENV !== 'production') {
    //   // This is a tag to indicate that the use of these method names is ok,
    //   // since it's used with createClass. If it's not, then it's likely a
    //   // mistake so we'll warn you to use the static property, property
    //   // initializer or constructor respectively.
    //   if (Constructor.getDefaultProps) {
    //     Constructor.getDefaultProps.isReactClassApproved = {};
    //   }
    //   if (Constructor.prototype.getInitialState) {
    //     Constructor.prototype.getInitialState.isReactClassApproved = {};
    //   }
    // }

    // _invariant(
    //   Constructor.prototype.render,
    //   'createClass(...): Class specification must implement a `render` method.'
    // );

    // if (process.env.NODE_ENV !== 'production') {
    //   warning(
    //     !Constructor.prototype.componentShouldUpdate,
    //     '%s has a method called ' +
    //       'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
    //       'The name is phrased as a question because the function is ' +
    //       'expected to return a value.',
    //     spec.displayName || 'A component'
    //   );
    //   warning(
    //     !Constructor.prototype.componentWillRecieveProps,
    //     '%s has a method called ' +
    //       'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
    //     spec.displayName || 'A component'
    //   );
    // }

    // Reduce time spent doing lookups by setting these on the prototype.
    for (var methodName in ReactClassInterface) {
      if (!Constructor.prototype[methodName]) {
        Constructor.prototype[methodName] = null;
      }
    }

    return Constructor;
  }

  return createClass;
}
|}
];

[@bs.module "react"] external reactComponent : 'a = "Component";

[@bs.module "react"] external reactIsValidElement : bool = "isValidElement";

[@bs.module "react"] [@bs.new] external newReactComponent : unit => {. "updater": 'a} =
  "Component";

let reactNoopUpdateQueue = newReactComponent()##updater;

let createClass = [@bs] factory(reactComponent, reactIsValidElement, reactNoopUpdateQueue);

};

module ReasonReact = {
#1 ReasonReact
type reactClass;

type jsProps;

type reactElement;

type reactRef;

[@deprecated "Please use ReasonReact.null instead"] [@bs.val]
external nullElement : reactElement = "null";

[@deprecated "Please use ReasonReact.string instead"]
external stringToElement : string => reactElement = "%identity";

[@deprecated "Please use ReasonReact.array instead"]
external arrayToElement : array(reactElement) => reactElement = "%identity";

[@bs.val] external null : reactElement = "null";

external string : string => reactElement = "%identity";

external array : array(reactElement) => reactElement = "%identity";

external refToJsObj : reactRef => Js.t({..}) = "%identity";

[@bs.splice] [@bs.val] [@bs.module "react"]
external createElement :
  (reactClass, ~props: Js.t({..})=?, array(reactElement)) => reactElement =
  "createElement";

[@bs.splice] [@bs.module "react"]
external cloneElement :
  (reactElement, ~props: Js.t({..})=?, array(reactElement)) => reactElement =
  "cloneElement";

[@bs.val] [@bs.module "react"]
external createElementVerbatim : 'a = "createElement";

let createDomElement = (s, ~props, children) => {
  let vararg =
    [|Obj.magic(s), Obj.magic(props)|] |> Js.Array.concat(children);
  /* Use varargs to avoid warnings on duplicate keys in children */
  Obj.magic(createElementVerbatim)##apply(Js.Nullable.null, vararg);
};

[@bs.val] external magicNull : 'a = "null";

type reactClassInternal = reactClass;

type renderNotImplemented =
  | RenderNotImplemented;

type stateless = unit;

type noRetainedProps = unit;

type actionless = unit;

type subscription =
  | Sub(unit => 'token, 'token => unit): subscription;


/***
 * Elements are what JSX blocks become. They represent the *potential* for a
 * component instance and state to be created / updated. They are not yet
 * instances.
 */
type element =
  | Element(component('state, 'retainedProps, 'action)): element
and jsPropsToReason('jsProps, 'state, 'retainedProps, 'action) =
  'jsProps => component('state, 'retainedProps, 'action)
/***
 * Type of hidden field for Reason components that use JS components
 */
and jsElementWrapped =
  option(
    (
      ~key: Js.nullable(string),
      ~ref: Js.nullable(Js.nullable(reactRef) => unit)
    ) =>
    reactElement,
  )
and update('state, 'retainedProps, 'action) =
  | NoUpdate
  | Update('state)
  | SideEffects(self('state, 'retainedProps, 'action) => unit)
  | UpdateWithSideEffects(
      'state,
      self('state, 'retainedProps, 'action) => unit,
    )
/***
 * Granularly types state, and initial state as being independent, so that we
 * may include a template that all instances extend from.
 */
and componentSpec(
  'state,
  'initialState,
  'retainedProps,
  'initialRetainedProps,
  'action,
) = {
  debugName: string,
  reactClassInternal,
  /* Keep here as a way to prove that the API may be implemented soundly */
  mutable handedOffState: ref(option('state)),
  willReceiveProps: self('state, 'retainedProps, 'action) => 'state,
  didMount: self('state, 'retainedProps, 'action) => unit,
  didUpdate: oldNewSelf('state, 'retainedProps, 'action) => unit,
  willUnmount: self('state, 'retainedProps, 'action) => unit,
  willUpdate: oldNewSelf('state, 'retainedProps, 'action) => unit,
  shouldUpdate: oldNewSelf('state, 'retainedProps, 'action) => bool,
  render: self('state, 'retainedProps, 'action) => reactElement,
  initialState: unit => 'initialState,
  retainedProps: 'initialRetainedProps,
  reducer: ('action, 'state) => update('state, 'retainedProps, 'action),
  subscriptions: self('state, 'retainedProps, 'action) => list(subscription),
  jsElementWrapped,
}
and component('state, 'retainedProps, 'action) =
  componentSpec('state, 'state, 'retainedProps, 'retainedProps, 'action)
and self('state, 'retainedProps, 'action) = {
  handle:
    'payload .
    (('payload, self('state, 'retainedProps, 'action)) => unit, 'payload) =>
    unit,
  state: 'state,
  retainedProps: 'retainedProps,
  send: 'action => unit,
  onUnmount: (unit => unit) => unit,
}
and oldNewSelf('state, 'retainedProps, 'action) = {
  oldSelf: self('state, 'retainedProps, 'action),
  newSelf: self('state, 'retainedProps, 'action),
};

type jsComponentThis('state, 'props, 'retainedProps, 'action) = {
  .
  "state": totalState('state, 'retainedProps, 'action),
  "props": {. "reasonProps": 'props},
  "setState":
    [@bs.meth] (
      (
        (totalState('state, 'retainedProps, 'action), 'props) =>
        totalState('state, 'retainedProps, 'action),
        Js.nullable(unit => unit)
      ) =>
      unit
    ),
  "jsPropsToReason":
    option(jsPropsToReason('props, 'state, 'retainedProps, 'action)),
}
/***
 * `totalState` tracks all of the internal reason API bookkeeping.
 *
 * Since we will mutate `totalState` in `shouldComponentUpdate`, and since
 * there's no guarantee that returning true from `shouldComponentUpdate`
 * guarantees that a component's update *actually* takes place (it could get
 * rolled back by Fiber etc), then we should put all properties that we
 * mutate directly on the totalState, so that when Fiber makes backup shallow
 * backup copies of `totalState`, our changes can be rolled back correctly
 * even when we mutate them.
 */
and totalState('state, 'retainedProps, 'action) = {. "reasonState": 'state};

let anyToUnit = (_) => ();

let anyToTrue = (_) => true;

let willReceivePropsDefault = ({state}) => state;

let renderDefault = _self => string("RenderNotImplemented");

let initialStateDefault = () => ();

let reducerDefault:
  ('action, 'state) => update('state, 'retainedProps, 'action) =
  (_action, _state) => NoUpdate;

let subscriptionsDefault = _self => [];

let convertPropsIfTheyreFromJs = (props, jsPropsToReason, debugName) => {
  let props = Obj.magic(props);
  switch (Js.Nullable.toOption(props##reasonProps), jsPropsToReason) {
  | (Some(props), _) => props
  /* TODO: annotate with BS to avoid curry overhead */
  | (None, Some(toReasonProps)) => Element(toReasonProps(props))
  | (None, None) =>
    raise(
      Invalid_argument(
        "A JS component called the Reason component "
        ++ debugName
        ++ " which didn't implement the JS->Reason React props conversion.",
      ),
    )
  };
};

/* This prepares us to remove our dependency on List, which shrinks
   ReasonReact dramatically and makes it adoptible on some codebases with tightly enforced size constraints */
let arrayOfList = l => {
  let rec arrayOfList = (l, acc) =>
    switch (l) {
    | [] => Js.Array.reverseInPlace(acc)
    | [head, ...rest] =>
      ignore(Js.Array.push(head, acc));
      arrayOfList(rest, acc);
    };
  arrayOfList(l, [||]);
};

let createClass =
    (type reasonState, type retainedProps, type action, debugName)
    : reactClass =>
  ReasonReactOptimizedCreateClass.createClass(.
    [@bs]
    {
      val displayName = debugName;
      val mutable subscriptions = Js.null;
      /***
       * TODO: Avoid allocating this every time we need it. Should be doable.
       */
      pub self = (state, retainedProps) => {
        handle: Obj.magic(this##handleMethod),
        send: Obj.magic(this##sendMethod),
        state,
        retainedProps,
        onUnmount: Obj.magic(this##onUnmountMethod),
      };
      /***
       * TODO: Null out fields that aren't overridden beyond defaults in
       * `component`. React optimizes components that don't implement
       * lifecycles!
       */
      pub transitionNextTotalState = (curTotalState, reasonStateUpdate) =>
        switch (reasonStateUpdate) {
        | NoUpdate => (None, curTotalState)
        | Update(nextReasonState) => (
            None,
            {"reasonState": nextReasonState},
          )
        | SideEffects(performSideEffects) => (
            Some(performSideEffects),
            curTotalState,
          )
        | UpdateWithSideEffects(nextReasonState, performSideEffects) => (
            Some(performSideEffects),
            {"reasonState": nextReasonState},
          )
        };
      pub getInitialState = () : totalState('state, 'retainedProps, 'action) => {
        let thisJs:
          jsComponentThis(reasonState, element, retainedProps, action) = [%bs.raw
          "this"
        ];
        let convertedReasonProps =
          convertPropsIfTheyreFromJs(
            thisJs##props,
            thisJs##jsPropsToReason,
            debugName,
          );
        let Element(component) = convertedReasonProps;
        let initialReasonState = component.initialState();
        {"reasonState": Obj.magic(initialReasonState)};
      };
      pub componentDidMount = () => {
        let thisJs:
          jsComponentThis(reasonState, element, retainedProps, action) = [%bs.raw
          "this"
        ];
        let convertedReasonProps =
          convertPropsIfTheyreFromJs(
            thisJs##props,
            thisJs##jsPropsToReason,
            debugName,
          );
        let Element(component) = convertedReasonProps;
        let curTotalState = thisJs##state;
        let curReasonState = curTotalState##reasonState;
        let self =
          this##self(curReasonState, Obj.magic(component.retainedProps));
        let self = Obj.magic(self);
        if (component.subscriptions !== subscriptionsDefault) {
          let subscriptions =
            component.subscriptions(self)
            |> arrayOfList
            |> Js.Array.map((Sub(subscribe, unsubscribe)) => {
                 let token = subscribe();
                 () => unsubscribe(token);
               });
          this##subscriptions#=(Js.Null.return(subscriptions));
        };
        if (component.didMount !== anyToUnit) {
          component.didMount(self);
        };
      };
      pub componentDidUpdate = (prevProps, prevState) => {
        let thisJs:
          jsComponentThis(reasonState, element, retainedProps, action) = [%bs.raw
          "this"
        ];
        let curState = thisJs##state;
        let curReasonState = curState##reasonState;
        let newJsProps = thisJs##props;
        let newConvertedReasonProps =
          convertPropsIfTheyreFromJs(
            newJsProps,
            thisJs##jsPropsToReason,
            debugName,
          );
        let Element(newComponent) = newConvertedReasonProps;
        if (newComponent.didUpdate !== anyToUnit) {
          let oldConvertedReasonProps =
            prevProps === newJsProps ?
              newConvertedReasonProps :
              convertPropsIfTheyreFromJs(
                prevProps,
                thisJs##jsPropsToReason,
                debugName,
              );
          let Element(oldComponent) = oldConvertedReasonProps;
          let prevReasonState = prevState##reasonState;
          let prevReasonState = Obj.magic(prevReasonState);
          let newSelf =
            this##self(
              curReasonState,
              Obj.magic(newComponent.retainedProps),
            );
          let newSelf = Obj.magic(newSelf);
          /* bypass this##self call for small perf boost */
          let oldSelf =
            Obj.magic({
              ...newSelf,
              state: prevReasonState,
              retainedProps: oldComponent.retainedProps,
            });
          newComponent.didUpdate({oldSelf, newSelf});
        };
      };
      /* pub componentWillMount .. TODO (or not?) */
      pub componentWillUnmount = () => {
        let thisJs:
          jsComponentThis(reasonState, element, retainedProps, action) = [%bs.raw
          "this"
        ];
        let convertedReasonProps =
          convertPropsIfTheyreFromJs(
            thisJs##props,
            thisJs##jsPropsToReason,
            debugName,
          );
        let Element(component) = convertedReasonProps;
        let curState = thisJs##state;
        let curReasonState = curState##reasonState;
        if (component.willUnmount !== anyToUnit) {
          let self =
            this##self(curReasonState, Obj.magic(component.retainedProps));
          let self = Obj.magic(self);
          component.willUnmount(self);
        };
        switch (Js.Null.toOption(this##subscriptions)) {
        | None => ()
        | Some(subs) => Js.Array.forEach(unsubscribe => unsubscribe(), subs)
        };
      };
      /***
       * If we are even getting this far, we've already done all the logic for
       * detecting unnecessary updates in shouldComponentUpdate. We know at
       * this point that we need to rerender, and we've even *precomputed* the
       * render result (subelements)!
       */
      pub componentWillUpdate = (nextProps, nextState: totalState(_)) => {
        let thisJs:
          jsComponentThis(reasonState, element, retainedProps, action) = [%bs.raw
          "this"
        ];
        let newConvertedReasonProps =
          convertPropsIfTheyreFromJs(
            nextProps,
            thisJs##jsPropsToReason,
            debugName,
          );
        let Element(newComponent) = newConvertedReasonProps;
        if (newComponent.willUpdate !== anyToUnit) {
          let oldJsProps = thisJs##props;
          /* Avoid converting again the props that are just the same as curProps. */
          let oldConvertedReasonProps =
            nextProps === oldJsProps ?
              newConvertedReasonProps :
              convertPropsIfTheyreFromJs(
                oldJsProps,
                thisJs##jsPropsToReason,
                debugName,
              );
          let Element(oldComponent) = oldConvertedReasonProps;
          let curState = thisJs##state;
          let curReasonState = curState##reasonState;
          let curReasonState = Obj.magic(curReasonState);
          let nextReasonState = nextState##reasonState;
          let newSelf =
            this##self(
              nextReasonState,
              Obj.magic(newComponent.retainedProps),
            );
          let newSelf = Obj.magic(newSelf);
          /* bypass this##self call for small perf boost */
          let oldSelf =
            Obj.magic({
              ...newSelf,
              state: curReasonState,
              retainedProps: oldComponent.retainedProps,
            });
          newComponent.willUpdate({oldSelf, newSelf});
        };
      };
      /***
       * One interesting part of the new Reason React API. There isn't a need
       * for a separate `willReceiveProps` function. The primary `create` API
       * is *always* receiving props.
       */
      pub componentWillReceiveProps = nextProps => {
        let thisJs:
          jsComponentThis(reasonState, element, retainedProps, action) = [%bs.raw
          "this"
        ];
        let newConvertedReasonProps =
          convertPropsIfTheyreFromJs(
            nextProps,
            thisJs##jsPropsToReason,
            debugName,
          );
        let Element(newComponent) = Obj.magic(newConvertedReasonProps);
        if (newComponent.willReceiveProps !== willReceivePropsDefault) {
          let oldJsProps = thisJs##props;
          /* Avoid converting again the props that are just the same as curProps. */
          let oldConvertedReasonProps =
            nextProps === oldJsProps ?
              newConvertedReasonProps :
              convertPropsIfTheyreFromJs(
                oldJsProps,
                thisJs##jsPropsToReason,
                debugName,
              );
          let Element(oldComponent) = oldConvertedReasonProps;
          thisJs##setState(
            (curTotalState, _) => {
              let curReasonState = Obj.magic(curTotalState##reasonState);
              let oldSelf =
                Obj.magic(
                  this##self(
                    curReasonState,
                    Obj.magic(oldComponent.retainedProps),
                  ),
                );
              let nextReasonState =
                Obj.magic(newComponent.willReceiveProps(oldSelf));
              if (nextReasonState !== curTotalState) {
                let nextTotalState: totalState(_) = {
                  "reasonState": nextReasonState,
                };
                let nextTotalState = Obj.magic(nextTotalState);
                nextTotalState;
              } else {
                curTotalState;
              };
            },
            Js.Nullable.null,
          );
        };
      };
      /***
       * shouldComponentUpdate is invoked any time props change, or new state
       * updates occur.
       *
       * The easiest way to think about this method, is:
       * - "Should component have its componentWillUpdate method called,
       * followed by its render() method?",
       *
       * Therefore the component.shouldUpdate becomes a hook solely to perform
       * performance optimizations through.
       */
      pub shouldComponentUpdate = (nextJsProps, nextState, _) => {
        let thisJs:
          jsComponentThis(reasonState, element, retainedProps, action) = [%bs.raw
          "this"
        ];
        let curJsProps = thisJs##props;

        /***
         * Now, we inspect the next state that we are supposed to render, and ensure that
         * - We have enough information to answer "should update?"
         * - We have enough information to render() in the event that the answer is "true".
         *
         * If we can detect that props have changed update has occured,
         * we ask the component's shouldUpdate if it would like to update - defaulting to true.
         */
        let oldConvertedReasonProps =
          convertPropsIfTheyreFromJs(
            thisJs##props,
            thisJs##jsPropsToReason,
            debugName,
          );
        /* Avoid converting again the props that are just the same as curProps. */
        let newConvertedReasonProps =
          nextJsProps === curJsProps ?
            oldConvertedReasonProps :
            convertPropsIfTheyreFromJs(
              nextJsProps,
              thisJs##jsPropsToReason,
              debugName,
            );
        let Element(oldComponent) = oldConvertedReasonProps;
        let Element(newComponent) = newConvertedReasonProps;
        let nextReasonState = nextState##reasonState;
        let newSelf =
          this##self(nextReasonState, Obj.magic(newComponent.retainedProps));
        if (newComponent.shouldUpdate !== anyToTrue) {
          let curState = thisJs##state;
          let curReasonState = curState##reasonState;
          let curReasonState = Obj.magic(curReasonState);
          let newSelf = Obj.magic(newSelf);
          /* bypass this##self call for small perf boost */
          let oldSelf =
            Obj.magic({
              ...newSelf,
              state: curReasonState,
              retainedProps: oldComponent.retainedProps,
            });
          newComponent.shouldUpdate({oldSelf, newSelf});
        } else {
          true;
        };
      };
      pub onUnmountMethod = subscription =>
        switch (Js.Null.toOption(this##subscriptions)) {
        | None => this##subscriptions#=(Js.Null.return([|subscription|]))
        | Some(subs) => ignore(Js.Array.push(subscription, subs))
        };
      pub handleMethod = callback => {
        let thisJs:
          jsComponentThis(reasonState, element, retainedProps, action) = [%bs.raw
          "this"
        ];
        callbackPayload => {
          let curState = thisJs##state;
          let curReasonState = curState##reasonState;
          let convertedReasonProps =
            convertPropsIfTheyreFromJs(
              thisJs##props,
              thisJs##jsPropsToReason,
              debugName,
            );
          let Element(component) = convertedReasonProps;
          callback(
            callbackPayload,
            Obj.magic(
              this##self(curReasonState, Obj.magic(component.retainedProps)),
            ),
          );
        };
      };
      pub sendMethod = (action: 'action) => {
        let thisJs:
          jsComponentThis(reasonState, element, retainedProps, action) = [%bs.raw
          "this"
        ];
        let convertedReasonProps =
          convertPropsIfTheyreFromJs(
            thisJs##props,
            thisJs##jsPropsToReason,
            debugName,
          );
        let Element(component) = convertedReasonProps;
        if (component.reducer !== reducerDefault) {
          let sideEffects = ref(ignore);
          /* allow side-effects to be executed here */
          let partialStateApplication = component.reducer(Obj.magic(action));
          thisJs##setState(
            (curTotalState, _) => {
              let curReasonState = curTotalState##reasonState;
              let reasonStateUpdate =
                partialStateApplication(Obj.magic(curReasonState));
              if (reasonStateUpdate === NoUpdate) {
                magicNull;
              } else {
                let reasonStateUpdate = Obj.magic(reasonStateUpdate);
                let (performSideEffects, nextTotalState) =
                  this##transitionNextTotalState(
                    curTotalState,
                    reasonStateUpdate,
                  );
                switch (performSideEffects) {
                | Some(performSideEffects) =>
                  sideEffects.contents = performSideEffects
                | None => ()
                };
                if (nextTotalState !== curTotalState) {
                  nextTotalState;
                } else {
                  magicNull;
                };
              };
            },
            Js.Nullable.return(
              this##handleMethod(((), self) => sideEffects.contents(self)),
            ),
          );
        };
      };
      /***
       * In order to ensure we always operate on freshest props / state, and to
       * support the API that "reduces" the next state along with the next
       * rendering, with full acccess to named argument props in the closure,
       * we always *pre* compute the render result.
       */
      pub render = () => {
        let thisJs:
          jsComponentThis(reasonState, element, retainedProps, action) = [%bs.raw
          "this"
        ];
        let convertedReasonProps =
          convertPropsIfTheyreFromJs(
            thisJs##props,
            thisJs##jsPropsToReason,
            debugName,
          );
        let Element(created) = Obj.magic(convertedReasonProps);
        let component = created;
        let curState = thisJs##state;
        let curReasonState = Obj.magic(curState##reasonState);
        let self =
          Obj.magic(
            this##self(curReasonState, Obj.magic(component.retainedProps)),
          );
        component.render(self);
      }
    },
  );

let basicComponent = debugName => {
  let componentTemplate = {
    reactClassInternal: createClass(debugName),
    debugName,
    /* Keep here as a way to prove that the API may be implemented soundly */
    handedOffState: {
      contents: None,
    },
    didMount: anyToUnit,
    willReceiveProps: willReceivePropsDefault,
    didUpdate: anyToUnit,
    willUnmount: anyToUnit,
    willUpdate: anyToUnit,
    /***
     * Called when component will certainly mount at some point - and may be
     * called on the sever for server side React rendering.
     */
    shouldUpdate: anyToTrue,
    render: renderDefault,
    initialState: initialStateDefault,
    reducer: reducerDefault,
    jsElementWrapped: None,
    retainedProps: (),
    subscriptions: subscriptionsDefault,
  };
  componentTemplate;
};

let statelessComponent =
    debugName
    : component(stateless, noRetainedProps, actionless) =>
  basicComponent(debugName);

let statelessComponentWithRetainedProps =
    debugName
    : componentSpec(
        stateless,
        stateless,
        'retainedProps,
        noRetainedProps,
        actionless,
      ) =>
  basicComponent(debugName);

let reducerComponent =
    debugName
    : componentSpec(
        'state,
        stateless,
        noRetainedProps,
        noRetainedProps,
        'action,
      ) =>
  basicComponent(debugName);

let reducerComponentWithRetainedProps =
    debugName
    : componentSpec(
        'state,
        stateless,
        'retainedProps,
        noRetainedProps,
        'action,
      ) =>
  basicComponent(debugName);


/***
 * Convenience for creating React elements before we have a better JSX transform.  Hopefully this makes it
 * usable to build some components while waiting to migrate the JSX transform to the next API.
 *
 * Constrain the component here instead of relying on the Element constructor which would lead to confusing
 * error messages.
 */
let element =
    (
      ~key: string=Obj.magic(Js.Nullable.undefined),
      ~ref: Js.nullable(reactRef) => unit=Obj.magic(Js.Nullable.undefined),
      component: component('state, 'retainedProps, 'action),
    ) => {
  let element = Element(component);
  switch (component.jsElementWrapped) {
  | Some(jsElementWrapped) =>
    jsElementWrapped(
      ~key=Js.Nullable.return(key),
      ~ref=Js.Nullable.return(ref),
    )
  | None =>
    createElement(
      component.reactClassInternal,
      ~props={"key": key, "ref": ref, "reasonProps": element},
      [||],
    )
  };
};

let wrapReasonForJs =
    (
      ~component,
      jsPropsToReason:
        jsPropsToReason('jsProps, 'state, 'retainedProps, 'action),
    ) => {
  let jsPropsToReason:
    jsPropsToReason(jsProps, 'state, 'retainedProps, 'action) =
    Obj.magic(jsPropsToReason) /* cast 'jsProps to jsProps */;
  Obj.magic(component.reactClassInternal)##prototype##jsPropsToReason#=(
                                                                    Some(
                                                                    jsPropsToReason,
                                                                    )
                                                                    );
  component.reactClassInternal;
};

module WrapProps = {
  /* We wrap the props for reason->reason components, as a marker that "these props were passed from another
     reason component" */
  let wrapProps =
      (
        ~reactClass,
        ~props,
        children,
        ~key: Js.nullable(string),
        ~ref: Js.nullable(Js.nullable(reactRef) => unit),
      ) => {
    let props =
      Js.Obj.assign(
        Js.Obj.assign(Js.Obj.empty(), Obj.magic(props)),
        {"ref": ref, "key": key},
      );
    let varargs =
      [|Obj.magic(reactClass), Obj.magic(props)|]
      |> Js.Array.concat(Obj.magic(children));
    /* Use varargs under the hood */
    Obj.magic(createElementVerbatim)##apply(Js.Nullable.null, varargs);
  };
  let dummyInteropComponent = basicComponent("interop");
  let wrapJsForReason =
      (~reactClass, ~props, children)
      : component(stateless, noRetainedProps, _) => {
    let jsElementWrapped = Some(wrapProps(~reactClass, ~props, children));
    {...dummyInteropComponent, jsElementWrapped};
  };
};

let wrapJsForReason = WrapProps.wrapJsForReason;

module Router = {
  [@bs.get] external location : Dom.window => Dom.location = "";

  [@bs.send]
  /* actually the cb is Dom.event => unit, but let's restrict the access for now */
  external addEventListener : (Dom.window, string, unit => unit) => unit = "";

  [@bs.send]
  external removeEventListener : (Dom.window, string, unit => unit) => unit =
    "";

  [@bs.send] external dispatchEvent : (Dom.window, Dom.event) => unit = "";

  [@bs.get] external pathname : Dom.location => string = "";

  [@bs.get] external hash : Dom.location => string = "";

  [@bs.get] external search : Dom.location => string = "";

  [@bs.send]
  external pushState :
    (Dom.history, [@bs.as {json|null|json}] _, [@bs.as ""] _, ~href: string) =>
    unit =
    "";

  [@bs.val] external event : 'a = "Event";

  [@bs.new] external makeEventIE11Compatible : string => Dom.event = "Event";

  [@bs.val] [@bs.scope "document"]

  external createEventNonIEBrowsers : string => Dom.event = "createEvent";

  [@bs.send]
  external initEventNonIEBrowsers : (Dom.event, string, bool, bool) => unit =
    "initEvent";

  let safeMakeEvent = eventName =>
    if (Js.typeof(event) == "function") {
      makeEventIE11Compatible(eventName);
    } else {
      let event = createEventNonIEBrowsers("Event");
      initEventNonIEBrowsers(event, eventName, true, true);
      event;
    };

  /* This is copied from array.ml. We want to cut dependencies for ReasonReact so
     that it's friendlier to use in size-constrained codebases */
  let arrayToList = a => {
    let rec tolist = (i, res) =>
      if (i < 0) {
        res;
      } else {
        tolist(i - 1, [Array.unsafe_get(a, i), ...res]);
      };
    tolist(Array.length(a) - 1, []);
  };
  /* if we ever roll our own parser in the future, make sure you test all url combinations
     e.g. foo.com/?#bar
     */
  /* sigh URLSearchParams doesn't work on IE11, edge16, etc. */
  /* actually you know what, not gonna provide search for now. It's a mess.
     We'll let users roll their own solution/data structure for now */
  let path = () =>
    switch ([%external window]) {
    | None => []
    | Some((window: Dom.window)) =>
      switch (window |> location |> pathname) {
      | ""
      | "/" => []
      | raw =>
        /* remove the preceeding /, which every pathname seems to have */
        let raw = Js.String.sliceToEnd(~from=1, raw);
        /* remove the trailing /, which some pathnames might have. Ugh */
        let raw =
          switch (Js.String.get(raw, Js.String.length(raw) - 1)) {
          | "/" => Js.String.slice(~from=0, ~to_=-1, raw)
          | _ => raw
          };
        raw |> Js.String.split("/") |> arrayToList;
      }
    };
  let hash = () =>
    switch ([%external window]) {
    | None => ""
    | Some((window: Dom.window)) =>
      switch (window |> location |> hash) {
      | ""
      | "#" => ""
      | raw =>
        /* remove the preceeding #, which every hash seems to have.
           Why is this even included in location.hash?? */
        raw |> Js.String.sliceToEnd(~from=1)
      }
    };
  let search = () =>
    switch ([%external window]) {
    | None => ""
    | Some((window: Dom.window)) =>
      switch (window |> location |> search) {
      | ""
      | "?" => ""
      | raw =>
        /* remove the preceeding ?, which every search seems to have. */
        raw |> Js.String.sliceToEnd(~from=1)
      }
    };
  let push = path =>
    switch ([%external history], [%external window]) {
    | (None, _)
    | (_, None) => ()
    | (Some((history: Dom.history)), Some((window: Dom.window))) =>
      pushState(history, ~href=path);
      dispatchEvent(window, safeMakeEvent("popstate"));
    };
  type url = {
    path: list(string),
    hash: string,
    search: string,
  };
  type watcherID = unit => unit;
  let url = () => {path: path(), hash: hash(), search: search()};
  /* alias exposed publicly */
  let dangerouslyGetInitialUrl = url;
  let watchUrl = callback =>
    switch ([%external window]) {
    | None => (() => ())
    | Some((window: Dom.window)) =>
      let watcherID = () => callback(url());
      addEventListener(window, "popstate", watcherID);
      watcherID;
    };
  let unwatchUrl = watcherID =>
    switch ([%external window]) {
    | None => ()
    | Some((window: Dom.window)) =>
      removeEventListener(window, "popstate", watcherID)
    };
};

module Callback = {
  type t('payload) = 'payload => unit;
  let default = _event => ();
  let chain = (handlerOne, handlerTwo, payload) => {
    handlerOne(payload);
    handlerTwo(payload);
  };
};

};

module ReactDOMRe = {
#1 ReactDOMRe
/* First time reading an OCaml/Reason/BuckleScript file? */
/* `external` is the foreign function call in OCaml. */
/* here we're saying `I guarantee that on the JS side, we have a `render` function in the module "react-dom"
   that takes in a reactElement, a dom element, and returns unit (nothing) */
/* It's like `let`, except you're pointing the implementation to the JS side. The compiler will inline these
   calls and add the appropriate `require("react-dom")` in the file calling this `render` */
[@bs.val] [@bs.module "react-dom"]
external render : (ReasonReact.reactElement, Dom.element) => unit = "render";

[@bs.val]
external _getElementsByClassName : string => array(Dom.element) =
  "document.getElementsByClassName";

[@bs.val] [@bs.return nullable]
external _getElementById : string => option(Dom.element) =
  "document.getElementById";

let renderToElementWithClassName = (reactElement, className) =>
  switch (_getElementsByClassName(className)) {
  | [||] =>
    raise(
      Invalid_argument(
        "ReactDOMRe.renderToElementWithClassName: no element of class "
        ++ className
        ++ " found in the HTML.",
      ),
    )
  | elements => render(reactElement, Array.unsafe_get(elements, 0))
  };

let renderToElementWithId = (reactElement, id) =>
  switch (_getElementById(id)) {
  | None =>
    raise(
      Invalid_argument(
        "ReactDOMRe.renderToElementWithId : no element of id "
        ++ id
        ++ " found in the HTML.",
      ),
    )
  | Some(element) => render(reactElement, element)
  };

[@bs.val] [@bs.module "react-dom"]
external hydrate : (ReasonReact.reactElement, Dom.element) => unit = "hydrate";

let hydrateToElementWithClassName = (reactElement, className) =>
  switch (_getElementsByClassName(className)) {
  | [||] =>
    raise(
      Invalid_argument(
        "ReactDOMRe.hydrateToElementWithClassName: no element of class "
        ++ className
        ++ " found in the HTML.",
      ),
    )
  | elements => hydrate(reactElement, Array.unsafe_get(elements, 0))
  };

let hydrateToElementWithId = (reactElement, id) =>
  switch (_getElementById(id)) {
  | None =>
    raise(
      Invalid_argument(
        "ReactDOMRe.hydrateToElementWithId : no element of id "
        ++ id
        ++ " found in the HTML.",
      ),
    )
  | Some(element) => hydrate(reactElement, element)
  };

[@bs.val] [@bs.module "react-dom"]
external createPortal :
  (ReasonReact.reactElement, Dom.element) => ReasonReact.reactElement =
  "createPortal";

[@bs.val] [@bs.module "react-dom"]
external unmountComponentAtNode : Dom.element => unit =
  "unmountComponentAtNode";

[@bs.val] [@bs.module "react-dom"]
external findDOMNode : ReasonReact.reactRef => Dom.element = "findDOMNode";

external domElementToObj : Dom.element => Js.t({..}) = "%identity";

type reactDOMProps;

external objToDOMProps : Js.t({..}) => reactDOMProps = "%identity";

type style;

/* This list isn't exhaustive. We'll add more as we go. */
[@bs.obj]
external props :
  (
    ~key: string=?,
    ~ref: Js.nullable(Dom.element) => unit=?,
    /* react textarea/input */
    ~defaultChecked: bool=?,
    ~defaultValue: string=?,
    /* global html attributes */
    ~accessKey: string=?,
    ~className: string=?, /* substitute for "class" */
    ~contentEditable: bool=?,
    ~contextMenu: string=?,
    ~dir: string=?, /* "ltr", "rtl" or "auto" */
    ~draggable: bool=?,
    ~hidden: bool=?,
    ~id: string=?,
    ~lang: string=?,
    ~role: string=?, /* ARIA role */
    ~style: style=?,
    ~spellCheck: bool=?,
    ~tabIndex: int=?,
    ~title: string=?,
    /* html5 microdata */
    ~itemID: string=?,
    ~itemProp: string=?,
    ~itemRef: string=?,
    ~itemScope: bool=?,
    ~itemType: string=?, /* uri */
    /* tag-specific html attributes */
    ~accept: string=?,
    ~acceptCharset: string=?,
    ~action: string=?, /* uri */
    ~allowFullScreen: bool=?,
    ~alt: string=?,
    ~async: bool=?,
    ~autoComplete: string=?, /* has a fixed, but large-ish, set of possible values */
    ~autoFocus: bool=?,
    ~autoPlay: bool=?,
    ~challenge: string=?,
    ~charSet: string=?,
    ~checked: bool=?,
    ~cite: string=?, /* uri */
    ~crossorigin: bool=?,
    ~cols: int=?,
    ~colSpan: int=?,
    ~content: string=?,
    ~controls: bool=?,
    ~coords: string=?, /* set of values specifying the coordinates of a region */
    ~data: string=?, /* uri */
    ~dateTime: string=?, /* "valid date string with optional time" */
    ~default: bool=?,
    ~defer: bool=?,
    ~disabled: bool=?,
    ~download: string=?, /* should really be either a boolean, signifying presence, or a string */
    ~encType: string=?, /* "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain" */
    ~form: string=?,
    ~formAction: string=?, /* uri */
    ~formTarget: string=?, /* "_blank", "_self", etc. */
    ~formMethod: string=?, /* "post", "get", "put" */
    ~headers: string=?,
    ~height: string=?, /* in html5 this can only be a number, but in html4 it can ba a percentage as well */
    ~high: int=?,
    ~href: string=?, /* uri */
    ~hrefLang: string=?,
    ~htmlFor: string=?, /* substitute for "for" */
    ~httpEquiv: string=?, /* has a fixed set of possible values */
    ~icon: string=?, /* uri? */
    ~inputMode: string=?, /* "verbatim", "latin", "numeric", etc. */
    ~integrity: string=?,
    ~keyType: string=?,
    ~kind: string=?, /* has a fixed set of possible values */
    ~label: string=?,
    ~list: string=?,
    ~loop: bool=?,
    ~low: int=?,
    ~manifest: string=?, /* uri */
    ~max: string=?, /* should be int or Js.Date.t */
    ~maxLength: int=?,
    ~media: string=?, /* a valid media query */
    ~mediaGroup: string=?,
    ~method: string=?, /* "post" or "get" */
    ~min: int=?,
    ~minLength: int=?,
    ~multiple: bool=?,
    ~muted: bool=?,
    ~name: string=?,
    ~nonce: string=?,
    ~noValidate: bool=?,
    ~_open: bool=?,
    ~optimum: int=?,
    ~pattern: string=?, /* valid Js RegExp */
    ~placeholder: string=?,
    ~poster: string=?, /* uri */
    ~preload: string=?, /* "none", "metadata" or "auto" (and "" as a synonym for "auto") */
    ~radioGroup: string=?,
    ~readOnly: bool=?,
    ~rel: string=?, /* a space- or comma-separated (depending on the element) list of a fixed set of "link types" */
    ~required: bool=?,
    ~reversed: bool=?,
    ~rows: int=?,
    ~rowSpan: int=?,
    ~sandbox: string=?, /* has a fixed set of possible values */
    ~scope: string=?, /* has a fixed set of possible values */
    ~scoped: bool=?,
    ~scrolling: string=?, /* html4 only, "auto", "yes" or "no" */
    /* seamless - supported by React, but removed from the html5 spec */
    ~selected: bool=?,
    ~shape: string=?,
    ~size: int=?,
    ~sizes: string=?,
    ~span: int=?,
    ~src: string=?, /* uri */
    ~srcDoc: string=?,
    ~srcLang: string=?,
    ~srcSet: string=?,
    ~start: int=?,
    ~step: float=?,
    ~summary: string=?, /* deprecated */
    ~target: string=?,
    ~_type: string=?, /* has a fixed but large-ish set of possible values */
    ~useMap: string=?,
    ~value: string=?,
    ~width: string=?, /* in html5 this can only be a number, but in html4 it can ba a percentage as well */
    ~wrap: string=?, /* "hard" or "soft" */
    /* Clipboard events */
    ~onCopy: ReactEventRe.Clipboard.t => unit=?,
    ~onCut: ReactEventRe.Clipboard.t => unit=?,
    ~onPaste: ReactEventRe.Clipboard.t => unit=?,
    /* Composition events */
    ~onCompositionEnd: ReactEventRe.Composition.t => unit=?,
    ~onCompositionStart: ReactEventRe.Composition.t => unit=?,
    ~onCompositionUpdate: ReactEventRe.Composition.t => unit=?,
    /* Keyboard events */
    ~onKeyDown: ReactEventRe.Keyboard.t => unit=?,
    ~onKeyPress: ReactEventRe.Keyboard.t => unit=?,
    ~onKeyUp: ReactEventRe.Keyboard.t => unit=?,
    /* Focus events */
    ~onFocus: ReactEventRe.Focus.t => unit=?,
    ~onBlur: ReactEventRe.Focus.t => unit=?,
    /* Form events */
    ~onChange: ReactEventRe.Form.t => unit=?,
    ~onInput: ReactEventRe.Form.t => unit=?,
    ~onSubmit: ReactEventRe.Form.t => unit=?,
    /* Mouse events */
    ~onClick: ReactEventRe.Mouse.t => unit=?,
    ~onContextMenu: ReactEventRe.Mouse.t => unit=?,
    ~onDoubleClick: ReactEventRe.Mouse.t => unit=?,
    ~onDrag: ReactEventRe.Mouse.t => unit=?,
    ~onDragEnd: ReactEventRe.Mouse.t => unit=?,
    ~onDragEnter: ReactEventRe.Mouse.t => unit=?,
    ~onDragExit: ReactEventRe.Mouse.t => unit=?,
    ~onDragLeave: ReactEventRe.Mouse.t => unit=?,
    ~onDragOver: ReactEventRe.Mouse.t => unit=?,
    ~onDragStart: ReactEventRe.Mouse.t => unit=?,
    ~onDrop: ReactEventRe.Mouse.t => unit=?,
    ~onMouseDown: ReactEventRe.Mouse.t => unit=?,
    ~onMouseEnter: ReactEventRe.Mouse.t => unit=?,
    ~onMouseLeave: ReactEventRe.Mouse.t => unit=?,
    ~onMouseMove: ReactEventRe.Mouse.t => unit=?,
    ~onMouseOut: ReactEventRe.Mouse.t => unit=?,
    ~onMouseOver: ReactEventRe.Mouse.t => unit=?,
    ~onMouseUp: ReactEventRe.Mouse.t => unit=?,
    /* Selection events */
    ~onSelect: ReactEventRe.Selection.t => unit=?,
    /* Touch events */
    ~onTouchCancel: ReactEventRe.Touch.t => unit=?,
    ~onTouchEnd: ReactEventRe.Touch.t => unit=?,
    ~onTouchMove: ReactEventRe.Touch.t => unit=?,
    ~onTouchStart: ReactEventRe.Touch.t => unit=?,
    /* UI events */
    ~onScroll: ReactEventRe.UI.t => unit=?,
    /* Wheel events */
    ~onWheel: ReactEventRe.Wheel.t => unit=?,
    /* Media events */
    ~onAbort: ReactEventRe.Media.t => unit=?,
    ~onCanPlay: ReactEventRe.Media.t => unit=?,
    ~onCanPlayThrough: ReactEventRe.Media.t => unit=?,
    ~onDurationChange: ReactEventRe.Media.t => unit=?,
    ~onEmptied: ReactEventRe.Media.t => unit=?,
    ~onEncrypetd: ReactEventRe.Media.t => unit=?,
    ~onEnded: ReactEventRe.Media.t => unit=?,
    ~onError: ReactEventRe.Media.t => unit=?,
    ~onLoadedData: ReactEventRe.Media.t => unit=?,
    ~onLoadedMetadata: ReactEventRe.Media.t => unit=?,
    ~onLoadStart: ReactEventRe.Media.t => unit=?,
    ~onPause: ReactEventRe.Media.t => unit=?,
    ~onPlay: ReactEventRe.Media.t => unit=?,
    ~onPlaying: ReactEventRe.Media.t => unit=?,
    ~onProgress: ReactEventRe.Media.t => unit=?,
    ~onRateChange: ReactEventRe.Media.t => unit=?,
    ~onSeeked: ReactEventRe.Media.t => unit=?,
    ~onSeeking: ReactEventRe.Media.t => unit=?,
    ~onStalled: ReactEventRe.Media.t => unit=?,
    ~onSuspend: ReactEventRe.Media.t => unit=?,
    ~onTimeUpdate: ReactEventRe.Media.t => unit=?,
    ~onVolumeChange: ReactEventRe.Media.t => unit=?,
    ~onWaiting: ReactEventRe.Media.t => unit=?,
    /* Image events */
    ~onLoad: ReactEventRe.Image.t => unit=? /* duplicate */, /*~onError: ReactEventRe.Image.t => unit=?,*/
    /* Animation events */
    ~onAnimationStart: ReactEventRe.Animation.t => unit=?,
    ~onAnimationEnd: ReactEventRe.Animation.t => unit=?,
    ~onAnimationIteration: ReactEventRe.Animation.t => unit=?,
    /* Transition events */
    ~onTransitionEnd: ReactEventRe.Transition.t => unit=?,
    /* svg */
    ~accentHeight: string=?,
    ~accumulate: string=?,
    ~additive: string=?,
    ~alignmentBaseline: string=?,
    ~allowReorder: string=?,
    ~alphabetic: string=?,
    ~amplitude: string=?,
    ~arabicForm: string=?,
    ~ascent: string=?,
    ~attributeName: string=?,
    ~attributeType: string=?,
    ~autoReverse: string=?,
    ~azimuth: string=?,
    ~baseFrequency: string=?,
    ~baseProfile: string=?,
    ~baselineShift: string=?,
    ~bbox: string=?,
    ~_begin: string=?,
    ~bias: string=?,
    ~by: string=?,
    ~calcMode: string=?,
    ~capHeight: string=?,
    ~clip: string=?,
    ~clipPath: string=?,
    ~clipPathUnits: string=?,
    ~clipRule: string=?,
    ~colorInterpolation: string=?,
    ~colorInterpolationFilters: string=?,
    ~colorProfile: string=?,
    ~colorRendering: string=?,
    ~contentScriptType: string=?,
    ~contentStyleType: string=?,
    ~cursor: string=?,
    ~cx: string=?,
    ~cy: string=?,
    ~d: string=?,
    ~decelerate: string=?,
    ~descent: string=?,
    ~diffuseConstant: string=?,
    ~direction: string=?,
    ~display: string=?,
    ~divisor: string=?,
    ~dominantBaseline: string=?,
    ~dur: string=?,
    ~dx: string=?,
    ~dy: string=?,
    ~edgeMode: string=?,
    ~elevation: string=?,
    ~enableBackground: string=?,
    ~_end: string=?,
    ~exponent: string=?,
    ~externalResourcesRequired: string=?,
    ~fill: string=?,
    ~fillOpacity: string=?,
    ~fillRule: string=?,
    ~filter: string=?,
    ~filterRes: string=?,
    ~filterUnits: string=?,
    ~floodColor: string=?,
    ~floodOpacity: string=?,
    ~focusable: string=?,
    ~fontFamily: string=?,
    ~fontSize: string=?,
    ~fontSizeAdjust: string=?,
    ~fontStretch: string=?,
    ~fontStyle: string=?,
    ~fontVariant: string=?,
    ~fontWeight: string=?,
    ~fomat: string=?,
    ~from: string=?,
    ~fx: string=?,
    ~fy: string=?,
    ~g1: string=?,
    ~g2: string=?,
    ~glyphName: string=?,
    ~glyphOrientationHorizontal: string=?,
    ~glyphOrientationVertical: string=?,
    ~glyphRef: string=?,
    ~gradientTransform: string=?,
    ~gradientUnits: string=?,
    ~hanging: string=?,
    ~horizAdvX: string=?,
    ~horizOriginX: string=?,
    ~ideographic: string=?,
    ~imageRendering: string=?,
    ~_in: string=?,
    ~in2: string=?,
    ~intercept: string=?,
    ~k: string=?,
    ~k1: string=?,
    ~k2: string=?,
    ~k3: string=?,
    ~k4: string=?,
    ~kernelMatrix: string=?,
    ~kernelUnitLength: string=?,
    ~kerning: string=?,
    ~keyPoints: string=?,
    ~keySplines: string=?,
    ~keyTimes: string=?,
    ~lengthAdjust: string=?,
    ~letterSpacing: string=?,
    ~lightingColor: string=?,
    ~limitingConeAngle: string=?,
    ~local: string=?,
    ~markerEnd: string=?,
    ~markerHeight: string=?,
    ~markerMid: string=?,
    ~markerStart: string=?,
    ~markerUnits: string=?,
    ~markerWidth: string=?,
    ~mask: string=?,
    ~maskContentUnits: string=?,
    ~maskUnits: string=?,
    ~mathematical: string=?,
    ~mode: string=?,
    ~numOctaves: string=?,
    ~offset: string=?,
    ~opacity: string=?,
    ~operator: string=?,
    ~order: string=?,
    ~orient: string=?,
    ~orientation: string=?,
    ~origin: string=?,
    ~overflow: string=?,
    ~overflowX: string=?,
    ~overflowY: string=?,
    ~overlinePosition: string=?,
    ~overlineThickness: string=?,
    ~paintOrder: string=?,
    ~panose1: string=?,
    ~pathLength: string=?,
    ~patternContentUnits: string=?,
    ~patternTransform: string=?,
    ~patternUnits: string=?,
    ~pointerEvents: string=?,
    ~points: string=?,
    ~pointsAtX: string=?,
    ~pointsAtY: string=?,
    ~pointsAtZ: string=?,
    ~preserveAlpha: string=?,
    ~preserveAspectRatio: string=?,
    ~primitiveUnits: string=?,
    ~r: string=?,
    ~radius: string=?,
    ~refX: string=?,
    ~refY: string=?,
    ~renderingIntent: string=?,
    ~repeatCount: string=?,
    ~repeatDur: string=?,
    ~requiredExtensions: string=?,
    ~requiredFeatures: string=?,
    ~restart: string=?,
    ~result: string=?,
    ~rotate: string=?,
    ~rx: string=?,
    ~ry: string=?,
    ~scale: string=?,
    ~seed: string=?,
    ~shapeRendering: string=?,
    ~slope: string=?,
    ~spacing: string=?,
    ~specularConstant: string=?,
    ~specularExponent: string=?,
    ~speed: string=?,
    ~spreadMethod: string=?,
    ~startOffset: string=?,
    ~stdDeviation: string=?,
    ~stemh: string=?,
    ~stemv: string=?,
    ~stitchTiles: string=?,
    ~stopColor: string=?,
    ~stopOpacity: string=?,
    ~strikethroughPosition: string=?,
    ~strikethroughThickness: string=?,
    ~string: string=?,
    ~stroke: string=?,
    ~strokeDasharray: string=?,
    ~strokeDashoffset: string=?,
    ~strokeLinecap: string=?,
    ~strokeLinejoin: string=?,
    ~strokeMiterlimit: string=?,
    ~strokeOpacity: string=?,
    ~strokeWidth: string=?,
    ~surfaceScale: string=?,
    ~systemLanguage: string=?,
    ~tableValues: string=?,
    ~targetX: string=?,
    ~targetY: string=?,
    ~textAnchor: string=?,
    ~textDecoration: string=?,
    ~textLength: string=?,
    ~textRendering: string=?,
    ~_to: string=?,
    ~transform: string=?,
    ~u1: string=?,
    ~u2: string=?,
    ~underlinePosition: string=?,
    ~underlineThickness: string=?,
    ~unicode: string=?,
    ~unicodeBidi: string=?,
    ~unicodeRange: string=?,
    ~unitsPerEm: string=?,
    ~vAlphabetic: string=?,
    ~vHanging: string=?,
    ~vIdeographic: string=?,
    ~vMathematical: string=?,
    ~values: string=?,
    ~vectorEffect: string=?,
    ~version: string=?,
    ~vertAdvX: string=?,
    ~vertAdvY: string=?,
    ~vertOriginX: string=?,
    ~vertOriginY: string=?,
    ~viewBox: string=?,
    ~viewTarget: string=?,
    ~visibility: string=?,
    /*width::string? =>*/
    ~widths: string=?,
    ~wordSpacing: string=?,
    ~writingMode: string=?,
    ~x: string=?,
    ~x1: string=?,
    ~x2: string=?,
    ~xChannelSelector: string=?,
    ~xHeight: string=?,
    ~xlinkActuate: string=?,
    ~xlinkArcrole: string=?,
    ~xlinkHref: string=?,
    ~xlinkRole: string=?,
    ~xlinkShow: string=?,
    ~xlinkTitle: string=?,
    ~xlinkType: string=?,
    ~xmlns: string=?,
    ~xmlnsXlink: string=?,
    ~xmlBase: string=?,
    ~xmlLang: string=?,
    ~xmlSpace: string=?,
    ~y: string=?,
    ~y1: string=?,
    ~y2: string=?,
    ~yChannelSelector: string=?,
    ~z: string=?,
    ~zoomAndPan: string=?,
    /* RDFa */
    ~about: string=?,
    ~datatype: string=?,
    ~inlist: string=?,
    ~prefix: string=?,
    ~property: string=?,
    ~resource: string=?,
    ~typeof: string=?,
    ~vocab: string=?,
    /* react-specific */
    ~dangerouslySetInnerHTML: {. "__html": string}=?,
    ~suppressContentEditableWarning: bool=?,
    unit
  ) =>
  reactDOMProps =
  "";

[@bs.splice] [@bs.val] [@bs.module "react"]
external createElement :
  (string, ~props: reactDOMProps=?, array(ReasonReact.reactElement)) =>
  ReasonReact.reactElement =
  "createElement";

module Style = {
  type t = style;
  [@bs.obj]
  external make :
    (
      ~azimuth: string=?,
      ~background: string=?,
      ~backgroundAttachment: string=?,
      ~backgroundColor: string=?,
      ~backgroundImage: string=?,
      ~backgroundPosition: string=?,
      ~backgroundRepeat: string=?,
      ~border: string=?,
      ~borderCollapse: string=?,
      ~borderColor: string=?,
      ~borderSpacing: string=?,
      ~borderStyle: string=?,
      ~borderTop: string=?,
      ~borderRight: string=?,
      ~borderBottom: string=?,
      ~borderLeft: string=?,
      ~borderTopColor: string=?,
      ~borderRightColor: string=?,
      ~borderBottomColor: string=?,
      ~borderLeftColor: string=?,
      ~borderTopStyle: string=?,
      ~borderRightStyle: string=?,
      ~borderBottomStyle: string=?,
      ~borderLeftStyle: string=?,
      ~borderTopWidth: string=?,
      ~borderRightWidth: string=?,
      ~borderBottomWidth: string=?,
      ~borderLeftWidth: string=?,
      ~borderWidth: string=?,
      ~bottom: string=?,
      ~captionSide: string=?,
      ~clear: string=?,
      ~clip: string=?,
      ~color: string=?,
      ~content: string=?,
      ~counterIncrement: string=?,
      ~counterReset: string=?,
      ~cue: string=?,
      ~cueAfter: string=?,
      ~cueBefore: string=?,
      ~cursor: string=?,
      ~direction: string=?,
      ~display: string=?,
      ~elevation: string=?,
      ~emptyCells: string=?,
      ~float: string=?,
      ~font: string=?,
      ~fontFamily: string=?,
      ~fontSize: string=?,
      ~fontSizeAdjust: string=?,
      ~fontStretch: string=?,
      ~fontStyle: string=?,
      ~fontVariant: string=?,
      ~fontWeight: string=?,
      ~height: string=?,
      ~left: string=?,
      ~letterSpacing: string=?,
      ~lineHeight: string=?,
      ~listStyle: string=?,
      ~listStyleImage: string=?,
      ~listStylePosition: string=?,
      ~listStyleType: string=?,
      ~margin: string=?,
      ~marginTop: string=?,
      ~marginRight: string=?,
      ~marginBottom: string=?,
      ~marginLeft: string=?,
      ~markerOffset: string=?,
      ~marks: string=?,
      ~maxHeight: string=?,
      ~maxWidth: string=?,
      ~minHeight: string=?,
      ~minWidth: string=?,
      ~orphans: string=?,
      ~outline: string=?,
      ~outlineColor: string=?,
      ~outlineStyle: string=?,
      ~outlineWidth: string=?,
      ~overflow: string=?,
      ~overflowX: string=?,
      ~overflowY: string=?,
      ~padding: string=?,
      ~paddingTop: string=?,
      ~paddingRight: string=?,
      ~paddingBottom: string=?,
      ~paddingLeft: string=?,
      ~page: string=?,
      ~pageBreakAfter: string=?,
      ~pageBreakBefore: string=?,
      ~pageBreakInside: string=?,
      ~pause: string=?,
      ~pauseAfter: string=?,
      ~pauseBefore: string=?,
      ~pitch: string=?,
      ~pitchRange: string=?,
      ~playDuring: string=?,
      ~position: string=?,
      ~quotes: string=?,
      ~richness: string=?,
      ~right: string=?,
      ~size: string=?,
      ~speak: string=?,
      ~speakHeader: string=?,
      ~speakNumeral: string=?,
      ~speakPunctuation: string=?,
      ~speechRate: string=?,
      ~stress: string=?,
      ~tableLayout: string=?,
      ~textAlign: string=?,
      ~textDecoration: string=?,
      ~textIndent: string=?,
      ~textShadow: string=?,
      ~textTransform: string=?,
      ~top: string=?,
      ~unicodeBidi: string=?,
      ~verticalAlign: string=?,
      ~visibility: string=?,
      ~voiceFamily: string=?,
      ~volume: string=?,
      ~whiteSpace: string=?,
      ~widows: string=?,
      ~width: string=?,
      ~wordSpacing: string=?,
      ~zIndex: string=?,
      /* Below properties based on https://www.w3.org/Style/CSS/all-properties */
      /* Color Level 3 - REC */
      ~opacity: string=?,
      /* Backgrounds and Borders Level 3 - CR */
      /* backgroundRepeat - already defined by CSS2Properties */
      /* backgroundAttachment - already defined by CSS2Properties */
      ~backgroundOrigin: string=?,
      ~backgroundSize: string=?,
      ~backgroundClip: string=?,
      ~borderRadius: string=?,
      ~borderTopLeftRadius: string=?,
      ~borderTopRightRadius: string=?,
      ~borderBottomLeftRadius: string=?,
      ~borderBottomRightRadius: string=?,
      ~borderImage: string=?,
      ~borderImageSource: string=?,
      ~borderImageSlice: string=?,
      ~borderImageWidth: string=?,
      ~borderImageOutset: string=?,
      ~borderImageRepeat: string=?,
      ~boxShadow: string=?,
      /* Multi-column Layout - CR */
      ~columns: string=?,
      ~columnCount: string=?,
      ~columnFill: string=?,
      ~columnGap: string=?,
      ~columnRule: string=?,
      ~columnRuleColor: string=?,
      ~columnRuleStyle: string=?,
      ~columnRuleWidth: string=?,
      ~columnSpan: string=?,
      ~columnWidth: string=?,
      ~breakAfter: string=?,
      ~breakBefore: string=?,
      ~breakInside: string=?,
      /* Speech - CR */
      ~rest: string=?,
      ~restAfter: string=?,
      ~restBefore: string=?,
      ~speakAs: string=?,
      ~voiceBalance: string=?,
      ~voiceDuration: string=?,
      ~voicePitch: string=?,
      ~voiceRange: string=?,
      ~voiceRate: string=?,
      ~voiceStress: string=?,
      ~voiceVolume: string=?,
      /* Image Values and Replaced Content Level 3 - CR */
      ~objectFit: string=?,
      ~objectPosition: string=?,
      ~imageResolution: string=?,
      ~imageOrientation: string=?,
      /* Flexible Box Layout - CR */
      ~alignContent: string=?,
      ~alignItems: string=?,
      ~alignSelf: string=?,
      ~flex: string=?,
      ~flexBasis: string=?,
      ~flexDirection: string=?,
      ~flexFlow: string=?,
      ~flexGrow: string=?,
      ~flexShrink: string=?,
      ~flexWrap: string=?,
      ~justifyContent: string=?,
      ~order: string=?,
      /* Text Decoration Level 3 - CR */
      /* textDecoration - already defined by CSS2Properties */
      ~textDecorationColor: string=?,
      ~textDecorationLine: string=?,
      ~textDecorationSkip: string=?,
      ~textDecorationStyle: string=?,
      ~textEmphasis: string=?,
      ~textEmphasisColor: string=?,
      ~textEmphasisPosition: string=?,
      ~textEmphasisStyle: string=?,
      /* textShadow - already defined by CSS2Properties */
      ~textUnderlinePosition: string=?,
      /* Fonts Level 3 - CR */
      ~fontFeatureSettings: string=?,
      ~fontKerning: string=?,
      ~fontLanguageOverride: string=?,
      /* fontSizeAdjust - already defined by CSS2Properties */
      /* fontStretch - already defined by CSS2Properties */
      ~fontSynthesis: string=?,
      ~forntVariantAlternates: string=?,
      ~fontVariantCaps: string=?,
      ~fontVariantEastAsian: string=?,
      ~fontVariantLigatures: string=?,
      ~fontVariantNumeric: string=?,
      ~fontVariantPosition: string=?,
      /* Cascading and Inheritance Level 3 - CR */
      ~all: string=?,
      /* Writing Modes Level 3 - CR */
      ~glyphOrientationVertical: string=?,
      ~textCombineUpright: string=?,
      ~textOrientation: string=?,
      ~writingMode: string=?,
      /* Shapes Level 1 - CR */
      ~shapeImageThreshold: string=?,
      ~shapeMargin: string=?,
      ~shapeOutside: string=?,
      /* Masking Level 1 - CR */
      ~clipPath: string=?,
      ~clipRule: string=?,
      ~mask: string=?,
      ~maskBorder: string=?,
      ~maskBorderMode: string=?,
      ~maskBorderOutset: string=?,
      ~maskBorderRepeat: string=?,
      ~maskBorderSlice: string=?,
      ~maskBorderSource: string=?,
      ~maskBorderWidth: string=?,
      ~maskClip: string=?,
      ~maskComposite: string=?,
      ~maskImage: string=?,
      ~maskMode: string=?,
      ~maskOrigin: string=?,
      ~maskPosition: string=?,
      ~maskRepeat: string=?,
      ~maskSize: string=?,
      ~maskType: string=?,
      /* Compositing and Blending Level 1 - CR */
      ~backgroundBlendMode: string=?,
      ~isolation: string=?,
      ~mixBlendMode: string=?,
      /* Fragmentation Level 3 - CR */
      ~boxDecorationBreak: string=?,
      /* breakAfter - already defined by Multi-column Layout */
      /* breakBefore - already defined by Multi-column Layout */
      /* breakInside - already defined by Multi-column Layout */
      /* Basic User Interface Level 3 - CR */
      ~boxSizing: string=?,
      ~caretColor: string=?,
      ~navDown: string=?,
      ~navLeft: string=?,
      ~navRight: string=?,
      ~navUp: string=?,
      ~outlineOffset: string=?,
      ~resize: string=?,
      ~textOverflow: string=?,
      /* Grid Layout Level 1 - CR */
      ~grid: string=?,
      ~gridArea: string=?,
      ~gridAutoColumns: string=?,
      ~gridAutoFlow: string=?,
      ~gridAutoRows: string=?,
      ~gridColumn: string=?,
      ~gridColumnEnd: string=?,
      ~gridColumnGap: string=?,
      ~gridColumnStart: string=?,
      ~gridGap: string=?,
      ~gridRow: string=?,
      ~gridRowEnd: string=?,
      ~gridRowGap: string=?,
      ~gridRowStart: string=?,
      ~gridTemplate: string=?,
      ~gridTemplateAreas: string=?,
      ~gridTemplateColumns: string=?,
      ~gridTemplateRows: string=?,
      /* Will Change Level 1 - CR */
      ~willChange: string=?,
      /* Text Level 3 - LC */
      ~hangingPunctuation: string=?,
      ~hyphens: string=?,
      /* letterSpacing - already defined by CSS2Properties */
      ~lineBreak: string=?,
      ~overflowWrap: string=?,
      ~tabSize: string=?,
      /* textAlign - already defined by CSS2Properties */
      ~textAlignLast: string=?,
      ~textJustify: string=?,
      ~wordBreak: string=?,
      ~wordWrap: string=?,
      /* Animations - WD */
      ~animation: string=?,
      ~animationDelay: string=?,
      ~animationDirection: string=?,
      ~animationDuration: string=?,
      ~animationFillMode: string=?,
      ~animationIterationCount: string=?,
      ~animationName: string=?,
      ~animationPlayState: string=?,
      ~animationTimingFunction: string=?,
      /* Transitions - WD */
      ~transition: string=?,
      ~transitionDelay: string=?,
      ~transitionDuration: string=?,
      ~transitionProperty: string=?,
      ~transitionTimingFunction: string=?,
      /* Transforms Level 1 - WD */
      ~backfaceVisibility: string=?,
      ~perspective: string=?,
      ~perspectiveOrigin: string=?,
      ~transform: string=?,
      ~transformOrigin: string=?,
      ~transformStyle: string=?,
      /* Box Alignment Level 3 - WD */
      /* alignContent - already defined by Flexible Box Layout */
      /* alignItems - already defined by Flexible Box Layout */
      ~justifyItems: string=?,
      ~justifySelf: string=?,
      ~placeContent: string=?,
      ~placeItems: string=?,
      ~placeSelf: string=?,
      /* Basic User Interface Level 4 - FPWD */
      ~appearance: string=?,
      ~caret: string=?,
      ~caretAnimation: string=?,
      ~caretShape: string=?,
      ~userSelect: string=?,
      /* Overflow Level 3 - WD */
      ~maxLines: string=?,
      /* Basix Box Model - WD */
      ~marqueeDirection: string=?,
      ~marqueeLoop: string=?,
      ~marqueeSpeed: string=?,
      ~marqueeStyle: string=?,
      ~overflowStyle: string=?,
      ~rotation: string=?,
      ~rotationPoint: string=?,
      /* SVG 1.1 - REC */
      ~alignmentBaseline: string=?,
      ~baselineShift: string=?,
      ~clip: string=?,
      ~clipPath: string=?,
      ~clipRule: string=?,
      ~colorInterpolation: string=?,
      ~colorInterpolationFilters: string=?,
      ~colorProfile: string=?,
      ~colorRendering: string=?,
      ~cursor: string=?,
      ~dominantBaseline: string=?,
      ~fill: string=?,
      ~fillOpacity: string=?,
      ~fillRule: string=?,
      ~filter: string=?,
      ~floodColor: string=?,
      ~floodOpacity: string=?,
      ~glyphOrientationHorizontal: string=?,
      ~glyphOrientationVertical: string=?,
      ~imageRendering: string=?,
      ~kerning: string=?,
      ~lightingColor: string=?,
      ~markerEnd: string=?,
      ~markerMid: string=?,
      ~markerStart: string=?,
      ~pointerEvents: string=?,
      ~shapeRendering: string=?,
      ~stopColor: string=?,
      ~stopOpacity: string=?,
      ~stroke: string=?,
      ~strokeDasharray: string=?,
      ~strokeDashoffset: string=?,
      ~strokeLinecap: string=?,
      ~strokeLinejoin: string=?,
      ~strokeMiterlimit: string=?,
      ~strokeOpacity: string=?,
      ~strokeWidth: string=?,
      ~textAnchor: string=?,
      ~textRendering: string=?,
      /* Ruby Layout Level 1 - WD */
      ~rubyAlign: string=?,
      ~rubyMerge: string=?,
      ~rubyPosition: string=?,
      /* Lists and Counters Level 3 - WD */
      /* listStyle - already defined by CSS2Properties */
      /* listStyleImage - already defined by CSS2Properties */
      /* listStylePosition - already defined by CSS2Properties */
      /* listStyleType - already defined by CSS2Properties */
      /* counterIncrement - already defined by CSS2Properties */
      /* counterReset - already defined by CSS2Properties */
      /* Not added yet
       * -------------
       * Generated Content for Paged Media - WD
       * Generated Content Level 3 - WD
       * Line Grid Level 1 - WD
       * Regions - WD
       * Inline Layout Level 3 - WD
       * Round Display Level 1 - WD
       * Image Values and Replaced Content Level 4 - WD
       * Positioned Layout Level 3 - WD
       * Filter Effects Level 1 -  -WD
       * Exclusions Level 1 - WD
       * Text Level 4 - FPWD
       * SVG Markers - FPWD
       * Motion Path Level 1 - FPWD
       * Color Level 4 - FPWD
       * SVG Strokes - FPWD
       * Table Level 3 - FPWD
       */
      unit
    ) =>
    style =
    "";
  /* CSS2Properties: https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties */
  let combine: (style, style) => style =
    (a, b) => {
      let a: Js.t({..}) = Obj.magic(a);
      let b: Js.t({..}) = Obj.magic(b);
      Js.Obj.assign(Js.Obj.assign(Js.Obj.empty(), a), b) |> Obj.magic;
    };
  let unsafeAddProp: (style, string, string) => style =
    (style, property, value) => {
      let propStyle: style = {
        let dict = Js.Dict.empty();
        Js.Dict.set(dict, property, value);
        Obj.magic(dict);
      };
      combine(style, propStyle);
    };
};

};

module Index = {
#1 Index

let str = ReasonReact.stringToElement;

module CustomComponent = {
  let component = ReasonReact.statelessComponent("CustomComponent");
  let z = string_of_int(SomeThing.x + OtherThing.y * 2);

  let make = (~name, _children) => {
    ...component,
      render: _self => <div>(str("Hello Wrld!" ++ z))</div> ,
  }
};


let root = <CustomComponent name="Folks" />;

ReactDOMRe.renderToElementWithId(root, "root");
};