react-winjs.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import ReactDOMServer from 'react-dom/server'
import WinJS from 'winjs'

//
// Implementation Overview
//
// react-winjs is organized around the concept of prop handlers. A prop handler describes
// how a react-winjs prop affects the underlying WinJS control. Prop handlers come from 3 sources:
//   1. Handwritten common to all controls. These are defined in a variable called
//      *defaultPropHandlers*. These are prop handlers which appear on every react-winjs component.
//   2. WinJS's d.ts file. Most of the prop handlers for each react-winjs component are
//      automatically generated from WinJS's d.ts file. Information from the d.ts file is stored in
//      a variable called *RawControlApis*. *RawControlApis* is generated by running the d.ts file
//      through this tool: https://github.com/winjs/winjs-control-apis
//   3. Handwritten control-specific. These are defined in a variable called *ControlApis*. When
//      a react-winjs component has a prop that needs to be defined manually, this is where it
//      should be defined. There are a number of types of builtin prop handlers defined in the
//      *PropHandlers* variable which can be used here.
//
// When react-winjs builds the list of prop handlers for a component, it gathers them from the above
// list of sources. If multiple sources define a prop handler with the same name, the one from the
// source which appears closest to the bottom of the list above wins.
//
// There's a particular category of WinJS controls that host content that proved to be particularly
// challenging to wrap as React components. More specifically, the controls in this category:
//   - host content
//   - move the hosted content around in the DOM
//   - store the hosted content in a Binding.List
//
// Controls that fall into this category of hosting content include:
//   - AppBar/ToolBar
//   - Hub
//   - Pivot
//
// And the controls that get hosted include (these are the ones that end up being created
// through WinJSChildComponent, described below):
//   - AppBarCommand
//   - HubSection
//   - PivotItem
//
// What made this challenging to solve is that there are some features that aren't achievable in
// a straight forward way through the React APIs. To solve this, you want to be able to:
//   - Render a React component *onto* an existing element. ReactDOM.render can only render *into* an
//     existing element. For example, when creating a HubSection you want to be able to control
//     attributes of the win-hub-section element such as its *class* and *style*. With ReactDOM.render,
//     you'd only be able to render into the win-hub-section element so the React component wouldn't
//     be able to control any attributes of the win-hub-section element.
//   - Hold onto a rendered component and inspect its *type* and *key* prop later. This information
//     comes in handy when diffing an array of components from a previous render pass with an array
//     of components for the current render pass. The diff information is used to mutate a
//     Binding.List to get it into the desired state.
//
// The WinJSChildComponent class provides a convenient API for solving both of these problems. When the
// constructor receives a component, it creates the element (e.g. win-hub-section) that the component
// is rendered *onto*. The owning control (e.g. WinJS.UI.Hub) is free to manage that element and move
// it around the DOM. WinJSChildComponent provides the following APIs:
//   - update: Updates the element based on the component description that is passed in.
//   - dispose: Disposes the react-winjs component and its associated WinJS control.
//   - key: Returns the React key associated with the component.
//   - type: Returns the React type associated with the component.
//

