Forward ruby enumeration demo params with dark mode

A bit convoluted here, but continuing down this path of keeping the demo
JS in a separate repo: we want to request an iframe URL with query
params with color scheme choices. Dark mode is not kept on the server at
the moment, so I use a Stimulus controller to set the final turbo frame
url on the frontend which is later converted to the appropriate iframe
url on the backend.

Send query params from Ruby to JS to Ruby to JS!!!

app/content/pages/articles/simple-trick-to-understand-ruby-lazy-enumerator.html.mdrb

@@ -13,21 +13,21 @@ tags:
 
 Below is how I visualize how Ruby normally processes a chain of methods on an enumerable object.
 
-<%= turbo_frame_tag [:ruby, :enumeration, :eager], src: examples_ruby_enumeration_path(demo_type: "eager") do %>
+<%= turbo_frame_tag [:ruby, :enumeration, :eager], data: { "controller" => "demo-ruby-enumeration", "demo-ruby-enumeration-url-value" => examples_ruby_enumeration_url(demo_type: "eager") } do %>
 
   <div><%= image_tag "articles/simple-trick-to-understand-ruby-lazy-enumerator/loading.gif" %></div>
 <% end %>
 
 Now visualize how enumeration changes when using `.lazy` enumeration.
 
-<%= turbo_frame_tag [:ruby, :enumeration, :lazy], src: examples_ruby_enumeration_path(demo_type: "lazy") do %>
+<%= turbo_frame_tag [:ruby, :enumeration, :lazy], data: { "controller" => "demo-ruby-enumeration", "demo-ruby-enumeration-url-value" => examples_ruby_enumeration_url(demo_type: "lazy") } do %>
 
   <div><%= image_tag "articles/simple-trick-to-understand-ruby-lazy-enumerator/loading.gif" %></div>
 <% end %>
 
 Here’s the demo again with some controls to play with the speed and style of enumeration:
 
-<%= turbo_frame_tag [:ruby, :enumeration, :combined], src: examples_ruby_enumeration_path(demo_type: "combined") do %>
+<%= turbo_frame_tag [:ruby, :enumeration, :combined], data: { "controller" => "demo-ruby-enumeration", "demo-ruby-enumeration-url-value" => examples_ruby_enumeration_url(demo_type: "combined") } do %>
 
   <div><%= image_tag "articles/simple-trick-to-understand-ruby-lazy-enumerator/loading.gif" %></div>
 <% end %>

app/controllers/examples/ruby_enumerations_controller.rb

@@ -7,8 +7,11 @@ class RubyEnumerationsController < ApplicationController
     def show
       render Demo::RubyEnumeration.new(
         demo_type: params[:demo_type],
-        background: @color_scheme.weight_50.hex
+        is_dark_mode: requesting_dark_mode?,
+        background: (@color_scheme.weight_50.hex unless requesting_dark_mode?)
       )
     end
+
+    def requesting_dark_mode? = params[:is_dark_mode] == "true"
   end
 end

app/javascript/controllers/darkmode.js

@@ -12,6 +12,9 @@ const SYSTEM = 'system';
 const modes = [DARK, LIGHT, SYSTEM];
 let mode = SYSTEM;
 
+export const isDarkMode = () =>
+  document.documentElement.classList.contains(DARK);
+
 const broadcastDark = () => {
   mode = DARK;
   document.documentElement.classList.add(DARK);
@@ -79,16 +82,20 @@ export default class extends Controller {
       case DARK:
         broadcastDark();
         storeTheme(DARK);
+        this.dispatch(DARK);
         break;
       case LIGHT:
         broadcastLight();
         storeTheme(LIGHT);
+        this.dispatch(LIGHT);
         break;
       case SYSTEM:
         if (prefersColorTheme(DARK)) {
           broadcastSystem(DARK);
+          this.dispatch(DARK);
         } else {
           broadcastSystem(LIGHT);
+          this.dispatch(LIGHT);
         }
         removeTheme();
         break;

app/javascript/controllers/demos/ruby-enumeration.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+
+import { debug } from '../../utils';
+import { isDarkMode } from '../darkmode';
+
+const console = debug('app:javascript:controllers:demos:ruby-enumeration');
+
+export default class extends Controller {
+  static values = {
+    url: String,
+  };
+
+  connect() {
+    console.log('connect');
+
+    const turboFrame = this.element;
+    const url = new URL(this.urlValue);
+
+    // Determine if the page is in Dark Mode
+    url.searchParams.append('is_dark_mode', isDarkMode());
+
+    console.log('url', url.toString());
+
+    // Set the src attribute of the Turbo Frame element
+    turboFrame.src = url.toString();
+  }
+}

app/javascript/controllers/index.js

@@ -32,6 +32,8 @@ import SnippetTweet from './snippets/tweet';
 import SearchCombobox from './searches/combobox';
 import SearchListbox from './searches/listbox';
 
+import RubyEnumerationDemo from './demos/ruby-enumeration';
+
 application.register('clipboard-copy', ClipboardCopy);
 application.register('current-page', CurrentPage);
 application.register('darkmode', Darkmode);
@@ -59,3 +61,5 @@ application.register('snippet-tweet', SnippetTweet);
 
 application.register('search-combobox', SearchCombobox);
 application.register('search-listbox', SearchListbox);
+
+application.register('demo-ruby-enumeration', RubyEnumerationDemo);

app/views/components/demo/ruby_enumeration.rb

@@ -30,9 +30,7 @@ def base_uri
     FOCUSED_DEMO_TYPES = %w[eager lazy].freeze
     def iframe_src
       uri = base_uri
-      if focused_demo_type?
-        uri.query_values = (uri.query_values || {}).merge(query).transform_keys { |k| k.to_s.camelize(:lower) }
-      end
+      uri.query_values = (uri.query_values || {}).merge(query).transform_keys { |k| k.to_s.camelize(:lower) }
       uri.to_s
     end