Dev Notes

• What's the most common way to distribute React components? webpack? requirejs?

• React appears to restore focus after componentWillReceiveProps. This is problematic for overlays like Flyout that are synchronously shown and take focus in componentWillReceiveProps. Maybe treat props such as hidden/opened as special and set them outside of React component lifecycle so that focus movements work properly.

• propTypes

• Should React be listed as a peerDependency instead of as a dependency?

• Does this project need a webpack config file?

• Enable setting of classNames and inline styles on control roots?

• Which props need to work like controlled components?

• What if we modeled dismissables like this? Instead of the app having to call hide/show, the app could render a special element for all dismissables (e.g. Dismissables) and when a dismissable is rendered into there, it will be shown. When it is no longer rendered in there, it will be hidden and removed from the DOM when its hide animation completes. This only makes sense for things that hide/show not for things that close/open because the latter need to be rendered even they're closed. Example:

  <Dismissables>
    <Flyout key="myFlyout">
      This is a Flyout!
    </Flyout>
    <ContentDialog key="myDialog">
      This is a ContentDialog!
    </ContentDialog>
  </Dismissables>
  

• Adaptive apps. In adaptive apps, you want to render certain components at some screen sizes but not at others. For cheap WinJS controls, reinstantiating the control during resize when it is needed may be fine. However, this pattern may not work well for expensive controls like the ListView. We'd want more of a lazy init pattern:

  • If the control isn't needed at this screen size, don't render it.
  • When the control is needed, instatiate it.
  • When the control isn't needed anymore, hide it (display: none).
  • When the control is needed again, show it (display: block) and call forceLayout()

  react-winjs could add a special prop to handle all of the details of this pattern for you with a special prop (e.g. displayNone). It could look like this:

  <ListView
    displayNone={this.state.shouldHideListViewAtThisScreenSize}
    itemDataSource={this.state.itemDataSource}
    itemTemplate={this.itemTemplate} />
  

• Provide SplitViewButton & SplitViewCommand components or wait for WinJS to provide the corresponding controls?

• Think more about React bug: https://github.com/facebook/react/issues/3790. BackButton has to work around it. I wonder if other controls which often cause navigation on "click" will also have to workaround it (e.g. NavBarCommand).