hotwire-debug 0.1.0 → 0.1.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +2 -1
- data/README.md +32 -10
- data/hotwire-debug.gemspec +2 -2
- data/lib/generators/hotwire_debug/.DS_Store +0 -0
- data/lib/generators/hotwire_debug/install/install_generator.rb +31 -0
- data/lib/generators/hotwire_debug/webpacker/.DS_Store +0 -0
- data/lib/generators/hotwire_debug/webpacker/templates/hotwire-debug.js +46 -0
- data/lib/generators/hotwire_debug/webpacker/templates/hotwire-debug.scss +101 -0
- data/lib/generators/hotwire_debug/webpacker/webpacker_generator.rb +13 -0
- data/lib/hotwire/debug/version.rb +1 -1
- data/vendor/assets/javascripts/hotwire-debug.js +3 -3
- data/vendor/assets/stylesheets/hotwire-debug.scss +50 -28
- metadata +10 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 9329db41d14bc4bd4088b9d297fbd02af035c5ad0a157ba02117262de227fb50
|
4
|
+
data.tar.gz: 152caa7ceb43ee1a77d83b35cb5973ecb0f9ae1f923e70df72e0f1ac1e45206c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8ad1a938f4de1a5dcf99323e3a12e4fe0e4d09207d94609d284891f336ae4fa77390a697c92f3901ccb571704a1becd1d68807e9b7cc2a7f6ef186d748730558
|
7
|
+
data.tar.gz: ef1de119c5a8b4915ebca1ac5093e38644a01d82617e1dd1bc4788c8f7e8d931bd491d14178421d476bd8af7c8bbaf749815b4e7cb5d59ceceec17d32973791b
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
# Hotwire::Debug
|
2
|
+
<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">
|
2
3
|
|
3
4
|
## Installation
|
4
5
|
|
@@ -18,18 +19,12 @@ Or install it yourself as:
|
|
18
19
|
|
19
20
|
## Usage
|
20
21
|
|
21
|
-
|
22
|
+
### Asset Pipeline
|
22
23
|
|
23
|
-
|
24
|
-
```js
|
25
|
-
//= require hotwire-debug
|
26
|
-
```
|
24
|
+
Run the generator:
|
27
25
|
|
28
|
-
|
29
|
-
|
30
|
-
/*
|
31
|
-
*= require hotwire-debug
|
32
|
-
*/
|
26
|
+
```
|
27
|
+
bin/rails g hotwire_debug:install
|
33
28
|
```
|
34
29
|
|
35
30
|
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
|
|
39
34
|
<%= javascript_include_tag 'application', media: 'all' %>
|
40
35
|
```
|
41
36
|
|
37
|
+
### Webpacker
|
38
|
+
|
39
|
+
Run the generator:
|
40
|
+
|
41
|
+
```
|
42
|
+
bin/rails g hotwire_debug:webpacker
|
43
|
+
```
|
44
|
+
|
45
|
+
# Options
|
46
|
+
|
47
|
+
## Colorscheme
|
48
|
+
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.
|
49
|
+
|
50
|
+
## Postition
|
51
|
+
|
52
|
+
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:
|
53
|
+
|
54
|
+
* `data-hotwire-debug-top`
|
55
|
+
* `data-hotwire-debug-middle`
|
56
|
+
* `data-hotwire-debug-bottom` [Default]
|
57
|
+
|
58
|
+
For hoizontal positioning you can apply to the root element:
|
59
|
+
|
60
|
+
* `data-hotwire-debug-left`
|
61
|
+
* `data-hotwire-debug-center`
|
62
|
+
* `data-hotwire-debug-right`
|
63
|
+
|
42
64
|
## Development
|
43
65
|
|
44
66
|
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
CHANGED
@@ -6,8 +6,8 @@ require "hotwire/debug/version"
|
|
6
6
|
Gem::Specification.new do |spec|
|
7
7
|
spec.name = "hotwire-debug"
|
8
8
|
spec.version = Hotwire::Debug::VERSION
|
9
|
-
spec.authors = ["Jim Remsik", "Jonathan Greenberg"]
|
10
|
-
spec.email = ["jim@beflagrant.com", "jonathan@beflagrant.com"]
|
9
|
+
spec.authors = ["Jim Remsik", "Jonathan Greenberg", "Ben Vandgrift"]
|
10
|
+
spec.email = ["jim@beflagrant.com", "jonathan@beflagrant.com", "ben@beflagrant.com"]
|
11
11
|
|
12
12
|
spec.summary = %q{Hotwire-debug highlights changes that occur via turbo-rails.}
|
13
13
|
spec.homepage = "http://www.github.com/beflagrant/hotwire-debug"
|
Binary file
|
@@ -0,0 +1,31 @@
|
|
1
|
+
module HotwireDebug
|
2
|
+
class InstallGenerator < Rails::Generators::Base
|
3
|
+
|
4
|
+
def append_javascript_imports
|
5
|
+
js = 'app/assets/javascripts/application.js'
|
6
|
+
File.new(js,File::CREAT) unless File.exists?(js)
|
7
|
+
inject_into_file js, "\n//= require hotwire-debug\n"
|
8
|
+
end
|
9
|
+
|
10
|
+
def append_stylesheet_imports
|
11
|
+
|
12
|
+
css = 'app/assets/stylesheets/application.css'
|
13
|
+
scss = 'app/assets/stylesheets/application.scss'
|
14
|
+
if File.exists?(css)
|
15
|
+
target = css
|
16
|
+
elsif File.exists?(scss)
|
17
|
+
target = scss
|
18
|
+
else
|
19
|
+
# if neither exist, create a css file
|
20
|
+
File.new(css,File::CREAT) unless File.exists?(css)
|
21
|
+
target = css
|
22
|
+
end
|
23
|
+
|
24
|
+
inject_into_file target, <<~STYLE
|
25
|
+
/*
|
26
|
+
*= require hotwire-debug
|
27
|
+
*/
|
28
|
+
STYLE
|
29
|
+
end
|
30
|
+
end
|
31
|
+
end
|
Binary file
|
@@ -0,0 +1,46 @@
|
|
1
|
+
var turboEvents = [
|
2
|
+
"turbo:before-cache",
|
3
|
+
"turbo:before-render",
|
4
|
+
"turbo:before-visit",
|
5
|
+
"turbo:click",
|
6
|
+
"turbo:load",
|
7
|
+
"turbo:render",
|
8
|
+
"turbo:submit-end",
|
9
|
+
"turbo:submit-start",
|
10
|
+
]
|
11
|
+
|
12
|
+
turboEvents.forEach(function(turboEvent) {
|
13
|
+
document.addEventListener(turboEvent, function() {
|
14
|
+
if (showChanges()) {
|
15
|
+
console.log("⚡️ " + turboEvent);
|
16
|
+
handleChange();
|
17
|
+
}
|
18
|
+
});
|
19
|
+
})
|
20
|
+
|
21
|
+
function showChanges () {
|
22
|
+
return document.documentElement.hasAttribute('data-hotwire-debug')
|
23
|
+
}
|
24
|
+
|
25
|
+
function handleChange() {
|
26
|
+
document.querySelectorAll('turbo-frame:first-child').forEach(function(target) {
|
27
|
+
target.setAttribute('data-turbo-frame-id', target.closest('turbo-frame').id);
|
28
|
+
});
|
29
|
+
}
|
30
|
+
|
31
|
+
window.addEventListener("turbo:load", () => {
|
32
|
+
let hotwireToggle = document.getElementById('hotwire-toggle');
|
33
|
+
|
34
|
+
if (hotwireToggle == null) {
|
35
|
+
hotwireToggle = document.createElement("div");
|
36
|
+
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>';
|
37
|
+
hotwireToggle.id = "hotwire-toggle";
|
38
|
+
document.body.append(hotwireToggle);
|
39
|
+
|
40
|
+
hotwireToggle.addEventListener("click", function() {
|
41
|
+
document.documentElement.toggleAttribute("data-hotwire-debug");
|
42
|
+
handleChange();
|
43
|
+
});
|
44
|
+
}
|
45
|
+
});
|
46
|
+
|
@@ -0,0 +1,101 @@
|
|
1
|
+
:root {
|
2
|
+
--color-highlight: rgba(255, 232, 1, 1);
|
3
|
+
--color-main: rgba(95, 206, 214, 1);
|
4
|
+
--color-secondary: rgba(239, 107, 170, 1);
|
5
|
+
}
|
6
|
+
:root[data-hotwire-scheme-dark] {
|
7
|
+
--color-highlight: rgba(200, 200, 200, 1);
|
8
|
+
--color-main: rgba(0, 0, 0, 1);
|
9
|
+
}
|
10
|
+
:root[data-hotwire-debug-bottom] #hotwire-toggle {
|
11
|
+
bottom: 1rem !important;
|
12
|
+
top: unset;
|
13
|
+
}
|
14
|
+
:root[data-hotwire-debug-middle] #hotwire-toggle {
|
15
|
+
bottom: 50% !important;
|
16
|
+
top: unset;
|
17
|
+
}
|
18
|
+
:root[data-hotwire-debug-top] #hotwire-toggle {
|
19
|
+
top: 1rem !important;
|
20
|
+
}
|
21
|
+
:root[data-hotwire-debug-center] #hotwire-toggle {
|
22
|
+
right: 50% !important;
|
23
|
+
}
|
24
|
+
:root[data-hotwire-debug-left] #hotwire-toggle {
|
25
|
+
left: 1rem !important;
|
26
|
+
right: unset;
|
27
|
+
}
|
28
|
+
:root[data-hotwire-debug-right] #hotwire-toggle {
|
29
|
+
right: 1rem !important;
|
30
|
+
}
|
31
|
+
#hotwire-toggle {
|
32
|
+
height: 2rem;
|
33
|
+
position: fixed;
|
34
|
+
right: 2rem;
|
35
|
+
top: 1rem;
|
36
|
+
width: 2rem;
|
37
|
+
z-index: 20;
|
38
|
+
|
39
|
+
svg path {
|
40
|
+
fill: var(--color-main) !important;
|
41
|
+
transition: fill ease-in-out 0.3s;
|
42
|
+
stroke: var(--color-secondary);
|
43
|
+
}
|
44
|
+
&:hover svg {
|
45
|
+
fill: var(--color-highlight) !important;
|
46
|
+
filter: drop-shadow(0 0 0.5rem var(--color-main));
|
47
|
+
}
|
48
|
+
}
|
49
|
+
:root[data-hotwire-debug] #hotwire-toggle {
|
50
|
+
svg path {
|
51
|
+
fill: var(--color-highlight) !important;
|
52
|
+
stroke: var(--color-secondary);
|
53
|
+
}
|
54
|
+
|
55
|
+
&:hover {
|
56
|
+
svg path {
|
57
|
+
stroke-width: 0.5rem;
|
58
|
+
filter: drop-shadow(0 0 0.5rem var(--color-highlight));
|
59
|
+
}
|
60
|
+
}
|
61
|
+
}
|
62
|
+
[data-hotwire-debug] {
|
63
|
+
turbo-frame {
|
64
|
+
border: 1px solid var(--color-main);
|
65
|
+
display: block;
|
66
|
+
padding-top: 1rem;
|
67
|
+
transition: all ease-in-out 0.3s;
|
68
|
+
&:hover {
|
69
|
+
display: block;
|
70
|
+
position: relative;
|
71
|
+
|
72
|
+
&:after {
|
73
|
+
color: var(--color-main) !important;
|
74
|
+
content: attr(id);
|
75
|
+
display: block;
|
76
|
+
font-weight: bold;
|
77
|
+
position: absolute;
|
78
|
+
right: 1rem;
|
79
|
+
top: 0;
|
80
|
+
z-index: 10;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
& > :not(turbo-frame) {
|
85
|
+
animation-duration: 0.25s;
|
86
|
+
animation-name: highlight-frame-change;
|
87
|
+
border-radius: 0 1rem 1rem 0;
|
88
|
+
}
|
89
|
+
}
|
90
|
+
@keyframes highlight-frame-change {
|
91
|
+
0% {
|
92
|
+
box-shadow: unset;
|
93
|
+
}
|
94
|
+
50% {
|
95
|
+
box-shadow:inset 0 0 4rem var(--color-main);
|
96
|
+
}
|
97
|
+
100% {
|
98
|
+
box-shadow: unset;
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
module HotwireDebug
|
2
|
+
class WebpackerGenerator < Rails::Generators::Base
|
3
|
+
source_root File.expand_path('templates', __dir__)
|
4
|
+
def copy_assets
|
5
|
+
template "hotwire-debug.js", "app/javascript/vendor/hotwire-debug.js"
|
6
|
+
template "hotwire-debug.scss", "app/javascript/vendor/hotwire-debug.scss"
|
7
|
+
end
|
8
|
+
def append_imports
|
9
|
+
inject_into_file 'app/javascript/packs/application.js', "\nimport '../vendor/hotwire-debug';\n"
|
10
|
+
inject_into_file 'app/javascript/stylesheets/application.scss', "\n@import '../vendor/hotwire-debug';\n"
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
@@ -12,7 +12,7 @@ var turboEvents = [
|
|
12
12
|
turboEvents.forEach(function(turboEvent) {
|
13
13
|
document.addEventListener(turboEvent, function() {
|
14
14
|
if (showChanges()) {
|
15
|
-
console.log(turboEvent);
|
15
|
+
console.log("⚡️ " + turboEvent);
|
16
16
|
handleChange();
|
17
17
|
}
|
18
18
|
});
|
@@ -23,7 +23,7 @@ function showChanges () {
|
|
23
23
|
}
|
24
24
|
|
25
25
|
function handleChange() {
|
26
|
-
document.querySelectorAll('turbo-frame
|
26
|
+
document.querySelectorAll('turbo-frame:first-child').forEach(function(target) {
|
27
27
|
target.setAttribute('data-turbo-frame-id', target.closest('turbo-frame').id);
|
28
28
|
});
|
29
29
|
}
|
@@ -42,4 +42,4 @@ window.addEventListener("turbo:load", () => {
|
|
42
42
|
handleChange();
|
43
43
|
});
|
44
44
|
}
|
45
|
-
});
|
45
|
+
});
|
@@ -1,67 +1,89 @@
|
|
1
1
|
:root {
|
2
|
-
--color-
|
3
|
-
--color-
|
4
|
-
--color-
|
5
|
-
--color-pink-trans: rgba(223, 116, 168, 0.4);
|
6
|
-
--color-yellow: rgba(255, 224, 0, 1);
|
2
|
+
--color-highlight: rgba(255, 232, 1, 1);
|
3
|
+
--color-main: rgba(95, 206, 214, 1);
|
4
|
+
--color-secondary: rgba(239, 107, 170, 1);
|
7
5
|
}
|
8
|
-
|
6
|
+
:root[data-hotwire-scheme-dark] {
|
7
|
+
--color-highlight: rgba(200, 200, 200, 1);
|
8
|
+
--color-main: rgba(0, 0, 0, 1);
|
9
|
+
}
|
10
|
+
:root[data-hotwire-debug-bottom] #hotwire-toggle {
|
11
|
+
bottom: 1rem !important;
|
12
|
+
top: unset;
|
13
|
+
}
|
14
|
+
:root[data-hotwire-debug-middle] #hotwire-toggle {
|
15
|
+
bottom: 50% !important;
|
16
|
+
top: unset;
|
17
|
+
}
|
18
|
+
:root[data-hotwire-debug-top] #hotwire-toggle {
|
19
|
+
top: 1rem !important;
|
20
|
+
}
|
21
|
+
:root[data-hotwire-debug-center] #hotwire-toggle {
|
22
|
+
right: 50% !important;
|
23
|
+
}
|
24
|
+
:root[data-hotwire-debug-left] #hotwire-toggle {
|
25
|
+
left: 1rem !important;
|
26
|
+
right: unset;
|
27
|
+
}
|
28
|
+
:root[data-hotwire-debug-right] #hotwire-toggle {
|
29
|
+
right: 1rem !important;
|
30
|
+
}
|
31
|
+
#hotwire-toggle {
|
32
|
+
height: 2rem;
|
9
33
|
position: fixed;
|
10
|
-
top: 1rem;
|
11
34
|
right: 2rem;
|
12
|
-
|
35
|
+
top: 1rem;
|
13
36
|
width: 2rem;
|
14
37
|
z-index: 20;
|
15
|
-
|
38
|
+
|
16
39
|
svg path {
|
17
|
-
fill: var(--color-
|
40
|
+
fill: var(--color-main) !important;
|
18
41
|
transition: fill ease-in-out 0.3s;
|
42
|
+
stroke: var(--color-secondary);
|
19
43
|
}
|
20
|
-
&:hover svg
|
21
|
-
fill: var(--color-
|
44
|
+
&:hover svg {
|
45
|
+
fill: var(--color-highlight) !important;
|
46
|
+
filter: drop-shadow(0 0 0.5rem var(--color-main));
|
22
47
|
}
|
23
48
|
}
|
24
|
-
|
49
|
+
:root[data-hotwire-debug] #hotwire-toggle {
|
25
50
|
svg path {
|
26
|
-
fill: var(--color-
|
27
|
-
stroke: var(--color-
|
51
|
+
fill: var(--color-highlight) !important;
|
52
|
+
stroke: var(--color-secondary);
|
28
53
|
}
|
29
54
|
|
30
55
|
&:hover {
|
31
56
|
svg path {
|
32
|
-
stroke-width:
|
57
|
+
stroke-width: 0.5rem;
|
58
|
+
filter: drop-shadow(0 0 0.5rem var(--color-highlight));
|
33
59
|
}
|
34
60
|
}
|
35
61
|
}
|
36
62
|
[data-hotwire-debug] {
|
37
63
|
turbo-frame {
|
64
|
+
border: 1px solid var(--color-main);
|
38
65
|
display: block;
|
66
|
+
padding-top: 1rem;
|
39
67
|
transition: all ease-in-out 0.3s;
|
40
|
-
|
41
68
|
&:hover {
|
42
69
|
display: block;
|
43
70
|
position: relative;
|
44
|
-
box-shadow: inset 0 0 3rem var(--color-teal-trans);
|
45
71
|
|
46
72
|
&:after {
|
47
|
-
color:
|
73
|
+
color: var(--color-main) !important;
|
48
74
|
content: attr(id);
|
75
|
+
display: block;
|
49
76
|
font-weight: bold;
|
50
77
|
position: absolute;
|
51
|
-
display: block;
|
52
|
-
top: 49%;
|
53
78
|
right: 1rem;
|
54
|
-
|
55
|
-
-moz-transform: translateY(-50%);
|
56
|
-
-ms-transform: translateY(-50%);
|
57
|
-
transform: translateY(-50%);
|
79
|
+
top: 0;
|
58
80
|
z-index: 10;
|
59
81
|
}
|
60
82
|
}
|
61
83
|
|
62
84
|
& > :not(turbo-frame) {
|
63
|
-
animation-name: highlight-frame-change;
|
64
85
|
animation-duration: 0.25s;
|
86
|
+
animation-name: highlight-frame-change;
|
65
87
|
border-radius: 0 1rem 1rem 0;
|
66
88
|
}
|
67
89
|
}
|
@@ -70,10 +92,10 @@ html[data-hotwire-debug] #hotwire-toggle {
|
|
70
92
|
box-shadow: unset;
|
71
93
|
}
|
72
94
|
50% {
|
73
|
-
box-shadow:inset 0 0 4rem var(--color-
|
95
|
+
box-shadow:inset 0 0 4rem var(--color-main);
|
74
96
|
}
|
75
97
|
100% {
|
76
98
|
box-shadow: unset;
|
77
99
|
}
|
78
100
|
}
|
79
|
-
}
|
101
|
+
}
|
metadata
CHANGED
@@ -1,15 +1,16 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: hotwire-debug
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.5
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jim Remsik
|
8
8
|
- Jonathan Greenberg
|
9
|
+
- Ben Vandgrift
|
9
10
|
autorequire:
|
10
11
|
bindir: bin
|
11
12
|
cert_chain: []
|
12
|
-
date: 2021-
|
13
|
+
date: 2021-02-08 00:00:00.000000000 Z
|
13
14
|
dependencies:
|
14
15
|
- !ruby/object:Gem::Dependency
|
15
16
|
name: bundler
|
@@ -43,6 +44,7 @@ description:
|
|
43
44
|
email:
|
44
45
|
- jim@beflagrant.com
|
45
46
|
- jonathan@beflagrant.com
|
47
|
+
- ben@beflagrant.com
|
46
48
|
executables: []
|
47
49
|
extensions: []
|
48
50
|
extra_rdoc_files: []
|
@@ -57,6 +59,12 @@ files:
|
|
57
59
|
- bin/console
|
58
60
|
- bin/setup
|
59
61
|
- hotwire-debug.gemspec
|
62
|
+
- lib/generators/hotwire_debug/.DS_Store
|
63
|
+
- lib/generators/hotwire_debug/install/install_generator.rb
|
64
|
+
- lib/generators/hotwire_debug/webpacker/.DS_Store
|
65
|
+
- lib/generators/hotwire_debug/webpacker/templates/hotwire-debug.js
|
66
|
+
- lib/generators/hotwire_debug/webpacker/templates/hotwire-debug.scss
|
67
|
+
- lib/generators/hotwire_debug/webpacker/webpacker_generator.rb
|
60
68
|
- lib/hotwire/debug.rb
|
61
69
|
- lib/hotwire/debug/version.rb
|
62
70
|
- package.json
|