superglue 2.0.0.beta.2 → 2.0.0.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b145fb67a8de9d06b652077c65ca6193e060a0662d300a8b9123651886e0db7c
-  data.tar.gz: bdb3106d98cf8c30f5efb396d21222d8ca5d750f2cbe7f3a682bca4a37259a19
+  metadata.gz: f28636caebe6605b85b79f28e86a49a7d96b8ebacf7e7542778ad3d20460e792
+  data.tar.gz: dc2a5f29d1ac8d61eb22bb77975f89873d0280202ea6be004ffaecac09c99ce1
 SHA512:
-  metadata.gz: 38c182b8c9123751aba72d726c5d6f53152fc79de03947d8c8c1f58968436ba3c97d37fd5a22fd6ebee786ef7a5fc86f950b8ae376594fed9cd969a37a43ea41
-  data.tar.gz: 11c8690fac03c74a48b78189ebff274bf4e6470cc6e3b7892ea9f0eaec34c3e138129af3b36cc0f87871222db7fc527a6f8fc9a375400b82b4f3b4b47a93ec4a
+  metadata.gz: 47eec6c67660566a23e99a91132d06529e0b51d9c01335b20c6a59454879c78cde32ba3d8fbb2741311ce6e72ec2a6309eef16ed0aae07f8ced16e2c10801d34
+  data.tar.gz: 81e83bbcf1f82f07b256e5312a2f0dbd647fb89231c4386f3459ca65b128c65b7248f299c8674cffa50cb8b31248f64e75af9deaf1fb37b266add3ddfeb83cc9

data/app/views/application/_humid.html.erb

@@ -0,0 +1 @@
+<%= Humid.render(ssr_context, render_props, request.scheme + '://' + request.host_with_port, request.fullpath).html_safe -%>

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

@@ -18,19 +18,23 @@ module Superglue
         required: false,
         desc: "JavaScript bundler to use (esbuild, bun, rollup, webpack). Skips interactive prompt."
 
-      class_option :deepkit,
+      class_option :validator,
+        type: :string,
+        required: false,
+        desc: "Runtime type validator to use (deepkit, typia, none). Skips interactive prompt."
+
+      class_option :svgr,
         type: :boolean,
         required: false,
-        desc: "Enable Deepkit runtime type validation (experimental). Skips interactive prompt."
+        desc: "Enable SVGR to import SVGs as React components. Skips interactive prompt."
 
       def create_files
         remove_file "#{app_js_path}/application.js"
 
         @use_typescript = options["typescript"]
         @bundler = ask_bundler
-        @use_deepkit = @use_typescript && ask_deepkit
-
-        copy_erb_files
+        @validator = @use_typescript ? ask_validator : "none"
+        @use_svgr = ask_svgr
 
         if @use_typescript
           copy_ts_files
@@ -45,6 +49,11 @@ module Superglue
         say "Copying Superglue initializer"
         copy_file "#{__dir__}/templates/initializer.rb", "config/initializers/superglue.rb"
 
+        say "Copying Humid initializer"
+        copy_file "#{__dir__}/templates/humid_initializer.rb", "config/initializers/humid.rb"
+
+        copy_ssr_files
+
         say "Copying application.json.props"
         copy_file "#{__dir__}/templates/application.json.props", "app/views/layouts/application.json.props"
 
@@ -54,17 +63,19 @@ module Superglue
         say "Adding required member methods to ApplicationRecord"
         add_member_methods
 
-        say "Enabling jsx rendering defaults"
-        insert_jsx_rendering_defaults
-
         install_packages
 
+        if @use_svgr
+          configure_svgr
+        end
+
         say "Superglue is Installed! 🎉", :green
       end
 
       private
 
       BUNDLERS = %w[esbuild bun rollup webpack].freeze
+      VALIDATORS = %w[deepkit typia none].freeze
 
       def detect_bundler
         if File.exist?("webpack.config.js")
@@ -116,16 +127,34 @@ module Superglue
         ask("Which bundler are you using?", limited_to: BUNDLERS, default: detected)
       end
 
