superglue 2.0.0.alpha.10 → 2.0.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2fa419e7869dd82d8ca911e9d769008878ff2f067c1f0acf04fce9a5634f12ef
-  data.tar.gz: b9dc1c99d956a04699e96c3a297f5eb21f90621c71c56c2379da1b189ca745bc
+  metadata.gz: b145fb67a8de9d06b652077c65ca6193e060a0662d300a8b9123651886e0db7c
+  data.tar.gz: bdb3106d98cf8c30f5efb396d21222d8ca5d750f2cbe7f3a682bca4a37259a19
 SHA512:
-  metadata.gz: 7653b40c3ba33e5c29b1f081d25ae4c18add19a8556411cff8d43f4787895baf368d99f193e7e9cc9137bf56de85d1e6918dded3abf2e0c0d9bba4e668c9f6fd
-  data.tar.gz: bad535629a057d095e6da5b394c32fcfe46c1068cc9e5f89879e351fde17d9467c88fc85c2b9f832f50f6714ecdd28ec0d8f13706df5c7425d86db7111f7561c
+  metadata.gz: 38c182b8c9123751aba72d726c5d6f53152fc79de03947d8c8c1f58968436ba3c97d37fd5a22fd6ebee786ef7a5fc86f950b8ae376594fed9cd969a37a43ea41
+  data.tar.gz: 11c8690fac03c74a48b78189ebff274bf4e6470cc6e3b7892ea9f0eaec34c3e138129af3b36cc0f87871222db7fc527a6f8fc9a375400b82b4f3b4b47a93ec4a

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

@@ -2,8 +2,8 @@
 # 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)
+  def broadcast_update_to(*streamables, **opts)
+    broadcast_action_to(*streamables, action: :update, **opts)
   end
 
   def broadcast_append_to(*streamables, **opts)
@@ -14,17 +14,6 @@ module Superglue::Streams::Broadcasts
     broadcast_action_to(*streamables, action: :prepend, **opts)
   end
 
-  def broadcast_refresh_to(*streamables, **opts)
-    request_id = Superglue.current_request_id
-    content = JSON.generate({
-      type: "message",
-      action: "refresh",
-      requestId: request_id,
-      options: opts
-    })
-    broadcast_stream_to(*streamables, content: content)
-  end
-
   def broadcast_action_to(*streamables, action:, target: nil, targets: nil, save_target: nil, options: {}, **rendering)
     locals = rendering[:locals] || {}
     targets = (target ? [target] : targets)
@@ -45,8 +34,8 @@ module Superglue::Streams::Broadcasts
     broadcast_stream_to(*streamables, content: render_broadcast_action(rendering))
   end
 
-  def broadcast_save_later_to(*streamables, **opts)
-    broadcast_action_later_to(*streamables, action: :save, **opts)
+  def broadcast_update_later_to(*streamables, **opts)
+    broadcast_action_later_to(*streamables, action: :update, **opts)
   end
 
   def broadcast_append_later_to(*streamables, **opts)
@@ -57,21 +46,6 @@ module Superglue::Streams::Broadcasts
     broadcast_action_later_to(*streamables, action: :prepend, **opts)
   end
 
-  def broadcast_refresh_later_to(*streamables, request_id: Superglue.current_request_id, **opts)
-    stream_name = stream_name_from(streamables)
-
-    refresh_debouncer_for(*streamables, request_id: request_id).debounce do
-      content = JSON.generate({
-        type: "message",
-        action: "refresh",
-        requestId: request_id,
-        options: opts
-      })
-
-      Superglue::Streams::BroadcastStreamJob.perform_later stream_name, content: content
-    end
-  end
-
   def broadcast_action_later_to(*streamables, action:, target: nil, targets: nil, save_target: nil, options: {}, **rendering)
     streamables.flatten!
     streamables.compact_blank!
@@ -99,10 +73,6 @@ module Superglue::Streams::Broadcasts
     ActionCable.server.broadcast stream_name_from(streamables), content
   end
 
