breezy 0.13.0 → 0.17.1

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 identifierToComponentMapping = {
+    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={identifierToComponentMapping}/>, document.getElementById('app'))
-})

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

@@ -1,10 +1,10 @@
-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
 end
 
-json.component_identifier "#{params[:controller]}/#{params[:action]}"
+json.component_identifier local_assigns[:virtual_path_of_template]
 json.defers json.deferred!
 json.fragments json.fragments!
 json.assets [
@@ -21,3 +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,65 @@
+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
+        }
+
+        // There can only be one visit at a time, if `canNavigate` is false,
+        // then this request will be saved to the store but should be ignored 
+        // for a more recent visit.
+        if (meta.canNavigate) {
+          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/initializer.rb

@@ -0,0 +1 @@
+require 'props_template/core_ext'

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

@@ -1,17 +1,70 @@
+// Example:
+//
+// import {
+//   CLEAR_FORM_ERRORS
+// } from './actions'
+// import produce from "immer"
+//
+// export default function (state = {}, action) {
+//   switch(action.type) {
+//   case CLEAR_FORM_ERRORS: {
+//     const {pageKey} = action.payload
+//
+//     return produce(state, draft => {
+//       const currentPage = draft[pageKey]
+//       delete currentPage.errors
+//     })
+//   }
+//   default:
+//     return state
+//   }
+// }
+
 import {
-  CLEAR_FORM_ERRORS
+  REHYDRATE,
 } from './actions'
-import produce from "immer"
 
-export default function (state = {}, action) {
+// 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 CLEAR_FORM_ERRORS: {
-    const {pageKey} = action.payload
+  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 produce(state, draft => {
-      const currentPage = draft[pageKey]
-      delete currentPage.errors
-    })
+      return { ...state, pages: nextPages }
+    } else {
+      return state
+    }
   }
   default:
     return state

data/lib/install/web.rb

@@ -2,25 +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
-
-    <script type="text/javascript">
-      window.BREEZY_INITIAL_PAGE_STATE=<%= @initial_state.html_safe %>;
-    </script>
-  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
-
-#TODO: add member_key
 def add_member_methods
   inject_into_file "app/models/application_record.rb", after: "class ApplicationRecord < ActiveRecord::Base\n" do
     <<-RUBY
@@ -31,11 +12,6 @@ def add_member_methods
   def self.member_by(attr, value)
     find_by(Hash[attr, value])
   end
-
-  def self.member_key
-    "id"
-  end
-
     RUBY
   end
 end
@@ -67,20 +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 formik 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/
+# 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