superglue 0.54.0 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a7defe951c632a4f1f2493ad92f3ca691124986e4d6c94d718791489e1cf1ad
-  data.tar.gz: 2be2e0b8422d9f9c8c2c6f0a7e2fb2ec3cf77cd1facb1e50f0a36034236274fe
+  metadata.gz: 8e9624774c0133d0a9d8aac0d8b5d47bbb95862eea0bb1a26ffe3ce373c5e922
+  data.tar.gz: 8c69fd808df13768c9036981ca27d2a0b24eb9ce8ab8d890c88b666cc9bd5798
 SHA512:
-  metadata.gz: 35131fe314207a550d8921b1f93b37fcac0ada8534940ace2711d2465f741c6151d05f7fd190f72594d36877f265d3a72ba0540cc71d5757075959c5240ff374
-  data.tar.gz: c207f98aae2d03e1ce5f44fe46194c363762fde5e7113eea1907cc05727d94c5236a6e51633489f7d4b98665a3674d76a9bc594cb30e3e7eb12b4c1cef738c70
+  metadata.gz: 17522e020054291483b60953d3fa31e60d6b95de4316ce7469ed71e7f397fa15b07533051b4a4266d5263313a947e7b3eb82621d1d0f8dd45088b9db77295cdf
+  data.tar.gz: 97e27d5f9330ac515cd1636af3c9974584476a324d142573176187dd3cf18a7e6db696cec11ba473f8b5f7fc3d8849fa9fbc49d14f359ef9373d5ec75b763d56

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

@@ -0,0 +1,119 @@
+require "rails/generators/named_base"
+require "rails/generators/resource_helpers"
+
+module Superglue
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("../templates", __FILE__)
+
+      class_option :typescript,
+        type: :boolean,
+        required: false,
+        default: false,
+        desc: "Use typescript"
+
+      def create_files
+        remove_file "#{app_js_path}/application.js"
+
+        use_typescript = options["typescript"]
+        if use_typescript
+          copy_ts_files
+        else
+          copy_js_files
+        end
+
+        say "Copying Superglue initializer"
+        copy_file "#{__dir__}/templates/initializer.rb", "config/initializers/superglue.rb"
+
+        say "Copying application.json.props"
+        copy_file "#{__dir__}/templates/application.json.props", "app/views/layouts/application.json.props"
+
+        say "Adding required member methods to ApplicationRecord"
+        add_member_methods
+
+        say "Installing Superglue and friends"
+        run "yarn add react react-dom @reduxjs/toolkit react-redux @thoughtbot/superglue"
+
+        if use_typescript
+          run "yarn add -D @types/react-dom @types/react @types/node @thoughtbot/candy_wrapper"
+        end
+
+        say "Superglue is Installed! 🎉", :green
+      end
+
+      private
+
+      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"
+
+        say "Copying page_to_page_mapping.ts file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/page_to_page_mapping.ts", "#{app_js_path}/page_to_page_mapping.ts"
+
+        say "Copying flash.ts file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/flash.ts", "#{app_js_path}/slices/flash.ts"
+
+        say "Copying store.ts file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/store.ts", "#{app_js_path}/store.ts"
+
+        say "Copying application_visit.ts file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/application_visit.ts", "#{app_js_path}/application_visit.ts"
+
+        say "Copying components to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/inputs.tsx", "#{app_js_path}/components/Inputs.tsx"
+        copy_file "#{__dir__}/templates/ts/layout.tsx", "#{app_js_path}/components/Layout.tsx"
+        copy_file "#{__dir__}/templates/ts/components.ts", "#{app_js_path}/components/index.ts"
+
+        say "Copying tsconfig.json file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/tsconfig.json", "tsconfig.json"
+      end
+
+      def copy_js_files
+        say "Copying application.js file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/application.jsx", "#{app_js_path}/application.jsx"
+
+        say "Copying page_to_page_mapping.js file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/page_to_page_mapping.js", "#{app_js_path}/page_to_page_mapping.js"
+
+        say "Copying flash.js file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/flash.js", "#{app_js_path}/slices/flash.js"
+
+        say "Copying store.js file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/store.js", "#{app_js_path}/store.js"
+
+        say "Copying application_visit.js file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/application_visit.js", "#{app_js_path}/application_visit.js"
+
+        say "Copying components to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/inputs.jsx", "#{app_js_path}/components/Inputs.jsx"
+        copy_file "#{__dir__}/templates/js/layout.jsx", "#{app_js_path}/components/Layout.jsx"
+        copy_file "#{__dir__}/templates/js/components.js", "#{app_js_path}/components/index.js"
+
+        say "Copying jsconfig.json file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/jsconfig.json", "jsconfig.json"
+      end
+
+      def add_member_methods
+        inject_into_file "app/models/application_record.rb", after: "class ApplicationRecord < ActiveRecord::Base\n" do
+          <<-RUBY
+  # This enables digging by index when used with props_template
+  # see https://thoughtbot.github.io/superglue/digging/#index-based-selection
+  def self.member_at(index)
+    offset(index).limit(1).first
+  end
+
+  # This enables digging by attribute when used with props_template
+  # see https://thoughtbot.github.io/superglue/digging/#attribute-based-selection
+  def self.member_by(attr, value)
+    find_by(Hash[attr, value])
+  end
+          RUBY
+        end
+      end
+
+      def app_js_path
+        "app/javascript/"
+      end
+    end
+  end
+end