-  def refresh_debouncer_for(*streamables, request_id: nil) # :nodoc:
-    Superglue::ThreadDebouncer.for("superglue-refresh-debouncer-#{stream_name_from(streamables.including(request_id))}")
-  end
-
   private
 
   def convert_to_superglue_fragment_id(target)

data/app/helpers/superglue/streams_helper.rb

@@ -36,12 +36,12 @@ module Superglue::StreamsHelper
     broadcast_action_props(action: "append", model:, target:, options:, **rendering)
   end
 
-  def broadcast_save_props(model: nil, target: nil, options: {}, **rendering)
+  def broadcast_update_props(model: nil, target: nil, options: {}, **rendering)
     if model && !target
       target = fragment_id(model)
     end
 
-    broadcast_action_props(action: "save", model:, target:, options:, **rendering)
+    broadcast_action_props(action: "update", model:, target:, options:, **rendering)
   end
 
   def broadcast_action_props(action:, partial: nil, model: nil, target: nil, options: {}, **rendering)

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

@@ -12,22 +12,12 @@ module Superglue::Broadcastable
   module ClassMethods
     def broadcasts_to(stream, inserts_by: :append, target: broadcast_target_default, save_target: nil, **rendering)
       after_create_commit -> { broadcast_action_later_to(stream.try(:call, self) || send(stream), action: inserts_by, target: target.try(:call, self) || target, save_target: save_target&.try(:call, self), **rendering) }
-      after_update_commit -> { broadcast_save_later_to(stream.try(:call, self) || send(stream), **rendering) }
+      after_update_commit -> { broadcast_update_later_to(stream.try(:call, self) || send(stream), **rendering) }
     end
 
     def broadcasts(stream = model_name.plural, inserts_by: :append, target: broadcast_target_default, save_target: nil, **rendering)
       after_create_commit -> { broadcast_action_later_to(stream, action: inserts_by, target: target.try(:call, self) || target, save_target: save_target&.try(:call, self), **rendering) }
-      after_update_commit -> { broadcast_save_later(**rendering) }
-    end
-
-    def broadcasts_refreshes_to(stream)
-      after_commit -> { broadcast_refresh_later_to(stream.try(:call, self) || send(stream)) }
-    end
-
-    def broadcasts_refreshes(stream = model_name.plural)
-      after_create_commit -> { broadcast_refresh_later_to(stream) }
-      after_update_commit -> { broadcast_refresh_later }
-      after_destroy_commit -> { broadcast_refresh }
+      after_update_commit -> { broadcast_update_later(**rendering) }
     end
 
     def broadcast_target_default
@@ -47,12 +37,12 @@ module Superglue::Broadcastable
   end
 
   # add target?
-  def broadcast_save_to(*streamables, **rendering)
-    Superglue::StreamsChannel.broadcast_save_to(*streamables, **extract_options_and_add_target(rendering, target: self)) unless suppressed_superglue_broadcasts?
+  def broadcast_update_to(*streamables, **rendering)
+    Superglue::StreamsChannel.broadcast_update_to(*streamables, **extract_options_and_add_target(rendering, target: self)) unless suppressed_superglue_broadcasts?
   end
 
-  def broadcast_save(**rendering)
-    broadcast_save_to self, **rendering
+  def broadcast_update(**rendering)
+    broadcast_update_to self, **rendering
   end
 
   # todo save_target: true
@@ -72,14 +62,6 @@ module Superglue::Broadcastable
     broadcast_prepend_to self, target: target, save_target: save_target, **rendering
   end
 
-  def broadcast_refresh_to(*streamables)
-    Superglue::StreamsChannel.broadcast_refresh_to(*streamables) unless suppressed_superglue_broadcasts?
-  end
-
-  def broadcast_refresh
-    broadcast_refresh_to self
-  end
-
   # todo rename options to js_options
   def broadcast_action_to(*streamables, action:, target: broadcast_target_default, options: {}, **rendering)
     Superglue::StreamsChannel.broadcast_action_to(*streamables, action: action, options: options, **extract_options_and_add_target(rendering, target: target)) unless suppressed_superglue_broadcasts?
