superglue 0.40.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a72d44f915a1102e37b882a5492a0bae8427c68715acf5a59a809fc70cd47aba
+  data.tar.gz: 00cb36e39bbc5d47001c3c6ad9a588204e5ccf27deabbce41ddae66a1ba83ac5
+SHA512:
+  metadata.gz: dfa4b3fc28f855eca34ff1533050afd0abf800d7106ffdac25ee44e051e530546990138cae9b33b78526264a9235692a0f878011ea46da84baef8a4278f49280
+  data.tar.gz: a2198132a6bf2d004745ddb1be7b49de05a21571dd55b507c0d8f09928b06771ebcefb25271b9d84ff9f88303e3f359fea9f6c197ff40db907eb3bf65e75620f

data/lib/generators/rails/scaffold_controller_generator.rb

@@ -0,0 +1,12 @@
+require 'rails/generators'
+require 'rails/generators/rails/scaffold_controller/scaffold_controller_generator'
+
+module Rails
+  module Generators
+    class ScaffoldControllerGenerator
+      source_paths << File.expand_path('../templates', __FILE__)
+
+      hook_for :superglue, type: :boolean, default: true
+    end
+  end
+end

data/lib/generators/rails/superglue_generator.rb

@@ -0,0 +1,92 @@
+require 'rails/generators/named_base'
+require 'rails/generators/resource_helpers'
+
+module Rails
+  module Generators
+    class SuperglueGenerator < NamedBase # :nodoc:
+      include Rails::Generators::ResourceHelpers
+
+      source_root File.expand_path('../templates', __FILE__)
+
+      argument :attributes, type: :array, default: [], banner: 'field:type field:type'
+
+      def create_root_folder
+        path = File.join('app/views', controller_file_path)
+        empty_directory path unless File.directory?(path)
+      end
+
+      def copy_view_files
+        %w(index show new edit).each do |view|
+          @action_name = view
+          filename = filename_with_extensions(view)
+          template filename, File.join('app/views', controller_file_path, filename)
+        end
+        template '_form.json.props', File.join('app/views', controller_file_path, '_form.json.props')
+
+        %w(index show new edit).each do |view|
+          @action_name = view
+          filename = filename_with_js_extensions(view)
+          template 'web/' + filename, File.join('app/views', controller_file_path, filename)
+        end
+
+        %w(index show new edit).each do |view|
+          @action_name = view
+          filename = filename_with_html_extensions(view)
+          template 'web/' + filename, File.join('app/views', controller_file_path, filename)
+        end
+
+        %w(index show new edit).each do |view|
+          append_mapping(view)
+        end
+      end
+
+
+      protected
+        def append_mapping(action)
+          app_js = 'app/javascript/packs/application.js'
+
+          component_name = [plural_table_name, action].map(&:camelcase).join
+
+          inject_into_file app_js, after: "from '@thoughtbot/superglue'" do
+            "\nimport #{component_name} from 'views/#{controller_file_path}/#{action}'"
+          end
+
+          inject_into_file app_js, after: 'identifierToComponentMapping = {' do
+            "\n      '#{[controller_file_path, action].join('/')}': #{component_name},"
+          end
+        end
+
+        def action_name
+          @action_name
+        end
+
+        def attributes_names
+          [:id] + super
+        end
+
+        def filename_with_extensions(name)
+          [name, :json, :props] * '.'
+        end
+
+        def filename_with_js_extensions(name)
+          [name, :js] * '.'
+        end
+
+        def filename_with_html_extensions(name)
+          [name, :html, :erb] * '.'
+        end
+
+        def attributes_list_with_timestamps
+          attributes_list(attributes_names + %w(created_at updated_at))
+        end
+
+        def attributes_list(attributes = attributes_names)
+          if self.attributes.any? {|attr| attr.name == 'password' && attr.type == :digest}
+            attributes = attributes.reject {|name| %w(password password_confirmation).include? name}
+          end
+
+          attributes
+        end
+    end
+  end
+end

