superglue 2.0.0.alpha.2 → 2.0.0.alpha.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c623e4cdef9e492b0d0bbf70ff81eaecdf6b87afdd22ff9588ec662c74c5942a
-  data.tar.gz: 85470818c873297c7a119dc0a7370ecedf0ac269082dfef1d663c33b44d695fe
+  metadata.gz: 0a65a2601f089ebb03db5e2c49f580e0e44741e1890ab03b020266bdb7a59e31
+  data.tar.gz: 2055cd1e038925c61f729d601c528d83fb084e250638c11092bc1b66f9dcbd17
 SHA512:
-  metadata.gz: 831982e9a9100f6a335b7d4e8f565facff1e65e6bfd3cb53290aeb905e7c60ed7ea6fe00b2975327f9b9fcb46591c556a4a73b90188634eccfd836145d083fa8
-  data.tar.gz: d69bde09f1ed1d9665230104f61d238e4e30c22c3bf9d676d30c80e01274c2ba9a0dad64cbe3592725fa56dc8b6e8798c90b148c6f373924410c439ea497f25f
+  metadata.gz: 9b413e70eb67e522a693420788645ec18f7bed6595fbc2f7914f931885ca909ec93257be8acee59b44df59fed6902c7fff48546c5f9a464d2ee03f81be79bbec
+  data.tar.gz: c929885777b7393d32bdb26452aa6df819ed222b27731f84cfdd5fdab322453c51e9a23b3a0242e9dda88d5610b62ccdda852d6287ea265a88e2cc12b51d19ee

data/app/channels/superglue/streams/broadcasts.rb

@@ -1,3 +1,6 @@
+# This file was ported from the amazing folks at turbo-rails
+# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
+
 module Superglue::Streams::Broadcasts
   def broadcast_save_to(*streamables, **opts)
     broadcast_action_to(*streamables, action: :save, **opts)

data/app/channels/superglue/streams/stream_name.rb

@@ -1,3 +1,6 @@
+# This file was ported from the amazing folks at turbo-rails
+# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
+
 module Superglue::Streams::StreamName
   def verified_stream_name(signed_stream_name)
     Superglue.signed_stream_verifier.verified signed_stream_name

data/app/channels/superglue/streams_channel.rb

@@ -1,3 +1,6 @@
+# This file was ported from the amazing folks at turbo-rails
+# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
+
 class Superglue::StreamsChannel < ActionCable::Channel::Base
   extend Superglue::Streams::StreamName
   extend Superglue::Streams::Broadcasts

data/app/controllers/concerns/superglue/request_id_tracking.rb

@@ -1,3 +1,6 @@
+# This file was ported from the amazing folks at turbo-rails
+# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
+
 module Superglue::RequestIdTracking
   extend ActiveSupport::Concern
 

data/app/helpers/superglue/streams_helper.rb

@@ -1,3 +1,6 @@
+# This file was ported from the amazing folks at turbo-rails
+# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
+
 module Superglue::StreamsHelper
   def stream_from_props(*streamables, **attributes)
     raise ArgumentError, "streamables can't be blank" unless streamables.any?(&:present?)
@@ -33,7 +36,7 @@ module Superglue::StreamsHelper
     broadcast_action_props(action: "append", model:, target:, options:, **rendering)
   end
 
-  def broadcast_save_props(model: nil, partial: nil, target: nil, options: {}, **rendering)
+  def broadcast_save_props(model: nil, target: nil, options: {}, **rendering)
     if model && !target
       target = fragment_id(model)
     end

data/app/jobs/superglue/streams/action_broadcast_job.rb

@@ -1,3 +1,6 @@
+# This file was ported from the amazing folks at turbo-rails
+# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
+
 class Superglue::Streams::ActionBroadcastJob < ActiveJob::Base
   discard_on ActiveJob::DeserializationError
 

data/app/jobs/superglue/streams/broadcast_stream_job.rb

@@ -1,3 +1,6 @@
+# This file was ported from the amazing folks at turbo-rails
+# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
+
 class Superglue::Streams::BroadcastStreamJob < ActiveJob::Base
   discard_on ActiveJob::DeserializationError
 

data/app/models/concerns/superglue/broadcastable.rb