@@ -89,12 +71,12 @@ module Superglue::Broadcastable
     broadcast_action_to self, action: action, target: target, options: options, **rest
   end
 
-  def broadcast_save_later_to(*streamables, **rendering)
-    Superglue::StreamsChannel.broadcast_save_later_to(*streamables, **extract_options_and_add_target(rendering, target: self)) unless suppressed_superglue_broadcasts?
+  def broadcast_update_later_to(*streamables, **rendering)
+    Superglue::StreamsChannel.broadcast_update_later_to(*streamables, **extract_options_and_add_target(rendering, target: self)) unless suppressed_superglue_broadcasts?
   end
 
-  def broadcast_save_later(**rendering)
-    broadcast_save_later_to self, **rendering
+  def broadcast_update_later(**rendering)
+    broadcast_update_later_to self, **rendering
   end
 
   def broadcast_append_later_to(*streamables, target: broadcast_target_default, save_target: nil, **rendering)
@@ -113,14 +95,6 @@ module Superglue::Broadcastable
     broadcast_prepend_later_to self, target: target, save_target: save_target, **rendering
   end
 
-  def broadcast_refresh_later_to(*streamables)
-    Superglue::StreamsChannel.broadcast_refresh_later_to(*streamables, request_id: Superglue.current_request_id) unless suppressed_superglue_broadcasts?
-  end
-
-  def broadcast_refresh_later
-    broadcast_refresh_later_to self
-  end
-
   def broadcast_action_later_to(*streamables, action:, target: broadcast_target_default, options: {}, **rendering)
     Superglue::StreamsChannel.broadcast_action_later_to(*streamables, action: action, options: options, **extract_options_and_add_target(rendering, target: target)) unless suppressed_superglue_broadcasts?
   end

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

@@ -1,3 +1,4 @@
+require "json"
 require "rails/generators/named_base"
 require "rails/generators/resource_helpers"
 
@@ -12,18 +13,35 @@ module Superglue
         default: false,
         desc: "Use typescript"
 
+      class_option :bundler,
+        type: :string,
+        required: false,
+        desc: "JavaScript bundler to use (esbuild, bun, rollup, webpack). Skips interactive prompt."
+
+      class_option :deepkit,
+        type: :boolean,
+        required: false,
+        desc: "Enable Deepkit runtime type validation (experimental). Skips interactive prompt."
+
       def create_files
         remove_file "#{app_js_path}/application.js"
 
-        use_typescript = options["typescript"]
+        @use_typescript = options["typescript"]
+        @bundler = ask_bundler
+        @use_deepkit = @use_typescript && ask_deepkit
+
         copy_erb_files
 
-        if use_typescript
+        if @use_typescript
           copy_ts_files
         else
           copy_js_files
         end
 
+        copy_bundler_config
+        update_build_script
+        copy_page_to_page_mapping
+
         say "Copying Superglue initializer"
         copy_file "#{__dir__}/templates/initializer.rb", "config/initializers/superglue.rb"
 
@@ -39,18 +57,173 @@ module Superglue
         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@2.0.0-alpha.8"
-
-        if use_typescript
-          run "yarn add -D @types/react-dom @types/react @types/node @thoughtbot/candy_wrapper@0.0.4"
-        end
+        install_packages
 
         say "Superglue is Installed! 🎉", :green
       end
 
       private
 
