breezy 0.12.0 → 0.17.0

data/lib/breezy/redirection.rb

@@ -0,0 +1,30 @@
+module Breezy
+  module Redirection
+    def _compute_redirect_to_location(request, options)
+      computed_location = URI.parse(super)
+      next_param = Rack::Utils
+          .parse_nested_query(computed_location.query)
+
+      if request.params[:__] == "0"
+        computed_location.query = next_param.merge({__: "0"}).to_query
+      end
+
+      computed_location.to_s
+    end
+
+    def redirect_back_with_bzq(opts)
+      if request.referrer && params[:bzq]
+        referrer_url = URI.parse(request.referrer)
+        referrer_url.query = Rack::Utils
+          .parse_nested_query(referrer_url.query)
+          .merge({bzq: params[:bzq]})
+          .to_query
+
+        redirect_to referrer_url.to_s, opts
+      else
+        redirect_back(opts)
+      end
+    end
+  end
+end
+

data/lib/breezy/xhr_headers.rb

@@ -17,17 +17,7 @@ module Breezy
         end
       end
 
-      if request.xhr? && request.headers["X-BREEZY-REQUEST"]
-        self.status = 200
-        response.headers["X-BREEZY-LOCATION"] = url
-      end
-
       url
     end
-
-    private
-      def set_response_url
-        response.headers['X-RESPONSE-URL'] = request.fullpath
-      end
   end
 end

data/lib/generators/rails/breezy_generator.rb

@@ -21,6 +21,7 @@ module Rails
           filename = filename_with_extensions(view)
           template filename, File.join('app/views', controller_file_path, filename)
         end
+        template '_form.json.props', File.join('app/views', controller_file_path, '_form.json.props')
 
         %w(index show new edit).each do |view|
           @action_name = view
@@ -28,9 +29,11 @@ module Rails
           template 'web/' + filename, File.join('app/views', controller_file_path, filename)
         end
 
-        js_filename = [plural_table_name, 'form.jsx'].map(&:camelcase).join
-        template 'web/form.jsx', File.join('app/components', js_filename)
-        template 'web/base.jsx', File.join('app/components', 'BaseScreen.jsx')
+        %w(index show new edit).each do |view|
+          @action_name = view
+          filename = filename_with_html_extensions(view)
+          template 'web/' + filename, File.join('app/views', controller_file_path, filename)
+        end
 
         %w(index show new edit).each do |view|
           append_mapping(view)
@@ -48,8 +51,8 @@ module Rails
             "\nimport #{component_name} from 'views/#{controller_file_path}/#{action}'"
           end
 
-          inject_into_file app_js, after: 'const screenToComponentMapping = {' do
-            "\n  '#{[controller_file_path, action].join('/')}': #{component_name},"
+          inject_into_file app_js, after: 'identifierToComponentMapping = {' do
+            "\n      '#{[controller_file_path, action].join('/')}': #{component_name},"
           end
         end
 
@@ -62,13 +65,17 @@ module Rails
         end
 
         def filename_with_extensions(name)
-          [name, :js, :props] * '.'
+          [name, :json, :props] * '.'
         end
 
         def filename_with_jsx_extensions(name)
           [name, :jsx] * '.'
         end
 
+        def filename_with_html_extensions(name)
+          [name, :html, :erb] * '.'
+        end
+
         def attributes_list_with_timestamps
           attributes_list(attributes_names + %w(created_at updated_at))
         end

data/lib/generators/rails/templates/_form.json.props

@@ -0,0 +1,13 @@
+html = form_with(model: @<%= model_resource_name %>, local: true) do |form|
+  inner = "".html_safe
+
+<%- attributes.each do |attr| -%>
+  inner << form.label(:<%= attr.column_name %>)
+  inner << form.<%= attr.field_type %>(:<%= attr.column_name %>)
+<%- end -%>
+  inner << form.submit
+
+  inner
+end
+
+json.html html

data/lib/generators/rails/templates/controller.rb.tt

@@ -5,9 +5,6 @@ require_dependency "<%= namespaced_path %>/application_controller"
 <% module_namespacing do -%>
 class <%= controller_class_name %>Controller < ApplicationController
   before_action :set_<%= singular_table_name %>, only: [:show, :edit, :update, :destroy]
