superglue 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 825363825f0e6cf14431bd47cdc43b6be0dfcfb6723d19004ee99175bd98dda3
-  data.tar.gz: 27a52faf2563be8e0242c2ed68a5e02c531137e03c5e67e5993e06b615139266
+  metadata.gz: e4b39909974d5f15cf6353b2a5748e4e31878b3dee8622d8874cc18395bf684c
+  data.tar.gz: c375f0687470c2afb7de11fb1b566bd87e6a5e51d200faea291f42a7bb7b7b95
 SHA512:
-  metadata.gz: 8dc5c1de22f7d525e82b3e00f49cd774a814f689c8f0e5018e5f1192d694ae036af07b14c162b113e91911bfc918019784863adc7cde2bc9b9786784709d357d
-  data.tar.gz: 5a9618185af23be3406af0153d54af83633cdc0a927337c7cd7d33f257150e6def65471b19c186ffe9d385312f979f9624f61b29c3c4ce9266c8a62820ca6b0c
+  metadata.gz: 4fa8626cc3b719c3df4f0c521e22a7bf7857bce6871c2b43bab714ab1ae019677bb8a854b257aa9a7181b928a399d518a6350f0b3aafcbe3237e3cd58ca4d8ea
+  data.tar.gz: 93798fbd725b53a4353415bc648fc7e8ffb0dffc046b10daa2a436398ea9c6d2e678a4ca0662d9e20ed001b1b5591830c81b982cfc7f6d9e6d69851e589c8ebb

data/README.md