@@ -1,3 +1,6 @@
+# This file was ported from the amazing folks at turbo-rails
+# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
+
 module Superglue::Broadcastable
   extend ActiveSupport::Concern
 
@@ -129,7 +132,7 @@ module Superglue::Broadcastable
   def broadcast_target_default
     self.class.broadcast_target_default
   end
-  
+
   private
 
   def extract_options_and_add_target(rendering = {}, target: broadcast_target_default)

data/app/models/superglue/debouncer.rb

@@ -1,3 +1,6 @@
+# This file was ported from the amazing folks at turbo-rails
+# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
+
 class Superglue::Debouncer
   attr_reader :delay, :scheduled_task
 

data/app/models/superglue/thread_debouncer.rb

@@ -1,3 +1,6 @@
+# This file was ported from the amazing folks at turbo-rails
+# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
+
 class Superglue::ThreadDebouncer
   delegate :wait, to: :debouncer
 

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

@@ -40,10 +40,10 @@ module Superglue
         insert_jsx_rendering_defaults
 
         say "Installing Superglue and friends"
-        run "yarn add react react-dom @reduxjs/toolkit react-redux @thoughtbot/superglue@2.0.0-alpha.2"
+        run "yarn add react react-dom @reduxjs/toolkit react-redux @thoughtbot/superglue@2.0.0-alpha.8"
 
         if use_typescript
-          run "yarn add -D @types/react-dom @types/react @types/node @thoughtbot/candy_wrapper"
+          run "yarn add -D @types/react-dom @types/react @types/node @thoughtbot/candy_wrapper@0.0.4"
         end
 
         say "Superglue is Installed! 🎉", :green

data/lib/generators/superglue/install/templates/application.json.props

@@ -15,7 +15,10 @@ end
 
 if path
   json.action 'graft'
-  json.path params[:props_at]
+  json.path json.found_path!
+  json.fragmentContext json.fragment_context!
+else
+  json.action 'savePage'
 end
 
 json.restoreStrategy 'fromCacheAndRevisitInBackground'

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

@@ -5,7 +5,7 @@ import { buildVisitAndRemote } from "./application_visit"
 import { pageIdentifierToPageComponent } from "./page_to_page_mapping"
 import { store } from "./store"
 