data/lib/generators/rails/templates/_form.json.props

@@ -0,0 +1,13 @@
+html = form_with(model: @<%= model_resource_name %>, local: true) do |form|
+  inner = "".html_safe
+
+<%- attributes.each do |attr| -%>
+  inner << form.label(:<%= attr.column_name %>)
+  inner << form.<%= attr.field_type %>(:<%= attr.column_name %>)
+<%- end -%>
+  inner << form.submit
+
+  inner
+end
+
+json.html html

data/lib/generators/rails/templates/controller.rb.tt

@@ -0,0 +1,82 @@
+<% if namespaced? -%>
+require_dependency "<%= namespaced_path %>/application_controller"
+
+<% end -%>
+<% module_namespacing do -%>
+class <%= controller_class_name %>Controller < ApplicationController
+  before_action :set_<%= singular_table_name %>, only: [:show, :edit, :update, :destroy]
+
+  # GET <%= route_url %>
+  def index
+    @<%= plural_table_name %> = <%= orm_class.all(class_name) %>
+  end
+
+  # GET <%= route_url %>/1
+  def show
+  end
+
+  # GET <%= route_url %>/new
+  def new
+    @<%= singular_table_name %> = <%= orm_class.build(class_name) %>
+  end
+
+  # GET <%= route_url %>/1/edit
+  def edit
+  end
+
+  # POST <%= route_url %>
+  def create
+    @<%= singular_table_name %> = <%= orm_class.build(class_name, "#{singular_table_name}_params") %>
+
+    if @<%= orm_instance.save %>
+      <%- if options[:platform] == 'mobile' -%>
+      redirect_to <%= index_helper %>_url, notice: <%= "'#{human_name} was successfully created.'" %>
+      <%- else -%>
+      redirect_to @<%= singular_table_name %>, notice: <%= "'#{human_name} was successfully created.'" %>
+      <%- end -%>
+    else
+      response.set_header("content-location", new_<%= singular_table_name %>_path)
+      render :new
+    end
+  end
+
+  # PATCH/PUT <%= route_url %>/1
+  def update
+    if @<%= orm_instance.update("#{singular_table_name}_params") %>
+      <%- if options[:platform] == 'mobile' -%>
+      redirect_to <%= index_helper %>_url, notice: <%= "'#{human_name} was successfully updated.'" %>
+      <%- else -%>
+      redirect_to @<%= singular_table_name %>, notice: <%= "'#{human_name} was successfully updated.'" %>
+      <%- end -%>
+    else
+      response.set_header("content-location", edit_<%= singular_table_name %>_path(@<%= singular_table_name %>))
+      render :edit
+    end
+  end
+
+  # DELETE <%= route_url %>/1
+  def destroy
+    @<%= orm_instance.destroy %>
+    <%- if options[:platform] == 'mobile' -%>
+    redirect_to <%= index_helper %>_url, notice: <%= "'#{human_name} was successfully destroyed.'" %>
+    <%- else -%>
+    redirect_to <%= index_helper %>_url, notice: <%= "'#{human_name} was successfully destroyed.'" %>
+    <%- end -%>
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_<%= singular_table_name %>
+      @<%= singular_table_name %> = <%= orm_class.find(class_name, "params[:id]") %>
+    end
+
+    # Only allow a trusted parameter "white list" through.
+    def <%= "#{singular_table_name}_params" %>
+      <%- if attributes_names.empty? -%>
+      params.fetch(:<%= singular_table_name %>, {})
+      <%- else -%>
+      params.require(:<%= singular_table_name %>).permit(<%= attributes_names.map { |name| ":#{name}" }.join(', ') %>)
+      <%- end -%>
+    end
+end
+<% end -%>

data/lib/generators/rails/templates/edit.json.props

