Convert everything to ES6 modules

Two reasons for this:

1. `babel-plugin-react-intl` uses import statements to extract messages
2. I thought rollup might be able to reduce the bundle size, but discovered that:
    a. Rollup is a big pain to set up and requires a lot of plugins and configuration
    b. The resulting bundle size is larger than the bundle with Browserify

example/index.js

@@ -10,26 +10,48 @@ const features = JSON.parse(sampleGeoJSON).features
 
 const history = createHistory()
 
+const pathRegExp = /^(?:\/((?:[^/]+?)))?(?:\/((?:[^/]+?)))?(?:\/((?:[^/]+?)))?(?:\/(?=$))?$/
+
+function uiFromPath (path) {
+  const match = pathRegExp.exec(path)
+  if (!match) return {}
+  return {
+    activeView: match[1],
+    activeModal: match[2] && match[2].replace('features', 'feature'),
+    settingsTab: match[2] === 'settings' && match[3],
+    featureId: match[2] === 'features' && match[3]
+  }
+}
+
+function pathFromUi (ui) {
+  let path = '/'
+  if (ui.activeView) path += ui.activeView + '/'
+  if (ui.activeModal === 'settings') path += 'settings/' + ui.settingsTab + '/'
+  if (ui.activeModal === 'feature') path += 'features/' + ui.featureId + '/'
+  return path
+}
+
 class Example extends React.Component {
   constructor (props) {
     super(props)
     this.history = createHistory()
     this.unlisten = history.listen(this.handleHistoryChange)
     this.state = {
-      route: history.location.pathname
+      ui: uiFromPath(history.location.pathname)
     }
   }
   handleHistoryChange = (location, action) => {
     if (action === 'POP') {
-      this.setState({route: location.pathname})
+      this.setState({ui: uiFromPath(location.pathname)})
     }
   }
-  handleChangeRoute = (route) => {
-    history.push(route)
-    this.setState({route})
+  handleChangeUi = (ui) => {
+    const path = pathFromUi(ui)
+    ui.redirect ? history.replace(path) : history.push(path)
+    this.setState({ui})
   }
   render () {
-    return <MapFilter features={features} route={this.state.route} onChangeRoute={this.handleChangeRoute} />
+    return <MapFilter features={features} ui={this.state.ui} onChangeUi={this.handleChangeUi} />
   }
 }
 

lib/babel-plugin-insert-css.js

@@ -36,4 +36,4 @@ module.exports = function ({types: t}) {
       }
     }
   }
-}
+}

package.json

@@ -77,7 +77,7 @@
     "babel-plugin-transform-class-properties": "^6.5.2",
     "babel-plugin-transform-object-rest-spread": "^6.5.0",
     "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.5.0",
     "babelify": "^7.2.0",
     "brfs": "^1.4.3",

src/action_creators.js

@@ -1,27 +1,18 @@
-const actions = {
-  updateFilter: 'UPDATE_FILTER',
-  removeFilter: 'REMOVE_FILTER',
-  updateVisibleFilters: 'UPDATE_VISIBLE_FILTERS',
-  moveMap: 'MOVE_MAP',
-  replaceFeatures: 'REPLACE_FEATURES',
-  addFeatures: 'ADD_FEATURES',
-  replaceMapStyle: 'REPLACE_MAP_STYLE',
-  openSettings: 'OPEN_SETTINGS',
-  showFeatureDetail: 'SHOW_FEATURE_DETAIL',
-  closeModal: 'CLOSE_MODAL',
-  switchView: 'SWITCH_VIEW'
-}
-
-const actionCreators = {}
+export const updateFilter = createActionCreator('UPDATE_FILTER')
+export const removeFilter = createActionCreator('REMOVE_FILTER')
+export const updateVisibleFilters = createActionCreator('UPDATE_VISIBLE_FILTERS')
+export const moveMap = createActionCreator('MOVE_MAP')
+export const replaceFeatures = createActionCreator('REPLACE_FEATURES')
+export const addFeatures = createActionCreator('ADD_FEATURES')
+export const replaceMapStyle = createActionCreator('REPLACE_MAP_STYLE')
+export const openSettings = createActionCreator('OPEN_SETTINGS')
+export const showFeatureDetail = createActionCreator('SHOW_FEATURE_DETAIL')
+export const closeModal = createActionCreator('CLOSE_MODAL')
+export const switchView = createActionCreator('SWITCH_VIEW')
+export const redirectView = createActionCreator('REDIRECT_VIEW')
 