-if (typeof window !== "undefined") {
+if (typeof window !== "undefined" && window.SUPERGLUE_INITIAL_PAGE_STATE) {
   document.addEventListener("DOMContentLoaded", function() {
     const appEl = document.getElementById("app")
     const location = window.location

data/lib/generators/superglue/install/templates/js/application_visit.js

@@ -9,7 +9,7 @@ import { visit, remote } from "@thoughtbot/superglue/action_creators"
  * bar. This file also adds support for data-sg-remote.
  */
 export const buildVisitAndRemote = (ref, store) => {
-  const appRemote = (path, { dataset, ...options }) => {
+  const appRemote = (path, { dataset, ...options } = {}) => {
     /**
      * You can make use of `dataset` to add custom UJS options.
      * If you are implementing a progress bar, you can selectively

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

@@ -7,7 +7,7 @@
  * 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'
+import React, { createContext, useContext, useMemo } from 'react'
 export const ValidationContext = createContext({})
 export const useErrorMessage = (errorKey) => {
   const errors = useContext(ValidationContext)

data/lib/generators/superglue/install/templates/js/store.js

@@ -8,7 +8,7 @@ import {
   rootReducer
 } from "@thoughtbot/superglue"
 
-const { pages, superglue } = rootReducer
+const { pages, superglue, fragments } = rootReducer
 
 export const store = configureStore({
   devTools: process.env.NODE_ENV !== "production",
@@ -21,7 +21,8 @@ export const store = configureStore({
   reducer: {
     superglue,
     pages,
-    flash: flashSlice.reducer
+    flash: flashSlice.reducer,
+    fragments,
   }
 })
 

data/lib/generators/superglue/install/templates/ts/application.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { Application, VisitResponse } from '@thoughtbot/superglue';
-import { buildVisitAndRemote } from './application_visit';
-import { pageIdentifierToPageComponent } from './page_to_page_mapping';
-import { store } from './store'
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { Application, SaveResponse } from "@thoughtbot/superglue";
+import { buildVisitAndRemote } from "./application_visit";
+import { pageIdentifierToPageComponent } from "./page_to_page_mapping";
+import { store } from "./store";
 
 declare global {
-  interface Window { SUPERGLUE_INITIAL_PAGE_STATE: VisitResponse; }
+  interface Window {
+    SUPERGLUE_INITIAL_PAGE_STATE: SaveResponse;
+  }
 }
 
-if (typeof window !== "undefined") {
+if (typeof window !== "undefined" && window.SUPERGLUE_INITIAL_PAGE_STATE) {
   document.addEventListener("DOMContentLoaded", function () {
     const appEl = document.getElementById("app");
     const location = window.location;
@@ -37,4 +39,3 @@ if (typeof window !== "undefined") {
     }
   });
 }
-

data/lib/generators/superglue/install/templates/ts/application_visit.ts

@@ -18,7 +18,7 @@ export const buildVisitAndRemote: BuildVisitAndRemote = (
   ref,
   store: SuperglueStore
 ) => {
-  const appRemote: ApplicationRemote = (path, { dataset, ...options }) => {
+  const appRemote: ApplicationRemote = (path, { dataset, ...options } = {}) => {
     /**
      * You can make use of `dataset` to add custom UJS options.
      * If you are implementing a progress bar, you can selectively

data/lib/generators/superglue/install/templates/ts/inputs.tsx

@@ -7,59 +7,86 @@
  * There is no style and structured with bare necessities. You should modify
  * these components to fit your design needs.
  */
+import React, { createContext, ReactNode, useContext, useMemo } from "react";
+
+export type {
+  CheckboxField as RailsCheckboxFieldProps,
+  CollectionCheckboxesField as RailsCollectionCheckboxesFieldProps,
+  CollectionRadioButtonsField as RailsCollectionRadioButtonsFieldProps,
+  ColorField as RailsColorFieldProps,
+  DateField as RailsDateFieldProps,
+  DateTimeLocalField as RailsDateTimeLocalFieldProps,
+  EmailField as RailsEmailFieldProps,
+  FileField as RailsFileFieldProps,
+  HiddenField as RailsHiddenFieldProps,
+  MonthField as RailsMonthFieldProps,
+  NumberField as RailsNumberFieldProps,
+  PasswordField as RailsPasswordFieldProps,
+  RangeField as RailsRangeFieldProps,
+  SearchField as RailsSearchFieldProps,
+  Select as RailsSelectProps,
+  SubmitProps as RailsSubmitButtonProps,
+  TelField as RailsTelFieldProps,
+  TextArea as RailsTextAreaProps,
+  TextField as RailsTextFieldProps,
+  TimeField as RailsTimeFieldProps,
+  UrlField as RailsUrlFieldProps,
+  HTMLFormProps as RailsHTMLFormProps,
+  ValidationErrors,
+} from "@thoughtbot/candy_wrapper";
 
-import React, { ReactNode, useContext, createContext, useMemo } from 'react'
 import {
   CheckboxField as RailsCheckboxField,
   CollectionCheckboxesField as RailsCollectionCheckboxesField,
-  HiddenField as RailsHiddenField,
   CollectionRadioButtonsField as RailsCollectionRadioButtonsField,
   ColorField as RailsColorField,
   DateField as RailsDateField,
   DateTimeLocalField as RailsDateTimeLocalField,
   EmailField as RailsEmailField,
+  FileField as RailsFileField,
+  HiddenField as RailsHiddenField,
   MonthField as RailsMonthField,
   NumberField as RailsNumberField,
   PasswordField as RailsPasswordField,
   RangeField as RailsRangeField,
   SearchField as RailsSearchField,
   Select as RailsSelect,
+  SubmitProps as RailsSubmitButton,
   TelField as RailsTelField,
-  FileField as RailsFileField,
+  TextArea as RailsTextArea,
   TextField as RailsTextField,
   TimeField as RailsTimeField,
   UrlField as RailsUrlField,
-  TextArea as RailsTextArea,
+  HTMLFormProps as RailsHTMLFormProps,
   ValidationErrors,
-  SubmitProps as RailsSubmitButton,
-} from '@thoughtbot/candy_wrapper'
+} from "@thoughtbot/candy_wrapper";
 
-export const ValidationContext = createContext<ValidationErrors>({})
+export const ValidationContext = createContext<ValidationErrors>({});
 
 export const useErrorMessage = (errorKey?: string) => {
-  const errors = useContext(ValidationContext)
+  const errors = useContext(ValidationContext);
 
   return useMemo(() => {
     if (!errorKey) {
-      return null
+      return null;
     }
 
-    const validationError = errors[errorKey]
-    const hasErrors = errorKey && validationError
+    const validationError = errors[errorKey];
+    const hasErrors = errorKey && validationError;
 
     if (!hasErrors) {
-      return null
+      return null;
     }
 
     const errorMessages = Array.isArray(validationError)
       ? validationError
-      : [validationError]
+      : [validationError];
 
-    return errorMessages.join(' ')
-  }, [errors, errorKey])
-}
+    return errorMessages.join(" ");
+  }, [errors, errorKey]);
+};
 
-export type ExtrasProps = Record<string, RailsHiddenField>
+export type ExtrasProps = Record<string, RailsHiddenField>;
 
 /**
  * Extras renders the hidden inputs generated by form_props.
@@ -68,24 +95,24 @@ export type ExtrasProps = Record<string, RailsHiddenField>
  * utf8, crsf_token, _method
  */
 export const Extras = (hiddenInputAttributes: ExtrasProps) => {
-  const hiddenProps = Object.values(hiddenInputAttributes)
+  const hiddenProps = Object.values(hiddenInputAttributes);
   const hiddenInputs = hiddenProps.map((props: RailsHiddenField) => (
     <input {...props} type="hidden" key={props.name} />
-  ))
+  ));
 
-  return <>{hiddenInputs}</>
-}
+  return <>{hiddenInputs}</>;
+};
 
