superglue 0.40.0 → 0.50.0.beta1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a72d44f915a1102e37b882a5492a0bae8427c68715acf5a59a809fc70cd47aba
-  data.tar.gz: 00cb36e39bbc5d47001c3c6ad9a588204e5ccf27deabbce41ddae66a1ba83ac5
+  metadata.gz: 44a42cb747cff210dd1550dae3f9ddf280e72a2b38ff26b72fa5f2eea2eeadfe
+  data.tar.gz: f52f207c4be16d576a51c09f0e821c08d9af68b8150bf52d5b007f59e912d936
 SHA512:
-  metadata.gz: dfa4b3fc28f855eca34ff1533050afd0abf800d7106ffdac25ee44e051e530546990138cae9b33b78526264a9235692a0f878011ea46da84baef8a4278f49280
-  data.tar.gz: a2198132a6bf2d004745ddb1be7b49de05a21571dd55b507c0d8f09928b06771ebcefb25271b9d84ff9f88303e3f359fea9f6c197ff40db907eb3bf65e75620f
+  metadata.gz: 57a0e0bbfd2fdcc815af7922f3b97042d016fe6f68be3389a83bcb77a5de2e1e68423a172878482533f25b69464c09d0395a116c4e8179a48ffce1d7a681dcd7
+  data.tar.gz: d8f034124031b598ee70394fd4900e4daab38126458db85f25afb96e9074bb07196d1f01e9975e960768676da469772d7be044ca3ce0915de95f2e129fdc78d7

data/lib/generators/rails/scaffold_controller_generator.rb

@@ -1,10 +1,10 @@
-require 'rails/generators'
-require 'rails/generators/rails/scaffold_controller/scaffold_controller_generator'
+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__)
+      source_paths << File.expand_path("../templates", __FILE__)
 
       hook_for :superglue, type: :boolean, default: true
     end

data/lib/generators/rails/superglue_generator.rb

@@ -1,92 +1,98 @@
-require 'rails/generators/named_base'
-require 'rails/generators/resource_helpers'
+require "rails/generators/named_base"
+require "rails/generators/resource_helpers"
 
 module Rails
   module Generators
-    class SuperglueGenerator < NamedBase # :nodoc:
+    class SuperglueGenerator < NamedBase
       include Rails::Generators::ResourceHelpers
 
-      source_root File.expand_path('../templates', __FILE__)
+      source_root File.expand_path("../templates", __FILE__)
 
-      argument :attributes, type: :array, default: [], banner: 'field:type field:type'
+      argument :attributes, type: :array, default: [], banner: "field:type field:type"
 
       def create_root_folder
-        path = File.join('app/views', controller_file_path)
+        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|
+        %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)
+          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')
+        template "_form.json.props", File.join("app/views", controller_file_path, "_form.json.props")
 
-        %w(index show new edit).each do |view|
+        %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)
+          template "web/" + filename, File.join("app/views", controller_file_path, filename)
         end
 
-        %w(index show new edit).each do |view|
+        %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)
+          template "web/" + filename, File.join("app/views", controller_file_path, filename)
         end
 
-        %w(index show new edit).each do |view|
+        %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
+      def view_path
+        "../views"
+      end
 
-          inject_into_file app_js, after: "from '@thoughtbot/superglue'" do
-            "\nimport #{component_name} from 'views/#{controller_file_path}/#{action}'"
-          end
+      def app_js_path
+        "app/javascript/"
+      end
 
-          inject_into_file app_js, after: 'identifierToComponentMapping = {' do
-            "\n      '#{[controller_file_path, action].join('/')}': #{component_name},"
-          end
-        end
+      def append_mapping(action)
+        app_js = "#{app_js_path}/page_to_page_mapping.js"
 
-        def action_name
-          @action_name
-        end
+        component_name = [plural_table_name, action].map(&:camelcase).join
 
-        def attributes_names
-          [:id] + super
+        prepend_to_file app_js do
+          "\nimport #{component_name} from '#{view_path}/#{controller_file_path}/#{action}'"
         end
 
-        def filename_with_extensions(name)
-          [name, :json, :props] * '.'
+        inject_into_file app_js, after: "pageIdentifierToPageComponent = {" do
+          "\n  '#{[controller_file_path, action].join("/")}': #{component_name},"
         end
+      end
 
-        def filename_with_js_extensions(name)
-          [name, :js] * '.'
-        end
+      attr_reader :action_name
 
-        def filename_with_html_extensions(name)
-          [name, :html, :erb] * '.'
-        end
+      def attributes_names
+        [:id] + super
+      end
 
-        def attributes_list_with_timestamps
-          attributes_list(attributes_names + %w(created_at updated_at))
-        end
+      def filename_with_extensions(name)
+        [name, :json, :props].join(".")
+      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
+      def filename_with_js_extensions(name)
+        [name, :js].join(".")
+      end
+
+      def filename_with_html_extensions(name)
+        [name, :html, :erb].join(".")
+      end
 
-          attributes
+      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

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

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

@@ -5,7 +5,9 @@ json.<%= plural_table_name %> do
     <%- 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%>)
+    json.delete_form do
+      form_props(model: <%=singular_table_name%>, method: :delete)
+    end
   end
 end
 

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

@@ -1,5 +1,4 @@
 import React from 'react'
-import RailsTag from '@thoughtbot/superglue/components/RailsTag'
 // import * as actionCreators from 'javascript/packs/action_creators'
 // import {useDispatch} from 'react-redux'
 
@@ -23,7 +22,15 @@ export default function <%= plural_table_name.camelize %>Edit ({
   return (
     <div>
       {messagesEl}
-      <RailsTag {...form} data-sg-visit={true}/>
+      <form {...form.props} data-sg-visit={true}>
+        {Object.values(form.extras).map((hiddenProps) => (<input {...hiddenProps} key={hiddenProps.id} type="hidden"/>))}
+        <%- attributes.each do |attr| -%>
+        <input {...form.inputs.<%= attr.column_name %>} type="text"/>
+        <label htmlFor={form.inputs.<%= attr.column_name %>.id}><%= attr.column_name %></label>
+        <%- end -%>
+        <button {...form.inputs.submit} type="submit"> {...form.inputs.submit.text} </button>
+      </form>
+
       <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.js

@@ -10,6 +10,8 @@ export default function <%= plural_table_name.camelize %>Index({
   <%= plural_table_name.camelize(:lower) %> = [],
 }) {
   const <%= singular_table_name.camelize(:lower) %>Items = <%= plural_table_name.camelize(:lower) %>.map((<%= singular_table_name.camelize(:lower) %>, key) => {
+    const deleteForm = <%=singular_table_name.camelize(:lower)%>.deleteForm;
+
     return (
       <tr key={<%= singular_table_name.camelize(:lower) %>.id}>
         <%- attributes_list.select{|attr| attr != :id }.each do |attr| -%>
@@ -17,7 +19,12 @@ export default function <%= plural_table_name.camelize %>Index({
         <%- 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>
+        <td>
+          <form {...deleteForm.props} data-sg-visit={true}>
+            {Object.values(deleteForm.extras).map((hiddenProps) => (<input {...hiddenProps} key={hiddenProps.id} type="hidden"/>))}
+            <button type="submit">Delete</button>
+          </form>
+        </td>
       </tr>
     )
   })

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

@@ -1,5 +1,4 @@
 import React from 'react'
-import RailsTag from '@thoughtbot/superglue/components/RailsTag'
 // import * as actionCreators from 'javascript/packs/action_creators'
 // import { useDispatch } from 'react-redux'
 
@@ -22,7 +21,15 @@ export default function <%= plural_table_name.camelize %>New({
   return (
     <div>
       {messagesEl}
-      <RailsTag {...form} data-sg-visit={true}/>
+      <form {...form.props} data-sg-visit={true}>
+        {Object.values(form.extras).map((hiddenProps) => (<input {...hiddenProps} key={hiddenProps.id} type="hidden"/>))}
+        <%- attributes.each do |attr| -%>
+        <input {...form.inputs.<%= attr.column_name %>} type="text"/>
+        <label htmlFor={form.inputs.<%= attr.column_name %>.id}><%= attr.column_name %></label>
+        <%- end -%>
+        <button {...form.inputs.submit} type="submit"> {...form.inputs.submit.text} </button>
+      </form>
+
       <a href={<%= plural_table_name.camelize(:lower) %>Path} data-sg-visit={true}>Back</a>
     </div>
   )

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

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

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

@@ -5,47 +5,13 @@ 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';
+import { pageIdentifierToPageComponent } from './page_to_page_mapping';
 
-// 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 {
+class Application extends ApplicationBase {
   mapping() {
-    return identifierToComponentMapping;
+    return pageIdentifierToPageComponent;
   }
 
   visitAndRemote(navRef, store) {
@@ -58,57 +24,46 @@ export default class Application extends ApplicationBase {
     const composeEnhancers =
       (this.hasWindow && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
       compose;
-    const reducer = this.wrapWithPersistReducer(
-      reduceReducers(
+    const reducer = 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,
-    };
+if (typeof window !== "undefined") {
+  document.addEventListener("DOMContentLoaded", function () {
+    const appEl = document.getElementById("app");
+    const location = window.location;
 
-    // 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);
-        }
-      });
+    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
+      );
     }
-
-    return persistReducer(persistConfig, reducers);
-  }
+  });
 }
+

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

@@ -7,10 +7,7 @@ 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')
-]
+json.assets [ asset_path('application.js') ]
 
 if protect_against_forgery?
   json.csrf_token form_authenticity_token

data/lib/install/templates/web/initializer.rb

@@ -1 +1 @@
-require 'props_template/core_ext'
+require "props_template/core_ext"

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

@@ -0,0 +1,12 @@
+// import your page component
+// e.g import PostsEdit from '../views/posts/edit'
+
+
+// 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}
+export const pageIdentifierToPageComponent = {
+};
+

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

@@ -20,9 +20,6 @@
 //   }
 // }
 
-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 
@@ -38,34 +35,9 @@ export const applicationPagesReducer = (state = {}, action) => {
 }
 
 // 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 Superglue and is needed to persist state
-// on any changes made to the initial state that gets injected into
-// window.SUPERGLUE_INITIAL_PAGE_STATE.
+// Its rare to be adding to this.
 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

@@ -1,7 +1,3 @@
-require "webpacker/configuration"
-
-babel_config = Rails.root.join("babel.config.js")
-
 def add_member_methods
   inject_into_file "app/models/application_record.rb", after: "class ApplicationRecord < ActiveRecord::Base\n" do
     <<-RUBY
@@ -16,35 +12,27 @@ def add_member_methods
   end
 end
 
-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"
-      }
-    }
-  ],
-JAVASCRIPT
-insert_into_file "babel.config.js", resolver_snippet, after: /plugins: \[\n/
+def app_js_path
+  "app/javascript/"
+end
+
+say "Copying application.js file to #{app_js_path}"
+copy_file "#{__dir__}/templates/web/application.js", "#{app_js_path}/application.js"
 
-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"
+say "Copying page_to_page_mapping.js file to #{app_js_path}"
+copy_file "#{__dir__}/templates/web/page_to_page_mapping.js", "#{app_js_path}/page_to_page_mapping.js"
 
-say "Copying reducer.js file to #{Webpacker.config.source_entry_path}"
-copy_file "#{__dir__}/templates/web/reducer.js", "#{Webpacker.config.source_entry_path}/reducer.js"
+say "Copying reducer.js file to #{app_js_path}"
+copy_file "#{__dir__}/templates/web/reducer.js", "#{app_js_path}/reducer.js"
 
-say "Copying action_creators.js file to #{Webpacker.config.source_entry_path}"
-copy_file "#{__dir__}/templates/web/action_creators.js", "#{Webpacker.config.source_entry_path}/action_creators.js"
+say "Copying action_creators.js file to #{app_js_path}"
+copy_file "#{__dir__}/templates/web/action_creators.js", "#{app_js_path}/action_creators.js"
 
-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 actions.js file to #{app_js_path}"
+copy_file "#{__dir__}/templates/web/actions.js", "#{app_js_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 application_visit.js file to #{app_js_path}"
+copy_file "#{__dir__}/templates/web/application_visit.js", "#{app_js_path}/application_visit.js"
 
 say "Copying Superglue initializer"
 copy_file "#{__dir__}/templates/web/initializer.rb", "config/initializers/superglue.rb"
@@ -55,12 +43,10 @@ copy_file "#{__dir__}/templates/web/application.json.props", "app/views/layouts/
 say "Adding required member methods to ApplicationRecord"
 add_member_methods
 
-say "Installing React, Redux, and Superglue"
-run "yarn add babel-plugin-module-resolver history html-react-parser react-redux redux-thunk redux redux-persist reduce-reducers immer @thoughtbot/superglue --save"
+say "Installing FormProps"
+run "bundle add form_props"
 
-# 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 "Installing React, Redux, and Superglue"
+run "yarn add history react-redux redux-thunk redux reduce-reducers immer @thoughtbot/superglue --save"
 
-say "Webpacker now supports superglue.js 🎉", :green
+say "Superglue is Installed! 🎉", :green