data/lib/{install/templates/web → generators/superglue/install/templates}/application.json.props

@@ -1,6 +1,6 @@
-path = request.format.json? ? param_to_search_path(params[:props_at]) : nil
+path = request.format.json? ? param_to_dig_path(params[:props_at]) : nil
 
-json.data(search: path) do
+json.data(dig: path) do
   yield json
 end
 

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

@@ -0,0 +1,35 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+import { Application } from "@thoughtbot/superglue"
+import { buildVisitAndRemote } from "./application_visit"
+import { pageIdentifierToPageComponent } from "./page_to_page_mapping"
+import { store } from "./store"
+
+if (typeof window !== "undefined") {
+  document.addEventListener("DOMContentLoaded", function() {
+    const appEl = document.getElementById("app")
+    const location = window.location
+
+    if (appEl) {
+      const root = createRoot(appEl)
+      root.render(
+        <Application
+          // 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}
+          // Callback used to setup visit and remote
+          buildVisitAndRemote={buildVisitAndRemote}
+          // Callback used to setup the store
+          store={store}
+          // Mapping between the page identifier to page component
+          mapping={pageIdentifierToPageComponent}
+        />
+      )
+    }
+  })
+}

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

@@ -0,0 +1,113 @@
+import { visit, remote } from "@thoughtbot/superglue/action_creators"
+
+/**
+ * This function returns a wrapped visit and remote that will be used by UJS,
+ * the Navigation component, and passed to your page components through the
+ * NavigationContext.
+ *
+ * You can customize both functions to your liking. For example, for a progress
+ * bar. This file also adds support for data-sg-remote.
+ */
+export const buildVisitAndRemote = (ref, store) => {
+  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
+     * hide it for some links. For example:
+     *
+     * ```
+     * <a href="/posts?props_at=data.header" data-sg-remote data-sg-hide-progress>
+     *   Click me
+     * </a>
+     * ```
+     *
+     * This would be available as `sgHideProgress` on the dataset
+     */
+    return store.dispatch(remote(path, options))
+  }
+
+  const appVisit = (path, { dataset, ...options } = {}) => {
+    /**
+     * Do something before we make a request.
+     * e.g, show a [progress bar](https://thoughtbot.github.io/superglue/recipes/progress-bar/).
+     *
+     * Hint: you can access the current pageKey
+     * via `store.getState().superglue.currentPageKey`
+     */
+    return store
+      .dispatch(visit(path, options))
+      .then(meta => {
+        /**
+         * The assets fingerprints changed, instead of transitioning
+         * just go to the URL directly to retrieve new assets
+         */
+        if (meta.needsRefresh) {
+          window.location.href = meta.pageKey
+          return meta
+        }
+
+        /**
+         * Your first expanded UJS option, `data-sg-replace`
+         *
+         * This option overrides the `navigationAction` to allow a link click or
+         * a form submission to replace history instead of the usual push.
+         */
+        const navigatonAction = !!dataset?.sgReplace
+          ? "replace"
+          : meta.navigationAction
+        ref.current?.navigateTo(meta.pageKey, {
+          action: navigatonAction
+        })
+
+        /**
+         * Return the meta object, it's used for scroll restoration when
+         * handling the back button. You can skip returning, but Superglue
+         * will warn you about scroll restoration.
+         */
+        return meta
+      })
+      .finally(() => {
+        /**
+         * Do something after a request.
+         *
+         * This is where you hide a progress bar.
+         */
+      })
+      .catch(err => {
+        const response = err.response
+
+        if (!response) {
+          /**
+           * This is for errors that are NOT from a HTTP request.
+           *
+           * Tooling like Sentry can capture console errors. If not, feel
+           * free to customize to send the error to your telemetry tool of choice.
+           */
+          console.error(err)
+          return
+        }
+
+        if (response.ok) {
+          /**
+           * This is for errors that are from a HTTP request.
+           *
+           * If the response is OK, it must be an HTML body, we'll
+           * go to that locaton directly.
+           */
+          window.location = response.url
+        } else {
+          if (response.status >= 400 && response.status < 500) {
+            window.location.href = "/400.html"
+            return
+          }
+
+          if (response.status >= 500) {
+            window.location.href = "/500.html"
+            return
+          }
+        }
+      })
+  }
+
+  return { visit: appVisit, remote: appRemote }
+}

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

@@ -0,0 +1,2 @@
+export * from "./Layout"
+export * from "./Inputs"

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

@@ -0,0 +1,44 @@
+import { createSlice } from "@reduxjs/toolkit"
+import { saveResponse, beforeVisit } from "@thoughtbot/superglue"
+
+const initialState = {}
+
+export const flashSlice = createSlice({
+  name: "flash",
+  initialState: initialState,
+  reducers: {
+    clearFlash(state, { payload }) {
+      const key = payload
+      if (!key) {
+        return {}
+      }
+
+      delete state[key]
+
+      return {
+        ...state
+      }
+    },
+    flash(state, { payload }) {
+      return {
+        ...state,
+        ...payload
+      }
+    }
+  },
+  extraReducers: builder => {
+    builder.addCase(beforeVisit, (_state, _action) => {
+      return {}
+    })
+    builder.addCase(saveResponse, (state, action) => {
+      const { page } = action.payload
+
+      return {
+        ...state,
+        ...page.slices.flash
+      }
+    })
+  }
+})
+
+export const { clearFlash, flash } = flashSlice.actions