hotwire-debug 0.1.0 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f94c65f6c5769077e4d8d7961e3f2ba2e81aaf6f1da72e424b8bfae12832d763
-  data.tar.gz: f84644d64c5edfee0e97f0cfad7f554780d8931f129885a953bca1447380c472
+  metadata.gz: 9329db41d14bc4bd4088b9d297fbd02af035c5ad0a157ba02117262de227fb50
+  data.tar.gz: 152caa7ceb43ee1a77d83b35cb5973ecb0f9ae1f923e70df72e0f1ac1e45206c
 SHA512:
-  metadata.gz: 528b98024db5acbdc1e934fe13bcc34cf8e22f07e56e4914d17bb51f7a6e0b57819f93883426facad76b40d1c8fa48a87a4fe0cd3b393cae2f43c1509ac14ae0
-  data.tar.gz: 98df50002c62a9c42781650c6c14f0989faba3fe7c58bf4ef7ed04eb9fe4edebc6f9a2a72c5e9220e7cfb1c1d391fea7be77ae8b8d3a01d566916e25aa49e3b8
+  metadata.gz: 8ad1a938f4de1a5dcf99323e3a12e4fe0e4d09207d94609d284891f336ae4fa77390a697c92f3901ccb571704a1becd1d68807e9b7cc2a7f6ef186d748730558
+  data.tar.gz: ef1de119c5a8b4915ebca1ac5093e38644a01d82617e1dd1bc4788c8f7e8d931bd491d14178421d476bd8af7c8bbaf749815b4e7cb5d59ceceec17d32973791b

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    hotwire-debug (0.1.0)
+    hotwire-debug (0.1.5)
 
 GEM
   remote: https://rubygems.org/
@@ -9,6 +9,7 @@ GEM
     rake (10.5.0)
 
 PLATFORMS
+  ruby
   x86_64-darwin-20
 
 DEPENDENCIES

data/README.md

@@ -1,4 +1,5 @@
 # Hotwire::Debug
+<img src="https://user-images.githubusercontent.com/8511/104638257-8fdc4900-566b-11eb-8230-c267d09c5de9.mov" style="width: 300px" alt="hotwire-debug v0.1.1 demo">
 
 ## Installation
 
@@ -18,18 +19,12 @@ Or install it yourself as:
 
 ## Usage
 
-This gem adds assets into your applications vendor assets javascripts/stylesheets directories.
+### Asset Pipeline
 
-Update your `application.js`
-```js
-//= require hotwire-debug
-```
+Run the generator:
 
-Update your `application.css`
-```css
-/*
-*= require hotwire-debug
-*/
+```
+bin/rails g hotwire_debug:install
 ```
 
 If your application does not already include stylesheets and javascripts in the layout, add them.
@@ -39,6 +34,33 @@ If your application does not already include stylesheets and javascripts in the
     <%= javascript_include_tag 'application', media: 'all' %>
 ```
 
+### Webpacker
+
+Run the generator:
+
+```
+bin/rails g hotwire_debug:webpacker
+```
+
+# Options
+
+## Colorscheme
+By default the color-scheme is a Hotwire-inspired teal and yellow. There's an alternate color scheme available. Add `data-hotwire-scheme-dark` to the root element.
+
+## Postition
+
+The default behavior is to appear in the lower right corner of the UI. You can change the vertical position by adding one of the following:
+
+* `data-hotwire-debug-top`
+* `data-hotwire-debug-middle`
+* `data-hotwire-debug-bottom` [Default]
+
+For hoizontal positioning you can apply to the root element:
+
+* `data-hotwire-debug-left`
+* `data-hotwire-debug-center`
+* `data-hotwire-debug-right`
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

data/hotwire-debug.gemspec

@@ -6,8 +6,8 @@ require "hotwire/debug/version"
 Gem::Specification.new do |spec|
   spec.name          = "hotwire-debug"
   spec.version       = Hotwire::Debug::VERSION
-  spec.authors       = ["Jim Remsik", "Jonathan Greenberg"]
-  spec.email         = ["jim@beflagrant.com", "jonathan@beflagrant.com"]
+  spec.authors       = ["Jim Remsik", "Jonathan Greenberg", "Ben Vandgrift"]
+  spec.email         = ["jim@beflagrant.com", "jonathan@beflagrant.com", "ben@beflagrant.com"]
 
   spec.summary       = %q{Hotwire-debug highlights changes that occur via turbo-rails.}
   spec.homepage      = "http://www.github.com/beflagrant/hotwire-debug"

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

@@ -0,0 +1,31 @@
+module HotwireDebug
+  class InstallGenerator < Rails::Generators::Base
+
+    def append_javascript_imports
+      js = 'app/assets/javascripts/application.js'
+      File.new(js,File::CREAT) unless File.exists?(js)
+      inject_into_file js, "\n//= require hotwire-debug\n"
+    end
+
+    def append_stylesheet_imports
+
+      css = 'app/assets/stylesheets/application.css'
+      scss = 'app/assets/stylesheets/application.scss'
+      if File.exists?(css)
+        target = css
+      elsif File.exists?(scss)
+        target = scss
+      else
+        # if neither exist, create a css file
+        File.new(css,File::CREAT) unless File.exists?(css)
+        target = css
+      end
+
+      inject_into_file target, <<~STYLE
+      /*
+      *= require hotwire-debug
+      */
+      STYLE
+    end
+  end
+end

data/lib/generators/hotwire_debug/webpacker/templates/hotwire-debug.js

@@ -0,0 +1,46 @@
+var turboEvents = [
+    "turbo:before-cache",
+    "turbo:before-render",
+    "turbo:before-visit",
+    "turbo:click",
+    "turbo:load",
+    "turbo:render",
+    "turbo:submit-end",
+    "turbo:submit-start",
+  ]
+  
+  turboEvents.forEach(function(turboEvent) {
+    document.addEventListener(turboEvent, function() {
+      if (showChanges()) {
+        console.log("⚡️ " + turboEvent);
+        handleChange();
+      }
+    });
+  })
+  
+  function showChanges () {
+    return document.documentElement.hasAttribute('data-hotwire-debug')
+  }
+  
+  function handleChange() {
+    document.querySelectorAll('turbo-frame:first-child').forEach(function(target) {
+      target.setAttribute('data-turbo-frame-id', target.closest('turbo-frame').id);
+    });
+  }
+  
+  window.addEventListener("turbo:load", () => {
+    let hotwireToggle = document.getElementById('hotwire-toggle');
+  
+    if (hotwireToggle == null) {
+      hotwireToggle = document.createElement("div");
+      hotwireToggle.innerHTML = '<svg viewBox="0 0 196 196" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: #000000; } @media (prefers-color-scheme: dark) { path { fill: #ffffff; } } </style> <path d="m16.38 184.8 109.46-44.72-35.27-3.31 76.73-66.59-44.33-4.16 53.9-55.53-136.52 70.03 54.89 6.44-67.32 54.38 30.07 2.97z"/> </svg>';
+      hotwireToggle.id = "hotwire-toggle";
+      document.body.append(hotwireToggle);
+  
+      hotwireToggle.addEventListener("click", function() {
+        document.documentElement.toggleAttribute("data-hotwire-debug");
+        handleChange();
+      });
+    }
+  });
+  

data/lib/generators/hotwire_debug/webpacker/templates/hotwire-debug.scss

@@ -0,0 +1,101 @@
+:root {
+  --color-highlight: rgba(255, 232, 1, 1);
+  --color-main: rgba(95, 206, 214, 1);
+  --color-secondary: rgba(239, 107, 170, 1);
+}
+:root[data-hotwire-scheme-dark] {
+  --color-highlight: rgba(200, 200, 200, 1);
+  --color-main: rgba(0, 0, 0, 1);
+}
+:root[data-hotwire-debug-bottom] #hotwire-toggle {
+  bottom: 1rem !important;
+  top: unset;
+}
+:root[data-hotwire-debug-middle] #hotwire-toggle {
+  bottom: 50% !important;
+  top: unset;
+}
+:root[data-hotwire-debug-top] #hotwire-toggle {
+  top: 1rem !important;
+}
+:root[data-hotwire-debug-center] #hotwire-toggle {
+  right: 50% !important;
+}
+:root[data-hotwire-debug-left] #hotwire-toggle {
+  left: 1rem !important;
+  right: unset;
+}
+:root[data-hotwire-debug-right] #hotwire-toggle {
+  right: 1rem !important;
+}
+#hotwire-toggle {
+  height: 2rem;
+  position: fixed;
+  right: 2rem;
+  top: 1rem;
+  width: 2rem;
+  z-index: 20;
+ 
+  svg path {
+    fill: var(--color-main) !important;
+    transition: fill ease-in-out 0.3s;
+    stroke: var(--color-secondary);
+  }
+  &:hover svg {
+    fill: var(--color-highlight) !important;
+    filter: drop-shadow(0 0 0.5rem var(--color-main));
+  }
+}
+:root[data-hotwire-debug] #hotwire-toggle {
+  svg path {
+    fill: var(--color-highlight) !important;
+    stroke: var(--color-secondary);
+  }
+
+  &:hover {
+    svg path {
+      stroke-width: 0.5rem;
+      filter: drop-shadow(0 0 0.5rem var(--color-highlight));
+    }
+  }
+}
+[data-hotwire-debug] {
+  turbo-frame {
+    border: 1px solid var(--color-main);
+    display: block;
+    padding-top: 1rem;
+    transition: all ease-in-out 0.3s;
+    &:hover {
+      display: block;
+      position: relative;
+
+      &:after {
+        color: var(--color-main) !important;
+        content: attr(id);
+        display: block;
+        font-weight: bold;
+        position: absolute;
+        right: 1rem;
+        top: 0;
+        z-index: 10;
+      }
+    }
+
+    & > :not(turbo-frame) {
+      animation-duration: 0.25s;
+      animation-name: highlight-frame-change;
+      border-radius: 0 1rem 1rem 0;
+    }
+  }
+  @keyframes highlight-frame-change {
+    0% {
+      box-shadow: unset;
+    }
+    50% {
+      box-shadow:inset 0 0 4rem var(--color-main);
+    }
+    100% {
+      box-shadow: unset;
+    }
+  }
+}

data/lib/generators/hotwire_debug/webpacker/webpacker_generator.rb

@@ -0,0 +1,13 @@
+module HotwireDebug
+  class WebpackerGenerator < Rails::Generators::Base
+    source_root File.expand_path('templates', __dir__)
+    def copy_assets
+      template "hotwire-debug.js", "app/javascript/vendor/hotwire-debug.js"
+      template "hotwire-debug.scss", "app/javascript/vendor/hotwire-debug.scss"
+    end
+    def append_imports
+      inject_into_file 'app/javascript/packs/application.js', "\nimport '../vendor/hotwire-debug';\n"
+      inject_into_file 'app/javascript/stylesheets/application.scss', "\n@import '../vendor/hotwire-debug';\n"
+    end
+  end
+end

data/lib/hotwire/debug/version.rb

@@ -1,5 +1,5 @@
 module Hotwire
   module Debug
-    VERSION = "0.1.0"
+    VERSION = "0.1.5"
   end
 end

data/vendor/assets/javascripts/hotwire-debug.js

@@ -12,7 +12,7 @@ var turboEvents = [
 turboEvents.forEach(function(turboEvent) {
   document.addEventListener(turboEvent, function() {
     if (showChanges()) {
-      console.log(turboEvent);
+      console.log("⚡️ " + turboEvent);
       handleChange();
     }
   });
@@ -23,7 +23,7 @@ function showChanges () {
 }
 
 function handleChange() {
-  document.querySelectorAll('turbo-frame > div, turbo-frame > form').forEach(function(target) { 
+  document.querySelectorAll('turbo-frame:first-child').forEach(function(target) {
     target.setAttribute('data-turbo-frame-id', target.closest('turbo-frame').id);
   });
 }
@@ -42,4 +42,4 @@ window.addEventListener("turbo:load", () => {
       handleChange();
     });
   }
-});
+});

data/vendor/assets/stylesheets/hotwire-debug.scss

@@ -1,67 +1,89 @@
 :root {
-  --color-teal: rgba(95, 206, 214, 1);
-  --color-teal-trans: rgba(95, 206, 214, 0.4);
-  --color-pink: rgba(223, 116, 168, 1);
-  --color-pink-trans: rgba(223, 116, 168, 0.4);
-  --color-yellow: rgba(255, 224, 0, 1);
+  --color-highlight: rgba(255, 232, 1, 1);
+  --color-main: rgba(95, 206, 214, 1);
+  --color-secondary: rgba(239, 107, 170, 1);
 }
