breezy 0.14.0 → 0.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8fdfe1618e246afbe75d3871a455b9404f46812e8aa9d560a94fae39494007b2
-  data.tar.gz: 7274f1da29d6f9f179b431caeb8b9a42a473f5fe2cfde7a71a94402c75a75cbf
+  metadata.gz: 5c5e2d6ff06a62de207f2b867d1e64044b66816d5abbad514ea00a321bd01e04
+  data.tar.gz: e0b800f96939f33d719212de311eb8d692b5d8e7122a0a3cf424572239358a77
 SHA512:
-  metadata.gz: 7782300709770eb255c4922866fa967a0ea0af748b8269cef7f674342638430f05f66e4cfa53ca74197fb02a8d7e7f9b29597167436eb1ccb357db90b8f6395a
-  data.tar.gz: e1186f6487243b10f8c1c29bb068ca1accd20b08050d15485e68d1adee3f52b33a4ef267869ab555ecb4bf775477a0e9a26284560bda7c2141bb0b07ec1cdce4
+  metadata.gz: d4d58896fa261c4aeb545dc749624643d270645753a952ac56ff71d6dd66f8eada37ec9e426816eeda6a69d8021348b83049732bb77c36b5c4242aa884d42849
+  data.tar.gz: f1631849823a71fc7211f432f4a514e38e82f31df7a24da6c567c0e461dc957e221a40ff939efde7ef5dd063df1d783b4cd7845ae045e8dbcff24f10ee11730b

data/lib/generators/rails/breezy_generator.rb

@@ -35,8 +35,6 @@ module Rails
           template 'web/' + filename, File.join('app/views', controller_file_path, filename)
         end
 
-        template 'web/base.jsx', File.join('app/components', 'BaseScreen.jsx')
-
         %w(index show new edit).each do |view|
           append_mapping(view)
         end
@@ -53,8 +51,8 @@ module Rails
             "\nimport #{component_name} from 'views/#{controller_file_path}/#{action}'"
           end
 
-          inject_into_file app_js, after: 'const identifierToComponentMapping = {' 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
 

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

@@ -1,11 +1,7 @@
 <%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
 
-<%% content_for :initial_state do %>
-  <script type="text/javascript">
-    window.BREEZY_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
-  </script>
-<%% end %>
-
-
-
+<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,41 +1,31 @@
 import React from 'react'
-import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
-import {connect} from 'react-redux'
-import BaseScreen from 'components/BaseScreen'
-import RailsTag from '@jho406/breezy/dist/RailsTag'
-import * as applicationActionCreators from 'javascript/packs/action_creators'
+import RailsTag from '@jho406/breezy/components/RailsTag'
+// import * as actionCreators from 'javascript/packs/action_creators'
+// import {useDispatch} from 'react-redux'
 