@@ -0,0 +1,14 @@
+if @post.errors.any?
+  content = {
+    explanation: "#{pluralize(@<%= singular_table_name %>.errors.count, "error")} prohibited this post from being saved:",
+    messages: @<%= singular_table_name %>.errors.full_messages.map{|msg| {body: msg}}
+  }
+
+  flash.now[:form_error] = content
+end
+
+json.form(partial: 'form') do
+end
+
+json.<%= singular_table_name%>_path <%= singular_table_name%>_path(@<%=singular_table_name%>)
+json.<%= plural_table_name %>_path <%= plural_table_name %>_path

data/lib/generators/rails/templates/index.json.props

@@ -0,0 +1,13 @@
+json.<%= plural_table_name %> do
+  json.array! @<%= plural_table_name %> do |<%= singular_table_name %>|
+    <%- attributes_list_with_timestamps.each do |attr| -%>
+    json.<%=attr%> <%= singular_table_name %>.<%=attr%>
+    <%- end -%>
+    json.edit_<%=singular_table_name%>_path edit_<%=singular_table_name%>_path(<%=singular_table_name%>)
+    json.<%=singular_table_name%>_path <%=singular_table_name%>_path(<%=singular_table_name%>)
+    json.delete_<%=singular_table_name%>_path <%=singular_table_name%>_path(<%=singular_table_name%>)
+  end
+end
+
+
+json.new_<%= singular_table_name %>_path new_<%= singular_table_name %>_path

data/lib/generators/rails/templates/new.json.props

@@ -0,0 +1,15 @@
+if @post.errors.any?
+  content = {
+    explanation: "#{pluralize(@<%= singular_table_name %>.errors.count, "error")} prohibited this post from being saved:",
+    messages: @<%= singular_table_name %>.errors.full_messages.map{|msg| {body: msg}}
+  }
+
+  flash.now[:form_error] = content
+end
+
+json.form(partial: 'form') do
+end
+
+json.<%= plural_table_name %>_path <%= plural_table_name %>_path
+
+

data/lib/generators/rails/templates/show.json.props

@@ -0,0 +1,7 @@
+<%- attributes_list_with_timestamps.each do |attr|-%>
+json.<%=attr%> @<%= singular_table_name %>.<%=attr%>
+<%- end -%>
+
+
+json.<%= plural_table_name %>_path <%= plural_table_name %>_path
+json.edit_<%= singular_table_name %>_path edit_<%= singular_table_name %>_path(@<%= singular_table_name %>)

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

@@ -0,0 +1,12 @@
+<%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
+
+<script type="text/javascript">
+  window.SUPERGLUE_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
+</script>
+
+<div id="app">
+  <%%# If you need SSR follow instructions at %>
+  <%%# https://github.com/thoughtbot/superglue/blob/main/docs/recipes/server-side-rendering.md %>
+  <%%# and uncomment the following line %>
+  <%%#= Humid.render(initial_state).html_safe %>
+</div>

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import RailsTag from '@thoughtbot/superglue/components/RailsTag'
+// import * as actionCreators from 'javascript/packs/action_creators'
+// import {useDispatch} from 'react-redux'
+
+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>
+  )
+
+  return (
+    <div>
+      {messagesEl}
+      <RailsTag {...form} data-sg-visit={true}/>
+      <a href={<%= singular_table_name.camelize(:lower) %>Path} data-sg-visit={true}>Show</a>
+      <a href={<%= plural_table_name.camelize(:lower) %>Path}  data-sg-visit={true}>Back</a>
+    </div>
+  )
+}

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

@@ -0,0 +1,7 @@
+<%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
+
+<script type="text/javascript">
+  window.SUPERGLUE_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
+</script>
+
+<div id="app"></div>

data/lib/generators/rails/templates/web/index.js