-  # `use_breezy` enables breezy functionality
-  # on application.html.erb
-  before_action :use_breezy
 
   # GET <%= route_url %>
   def index

data/lib/generators/rails/templates/edit.json.props

@@ -0,0 +1,14 @@
+if @post.errors.any?
+  content = {
+    explanation: "#{pluralize(@<%= singular_table_name %>.errors.count, "error")} prohibited this post from being saved:",
+    messages: @<%= singular_table_name %>.errors.full_messages.map{|msg| {body: msg}}
+  }
+
+  flash.now[:form_error] = content
+end
+
+json.form(partial: 'form') do
+end
+
+json.<%= singular_table_name%>_path <%= singular_table_name%>_path(@<%=singular_table_name%>)
+json.<%= plural_table_name %>_path <%= plural_table_name %>_path

data/lib/generators/rails/templates/{index.js.props → index.json.props}

@@ -1,5 +1,3 @@
-json.flash flash.to_h
-
 json.<%= plural_table_name %> do
   json.array! @<%= plural_table_name %> do |<%= singular_table_name %>|
     <%- attributes_list_with_timestamps.each do |attr| -%>
@@ -7,6 +5,7 @@ json.<%= plural_table_name %> do
     <%- end -%>
     json.edit_<%=singular_table_name%>_path edit_<%=singular_table_name%>_path(<%=singular_table_name%>)
     json.<%=singular_table_name%>_path <%=singular_table_name%>_path(<%=singular_table_name%>)
+    json.delete_<%=singular_table_name%>_path <%=singular_table_name%>_path(<%=singular_table_name%>)
   end
 end
 

data/lib/generators/rails/templates/new.json.props

@@ -0,0 +1,15 @@
+if @post.errors.any?
+  content = {
+    explanation: "#{pluralize(@<%= singular_table_name %>.errors.count, "error")} prohibited this post from being saved:",
+    messages: @<%= singular_table_name %>.errors.full_messages.map{|msg| {body: msg}}
+  }
+
+  flash.now[:form_error] = content
+end
+
+json.form(partial: 'form') do
+end
+
+json.<%= plural_table_name %>_path <%= plural_table_name %>_path
+
+

data/lib/generators/rails/templates/{show.js.props → show.json.props}

@@ -1,5 +1,3 @@
-json.flash flash.to_h
-
 <%- attributes_list_with_timestamps.each do |attr|-%>
 json.<%=attr%> @<%= singular_table_name %>.<%=attr%>
 <%- end -%>

data/lib/generators/rails/templates/web/edit.html.erb

@@ -0,0 +1,7 @@
+<%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
+
+<script type="text/javascript">
+  window.BREEZY_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
+</script>
+
+<div id="app"></div>

data/lib/generators/rails/templates/web/edit.jsx

@@ -1,39 +1,32 @@
 import React from 'react'
 import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
 import {connect} from 'react-redux'
-import BaseScreen from 'components/BaseScreen'
-import <%= plural_table_name.camelize %>Form from 'components/<%= plural_table_name.camelize %>Form'
+import RailsTag from '@jho406/breezy/components/RailsTag'
 import * as applicationActionCreators from 'javascript/packs/action_creators'
 
