superglue 0.41.0 → 0.50.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20e7f46b274beaffe44eb96b704678e4eb2ebb43c85607a6b4170974525db452
-  data.tar.gz: 4e4280233e4e9ed82664aafb9fde2f176471c605142bba3af3326282431e0278
+  metadata.gz: '0586b4b5e16fbae55b29d0b9b56fb421fec1f5e0841bea7cb8ed2ee661ad6642'
+  data.tar.gz: 01fe043eadc91fb4efe74b96e4e1ce35d01bcb895514d701b6a924ce8c7ed994
 SHA512:
-  metadata.gz: ba6cd0dabf868452a22e88533df3b2d76f324078e7d7559917a1b5d5aa181cf3e060ceee6f1ea9271f8a8478fde127636639493914eb38ba6eba583026edeabd
-  data.tar.gz: 7ebb6ade8ba3a240013f9c55f2b6527423773d8655be5292aedab05e01af089884f8e6f7e93bbb0e45f27c785aebd20c4153e20e93796da3c88e3f0804bb775a
+  metadata.gz: dab5eef3eff758a64408a2d239e47d0107b60952cb4eb0dfec97a241f39eeeea644ff67741022550d6ca2847a5773098c72379c2b48a2fafb86f0f0ba6d46980
+  data.tar.gz: 10340fee27529540353885d343bd5202a35db8bbd5a403156b53c38e960e1b299dd34d5b8955e831cf0791f0f3ebed35908d3189a828fed3605e51eb4be640c8

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,109 +1,98 @@
-require 'rails/generators/named_base'
-require 'rails/generators/resource_helpers'
-require 'rails/version'
+require "rails/generators/named_base"
+require "rails/generators/resource_helpers"
 
 module Rails
   module Generators
     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 view_path
-          if Rails.version >= "7"
-            "../views"
-          else
-            "../../views"
-          end
-        end
 
-        def app_js_path
-          if Rails.version >= "7"
-            "app/javascript/"
-          else
-            "app/javascript/packs"
-          end
-        end
+      def view_path
+        "../views"
+      end
 
-        def append_mapping(action)
-          app_js = "#{app_js_path}/application.js"
+      def app_js_path
+        "app/javascript/"
+      end
 
-          component_name = [plural_table_name, action].map(&:camelcase).join
+      def append_mapping(action)
+        app_js = "#{app_js_path}/page_to_page_mapping.js"
 
-          inject_into_file app_js, after: "from '@thoughtbot/superglue'" do
-            "\nimport #{component_name} from '#{view_path}/#{controller_file_path}/#{action}'"
-          end
+        component_name = [plural_table_name, action].map(&:camelcase).join
 
-          inject_into_file app_js, after: 'identifierToComponentMapping = {' do
-            "\n      '#{[controller_file_path, action].join('/')}': #{component_name},"
-          end
+        prepend_to_file app_js do
+          "\nimport #{component_name} from '#{view_path}/#{controller_file_path}/#{action}'"
         end
 
-        def action_name
-          @action_name
+        inject_into_file app_js, after: "pageIdentifierToPageComponent = {" do
+          "\n  '#{[controller_file_path, action].join("/")}': #{component_name},"
         end
+      end
 
-        def attributes_names
-          [:id] + super
-        end
+      attr_reader :action_name
 
-        def filename_with_extensions(name)
-          [name, :json, :props] * '.'
-        end
+      def attributes_names
+        [:id] + super
+      end
 
-        def filename_with_js_extensions(name)
-          [name, :js] * '.'
-        end
+      def filename_with_extensions(name)
+        [name, :json, :props].join(".")
+      end
 
-        def filename_with_html_extensions(name)
-          [name, :html, :erb] * '.'
-        end
+      def filename_with_js_extensions(name)
+        [name, :js].join(".")
+      end
 
-        def attributes_list_with_timestamps
-          attributes_list(attributes_names + %w(created_at updated_at))
-        end
+      def filename_with_html_extensions(name)
+        [name, :html, :erb].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 attributes_list_with_timestamps
+        attributes_list(attributes_names + %w[created_at updated_at])
+      end
 
-          attributes
+      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/edit.json.props

@@ -1,10 +1,8 @@
 if @post.errors.any?