-class <%= plural_table_name.camelize %>Edit extends BaseScreen {
-  render () {
-    const {
-      form,
-      flash,
-      <%= singular_table_name.camelize(:lower) %>Path,
-      <%= plural_table_name.camelize(:lower) %>Path,
-    } = this.props
-    const error = flash.form_error
+export default function <%= plural_table_name.camelize %>Edit ({
+  // visit,
+  // remote,
+  form,
+  flash,
+  <%= singular_table_name.camelize(:lower) %>Path,
+  <%= plural_table_name.camelize(:lower) %>Path,
+}) {
+  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>
-    )
+  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>
-        {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>
-    )
-  }
+  return (
+    <div>
+      {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>
+  )
 }
-
-export default connect(
-  mapStateToProps,
-  {...mapDispatchToProps, ...applicationActionCreators}
-)(<%= plural_table_name.camelize %>Edit)
-
-

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

@@ -1,10 +1,7 @@
 <%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
 
-<%% content_for :initial_state do %>
-  <script type="text/javascript">
-    window.BREEZY_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
-  </script>
-<%% end %>
-
-
+<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,60 +1,49 @@
 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 {
-  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 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>
-      )
-    })
-
+// import * as actionCreators from 'javascript/packs/action_creators'
+// import {useDispatch} from 'react-redux'
+
+export default function <%= plural_table_name.camelize %>Index({
+  // visit,
+  // remote,
+  flash,
+  new<%= singular_table_name.camelize %>Path,
+  <%= plural_table_name.camelize(:lower) %> = [],
+}) {
+  const <%= singular_table_name.camelize(:lower) %>Items = <%= plural_table_name.camelize(:lower) %>.map((<%= singular_table_name.camelize(:lower) %>, key) => {
     return (
-      <div>
-        <p id="notice">{flash.notice}</p>
+      <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 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>
+    )
+  })
 
-        <h1><%= plural_table_name.capitalize %></h1>
+  return (
+    <div>
+      <p id="notice">{flash.notice}</p>
 
-        <table>
-          <thead>
-            <%- attributes_list.select{|attr| attr != :id }.each do |attr| -%>
-            <tr><th><%=attr.capitalize%></th></tr>
-            <%- end -%>
-            <tr>
-              <th colSpan="3"></th>
-            </tr>
-          </thead>
+      <h1><%= plural_table_name.capitalize %></h1>
 
-          <tbody>
-            {<%= singular_table_name %>Items}
-          </tbody>
-        </table>
-        <br />
-        <a href={new<%= singular_table_name.camelize %>Path} data-bz-visit={true}>New <%= singular_table_name.capitalize %></a>
-      </div>
-    )
-  }
+      <table>
+        <thead>
+          <%- attributes_list.select{|attr| attr != :id }.each do |attr| -%>
+          <tr><th><%=attr.capitalize%></th></tr>
+          <%- end -%>
+          <tr>
+            <th colSpan="3"></th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {<%= singular_table_name %>Items}
+        </tbody>
+      </table>
+      <br />
+      <a href={new<%= singular_table_name.camelize %>Path} data-bz-visit={true}>New <%= singular_table_name.capitalize %></a>
+    </div>
+  )
 }
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(<%= plural_table_name.camelize %>Index)
-

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

@@ -1,11 +1,7 @@
 <%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
 
-<%% content_for :initial_state do %>
-  <script type="text/javascript">
-    window.BREEZY_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
-  </script>
-<%% end %>
-
-
-
+<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,38 +1,29 @@
 import React from 'react'
-import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
-import {connect} from 'react-redux'
-import BaseScreen from 'components/BaseScreen'
-import RailsTag from '@jho406/breezy/dist/RailsTag'
-import * as applicationActionCreators from 'javascript/packs/action_creators'
+import RailsTag from '@jho406/breezy/components/RailsTag'
+// import * as actionCreators from 'javascript/packs/action_creators'
+// import { useDispatch } from 'react-redux'
 
-class <%= plural_table_name.camelize %>New extends BaseScreen {
-  render () {
-    const {
-      form,
-      flash,
-      <%= plural_table_name.camelize(:lower) %>Path,
-    } = this.props
-    const error = flash.form_error
+export default function <%= plural_table_name.camelize %>New({
+  // visit,
+  // remote
+  form,
+  flash,
+  <%= plural_table_name.camelize(:lower) %>Path,
+}) {
+  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>
-    )
+  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>
-        {messagesEl}
-        <RailsTag {...this.props.form} data-bz-visit={true}/>
-        <a href={<%= plural_table_name.camelize(:lower) %>Path} data-bz-visit={true}>Back</a>
-      </div>
-    )
-  }
+  return (
+    <div>
+      {messagesEl}
+      <RailsTag {...form} data-bz-visit={true}/>
+      <a href={<%= plural_table_name.camelize(:lower) %>Path} data-bz-visit={true}>Back</a>
+    </div>
+  )
 }
-
-export default connect(
-  mapStateToProps,
-  {...mapDispatchToProps, ...applicationActionCreators}
-)(<%= plural_table_name.camelize %>New)
-

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

@@ -1,12 +1,7 @@
 <%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
 
-<%% content_for :initial_state do %>
-  <script type="text/javascript">
-    window.BREEZY_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
-  </script>
-<%% end %>
-
-
-
-
+<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,28 +1,28 @@
 import React from 'react'
-import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
-import { connect } from 'react-redux'
-import BaseScreen from 'components/BaseScreen'
+// import * as actionCreators from 'javascript/packs/action_creators'
+// import {useDispatch} from 'react-redux'
 
-class <%= plural_table_name.camelize %>Show extends BaseScreen {
-  render () {
-    return (
-      <div>
-        <p id="notice">{this.props.flash && this.props.flash.notice}</p>
-        <%- attributes_list_with_timestamps.select{|attr| attr != :id }.each do |attr| -%>
-        <p>
-          <strong><%= attr.capitalize %>:</strong>
-          {this.props.<%=attr.camelize(:lower)%>}
-        </p>
-        <%- end -%>
-        <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>
-    )
-  }
+export default function <%= plural_table_name.camelize %>Show({
+  // visit,
+  // remote,
+  flash,
+  <%- attributes_list_with_timestamps.select{|attr| attr != :id }.each do |attr| -%>
+  <%=attr.camelize(:lower)%>,
+  <%- end -%>
+  edit<%= singular_table_name.camelize %>Path,
+  <%= plural_table_name.camelize(:lower) %>Path
+}) {
+  return (
+    <div>
+      <p id="notice">{flash && flash.notice}</p>
+      <%- attributes_list_with_timestamps.select{|attr| attr != :id }.each do |attr| -%>
+      <p>
+        <strong><%= attr.capitalize %>:</strong>
+        {<%=attr.camelize(:lower)%>}
+      </p>
+      <%- end -%>
+      <a href={ edit<%= singular_table_name.camelize %>Path } data-bz-visit={true}>Edit</a>
+      <a href={ <%= plural_table_name.camelize(:lower) %>Path } data-bz-visit={true}>Back</a>
+    </div>
+  )
 }
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(<%= plural_table_name.camelize %>Show)
-

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

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

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

@@ -1,79 +1,114 @@
-import React from 'react'
-import {combineReducers, createStore, applyMiddleware, compose} from 'redux'
-import reduceReducers from 'reduce-reducers'
-import thunk from 'redux-thunk'
-import { Provider } from 'react-redux'
-import { render } from 'react-dom'
-import { createBrowserHistory } from 'history'
-import Breezy from '@jho406/breezy'
-import Nav from '@jho406/breezy/dist/NavComponent'
-import ujsHandlers from '@jho406/breezy/dist/utils/ujs'
-import applicationReducer from './reducer'
+import React from 'react';
+import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
+import reduceReducers from 'reduce-reducers';
+import thunk from 'redux-thunk';
+import { Provider } from 'react-redux';
+import { render } from 'react-dom';
+import { ApplicationBase } from '@jho406/breezy';
+import { persistStore, persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+import { applicationRootReducer, applicationPagesReducer } from './reducer';
+import { buildVisitAndRemote } from './application_visit';
 
-// Mapping between your props template to Component
+// 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}
 const identifierToComponentMapping = {
-}
-
-const history = createBrowserHistory({})
-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
-})
+if (typeof window !== "undefined") {
+  document.addEventListener("DOMContentLoaded", function () {
+    const appEl = document.getElementById("app");
+    const location = window.location;
 
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+    if (appEl) {
+      render(
+        <Application
+          appEl={appEl}
+          // The base url prefixed to all calls made by the `visit`
+          // and `remote` thunks.
+          baseUrl={location.origin}
+          // 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}
+          buildVisitAndRemote={buildVisitAndRemote}
+        />,
+        appEl
+      );
+    }
+  });
+}
 
-const {
-  breezy: breezyReducer,
-  pages: pagesReducer,
-} = reducer
+export default class Application extends ApplicationBase {
+  mapping() {
+    return identifierToComponentMapping;
+  }
 
-const store = createStore(
-  combineReducers({
-    breezy: breezyReducer,
-    pages: reduceReducers(pagesReducer, applicationReducer),
-  }),
-  initialState,
-  composeEnhancers(applyMiddleware(thunk))
-)
+  visitAndRemote(navRef, store) {
+    return buildVisitAndRemote(navRef, store);
+  }
 
-const navigatorRef = React.createRef()
+  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))
+    );
 
-connect(store)
+    if (this.hasWindow) {
+      // Persist the store using Redux-Persist
+      persistStore(store);
+    }
 
-class App extends React.Component {
-  render() {
-    return <Provider store={store}>
-      <Nav
-        store={store}
-        ref={navigatorRef}
-        mapping={this.props.mapping}
-        history={history}
-        initialPageKey={initialPageKey}
-      />
-    </Provider>
+    return store;
   }
-}
 
-document.addEventListener("DOMContentLoaded", function() {
-  const appEl = document.getElementById('app')
-  if (appEl) {
-    const {onClick, onSubmit} = ujsHandlers({
-      navigatorRef,
-      store,
-      ujsAttributePrefix: 'data-bz'
-    })
+  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,
+    };
 
-    appEl.addEventListener('click', onClick)
-    appEl.addEventListener('submit', onSubmit)
+    // 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);
+        }
+      });
+    }
 