-export interface FormProps<T = {}> {
-  extras: ExtrasProps
-  inputs: T
-  form: React.FormHTMLAttributes<HTMLFormElement>
+export interface FormProps<T = object> {
+  extras: ExtrasProps;
+  inputs: T;
+  form: RailsHTMLFormProps;
 }
 
 type FormElementProps = React.FormHTMLAttributes<HTMLFormElement> & {
-  extras: ExtrasProps
-  validationErrors?: ValidationErrors
-}
+  extras: ExtrasProps;
+  validationErrors?: ValidationErrors;
+};
 /**
  * A basic form component that supports inline errors.
  *
@@ -105,8 +132,8 @@ export const Form = ({
         {children}
       </ValidationContext.Provider>
     </form>
-  )
-}
+  );
+};
 
 /**
  * An inline error component.
@@ -115,17 +142,17 @@ export const Form = ({
  * Please modify this to your liking.
  */
 export const FieldError = ({ errorKey }: { errorKey: string | undefined }) => {
-  const errorMessage = useErrorMessage(errorKey)
+  const errorMessage = useErrorMessage(errorKey);
 
-  return <span>{errorMessage}</span>
-}
+  return <span>{errorMessage}</span>;
+};
 
 export type FieldBaseProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  id?: string
-  label: string
-  errorKey?: string
-  children?: ReactNode
-}
+  id?: string;
+  label: string;
+  errorKey?: string;
+  children?: ReactNode;
+};
 
 /**
  * A Field component.
@@ -144,13 +171,13 @@ export const FieldBase = ({
       {children || <input {...props} />}
       <FieldError errorKey={errorKey} />
     </>
-  )
-}
+  );
+};
 
 type InputProps = {
-  label: string
-  errorKey?: string
-}
+  label: string;
+  errorKey?: string;
+};
 
 /**
  * A checkbox component.
@@ -158,7 +185,7 @@ type InputProps = {
  * Designed to work with a payload form_props's [checkbox helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#checkbox-helper).
  * Mimics the rails equivalent. Please modify to your liking.
  */