@@ -0,0 +1,49 @@
+import React from 'react'
+// 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 (
+      <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-sg-visit={true}>Show</a></td>
+        <td><a href={ <%=singular_table_name%>.edit<%=singular_table_name.camelize%>Path } data-sg-visit={true}>Edit</a></td>
+        <td><a href={ <%=singular_table_name%>.delete<%=singular_table_name.camelize%>Path }data-sg-visit={true} data-sg-method={"DELETE"}>Delete</a></td>
+      </tr>
+    )
+  })
+
+  return (
+    <div>
+      <p id="notice">{flash.notice}</p>
+
+      <h1><%= plural_table_name.capitalize %></h1>
+
+      <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-sg-visit={true}>New <%= singular_table_name.capitalize %></a>
+    </div>
+  )
+}

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

@@ -0,0 +1,7 @@
+<%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
+
+<script type="text/javascript">
+  window.SUPERGLUE_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
+</script>
+
+<div id="app"></div>

data/lib/generators/rails/templates/web/new.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import RailsTag from '@thoughtbot/superglue/components/RailsTag'
+// import * as actionCreators from 'javascript/packs/action_creators'
+// import { useDispatch } from 'react-redux'
+
+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>
+  )
+
+  return (
+    <div>
+      {messagesEl}
+      <RailsTag {...form} data-sg-visit={true}/>
+      <a href={<%= plural_table_name.camelize(:lower) %>Path} data-sg-visit={true}>Back</a>
+    </div>
+  )
+}

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

@@ -0,0 +1,7 @@
+<%% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
+
+<script type="text/javascript">
+  window.SUPERGLUE_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
+</script>
+
+<div id="app"></div>

data/lib/generators/rails/templates/web/show.js

@@ -0,0 +1,28 @@
+import React from 'react'
+// import * as actionCreators from 'javascript/packs/action_creators'
+// import {useDispatch} from 'react-redux'
+
+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-sg-visit={true}>Edit</a>
+      <a href={ <%= plural_table_name.camelize(:lower) %>Path } data-sg-visit={true}>Back</a>
+    </div>
+  )
+}

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

@@ -0,0 +1,14 @@
+// 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

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

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

@@ -0,0 +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 { ApplicationBase, fragmentMiddleware } from '@thoughtbot/superglue';
+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 prefixed to all calls made by the `visit`
+          // and `remote` thunks.
+          baseUrl={location.origin}
+          // The global var SUPERGLUE_INITIAL_PAGE_STATE is set by your erb
+          // template, e.g., index.html.erb
+          initialPage={window.SUPERGLUE_INITIAL_PAGE_STATE}
+          // The initial path of the page, e.g., /foobar
+          path={location.pathname + location.search + location.hash}
+          buildVisitAndRemote={buildVisitAndRemote}
+        />,
+        appEl
+      );
+    }
+  });
+}
+
+export default class Application extends ApplicationBase {
+  mapping() {
+    return identifierToComponentMapping;
+  }
+
+  visitAndRemote(navRef, store) {
+    return buildVisitAndRemote(navRef, store);
+  }
+
+  buildStore(initialState, { superglue: superglueReducer, 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({
+          superglue: superglueReducer,
+          pages: reduceReducers(pagesReducer, applicationPagesReducer),
+        }),
+        applicationRootReducer
+      )
+    );
+    const store = createStore(
+      reducer,
+      initialState,
+      composeEnhancers(applyMiddleware(thunk, fragmentMiddleware))
+    );
+
+    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 = "superglue";
+    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);
+  }
+}

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

@@ -0,0 +1,27 @@
+path = request.format.json? ? param_to_search_path(params[:props_at]) : 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.restore_strategy 'fromCacheAndRevisitInBackground'
+
+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 '@thoughtbot/superglue/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().superglue.currentPageKey
+    let { action } = args
+
+    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,
+        })
+
+        // always return meta
+        return meta
+      })
+      .finally(() => {
+        // Do something after
+        // e.g, hide loading state, you can access the changed pageKey
+        // via getState().superglue.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
+          // superglue 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 }
+}
+