-    render(<App mapping={identifierToComponentMapping}/>, appEl)
+    return persistReducer(persistConfig, reducers);
   }
-})
+}

data/lib/install/templates/web/application.json.props

@@ -1,4 +1,4 @@
-path = param_to_search_path(params[:bzq])
+path = request.format.json? ? param_to_search_path(params[:bzq]) : nil
 
 json.data(search: path) do
   yield json
@@ -21,5 +21,6 @@ if path
   json.path search_path_to_camelized_param(path)
 end
 
+json.rendered_at Time.now.to_i
 json.flash flash.to_h
 

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

@@ -0,0 +1,60 @@
+import { visit, remote } from '@jho406/breezy/action_creators'
+
+export function buildVisitAndRemote(ref, store) {
+  const appRemote = (...args) => {
+    return store.dispatch(remote(...args))
+  }
+
+  const appVisit = (...args) => {
+    // Do something before
+    // e.g, show loading state, you can access the current pageKey
+    // via store.getState().breezy.currentPageKey
+    return store
+      .dispatch(visit(...args))
+      .then((meta) => {
+        // The assets fingerprints changed, instead of transitioning
+        // just go to the URL directly to retrieve new assets
+        if (meta.needsRefresh) {
+          window.location = meta.url
+          return
+        }
+
+        ref.current.navigateTo(meta.pageKey, {
+          action: meta.suggestedAction,
+        })
+      })
+      .finally(() => {
+        // Do something after
+        // e.g, hide loading state, you can access the changed pageKey
+        // via getState().breezy.currentPageKey
+      })
+      .catch((err) => {
+        const response = err.response
+
+        if (!response) {
+          console.error(err)
+          return
+        }
+
+        if (response.ok) {
+          // err gets thrown, but if the response is ok,
+          // it must be an html body that
+          // breezy can't parse, just go to the location
+          window.location = response.url
+        } else {
+          if (response.status >= 400 && response.status < 500) {
+            window.location = '/400.html'
+            return
+          }
+
+          if (response.status >= 500) {
+            window.location = '/500.html'
+            return
+          }
+        }
+      })
+  }
+
+  return { visit: appVisit, remote: appRemote }
+}
+

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

@@ -20,8 +20,52 @@
 //   }
 // }
 