+      BUNDLERS = %w[esbuild bun rollup webpack].freeze
+
+      def detect_bundler
+        if File.exist?("webpack.config.js")
+          "webpack"
+        elsif File.exist?("rollup.config.js") || File.exist?("rollup.config.mjs")
+          "rollup"
+        elsif File.exist?("bun.config.js") || File.exist?("bun.config.mjs")
+          "bun"
+        elsif esbuild_detected?
+          "esbuild"
+        end
+      end
+
+      def esbuild_detected?
+        return true if File.exist?("build.mjs")
+        return false unless File.exist?("package.json")
+
+        package_json = JSON.parse(File.read("package.json"))
+        build_script = package_json.dig("scripts", "build") || ""
+        dev_deps = package_json["devDependencies"] || {}
+
+        build_script.include?("esbuild") || dev_deps.key?("esbuild")
+      rescue JSON::ParserError
+        false
+      end
+
+      def ask_bundler
+        if options["bundler"]
+          bundler = options["bundler"]
+          unless BUNDLERS.include?(bundler)
+            raise Thor::Error, "Unknown bundler '#{bundler}'. Must be one of: #{BUNDLERS.join(", ")}"
+          end
+          say "Using bundler: #{bundler}", :green
+          return bundler
+        end
+
+        detected = detect_bundler
+
+        if detected
+          say "Detected #{detected} in your project.", :green
+        else
+          say "No JavaScript bundler detected.", :red
+          say "Install one first via jsbundling-rails:"
+          say "  rails javascript:install:[esbuild|bun|rollup|webpack]"
+          say "See: https://github.com/rails/jsbundling-rails"
+          raise Thor::Error, "No bundler found. Install one via jsbundling-rails and re-run this generator."
+        end
+
+        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"]
+        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]")
+      end
+
+      def update_build_script
+        case @bundler
+        when "esbuild"
+          say "Updating build script for esbuild"
+          run %(npm pkg set scripts.build="node build.mjs")
+        when "rollup"
+          say "Updating build script for rollup"
+          run %(npm pkg set scripts.build="rollup -c rollup.config.js")
+        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
+        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
+          say "Overwriting bun.config.js with Superglue configuration"
+          copy_file "#{__dir__}/templates/#{config_template}", "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
+          say "Overwriting webpack.config.js with Superglue configuration"
+          copy_file "#{__dir__}/templates/#{config_template}", "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
+          say "Overwriting rollup.config.js with Superglue configuration"
+          copy_file "#{__dir__}/templates/#{config_template}", "rollup.config.js"
+        end
+      end
+
+      def copy_page_to_page_mapping
+        ext = @use_typescript ? "ts" : "js"
+
+        mapping_source = case @bundler
+        when "esbuild"
+          "#{ext}/page_to_page_mapping.#{ext}"
+        when "bun"
+          "bun/page_to_page_mapping.#{ext}"
+        when "webpack"
+          "webpack/page_to_page_mapping.#{ext}"
+        when "rollup"
+          "rollup/page_to_page_mapping.#{ext}"
+        end
+
+        say "Copying page_to_page_mapping.#{ext} for #{@bundler}"
+        copy_file "#{__dir__}/templates/#{mapping_source}", "#{app_js_path}/page_to_page_mapping.#{ext}"
+      end
+
+      def install_packages
+        say "Installing Superglue and friends"
+        run "yarn add react react-dom @thoughtbot/superglue@2.0.0-beta.2"
+
+        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
+          say "Installing Deepkit for runtime type validation"
+          run "yarn add -D @deepkit/type @deepkit/core @deepkit/type-compiler"
+        end
+
+        case @bundler
+        when "bun"
+          say "Installing bun glob plugin"
+          run "yarn add -D bun-plugin-glob-import"
+        when "webpack"
+          say "Installing esbuild-loader for JSX support"
+          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"
+          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
@@ -94,14 +267,8 @@ module Superglue
         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"
+        copy_file "#{__dir__}/templates/ts/flash.ts", "#{app_js_path}/flash.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"
@@ -111,22 +278,23 @@ module Superglue
         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}"
+        say "Copying tsconfig.json"
         copy_file "#{__dir__}/templates/ts/tsconfig.json", "tsconfig.json"
+
+        if @use_deepkit
+          say "Enabling Deepkit reflection in tsconfig.json"
+          inject_into_file "tsconfig.json", before: /\n\}$/ do
+            ",\n  \"reflection\": true"
+          end
+        end
       end
 
       def copy_js_files
