breezy 0.12.0 → 0.17.0

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

@@ -0,0 +1,26 @@
+path = request.format.json? ? param_to_search_path(params[:bzq]) : nil
+
+json.data(search: path) do
+  yield json
+end
+
+json.component_identifier local_assigns[:virtual_path_of_template]
+json.defers json.deferred!
+json.fragments json.fragments!
+json.assets [
+  asset_pack_path('application.js'),
+  asset_path('application.css')
+]
+
+if protect_against_forgery?
+  json.csrf_token form_authenticity_token
+end
+
+if path
+  json.action 'graft'
+  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

@@ -1,15 +1 @@
-require 'breezy_template/core_ext'
-
-Breezy.configure do |config|
-  # Configure breezy.js to refresh the browser when sprockets or
-  # webpacker asset fingerpint changes. This is similar to Turbolink's
-  # `data-turbolinks-track`.
-  #
-  # Note that this file was generated without sprockets JS tracking.
-  # If you need to change this behavior, add it like so:
-  #
-  # config.track_sprockets_assets = ['application.js', 'application.css']
-  config.track_sprockets_assets = ['application.css']
-
-  config.track_pack_assets = ['application.js']
-end
+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

@@ -1,26 +1,7 @@
 require "webpacker/configuration"
 
-babelrc = Rails.root.join(".babelrc")
 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=<%= breezy_snippet %>;
-    </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
-
 def add_member_methods
   inject_into_file "app/models/application_record.rb", after: "class ApplicationRecord < ActiveRecord::Base\n" do
     <<-RUBY
@@ -29,51 +10,26 @@ def add_member_methods
   end
 
   def self.member_by(attr, value)
-    find_by(Hash[attr, val])
+    find_by(Hash[attr, value])
   end
-
     RUBY
   end
 end
 