-  content = {
+  json.errors({
     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

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/new.json.props

@@ -1,10 +1,8 @@
 if @post.errors.any?
-  content = {
+  json.errors({
     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

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

@@ -1,18 +1,14 @@
 import React from 'react'
-import RailsTag from '@thoughtbot/superglue/components/RailsTag'
-// import * as actionCreators from 'javascript/packs/action_creators'
-// import {useDispatch} from 'react-redux'
+// import { useSelector } from 'react-redux'
 
 export default function <%= plural_table_name.camelize %>Edit ({
   // visit,
   // remote,
   form,
-  flash,
+  error,
   <%= 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>
@@ -23,7 +19,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

@@ -1,15 +1,17 @@
 import React from 'react'
-// import * as actionCreators from 'javascript/packs/action_creators'
-// import {useDispatch} from 'react-redux'
+import { useSelector } 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 flash = useSelector((state) => state.flash)
+
   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,14 +19,19 @@ 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>
     )
   })
 
   return (
     <div>
-      <p id="notice">{flash.notice}</p>
+      <p id="notice">{flash && flash.notice}</p>
 
       <h1><%= plural_table_name.capitalize %></h1>
 

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

@@ -1,17 +1,13 @@
 import React from 'react'
-import RailsTag from '@thoughtbot/superglue/components/RailsTag'
-// import * as actionCreators from 'javascript/packs/action_creators'
-// import { useDispatch } from 'react-redux'
+// import { useSelector } from 'react-redux'
 
 export default function <%= plural_table_name.camelize %>New({
   // visit,
   // remote
   form,
-  flash,
+  error,
   <%= plural_table_name.camelize(:lower) %>Path,
 }) {
-  const error = flash.form_error
-
   const messagesEl = error && (
     <div id="error_explanation">
       <h2>{ error.explanation }</h2>
@@ -22,7 +18,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/generators/rails/templates/web/show.js

@@ -1,17 +1,17 @@
 import React from 'react'
-// import * as actionCreators from 'javascript/packs/action_creators'
-// import {useDispatch} from 'react-redux'
+import { useSelector } 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
 }) {
+  const flash = useSelector((state) => state.flash)
+
   return (
     <div>
       <p id="notice">{flash && flash.notice}</p>

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

@@ -1,3 +1,6 @@
-// Example:
-//
-// export const CLEAR_FORM_ERRORS = 'CLEAR_FORM_ERRORS'
+import { createAction } from '@reduxjs/toolkit'
+import { SAVE_RESPONSE, BEFORE_VISIT, UPDATE_FRAGMENTS } from '@thoughtbot/superglue'
+
+export const saveResponse = createAction(SAVE_RESPONSE)
+export const beforeVisit = createAction(BEFORE_VISIT)
+export const updateFragments = createAction(UPDATE_FRAGMENTS)

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

@@ -1,20 +1,25 @@
 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 { applicationRootReducer, applicationPagesReducer } from './reducer';
+import { createRoot } from 'react-dom/client';
+import { ApplicationBase } from '@thoughtbot/superglue';
 import { buildVisitAndRemote } from './application_visit';
+import { pageIdentifierToPageComponent } from './page_to_page_mapping';
+import { buildStore } from './store'
 
-// 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 = {
-};
+class Application extends ApplicationBase {
+  mapping() {
+    return pageIdentifierToPageComponent;
+  }
+
+  visitAndRemote(navRef, store) {
+    return buildVisitAndRemote(navRef, store);
+  }
+
+  buildStore(initialState, { superglue, pages}) {
+    return buildStore(initialState, superglue, pages);
+  }
+}
 
 if (typeof window !== "undefined") {
   document.addEventListener("DOMContentLoaded", function () {
@@ -22,7 +27,8 @@ if (typeof window !== "undefined") {
     const location = window.location;
 
     if (appEl) {
-      render(
+      const root = createRoot(appEl);
+      root.render(
         <Application
           appEl={appEl}
           // The base url prefixed to all calls made by the `visit`
@@ -33,43 +39,10 @@ if (typeof window !== "undefined") {
           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 = reduceReducers(
-        combineReducers({
-          superglue: superglueReducer,
-          pages: reduceReducers(pagesReducer, applicationPagesReducer),
-        }),
-        applicationRootReducer
-    );
-
-    const store = createStore(
-      reducer,
-      initialState,
-      composeEnhancers(applyMiddleware(thunk, fragmentMiddleware))
-    );
-
-    return store;
-  }
-}

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

@@ -7,11 +7,7 @@ end
 json.component_identifier local_assigns[:virtual_path_of_template]
 json.defers json.deferred!
 json.fragments json.fragments!
-json.assets [
-  # Uncomment for webpacker support
-  # 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
@@ -25,4 +21,7 @@ end
 json.restore_strategy 'fromCacheAndRevisitInBackground'
 
 json.rendered_at Time.now.to_i
-json.flash flash.to_h
+
+json.slices do
+  json.flash flash.to_h
+end

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

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { saveResponse, beforeVisit } from '../actions'
+
+export const flashSlice = createSlice({
+  name: 'flash',
+  initialState: {},
+  extraReducers: (builder) => {
+    builder.addCase(beforeVisit, (state, action) => {
+      return {}
+    })
+    builder.addCase(saveResponse, (state, action) => {
+      const { page } = action.payload;
+
+      return {
+        ...state, ...page.slices.flash
+      }
+    })
+  }
+})

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/pages.js

@@ -0,0 +1,15 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { saveResponse, beforeVisit } from '../actions'
+
+export const pagesSlice = createSlice({
+  name: 'pages',
+  // extraReducers: (builder) => {
+  //   builder.addCase(beforeVisit, (state, action) => {
+  //     const {currentPageKey} = action.payload
+  //
+  //     const currentPage = draft[currentPageKey]
+  //     delete currentPage.error
+  //   })
+  // }
+})
+

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

@@ -0,0 +1,32 @@
+import { configureStore } from '@reduxjs/toolkit'
+import { pagesSlice } from "./slices/pages"
+import { flashSlice } from "./slices/flash"
+import {
+  BEFORE_VISIT,
+  BEFORE_FETCH,
+  BEFORE_REMOTE,
+  fragmentMiddleware
+} from '@thoughtbot/superglue'
+
+export const buildStore = (initialState, superglueReducer, supergluePagesReducer) => {
+
+  return configureStore({
+    preloadedState: initialState,
+    devTools: process.env.NODE_ENV !== 'production',
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({
+        serializableCheck: {
+          ignoredActions: [BEFORE_VISIT, BEFORE_FETCH, BEFORE_REMOTE],
+        },
+      }).concat(fragmentMiddleware),
+    reducer: {
+      superglue: superglueReducer,
+      pages: (state, action) => {
+        const nextState = supergluePagesReducer(state, action)
+        return pagesSlice.reducer(nextState, action)
+      },
+      flash: flashSlice.reducer
+    },
+  });
+};
+