@@ -0,0 +1,32 @@
+<div align="center" style="padding: 30px 0px 20px 0px;">
+  <img src="https://thoughtbot.github.io/superglue/images/superglue.svg" data-origin="images/superglue.svg" alt="Logo" width=250>
+</div>
+
+# Superglue Rails
+Use classic Rails to build rich React Redux applications with **NO APIs** and
+**NO client-side routing**.
+
+This is the officially supported Rails adapter to [Superglue]. This gem will
+add install and scaffold generators to your rails project.
+
+To get started, visit the [documentation] and add this to your Gemfile
+
+  [documentation]: https://thoughtbot.github.io/superglue/
+
+```
+gem 'superglue'
+```
+
+Then run `bundle`
+
+[![Test superglue_rails](https://github.com/thoughtbot/superglue_rails/actions/workflows/build_rails.yml/badge.svg)](https://github.com/thoughtbot/superglue_rails/actions/workflows/build_rails.yml)
+
+## Documentation
+
+Documentation is hosted on [Github pages](https://thoughtbot.github.io/superglue).
+
+## Contributing
+
+Thank you, [contributors]!
+
+  [contributors]: https://github.com/thoughtbot/superglue_rails/graphs/contributors

data/lib/generators/superglue/install/install_generator.rb

@@ -16,6 +16,8 @@ module Superglue
         remove_file "#{app_js_path}/application.js"
 
         use_typescript = options["typescript"]
+        copy_erb_files
+
         if use_typescript
           copy_ts_files
         else
@@ -31,6 +33,9 @@ module Superglue
         say "Adding required member methods to ApplicationRecord"
         add_member_methods
 
+        say "Enabling jsx rendering defaults"
+        insert_jsx_rendering_defaults
+
         say "Installing Superglue and friends"
         run "yarn add react react-dom @reduxjs/toolkit react-redux @thoughtbot/superglue"
 
@@ -43,6 +48,45 @@ module Superglue
 
       private
 
+      def insert_jsx_rendering_defaults
+        inject_into_file "app/controllers/application_controller.rb", after: "class ApplicationController < ActionController::Base\n" do
+          <<-RUBY
+  # Enables Superglue rendering defaults for sensible view directories.
+  #
+  # without `use_jsx_rendering_defaults`:
+  #
+  # ```
+  # app/views/posts/
+  #  - index.jsx
+  #  - index.json.props
+  #  - index.html.erb
+  # ```
+  #
+  # with `use_jsx_rendering_defaults`:
+  #
+  # ```
+  # app/views/posts/
+  #   - index.jsx
+  #   - index.json.props
+  # ```
+  #
+  # before_action :use_jsx_rendering_defaults
+  #
+  #
+  # The html template used when `use_jsx_rendering_defaults` is enabled.
+  # Defaults to "application/superglue".
+  #
+  # superglue_template "application/superglue"
+
+          RUBY
+        end
+      end
+
+      def copy_erb_files
+        say "Copying superglue.html.erb file to app/views/application/"
+        copy_file "#{__dir__}/templates/erb/superglue.html.erb", "app/views/application/superglue.html.erb"
+      end
+
       def copy_ts_files
         say "Copying application.tsx file to #{app_js_path}"
         copy_file "#{__dir__}/templates/ts/application.tsx", "#{app_js_path}/application.tsx"

data/lib/generators/superglue/install/templates/erb/superglue.html.erb

@@ -0,0 +1,5 @@
+<script type="text/javascript">
+  window.SUPERGLUE_INITIAL_PAGE_STATE=<%= render_props %>;<%# erblint:disable ErbSafety %>
+</script>
+
+<div id="app"></div>

data/lib/generators/superglue/install/templates/js/inputs.jsx

@@ -7,14 +7,25 @@
  * There is no style and structured with bare necessities. You should modify
  * these components to fit your design needs.
  */
-import React, { useContext, createContext, useMemo } from "react";
-export const ValidationContext = createContext({});
-export const useErrorKeyValidation = ({ errorKey, }) => {
-    const errors = useContext(ValidationContext);
-    return useMemo(() => {
-        return errors[errorKey];
-    }, [errors, errorKey]);
-};
+import React, { useContext, createContext, useMemo } from 'react'
+export const ValidationContext = createContext({})
+export const useErrorMessage = (errorKey) => {
+  const errors = useContext(ValidationContext)
+  return useMemo(() => {
+    if (!errorKey) {
+      return null
+    }
+    const validationError = errors[errorKey]
+    const hasErrors = errorKey && validationError
+    if (!hasErrors) {
+      return null
+    }
+    const errorMessages = Array.isArray(validationError)
+      ? validationError
+      : [validationError]
+    return errorMessages.join(' ')
+  }, [errors, errorKey])
+}
 /**
  * Extras renders the hidden inputs generated by form_props.
  *
@@ -22,10 +33,12 @@ export const useErrorKeyValidation = ({ errorKey, }) => {
  * utf8, crsf_token, _method
  */
 export const Extras = (hiddenInputAttributes) => {
-    const hiddenProps = Object.values(hiddenInputAttributes);
-    const hiddenInputs = hiddenProps.map((props) => (<input {...props} type="hidden" key={props.name}/>));
-    return <>{hiddenInputs}</>;
-};
+  const hiddenProps = Object.values(hiddenInputAttributes)
+  const hiddenInputs = hiddenProps.map((props) => (
+    <input {...props} type="hidden" key={props.name} />
+  ))
+  return <>{hiddenInputs}</>
+}
 /**
  * A basic form component that supports inline errors.
  *
@@ -33,13 +46,15 @@ export const Extras = (hiddenInputAttributes) => {
  * Rails forms are generated.
  */
 export const Form = ({ extras, validationErrors = {}, children, ...props }) => {
-    return (<form {...props}>
+  return (
+    <form {...props}>
       <ValidationContext.Provider value={validationErrors}>
         <Extras {...extras}></Extras>
         {children}
       </ValidationContext.Provider>
-    </form>);
-};
+    </form>
+  )
+}
 /**
  * An inline error component.
  *
@@ -47,84 +62,110 @@ export const Form = ({ extras, validationErrors = {}, children, ...props }) => {
  * Please modify this to your liking.
  */
 export const FieldError = ({ errorKey }) => {
-    const errors = useContext(ValidationContext);
-    if (!errorKey || !errors) {
-        return null;
-    }
-    const validationError = errors[errorKey];
-    const hasErrors = errorKey && validationError;
-    if (!hasErrors) {
-        return null;
-    }
-    const errorMessages = Array.isArray(validationError)
-        ? validationError
-        : [validationError];
-    return <span>{errorMessages.join(" ")}</span>;
-};
+  const errorMessage = useErrorMessage(errorKey)
+  return <span>{errorMessage}</span>
+}
 /**
  * A Field component.
  *
  * Combines a label, input and a FieldError. Please modify this to your liking.
  */
 export const FieldBase = ({ label, errorKey, children, ...props }) => {
-    return (<>
+  return (
+    <>
       <label htmlFor={props.id}>{label}</label>
-      {children || <input {...props}/>}
-      <FieldError errorKey={errorKey}/>
-    </>);
-};
-export const Checkbox = ({ type: _type, includeHidden, uncheckedValue, errorKey, ...rest }) => {
-    const { name } = rest;
-    return (<FieldBase {...rest} errorKey={errorKey}>
-      {includeHidden && (<input type="hidden" name={name} defaultValue={uncheckedValue} autoComplete="off"/>)}
+      {children || <input {...props} />}
+      <FieldError errorKey={errorKey} />
+    </>
+  )
+}
+export const Checkbox = ({
+  type: _type,
+  includeHidden,
+  uncheckedValue,
+  errorKey,
+  ...rest
+}) => {
+  const { name } = rest
+  return (
+    <FieldBase {...rest} errorKey={errorKey}>
+      {includeHidden && (
+        <input
+          type="hidden"
+          name={name}
+          defaultValue={uncheckedValue}
+          autoComplete="off"
+        />
+      )}
       <input type="checkbox" {...rest}></input>
-    </FieldBase>);
-};
+    </FieldBase>
+  )
+}
 /**
  * A collection checkbox component.
  *
  * Designed to work with a payload form_props's [collection_check_boxes helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#collection-select).
  * Mimics the rails equivalent. Please modify to your liking.
  */