-class <%= plural_table_name.camelize %>Edit extends BaseScreen {
-  formRef = React.createRef()
-
-  handleSubmit = (values, {setSubmitting}) => {
-    this.props.clearFormErrors(this.props.pageKey)
-
-    const options = {
-      method:'PUT',
-      body: JSON.stringify(values),
-    }
-
-    this.enhancedVisit(this.props.<%= singular_table_name.camelize(:lower) %>Path, options).then( rsp => {
-      setSubmitting(false)
-      if (this.props.errors) {
-        this.formRef.current.setErrors(this.props.errors)
-      }
-    })
-  }
-
+class <%= plural_table_name.camelize %>Edit extends React.Component {
   render () {
+    const {
+      form,
+      flash,
+      <%= singular_table_name.camelize(:lower) %>Path,
+      <%= plural_table_name.camelize(:lower) %>Path,
+    } = this.props
+    const error = flash.form_error
+
+    const messagesEl = error && (
+      <div id="error_explanation">
+        <h2>{ error.explanation }</h2>
+        <ul>{ error.messages.map(({body})=> <li key={body}>{body}</li>) }</ul>
+      </div>
+    )
+
     return (
       <div>
-        <<%= plural_table_name.camelize %>Form
-          onSubmit={this.handleSubmit}
-          initialValues={this.props.attributesForForm}
-          ref={this.formRef}
-        />
-        <a onClick={ e => this.enhancedVisit(this.props.<%= singular_table_name.camelize(:lower) %>Path)}>Show</a>
-        <a onClick={ e => this.enhancedVisit(this.props.<%= plural_table_name.camelize(:lower) %>Path)}>Back</a>
+        {messagesEl}
+        <RailsTag {...form} data-bz-visit={true}/>
+        <a href={<%= singular_table_name.camelize(:lower) %>Path} data-bz-visit={true}>Show</a>
+        <a href={<%= plural_table_name.camelize(:lower) %>Path}  data-bz-visit={true}>Back</a>
       </div>
     )
   }

data/lib/generators/rails/templates/web/index.html.erb

@@ -0,0 +1,7 @@
+<%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
+
+<script type="text/javascript">
+  window.BREEZY_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
+</script>
+
+<div id="app"></div>

data/lib/generators/rails/templates/web/index.jsx

@@ -1,30 +1,33 @@
 import React from 'react'
 import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
 import { connect } from 'react-redux'
-import BaseScreen from 'components/BaseScreen'
 
-class <%= plural_table_name.camelize %>Index extends BaseScreen {
+class <%= plural_table_name.camelize %>Index extends React.Component {
   static defaultProps = {
     <%= plural_table_name.camelize(:lower) %>: []
   }
 
   render () {
+    const {
+      flash,
+      new<%= singular_table_name.camelize %>Path,
+    } = this.props
     const <%= singular_table_name.camelize(:lower) %>Items = this.props.<%= plural_table_name.camelize(:lower) %>.map((<%= singular_table_name.camelize(:lower) %>, key) => {
       return (
         <tr key={<%= singular_table_name.camelize(:lower) %>.id}>
           <%- attributes_list.select{|attr| attr != :id }.each do |attr| -%>
           <td>{<%=singular_table_name.camelize(:lower)%>.<%=attr.camelize(:lower)%>}</td>
           <%- end -%>
-          <td><a onClick={ e => this.enhancedVisit(<%=singular_table_name%>.<%=singular_table_name.camelize(:lower)%>Path)}>Show</a></td>
-          <td><a onClick={ e => this.enhancedVisit(<%=singular_table_name%>.edit<%=singular_table_name.camelize%>Path)}>Edit</a></td>
-          <td><a onClick={ e => this.enhancedVisit(<%=singular_table_name%>.<%=singular_table_name.camelize(:lower)%>Path, {method: 'DELETE'})}>Delete</a></td>
+          <td><a href={ <%=singular_table_name%>.<%=singular_table_name.camelize(:lower)%>Path } data-bz-visit={true}>Show</a></td>
+          <td><a href={ <%=singular_table_name%>.edit<%=singular_table_name.camelize%>Path } data-bz-visit={true}>Edit</a></td>
+          <td><a href={ <%=singular_table_name%>.delete<%=singular_table_name.camelize%>Path }data-bz-visit={true} data-bz-method={"DELETE"}>Delete</a></td>
         </tr>
       )
     })
 
     return (
       <div>
-        <p id="notice">{this.props.flash && this.props.flash.notice}</p>
+        <p id="notice">{flash.notice}</p>
 
         <h1><%= plural_table_name.capitalize %></h1>
 
@@ -43,7 +46,7 @@ class <%= plural_table_name.camelize %>Index extends BaseScreen {
           </tbody>
         </table>
         <br />
-        <a onClick={ e => this.enhancedVisit(this.props.new<%= singular_table_name.camelize %>Path)}>New <%= singular_table_name.capitalize %></a>
+        <a href={new<%= singular_table_name.camelize %>Path} data-bz-visit={true}>New <%= singular_table_name.capitalize %></a>
       </div>
     )
   }

data/lib/generators/rails/templates/web/new.html.erb

@@ -0,0 +1,7 @@
+<%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
+
+<script type="text/javascript">
+  window.BREEZY_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
+</script>
+
+<div id="app"></div>

data/lib/generators/rails/templates/web/new.jsx

@@ -1,37 +1,30 @@
 import React from 'react'
 import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
 import {connect} from 'react-redux'
-import BaseScreen from 'components/BaseScreen'
-import <%= plural_table_name.camelize %>Form from 'components/<%= plural_table_name.camelize %>Form'
+import RailsTag from '@jho406/breezy/components/RailsTag'
 import * as applicationActionCreators from 'javascript/packs/action_creators'
 
-class <%= plural_table_name.camelize %>New extends BaseScreen {
-  formRef = React.createRef()
-
-  handleSubmit = (values, {setSubmitting}) => {
-    this.props.clearFormErrors(this.props.pageKey)
-
-    const options = {
-      method:'POST',
-      body: JSON.stringify(values),
-    }
+class <%= plural_table_name.camelize %>New extends React.Component {
+  render () {
+    const {
+      form,
+      flash,
+      <%= plural_table_name.camelize(:lower) %>Path,
+    } = this.props
+    const error = flash.form_error
 
-    this.enhancedVisit(this.props.<%= plural_table_name.camelize(:lower) %>Path, options).then( rsp => {
-      setSubmitting(false)
-      if (this.props.errors) {
-        this.formRef.current.setErrors(this.props.errors)
-      }
-    })
-  }
+    const messagesEl = error && (
+      <div id="error_explanation">
+        <h2>{ error.explanation }</h2>
+        <ul>{ error.messages.map(({body})=> <li key={body}>{body}</li>) }</ul>
+      </div>
+    )
 
-  render () {
     return (
       <div>
-        <<%= plural_table_name.camelize %>Form
-          onSubmit={this.handleSubmit}
-          ref={this.formRef}
-        />
-        <a onClick={ e => this.enhancedVisit(this.props.<%= plural_table_name.camelize(:lower) %>Path)}>Back</a>
+        {messagesEl}
+        <RailsTag {...this.props.form} data-bz-visit={true}/>
+        <a href={<%= plural_table_name.camelize(:lower) %>Path} data-bz-visit={true}>Back</a>
       </div>
     )
   }

data/lib/generators/rails/templates/web/show.html.erb

@@ -0,0 +1,7 @@
+<%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
+
+<script type="text/javascript">
+  window.BREEZY_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
+</script>
+
+<div id="app"></div>

data/lib/generators/rails/templates/web/show.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
 import { connect } from 'react-redux'
-import BaseScreen from 'components/BaseScreen'
 
-class <%= plural_table_name.camelize %>Show extends BaseScreen {
+class <%= plural_table_name.camelize %>Show extends React.Component {
   render () {
     return (
       <div>
@@ -14,8 +13,8 @@ class <%= plural_table_name.camelize %>Show extends BaseScreen {
           {this.props.<%=attr.camelize(:lower)%>}
         </p>
         <%- end -%>
-        <a onClick={ e => this.enhancedVisit(this.props.edit<%= singular_table_name.camelize %>Path)}>Edit</a>
-        <a onClick={ e => this.enhancedVisit(this.props.<%= plural_table_name.camelize(:lower) %>Path )}>Back</a>
+        <a href={ this.props.edit<%= singular_table_name.camelize %>Path } data-bz-visit={true}>Edit</a>
+        <a href={ this.props.<%= plural_table_name.camelize(:lower) %>Path } data-bz-visit={true}>Back</a>
       </div>
     )
   }

data/lib/install/templates/web/action_creators.js

@@ -1,12 +1,14 @@
-import {
-  CLEAR_FORM_ERRORS
-} from './actions'
-
-export function clearFormErrors(pageKey) {
-  return {
-    type: CLEAR_FORM_ERRORS,
-    payload: {
-      pageKey,
-    }
-  }
-}
+// Example:
+//
+// import {
+//   CLEAR_FORM_ERRORS
+// } from './actions'
+//
+// export function clearFormErrors(pageKey) {
+//   return {
+//     type: CLEAR_FORM_ERRORS,
+//     payload: {
+//       pageKey,
+//     }
+//   }
+// }

data/lib/install/templates/web/actions.js

@@ -1 +1,4 @@
-export const CLEAR_FORM_ERRORS = 'CLEAR_FORM_ERRORS'
+// Example:
+//
+// export const CLEAR_FORM_ERRORS = 'CLEAR_FORM_ERRORS'
+export const REHYDRATE = 'persist/REHYDRATE'

data/lib/install/templates/web/application.js

@@ -4,61 +4,187 @@ import reduceReducers from 'reduce-reducers'
 import thunk from 'redux-thunk'
 import { Provider } from 'react-redux'
 import { render } from 'react-dom'
-import createHistory from 'history/createBrowserHistory'
-import Breezy from '@jho406/breezy'
-import Nav from '@jho406/breezy/dist/NavComponent'
-import applicationReducer from './reducer'
+import { createBrowserHistory, createMemoryHistory } from 'history'
+import { start } from '@jho406/breezy'
+import Nav from '@jho406/breezy/components/NavComponent'
+import { ujsHandlers } from '@jho406/breezy/utils'
+import { persistStore, persistReducer } from 'redux-persist'
+import storage from 'redux-persist/lib/storage'
+import { applicationRootReducer, applicationPagesReducer } from './reducer'
+import { buildVisitAndRemote } from './application_visit'
 
+if(typeof window !== 'undefined' ) {
+  document.addEventListener("DOMContentLoaded", function() {
+    const appEl = document.getElementById('app')
+    const location = window.location
 
-// Mapping between your props template to Component
-// e.g {'posts/new': PostNew}
-const screenToComponentMapping = {
+    if (appEl) {
+      render(
+        <Application
+          appEl={appEl}
+          // The base url is an optional prefix to all calls made by the `visit`
+          // and `remote` thunks.
+          baseUrl={''}
+          // The global var BREEZY_INITIAL_PAGE_STATE is set by your erb
+          // template, e.g., index.html.erb
+          initialPage={window.BREEZY_INITIAL_PAGE_STATE}
+          // The initial path of the page, e.g., /foobar
+          path={location.pathname + location.search + location.hash}
+        />, appEl)
+    }
+ })
 }
 
-const history = createHistory({})
-const initialPage = window.BREEZY_INITIAL_PAGE_STATE
-const baseUrl = ''
-
-//The Nav is pretty bare bones
-//Feel free to replace the implementation
-const {reducer, initialState, initialPageKey, connect} = Breezy.start({
-  window,
-  initialPage,
-  baseUrl,
-  history
-})
-
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-
-const {
-  breezy: breezyReducer,
-  pages: pagesReducer,
-} = reducer
-
-const store = createStore(
-  combineReducers({
-    breezy: breezyReducer,
-    pages: reduceReducers(pagesReducer, applicationReducer),
-  }),
-  initialState,
-  composeEnhancers(applyMiddleware(thunk))
-)
-
-connect(store)
-
-class App extends React.Component {
+export default class Application extends React.Component {
+  constructor(props) {
+    super(props)
+    this.hasWindow = typeof window !== 'undefined'
+
+    // Mapping between your props template to Component, you must add to this
+    // to register any new page level component you create. If you are using the
+    // scaffold, it will auto append the identifers for you.
+    //
+    // e.g {'posts/new': PostNew}
+    this.identifierToComponentMapping = {
+    }
+
+    // Create a navigator Ref for UJS attributes and to enhance the base `visit`
+    // and `visit` thunks
+    this.navigatorRef = React.createRef()
+
+    // Start Breezy and return an object to prepare the Redux store
+    const breezy = start({
+      initialPage: this.props.initialPage,
+      baseUrl: this.props.baseUrl,
+      path: this.props.path,
+      fetch: this.hasWindow ? window.fetch : undefined,
+    })
+    this.breezy = breezy
+
+    // Build the store and pass Breezy's provided reducer to be combined with
+    // your reducers located at `application_reducer.js`
+    const {initialState, reducer} = breezy
+    this.store = this.buildStore(initialState, reducer)
+
+    // Fire initial events and populate the store
+    breezy.prepareStore(this.store)
+
+    // Build visit and remote thunks
+    // Your modified `visit` and `remote` will get passed below to the
+    // NavComponent then to your components through the provided
+    // mapDispatchToProps.
+    //
+    // You can access them via `this.props.visit` or `this.props.remote`. In
+    // your page components
+    const {visit, remote} = buildVisitAndRemote(this.navigatorRef, this.store)
+    this.visit = visit
+    this.remote = remote
+  }
+
+  componentDidMount() {
+    const { appEl } = this.props
+    // Create the ujs event handlers. You can change the ujsAttributePrefix
+    // in the event the data attribute conflicts with another.
+    this.ujsHandlers = ujsHandlers({
+      visit: this.visit,
+      remote: this.remote,
+      store: this.store,
+      ujsAttributePrefix: 'data-bz'
+    })
+    const {onClick, onSubmit} = this.ujsHandlers
+
+    appEl.addEventListener('click', onClick)
+    appEl.addEventListener('submit', onSubmit)
+  }
+
+  componentWillUnmount() {
+    const { appEl } = this.props
+    const {onClick, onSubmit} = this.ujsHandlers
+
+    appEl.removeEventListener('click', onClick)
+    appEl.removeEventListener('submit', onSubmit)
+    this.breezy.stop()
+  }
+
+  buildStore(initialState, {breezy: breezyReducer, pages: pagesReducer}) {
+    // Create the store
+    // See `./reducer.js` for an explaination of the two included reducers
+    const composeEnhancers = (this.hasWindow && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
+    const reducer = this.wrapWithPersistReducer(
+      reduceReducers(
+        combineReducers({
+          breezy: breezyReducer,
+          pages: reduceReducers(pagesReducer, applicationPagesReducer),
+        }),
+        applicationRootReducer
+      )
+    )
+    const store = createStore(
+      reducer,
+      initialState,
+      composeEnhancers(applyMiddleware(thunk))
+    )
+
+    if(this.hasWindow) {
+      // Persist the store using Redux-Persist
+      persistStore(store)
+    }
+
+    return store
+  }
+
+  wrapWithPersistReducer(reducers) {
+    // Redux Persist settings
+    // The key is set to the stringified JS asset path to remove the need for
+    // migrations when hydrating.
+    if (!this.hasWindow) {
+      return reducers
+    }
+    const prefix = 'breezy'
+    const persistKey = prefix + this.props.initialPage.assets.filter( asset => asset.endsWith('.js')).join(",")
+    const persistConfig = {
+      key: persistKey,
+      storage,
+    }
+
+    // Remove older storage items that were used by previous JS assets
+    if (this.hasWindow) {
+      const storedKeys = Object.keys(localStorage)
+      storedKeys.forEach((key) => {
+        if (key.startsWith(`persist:${prefix}`) && key !== persistKey) {
+          localStorage.removeItem(key)
+        }
+      })
+    }
+
+    return persistReducer(persistConfig, reducers)
+  }
+
+  createHistory() {
+    if(this.hasWindow) {
+      // This is used for client side rendering
+      return createBrowserHistory({})
+    } else {
+      // This is used for server side rendering
+      return createMemoryHistory({})
+    }
+  }
+
   render() {
-    return <Provider store={store}>
+    const history = this.createHistory()
+
+    // The Nav component is pretty bare and can be inherited from for custom
+    // behavior or replaced with your own.
+    return <Provider store={this.store}>
       <Nav
-        store={store}
-        mapping={this.props.mapping}
+        store={this.store}
+        ref={this.navigatorRef}
+        visit={this.visit}
+        remote={this.remote}
+        mapping={this.identifierToComponentMapping}
         history={history}
-        initialPageKey={initialPageKey}
+        initialPageKey={this.breezy.initialPageKey}
       />
     </Provider>
   }
 }
-
-document.addEventListener("DOMContentLoaded", function() {
-  render(<App mapping={screenToComponentMapping}/>, document.getElementById('app'))
-})