-for (var actionName in actions) {
-  actionCreators[actionName] = createActionCreator(actionName)
-}
-
-function createActionCreator (actionName) {
+function createActionCreator (type) {
   return function (payload) {
-    return {type: actions[actionName], payload}
+    return {type: type, payload}
   }
 }
-
-module.exports = actionCreators

src/components/date_filter.js

@@ -1,21 +1,22 @@
-const React = require('react')
-const ReactDOM = require('react-dom')
-const { PropTypes } = React
-const shouldPureComponentUpdate = require('react-pure-render/function')
-const makePure = require('recompose/pure').default
-const DateIcon = require('material-ui/svg-icons/action/date-range').default
-const {ListItem} = require('material-ui/List')
-const IconButton = require('material-ui/IconButton').default
-const EditIcon = require('material-ui/svg-icons/editor/mode-edit').default
-const {Popover, PopoverAnimationVertical} = require('material-ui/Popover')
-const DateRange = makePure(require('react-date-range').DateRange)
-const moment = require('moment')
-const omit = require('lodash/omit')
+import React, { PropTypes } from 'react'
+import {findDOMNode} from 'react-dom'
+import shouldPureComponentUpdate from 'react-pure-render/function'
+import makePure from 'recompose/pure'
+import DateIcon from 'material-ui/svg-icons/action/date-range'
+import {ListItem} from 'material-ui/List'
+import IconButton from 'material-ui/IconButton'
+import EditIcon from 'material-ui/svg-icons/editor/mode-edit'
+import {Popover, PopoverAnimationVertical} from 'material-ui/Popover'
+import {DateRange} from 'react-date-range'
+import moment from 'moment'
+import omit from 'lodash/omit'
 
-const ShowAllButton = require('./show_all_button')
-const { titleCase } = require('../util/text_helpers')
-const { listStyles } = require('../styles')
-const { dateFormatShort } = require('../../config.json')
+import ShowAllButton from './show_all_button'
+import { titleCase } from '../util/text_helpers'
+import { listStyles } from '../styles'
+import { dateFormatShort } from '../../config.json'
+
+const PureDateRange = makePure(DateRange)
 
 const styles = {
   nestedList: {
@@ -126,7 +127,7 @@ class DateFilter extends React.Component {
 
   componentDidMount () {
     this.setState({
-      el: ReactDOM.findDOMNode(this.refs.dateItem)
+      el: findDOMNode(this.refs.dateItem)
     })
   }
 
@@ -165,7 +166,7 @@ class DateFilter extends React.Component {
               onRequestClose={this.handleRequestClose}
               animation={PopoverAnimationVertical}
             >
-              <DateRange
+              <PureDateRange
                 startDate={minMoment}
                 endDate={maxMoment}
                 onChange={this.handleDateChange} />
@@ -177,4 +178,4 @@ class DateFilter extends React.Component {
   }
 }
 
-module.exports = DateFilter
+export default DateFilter

src/components/discrete_filter.js

@@ -1,17 +1,18 @@
-const React = require('react')
-const { PropTypes } = React
-const shouldPureComponentUpdate = require('react-pure-render/function')
-const makePure = require('recompose/pure').default
-const Checkbox = makePure(require('material-ui/Checkbox').default)
-const ListIcon = require('material-ui/svg-icons/action/list').default
-const {ListItem} = require('material-ui/List')
-const {FormattedMessage} = require('react-intl')
-const omit = require('lodash/omit')
+import React, { PropTypes } from 'react'
+import shouldPureComponentUpdate from 'react-pure-render/function'
+import makePure from 'recompose/pure'
+import Checkbox from 'material-ui/Checkbox'
+import ListIcon from 'material-ui/svg-icons/action/list'
+import {ListItem} from 'material-ui/List'
+import {FormattedMessage} from 'react-intl'
+import omit from 'lodash/omit'
 
-const ShowAllButton = require('./show_all_button')
-const OnlyButton = require('./only_button')
-const msg = require('../util/intl_helpers').createMessage
-const { listStyles } = require('../styles')
+import ShowAllButton from './show_all_button'
+import OnlyButton from './only_button'
+import {createMessage as msg} from '../util/intl_helpers'
+import { listStyles } from '../styles'
+
+const PureCheckbox = makePure(Checkbox)
 
 const styles = {
   checkbox: {
@@ -115,7 +116,7 @@ class DiscreteFilter extends React.Component {
             style={{position: 'relative'}}
             onMouseEnter={this.handleMouseEnter.bind(this, v)}
             onMouseLeave={this.handleMouseLeave}>
-            <Checkbox
+            <PureCheckbox
               label={<FormattedMessage {...msg('field_value')(v)} />}
               title={<FormattedMessage {...msg('field_value')(v)} />}
               value={v}
@@ -136,4 +137,4 @@ class DiscreteFilter extends React.Component {
   }
 }
 
-module.exports = DiscreteFilter
+export default DiscreteFilter

src/components/feature_detail.js

@@ -1,21 +1,20 @@
-const React = require('react')
+import React from 'react'
 
-const { connect } = require('react-redux')
-const { Card, CardMedia, CardText, CardHeader } = require('material-ui/Card')
-const IconButton = require('material-ui/IconButton').default
-const CloseIcon = require('material-ui/svg-icons/navigation/close').default
-const {FormattedMessage} = require('react-intl')
+import { connect } from 'react-redux'
+import { Card, CardMedia, CardText, CardHeader } from 'material-ui/Card'
+import IconButton from 'material-ui/IconButton'
+import CloseIcon from 'material-ui/svg-icons/navigation/close'
+import {FormattedMessage} from 'react-intl'
 
-const getNavigationParams = require('../selectors/navigation')
-const getFeaturesById = require('../selectors/features_by_id')
-const getFieldMapping = require('../selectors/field_mapping')
-const getColorIndex = require('../selectors/color_index')
-const getVisibleFields = require('../selectors/visible_fields')
-const getFieldAnalysis = require('../selectors/field_analysis')
-const {createMessage: msg} = require('../util/intl_helpers')
-const MarkerIcon = require('./marker_icon')
-const Image = require('./image')
-const FeatureTable = require('./feature_table')
+import getFeaturesById from '../selectors/features_by_id'
+import getFieldMapping from '../selectors/field_mapping'
+import getColorIndex from '../selectors/color_index'
+import getVisibleFields from '../selectors/visible_fields'
+import getFieldAnalysis from '../selectors/field_analysis'
+import {createMessage as msg} from '../util/intl_helpers'
+import MarkerIcon from './marker_icon'
+import Image from './image'
+import FeatureTable from './feature_table'
 
 const styles = {
   card: {
@@ -92,14 +91,14 @@ const FeatureDetail = ({color, label, media, data, title, subtitle, onCloseClick
   </Card>
 )
 
-module.exports = connect(
+export default connect(
   (state, ownProps) => {
     const featuresById = getFeaturesById(state)
     const colorIndex = getColorIndex(state)
     const fieldMapping = getFieldMapping(state)
     const visibleFields = getVisibleFields(state)
     const fieldAnalysis = getFieldAnalysis(state)
-    const id = ownProps.id || getNavigationParams(state).featureId
+    const id = ownProps.id || state.ui.featureId
     const feature = featuresById[id]
     if (!feature) return {}
     const geojsonProps = feature.properties

src/components/feature_table.js

@@ -1,9 +1,9 @@
-const React = require('react')
-const ReactDOM = require('react-dom')
-const {Table, TableBody, TableRow, TableRowColumn} = require('material-ui/Table')
-const {FormattedMessage} = require('react-intl')
-const assign = require('object-assign')
-const msg = require('../util/intl_helpers').createMessage
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {Table, TableBody, TableRow, TableRowColumn} from 'material-ui/Table'
+import {FormattedMessage} from 'react-intl'
+import assign from 'object-assign'
+import {createMessage as msg} from '../util/intl_helpers'
 
 const styles = {
   firstColumn: {
@@ -64,4 +64,4 @@ class FeatureTable extends React.Component {
   }
 }
 
-module.exports = FeatureTable
+export default FeatureTable

src/components/filter.js

@@ -1,14 +1,14 @@
-const React = require('react')
+import React from 'react'
 const { PropTypes } = React
-const pure = require('recompose/pure').default
-const {List, ListItem} = require('material-ui/List')
-const Divider = require('material-ui/Divider').default
-const SettingsIcon = require('material-ui/svg-icons/action/settings').default
-const {defineMessages, FormattedMessage} = require('react-intl')
+import pure from 'recompose/pure'
+import {List, ListItem} from 'material-ui/List'
+import Divider from 'material-ui/Divider'
+import SettingsIcon from 'material-ui/svg-icons/action/settings'
+import {defineMessages, FormattedMessage} from 'react-intl'
 
-const DiscreteFilter = require('./discrete_filter')
-const DateFilter = require('./date_filter')
-const {FILTER_TYPES} = require('../constants')
+import DiscreteFilter from './discrete_filter'
+import DateFilter from './date_filter'
+import {FILTER_TYPES} from '../constants'
 
 const style = {
   outer: {
@@ -111,4 +111,4 @@ Filter.propTypes = {
   onClickSettings: PropTypes.func
 }
 
-module.exports = pure(Filter)
+export default pure(Filter)

src/components/filter_configurator.js

@@ -1,17 +1,17 @@
-const React = require('react')
-const { connect } = require('react-redux')
+import React from 'react'
+import { connect } from 'react-redux'
 const { PropTypes } = React
-const { Card, CardText, CardHeader } = require('material-ui/Card')
-const IconButton = require('material-ui/IconButton').default
-const CloseIcon = require('material-ui/svg-icons/navigation/close').default
-const { List, ListItem } = require('material-ui/List')
-const Toggle = require('material-ui/Toggle').default
-const {defineMessages, FormattedMessage} = require('react-intl')
+import { Card, CardText, CardHeader } from 'material-ui/Card'
+import IconButton from 'material-ui/IconButton'
+import CloseIcon from 'material-ui/svg-icons/navigation/close'
+import { List, ListItem } from 'material-ui/List'
+import Toggle from 'material-ui/Toggle'
+import {defineMessages, FormattedMessage} from 'react-intl'
 
-const getFilterableFields = require('../selectors/filterable_fields')
-const getVisibleFilters = require('../selectors/visible_filters')
-const { removeFilter, updateVisibleFilters } = require('../action_creators')
-const msg = require('../util/intl_helpers').createMessage
+import getFilterableFields from '../selectors/filterable_fields'
+import getVisibleFilters from '../selectors/visible_filters'
+import { removeFilter, updateVisibleFilters } from '../action_creators'
+import {createMessage as msg} from '../util/intl_helpers'
 
 const styles = {
   card: {
@@ -133,7 +133,7 @@ function mapDispatchToProps (dispatch) {
   }
 }
 
-module.exports = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(FilterConfigurator)

src/components/image.js

@@ -1,9 +1,9 @@
-const React = require('react')
-const ReactDOM = require('react-dom')
-const ImageLoader = require('react-imageloader')
-const CircularProgress = require('material-ui/CircularProgress').default
-const omit = require('lodash/omit')
-const assign = require('object-assign')
+import React from 'react'
+import ReactDOM from 'react-dom'
+import ImageLoader from 'react-imageloader'
+import CircularProgress from 'material-ui/CircularProgress'
+import omit from 'lodash/omit'
+import assign from 'object-assign'
 
 const styles = {
   wrapper: {
@@ -68,7 +68,7 @@ class Image extends React.Component {
   }
 }
 
-module.exports = Image
+export default Image
 
 function roundUp (v) {
   return Math.ceil(v / 50) * 50