-export const CollectionCheckboxes = ({ includeHidden, collection, label, errorKey, }) => {
-    if (collection.length == 0) {
-        return null;
-    }
-    const checkboxes = collection.map((options) => {
-        return <Checkbox {...options} key={options.id}/>;
-    });
-    const { name } = collection[0];
-    return (<>
-      {includeHidden && (<input type="hidden" name={name} defaultValue={""} autoComplete="off"/>)}
+export const CollectionCheckboxes = ({
+  includeHidden,
+  collection,
+  label,
+  errorKey,
+}) => {
+  if (collection.length == 0) {
+    return null
+  }
+  const checkboxes = collection.map((options) => {
+    return <Checkbox {...options} key={options.id} />
+  })
+  const { name } = collection[0]
+  return (
+    <>
+      {includeHidden && (
+        <input type="hidden" name={name} defaultValue={''} autoComplete="off" />
+      )}
       <label>{label}</label>
       {checkboxes}
-      <FieldError errorKey={errorKey}/>
-    </>);
-};
+      <FieldError errorKey={errorKey} />
+    </>
+  )
+}
 /**
  * A collection radio button component.
  *
  * Designed to work with a payload form_props's [collection_radio_buttons helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#collection-select).
  * Mimics the rails equivalent. Please modify to your liking.
  */
-export const CollectionRadioButtons = ({ includeHidden, collection, label, errorKey, }) => {
-    if (collection.length == 0) {
-        return null;
-    }
-    const radioButtons = collection.map((options) => {
-        return (<div key={options.value}>
-        <input {...options} type="radio"/>
+export const CollectionRadioButtons = ({
+  includeHidden,
+  collection,
+  label,
+  errorKey,
+}) => {
+  if (collection.length == 0) {
+    return null
+  }
+  const radioButtons = collection.map((options) => {
+    return (
+      <div key={options.value}>
+        <input {...options} type="radio" />
         <label htmlFor={options.id}>{options.label}</label>
-      </div>);
-    });
-    const { name } = collection[0];
-    return (<>
-      {includeHidden && (<input type="hidden" name={name} defaultValue={""} autoComplete="off"/>)}
+      </div>
+    )
+  })
+  const { name } = collection[0]
+  return (
+    <>
+      {includeHidden && (
+        <input type="hidden" name={name} defaultValue={''} autoComplete="off" />
+      )}
       <label>{label}</label>
       {radioButtons}
-      <FieldError errorKey={errorKey}/>
-    </>);
-};
+      <FieldError errorKey={errorKey} />
+    </>
+  )
+}
 /**
  * A text field component.
  *
@@ -132,8 +173,8 @@ export const CollectionRadioButtons = ({ includeHidden, collection, label, error
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TextField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="text"/>;
-};
+  return <FieldBase {...rest} type="text" />
+}
 /**
  * A email field component.
  *
@@ -141,8 +182,8 @@ export const TextField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const EmailField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="email"/>;
-};
+  return <FieldBase {...rest} type="email" />
+}
 /**
  * A color field component.
  *
@@ -150,8 +191,8 @@ export const EmailField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const ColorField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="color"/>;
-};
+  return <FieldBase {...rest} type="color" />
+}
 /**
  * A date field component.
  *
@@ -159,8 +200,8 @@ export const ColorField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const DateField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="date"/>;
-};
+  return <FieldBase {...rest} type="date" />
+}
 /**
  * A date field component.
  *
@@ -168,8 +209,8 @@ export const DateField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const DateTimeLocalField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="datetime-local"/>;
-};
+  return <FieldBase {...rest} type="datetime-local" />
+}
 /**
  * A search field component.
  *
@@ -177,8 +218,8 @@ export const DateTimeLocalField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const SearchField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="search"/>;
-};
+  return <FieldBase {...rest} type="search" />
+}
 /**
  * A tel field component.
  *
@@ -186,8 +227,8 @@ export const SearchField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TelField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="tel"/>;
-};
+  return <FieldBase {...rest} type="tel" />
+}
 /**
  * A url field component.
  *
@@ -195,8 +236,8 @@ export const TelField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const UrlField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="url"/>;
-};
+  return <FieldBase {...rest} type="url" />
+}
 /**
  * A month field component.
  *
@@ -204,17 +245,17 @@ export const UrlField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const MonthField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="month"/>;
-};
+  return <FieldBase {...rest} type="month" />
+}
 /**
- * A month field component.
+ * A time field component.
  *
  * Designed to work with a payload form_props's [month_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#date-helpers).
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TimeField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="time"/>;
-};
+  return <FieldBase {...rest} type="time" />
+}
 /**
  * A number field component.
  *
@@ -222,8 +263,8 @@ export const TimeField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const NumberField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="number"/>;
-};
+  return <FieldBase {...rest} type="number" />
+}
 /**
  * A range field component.
  *
@@ -231,8 +272,8 @@ export const NumberField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const RangeField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="range"/>;
-};
+  return <FieldBase {...rest} type="range" />
+}
 /**
  * A password field component.
  *
@@ -240,8 +281,8 @@ export const RangeField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const PasswordField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="password"/>;
-};
+  return <FieldBase {...rest} type="password" />
+}
 /**
  * A select component.
  *
@@ -250,26 +291,46 @@ export const PasswordField = ({ type: _type, ...rest }) => {
  *
  * Please modify to your liking.
  */