-type CheckboxProps = RailsCheckboxField & InputProps
+type CheckboxProps = RailsCheckboxField & InputProps;
 export const Checkbox = ({
   type: _type,
   includeHidden,
@@ -166,7 +193,7 @@ export const Checkbox = ({
   errorKey,
   ...rest
 }: CheckboxProps) => {
-  const { name } = rest
+  const { name } = rest;
   return (
     <FieldBase {...rest} errorKey={errorKey}>
       {includeHidden && (
@@ -179,11 +206,11 @@ export const Checkbox = ({
       )}
       <input type="checkbox" {...rest}></input>
     </FieldBase>
-  )
-}
+  );
+};
 
 type CollectionCheckboxesFieldProps = RailsCollectionCheckboxesField &
-  InputProps
+  InputProps;
 
 /**
  * A collection checkbox component.
@@ -198,29 +225,29 @@ export const CollectionCheckboxes = ({
   errorKey,
 }: CollectionCheckboxesFieldProps) => {
   if (collection.length == 0) {
-    return null
+    return null;
   }
 
   const checkboxes = collection.map((options) => {
-    return <Checkbox {...options} key={options.id} />
-  })
+    return <Checkbox {...options} key={options.id} />;
+  });
 
-  const { name } = collection[0]
+  const { name } = collection[0];
 
   return (
     <>
       {includeHidden && (
-        <input type="hidden" name={name} defaultValue={''} autoComplete="off" />
+        <input type="hidden" name={name} defaultValue={""} autoComplete="off" />
       )}
       <label>{label}</label>
       {checkboxes}
       <FieldError errorKey={errorKey} />
     </>
-  )
-}
+  );
+};
 
 type CollectionRadioButtonsFieldProps = RailsCollectionRadioButtonsField &
-  InputProps
+  InputProps;
 
 /**
  * A collection radio button component.
@@ -235,7 +262,7 @@ export const CollectionRadioButtons = ({
   errorKey,
 }: CollectionRadioButtonsFieldProps) => {
   if (collection.length == 0) {
-    return null
+    return null;
   }
 
   const radioButtons = collection.map((options) => {
@@ -244,26 +271,26 @@ export const CollectionRadioButtons = ({
         <input {...options} type="radio" />
         <label htmlFor={options.id}>{options.label}</label>
       </div>
-    )
-  })
+    );
+  });
 
-  const { name } = collection[0]
+  const { name } = collection[0];
 
   return (
     <>
       {includeHidden && (
-        <input type="hidden" name={name} defaultValue={''} autoComplete="off" />
+        <input type="hidden" name={name} defaultValue={""} autoComplete="off" />
       )}
       <label>{label}</label>
       {radioButtons}
       <FieldError errorKey={errorKey} />
     </>
-  )
-}
+  );
+};
 
 export type TextFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsTextField &
-  InputProps
+  InputProps;
 
 /**
  * A text field component.
@@ -272,12 +299,12 @@ export type TextFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TextField = ({ type: _type, ...rest }: TextFieldProps) => {
-  return <FieldBase {...rest} type="text" />
-}
+  return <FieldBase {...rest} type="text" />;
+};
 
 export type EmailFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsEmailField &
-  InputProps
+  InputProps;
 
 /**
  * A email field component.
@@ -286,12 +313,12 @@ export type EmailFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const EmailField = ({ type: _type, ...rest }: EmailFieldProps) => {
-  return <FieldBase {...rest} type="email" />
-}
+  return <FieldBase {...rest} type="email" />;
+};
 
 export type ColorFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsColorField &
-  InputProps
+  InputProps;
 
 /**
  * A color field component.
@@ -300,12 +327,12 @@ export type ColorFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const ColorField = ({ type: _type, ...rest }: ColorFieldProps) => {
-  return <FieldBase {...rest} type="color" />
-}
+  return <FieldBase {...rest} type="color" />;
+};
 
 export type DateFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsDateField &
-  InputProps
+  InputProps;
 
 /**
  * A date field component.
@@ -314,13 +341,13 @@ export type DateFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const DateField = ({ type: _type, ...rest }: DateFieldProps) => {
-  return <FieldBase {...rest} type="date" />
-}
+  return <FieldBase {...rest} type="date" />;
+};
 
 export type DateTimeLocalFieldProps =
   React.InputHTMLAttributes<HTMLInputElement> &
     RailsDateTimeLocalField &
-    InputProps
+    InputProps;
 
 /**
  * A date field component.
@@ -332,12 +359,12 @@ export const DateTimeLocalField = ({
   type: _type,
   ...rest
 }: DateTimeLocalFieldProps) => {
-  return <FieldBase {...rest} type="datetime-local" />
-}
+  return <FieldBase {...rest} type="datetime-local" />;
+};
 
 export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsSearchField &
-  InputProps
+  InputProps;
 
 /**
  * A search field component.
@@ -346,12 +373,12 @@ export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const SearchField = ({ type: _type, ...rest }: SearchFieldProps) => {
-  return <FieldBase {...rest} type="search" />
-}
+  return <FieldBase {...rest} type="search" />;
+};
 
 export type TelFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsTelField &
-  InputProps
+  InputProps;
 
 /**
  * A tel field component.
@@ -360,12 +387,12 @@ export type TelFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TelField = ({ type: _type, ...rest }: TelFieldProps) => {
-  return <FieldBase {...rest} type="tel" />
-}
+  return <FieldBase {...rest} type="tel" />;
+};
 
 export type UrlFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsUrlField &
-  InputProps
+  InputProps;
 
 /**
  * A url field component.
@@ -374,12 +401,12 @@ export type UrlFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const UrlField = ({ type: _type, ...rest }: UrlFieldProps) => {
-  return <FieldBase {...rest} type="url" />
-}
+  return <FieldBase {...rest} type="url" />;
+};
 
 export type MonthFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsMonthField &
-  InputProps
+  InputProps;
 
 /**
  * A month field component.
@@ -388,12 +415,12 @@ export type MonthFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const MonthField = ({ type: _type, ...rest }: MonthFieldProps) => {
-  return <FieldBase {...rest} type="month" />
-}
+  return <FieldBase {...rest} type="month" />;
+};
 
 export type TimeFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsTimeField &
-  InputProps
+  InputProps;
 
 /**
  * A time field component.
@@ -402,12 +429,12 @@ export type TimeFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TimeField = ({ type: _type, ...rest }: TimeFieldProps) => {
-  return <FieldBase {...rest} type="time" />
-}
+  return <FieldBase {...rest} type="time" />;
+};
 
 export type NumberFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsNumberField &
-  InputProps
+  InputProps;
 /**
  * A number field component.
  *
@@ -415,12 +442,12 @@ export type NumberFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const NumberField = ({ type: _type, ...rest }: NumberFieldProps) => {
-  return <FieldBase {...rest} type="number" />
-}
+  return <FieldBase {...rest} type="number" />;
+};
 
 export type RangeFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsRangeField &
-  InputProps
+  InputProps;
 /**
  * A range field component.
  *
@@ -428,12 +455,12 @@ export type RangeFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const RangeField = ({ type: _type, ...rest }: RangeFieldProps) => {
-  return <FieldBase {...rest} type="range" />
-}
+  return <FieldBase {...rest} type="range" />;
+};
 
 export type PasswordFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsPasswordField &
-  InputProps
+  InputProps;
 /**
  * A password field component.
  *
@@ -441,12 +468,12 @@ export type PasswordFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const PasswordField = ({ type: _type, ...rest }: PasswordFieldProps) => {
-  return <FieldBase {...rest} type="password" />
-}
+  return <FieldBase {...rest} type="password" />;
+};
 
 export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> &
   RailsSelect &
-  InputProps
+  InputProps;
 /**
  * A select component.
  *
@@ -467,26 +494,26 @@ export const Select = ({
   type: _type,
   ...rest
 }: SelectProps) => {
-  const addHidden = includeHidden && multiple
+  const addHidden = includeHidden && multiple;
 
   const optionElements = options.map((item) => {
-    if ('options' in 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 <option key={item.label} {...item} />;
     }
-  })
+  });
 
   return (
     <>
       {addHidden && (
-        <input type="hidden" name={name} value={''} autoComplete="off" />
+        <input type="hidden" name={name} value={""} autoComplete="off" />
       )}
       <FieldBase label={label} errorKey={errorKey} id={id}>
         <select name={name} id={id} multiple={multiple} {...rest}>
@@ -495,12 +522,12 @@ export const Select = ({
         </select>
       </FieldBase>
     </>
-  )
-}
+  );
+};
 
 export type TextAreaProps = React.InputHTMLAttributes<HTMLTextAreaElement> &
   RailsTextArea &
-  InputProps
+  InputProps;
 /**
  * A text area component.
  *
@@ -508,18 +535,18 @@ export type TextAreaProps = React.InputHTMLAttributes<HTMLTextAreaElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TextArea = ({ type: _type, errorKey, ...rest }: TextAreaProps) => {
-  const { label } = rest
+  const { label } = rest;
 
   return (
     <FieldBase label={label} errorKey={errorKey} id={rest.id}>
       <textarea {...rest} />
     </FieldBase>
-  )
-}
+  );
+};
 
 export type FileFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsFileField &
-  InputProps
+  InputProps;
 
 /**
  * A file field component.
@@ -528,11 +555,11 @@ export type FileFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const FileField = ({ type: _type, ...rest }: FileFieldProps) => {
-  return <FieldBase {...rest} type="file" />
-}
+  return <FieldBase {...rest} type="file" />;
+};
 
 export type SubmitButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
-  RailsSubmitButton
+  RailsSubmitButton;
 
 /**
  * A SubmitButton component.
@@ -547,8 +574,8 @@ export const SubmitButton = ({
 }: SubmitButtonProps) => {
   return (
     <button {...rest} type="submit">
-      {' '}
-      {text}{' '}
+      {" "}
+      {text}{" "}
     </button>
-  )
-}
+  );
+};

data/lib/generators/superglue/install/templates/ts/store.ts

@@ -8,7 +8,7 @@ import {
   rootReducer,
 } from "@thoughtbot/superglue";
 
-const { pages, superglue } = rootReducer;
+const { pages, superglue, fragments } = rootReducer;
 
 export const store = configureStore({
   devTools: process.env.NODE_ENV !== "production",
@@ -22,6 +22,7 @@ export const store = configureStore({
     superglue,
     pages,
     flash: flashSlice.reducer,
+    fragments,
   },
 });
 

data/lib/generators/superglue/view_collection/templates/ts/edit.tsx

@@ -5,10 +5,10 @@ import {
   Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
-  <%= js_component(attr)%>Props,
+  Rails<%= js_component(attr)%>Props,
   <%- end -%>
   SubmitButton,
-  SubmitButtonProps
+  RailsSubmitButtonProps
 } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 import { useAppSelector } from '@javascript/store'
@@ -18,9 +18,9 @@ type ContentProps = {
   <%= js_plural_table_name %>Path: string,
   <%= js_singular_table_name %>Form: FormProps<{
     <%- attributes.each do |attr| -%>
-    <%= attr.column_name.camelize(:lower)%>: <%= js_component(attr)%>Props
+    <%= attr.column_name.camelize(:lower)%>: Rails<%= js_component(attr)%>Props
     <%- end -%>
-    submit: SubmitButtonProps
+    submit: RailsSubmitButtonProps
   }>
 }
 

data/lib/generators/superglue/view_collection/templates/ts/new.tsx

@@ -5,10 +5,10 @@ import {
   Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
-  <%= js_component(attr)%>Props,
+  Rails<%= js_component(attr)%>Props,
   <%- end -%>
   SubmitButton,
-  SubmitButtonProps
+  RailsSubmitButtonProps
 } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 import { useAppSelector } from '@javascript/store'
@@ -17,9 +17,9 @@ type ContentProps = {
   <%= js_plural_table_name %>Path: string
   <%= js_singular_table_name %>Form: FormProps<{
     <%- attributes.each do |attr| -%>
-    <%= attr.column_name.camelize(:lower)%>: <%= js_component(attr)%>Props
+    <%= attr.column_name.camelize(:lower)%>: <%= Railsjs_component(attr)%>Props
     <%- end -%>
-    submit: SubmitButtonProps
+    submit: RailsSubmitButtonProps
   }>
 }
 

data/lib/superglue/rendering.rb

@@ -58,7 +58,12 @@ module Superglue
     end
 
     def _ensure_react_page!(template, prefixes)
-      lookup_context.find(template, prefixes, false, [], formats: [], handlers: [], variants: [], locale: [])
+      found_template = lookup_context.find(template, prefixes, false, [], formats: [], handlers: [], variants: [], locale: [])
+      ## This variable was created for props_template to pick up
+      @_active_template_virtual_path = found_template.virtual_path
+      found_template
+    rescue ActionView::MissingTemplate => e
+      raise ActionView::MissingTemplate.new(e.paths, e.path, e.prefixes, e.partial, "extension JSX or TSX")
     end
 
     def default_render

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: superglue
 version: !ruby/object:Gem::Version
-  version: 2.0.0.alpha.2
+  version: 2.0.0.alpha.9
 platform: ruby
 authors:
 - Johny Ho
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-11 00:00:00.000000000 Z
+date: 2025-09-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack