hotwire-debug 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 71cb728ec966ea0591ae2b03fe356cacf1ca74f6747ae160ceef218d4d14fe49
-  data.tar.gz: 4ac75708ebb69606e685596c49e61351d3ecbb99ea60b61af904bbe6b4d49042
+  metadata.gz: b1026bde2d71a7f1fa6d5cd1df7505fc44f9f1a3a1988047496fb13543bc392d
+  data.tar.gz: d59d6b05cad3f001d633e92ed41302cf66b2b170e80aaddfa95918ef0c78bde7
 SHA512:
-  metadata.gz: 0a923010b96de7f28058f44b1b969bafdc70b541effbde8bea6c710e69f3fd8151a5c13eb4b05a201f2c82b2288038953206141c80131d04aca3450a8c427cb6
-  data.tar.gz: 7cff9b4305e92934af2d4bccc88ac9e903ebcfc2e34e190783b0f57407116905e29e490648b39d0c6e89a58f1442bda1ebf7bd52d1b800b4f17ebf3bac7ab967
+  metadata.gz: c25c1c89e908fb7e38d268681284063cb0993a57a37bf5b54c465e3893686b93e51f26eaff611138302dc90496bb2024fc2ffb08b27bb3607e86f1b169ca47ae
+  data.tar.gz: d41559b1e310564bda32155687a3a8ff4c7db94d27d7c7a9af7ecb775e40fe0c21a88c20d90934e4d4b2165426af9cf81b1c00961ef5ad1038c7f3a76fad39ed

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    hotwire-debug (0.1.1)
+    hotwire-debug (0.1.2)
 
 GEM
   remote: https://rubygems.org/

data/README.md

@@ -1,5 +1,5 @@
 # Hotwire::Debug
-
+![hotwire-debug v0.1.1 demo](https://user-images.githubusercontent.com/8511/104358150-aa7bba00-54d3-11eb-88b1-a01ef3ee7ae8.gif)
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -18,18 +18,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 +33,14 @@ 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
 
 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.

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,78 @@
+:root {
+    --color-highlight: rgba(255, 232, 1, 1);
+    --color-main: rgba(95, 206, 214, 1);
+  }
+  :root[data-hotwire-scheme-dark] {
+    --color-highlight: rgba(200, 200, 200, 1);
+    --color-main: rgba(0, 0, 0, 1);
+  }
+  #hotwire-toggle {
+    height: 2rem;
+    position: fixed;
+    right: 2rem;
+    bottom: 1rem;
+    width: 2rem;
+    z-index: 20;
+   
+    svg path {
+      fill: var(--color-main) !important;
+      transition: fill ease-in-out 0.3s;
+    }
+    &: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;
+    }
+  
+    &: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.1"
+    VERSION = "0.1.2"
   end
 end

metadata

@@ -1,15 +1,16 @@
 --- !ruby/object:Gem::Specification
 name: hotwire-debug
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Jim Remsik
 - Jonathan Greenberg
+- Ben Vandgrift
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-01-12 00:00:00.000000000 Z
+date: 2021-01-14 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