turbo_ready 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/Gemfile.lock +2 -2
- data/README.md +52 -46
- data/app/assets/builds/turbo_ready.js +1 -1
- data/app/assets/builds/turbo_ready.js.map +3 -3
- data/app/assets/images/turbo-ready-logo.jpg +0 -0
- data/app/javascript/turbo_ready.js +4 -2
- data/lib/turbo_ready/version.rb +1 -1
- data/package.json +1 -1
- data/turbo_ready.gemspec +2 -2
- metadata +6 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2d5f99ef840d096ab4458b6db45d5a6c23095682bbcbc5e38abfc35fb5c8d10f
|
4
|
+
data.tar.gz: d8b9c54b756d76a34c3ed8da778e10cd9984e204db3a6112409f8d0a69b8d382
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 73c9b0777e7d94cc56cbe1ac85365dd668f50e416906720e1e86c328e6e9eefea14644d27db2be9da804a3ca905de712105079cf00a19494d65462738d839fd2
|
7
|
+
data.tar.gz: e79069264ecaba47c22be128d505221f80ef9f88c38a36419692c3415895450ff600b8920bcd18c2d1259608269575f9f544ccd41d6d0b293705c7f9400e46a8
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -35,15 +35,16 @@ turbo_stream.invoke "console.log", "Hello World!"
|
|
35
35
|
|
36
36
|
- [Why TurboReady?](#why-turboready)
|
37
37
|
- [Discord Community](#discord-community)
|
38
|
-
- [
|
39
|
-
- [Sponsor](#sponsor)
|
38
|
+
- [Sponsors](#sponsors)
|
40
39
|
- [Dependencies](#dependencies)
|
41
40
|
- [Installation](#installation)
|
42
41
|
- [Setup](#setup)
|
43
42
|
- [Usage](#usage)
|
44
43
|
- [Endless Possibilities](#endless-possibilities)
|
45
44
|
- [Advanced Usage](#advanced-usage)
|
45
|
+
- [Extending Behavior](#extending-behavior)
|
46
46
|
- [Public API](#public-api)
|
47
|
+
- [A Word of Caution](#a-word-of-caution)
|
47
48
|
- [Releasing](#releasing)
|
48
49
|
- [License](#license)
|
49
50
|
|
@@ -58,33 +59,16 @@ considerable number of use cases and you should push Streams as far as possible
|
|
58
59
|
|
59
60
|
If you discover that CRUD isn't enough, TurboReady covers pretty much everything else.
|
60
61
|
|
61
|
-
##
|
62
|
+
## Community
|
62
63
|
|
63
64
|
Please join nearly 2000 of us on [Discord](https://discord.gg/stimulus-reflex) for support getting started,
|
64
|
-
as well as active discussions around Rails, Hotwire, Stimulus, Turbo (Drive, Frames, Streams), TurboReady, CableReady, and
|
65
|
+
as well as active discussions around Rails, Hotwire, Stimulus, Turbo (Drive, Frames, Streams), TurboReady, CableReady, StimulusReflex, ViewComponent, Phlex, and more.
|
65
66
|
|
66
67
|

|
67
68
|
|
68
69
|
Stop by #newcomers and introduce yourselves!
|
69
70
|
|
70
|
-
##
|
71
|
-
|
72
|
-
Manually orchestrating DOM activity gets tedious fast.
|
73
|
-
**Don't abuse this superpower!**
|
74
|
-
|
75
|
-
> With great power comes great responsibility. *-Uncle Ben*
|
76
|
-
|
77
|
-
This library is an extremely sharp tool. 🔪
|
78
|
-
Consider it a low-level building block that can be used to craft additional libraries with
|
79
|
-
great [DX](https://en.wikipedia.org/wiki/User_experience#Developer_experience)
|
80
|
-
like [CableReady](https://github.com/stimulusreflex/cable_ready)
|
81
|
-
and [StimulusReflex](https://github.com/stimulusreflex/stimulus_reflex).
|
82
|
-
|
83
|
-
Restrict your direct application usage to DOM manipulations that fall outside the purview of
|
84
|
-
[Turbo's official actions](https://turbo.hotwired.dev/reference/streams#the-seven-actions)...
|
85
|
-
*and for Pete's sake, don't overdo it and find yourself maintaining spaghetti code reminicent of the jQuery days.*
|
86
|
-
|
87
|
-
## Sponsor
|
71
|
+
## Sponsors
|
88
72
|
|
89
73
|
<p align="center">
|
90
74
|
<em>Proudly sponsored by</em>
|
@@ -97,7 +81,7 @@ Restrict your direct application usage to DOM manipulations that fall outside th
|
|
97
81
|
|
98
82
|
## Dependencies
|
99
83
|
|
100
|
-
- [rails](https://rubygems.org/gems/rails) `>=
|
84
|
+
- [rails](https://rubygems.org/gems/rails) `>=6.1`
|
101
85
|
- [turbo-rails](https://rubygems.org/gems/turbo-rails) `>=1.1`
|
102
86
|
- [@hotwired/turbo-rails](https://yarnpkg.com/package/@hotwired/turbo-rails) `>=7.2.0-beta.2`
|
103
87
|
|
@@ -131,11 +115,11 @@ yarn add "turbo_ready@VERSION --exact"
|
|
131
115
|
## Usage
|
132
116
|
|
133
117
|
Manipulate the DOM from anywhere you use [official Turbo Streams](https://turbo.hotwired.dev/handbook/streams#integration-with-server-side-frameworks).
|
134
|
-
Namely, [
|
135
|
-
[
|
136
|
-
and [
|
118
|
+
Namely, [**M**odels](https://github.com/hotwired/turbo-rails/blob/main/app/models/concerns/turbo/broadcastable.rb),
|
119
|
+
[**V**iews](https://github.com/hotwired/turbo-rails/blob/main/app/models/concerns/turbo/broadcastable.rb),
|
120
|
+
and [**C**ontrollers](https://github.com/hotwired/turbo-rails/blob/main/app/models/concerns/turbo/broadcastable.rb).
|
137
121
|
|
138
|
-
You can
|
122
|
+
You can **chain invocations.** ❤️
|
139
123
|
|
140
124
|
```ruby
|
141
125
|
turbo_stream
|
@@ -146,7 +130,7 @@ turbo_stream
|
|
146
130
|
```
|
147
131
|
|
148
132
|
You can use [dot notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#dot_notation)
|
149
|
-
or
|
133
|
+
or [selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)... and can even combine them!** 🤯
|
150
134
|
|
151
135
|
Can I dispatch events? **You bet!** ⚡️
|
152
136
|
|
@@ -165,9 +149,28 @@ MDN has your back... [learn about the DOM and web APIs here.](https://developer.
|
|
165
149
|
|
166
150
|
## Advanced Usage
|
167
151
|
|
168
|
-
|
152
|
+
You can use symbols and [snake case](https://en.wikipedia.org/wiki/Snake_case) when invoking DOM functionality.
|
153
|
+
It'll implicitly convert to [camel case](https://en.wikipedia.org/wiki/Camel_case). 💎
|
154
|
+
|
155
|
+
```ruby
|
156
|
+
turbo_stream
|
157
|
+
.invoke(:animate, [{opacity: 0}, {opacity: 1}], 2000)
|
158
|
+
.invoke(:dispatch_event, {detail: {converts_to_camel_case: true}})
|
159
|
+
.flush
|
160
|
+
```
|
161
|
+
|
162
|
+
Need to opt out of camelize? No problem... just disable it.
|
163
|
+
|
164
|
+
```ruby
|
165
|
+
turbo_stream.invoke :contrived_demo, camelize: false
|
166
|
+
```
|
167
|
+
|
168
|
+
### Extending Behavior
|
169
|
+
|
170
|
+
Want to extend things with custom functionality? **Let's do it.** 🔌
|
169
171
|
|
170
172
|
```js
|
173
|
+
// JavaScript
|
171
174
|
import morphdom from 'morphdom'
|
172
175
|
|
173
176
|
window.MyNamespace = {
|
@@ -178,24 +181,9 @@ window.MyNamespace = {
|
|
178
181
|
```
|
179
182
|
|
180
183
|
```ruby
|
181
|
-
|
182
|
-
```
|
183
|
-
|
184
|
-
**But this doesn't look like Ruby...** well then, just use symbols and
|
185
|
-
[snake case](https://en.wikipedia.org/wiki/Snake_case) when invoking DOM functionality.
|
186
|
-
It'll implicitly convert to [camel case](https://en.wikipedia.org/wiki/Camel_case).
|
187
|
-
|
188
|
-
```ruby
|
184
|
+
# Ruby
|
189
185
|
turbo_stream
|
190
|
-
.invoke
|
191
|
-
.invoke(:dispatch_event, {detail: {converts_camel_case: true}})
|
192
|
-
.flush
|
193
|
-
```
|
194
|
-
|
195
|
-
Need to opt out of camelize? No problem... just disable it.
|
196
|
-
|
197
|
-
```ruby
|
198
|
-
turbo_stream.invoke :contrived_demo, camelize: false
|
186
|
+
.invoke "MyNamespace.morph", "#demo", "<div id='demo'><p>You've changed...</p></div>", {childrenOnly: true}
|
199
187
|
```
|
200
188
|
|
201
189
|
## Public API
|
@@ -204,6 +192,7 @@ There's only one method to consider, `invoke` defined in the
|
|
204
192
|
[tag builder](https://github.com/hopsoft/turbo_ready/blob/main/lib/turbo_ready/tag_builder.rb).
|
205
193
|
|
206
194
|
```ruby
|
195
|
+
# Ruby
|
207
196
|
turbo_stream
|
208
197
|
.invoke(method, *args, selector: nil, camelize: true, id: nil)
|
209
198
|
# | | | | |
|
@@ -221,6 +210,23 @@ turbo_stream
|
|
221
210
|
|
222
211
|
**NOTE:** The JavaScript method will be invoked on all matching elements when a `selector` is passed.
|
223
212
|
|
213
|
+
## A Word of Caution
|
214
|
+
|
215
|
+
Manually orchestrating DOM activity gets tedious fast.
|
216
|
+
**⚠️ Don't abuse this superpower!**
|
217
|
+
|
218
|
+
> With great power comes great responsibility. *-Uncle Ben*
|
219
|
+
|
220
|
+
This library is an extremely sharp tool. 🔪
|
221
|
+
Consider it a low-level building block that can be used to craft additional libraries with
|
222
|
+
great [DX](https://en.wikipedia.org/wiki/User_experience#Developer_experience)
|
223
|
+
like [CableReady](https://github.com/stimulusreflex/cable_ready)
|
224
|
+
and [StimulusReflex](https://github.com/stimulusreflex/stimulus_reflex).
|
225
|
+
|
226
|
+
Restrict your direct application usage to DOM manipulation that falls outside the purview of
|
227
|
+
[Turbo's official actions](https://turbo.hotwired.dev/reference/streams#the-seven-actions)...
|
228
|
+
*and for Pete's sake, don't overdo it and find yourself maintaining spaghetti code reminiscent of the jQuery days.*
|
229
|
+
|
224
230
|
## Releasing
|
225
231
|
|
226
232
|
1. Run `yarn` and `bundle` to pick up the latest
|
@@ -1,2 +1,2 @@
|
|
1
|
-
function l(){let
|
1
|
+
function l(){let r=JSON.parse(this.templateContent.textContent),{id:h,method:o,args:n,receiver:c,selector:a}=r,e=[self];switch(a&&(e=Array.from(document.querySelectorAll(a))),c&&(e=e.map(i=>{let t=i,s=c.split(".");for(;s.length>0;)t=t[s.shift()];return t})),o){case"dispatchEvent":let i=new CustomEvent(n[0],n[1]||{});e.forEach(t=>t.dispatchEvent(i));break;default:e.forEach(t=>t[o].apply(t,n))}}function f(){streamActions.invoke=l}var p={initialize:f};export{p as default};
|
2
2
|
//# sourceMappingURL=turbo_ready.js.map
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../javascript/turbo_ready.js"],
|
4
|
-
"sourcesContent": ["function invoke () {\n const payload = JSON.parse(this.templateContent.textContent)\n const { id, method, args, receiver, selector } = payload\n let receivers = [self]\n if (selector) receivers = Array.from(document.querySelectorAll(selector))\n\n if (receiver) {\n receivers = receivers.map(r => {\n let context = r\n const chain = receiver.split('.')\n while (chain.length > 0) context = context[chain.shift()]\n return context\n })\n }\n\n switch (method) {\n case 'dispatchEvent':\n const evt = new CustomEvent(args[0], args[1] || {})\n receivers.forEach(r => r.dispatchEvent(evt))\n break\n default:\n receivers.forEach(r => r[method].apply(r, args))\n }\n}\n\
|
5
|
-
"mappings": "AAAA,SAASA,GAAU,CACjB,IAAMC,EAAU,KAAK,MAAM,KAAK,gBAAgB,WAAW,EACrD,CAAE,GAAAC,EAAI,OAAAC,EAAQ,KAAAC,EAAM,SAAAC,EAAU,SAAAC,CAAS,EAAIL,EAC7CM,EAAY,CAAC,IAAI,EAYrB,OAXID,IAAUC,EAAY,MAAM,KAAK,SAAS,iBAAiBD,CAAQ,CAAC,GAEpED,IACFE,EAAYA,EAAU,IAAIC,GAAK,CAC7B,IAAIC,EAAUD,EACRE,EAAQL,EAAS,MAAM,GAAG,EAChC,KAAOK,EAAM,OAAS,GAAGD,EAAUA,EAAQC,EAAM,MAAM,GACvD,OAAOD,CACT,CAAC,GAGKN,OACD,gBACH,IAAMQ,EAAM,IAAI,YAAYP,EAAK,GAAIA,EAAK,IAAM,CAAC,CAAC,EAClDG,EAAU,QAAQC,GAAKA,EAAE,cAAcG,CAAG,CAAC,EAC3C,cAEAJ,EAAU,QAAQC,GAAKA,EAAEL,GAAQ,MAAMK,EAAGJ,CAAI,CAAC,EAErD,CAEA,
|
6
|
-
"names": ["invoke", "payload", "id", "method", "args", "receiver", "selector", "receivers", "r", "context", "chain", "evt", "
|
4
|
+
"sourcesContent": ["function invoke () {\n const payload = JSON.parse(this.templateContent.textContent)\n const { id, method, args, receiver, selector } = payload\n let receivers = [self]\n if (selector) receivers = Array.from(document.querySelectorAll(selector))\n\n if (receiver) {\n receivers = receivers.map(r => {\n let context = r\n const chain = receiver.split('.')\n while (chain.length > 0) context = context[chain.shift()]\n return context\n })\n }\n\n switch (method) {\n case 'dispatchEvent':\n const evt = new CustomEvent(args[0], args[1] || {})\n receivers.forEach(r => r.dispatchEvent(evt))\n break\n default:\n receivers.forEach(r => r[method].apply(r, args))\n }\n}\n\nfunction initialize () {\n streamActions.invoke = invoke\n}\n\nexport default { initialize }\n"],
|
5
|
+
"mappings": "AAAA,SAASA,GAAU,CACjB,IAAMC,EAAU,KAAK,MAAM,KAAK,gBAAgB,WAAW,EACrD,CAAE,GAAAC,EAAI,OAAAC,EAAQ,KAAAC,EAAM,SAAAC,EAAU,SAAAC,CAAS,EAAIL,EAC7CM,EAAY,CAAC,IAAI,EAYrB,OAXID,IAAUC,EAAY,MAAM,KAAK,SAAS,iBAAiBD,CAAQ,CAAC,GAEpED,IACFE,EAAYA,EAAU,IAAIC,GAAK,CAC7B,IAAIC,EAAUD,EACRE,EAAQL,EAAS,MAAM,GAAG,EAChC,KAAOK,EAAM,OAAS,GAAGD,EAAUA,EAAQC,EAAM,MAAM,GACvD,OAAOD,CACT,CAAC,GAGKN,OACD,gBACH,IAAMQ,EAAM,IAAI,YAAYP,EAAK,GAAIA,EAAK,IAAM,CAAC,CAAC,EAClDG,EAAU,QAAQC,GAAKA,EAAE,cAAcG,CAAG,CAAC,EAC3C,cAEAJ,EAAU,QAAQC,GAAKA,EAAEL,GAAQ,MAAMK,EAAGJ,CAAI,CAAC,EAErD,CAEA,SAASQ,GAAc,CACrB,cAAc,OAASZ,CACzB,CAEA,IAAOa,EAAQ,CAAE,WAAAD,CAAW",
|
6
|
+
"names": ["invoke", "payload", "id", "method", "args", "receiver", "selector", "receivers", "r", "context", "chain", "evt", "initialize", "turbo_ready_default"]
|
7
7
|
}
|
Binary file
|
data/lib/turbo_ready/version.rb
CHANGED
data/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "turbo_ready",
|
3
3
|
"version": "0.0.1",
|
4
|
-
"description": "Take full control of the DOM with
|
4
|
+
"description": "Take full control of the DOM with Turbo Streams",
|
5
5
|
"main": "app/assets/builds/turbo_ready.js",
|
6
6
|
"repository": "https://github.com/hopsoft/turbo_ready",
|
7
7
|
"author": "Nate Hopkins (hopsoft) <natehop@gmail.com>",
|
data/turbo_ready.gemspec
CHANGED
@@ -8,7 +8,7 @@ Gem::Specification.new do |spec|
|
|
8
8
|
spec.authors = ["Nate Hopkins (hopsoft)"]
|
9
9
|
spec.email = ["natehop@gmail.com"]
|
10
10
|
spec.homepage = "https://github.com/hopsoft/turbo_ready"
|
11
|
-
spec.summary = "Take full control of the DOM with
|
11
|
+
spec.summary = "Take full control of the DOM with Turbo Streams"
|
12
12
|
spec.description = spec.summary
|
13
13
|
spec.license = "MIT"
|
14
14
|
|
@@ -18,7 +18,7 @@ Gem::Specification.new do |spec|
|
|
18
18
|
|
19
19
|
spec.files = Dir["lib/**/*.rb", "app/**/*", "bin/*", "[A-Z]*"]
|
20
20
|
|
21
|
-
spec.add_dependency "rails", ">=
|
21
|
+
spec.add_dependency "rails", ">= 6.1"
|
22
22
|
spec.add_dependency "turbo-rails", ">= 1.1"
|
23
23
|
|
24
24
|
spec.add_development_dependency "magic_frozen_string_literal"
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: turbo_ready
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Nate Hopkins (hopsoft)
|
@@ -16,14 +16,14 @@ dependencies:
|
|
16
16
|
requirements:
|
17
17
|
- - ">="
|
18
18
|
- !ruby/object:Gem::Version
|
19
|
-
version: '
|
19
|
+
version: '6.1'
|
20
20
|
type: :runtime
|
21
21
|
prerelease: false
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
23
23
|
requirements:
|
24
24
|
- - ">="
|
25
25
|
- !ruby/object:Gem::Version
|
26
|
-
version: '
|
26
|
+
version: '6.1'
|
27
27
|
- !ruby/object:Gem::Dependency
|
28
28
|
name: turbo-rails
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
@@ -94,7 +94,7 @@ dependencies:
|
|
94
94
|
- - ">="
|
95
95
|
- !ruby/object:Gem::Version
|
96
96
|
version: '0'
|
97
|
-
description: Take full control of the DOM with
|
97
|
+
description: Take full control of the DOM with Turbo Streams
|
98
98
|
email:
|
99
99
|
- natehop@gmail.com
|
100
100
|
executables: []
|
@@ -109,6 +109,7 @@ files:
|
|
109
109
|
- Rakefile
|
110
110
|
- app/assets/builds/turbo_ready.js
|
111
111
|
- app/assets/builds/turbo_ready.js.map
|
112
|
+
- app/assets/images/turbo-ready-logo.jpg
|
112
113
|
- app/assets/images/turbo-ready-logo.png
|
113
114
|
- app/assets/images/turbo-ready-logo.svg
|
114
115
|
- app/javascript/turbo_ready.js
|
@@ -149,5 +150,5 @@ requirements: []
|
|
149
150
|
rubygems_version: 3.3.7
|
150
151
|
signing_key:
|
151
152
|
specification_version: 4
|
152
|
-
summary: Take full control of the DOM with
|
153
|
+
summary: Take full control of the DOM with Turbo Streams
|
153
154
|
test_files: []
|