breezy 0.17.1 → 0.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6794f98f6bd5666982f236806055298cd4b0df48143e406ead4936d331e9e347
-  data.tar.gz: 92ffded4848bb5186d80e3a765a52e219ace61a731baa8e911e446b3fb70df9a
+  metadata.gz: 5c5e2d6ff06a62de207f2b867d1e64044b66816d5abbad514ea00a321bd01e04
+  data.tar.gz: e0b800f96939f33d719212de311eb8d692b5d8e7122a0a3cf424572239358a77
 SHA512:
-  metadata.gz: 3050c6a3e48f1253afd24a709fee2a2a57a95ffe09ba373b4431c1b5f8e0c258cedfbe4b139d1053d8ebfa8e812fc441872b0abff261a72ddf30c8420840aa19
-  data.tar.gz: 859522594cd933e0370ed9fbedb6c9d7c6b61b464cb178fe615f0ef16a8d03316d5376bf8a994188fdc276f827bd8760bb0ede1f807f0b4caae99bb5fe2d2c8e
+  metadata.gz: d4d58896fa261c4aeb545dc749624643d270645753a952ac56ff71d6dd66f8eada37ec9e426816eeda6a69d8021348b83049732bb77c36b5c4242aa884d42849
+  data.tar.gz: f1631849823a71fc7211f432f4a514e38e82f31df7a24da6c567c0e461dc957e221a40ff939efde7ef5dd063df1d783b4cd7845ae045e8dbcff24f10ee11730b

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

@@ -1,40 +1,31 @@
 import React from 'react'
-import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
-import {connect} from 'react-redux'
 import RailsTag from '@jho406/breezy/components/RailsTag'
-import * as applicationActionCreators from 'javascript/packs/action_creators'
+// import * as actionCreators from 'javascript/packs/action_creators'
+// import {useDispatch} from 'react-redux'
 
-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
+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.jsx

@@ -1,59 +1,49 @@
 import React from 'react'
-import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
-import { connect } from 'react-redux'
-
-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 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.jsx

@@ -1,37 +1,29 @@
 import React from 'react'
-import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
-import {connect} from 'react-redux'
 import RailsTag from '@jho406/breezy/components/RailsTag'
-import * as applicationActionCreators from 'javascript/packs/action_creators'
+// import * as actionCreators from 'javascript/packs/action_creators'
+// import { useDispatch } from 'react-redux'
 
-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
+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.jsx

@@ -1,27 +1,28 @@
 import React from 'react'
-import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
-import { connect } from 'react-redux'
+// import * as actionCreators from 'javascript/packs/action_creators'
+// import {useDispatch} from 'react-redux'
 
-class <%= plural_table_name.camelize %>Show extends React.Component {
-  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/application.js

@@ -1,115 +1,63 @@
-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, 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
+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, 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 = {
+};
+
+if (typeof window !== "undefined") {
+  document.addEventListener("DOMContentLoaded", function () {
+    const appEl = document.getElementById("app");
+    const location = window.location;
 
     if (appEl) {
       render(
         <Application
           appEl={appEl}
-          // The base url is an optional prefix to all calls made by the `visit`
+          // The base url prefixed to all calls made by the `visit`
           // and `remote` thunks.
-          baseUrl={''}
+          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}
-        />, appEl)
+          buildVisitAndRemote={buildVisitAndRemote}
+        />,
+        appEl
+      );
     }
- })
+  });
 }
 
-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)
+export default class Application extends ApplicationBase {
+  mapping() {
+    return identifierToComponentMapping;
   }
 
-  componentWillUnmount() {
-    const { appEl } = this.props
-    const {onClick, onSubmit} = this.ujsHandlers
-
-    appEl.removeEventListener('click', onClick)
-    appEl.removeEventListener('submit', onSubmit)
-    this.breezy.stop()
+  visitAndRemote(navRef, store) {
+    return buildVisitAndRemote(navRef, store);
   }
 
-  buildStore(initialState, {breezy: breezyReducer, pages: pagesReducer}) {
+  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 composeEnhancers =
+      (this.hasWindow && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
+      compose;
     const reducer = this.wrapWithPersistReducer(
       reduceReducers(
         combineReducers({
@@ -118,19 +66,19 @@ export default class Application extends React.Component {
         }),
         applicationRootReducer
       )
-    )
+    );
     const store = createStore(
       reducer,
       initialState,
       composeEnhancers(applyMiddleware(thunk))
-    )
+    );
 
-    if(this.hasWindow) {
+    if (this.hasWindow) {
       // Persist the store using Redux-Persist
-      persistStore(store)
+      persistStore(store);
     }
 
-    return store
+    return store;
   }
 
   wrapWithPersistReducer(reducers) {
@@ -138,53 +86,29 @@ export default class Application extends React.Component {
     // The key is set to the stringified JS asset path to remove the need for
     // migrations when hydrating.
     if (!this.hasWindow) {
-      return reducers
+      return reducers;
     }
-    const prefix = 'breezy'
-    const persistKey = prefix + this.props.initialPage.assets.filter( asset => asset.endsWith('.js')).join(",")
+    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)
+      const storedKeys = Object.keys(localStorage);
       storedKeys.forEach((key) => {
         if (key.startsWith(`persist:${prefix}`) && key !== persistKey) {
-          localStorage.removeItem(key)
+          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>
+    return persistReducer(persistConfig, reducers);
   }
 }

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

@@ -19,14 +19,9 @@ export function buildVisitAndRemote(ref, store) {
           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,
-          })
-        }
+        ref.current.navigateTo(meta.pageKey, {
+          action: meta.suggestedAction,
+        })
       })
       .finally(() => {
         // Do something after

data/lib/install/web.rb

@@ -59,7 +59,7 @@ say "Installing React, Redux, and Breezy"
 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

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.17.1
+  version: 0.18.0
 platform: ruby
 authors:
 - Johny Ho
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-01-09 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.17.1
+        version: 0.20.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.17.1
+        version: 0.20.0
 - !ruby/object:Gem::Dependency
   name: webpacker
   requirement: !ruby/object:Gem::Requirement