DEV: Quality of life improvements when working on MP client-side code

README.md

@@ -407,6 +407,16 @@ if JSON.const_defined?(:Pure)
 end
 ```
 
+## Development
+
+If you want to contribute to this project, that's great, thank you! You can run the following rake task:
+
+```
+$ bundle exec rake client_dev
+```
+
+which will start a local Sinatra server at `http://localhost:9292` where you'll be able to preview your changes. Refreshing the page should be enough to see any changes you make to files in the `lib/html` directory.
+
 ## Running the Specs
 
 ```

Rakefile

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 require 'rubygems'
 require 'bundler'
 require 'bundler/gem_tasks'
@@ -50,6 +51,7 @@ end\n"
   end
 end
 
+@mini_racer_context = nil
 desc "generate vendor asset file"
 task :write_vendor_js do
   require 'mini_racer'
@@ -65,13 +67,13 @@ task :write_vendor_js do
     templates[id] = node.content
   end
 
-  c = MiniRacer::Context.new
-  c.eval(dot_js)
+  @mini_racer_context ||= MiniRacer::Context.new
+  @mini_racer_context.eval(dot_js)
   templates_js = "MiniProfiler.templates = {};\n"
 
   templates.each do |k, v|
     template = v.gsub('`', '\\`')
-    compiled = c.eval <<~JS
+    compiled = @mini_racer_context.eval <<~JS
       doT.compile(`#{template}`).toString()
     JS
     templates_js += <<~JS
@@ -96,6 +98,29 @@ task :write_vendor_js do
   File.write(path, content)
 end
 
+desc "Start Sinatra server for client-side development"
+task :client_dev do
+  require 'listen'
+
+  regexp = /(vendor\.js|includes\.css)$/
+  listener = Listen.to(File.expand_path("lib/html", __dir__)) do |modified|
+    next if modified.all? { |m| m =~ regexp }
+    print("Assets change detected; updating ASSET_VERSION constant and recompiling templates... ")
+    rake_task = Rake.application[:update_asset_version]
+    rake_task.all_prerequisite_tasks.each(&:reenable)
+    rake_task.reenable
+    rake_task.invoke
+    puts "Done"
+  rescue => err
+    puts "\nError occurred: #{err.inspect}"
+  end
+  listener.start
+  pid = spawn("cd website && BUNDLE_GEMFILE=Gemfile bundle exec rackup")
+  Process.wait(pid)
+rescue Interrupt
+  listener.stop
+end
+
 desc "copy files from other parts of the tree"
 task :copy_files do
   # TODO grab files from MiniProfiler/UI

lib/mini_profiler/profiler.rb

@@ -152,7 +152,7 @@ def serve_html(env)
       resources_env = env.dup
       resources_env['PATH_INFO'] = file_name
 
-      rack_file = Rack::File.new(MiniProfiler.resources_root, 'Cache-Control' => 'max-age:86400')
+      rack_file = Rack::File.new(MiniProfiler.resources_root, 'Cache-Control' => "max-age:#{cache_control_value}")
       rack_file.call(resources_env)
     end
 
@@ -673,5 +673,8 @@ def cancel_auto_inject(env)
       current.inject_js = false
     end
 
+    def cache_control_value
+      86400
+    end
   end
 end

rack-mini-profiler.gemspec

@@ -40,6 +40,7 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'mini_racer'
   s.add_development_dependency 'nokogiri'
   s.add_development_dependency 'rubocop-discourse'
+  s.add_development_dependency 'listen'
 
   s.require_paths = ["lib"]
 end

website/Gemfile

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+gem 'sinatra'
+gem 'rack-mini-profiler', path: '../'
+gem 'puma'
+gem 'listen'
+gem 'byebug'

website/config.ru

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+require './sample'
+run Sample

website/sample.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+require 'rack-mini-profiler'
+require 'sinatra'
+require 'sinatra/base'
+
+class Sample < Sinatra::Base
+  use Rack::MiniProfiler
+
+  @@data = JSON.parse(File.read(File.expand_path("data.json", __dir__)), symbolize_names: true)
+  @@page_struct = Rack::MiniProfiler::TimerStruct::Page.allocate
+  @@page_struct.instance_variable_set(:@attributes, @@data)
+  @@patched = false
+
+  get '/' do
+    storage_instance = Rack::MiniProfiler.config.storage_instance
+    storage_instance.instance_variable_set(:@timer_struct_cache, {})
+    storage_instance.instance_variable_set(:@user_view_cache, {})
+    storage_instance.save(@@page_struct)
+    patch_mini_profiler(@@page_struct) unless @@patched
+    help = <<~TEXT
+      To the left of this page there should be 2 speed badges.
+      The first one (with small load time) represents metrics for this particular page.
+      The other one (with ~2.5 seconds load time) is taken from a real application (Discourse),
+      modified so that it has as many UI elements as possible and always included with this page
+      to make easier for you to test your JavaScript and CSS changes. Refreshing this page should
+      be enough to see any changes you make to files in the <code>lib/html</code> directory.
+    TEXT
+    body = <<~HTML
+      <html>
+        <head>
+        </head>
+        <body>
+          <div style="margin: auto; width: 660px; font-family: Arial">
+            <h2>Rack Mini Profiler</h2>
+            <p>#{help.split("\n").join(' ')}</p>
+          </div>
+        </body>
+      </html>
+    HTML
+    body.dup
+  end
+
+  def patch_mini_profiler(page)
+    Rack::MiniProfiler.send(:define_method, :cache_control_value) do |*args|
+      0
+    end
+
+    Rack::MiniProfiler.send(:alias_method, :ids_original, :ids)
+    Rack::MiniProfiler.send(:define_method, :ids) do |*args, &blk|
+      s = self.send(:ids_original, *args, &blk)
+      s << page[:id]
+      s
+    end
+    @@patched = true
+  end
+end