breezy 0.14.0 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8fdfe1618e246afbe75d3871a455b9404f46812e8aa9d560a94fae39494007b2
-  data.tar.gz: 7274f1da29d6f9f179b431caeb8b9a42a473f5fe2cfde7a71a94402c75a75cbf
+  metadata.gz: e9400844dcf51065a2b0fd72e55f9813a9d3c0e7ad6ff947f7944db6c9e009d0
+  data.tar.gz: 6e0fa8b1140dec3660bfcacfcf148c91b9d0d094fbba0d0fbf4803f25a6cbf33
 SHA512:
-  metadata.gz: 7782300709770eb255c4922866fa967a0ea0af748b8269cef7f674342638430f05f66e4cfa53ca74197fb02a8d7e7f9b29597167436eb1ccb357db90b8f6395a
-  data.tar.gz: e1186f6487243b10f8c1c29bb068ca1accd20b08050d15485e68d1adee3f52b33a4ef267869ab555ecb4bf775477a0e9a26284560bda7c2141bb0b07ec1cdce4
+  metadata.gz: 9fe9fc7f8b1edb98f34112d1447d99a56bd4ce825feb4594622609bebead8e504deb3ba15c28a4de9bc8db24f7e0f7447fb04f29b391c8af4f2bbdfae36f7f9a
+  data.tar.gz: 16d79e3e4754bec10601b2a04200691f1e8b1379c3e14f6232796b942bfa96658f623d2f98f3515a3ce3545bd493ac7664278347fb100e875df000c71d9b42f8

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,11 +1,10 @@
 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'
 
-class <%= plural_table_name.camelize %>Edit extends BaseScreen {
+class <%= plural_table_name.camelize %>Edit extends React.Component {
   render () {
     const {
       form,

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,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 %>Index extends BaseScreen {
+class <%= plural_table_name.camelize %>Index extends React.Component {
   static defaultProps = {
     <%= plural_table_name.camelize(:lower) %>: []
   }

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,11 +1,10 @@
 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'
 
-class <%= plural_table_name.camelize %>New extends BaseScreen {
+class <%= plural_table_name.camelize %>New extends React.Component {
   render () {
     const {
       form,

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,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>

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

@@ -4,76 +4,187 @@ 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 { createBrowserHistory, createMemoryHistory } from 'history'
+import { start } from '@jho406/breezy'
 import Nav from '@jho406/breezy/dist/NavComponent'
 import ujsHandlers from '@jho406/breezy/dist/utils/ujs'
-import applicationReducer from './reducer'
+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
-// e.g {'posts/new': PostNew}
-const identifierToComponentMapping = {
-}
+if(typeof window !== 'undefined' ) {
+  document.addEventListener("DOMContentLoaded", function() {
+    const appEl = document.getElementById('app')
+    const location = window.location
 
-const history = createBrowserHistory({})
-const initialPage = window.BREEZY_INITIAL_PAGE_STATE
-const baseUrl = ''
+    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)
+    }
+ })
+}
 
-//The Nav is pretty bare bones
-//Feel free to replace the implementation
-const {reducer, initialState, initialPageKey, connect} = Breezy.start({
-  window,
-  initialPage,
-  baseUrl,
-  history
-})
+export default class Application extends React.Component {
+  constructor(props) {
+    super(props)
+    this.hasWindow = typeof window !== 'undefined'
 
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+    // 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 = {
+    }
 
-const {
-  breezy: breezyReducer,
-  pages: pagesReducer,
-} = reducer
+    // Create a navigator Ref for UJS attributes and to enhance the base `visit`
+    // and `visit` thunks
+    this.navigatorRef = React.createRef()
 
-const store = createStore(
-  combineReducers({
-    breezy: breezyReducer,
-    pages: reduceReducers(pagesReducer, applicationReducer),
-  }),
-  initialState,
-  composeEnhancers(applyMiddleware(thunk))
-)
+    // 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
 
-const navigatorRef = React.createRef()
+    // 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)
 
-connect(store)
+    // Fire initial events and populate the store
+    breezy.prepareStore(this.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>
+    // 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
   }
-}
 
-document.addEventListener("DOMContentLoaded", function() {
-  const appEl = document.getElementById('app')
-  if (appEl) {
-    const {onClick, onSubmit} = ujsHandlers({
-      navigatorRef,
-      store,
+  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)
+    }
 
-    render(<App mapping={identifierToComponentMapping}/>, appEl)
+    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() {
+    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={this.store}
+        ref={this.navigatorRef}
+        visit={this.visit}
+        remote={this.remote}
+        mapping={this.identifierToComponentMapping}
+        history={history}
+        initialPageKey={this.breezy.initialPageKey}
+      />
+    </Provider>
+  }
+}

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,65 @@
+import { visit, remote } from '@jho406/breezy/dist/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

@@ -1 +1,3 @@
 require 'props_template/core_ext'
+
+Props.reset_encoder!

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,20 +43,20 @@ 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 babel-preset-react history@\"^4\" html-react-parser@\"^0.13\" prop-types react-redux redux-thunk redux redux-persist reduce-reducers react react-dom 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/

data/test/render_test.rb

@@ -44,6 +44,8 @@ class RenderTest < ActionController::TestCase
 
 
   setup do
+    Props.reset_encoder!
+
     if Rails.version >= '6'
       # In rails 6, the fixture orders the templates based on their appearance in the handler
       # This doesn't happen IRL, so I'm going to explicitly set the handler here.

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: breezy
 version: !ruby/object:Gem::Version
-  version: 0.14.0
+  version: 0.15.0
 platform: ruby
 authors:
 - Johny Ho
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-06-05 00:00:00.000000000 Z
+date: 2020-07-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -30,14 +30,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.14.0
+        version: 0.15.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.14.0
+        version: 0.15.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
@@ -211,7 +211,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.0.3
-signing_key: 
+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)
-  }
-}
-