Implement client-side with Stimulus

seanpdoyle · nickcharlton · commit d38f8faaa92d · 2024-02-14T11:33:45.000Z
Depend on [@hotwired/stimulus][] on the client-side. Add the client-side dependency for `@hotwired/stimulus` to the `package.json`, , then scaffold out the changes to the `application.js` and `controllers/index.js` modules. Next, migrate the jQuery-powered code into controllers: the `select` controller to integrate with `selectize.js` and the `table` controller to manage `<table>` elements. Finally, render each necessary field (`belongs_to`, `has_many`, `polymorphic`, `select`) with the `[data-controller="select"]` attribute (powered by a new `Field#html_controller` method. [@hotwired/stimulus]: https://stimulus.hotwired.dev
diff --git a/app/assets/builds/administrate/application.js b/app/assets/builds/administrate/application.js
diff --git a/app/assets/builds/administrate/application.js.map b/app/assets/builds/administrate/application.js.map
diff --git a/app/assets/javascripts/administrate/application.js b/app/assets/javascripts/administrate/application.js
@@ -3,6 +3,4 @@ import "./add_jquery";
 import {} from "jquery-ujs";
 import "selectize/dist/js/selectize.min.js";
 
-import "./components/associative";
-import "./components/select";
-import "./components/table";
+import "./controllers";
diff --git a/app/assets/javascripts/administrate/components/associative.js b/app/assets/javascripts/administrate/components/associative.js
diff --git a/app/assets/javascripts/administrate/components/select.js b/app/assets/javascripts/administrate/components/select.js
diff --git a/app/assets/javascripts/administrate/controllers/application.js b/app/assets/javascripts/administrate/controllers/application.js
@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus";
+
+const application = Application.start();
+
+// Configure Stimulus development experience
+application.debug = false;
+window.Stimulus   = application;
+
+export { application };
diff --git a/app/assets/javascripts/administrate/controllers/index.js b/app/assets/javascripts/administrate/controllers/index.js
@@ -0,0 +1,7 @@
+import { application } from "./application";
+
+import SelectController from "./select_controller";
+import TableController from "./table_controller";
+
+application.register("select", SelectController);
+application.register("table", TableController);
diff --git a/app/assets/javascripts/administrate/controllers/select_controller.js b/app/assets/javascripts/administrate/controllers/select_controller.js
@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus";
+import $ from "jquery";
+
+export default class extends Controller {
+  connect() {
+    $(this.element).selectize({});
+  }
+};
diff --git a/app/assets/javascripts/administrate/controllers/table_controller.js b/app/assets/javascripts/administrate/controllers/table_controller.js
@@ -1,7 +1,10 @@
-$(function() {
-  var keycodes = { space: 32, enter: 13 };
+import { Controller } from "@hotwired/stimulus";
+import $ from "jquery";
 
-  var visitDataUrl = function(event) {
+var keycodes = { space: 32, enter: 13 };
+
+export default class extends Controller {
+  visitDataUrl(event) {
     if (event.type == "click" ||
         event.keyCode == keycodes.space ||
         event.keyCode == keycodes.enter) {
@@ -16,8 +19,5 @@ $(function() {
         window.location = window.location.protocol + '//' + window.location.host + dataUrl;
       }
     }
-  };
-
-  $("table").on("click", ".js-table-row", visitDataUrl);
-  $("table").on("keydown", ".js-table-row", visitDataUrl);
-});
+  }
+};
diff --git a/app/views/administrate/application/_collection.html.erb b/app/views/administrate/application/_collection.html.erb
@@ -18,7 +18,7 @@ to display a collection of resources in an HTML table.
 [1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Collection
 %>
 
-<table aria-labelledby="<%= table_title %>">
+<table aria-labelledby="<%= table_title %>" data-controller="table" data-action="click->table#visitDataUrl keydown->table#visitDataUrl">
   <thead>
     <tr>
       <% collection_presenter.attribute_types.each do |attr_name, attr_type| %>
diff --git a/app/views/fields/belongs_to/_form.html.erb b/app/views/fields/belongs_to/_form.html.erb
@@ -22,5 +22,6 @@ that displays all possible records to associate with.
 <div class="field-unit__field">
   <%= f.select(field.permitted_attribute,
                options_for_select(field.associated_resource_options, field.selected_option),
-               include_blank: field.include_blank_option) %>
+               {include_blank: field.include_blank_option},
+               data: {controller: field.html_controller}) %>
 </div>
diff --git a/app/views/fields/has_many/_form.html.erb b/app/views/fields/has_many/_form.html.erb
@@ -23,7 +23,7 @@ and is augmented with [Selectize].
   <%= f.label field.attribute, for: "#{f.object_name}_#{field.attribute_key}" %>
 </div>
 <div class="field-unit__field">
-  <%= f.select(field.attribute_key, nil, {}, multiple: true) do %>
+  <%= f.select(field.attribute_key, nil, {}, multiple: true, data: {controller: field.html_controller}) do %>
     <%= options_for_select(field.associated_resource_options, field.selected_options) %>
   <% end %>
 </div>
diff --git a/app/views/fields/polymorphic/_form.html.erb b/app/views/fields/polymorphic/_form.html.erb
@@ -22,7 +22,7 @@ This partial renders an input element for polymorphic relationships.
 
   <div class="field-unit__field">
     <%= pf.hidden_field(:type, value: field.class.name) %>
-    <%= pf.select(:value) do %>
+    <%= pf.select(:value, {}, data: {controller: field.html_controller}) do %>
       <%= grouped_options_for_select(field.associated_resource_grouped_options, field.selected_global_id, prompt: true) %>
     <% end %>
   </div>
diff --git a/app/views/fields/select/_form.html.erb b/app/views/fields/select/_form.html.erb
@@ -26,7 +26,8 @@ to be displayed on a resource's edit form page.
         field.selectable_options,
         field.data,
       ),
-      include_blank: field.include_blank_option
+      {include_blank: field.include_blank_option},
+      data: {controller: field.html_controller}
     )
   %>
 </div>
