rmosolgo · rmosolgo · Feb 23, 2024 · Nov 7, 2023 · Nov 7, 2023 · Nov 7, 2023
diff --git a/app/views/graphiql/rails/editors/show.html.erb b/app/views/graphiql/rails/editors/show.html.erb
@@ -2,9 +2,19 @@
 <html>
   <head>
     <title><%= GraphiQL::Rails.config.title || 'GraphiQL' %></title>
-
-    <%= stylesheet_link_tag("graphiql/rails/application") %>
-    <%= javascript_include_tag("graphiql/rails/application", nonce: true )  %>
+      <% if defined?(Propshaft) %>
+        <%= stylesheet_link_tag("graphiql/rails/graphiql-3.1.1") %>
+        <%= stylesheet_link_tag("graphiql/rails/application") %>
+        <%= javascript_include_tag("graphiql/rails/react-18.2.0", nonce: true )  %>
+        <%= javascript_include_tag("graphiql/rails/react-dom-18.2.0", nonce: true )  %>
+        <%= javascript_include_tag("graphiql/rails/graphiql-3.1.1", nonce: true )  %>
+        <%= javascript_include_tag("graphiql/rails/graphiql_show", nonce: true )  %>
+      <% elsif defined?(Sprockets) %>
+        <%= stylesheet_link_tag("graphiql/rails/application") %>
+        <%= javascript_include_tag("graphiql/rails/application", nonce: true )  %>
+      <% else %>
+        <% raise "GraphiQL::Rails requires either Propshaft or Sprockets. Use `$ bundle add propshaft` or `$ bundle add sprockets-rails` to add one of them to your app." %>
+      <% end %>
   </head>
   <body>
     <%= content_tag :div, 'Loading...', id: 'graphiql-container', data: {

diff --git a/graphiql-rails.gemspec b/graphiql-rails.gemspec
@@ -18,7 +18,6 @@ Gem::Specification.new do |s|
   s.files = Dir["{app,config,lib}/**/*"]
 
   s.add_runtime_dependency "railties"
-  s.add_runtime_dependency "sprockets-rails"
 
   s.add_development_dependency "rails"
   s.add_development_dependency "sqlite3"

diff --git a/readme.md b/readme.md
@@ -9,9 +9,11 @@ Mount the [GraphiQL IDE](https://github.com/graphql/graphiql) in Ruby on Rails.
 Add to your Gemfile:
 
 ```ruby
-gem "graphiql-rails"
+bundle add graphiql-rails
 ```
 
+Additionally, you'll need [Sprockets or Propshaft](#sprockets-or-propshaft) to serve the JS and CSS assets.
+
 ## Usage
 
 ### Mount the Engine
@@ -31,9 +33,19 @@ end
 - `at:` is the path where GraphiQL will be served. You can access GraphiQL by visiting that path in your app.
 - `graphql_path:` is the path to the GraphQL endpoint. GraphiQL will send queries to this path.
 
-#### Note on API Mode
+### Sprockets or Propshaft
+
+You'll need [Sprockets](https://github.com/rails/sprockets) or [Propshaft](https://github.com/rails/propshaft) to deliver the JS and CSS for GraphiQL. If you don't already have one of those, you can add them with:
+
+```sh
+$ bundle add sprockets-rails
+# or
+$ bundle add propshaft
+```
 
-If you're using Rails 6 in "API mode", you'll also need to do the following:
+#### API Mode
+
+If you're using Rails 6+ in "API mode", you'll also need to do the following:
 
 1. Add `require "sprockets/railtie"` to your `application.rb`.
 
@@ -45,13 +57,14 @@ If you're using Rails 6 in "API mode", you'll also need to do the following:
 ```
 
 Additionally, for Rails 6, you'll also need to add `dartsass-sprockets` gem to your Gemfile and add a `manifest.js` file for Sprockets 4 to work:
+
 ```
 --- add to `app/assets/config/manifest.js`
 //= link graphiql/rails/application.css
 //= link graphiql/rails/application.js
 ```
-Note that the `sassc-rails` gem is unmaintained and [breaks with the newer GraphiQL](https://github.com/rmosolgo/graphiql-rails/issues/106).
-See more details in [issue #13](https://github.com/rmosolgo/graphiql-rails/issues/13#issuecomment-640366886)
+
+Note that the `sassc-rails` gem is unmaintained and [breaks with the newer GraphiQL](https://github.com/rmosolgo/graphiql-rails/issues/106). See more details in [issue #13](https://github.com/rmosolgo/graphiql-rails/issues/13#issuecomment-640366886)
 
 ### Configuration
 

diff --git a/test/controllers/editors_controller_test.rb b/test/controllers/editors_controller_test.rb
@@ -5,6 +5,7 @@ module Rails
     class EditorsControllerTest < ActionController::TestCase
       setup do
         @routes = GraphiQL::Rails::Engine.routes
+        Object.const_set(:Sprockets, :something)
       end
 
       teardown do
@@ -13,6 +14,7 @@ class EditorsControllerTest < ActionController::TestCase
         GraphiQL::Rails.config.title = nil
         GraphiQL::Rails.config.logo = nil
         GraphiQL::Rails.config.headers = {}
+        Object.send(:remove_const, :Sprockets)
       end
 
       def graphql_params
@@ -23,7 +25,8 @@ def graphql_params
         get :show, **graphql_params
         assert_response(:success)
         assert_includes(@response.body, 'my/endpoint', 'it uses the provided path')
-        assert_match(/application-\w+\.js/, @response.body, 'it includes assets')
+        # If sprockets was actually loaded, it would apply a digest to this:
+        assert_match(/application\.js/, @response.body, 'it includes assets')
       end
 
       test 'it uses initial_query config' do

diff --git a/test/dummy/app/assets/config/manifest.js b/test/dummy/app/assets/config/manifest.js
diff --git a/test/dummy/config/application.rb b/test/dummy/config/application.rb
@@ -2,7 +2,6 @@
 
 require "action_controller/railtie"
 require "action_mailer/railtie"
-require "sprockets/railtie"
 require "rails/test_unit/railtie"
 
 # Require the gems listed in Gemfile, including any gems