-      def ask_deepkit
-        unless options["deepkit"].nil?
-          say "Deepkit runtime type validation: #{options["deepkit"] ? "enabled" : "disabled"}", :green
-          return options["deepkit"]
+      def ask_validator
+        if options["validator"]
+          validator = options["validator"]
+          unless VALIDATORS.include?(validator)
+            raise Thor::Error, "Unknown validator '#{validator}'. Must be one of: #{VALIDATORS.join(", ")}"
+          end
+          say "Runtime type validator: #{validator}", :green
+          return validator
+        end
+
+        say ""
+        say "Superglue can add runtime type validation during development."
+        say "  deepkit - works with TypeScript 5 and below (uses bundler plugin)"
+        say "  typia   - works with TypeScript 6 and above (uses ttsc)"
+        say "  none    - skip runtime type validation"
+        ask("Which runtime type validator would you like to use?", limited_to: VALIDATORS, default: "none")
+      end
+
+      def ask_svgr
+        unless options["svgr"].nil?
+          say "SVGR: #{options["svgr"] ? "enabled" : "disabled"}", :green
+          return options["svgr"]
         end
 
         say ""
-        say "Superglue includes an experimental Deepkit integration for runtime type"
-        say "validation during development. This is optional and can be added later."
-        yes?("Would you like to enable Deepkit runtime type validation? (experimental) [y/N]")
+        say "SVGR lets you import SVGs as React components."
+        say "e.g., import Logo from '@images/logo.svg'"
+        yes?("Would you like to enable SVGR? [y/N]")
       end
 
       def update_build_script
@@ -139,41 +168,49 @@ module Superglue
         end
       end
 
+      def bundler_template_for(bundler_name, base_path, variants)
+        if @use_typescript
+          variant_key = variants.key?(@validator) ? @validator : "none"
+          variants[variant_key]
+        else
+          base_path
+        end
+      end
+
       def copy_bundler_config
         case @bundler
         when "esbuild"
-          if @use_typescript
-            template_name = @use_deepkit ? "ts/build.deepkit.mjs" : "ts/build.mjs"
-            say "Adding build.mjs for TypeScript compilation"
-            copy_file "#{__dir__}/templates/#{template_name}", "build.mjs"
-          else
-            say "Adding build.mjs"
-            copy_file "#{__dir__}/templates/js/build.mjs", "build.mjs"
-          end
+          template_name = bundler_template_for("esbuild", "js/build.mjs", {
+            "deepkit" => "ts/build.deepkit.mjs",
+            "typia" => "ts/build.typia.mjs",
+            "none" => "ts/build.mjs"
+          })
+          say "Adding build.mjs for #{@use_typescript ? "TypeScript" : "JavaScript"} compilation"
+          copy_file "#{__dir__}/templates/#{template_name}", "build.mjs"
         when "bun"
-          config_template = if @use_typescript
-            @use_deepkit ? "bun/bun.config.deepkit.js" : "bun/bun.config.ts.js"
-          else
-            "bun/bun.config.js"
-          end
+          template_name = bundler_template_for("bun", "bun/bun.config.js", {
+            "deepkit" => "bun/bun.config.deepkit.js",
+            "typia" => "bun/bun.config.typia.js",
+            "none" => "bun/bun.config.ts.js"
+          })
           say "Overwriting bun.config.js with Superglue configuration"
-          copy_file "#{__dir__}/templates/#{config_template}", "bun.config.js"
+          copy_file "#{__dir__}/templates/#{template_name}", "bun.config.js"
         when "webpack"
-          config_template = if @use_typescript
-            @use_deepkit ? "webpack/webpack.config.deepkit.js" : "webpack/webpack.config.ts.js"
-          else
-            "webpack/webpack.config.js"
-          end
+          template_name = bundler_template_for("webpack", "webpack/webpack.config.js", {
+            "deepkit" => "webpack/webpack.config.deepkit.js",
+            "typia" => "webpack/webpack.config.typia.js",
+            "none" => "webpack/webpack.config.ts.js"
+          })
           say "Overwriting webpack.config.js with Superglue configuration"
-          copy_file "#{__dir__}/templates/#{config_template}", "webpack.config.js"
+          copy_file "#{__dir__}/templates/#{template_name}", "webpack.config.js"
         when "rollup"