-body > #hotwire-toggle {
+:root[data-hotwire-scheme-dark] {
+  --color-highlight: rgba(200, 200, 200, 1);
+  --color-main: rgba(0, 0, 0, 1);
+}
+:root[data-hotwire-debug-bottom] #hotwire-toggle {
+  bottom: 1rem !important;
+  top: unset;
+}
+:root[data-hotwire-debug-middle] #hotwire-toggle {
+  bottom: 50% !important;
+  top: unset;
+}
+:root[data-hotwire-debug-top] #hotwire-toggle {
+  top: 1rem !important;
+}
+:root[data-hotwire-debug-center] #hotwire-toggle {
+  right: 50% !important;
+}
+:root[data-hotwire-debug-left] #hotwire-toggle {
+  left: 1rem !important;
+  right: unset;
+}
+:root[data-hotwire-debug-right] #hotwire-toggle {
+  right: 1rem !important;
+}
+#hotwire-toggle {
+  height: 2rem;
   position: fixed;
-  top: 1rem;
   right: 2rem;
-  height: 2rem;
+  top: 1rem;
   width: 2rem;
   z-index: 20;
-  
+ 
   svg path {
-    fill: var(--color-black) !important;
+    fill: var(--color-main) !important;
     transition: fill ease-in-out 0.3s;
+    stroke: var(--color-secondary);
   }
-  &:hover svg path {
-    fill: var(--color-pink) !important;
+  &:hover svg {
+    fill: var(--color-highlight) !important;
+    filter: drop-shadow(0 0 0.5rem var(--color-main));
   }
 }
-html[data-hotwire-debug] #hotwire-toggle {
+:root[data-hotwire-debug] #hotwire-toggle {
   svg path {
-    fill: var(--color-yellow) !important;
-    stroke: var(--color-pink);
+    fill: var(--color-highlight) !important;
+    stroke: var(--color-secondary);
   }
 
   &:hover {
     svg path {
-      stroke-width: 4px;
+      stroke-width: 0.5rem;
+      filter: drop-shadow(0 0 0.5rem var(--color-highlight));
     }
   }
 }
 [data-hotwire-debug] {
   turbo-frame {
+    border: 1px solid var(--color-main);
     display: block;
+    padding-top: 1rem;
     transition: all ease-in-out 0.3s;
-
     &:hover {
       display: block;
       position: relative;
-      box-shadow: inset 0 0 3rem var(--color-teal-trans);
 
       &:after {
-        color: rgb(30, 120, 120) !important;
+        color: var(--color-main) !important;
         content: attr(id);
+        display: block;
         font-weight: bold;
         position: absolute;
-        display: block;
-        top: 49%;
         right: 1rem;
-        -webkit-transform: translateY(-50%);
-        -moz-transform: translateY(-50%);
-        -ms-transform: translateY(-50%);
-        transform: translateY(-50%);
+        top: 0;
         z-index: 10;
       }
     }
 
     & > :not(turbo-frame) {
-      animation-name: highlight-frame-change;
       animation-duration: 0.25s;
+      animation-name: highlight-frame-change;
       border-radius: 0 1rem 1rem 0;
     }
   }
@@ -70,10 +92,10 @@ html[data-hotwire-debug] #hotwire-toggle {
       box-shadow: unset;
     }
     50% {
-      box-shadow:inset 0 0 4rem var(--color-teal);
+      box-shadow:inset 0 0 4rem var(--color-main);
     }
     100% {
       box-shadow: unset;
     }
   }
-}
+}

metadata

@@ -1,15 +1,16 @@
 --- !ruby/object:Gem::Specification
 name: hotwire-debug
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.5
 platform: ruby
 authors:
 - Jim Remsik
 - Jonathan Greenberg
+- Ben Vandgrift
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-01-05 00:00:00.000000000 Z
+date: 2021-02-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -43,6 +44,7 @@ description:
 email:
 - jim@beflagrant.com
 - jonathan@beflagrant.com
+- ben@beflagrant.com
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -57,6 +59,12 @@ files:
 - bin/console
 - bin/setup
 - hotwire-debug.gemspec
+- lib/generators/hotwire_debug/.DS_Store
+- lib/generators/hotwire_debug/install/install_generator.rb
+- lib/generators/hotwire_debug/webpacker/.DS_Store
+- lib/generators/hotwire_debug/webpacker/templates/hotwire-debug.js
+- lib/generators/hotwire_debug/webpacker/templates/hotwire-debug.scss
+- lib/generators/hotwire_debug/webpacker/webpacker_generator.rb
 - lib/hotwire/debug.rb
 - lib/hotwire/debug/version.rb
 - package.json