-if File.exist?(babelrc)
-  react_babelrc = JSON.parse(File.read(babelrc))
-  react_babelrc["presets"] ||= []
-  react_babelrc["plugins"] ||= []
-
-  react_babelrc["plugins"].push(["module-resolver", {
-    "root": ["./app"],
-    "alias": {
-      "views": "./app/views",
-      "components": "./app/components",
-      "javascript": "./app/javascript"
+say "Copying module-resolver preset to your babel.config.js"
+resolver_snippet = <<~JAVASCRIPT
+  [
+    require('babel-plugin-module-resolver').default, {
+      "root": ["./app"],
+      "alias": {
+        "views": "./app/views",
+        "components": "./app/components",
+        "javascript": "./app/javascript"
+      }
     }
-  }])
-
-  say "Copying module-resolver preset to your .babelrc file"
-
-  File.open(babelrc, "w") do |f|
-    f.puts JSON.pretty_generate(react_babelrc)
-  end
-elsif File.exist?(babel_config)
-  say "Copying module-resolver preset to your babel.config.js"
-  resolver_snippet = <<~PLUGIN
-        [
-          require('babel-plugin-module-resolver').default, {
-            "root": ["./app"],
-            "alias": {
-              "views": "./app/views",
-              "components": "./app/components",
-              "javascript": "./app/javascript"
-            }
-          }
-        ],
-  PLUGIN
-  insert_into_file "babel.config.js", resolver_snippet, after: /plugins: \[\n/
-else
-  say "Copying .babelrc to app root directory"
-  copy_file "#{__dir__}/templates/web/babelrc", ".babelrc"
-end
+  ],
+JAVASCRIPT
+insert_into_file "babel.config.js", resolver_snippet, after: /plugins: \[\n/
 
 say "Copying application.js file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/templates/web/application.js", "#{Webpacker.config.source_entry_path}/application.js"
@@ -87,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 "Appending js tags to your application.html.erb"
-append_js_tags
+say "Copying application.json.props"
+copy_file "#{__dir__}/templates/web/application.json.props", "app/views/layouts/application.json.props"
 
 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

data/lib/tasks/install.rake

@@ -10,6 +10,16 @@ namespace :breezy do
     end
   end
 
+  desc "Verifies if any version of react is in package.json"
+  task :verify_react 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 "Exiting!" && exit!
+    end
+  end
+
   desc "Verifies webpacker has been installed"
   task "verify_webpacker" do
     begin
@@ -23,7 +33,7 @@ namespace :breezy do
 
   namespace :install do
     desc "Install everything needed for breezy web"
-    task 'web' => ["breezy:verify_webpacker", "webpacker:verify_install"] do
+    task 'web' => ["breezy:verify_webpacker", "webpacker:verify_install", "breezy:verify_react"] do
       template = File.expand_path("../install/web.rb", __dir__)
       exec "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{template}"
     end

data/test/helpers_test.rb

@@ -2,30 +2,22 @@ require 'test_helper'
 
 class HelpersTest < ActiveSupport::TestCase
   include Breezy::Helpers
-  attr_reader :request
 
-  class Request
-    attr_reader :params
-    def initialize(params = {})
-      @params = params
-    end
-  end
-
-  test 'breezy_filter returns a valid bzq param' do
-    @request = Request.new({:bzq => 'foo.bar.baz_baz'})
+  test 'clean_bzq returns nil if qry is nil' do
+    qry = nil
 
-    assert_equal breezy_filter, 'foo.bar.baz_baz'
+    assert_nil param_to_search_path(qry)
   end
 
-  test 'breezy_filter removes invalid bzq param chars' do
-    @request = Request.new({:bzq => 'foo.bar/?)()-'})
+  test 'clean_bzq returns a refined qry' do
+    qry = 'foo...bar/?)()-'
 
-    assert_equal breezy_filter, 'foo.bar'
+    assert_equal param_to_search_path(qry), ['foo', 'bar']
   end
 
-  test 'breezy_filter return nil when no params are present' do
-    @request = Request.new({})
+  test 'camelize_path' do
+    path = ['foo_bar', 'foo_bar=1', 'foo_baz_roo']
 
-    assert_nil breezy_filter
+    assert_equal search_path_to_camelized_param(path), 'fooBar.fooBar=1.fooBazRoo'
   end
 end

data/test/render_test.rb

@@ -4,14 +4,14 @@ class RenderController < TestController
   require 'action_view/testing/resolvers'
 
   append_view_path(ActionView::FixtureResolver.new(
-    'render/action.js.breezy' => 'json.author "john smith"',
-    'render/action.html.erb' => 'john smith',
-    'render/implied_render_with_breezy.js.breezy' => 'json.author "john smith"',
-    'render/implied_render_with_breezy.html.erb' => 'john smith',
+    'render/simple_render_with_breezy.json.props' => 'json.author "john smith"',
+    'render/simple_render_with_breezy_with_bad_layout.json.props' => 'json.author "john smith"',
+    'layouts/application.json.props' => 'json.data {yield json}',
+    'layouts/does_not_exist.html.erb' => '',
     'layouts/application.html.erb' => <<~HTML
       <html>
         <head>
-          <script><%= breezy_snippet %></script>
+          <script><%= @initial_state.strip.html_safe %></script>
         </head>
         <body><%=yield%></body>
       </html>
@@ -20,21 +20,18 @@ class RenderController < TestController
 
   layout 'application'
 
-  before_action :use_breezy, only: [:simple_render_with_breezy, :implied_render_with_breezy]
-
   def render_action
     render :action
   end
 
   def simple_render_with_breezy
-    render :action
-  end
-
-  def implied_render_with_breezy
+    @initial_state = render_to_string(formats: [:json], layout: true)
+    render inline: '', layout: true
   end
 
-  def render_action_with_breezy_false
-    render :action
+  def simple_render_with_breezy_with_bad_layout
+    @initial_state = render_to_string(formats: [:json], layout: 'does_not_exist')
+    render inline: '', layout: true
   end
 
   def form_authenticity_token
@@ -50,108 +47,35 @@ class RenderTest < ActionController::TestCase
     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.
-      # 
+      #
       # Note that the original is the following
       # @controller.lookup_context.handlers = [:raw, :breezy, :erb, :js, :html, :builder, :ruby]
-      @controller.lookup_context.handlers = [:breezy, :erb]
+      @controller.lookup_context.handlers = [:props, :erb]
     end
-
-    Breezy.configuration.track_sprockets_assets = ['app.js']
-    Breezy.configuration.track_pack_assets = ['app.js']
-  end
-
-  teardown do
-    Breezy.configuration.track_sprockets_assets = []
-    Breezy.configuration.track_pack_assets = []
-  end
-
-  test "render action via get" do
-    get :render_action
-    assert_normal_render 'john smith'
   end
 
   test "simple render with breezy" do
     get :simple_render_with_breezy
-    assert_breezy_html({author: "john smith"}, screen: 'render/action')
-  end
-
-  test "implied render with breezy" do
-    get :implied_render_with_breezy
-    assert_breezy_html({author: "john smith"}, screen: 'render/implied_render_with_breezy')
-  end
-
-  test "simple render with breezy via get js" do
-    @request.accept = 'application/javascript'
-    get :simple_render_with_breezy
-    assert_breezy_js({author: "john smith"})
-  end
-
-  test "render action via xhr and get js" do
-    @request.accept = 'application/javascript'
-    get :simple_render_with_breezy, xhr: true
-    assert_breezy_js({author: "john smith"})
-  end
-
-  test "render with breezy false" do
-    get :render_action_with_breezy_false
-    assert_normal_render("john smith")
-  end
-
-  test "render with breezy false via xhr get" do
-    @request.accept = 'text/html'
-    get :render_action_with_breezy_false, xhr: true
-    assert_normal_render("john smith")
-  end
-
-  test "render action via xhr and put" do
-    @request.accept = 'text/html'
-    put :render_action, xhr: true
-    assert_normal_render 'john smith'
-  end
 
-  private
-
-  def assert_breezy_html(content, opts={})
     assert_response 200
-
     rendered = <<~HTML
       <html>
         <head>
-          <script>(function(){var fragments={};var lastFragmentName;var lastFragmentPath;var cache={};var defers=[];return ({"data":#{content.to_json},"screen":"#{opts[:screen]}","fragments":fragments,"privateOpts":{"csrfToken":"secret","assets":["/app.js"],"lastFragmentName":lastFragmentName,"lastFragmentPath":lastFragmentPath,"defers":defers}});})();</script>
+          <script>{"data":{"author":"john smith"}}</script>
         </head>
         <body></body>
       </html>
     HTML
 
     assert_equal rendered, @response.body
-    assert_equal 'text/html', @response.content_type
-  end
-
-  def assert_breezy_js(content)
-    assert_response 200
-    assert_equal '(function(){var fragments={};var lastFragmentName;var lastFragmentPath;var cache={};var defers=[];return ({"data":' + content.to_json + ',"screen":"render/action","fragments":fragments,"privateOpts":{"csrfToken":"secret","assets":["/app.js"],"lastFragmentName":lastFragmentName,"lastFragmentPath":lastFragmentPath,"defers":defers}});})()', @response.body
-    assert_equal 'text/javascript', @response.content_type
-  end
-
-  def assert_breezy_replace_js(content)
-    assert_response 200
-    assert_equal 'Breezy.replace((function(){return ({"data":' + content.to_json + ',"csrfToken":"secret","assets":["/app.js"]});})());', @response.body
-    assert_equal 'text/javascript', @response.content_type
+    assert_equal 'text/html', @response.media_type
   end
 
-  def assert_normal_render(content)
-    assert_response 200
-
-    rendered = <<~HTML
-      <html>
-        <head>
-          <script></script>
-        </head>
-        <body>#{content}</body>
-      </html>
-    HTML
+  test "simple render when the layout doesn't exist" do
+    err = assert_raise ActionView::MissingTemplate do |e|
+      get :simple_render_with_breezy_with_bad_layout
+    end
 
-    assert_equal rendered, @response.body
-    assert_equal 'text/html', @response.content_type
+    assert_equal(true, err.message.starts_with?('Missing template layouts/does_not_exist with {:locale=>[:en], :formats=>[:json], :variants=>[], :handlers=>[:props, :erb]}.'))
   end
 end