-          config_template = if @use_typescript
-            @use_deepkit ? "rollup/rollup.config.deepkit.js" : "rollup/rollup.config.ts.js"
-          else
-            "rollup/rollup.config.js"
-          end
+          template_name = bundler_template_for("rollup", "rollup/rollup.config.js", {
+            "deepkit" => "rollup/rollup.config.deepkit.js",
+            "typia" => "rollup/rollup.config.typia.js",
+            "none" => "rollup/rollup.config.ts.js"
+          })
           say "Overwriting rollup.config.js with Superglue configuration"
-          copy_file "#{__dir__}/templates/#{config_template}", "rollup.config.js"
+          copy_file "#{__dir__}/templates/#{template_name}", "rollup.config.js"
         end
       end
 
@@ -197,18 +234,24 @@ module Superglue
 
       def install_packages
         say "Installing Superglue and friends"
-        run "yarn add react react-dom @thoughtbot/superglue@2.0.0-beta.2"
+        run "yarn add react react-dom @thoughtbot/superglue@^2.0.0-beta.11"
 
         if @use_typescript
           run "yarn add -D @types/react-dom @types/react @types/node @thoughtbot/candy_wrapper@0.0.4 typescript"
         end
 
-        if @use_deepkit
+        if @validator == "deepkit"
           say "Installing Deepkit for runtime type validation"
           run "yarn add -D @deepkit/type @deepkit/core @deepkit/type-compiler"
+        elsif @validator == "typia"
+          say "Installing Typia and ttsc for runtime type validation"
+          run "yarn add -D typia ttsc @ttsc/unplugin"
         end
 
         case @bundler
+        when "esbuild"
+          say "Installing esbuild glob plugin"
+          run "yarn add -D esbuild-plugin-import-glob"
         when "bun"
           say "Installing bun glob plugin"
           run "yarn add -D bun-plugin-glob-import"
@@ -217,50 +260,14 @@ module Superglue
           run "yarn add -D esbuild-loader"
         when "rollup"
           say "Installing rollup plugins for JSX and glob support"
-          run "yarn add -D @rollup/plugin-babel @babel/core @babel/preset-react @rollup/plugin-commonjs @rollup/plugin-alias rollup-plugin-import-meta-glob"
+          run "yarn add -D @rollup/plugin-babel @babel/core @babel/preset-react @rollup/plugin-commonjs @rollup/plugin-alias @rollup/plugin-replace rollup-plugin-import-meta-glob"
           if @use_typescript
             run "yarn add -D @babel/preset-typescript"
           end
         end
-      end
-
-      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"
+        say "Installing build dependencies"
+        run "yarn add -D npm-run-all"
       end
 
       def copy_ts_files
@@ -281,11 +288,16 @@ module Superglue
         say "Copying tsconfig.json"
         copy_file "#{__dir__}/templates/ts/tsconfig.json", "tsconfig.json"
 
-        if @use_deepkit
+        if @validator == "deepkit"
           say "Enabling Deepkit reflection in tsconfig.json"
           inject_into_file "tsconfig.json", before: /\n\}$/ do
             ",\n  \"reflection\": true"
           end