diff --git a/app/views/layouts/administrate/application.html.erb b/app/views/layouts/administrate/application.html.erb
@@ -24,6 +24,7 @@ By default, it renders:
   <%= render "stylesheet" %>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag if defined?(csp_meta_tag) %>
+  <%= render "javascript" %>
 </head>
 <body>
   <%= render "icons" %>
@@ -36,7 +37,5 @@ By default, it renders:
       <%= yield %>
     </main>
   </div>
-
-  <%= render "javascript" %>
 </body>
 </html>
diff --git a/lib/administrate/field/associative.rb b/lib/administrate/field/associative.rb
@@ -46,6 +46,10 @@ def associated_class_name
         end
       end
 
+      def html_controller
+        "select"
+      end
+
       private
 
       def associated_dashboard
diff --git a/lib/administrate/field/base.rb b/lib/administrate/field/base.rb
@@ -44,6 +44,10 @@ def html_class
         self.class.html_class
       end
 
+      def html_controller
+        nil
+      end
+
       def name
         attribute.to_s
       end
diff --git a/lib/administrate/field/has_one.rb b/lib/administrate/field/has_one.rb
@@ -48,6 +48,10 @@ def linkable?
         data.try(:persisted?)
       end
 
+      def html_controller
+        "select"
+      end
+
       private
 
       def resolver
diff --git a/lib/administrate/field/select.rb b/lib/administrate/field/select.rb
@@ -35,6 +35,10 @@ def active_record_enum?
       def active_record_enum_values
         resource.class.defined_enums[attribute.to_s].map(&:first)
       end