-        say "Copying application.js file to #{app_js_path}"
+        say "Copying application.jsx 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"
+        copy_file "#{__dir__}/templates/js/flash.js", "#{app_js_path}/flash.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"
@@ -136,7 +304,7 @@ module Superglue
         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}"
+        say "Copying jsconfig.json"
         copy_file "#{__dir__}/templates/js/jsconfig.json", "jsconfig.json"
       end
 

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

@@ -25,6 +25,4 @@ json.restoreStrategy 'fromCacheAndRevisitInBackground'
 
 json.renderedAt Time.now.to_i
 
-json.slices do
-  json.flash flash.to_h
-end
+json.flash flash.to_h

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

@@ -0,0 +1,38 @@
+import { globImportPlugin } from 'bun-plugin-glob-import'
+import { bun as deepkitPlugin } from '@thoughtbot/superglue/deepkit'
+
+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' ? [] : [deepkitPlugin()])
+  ],
+}
+
+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)
+  })
+} 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/bun.config.js

@@ -0,0 +1,34 @@
+import { globImportPlugin } from 'bun-plugin-glob-import'
+
+const isWatch = process.argv.includes('--watch')
+
+const config = {
+  entrypoints: ['app/javascript/application.jsx'],
+  outdir: 'app/assets/builds',
+  sourcemap: 'external',
+  plugins: [globImportPlugin()],
+}
+
+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)
+  })
+} 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/bun.config.ts.js

@@ -0,0 +1,34 @@
+import { globImportPlugin } from 'bun-plugin-glob-import'
+
+const isWatch = process.argv.includes('--watch')
+
+const config = {
+  entrypoints: ['app/javascript/application.tsx'],
+  outdir: 'app/assets/builds',
+  sourcemap: 'external',
+  plugins: [globImportPlugin()],
+}
+
+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)
+  })
+} 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

@@ -0,0 +1,10 @@
+import { asObject as pages } from '../views/**/*.jsx'
+
+const pageIdentifierToPageComponent = {}
+
+for (const key in pages) {
+  const identifier = key.split('.')[0]
+  pageIdentifierToPageComponent[identifier] = pages[key].default
+}
+
+export { pageIdentifierToPageComponent }

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

@@ -0,0 +1,10 @@
+import { asObject as pages } from '../views/**/*.tsx'
+
+const pageIdentifierToPageComponent: Record<string, React.ComponentType> = {}
+
+for (const key in pages) {
+  const identifier = key.split('.')[0]
+  pageIdentifierToPageComponent[identifier] = (pages[key] as { default: React.ComponentType }).default
+}
+
+export { pageIdentifierToPageComponent }

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

@@ -1,9 +1,9 @@
 import React from "react"
 import { createRoot } from "react-dom/client"
-import { Application } from "@thoughtbot/superglue"
+import { createApp } from "@thoughtbot/superglue"
 import { buildVisitAndRemote } from "./application_visit"
 import { pageIdentifierToPageComponent } from "./page_to_page_mapping"
-import { store } from "./store"
+import { Layout } from "./components"
 
 if (typeof window !== "undefined" && window.SUPERGLUE_INITIAL_PAGE_STATE) {
   document.addEventListener("DOMContentLoaded", function() {
@@ -11,24 +11,30 @@ if (typeof window !== "undefined" && window.SUPERGLUE_INITIAL_PAGE_STATE) {
     const location = window.location
 
     if (appEl) {
+      const { Provider, Outlet, ujs } = createApp({
+        // 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,
+        // Mapping between the page identifier to page component
+        mapping: pageIdentifierToPageComponent,
+      })
+
       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}
-        />
+        <div onClick={ujs.onClick} onSubmit={ujs.onSubmit}>
+          <Provider>
+            <Layout>
+              <Outlet />
+            </Layout>
+          </Provider>
+        </div>
       )
     }
   })