+        elsif @validator == "typia"
+          say "Adding Superglue typia plugin to tsconfig.json"
+          inject_into_file "tsconfig.json", after: /"compilerOptions": \{/ do
+            "\n    \"plugins\": [{ \"transform\": \"@thoughtbot/superglue/typia\" }],"
+          end
         end
       end
 
@@ -326,6 +338,134 @@ module Superglue
         end
       end
 
+      def copy_ssr_files
+        say "Adding ssr_context to ApplicationController"
+        inject_into_file "app/controllers/application_controller.rb", after: "class ApplicationController < ActionController::Base\n" do
+          "  ssr_context { Humid.prepare(MINI_RACER_SSR[:context]) if defined?(MINI_RACER_SSR) }\n"
+        end
+
+        say "Copying MiniRacer shim"
+        copy_file "#{__dir__}/templates/ssr/shim.js", "shim.js"
+
+        ssr_ext = @use_typescript ? "tsx" : "jsx"
+
+        say "Copying SSR build script for #{@bundler}"
+        case @bundler
+        when "esbuild"
+          copy_file "#{__dir__}/templates/ssr/esbuild.build_ssr.mjs", "build_ssr.mjs"
+          gsub_file "build_ssr.mjs", "server_rendering.jsx", "server_rendering.#{ssr_ext}"
+          run %(npm pkg set scripts.build:ssr="node build_ssr.mjs")
+        when "bun"
+          copy_file "#{__dir__}/templates/ssr/bun.build_ssr.js", "build_ssr.js"
+          gsub_file "build_ssr.js", "server_rendering.jsx", "server_rendering.#{ssr_ext}"
+          run %(npm pkg set scripts.build:ssr="bun run build_ssr.js")
+        when "webpack"
+          copy_file "#{__dir__}/templates/ssr/webpack.build_ssr.js", "webpack.config.ssr.js"
+          gsub_file "webpack.config.ssr.js", "server_rendering.jsx", "server_rendering.#{ssr_ext}"
+          run %(npm pkg set scripts.build:ssr="webpack --config webpack.config.ssr.js")
+        when "rollup"
+          copy_file "#{__dir__}/templates/ssr/rollup.build_ssr.config.js", "rollup.config.ssr.js"
+          gsub_file "rollup.config.ssr.js", "server_rendering.jsx", "server_rendering.#{ssr_ext}"
+          if @use_typescript
+            gsub_file "rollup.config.ssr.js",
+              'presets: [["@babel/preset-react", { runtime: "automatic" }]],',
+              'presets: [["@babel/preset-react", { runtime: "automatic" }], "@babel/preset-typescript"],'
+          end
+          run %(npm pkg set scripts.build:ssr="rollup -c rollup.config.ssr.js")
+        end
+
+        if @use_typescript
+          say "Copying server_rendering.tsx"
+          copy_file "#{__dir__}/templates/ssr/server_rendering.tsx", "#{app_js_path}/server_rendering.tsx"
+        else
+          say "Copying server_rendering.jsx"
+          copy_file "#{__dir__}/templates/ssr/server_rendering.jsx", "#{app_js_path}/server_rendering.jsx"
+        end
+
+        say "Adding build:web, build:dev, and build:watch scripts"
+        web_build = case @bundler
+        when "esbuild" then "node build.mjs"
+        when "bun" then "bun run bun.config.js"
+        when "webpack" then "webpack --config webpack.config.js"
+        when "rollup" then "rollup -c rollup.config.js"
+        end
+
+        run %(npm pkg set scripts.build:web="#{web_build}")
+        run %(npm pkg set scripts.build="run-p 'build:web -- {@}' 'build:ssr -- {@}' --")
+        run %(npm pkg set scripts.build:prod="NODE_ENV=production yarn build")
+
+        if File.exist?("config/puma.rb")
+          say "Adding MiniRacer SSR context to puma.rb for production"
+          append_to_file "config/puma.rb" do
+            <<~RUBY
+
+              # Create a MiniRacer context for SSR on each worker boot.
+              # MiniRacer is thread safe but not fork safe.
+              if ENV["RAILS_ENV"] == "production"
+                on_worker_boot do
+                  MINI_RACER_SSR = { context: MiniRacer::Context.new(timeout: 1000, ensure_gc_after_idle: 2000) }
+                end
+
+                on_worker_shutdown do
+                  MINI_RACER_SSR[:context].dispose if defined?(MINI_RACER_SSR)
+                end
+              end
+            RUBY
+          end
+        end
+      end
+
+      def configure_svgr
+        say "Configuring SVGR"
+
+        case @bundler
+        when "esbuild"
+          run "yarn add -D esbuild-plugin-svgr"
+          inject_svgr_esbuild("build.mjs")
+          inject_svgr_esbuild("build_ssr.mjs")
+        when "bun"
+          run "yarn add -D esbuild-plugin-svgr"
+          inject_svgr_bun
+        when "webpack"
+          run "yarn add -D @svgr/webpack"
+          inject_svgr_webpack("webpack.config.js")
+          inject_svgr_webpack("webpack.config.ssr.js")
+        when "rollup"
+          run "yarn add -D @svgr/rollup"
+          inject_svgr_rollup("rollup.config.js")
+          inject_svgr_rollup("rollup.config.ssr.js")
+        end
+      end
+
+      def inject_svgr_esbuild(file)
+        prepend_to_file file, "import svgr from 'esbuild-plugin-svgr'\n"
+        gsub_file file, "importGlobPlugin()", "importGlobPlugin(), svgr()"
+      end
+
+      def inject_svgr_bun
+        # bun uses esbuild-plugin-svgr since its plugin API is compatible
+        prepend_to_file "bun.config.js", "import svgr from 'esbuild-plugin-svgr'\n"
+        gsub_file "bun.config.js", "globImportPlugin()", "globImportPlugin(), svgr()"
+      end
+
+      def inject_svgr_webpack(file)
+        inject_into_file file, after: /rules: \[\n/ do
+          <<-JS
+      {
+        test: /\\.svg$/,
+        use: ["@svgr/webpack"]
+      },
+          JS
+        end
+      end
+
+      def inject_svgr_rollup(file)
+        inject_into_file file, "import svgr from \"@svgr/rollup\"\n", before: /^export default/
+        inject_into_file file, after: /plugins: \[\n/ do
+          "    svgr(),\n"
+        end
+      end
+
       def app_js_path
         "app/javascript/"
       end

data/lib/generators/superglue/install/templates/bun/bun.config.deepkit.js

@@ -1,5 +1,6 @@
 import { globImportPlugin } from 'bun-plugin-glob-import'
 import { bun as deepkitPlugin } from '@thoughtbot/superglue/deepkit'
+import { watch } from 'fs'
 
 const isWatch = process.argv.includes('--watch')
 
@@ -14,16 +15,13 @@ const config = {
 }
 
 if (isWatch) {
-  const { watch } = await import('fs')
   await Bun.build(config)
   console.log('Watching for changes...')
 
-  watch('app/javascript', { recursive: true }, async () => {
-    await Bun.build(config)
-  })
-
-  watch('app/views', { recursive: true }, async () => {
-    await Bun.build(config)
+  watch('app/views', { recursive: true }, async (event, filename) => {
+    if (event === 'rename' && /\.[jt]sx$/.test(filename)) {
+      await Bun.build(config)
+    }
   })
 } else {
   const result = await Bun.build(config)

data/lib/generators/superglue/install/templates/bun/bun.config.js

@@ -1,4 +1,5 @@
 import { globImportPlugin } from 'bun-plugin-glob-import'
+import { watch } from 'fs'
 
 const isWatch = process.argv.includes('--watch')
 
@@ -10,16 +11,13 @@ const config = {
 }
 
 if (isWatch) {
-  const { watch } = await import('fs')
   await Bun.build(config)
   console.log('Watching for changes...')
 
-  watch('app/javascript', { recursive: true }, async () => {
-    await Bun.build(config)
-  })
-
-  watch('app/views', { recursive: true }, async () => {
-    await Bun.build(config)
+  watch('app/views', { recursive: true }, async (event, filename) => {
+    if (event === 'rename' && /\.[jt]sx$/.test(filename)) {
+      await Bun.build(config)
+    }
   })
 } else {
   const result = await Bun.build(config)

data/lib/generators/superglue/install/templates/bun/bun.config.ts.js

@@ -1,4 +1,5 @@
 import { globImportPlugin } from 'bun-plugin-glob-import'
+import { watch } from 'fs'
 
 const isWatch = process.argv.includes('--watch')
 
@@ -10,16 +11,13 @@ const config = {
 }
 
 if (isWatch) {
-  const { watch } = await import('fs')
   await Bun.build(config)
   console.log('Watching for changes...')
 
-  watch('app/javascript', { recursive: true }, async () => {
-    await Bun.build(config)
-  })
-
-  watch('app/views', { recursive: true }, async () => {
-    await Bun.build(config)
+  watch('app/views', { recursive: true }, async (event, filename) => {
+    if (event === 'rename' && /\.[jt]sx$/.test(filename)) {
+      await Bun.build(config)
+    }
   })
 } else {
   const result = await Bun.build(config)

data/lib/generators/superglue/install/templates/bun/bun.config.typia.js

@@ -0,0 +1,37 @@
+import { globImportPlugin } from 'bun-plugin-glob-import'
+import ttsc from '@ttsc/unplugin'
+const ttscPlugin = ttsc.bun
+import { watch } from 'fs'
+
+const isWatch = process.argv.includes('--watch')
+
+const config = {
+  entrypoints: ['app/javascript/application.tsx'],
+  outdir: 'app/assets/builds',
+  sourcemap: 'external',
+  plugins: [
+    globImportPlugin(),
+    ...(process.env.NODE_ENV === 'production' ? [] : [ttscPlugin()])
+  ],
+}
+
+if (isWatch) {
+  await Bun.build(config)
+  console.log('Watching for changes...')
+
+  watch('app/views', { recursive: true }, async (event, filename) => {
+    if (event === 'rename' && /\.[jt]sx$/.test(filename)) {
+      await Bun.build(config)
+    }
+  })
+} else {
+  const result = await Bun.build(config)
+
+  if (!result.success) {
+    console.error('Build failed')
+    for (const log of result.logs) {
+      console.error(log)
+    }
+    process.exit(1)
+  }
+}

data/lib/generators/superglue/install/templates/bun/page_to_page_mapping.js

@@ -1,4 +1,4 @@
-import { asObject as pages } from '../views/**/*.jsx'
+import { asObject as pages } from '../views/**/*.{tsx,jsx}'
 
 const pageIdentifierToPageComponent = {}
 

data/lib/generators/superglue/install/templates/bun/page_to_page_mapping.ts

@@ -1,4 +1,4 @@
-import { asObject as pages } from '../views/**/*.tsx'
+import { asObject as pages } from '../views/**/*.{tsx,jsx}'
 
 const pageIdentifierToPageComponent: Record<string, React.ComponentType> = {}
 

data/lib/generators/superglue/install/templates/humid_initializer.rb

@@ -0,0 +1,47 @@
+Humid.configure do |config|
+  # Path to a JavaScript file to eval into the MiniRacer context before
+  # the SSR bundle. Provides globals that bare V8 doesn't have
+  # (TextEncoder, URL, MessageChannel, source-map-support, etc.).
+  #
+  # Required for SSR
+  config.prepend = Rails.root.join("shim.js")
+
+  # Path to your SSR build file located in `app/assets/builds/`.
+  # Use a separate build from your client-side `application.js`.
+  #
+  # Required
+  config.application_path = Rails.root.join("app/assets/builds/server_rendering.js")
+
+  # Path to your source map file
+  #
+  # Optional
+  config.source_map_path = Rails.root.join("app/assets/builds/server_rendering.js.map")
+
+  # Raise errors if JS rendering failed. If false, the error will be
+  # logged and Humid.render will return an empty string.
+  #
+  # Defaults to true.
+  config.raise_render_errors = Rails.env.local?
+
+  # The logger instance.
+  # `console.log` and friends (`warn`, `error`) are delegated to
+  # the respective logger levels on the ruby side.
+  #
+  # Defaults to nil
+  config.logger = Rails.env.local? ? Rails.logger : nil
+end
+
+if Rails.env.local?
+  MiniRacer::Platform.set_flags! :single_threaded
+  MINI_RACER_SSR = { context: MiniRacer::Context.new(timeout: 1000, ensure_gc_after_idle: 2000) }
+
+  ssr_checker = ActiveSupport::FileUpdateChecker.new([Humid.config.application_path.to_s]) do
+    MINI_RACER_SSR[:context].dispose
+    MINI_RACER_SSR[:context] = MiniRacer::Context.new(timeout: 1000, ensure_gc_after_idle: 2000)
+  end
+
+  Rails.application.reloaders << ssr_checker
+  Rails.application.reloader.to_run do
+    ssr_checker.execute_if_updated
+  end
+end

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { createRoot } from "react-dom/client"
+import { createRoot, hydrateRoot } from "react-dom/client"
 import { createApp } from "@thoughtbot/superglue"
 import { buildVisitAndRemote } from "./application_visit"
 import { pageIdentifierToPageComponent } from "./page_to_page_mapping"
@@ -26,8 +26,7 @@ if (typeof window !== "undefined" && window.SUPERGLUE_INITIAL_PAGE_STATE) {
         mapping: pageIdentifierToPageComponent,
       })
 
-      const root = createRoot(appEl)
-      root.render(
+      const app = (
         <div onClick={ujs.onClick} onSubmit={ujs.onSubmit}>
           <Provider>
             <Layout>
@@ -36,6 +35,12 @@ if (typeof window !== "undefined" && window.SUPERGLUE_INITIAL_PAGE_STATE) {
           </Provider>
         </div>
       )
+
+      if (appEl.hasChildNodes()) {
+        hydrateRoot(appEl, app)
+      } else {
+        createRoot(appEl).render(app)
+      }
     }
   })
 }