+
+      def html_controller
+        "select"
+      end
     end
   end
 end
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
     "lint:css": "stylelint app/assets/stylesheets/administrate/**/*.scss"
   },
   "dependencies": {
+    "@hotwired/stimulus": "^3.2.2",
     "esbuild": "^0.18.11",
     "jquery": "^3.7.0",
     "jquery-ujs": "^1.2.3",
diff --git a/spec/administrate/views/fields/has_many/_form_spec.rb b/spec/administrate/views/fields/has_many/_form_spec.rb
@@ -5,7 +5,8 @@
     it "displays the association name" do
       has_many = double(
         attribute_key: :associated_object_ids,
-        attribute: :associated_objects
+        attribute: :associated_objects,
+        html_controller: "select"
       )
 
       render(
diff --git a/spec/administrate/views/fields/select/_edit_spec.rb b/spec/administrate/views/fields/select/_edit_spec.rb
@@ -9,7 +9,8 @@
       attribute: :email_subscriber,
       data: false,
       selectable_options: [true, false, nil],
-      include_blank_option: false
+      include_blank_option: false,
+      html_controller: "select"
     )
 
     render(
@@ -18,7 +19,7 @@
     )
 
     expect(rendered).to have_css(
-      %(select[name="customer[email_subscriber]"]
+      %(select[name="customer[email_subscriber]"][data-controller~=select]
         option[value="false"][selected="selected"])
     )
   end
@@ -30,7 +31,8 @@
       attribute: :email_subscriber,
       data: "Yes",
       selectable_options: ["Yes", "No"],
-      include_blank_option: "Unknown"
+      include_blank_option: "Unknown",
+      html_controller: "select"
     )
 
     render(
@@ -39,7 +41,7 @@
     )
 
     expect(rendered).to have_css(
-      %(select[name="customer[email_subscriber]"] option[value=""]),
+      %(select[name="customer[email_subscriber]"][data-controller~="select"] option[value=""]),
       text: "Unknown"
     )
   end
diff --git a/spec/example_app/app/views/application/_javascript.html.erb b/spec/example_app/app/views/application/_javascript.html.erb
@@ -1,3 +1,7 @@
+<% Administrate::Engine.javascripts.each do |js_path| %>
+  <%= javascript_include_tag js_path %>
+<% end %>
+
 <%= yield :javascript %>
 
 <% if Rails.env.test? %>
diff --git a/spec/example_app/app/views/layouts/application.html.erb b/spec/example_app/app/views/layouts/application.html.erb
@@ -14,6 +14,7 @@
   <%= stylesheet_link_tag "application", media: "all" %>
   <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
   <%= csrf_meta_tags %>
+  <%= render "javascript" %>
 </head>
 
 <body class="<%= body_class %>">
@@ -24,8 +25,6 @@
       <%= render "flashes" -%>
 
       <%= yield %>
-
-      <%= render "javascript" %>
     </div>
   </main>
 </body>
diff --git a/spec/example_app/spec/features/log_search_spec.rb b/spec/example_app/spec/features/log_search_spec.rb
@@ -27,6 +27,6 @@ def have_records_table(rows:)
   end
 
   def submit_search
-    page.execute_script("$('.search').submit()")
+    page.find_field("Search").send_keys(:enter)
   end
 end
diff --git a/spec/features/search_spec.rb b/spec/features/search_spec.rb
@@ -154,7 +154,7 @@ def page_params
   end
 
   def submit_search
-    page.execute_script("$('.search').submit()")
+    page.find_field("Search").send_keys(:enter)
   end
 
   def order_row_match(order)
diff --git a/spec/lib/fields/belongs_to_spec.rb b/spec/lib/fields/belongs_to_spec.rb
@@ -14,6 +14,18 @@
     )
   end
 
+  describe "#html_controller" do
+    it "returns select" do
+      page = :show
+      owner = double
+      field = Administrate::Field::BelongsTo.new(:owner, owner, page)
+
+      html_controller = field.html_controller
+
+      expect(html_controller).to eq("select")
+    end
+  end
+
   describe "#to_partial_path" do
     it "returns a partial based on the page being rendered" do
       page = :show
diff --git a/spec/lib/fields/has_many_spec.rb b/spec/lib/fields/has_many_spec.rb
@@ -4,6 +4,18 @@
 require "support/mock_relation"
 
 describe Administrate::Field::HasMany do
+  describe "#html_controller" do
+    it "returns select" do
+      page = :show
+      items = double
+      field = Administrate::Field::HasMany.new(:items, items, page)
+
+      html_controller = field.html_controller
+
+      expect(html_controller).to eq("select")
+    end
+  end
+
   describe "#to_partial_path" do
     it "returns a partial based on the page being rendered" do
       page = :show
diff --git a/spec/lib/fields/polymorphic_spec.rb b/spec/lib/fields/polymorphic_spec.rb
@@ -7,6 +7,17 @@
 describe Administrate::Field::Polymorphic do
   include FieldMatchers
 
+  describe "#html_controller" do
+    it "returns select" do
+      page = :show
+      field = Administrate::Field::Polymorphic.new(:foo, "hello", page)
+
+      html_controller = field.html_controller
+
+      expect(html_controller).to eq("select")
+    end
+  end
+
   describe "#to_partial_path" do
     it "returns a partial based on the page being rendered" do
       page = :show
diff --git a/spec/lib/fields/select_spec.rb b/spec/lib/fields/select_spec.rb
@@ -2,6 +2,23 @@
 require "administrate/field/select"
 
 describe Administrate::Field::Select do
+  describe "#html_controller" do
+    it "returns select" do
+      customer = create(:customer)
+      field = described_class.new(
+        :email_subscriber,
+        "yes",
+        :_page_,
+        resource: customer,
+        collection: ["no", "yes", "absolutely"]
+      )
+
+      html_controller = field.html_controller
+
+      expect(html_controller).to eq("select")
+    end
+  end
+
   describe "#selectable_options" do
     it "works when :collection is an array" do
       customer = create(:customer)
diff --git a/yarn.lock b/yarn.lock
@@ -154,6 +154,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.11.tgz#6526c7e1b40d5b9f0a222c6b767c22f6fb97aa57"
   integrity sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==
 
+"@hotwired/stimulus@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
+  integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