-export default function (state = {}, action) {
+import {
+  REHYDRATE,
+} from './actions'
+
+// The applicationPageReducer is for cross page reducers
+// Its common to add to this. You'll typically have to pass a pageKey to the 
+// action payload to distinguish the current page
+//
+// The pageKey is passed through the props in your component. Access it like
+// this: `this.props.pageKey` then dispatch it in an action
+export const applicationPagesReducer = (state = {}, action) => {
+  switch(action.type) {
+  default:
+    return state
+  }
+}
+
+// The applicationRootReducer is for app wide reducers
+// Its rare to be adding to this. Included out of the box ix a reducer for
+// Redux Persist.
+//
+// The REHYDRATE reducer is generated by Breezy and is needed to persist state
+// on any changes made to the initial state that gets injected into
+// window.BREEZY_INITIAL_PAGE_STATE.
+export const applicationRootReducer = (state = {}, action) => {
   switch(action.type) {
+  case REHYDRATE: {
+    if (action.payload) {
+      const {
+        pages: hydratedPages
+      } = action.payload
+      const { pages } = state
+      const nextPages = { ...pages, ...hydratedPages }
+
+      for (const key in pages) {
+        if (pages[key] && hydratedPages[key] &&
+          pages[key].renderedAt > hydratedPages[key].renderedAt) {
+          nextPages[key] = { ...pages[key] }
+        }
+      }
+
+      return { ...state, pages: nextPages }
+    } else {
+      return state
+    }
+  }
   default:
     return state
   }

data/lib/install/web.rb

@@ -2,21 +2,6 @@ require "webpacker/configuration"
 
 babel_config = Rails.root.join("babel.config.js")
 
-def append_js_tags
-  app_html = 'app/views/layouts/application.html.erb'
-  js_tag = <<-JS_TAG
-    <%= yield :initial_state %>
-  JS_TAG
-
-  inject_into_file app_html, after: '<head>' do
-    js_tag
-  end
-
-  inject_into_file app_html, after: '<body>' do
-    "\n    <div id='app'></div>"
-  end
-end
-
 def add_member_methods
   inject_into_file "app/models/application_record.rb", after: "class ApplicationRecord < ActiveRecord::Base\n" do
     <<-RUBY
@@ -58,23 +43,26 @@ copy_file "#{__dir__}/templates/web/action_creators.js", "#{Webpacker.config.sou
 say "Copying actions.js file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/templates/web/actions.js", "#{Webpacker.config.source_entry_path}/actions.js"
 
+say "Copying application_visit.js file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/templates/web/application_visit.js", "#{Webpacker.config.source_entry_path}/application_visit.js"
+
 say "Copying Breezy initializer"
 copy_file "#{__dir__}/templates/web/initializer.rb", "config/initializers/breezy.rb"
 
 say "Copying application.json.props"
 copy_file "#{__dir__}/templates/web/application.json.props", "app/views/layouts/application.json.props"
 
-say "Appending js tags to your application.html.erb"
-append_js_tags
-
 say "Adding required member methods to ApplicationRecord"
 add_member_methods
 
 say "Installing React, Redux, and Breezy"
-run "yarn add babel-plugin-module-resolver babel-preset-react history prop-types react-redux redux-thunk redux reduce-reducers react react-dom immer @jho406/breezy --save"
+run "yarn add babel-plugin-module-resolver history@\"^4\" html-react-parser@\"^0.13\" react-redux redux-thunk redux redux-persist reduce-reducers immer @jho406/breezy --save"
 
 say "Updating webpack config to include .jsx file extension and resolved_paths"
-insert_into_file Webpacker.config.config_path, "    - .jsx\n", after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "    - .jsx\n", after: /\bextensions:\n/
+# For newer webpacker
+insert_into_file Webpacker.config.config_path, "'app/views', 'app/components'", after: /additional_paths: \[/
+# For older webpacker
 insert_into_file Webpacker.config.config_path, "'app/views', 'app/components'", after: /resolved_paths: \[/
 
 say "Webpacker now supports breezy.js 🎉", :green

data/lib/tasks/install.rake

@@ -15,7 +15,7 @@ namespace :breezy do
     package_json = JSON.parse(File.read(Rails.root.join("package.json")))
 
     if package_json['dependencies']['react'].nil?
-      $stderr.puts "React not installed. Did you run `rails webpacker:install:react`?"
+      $stderr.puts "React not installed. Did you install React? https://github.com/rails/webpacker#react"
       $stderr.puts "Exiting!" && exit!
     end
   end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: breezy
 version: !ruby/object:Gem::Version
-  version: 0.14.0
+  version: 0.18.0
 platform: ruby
 authors:
 - Johny Ho
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-06-05 00:00:00.000000000 Z
+date: 2021-07-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -28,16 +28,16 @@ dependencies:
   name: props_template
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.14.0
+        version: 0.20.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.14.0
+        version: 0.20.0
 - !ruby/object:Gem::Dependency
   name: webpacker
   requirement: !ruby/object:Gem::Requirement
@@ -170,7 +170,6 @@ files:
 - lib/generators/rails/templates/index.json.props
 - lib/generators/rails/templates/new.json.props
 - lib/generators/rails/templates/show.json.props
-- lib/generators/rails/templates/web/base.jsx
 - lib/generators/rails/templates/web/edit.html.erb
 - lib/generators/rails/templates/web/edit.jsx
 - lib/generators/rails/templates/web/index.html.erb
@@ -183,6 +182,7 @@ files:
 - lib/install/templates/web/actions.js
 - lib/install/templates/web/application.js
 - lib/install/templates/web/application.json.props
+- lib/install/templates/web/application_visit.js
 - lib/install/templates/web/initializer.rb
 - lib/install/templates/web/reducer.js
 - lib/install/web.rb
@@ -195,7 +195,7 @@ homepage: https://github.com/jho406/breezy/
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -210,8 +210,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
-signing_key: 
+rubygems_version: 3.1.2
+signing_key:
 specification_version: 4
 summary: Rails integration for BreezyJS
 test_files:

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

@@ -1,11 +0,0 @@
-import React from 'react'
-import {enhanceVisitWithBrowserBehavior} from '@jho406/breezy'
-
-export default class extends React.Component {
-  constructor (props) {
-    super(props)
-    const visit = enhanceVisitWithBrowserBehavior(props.visit)
-    this.enhancedVisit = visit.bind(this)
-  }
-}
-