// Generated from https://github.com/winjs/winjs-control-apis
const RawControlApis = {
  AppBar: {
    closedDisplayMode: {
      type: 'enum',
      values: [
        'compact',
        'full',
        'minimal',
        'none',
      ],
    },
    data: {
      name: 'WinJS.Binding.List',
      type: 'reference',
      typeArguments: [
        {
          name: 'WinJS.UI.ICommand',
          type: 'reference',
          typeArguments: [],
        },
      ],
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    onAfterClose: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onAfterOpen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeClose: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeOpen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    opened: {
      type: 'boolean',
    },
    placement: {
      type: 'enum',
      values: [
        'bottom',
        'top',
      ],
    },
  },
  AppBarCommand: {
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    extraClass: {
      type: 'string',
    },
    firstElementFocus: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    flyout: {
      name: 'WinJS.UI.Flyout',
      type: 'reference',
      typeArguments: [],
    },
    hidden: {
      type: 'boolean',
    },
    icon: {
      type: 'string',
    },
    id: {
      type: 'string',
    },
    label: {
      type: 'string',
    },
    lastElementFocus: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    onClick: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    priority: {
      type: 'number',
    },
    section: {
      type: 'string',
    },
    selected: {
      type: 'boolean',
    },
    tooltip: {
      type: 'string',
    },
    type: {
      type: 'string',
    },
  },
  AutoSuggestBox: {
    chooseSuggestionOnEnter: {
      type: 'boolean',
    },
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    onQueryChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onQuerySubmitted: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onResultSuggestionChosen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onSuggestionsRequested: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    placeholderText: {
      type: 'string',
    },
    queryText: {
      type: 'string',
    },
    searchHistoryContext: {
      type: 'string',
    },
    searchHistoryDisabled: {
      type: 'boolean',
    },
  },
  BackButton: {
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
  },
  CellSpanningLayout: {
    groupHeaderPosition: {
      type: 'enum',
      values: [
        'left',
        'top',
      ],
    },
    groupInfo: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    itemInfo: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    maximumRowsOrColumns: {
      type: 'number',
    },
    numberOfItemsPerItemsBlock: {
      type: 'any',
    },
    orientation: {
      type: 'enum',
      values: [
        'horizontal',
        'vertical',
      ],
    },
  },
  Command: {
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    extraClass: {
      type: 'string',
    },
    firstElementFocus: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    flyout: {
      name: 'WinJS.UI.Flyout',
      type: 'reference',
      typeArguments: [],
    },
    hidden: {
      type: 'boolean',
    },
    icon: {
      type: 'string',
    },
    id: {
      type: 'string',
    },
    label: {
      type: 'string',
    },
    lastElementFocus: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    onClick: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    priority: {
      type: 'number',
    },
    section: {
      type: 'string',
    },
    selected: {
      type: 'boolean',
    },
    tooltip: {
      type: 'string',
    },
    type: {
      type: 'string',
    },
  },
  ContentDialog: {
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    hidden: {
      type: 'boolean',
    },
    onAfterHide: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onAfterShow: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeHide: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeShow: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    primaryCommandDisabled: {
      type: 'boolean',
    },
    primaryCommandText: {
      type: 'string',
    },
    secondaryCommandDisabled: {
      type: 'boolean',
    },
    secondaryCommandText: {
      type: 'string',
    },
    title: {
      type: 'string',
    },
  },
  DatePicker: {
    calendar: {
      type: 'string',
    },
    current: {
      name: 'Date',
      type: 'reference',
      typeArguments: [],
    },
    datePattern: {
      type: 'string',
    },
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    maxYear: {
      type: 'number',
    },
    minYear: {
      type: 'number',
    },
    monthPattern: {
      type: 'string',
    },
    onChange: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    yearPattern: {
      type: 'string',
    },
  },
  FlipView: {
    currentPage: {
      type: 'number',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    itemDataSource: {
      name: 'WinJS.UI.IListDataSource',
      type: 'reference',
      typeArguments: [
        {
          name: 'T',
          type: 'type-param',
        },
      ],
    },
    itemSpacing: {
      type: 'number',
    },
    itemTemplate: {
      type: 'any',
    },
    onDataSourceCountChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onPageCompleted: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onPageSelected: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onPageVisibilityChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    orientation: {
      type: 'string',
    },
  },
  Flyout: {
    alignment: {
      type: 'string',
    },
    anchor: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    hidden: {
      type: 'boolean',
    },
    onAfterHide: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onAfterShow: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeHide: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeShow: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    placement: {
      type: 'string',
    },
  },
  GridLayout: {
    backdropColor: {
      type: 'string',
    },
    disableBackdrop: {
      type: 'boolean',
    },
    groupHeaderPosition: {
      type: 'enum',
      values: [
        'left',
        'top',
      ],
    },
    groupInfo: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    itemInfo: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    maxRows: {
      type: 'number',
    },
    maximumRowsOrColumns: {
      type: 'number',
    },
    numberOfItemsPerItemsBlock: {
      type: 'any',
    },
    orientation: {
      type: 'enum',
      values: [
        'horizontal',
        'vertical',
      ],
    },
  },
  Hub: {
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    headerTemplate: {
      type: 'any',
    },
    indexOfFirstVisible: {
      type: 'number',
    },
    indexOfLastVisible: {
      type: 'number',
    },
    loadingState: {
      type: 'enum',
      values: [
        'complete',
        'loading',
      ],
    },
    onContentAnimating: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onHeaderInvoked: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onLoadingStateChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    orientation: {
      type: 'enum',
      values: [
        'horizontal',
        'vertical',
      ],
    },
    scrollPosition: {
      type: 'number',
    },
    sectionOnScreen: {
      type: 'number',
    },
    sections: {
      name: 'WinJS.Binding.List',
      type: 'reference',
      typeArguments: [
        {
          name: 'WinJS.UI.HubSection',
          type: 'reference',
          typeArguments: [],
        },
      ],
    },
    zoomableView: {
      name: 'WinJS.UI.IZoomableView',
      type: 'reference',
      typeArguments: [
        {
          type: 'any',
        },
      ],
    },
  },
  HubSection: {
    contentElement: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    header: {
      type: 'string',
    },
    isHeaderStatic: {
      type: 'boolean',
    },
  },
  ItemContainer: {
    draggable: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    onInvoked: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onSelectionChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onSelectionChanging: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    selected: {
      type: 'boolean',
    },
    selectionDisabled: {
      type: 'boolean',
    },
    swipeBehavior: {
      type: 'enum',
      values: [
        'none',
        'select',
      ],
    },
    swipeOrientation: {
      type: 'enum',
      values: [
        'horizontal',
        'vertical',
      ],
    },
    tapBehavior: {
      type: 'enum',
      values: [
        'directSelect',
        'invokeOnly',
        'none',
        'toggleSelect',
      ],
    },
  },
  ListLayout: {
    backdropColor: {
      type: 'string',
    },
    disableBackdrop: {
      type: 'boolean',
    },
    groupHeaderPosition: {
      type: 'enum',
      values: [
        'left',
        'top',
      ],
    },
    numberOfItemsPerItemsBlock: {
      type: 'any',
    },
    orientation: {
      type: 'enum',
      values: [
        'horizontal',
        'vertical',
      ],
    },
  },
  ListView: {
    automaticallyLoadPages: {
      type: 'boolean',
    },
    currentItem: {
      name: 'WinJS.UI.IListViewItem',
      type: 'reference',
      typeArguments: [],
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    footer: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    groupDataSource: {
      name: 'WinJS.UI.IListDataSource',
      type: 'reference',
      typeArguments: [
        {
          name: 'T',
          type: 'type-param',
        },
      ],
    },
    groupHeaderTapBehavior: {
      type: 'enum',
      values: [
        'invoke',
        'none',
      ],
    },
    groupHeaderTemplate: {
      type: 'any',
    },
    header: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    indexOfFirstVisible: {
      type: 'number',
    },
    indexOfLastVisible: {
      type: 'number',
    },
    itemDataSource: {
      name: 'WinJS.UI.IListDataSource',
      type: 'reference',
      typeArguments: [
        {
          name: 'T',
          type: 'type-param',
        },
      ],
    },
    itemTemplate: {
      type: 'any',
    },
    itemsDraggable: {
      type: 'boolean',
    },
    itemsReorderable: {
      type: 'boolean',
    },
    layout: {
      name: 'WinJS.UI.ILayout2',
      type: 'reference',
      typeArguments: [],
    },
    loadingBehavior: {
      type: 'string',
    },
    loadingState: {
      type: 'string',
    },
    maxDeferredItemCleanup: {
      type: 'number',
    },
    maxLeadingPages: {
      type: 'number',
    },
    maxTrailingPages: {
      type: 'number',
    },
    onAccessibilityAnnotationComplete: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onContentAnimating: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onFooterVisibilityChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onGroupHeaderInvoked: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onHeaderVisibilityChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onItemDragBetween: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onItemDragChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onItemDragDrop: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onItemDragEnd: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onItemDragEnter: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onItemDragLeave: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onItemDragStart: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onItemInvoked: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onKeyboardNavigating: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onLoadingStateChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onSelectionChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onSelectionChanging: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    pagesToLoad: {
      type: 'number',
    },
    pagesToLoadThreshold: {
      type: 'number',
    },
    scrollPosition: {
      type: 'number',
    },
    selection: {
      name: 'WinJS.UI.ISelection',
      type: 'reference',
      typeArguments: [
        {
          name: 'T',
          type: 'type-param',
        },
      ],
    },
    selectionMode: {
      type: 'enum',
      values: [
        'multi',
        'none',
        'single',
      ],
    },
    swipeBehavior: {
      type: 'enum',
      values: [
        'none',
        'select',
      ],
    },
    tapBehavior: {
      type: 'enum',
      values: [
        'directSelect',
        'invokeOnly',
        'none',
        'toggleSelect',
      ],
    },
    zoomableView: {
      name: 'WinJS.UI.IZoomableView',
      type: 'reference',
      typeArguments: [
        {
          name: 'WinJS.UI.ListView',
          type: 'reference',
          typeArguments: [
            {
              name: 'T',
              type: 'type-param',
            },
          ],
        },
      ],
    },
  },
  Menu: {
    alignment: {
      type: 'string',
    },
    anchor: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    commands: {
      name: 'Array',
      type: 'reference',
      typeArguments: [
        {
          name: 'WinJS.UI.MenuCommand',
          type: 'reference',
          typeArguments: [],
        },
      ],
    },
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    hidden: {
      type: 'boolean',
    },
    onAfterHide: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onAfterShow: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeHide: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeShow: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    placement: {
      type: 'string',
    },
  },
  MenuCommand: {
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    extraClass: {
      type: 'string',
    },
    flyout: {
      name: 'WinJS.UI.Flyout',
      type: 'reference',
      typeArguments: [],
    },
    hidden: {
      type: 'boolean',
    },
    id: {
      type: 'string',
    },
    label: {
      type: 'string',
    },
    onClick: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    selected: {
      type: 'boolean',
    },
    type: {
      type: 'string',
    },
  },
  NavBar: {
    closedDisplayMode: {
      type: 'string',
    },
    commands: {
      name: 'WinJS.UI.AppBarCommand',
      type: 'reference',
      typeArguments: [],
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    hidden: {
      type: 'boolean',
    },
    onAfterClose: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onAfterOpen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeClose: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeOpen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onChildrenProcessed: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    opened: {
      type: 'boolean',
    },
    placement: {
      type: 'string',
    },
  },
  NavBarCommand: {
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    icon: {
      type: 'string',
    },
    label: {
      type: 'string',
    },
    location: {
      type: 'any',
    },
    onInvoked: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    splitButton: {
      type: 'boolean',
    },
    splitOpened: {
      type: 'boolean',
    },
    state: {
      type: 'any',
    },
    tooltip: {
      type: 'string',
    },
  },
  NavBarContainer: {
    currentIndex: {
      type: 'number',
    },
    data: {
      name: 'WinJS.Binding.List',
      type: 'reference',
      typeArguments: [
        {
          name: 'WinJS.UI.NavBarCommand',
          type: 'reference',
          typeArguments: [],
        },
      ],
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    fixedSize: {
      type: 'boolean',
    },
    layout: {
      type: 'enum',
      values: [
        'horizontal',
        'vertical',
      ],
    },
    maxRows: {
      type: 'number',
    },
    onInvoked: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onSplitToggle: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    template: {
      name: 'WinJS.Binding.Template',
      type: 'reference',
      typeArguments: [],
    },
  },
  Pivot: {
    customLeftHeader: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    customRightHeader: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    items: {
      name: 'WinJS.Binding.List',
      type: 'reference',
      typeArguments: [
        {
          name: 'WinJS.UI.PivotItem',
          type: 'reference',
          typeArguments: [],
        },
      ],
    },
    locked: {
      type: 'boolean',
    },
    onItemAnimationEnd: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onItemAnimationStart: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onSelectionChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    selectedIndex: {
      type: 'number',
    },
    selectedItem: {
      name: 'WinJS.UI.PivotItem',
      type: 'reference',
      typeArguments: [],
    },
    title: {
      type: 'string',
    },
  },
  PivotItem: {
    contentElement: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    header: {
      type: 'string',
    },
  },
  Rating: {
    averageRating: {
      type: 'number',
    },
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    enableClear: {
      type: 'boolean',
    },
    maxRating: {
      type: 'number',
    },
    onCancel: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onChange: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onPreviewChange: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    tooltipStrings: {
      name: 'Array',
      type: 'reference',
      typeArguments: [
        {
          type: 'string',
        },
      ],
    },
    userRating: {
      type: 'number',
    },
  },
  SearchBox: {
    chooseSuggestionOnEnter: {
      type: 'boolean',
    },
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    focusOnKeyboardInput: {
      type: 'boolean',
    },
    onQueryChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onQuerySubmitted: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onResultSuggestionChosen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onSuggestionsRequested: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    placeholderText: {
      type: 'string',
    },
    queryText: {
      type: 'string',
    },
    searchHistoryContext: {
      type: 'string',
    },
    searchHistoryDisabled: {
      type: 'boolean',
    },
  },
  SemanticZoom: {
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    enableButton: {
      type: 'boolean',
    },
    locked: {
      type: 'boolean',
    },
    onZoomChanged: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    zoomFactor: {
      type: 'number',
    },
    zoomedOut: {
      type: 'boolean',
    },
  },
  SplitView: {
    closedDisplayMode: {
      type: 'enum',
      values: [
        'inline',
        'none',
      ],
    },
    contentElement: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    onAfterClose: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onAfterOpen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeClose: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeOpen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    openedDisplayMode: {
      type: 'enum',
      values: [
        'inline',
        'overlay',
      ],
    },
    paneElement: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    paneOpened: {
      type: 'boolean',
    },
    panePlacement: {
      type: 'enum',
      values: [
        'bottom',
        'left',
        'right',
        'top',
      ],
    },
  },
  SplitViewCommand: {
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    icon: {
      type: 'string',
    },
    label: {
      type: 'string',
    },
    onInvoked: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    tooltip: {
      type: 'string',
    },
  },
  SplitViewPaneToggle: {
    element: {
      name: 'HTMLButtonElement',
      type: 'reference',
      typeArguments: [],
    },
    onInvoked: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    splitView: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
  },
  TimePicker: {
    clock: {
      type: 'string',
    },
    current: {
      name: 'Date',
      type: 'reference',
      typeArguments: [],
    },
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    hourPattern: {
      type: 'string',
    },
    minuteIncrement: {
      type: 'number',
    },
    minutePattern: {
      type: 'string',
    },
    onChange: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    periodPattern: {
      type: 'string',
    },
  },
  ToggleSwitch: {
    checked: {
      type: 'boolean',
    },
    disabled: {
      type: 'boolean',
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    labelOff: {
      type: 'string',
    },
    labelOn: {
      type: 'string',
    },
    onChange: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    title: {
      type: 'string',
    },
  },
  ToolBar: {
    closedDisplayMode: {
      type: 'enum',
      values: [
        'compact',
        'full',
      ],
    },
    data: {
      name: 'WinJS.Binding.List',
      type: 'reference',
      typeArguments: [
        {
          name: 'WinJS.UI.ICommand',
          type: 'reference',
          typeArguments: [],
        },
      ],
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    onAfterClose: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onAfterOpen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeClose: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeOpen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    opened: {
      type: 'boolean',
    },
  },
  Tooltip: {
    contentElement: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    element: {
      name: 'HTMLElement',
      type: 'reference',
      typeArguments: [],
    },
    extraClass: {
      type: 'string',
    },
    infotip: {
      type: 'boolean',
    },
    innerHTML: {
      type: 'string',
    },
    onBeforeClose: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onBeforeOpen: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onClosed: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    onOpened: {
      name: 'Function',
      type: 'reference',
      typeArguments: [],
    },
    placement: {
      type: 'string',
    },
  },
}

let setImmediate
let clearImmediate
if (window.setImmediate && window.clearImmediate) {
  setImmediate = window.setImmediate
  clearImmediate = window.clearImmediate
} else {
  setImmediate = function (callback) {
    return setTimeout(callback, 0)
  }
  clearImmediate = window.clearTimeout
}

function isEvent(propName) {
  return propName[0] === 'o' && propName[1] === 'n'
}

function mapObject(obj, callback) {
  const result = {}
  Object.keys(obj).forEach((key) => {
    const value = callback(key, obj[key])
    if (value !== undefined) {
      result[key] = value
    }
  })
  return result
}

function cloneObject(obj) {
  const result = {}
  for (const k in obj) { result[k] = obj[k] }
  return result
}

function merge(/* objs */) {
  const result = {}
  for (let i = 0, len = arguments.length; i < len; i += 1) {
    const obj = arguments[i]
    if (obj) {
      for (const k in obj) { result[k] = obj[k] }
    }
  }
  return result
}

function endsWith(s, suffix) {
  return s.length >= suffix.length && s.substr(-suffix.length) === suffix
}

function arraysShallowEqual(a, b) {
  if (a === b) {
    return true
  } else if (a.length !== b.length) {
    return false
  }
  for (let i = 0, len = a.length; i < len; i += 1) {
    if (a[i] !== b[i]) {
      return false
    }
  }
  return true
}

function nestedSet(obj, path, value) {
  const parts = path.split('.')
  const allButLast = parts.slice(0, parts.length - 1)
  const last = parts[parts.length - 1]
  const finalObj = allButLast.reduce((current, key) => current[key], obj)
  finalObj[last] = value
}

function deparent(element) {
  const parent = element.parentNode
  parent && parent.removeChild(element)
}

function fireEvent(element, eventName) {
  const eventObject = document.createEvent('CustomEvent')
  eventObject.initCustomEvent(
    eventName,
    true, // bubbles
    false, // cancelable
    null, // detail
  )
  element.dispatchEvent(eventObject)
}

function makeClassSet(className) {
  const classSet = {}
  className && className.split(' ').forEach((aClass) => {
    if (aClass) {
      classSet[aClass] = true
    }
  })
  return classSet
}

function getIn(object, path) {
  const parts = path.split('.')
  return parts.reduce((current, name) => current && current[name], object)
}

// Given a type from RawControlApis returns a React propType.
function typeToPropType(typeInfo) {
  if (typeInfo.type === 'string') {
    return PropTypes.string
  } else if (typeInfo.type === 'boolean') {
    return PropTypes.bool
  } else if (typeInfo.type === 'number') {
    return PropTypes.number
  } else if (typeInfo.type === 'enum') {
    return PropTypes.oneOf(typeInfo.values)
  } else if (typeInfo.type === 'any') {
    return PropTypes.any
  } else if (typeInfo.type === 'reference') {
    if (typeInfo.name === 'Function') {
      return PropTypes.func
    } else if (typeInfo.name === 'Array') {
      const itemPropType = typeToPropType(typeInfo.typeArguments[0])
      return itemPropType ? PropTypes.arrayOf(itemPropType) : PropTypes.array
    } else if (getIn(window, typeInfo.name)) {
      const instance = getIn(window, typeInfo.name)
      return PropTypes.instanceOf(instance)
    }
  } else {
    console.warn(`react-winjs typeToPropType: unable to find propType for type: ${JSON.stringify(typeInfo, null, 2)}`)
  }
}

// TODO: Revisit all of this diffing stuff:
//   - Make it more efficient
//   - It's currently hard to understand because it makes aggressive
//     assumptions (e.g. each item has a key and each item has a winControl)
//   - Is it correct?
//   - Should we just sync an array with a binding list instead of computing
//     edits based on 2 arrays and then applying them to a binding list?
function buildIndex(array) {
  const index = {}
  array.forEach((item, i) => {
    index[item.key] = i
  })
  return index
}
function indexOfKey(array, key) {
  for (let i = 0; i < array.length; i++) {
    if (array[i].key === key) {
      return i
    }
  }
  return -1
}
function diffArraysByKey(old, latest) {
  old = old.slice(0)
  const oldIndex = buildIndex(old)
  const latestIndex = buildIndex(latest)
  const edits = []

  // Handle removals
  for (var i = old.length - 1; i >= 0; i--) {
    var item = old[i]
    if (!latestIndex.hasOwnProperty(item.key)) {
      edits.push({ type: 'delete', index: i })
      old.splice(i, 1)
    }
  }

  // Handle insertions and moves
  for (var i = 0; i < latest.length; i++) {
    var item = latest[i]
    if (!oldIndex.hasOwnProperty(item.key)) {
      // Insertion
      edits.push({ type: 'insert', index: i, value: item })
      old.splice(i, 0, item)
    } else if (old[i].key !== item.key) {
      // Move
      // edits.push({ type: "move", from: oldIndex[item.key], to: i });
      // old.splice(oldIndex[item.key], 1);

      const fromIndex = indexOfKey(old, item.key)
      edits.push({ type: 'move', from: fromIndex, to: i })
      old.splice(fromIndex, 1)
      old.splice(i, 0, item)
    }
  }

  return edits
}
function applyEditsToBindingList(list, edits) {
  edits.forEach((edit) => {
    if (edit.type === 'delete') {
      list.splice(edit.index, 1)
    } else if (edit.type === 'insert') {
      list.splice(edit.index, 0, edit.value.winControl)
    } else if (edit.type === 'move') {
      list.move(edit.from, edit.to)
    } else {
      throw `Unsupported edit type: ${edit.type}`
    }
  }, this)
}

// interface IWinJSComponent {
//     winControl
//     element
//     data
//     displayName
// }

// interface IWinJSChildComponent extends IWinJSComponent {
//     key
//     type
// }

// Returns a WinJSChildComponent for each component in *children*. Reuses
// WinJSChildComponents from *childComponentsMap* when possible. Disposes members of
// *childComponentsMap* if they are no longer needed.
function processChildren(componentDisplayName, children, childComponentsMap) {
  const newChildComponents = []
  const newChildComponentsMap = {}

  // A component's *key* represents its identity. If a component in *children* and a
  // component in *childComponentsMap* have the same *key*, then they are assumed to
  // represent the same component.

  React.Children.forEach(children, (component) => {
    if (component) {
      if (component.ref) {
        console.warn(`ref prop (${component.ref}) will not work on ${
          component.type.displayName} component because it is inside ` +
                    `of a ${componentDisplayName} component`)
      }

      if (component.key === null) {
        console.error(`${component.type.displayName} component requires a key ` +
                    `when inside of a ${componentDisplayName} component`)
      } else {
        let winjsChildComponent = childComponentsMap[component.key]
        if (winjsChildComponent) {
          if (winjsChildComponent.type === component.type) {
            winjsChildComponent.update(component)
          } else {
            // If a component's *type* has changed then the component must be
            // recreated from scratch rather than updated. The reason is that
            // the tagName of the underlying DOM element may have changed. The
            // only way to change the tagName of the underlying DOM element is
            // to instantiate a new react-winjs component.
            winjsChildComponent.dispose()
            winjsChildComponent = new WinJSChildComponent(component)
          }
        } else {
          winjsChildComponent = new WinJSChildComponent(component)
        }
        newChildComponents.push(winjsChildComponent)
        newChildComponentsMap[component.key] = winjsChildComponent
      }
    }
  })

  Object.keys(childComponentsMap).forEach((key) => {
    if (!newChildComponentsMap.hasOwnProperty(key)) {
      childComponentsMap[key].dispose()
    }
  })

  return {
    childComponents: newChildComponents,
    childComponentsMap: newChildComponentsMap,
  }
}

function prefixedProperty(prefix, property) {
  return prefix + property[0].toUpperCase() + property.substr(1)
}

const isUnitlessProperty = {
  flex: true,
  flexGrow: true,
  flexPositive: true,
  flexShrink: true,
  flexNegative: true,
  fontWeight: true,
  lineClamp: true,
  lineHeight: true,
  opacity: true,
  order: true,
  orphans: true,
  widows: true,
  zIndex: true,
  zoom: true,
}
const vendorPrefixes = ['Moz', 'ms', 'Webkit']
Object.keys(isUnitlessProperty).forEach((property) => {
  vendorPrefixes.forEach((prefix) => {
    isUnitlessProperty[prefixedProperty(prefix, property)] = true
  })
})

// Converts the value of a CSS attribute to a string. When certain attributes
// (e.g. width, height) are specified as numbers, this means adding "px" to the
// end of the string value.
function resolveStyleValue(cssProperty, value) {
  if (typeof value === 'number') {
    return isUnitlessProperty[cssProperty] || value === 0 ?
      (`${value}`) :
      (`${value}px`)
  }
  return value ? (`${value}`) : ''
}

const PropHandlers = {
  // Maps to a property on the winControl.
  property(propType) {
    return {
      propType,
      preCtorInit: function property_preCtorInit(element, options, data, displayName, propName, value) {
        options[propName] = value
      },
      update: function property_update(winjsComponent, propName, oldValue, newValue) {
        if (oldValue !== newValue) {
          winjsComponent.winControl[propName] = newValue
        }
      },
    }
  },

  // Maps to a property on the winControl which involves setting focus. Such properties
  // are set outside of componentWillReceiveProps to prevent React from undoing the
  // focus move.
  focusProperty(propType) {
    return {
      propType,
      preCtorInit: function focusProperty_preCtorInit(element, options, data, displayName, propName, value) {
        options[propName] = value
      },
      update: function focusProperty_update(winjsComponent, propName, oldValue, newValue) {
        if (oldValue !== newValue) {
          let asyncToken = winjsComponent.data[propName]
          asyncToken && clearImmediate(asyncToken)
          asyncToken = setImmediate(() => {
            winjsComponent.data[propName] = null
            winjsComponent.winControl[propName] = newValue
          })
        }
      },
      dispose: function focusProperty_dispose(winjsComponent, propName) {
        const asyncToken = winjsComponent.data[propName]
        asyncToken && clearImmediate(asyncToken)
      },
    }
  },

  // Maps to a property on the winControl's element.
  domProperty(propType) {
    return {
      propType,
      preCtorInit: function domProperty_preCtorInit(element, options, data, displayName, propName, value) {
        element[propName] = value
      },
      update: function domProperty_update(winjsComponent, propName, oldValue, newValue) {
        if (oldValue !== newValue) {
          winjsComponent.element[propName] = newValue
        }
      },
    }
  },

  // Maps to an attribute on the winControl's element.
  domAttribute(propType) {
    return {
      propType,
      update: function domAttribute_update(winjsComponent, propName, oldValue, newValue) {
        if (oldValue !== newValue) {
          if (newValue !== null && newValue !== undefined) {
            winjsComponent.element.setAttribute(propName, `${newValue}`)
          } else {
            winjsComponent.element.removeAttribute(propName)
          }
        }
      },
    }
  },

  // Maps to an event on the winControl.
  event: {
    propType: PropTypes.func,
    // Can't set options in preCtorInit for events. The problem is WinJS control options
    // use a different code path to hook up events than the event property setters.
    // Consequently, setting an event property will not automatically unhook the event
    // listener that was specified in the options during initialization. To avoid this
    // problem, always go thru the event property setters.
    update: function event_update(winjsComponent, propName, oldValue, newValue) {
      if (oldValue !== newValue) {
        winjsComponent.winControl[propName.toLowerCase()] = newValue
      }
    },
  },

  // Maps to an event on the winControl's element.
  domEvent: {
    propType: PropTypes.func,
    preCtorInit: function domEvent_preCtorInit(element, options, data, displayName, propName, value) {
      element[propName.toLowerCase()] = value
    },
    update: function domEvent_update(winjsComponent, propName, oldValue, newValue) {
      if (oldValue !== newValue) {
        winjsComponent.element[propName.toLowerCase()] = newValue
      }
    },
  },

  //  Enable the addition and removal of CSS classes on the root of the winControl
  //  but don't clobber whatever CSS classes the underlying control may have added
  //  (e.g. don't clobber win-listview).
  winControlClassName: {
    propType: PropTypes.string,
    preCtorInit: function winControlClassName_preCtorInit(element, options, data, displayName, propName, value) {
      if (value) {
        element.className = value
      }
      data[propName] = makeClassSet(value)
    },
    update: function winControlClassName_update(winjsComponent, propName, oldValue, newValue) {
      if (oldValue !== newValue) {
        const oldClassSet = winjsComponent.data[propName] || {}
        const newClassSet = makeClassSet(newValue)
        const elementClassList = winjsComponent.winControl.element.classList
        for (var className in oldClassSet) {
          if (!newClassSet[className]) {
            elementClassList.remove(className)
          }
        }
        for (var className in newClassSet) {
          if (!oldClassSet[className]) {
            elementClassList.add(className)
          }
        }
        winjsComponent.data[propName] = newClassSet
      }
    },
  },

  //  Enable the addition and removal of inline styles on the root of the winControl
  //  but don't clobber whatever inline styles the underlying control may have added.
  winControlStyle: {
    propType: PropTypes.object,
    preCtorInit: function winControlStyle_preCtorInit(element, options, data, displayName, propName, value) {
      const elementStyle = element.style
      value = value || {}
      for (const cssProperty in value) {
        elementStyle[cssProperty] = resolveStyleValue(cssProperty, value[cssProperty])
      }
    },
    update: function winControlStyle_update(winjsComponent, propName, oldValue, newValue) {
      if (oldValue !== newValue) {
        oldValue = oldValue || {}
        newValue = newValue || {}
        if (winjsComponent.winControl && winjsComponent.winControl.element) {
          const elementStyle = winjsComponent.winControl.element.style
          for (var cssProperty in oldValue) {
            if (!newValue.hasOwnProperty(cssProperty)) {
              elementStyle[cssProperty] = ''
            }
          }
          for (var cssProperty in newValue) {
            if (oldValue[cssProperty] !== newValue[cssProperty]) {
              elementStyle[cssProperty] = resolveStyleValue(cssProperty, newValue[cssProperty])
            }
          }
        }
      }
    },
  },

  // Emits a warning to the console whenever prop gets used.
  warn: function PropHandlers_warn(warnMessage) {
    return {
      // Don't need preCtorInit because this prop handler doesn't have any side
      // effects on the WinJS control. update also runs during initialization so
      // update is just as good as preCtorInit for our use case.
      update: function warn_update(winjsComponent, propName, oldValue, newValue) {
        console.warn(`${winjsComponent.displayName}: ${warnMessage}`)
      },
    }
  },

  // Creates a DOM element and mounts a React component on it. Gives this DOM
  // element to the *winControlProperty* property of the winControl.
  propertyWithMount: function PropHandlers_propertyWithMount(winControlProperty) {
    return {
      propType: PropTypes.element,
      preCtorInit: function propertyWithMount_preCtorInit(element, options, data, displayName, propName, value) {
        if (value) {
          data[propName] = document.createElement('div')
          ReactDOM.render(value, data[propName])
          options[winControlProperty] = data[propName]
        }
      },
      update: function propertyWithMount_update(winjsComponent, propName, oldValue, newValue) {
        const winControl = winjsComponent.winControl
        let element = winjsComponent.data[propName]
        if (newValue) {
          if (!element) {
            element = document.createElement('div')
            winjsComponent.data[propName] = element
          }
          ReactDOM.render(newValue, element)
          if (winControl[winControlProperty] !== element) {
            winControl[winControlProperty] = element
          }
        } else if (oldValue) {
          element && ReactDOM.unmountComponentAtNode(element)
          winControl[winControlProperty] = null
        }
      },
      dispose: function propertyWithMount_dispose(winjsComponent, propName) {
        const element = winjsComponent.data[propName]
        element && ReactDOM.unmountComponentAtNode(element)
      },
    }
  },


  // Mounts a React component on whatever element gets returned by getMountPoint.
  mountTo: function PropHandlers_mountTo(getMountPoint) {
    return {
      propType: PropTypes.element,
      // Can't use preCtorInit because the mount point may not exist until the
      // constructor has run.
      update: function mountTo_update(winjsComponent, propName, oldValue, newValue) {
        const data = winjsComponent.data[propName] || {}
        const version = (data.version || 0) + 1
        winjsComponent.data[propName] = {
          // *mountComponent* may run asynchronously and we may queue it multiple
          // times before it runs. *version* allows us to ensure only the latest
          // version runs and the others are no ops.
          version,
          // *element* is the element to which we last mounted the component.
          element: data.element,
        }

        const mountComponent = function () {
          if (version === winjsComponent.data[propName].version) {
            const oldElement = winjsComponent.data[propName].element

            if (newValue) {
              const newElement = getMountPoint(winjsComponent)
              if (oldElement && oldElement !== newElement) {
                ReactDOM.unmountComponentAtNode(oldElement)
              }

              ReactDOM.render(newValue, newElement)
              winjsComponent.data[propName].element = newElement
            } else if (oldValue) {
              oldElement && ReactDOM.unmountComponentAtNode(oldElement)
              winjsComponent.data[propName].element = null
            }
          }
        }

        // *isDeclarativeControlContainer* is a hook some WinJS controls provide
        // (e.g. HubSection, PivotItem) to ensure that processing runs on the
        // control only when the control is ready for it. This enables lazy loading
        // of HubSections/PivotItems (e.g. load off screen items asynchronously in
        // batches). Additionally, doing processing thru this hook guarantees that
        // the processing won't run until the control is in the DOM.
        const winControl = winjsComponent.winControl
        const queueProcessing = winControl.constructor.isDeclarativeControlContainer
        if (queueProcessing && typeof queueProcessing === 'function') {
          queueProcessing(winControl, mountComponent)
        } else {
          mountComponent()
        }
      },
      dispose: function mountTo_dispose(winjsComponent, propName) {
        const data = winjsComponent.data[propName] || {}
        const element = data.element
        element && ReactDOM.unmountComponentAtNode(element)
      },
    }
  },

  // Uses the Binding.List's editing APIs to make it match the children prop. Does this to
  // the Binding.List stored in the winControl's property called bindingListName.
  syncChildrenWithBindingList: function PropHandlers_syncChildrenWithBindingList(bindingListName) {
    return {
      preCtorInit: function syncChildrenWithBindingList_preCtorInit(element, options, data, displayName, propName, value) {
        const latest = processChildren(displayName, value, {})
        data[propName] = {
          winjsChildComponents: latest.childComponents,
          winjsChildComponentsMap: latest.childComponentsMap,
        }

        options[bindingListName] = new WinJS.Binding.List(latest.childComponents.map(winjsChildComponent => winjsChildComponent.winControl))
      },
      update: function syncChildrenWithBindingList_update(winjsComponent, propName, oldValue, newValue) {
        const data = winjsComponent.data[propName] || {}
        const oldChildComponents = data.winjsChildComponents || []
        const oldChildComponentsMap = data.winjsChildComponentsMap || {}
        const latest = processChildren(winjsComponent.displayName, newValue, oldChildComponentsMap)

        const bindingList = winjsComponent.winControl[bindingListName]
        if (bindingList) {
          applyEditsToBindingList(
            bindingList,
            diffArraysByKey(oldChildComponents, latest.childComponents),
          )
        } else {
          winjsComponent.winControl[bindingListName] = new WinJS.Binding.List(latest.childComponents.map(winjsChildComponent => winjsChildComponent.winControl))
        }

        winjsComponent.data[propName] = {
          winjsChildComponents: latest.childComponents,
          winjsChildComponentsMap: latest.childComponentsMap,
        }
      },
      dispose: function syncChildrenWithBindingList_dispose(winjsComponent, propName) {
        const data = winjsComponent.data[propName] || {}
        const childComponents = data.winjsChildComponents || []
        childComponents.forEach((winjsChildComponent) => {
          winjsChildComponent.dispose()
        })
      },
    }
  },
}

function defineControl(options) {
  // Required
  const winjsControl = options.winjsControl

  // Optional
  const winControlOptions = options.winControlOptions || {}
  const preCtorInit = options.preCtorInit || function () { }
  const propHandlers = options.propHandlers || {}
  const render = options.render || function (component) {
    return React.createElement('div')
  }
  const displayName = options.displayName

  function initWinJSComponent(winjsComponent, element, props) {
    winjsComponent.data = {}
    winjsComponent.displayName = displayName
    winjsComponent.element = element

    // Give propHandlers that implement preCtorInit the opportunity to run before
    // instantiating the winControl.
    const options = cloneObject(winControlOptions)
    preCtorInit(element, options, winjsComponent.data, displayName)
    Object.keys(props).forEach((propName) => {
      const handler = propHandlers[propName]
      if (handler && handler.preCtorInit) {
        handler.preCtorInit(element, options, winjsComponent.data, displayName, propName, props[propName])
      }
    })
    winjsComponent.winControl = new winjsControl(element, options)

    // Process propHandlers that don't implement preCtorInit.
    Object.keys(props).forEach((propName) => {
      const handler = propHandlers[propName]
      if (handler && !handler.preCtorInit) {
        handler.update(winjsComponent, propName, undefined, props[propName])
      }
    })
  }

  function updateWinJSComponent(winjsComponent, prevProps, nextProps) {
    // Handle props that were added or changed
    Object.keys(nextProps).forEach((propName) => {
      const handler = propHandlers[propName]
      if (handler) {
        handler.update(winjsComponent, propName, prevProps[propName], nextProps[propName])
      }
    })

    // Handle props that were removed
    Object.keys(prevProps).forEach((propName) => {
      if (!nextProps.hasOwnProperty(propName)) {
        const handler = propHandlers[propName]
        if (handler) {
          handler.update(winjsComponent, propName, prevProps[propName], undefined)
        }
      }
    })
  }

  function disposeWinJSComponent(winjsComponent) {
    winjsComponent.winControl.dispose && winjsComponent.winControl.dispose()
    Object.keys(propHandlers).forEach((propName) => {
      const handler = propHandlers[propName]
      handler.dispose && handler.dispose(winjsComponent, propName)
    })
  }


  class TypeComponent extends Component {
    constructor(props) {
      super(props)
    }

    shouldComponentUpdate() {
      return false
    }
    // If choosing to implement componentWillMount, be aware that componentWillMount
    // will run when WinJSChildComponent renders the component to a string via
    // renderRootlessComponent.
    componentDidMount() {
      initWinJSComponent(this, ReactDOM.findDOMNode(this), this.props)
    }

    componentWillUnmount() {
      disposeWinJSComponent(this)
    }

    componentWillReceiveProps(nextProps) {
      updateWinJSComponent(this, this.props, nextProps)
    }

    render() {
      return render(this)
    }
  }

  TypeComponent.displayName = displayName
  TypeComponent.initWinJSComponent = initWinJSComponent
  TypeComponent.updateWinJSComponent = updateWinJSComponent
  TypeComponent.disposeWinJSComponent = disposeWinJSComponent
  TypeComponent.propTypes = mapObject(propHandlers, (propName, propHandler) => propHandler.propType)

  return TypeComponent
}

const hostEl = document.createElement('div')
function renderRootlessComponent(component) {
  const html = ReactDOMServer.renderToStaticMarkup(component)
  hostEl.innerHTML = html
  const element = hostEl.firstElementChild
  hostEl.removeChild(element)
  return element
}

// TODO: Is there a better way to solve this problem that WinJSChildComponent solves?
// TODO: Because we're not going thru React's lifecycle, we're missing out on
// validation of propTypes.
// TODO: ref doesn't work on WinJSChildComponents. The reason is that during updates, we
// don't call ReactDOM.render. Because of this, refs would go stale and only reflect the
// state of the component after its first render. Consequently, we clone the component
// during its first render so it never shows up in refs. This should make it clearer
// that refs don't work than generating stale refs.
function WinJSChildComponent(component) { // implements IWinJSChildComponent
  // Clone the component so a ref isn't generated.
  const clonedComponent = React.cloneElement(component, { ref: null })
  const element = renderRootlessComponent(clonedComponent)
  component.type.initWinJSComponent(this, element, component.props)
  this.key = component.key
  this.type = component.type
  this._props = component.props
  this._disposeWinJSComponent = component.type.disposeWinJSComponent
}
WinJSChildComponent.prototype.update = function (component) {
  component.type.updateWinJSComponent(this, this._props, component.props)
  this._props = component.props
}
WinJSChildComponent.prototype.dispose = function () {
  this._disposeWinJSComponent(this)
}


// Prop handlers that are common to every WinJS control.
const defaultPropHandlers = {
  className: PropHandlers.winControlClassName,
  style: PropHandlers.winControlStyle,

  // TODO: Instead of special casing these, support DOM attributes
  // more generically.
  id: PropHandlers.domProperty(PropTypes.string),
  'aria-controls': PropHandlers.domAttribute(PropTypes.any),
  'aria-expanded': PropHandlers.domAttribute(PropTypes.any),
}

// Control-specific prop handlers derived from RawControlApis
const DefaultControlPropHandlers = (function processRawApis() {
  const keepProperty = function keepProperty(propertyName) {
    return !endsWith(propertyName.toLowerCase(), 'element')
  }

  return mapObject(RawControlApis, (controlName, controlApis) => {
    const propHandlers = {}
    Object.keys(controlApis).forEach((propName) => {
      if (isEvent(propName)) {
        propHandlers[propName] = PropHandlers.event
      } else if (keepProperty(propName)) {
        const typeInfo = controlApis[propName]
        const propType = typeToPropType(typeInfo)
        propHandlers[propName] = PropHandlers.property(propType)
      }
    })
    return propHandlers
  })
}())

// Each entry in controlApis has the same format as the argument to defineControl except
// updateWithDefaults automatically provides:
//   - winjsControl
//   - displayName
//   - propHandlers
// and updateWithDefaults implements an extra option:
//   - underlyingControlName
// By default, winjsControl, displayName, and propHanders are inferred from the entry's key
// in controlApis. If underlyingControlName is provided, they will instead be inferred from
// that name.
function updateWithDefaults(controlApis) {
  Object.keys(controlApis).forEach((controlName) => {
    const spec = controlApis[controlName]
    const winjsControlName = spec.underlyingControlName || controlName
    spec.winjsControl = spec.winjsControl || WinJS.UI[winjsControlName]
    spec.displayName = spec.displayName || winjsControlName
    spec.propHandlers = merge(
      defaultPropHandlers, // Common to all WinJS controls
      DefaultControlPropHandlers[winjsControlName], // Control-specific derived from RawControlApis
      spec.propHandlers, // Control-specific handwritten
    )
  })
  return controlApis
}

const typeWarnPropHandler = PropHandlers.warn("Invalid prop 'type'. Instead, the command type is" +
    ' determined by the component: Button, Toggle, Separator, ContentCommand, FlyoutCommand.')
const CommandSpecs = {
  Button: {
    underlyingControlName: 'AppBarCommand',
    winControlOptions: { type: 'button' },
    render(component) {
      return React.createElement('button')
    },
    propHandlers: {
      type: typeWarnPropHandler,
    },
  },
  Toggle: {
    underlyingControlName: 'AppBarCommand',
    winControlOptions: { type: 'toggle' },
    render(component) {
      return React.createElement('button')
    },
    propHandlers: {
      type: typeWarnPropHandler,
    },
  },
  Separator: {
    underlyingControlName: 'AppBarCommand',
    winControlOptions: { type: 'separator' },
    render(component) {
      return React.createElement('hr')
    },
    propHandlers: {
      type: typeWarnPropHandler,
    },
  },
  ContentCommand: {
    underlyingControlName: 'AppBarCommand',
    winControlOptions: { type: 'content' },
    propHandlers: {
      type: typeWarnPropHandler,
      children: PropHandlers.mountTo(winjsComponent => winjsComponent.winControl.element),
    },
  },
  FlyoutCommand: {
    underlyingControlName: 'AppBarCommand',
    winControlOptions: { type: 'flyout' },
    render(component) {
      return React.createElement('button')
    },
    propHandlers: {
      type: typeWarnPropHandler,
      flyoutComponent: {
        propType: PropTypes.element,
        update: function FlyoutCommand_flyoutComponent_update(winjsComponent, propName, oldValue, newValue) {
          let data = winjsComponent.data[propName]
          if (!data) {
            const flyoutHost = document.createElement('div')
            flyoutHost.className = 'win-react-flyout-host'
            document.body.appendChild(flyoutHost)
            winjsComponent.data[propName] = data = {
              flyoutHost,
              flyoutComponent: null,
            }
          }
          const oldWinControl = data.flyoutComponent && data.flyoutComponent.winControl
          const instance = ReactDOM.render(newValue, data.flyoutHost)
          if (oldWinControl !== instance.winControl) {
            winjsComponent.winControl.flyout = instance.winControl
          }
          winjsComponent.data[propName].flyoutComponent = instance
        },
        dispose: function FlyoutCommand_flyoutComponent_dispose(winjsComponent, propName) {
          const data = winjsComponent.data[propName]
          if (data && data.flyoutHost) {
            ReactDOM.unmountComponentAtNode(data.flyoutHost)
            deparent(data.flyoutHost)
          }
        },
      },
    },
  },
}

const ControlApis = updateWithDefaults({
  AppBar: {
    propHandlers: {
      opened: PropHandlers.focusProperty(PropTypes.bool),
      children: PropHandlers.syncChildrenWithBindingList('data'),
    },
  },
  'AppBar.Button': CommandSpecs.Button,
  'AppBar.Toggle': CommandSpecs.Toggle,
  'AppBar.Separator': CommandSpecs.Separator,
  'AppBar.ContentCommand': CommandSpecs.ContentCommand,
  'AppBar.FlyoutCommand': CommandSpecs.FlyoutCommand,
  AutoSuggestBox: {},
  BackButton: {
    preCtorInit(element, options, data, displayName) {
      element.addEventListener('click', (eventObject) => {
        // Prevent React from seeing the "click" event to workaround this React
        // bug: https://github.com/facebook/react/issues/3790
        eventObject.stopPropagation()
      })
    },
    render(component) {
      return React.createElement('button')
    },
  },
  // CellSpanningLayout: Not a component so just use off of WinJS.UI?
  ContentDialog: {
    propHandlers: {
      hidden: PropHandlers.focusProperty(PropTypes.bool),
      children: PropHandlers.mountTo(winjsComponent => winjsComponent.winControl.element.querySelector('.win-contentdialog-content')),
    },
  },
  DatePicker: {},
  FlipView: {},
  Flyout: {
    // The WinJS Flyout control doesn't come with a good mount point.
    // App content and control content are siblings in Flyout.element.
    // Consequently, if React rendered to Flyout.element, it would destroy
    // some of Flyout's elements. To fix this, we give Flyout a div
    // (className="win-react-flyout-mount-point") which will contain only
    // app content. The React component renders into this div so it doesn't
    // destroy any control content.
    render(component) {
      return React.createElement(
        'div', null,
        React.createElement('div', { className: 'win-react-flyout-mount-point' }),
      )
    },
    propHandlers: {
      hidden: PropHandlers.focusProperty(PropTypes.bool),
      children: PropHandlers.mountTo(winjsComponent => winjsComponent.winControl.element.querySelector('.win-react-flyout-mount-point')),
    },
  },
  // GridLayout: Not a component so just use off of WinJS.UI?
  Hub: {
    propHandlers: {
      children: PropHandlers.syncChildrenWithBindingList('sections'),
    },
  },
  'Hub.Section': {
    underlyingControlName: 'HubSection',
    propHandlers: {
      children: PropHandlers.mountTo(winjsComponent => winjsComponent.winControl.contentElement),
    },
  },
  ItemContainer: {
    propHandlers: {
      children: PropHandlers.mountTo(winjsComponent => winjsComponent.winControl.element.querySelector('.win-item')),
    },
  },
  // ListLayout: Not a component so just use off of WinJS.UI?
  ListView: {
    propHandlers: {
      currentItem: PropHandlers.focusProperty(PropTypes.any),
      headerComponent: PropHandlers.propertyWithMount('header'),
      footerComponent: PropHandlers.propertyWithMount('footer'),
    },
  },
  // TODO: Keyboarding doesn't work in Menu probably because MenuCommands are not direct
  // children of the Menu.
  Menu: {
    propHandlers: {
      hidden: PropHandlers.focusProperty(PropTypes.bool),
      children: {
        // children propHandler looks like this rather than using mountTo on
        // winControl.element because this enables props.children to have
        // multiple components whereas the other technique restricts it to one.
        update(winjsComponent, propName, oldValue, newValue) {
          // TODO: dispose
          ReactDOM.render(React.createElement('div', null, newValue), winjsComponent.winControl.element)
        },
      },
    },
  },
  'Menu.Button': merge(CommandSpecs.Button, {
    underlyingControlName: 'MenuCommand',
  }),
  'Menu.Toggle': merge(CommandSpecs.Toggle, {
    underlyingControlName: 'MenuCommand',
  }),
  'Menu.Separator': merge(CommandSpecs.Separator, {
    underlyingControlName: 'MenuCommand',
  }),
  'Menu.FlyoutCommand': merge(CommandSpecs.FlyoutCommand, {
    underlyingControlName: 'MenuCommand',
  }),
  Pivot: {
    propHandlers: {
      children: PropHandlers.syncChildrenWithBindingList('items'),
      customLeftHeaderComponent: PropHandlers.propertyWithMount('customLeftHeader'),
      customRightHeaderComponent: PropHandlers.propertyWithMount('customRightHeader'),
    },
  },
  'Pivot.Item': {
    underlyingControlName: 'PivotItem',
    propHandlers: {
      children: PropHandlers.mountTo(winjsComponent => winjsComponent.winControl.contentElement),
    },
  },
  Rating: {},
  SemanticZoom: {
    propHandlers: {
      zoomedInComponent: {
        propType: PropTypes.element,
        preCtorInit: function zoomedInComponent_preCtorInit(element, options, data, displayName, propName, value) {
          const child = new WinJSChildComponent(value)
          // Zoomed in component should be the first child.
          element.insertBefore(child.winControl.element, element.firstElementChild)
          data[propName] = child
        },
        update: function zoomedInComponent_update(winjsComponent, propName, oldValue, newValue) {
          const child = winjsComponent.data[propName]
          if (child.type === newValue.type) {
            child.update(newValue)
          } else {
            console.warn("SemanticZoom: zoomedInComponent's component type can't change")
          }
        },
        dispose: function zoomedInComponent_dispose(winjsComponent, propName) {
          const child = winjsComponent.data[propName]
          child && child.dispose()
        },
      },
      zoomedOutComponent: {
        propType: PropTypes.element,
        preCtorInit: function zoomedOutComponent_preCtorInit(element, options, data, displayName, propName, value) {
          const child = new WinJSChildComponent(value)
          // Zoomed out component should be the second child.
          element.appendChild(child.winControl.element)
          data[propName] = child
        },
        update: function zoomedOutComponent_update(winjsComponent, propName, oldValue, newValue) {
          const child = winjsComponent.data[propName]
          if (child.type === newValue.type) {
            child.update(newValue)
          } else {
            console.warn("SemanticZoom: zoomedOutComponent's component type can't change")
          }
        },
        dispose: function zoomedOutComponent_dispose(winjsComponent, propName) {
          const child = winjsComponent.data[propName]
          child && child.dispose()
        },
      },
    },
  },
  SplitView: {
    propHandlers: {
      paneOpened: PropHandlers.focusProperty(PropTypes.bool),
      paneComponent: PropHandlers.mountTo(winjsComponent => winjsComponent.winControl.paneElement),
      contentComponent: PropHandlers.mountTo(winjsComponent => winjsComponent.winControl.contentElement),
    },
  },
  'SplitView.Command': {
    underlyingControlName: 'SplitViewCommand',
  },
  SplitViewPaneToggle: {
    render(component) {
      return React.createElement('button')
    },
    propHandlers: {
      // paneOpened provides a React-friendly interface for making the SplitViewPaneToggle accessible.
      // When paneOpened is specified, is not undefined, and is not null, it:
      //  - Sets SplitViewPaneToggle's aria-expanded attribute to match paneOpened
      //  - Fires SplitViewPaneToggle's "invoked" event when aria-expanded is mutated
      paneOpened: {
        propType: PropTypes.bool,
        update: function paneOpened_update(winjsComponent, propName, oldValue, newValue) {
          let data = winjsComponent.data[propName]
          if (!data) {
            data = {
              // WinJS.UI.SplitViewPaneToggle depends on WinJS.Utilities._MutationObserver so it
              // is safe to use it here.
              ariaExpandedMutationObserver: new WinJS.Utilities._MutationObserver((() => {
                const element = winjsComponent.element
                const ariaExpanded = (element.getAttribute('aria-expanded') === 'true')
                if (ariaExpanded !== winjsComponent.data[propName].value) {
                  fireEvent(element, 'invoked') // Fire WinJS.UI.SplitViewPaneToggle's invoked event
                }
              })),
              observing: false,
              value: newValue,
            }
            winjsComponent.data[propName] = data
          }

          if (oldValue !== newValue) {
            if (newValue !== null && newValue !== undefined) {
              winjsComponent.element.setAttribute('aria-expanded', newValue ? 'true' : 'false')
              if (!data.observing) {
                data.observing = true
                data.ariaExpandedMutationObserver.observe(winjsComponent.element, {
                  attributes: true,
                  attributeFilter: ['aria-expanded'],
                })
              }
            } else {
              winjsComponent.element.removeAttribute('aria-expanded')
              if (data.observing) {
                data.observing = false
                data.ariaExpandedMutationObserver.disconnect()
              }
            }
          }

          data.value = newValue
        },
        dispose: function paneOpened_dispose(winjsComponent, propName) {
          const data = winjsComponent.data[propName]
          if (data && data.observing) {
            data.ariaExpandedMutationObserver.disconnect()
          }
        },
      },
    },
  },
  TimePicker: {},
  ToggleSwitch: {},
  ToolBar: {
    propHandlers: {
      opened: PropHandlers.focusProperty(PropTypes.bool),
      children: PropHandlers.syncChildrenWithBindingList('data'),
    },
  },
  'ToolBar.Button': CommandSpecs.Button,
  'ToolBar.Toggle': CommandSpecs.Toggle,
  'ToolBar.Separator': CommandSpecs.Separator,
  'ToolBar.ContentCommand': CommandSpecs.ContentCommand,
  'ToolBar.FlyoutCommand': CommandSpecs.FlyoutCommand,
  Tooltip: {
    propHandlers: {
      children: PropHandlers.mountTo(winjsComponent => winjsComponent.winControl.element),
      contentComponent: PropHandlers.propertyWithMount('contentElement'),
    },
  },
})

//
// Publish
//

const ReactWinJS = {}

// Controls
//

// Sort to ensure that controls come before their subcontrols
// (e.g. AppBar comes before AppBar.Toggle).
Object.keys(ControlApis).sort().forEach((controlName) => {
  nestedSet(ReactWinJS, controlName, defineControl(ControlApis[controlName]))
})

// Utilites
//

// Given a function that returns a React component,
// returns an item renderer function that can be used
// with WinJS controls. Useful for describing FlipView
// and ListView item templates as React components.
ReactWinJS.reactRenderer = function reactRenderer(componentFunction) {
  let componentFunctionBound
  const renderItem = function renderItem(item) {
    const element = document.createElement('div')
    element.className = 'win-react-renderer-host'
    ReactDOM.render(componentFunctionBound(item), element)
    WinJS.Utilities.markDisposable(element, () => {
      ReactDOM.unmountComponentAtNode(element)
    })
    return element
  }

  return function itemRenderer(itemOrItemPromise) {
    if (!componentFunctionBound) {
      componentFunctionBound = componentFunction.bind(this)
    }

    return WinJS.Promise.is(itemOrItemPromise) ?
      itemOrItemPromise.then(renderItem) :
      renderItem(itemOrItemPromise)
  }
}


// Low-level utilities for wrapping custom WinJS-style controls
//

ReactWinJS.defineControl = defineControl
ReactWinJS.PropHandlers = PropHandlers
ReactWinJS.defaultPropHandlers = defaultPropHandlers

export default ReactWinJS