-export const Select = ({ includeHidden, name, id, children, options, multiple, type: _type, ...rest }) => {
-    const addHidden = includeHidden && multiple;
-    const optionElements = options.map((item) => {
-        if ("options" in item) {
-            return (<optgroup label={item.label} key={item.label}>
-          {item.options.map((opt) => (<option key={opt.label} {...opt}/>))}
-        </optgroup>);
-        }
-        else {
-            return <option key={item.label} {...item}/>;
-        }
-    });
-    return (<>
-      {addHidden && (<input type="hidden" name={name} value={""} autoComplete="off"/>)}
-      <select name={name} id={id} multiple={multiple} {...rest}>
-        {children}
-        {optionElements}
-      </select>
-    </>);
-};
+export const Select = ({
+  includeHidden,
+  name,
+  id,
+  children,
+  options,
+  label,
+  errorKey,
+  multiple,
+  type: _type,
+  ...rest
+}) => {
+  const addHidden = includeHidden && multiple
+  const optionElements = options.map((item) => {
+    if ('options' in item) {
+      return (
+        <optgroup label={item.label} key={item.label}>
+          {item.options.map((opt) => (
+            <option key={opt.label} {...opt} />
+          ))}
+        </optgroup>
+      )
+    } else {
+      return <option key={item.label} {...item} />
+    }
+  })
+  return (
+    <>
+      {addHidden && (
+        <input type="hidden" name={name} value={''} autoComplete="off" />
+      )}
+      <FieldBase label={label} errorKey={errorKey} id={id}>
+        <select name={name} id={id} multiple={multiple} {...rest}>
+          {children}
+          {optionElements}
+        </select>
+      </FieldBase>
+    </>
+  )
+}
 /**
  * A text area component.
  *
@@ -277,11 +338,13 @@ export const Select = ({ includeHidden, name, id, children, options, multiple, t
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TextArea = ({ type: _type, errorKey, ...rest }) => {
-    const { label } = rest;
-    return (<FieldBase label={label} errorKey={errorKey} id={rest.id}>
-      <textarea {...rest}/>
-    </FieldBase>);
-};
+  const { label } = rest
+  return (
+    <FieldBase label={label} errorKey={errorKey} id={rest.id}>
+      <textarea {...rest} />
+    </FieldBase>
+  )
+}
 /**
  * A file field component.
  *
@@ -289,8 +352,8 @@ export const TextArea = ({ type: _type, errorKey, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const FileField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="file"/>;
-};
+  return <FieldBase {...rest} type="file" />
+}
 /**
  * A SubmitButton component.
  *
@@ -298,5 +361,10 @@ export const FileField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const SubmitButton = ({ type: _type, text, ...rest }) => {
-    return <button {...rest} type="submit"> {text} </button>;
-};
+  return (
+    <button {...rest} type="submit">
+      {' '}
+      {text}{' '}
+    </button>
+  )
+}