superglue 0.50.0.beta1 → 0.50.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 44a42cb747cff210dd1550dae3f9ddf280e72a2b38ff26b72fa5f2eea2eeadfe
-  data.tar.gz: f52f207c4be16d576a51c09f0e821c08d9af68b8150bf52d5b007f59e912d936
+  metadata.gz: '0586b4b5e16fbae55b29d0b9b56fb421fec1f5e0841bea7cb8ed2ee661ad6642'
+  data.tar.gz: 01fe043eadc91fb4efe74b96e4e1ce35d01bcb895514d701b6a924ce8c7ed994
 SHA512:
-  metadata.gz: 57a0e0bbfd2fdcc815af7922f3b97042d016fe6f68be3389a83bcb77a5de2e1e68423a172878482533f25b69464c09d0395a116c4e8179a48ffce1d7a681dcd7
-  data.tar.gz: d8f034124031b598ee70394fd4900e4daab38126458db85f25afb96e9074bb07196d1f01e9975e960768676da469772d7be044ca3ce0915de95f2e129fdc78d7
+  metadata.gz: dab5eef3eff758a64408a2d239e47d0107b60952cb4eb0dfec97a241f39eeeea644ff67741022550d6ca2847a5773098c72379c2b48a2fafb86f0f0ba6d46980
+  data.tar.gz: 10340fee27529540353885d343bd5202a35db8bbd5a403156b53c38e960e1b299dd34d5b8955e831cf0791f0f3ebed35908d3189a828fed3605e51eb4be640c8

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

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

@@ -1,14 +1,14 @@
 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;
 
@@ -31,7 +31,7 @@ export default function <%= plural_table_name.camelize %>Index({
 
   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,16 +1,13 @@
 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 %>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>

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,13 +1,11 @@
 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'
 
 class Application extends ApplicationBase {
   mapping() {
@@ -18,27 +16,8 @@ class Application extends ApplicationBase {
     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;
+  buildStore(initialState, { superglue, pages}) {
+    return buildStore(initialState, superglue, pages);
   }
 }
 
@@ -48,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`
@@ -59,11 +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
+        />
       );
     }
   });
 }
 
+

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

@@ -21,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/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
+    },
+  });
+};
+

data/lib/install/web.rb

@@ -22,11 +22,14 @@ copy_file "#{__dir__}/templates/web/application.js", "#{app_js_path}/application
 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 #{app_js_path}"
-copy_file "#{__dir__}/templates/web/reducer.js", "#{app_js_path}/reducer.js"
+say "Copying flash.js file to #{app_js_path}"
+copy_file "#{__dir__}/templates/web/flash.js", "#{app_js_path}/slices/flash.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 pages.js file to #{app_js_path}"
+copy_file "#{__dir__}/templates/web/pages.js", "#{app_js_path}/slices/pages.js"
+
+say "Copying store.js file to #{app_js_path}"
+copy_file "#{__dir__}/templates/web/store.js", "#{app_js_path}/store.js"
 
 say "Copying actions.js file to #{app_js_path}"
 copy_file "#{__dir__}/templates/web/actions.js", "#{app_js_path}/actions.js"
@@ -46,7 +49,7 @@ add_member_methods
 say "Installing FormProps"
 run "bundle add form_props"
 
-say "Installing React, Redux, and Superglue"
-run "yarn add history react-redux redux-thunk redux reduce-reducers immer @thoughtbot/superglue --save"
+say "Installing Superglue and friends"
+run "yarn add history react react-dom @reduxjs/toolkit react-redux @thoughtbot/superglue --save"
 
 say "Superglue is Installed! 🎉", :green

data/lib/tasks/install.rake

@@ -1,17 +1,7 @@
 namespace :superglue do
-  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?
-      warn "React not installed. Did you install React? https://github.com/rails/webpacker#react"
-      warn "Exiting!" && exit!
-    end
-  end
-
   namespace :install do
     desc "Install everything needed for superglue web"
-    task "web" => ["superglue:verify_react"] do
+    task "web" do
       template = File.expand_path("../install/web.rb", __dir__)
       exec "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{template}"
     end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: superglue
 version: !ruby/object:Gem::Version
-  version: 0.50.0.beta1
+  version: 0.50.0
 platform: ruby
 authors:
 - Johny Ho
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-08-17 00:00:00.000000000 Z
+date: 2023-10-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 6.0.0
+        version: 7.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 6.0.0
+        version: 7.0.0
 - !ruby/object:Gem::Dependency
   name: props_template
   requirement: !ruby/object:Gem::Requirement
@@ -58,14 +58,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '7.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '7.0'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -80,20 +80,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '12.0'
-- !ruby/object:Gem::Dependency
-  name: byebug
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '9.0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '9.0'
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -172,14 +158,15 @@ files:
 - lib/generators/rails/templates/web/new.js
 - lib/generators/rails/templates/web/show.html.erb
 - lib/generators/rails/templates/web/show.js
-- lib/install/templates/web/action_creators.js
 - lib/install/templates/web/actions.js
 - lib/install/templates/web/application.js
 - lib/install/templates/web/application.json.props
 - lib/install/templates/web/application_visit.js
+- lib/install/templates/web/flash.js
 - lib/install/templates/web/initializer.rb
 - lib/install/templates/web/page_to_page_mapping.js
-- lib/install/templates/web/reducer.js
+- lib/install/templates/web/pages.js
+- lib/install/templates/web/store.js
 - lib/install/web.rb
 - lib/superglue.rb
 - lib/superglue/helpers.rb
@@ -200,9 +187,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.4.6
 signing_key:

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

@@ -1,14 +0,0 @@
-// Example:
-//
-// import {
-//   CLEAR_FORM_ERRORS
-// } from './actions'
-//
-// export function clearFormErrors(pageKey) {
-//   return {
-//     type: CLEAR_FORM_ERRORS,
-//     payload: {
-//       pageKey,
-//     }
-//   }
-// }

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

@@ -1,44 +0,0 @@
-// Example:
-//
-// import {
-//   CLEAR_FORM_ERRORS
-// } from './actions'
-// import produce from "immer"
-//
-// export const applicationPagesReducer = (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
-//   }
-// }
-
-
-// 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.
-export const applicationRootReducer = (state = {}, action) => {
-  switch(action.type) {
-  default:
-    return state
-  }
-}