mrujs_rails 0.0.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +351 -0
- data/Rakefile +20 -0
- data/lib/mrujs_rails.rb +6 -0
- data/lib/mrujs_rails/engine.rb +5 -0
- data/lib/mrujs_rails/version.rb +3 -0
- data/lib/tasks/mrujs_rails_tasks.rake +4 -0
- metadata +88 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: cbc85edb9ee8d9b42a5af5a006a0c5a3b00e394c651779f344d83d0c06005f66
|
4
|
+
data.tar.gz: 8ec09f13eeadcf3b68a34d589580ab1db7c4f184b3be34f87c3828e40ef133ee
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 2eb0687c751f50fad6a167a3ac6318e044b928dcef3f8ef59e904fd00835580ff204489d9fdce72578f6f53c696392550e5fc644246d9fa1c2d277d295a88b40
|
7
|
+
data.tar.gz: 9868bf1819031b3f54121d09c1ef6b0c5739074e275e2bbba76cebe331e37c67eeb80a9ac44f10f6ad03325ea02fa888d853acf73df6e4c6ae889b4cf1ca8729
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2021 TODO: Write your name
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,351 @@
|
|
1
|
+
# Purpose
|
2
|
+
|
3
|
+
To provide a Rails-UJS alternative since Rails UJS is currently
|
4
|
+
deprecated. Uses modern javascript instead of coffeescript.
|
5
|
+
|
6
|
+
|
7
|
+
## What does mrujs mean?
|
8
|
+
|
9
|
+
Modern Rails UJS.
|
10
|
+
|
11
|
+
## Does this support `.js.erb`
|
12
|
+
|
13
|
+
No. Rails 6.1+ requires a change in the content-security policy in relation to running
|
14
|
+
arbitrary javascript scripts which means `.js.erb` is not supported.
|
15
|
+
`.js.erb` is a security concern, and also requires a lot of `nonce` code generation and checks to work properly.
|
16
|
+
|
17
|
+
## What can it do right now?
|
18
|
+
|
19
|
+
In it's current state, Mrujs is a native fetch wrapper and
|
20
|
+
a form wrapper that can marshal an HTML / JSON / XML / any response
|
21
|
+
you want and can be listened for via event listeners. For
|
22
|
+
a list of things to be implemented in the future, checkout
|
23
|
+
the [Roadmap](#roadmap) below.
|
24
|
+
|
25
|
+
## Getting Started
|
26
|
+
|
27
|
+
1. Install `mrujs`
|
28
|
+
|
29
|
+
```bash
|
30
|
+
yarn add mrujs
|
31
|
+
```
|
32
|
+
|
33
|
+
2. Go to your Webpacker entrypoint and import `mrujs` and start it up.
|
34
|
+
|
35
|
+
```js
|
36
|
+
// app/javascript/packs/application.js
|
37
|
+
|
38
|
+
// ... other stuff
|
39
|
+
|
40
|
+
import mrujs from "mrujs";
|
41
|
+
window.mrujs = mrujs.start();
|
42
|
+
```
|
43
|
+
|
44
|
+
3. Using on a form
|
45
|
+
|
46
|
+
If using Turbo, make sure to set Turbo to false.
|
47
|
+
|
48
|
+
```erb
|
49
|
+
<%= form_with scope: Model, data: {remote: "true", turbo: "false"} do |form| %>
|
50
|
+
<%= form.label :name %>
|
51
|
+
<%= form.text_field :name %>
|
52
|
+
|
53
|
+
<%= form.submit "Submit", data-disable-with: "Submitting..." %>
|
54
|
+
<%= end %>
|
55
|
+
|
56
|
+
<form action="/" method="post" data-remote="true" data-turbo="false">
|
57
|
+
<input id="foo" name="foo">
|
58
|
+
<input type="submit" value="Submit">
|
59
|
+
</form>
|
60
|
+
```
|
61
|
+
|
62
|
+
4. Stopping Mrujs
|
63
|
+
|
64
|
+
If you would like to stop Mrujs, feel free to do the following:
|
65
|
+
|
66
|
+
```js
|
67
|
+
window.mrujs.stop();
|
68
|
+
```
|
69
|
+
|
70
|
+
This will remove all mutation observers and event listeners.
|
71
|
+
|
72
|
+
## Ajax
|
73
|
+
|
74
|
+
### Events
|
75
|
+
|
76
|
+
All events bubble and are cancellable by default.
|
77
|
+
|
78
|
+
Bubbling means they will always start from the form that submits it and
|
79
|
+
continue upwards all the way to the top of the DOM. Bubbling can be
|
80
|
+
stopped via `event.stopImmediatePropagation()`. I also allowed events to
|
81
|
+
be preventable. IE: `event.preventDefault()` on an ajax event will cause
|
82
|
+
it to stop running.
|
83
|
+
|
84
|
+
A `fetch` request or `data-remote="true"` form will emit the following events:
|
85
|
+
|
86
|
+
<details>
|
87
|
+
<summary>List of AJAX events</summary>
|
88
|
+
|
89
|
+
```js
|
90
|
+
const AJAX_EVENTS = {
|
91
|
+
/**
|
92
|
+
* Before the ajax event gets sent.
|
93
|
+
* You can view what data will be sent via: `event.detail.request`
|
94
|
+
*/
|
95
|
+
ajaxBefore: `ajax:before`,
|
96
|
+
|
97
|
+
/**
|
98
|
+
* When the fetch request is sent. You can view whats being sent via:
|
99
|
+
* `event.detail.request`
|
100
|
+
*/
|
101
|
+
ajaxSend: `ajax:send`,
|
102
|
+
|
103
|
+
/**
|
104
|
+
* When a response error occurs. IE: 400, 404, 422, 500, etc (any status code not between 200 - 299)
|
105
|
+
* The response error can be viewed via: `event.detail.response`
|
106
|
+
*/
|
107
|
+
ajaxResponseError: `ajax:response:error`,
|
108
|
+
|
109
|
+
/**
|
110
|
+
* When a >= 200 and <= 299 response is returned
|
111
|
+
* You can view the full response via: `event.detail.response`
|
112
|
+
*/
|
113
|
+
ajaxSuccess: `ajax:success`,
|
114
|
+
|
115
|
+
/**
|
116
|
+
* When an actual error is raised. This doesnt include 404, 500,
|
117
|
+
* errors, just like native fetch.
|
118
|
+
* You can view the error via: `event.detail.error`
|
119
|
+
* This will also generate an error in your console.log
|
120
|
+
*/
|
121
|
+
ajaxError: `ajax:error`,
|
122
|
+
|
123
|
+
|
124
|
+
/**
|
125
|
+
* After any fetch request, regardless of outcome
|
126
|
+
* Does not have any accessible data besides the event itself
|
127
|
+
*/
|
128
|
+
ajaxComplete: `ajax:complete`,
|
129
|
+
|
130
|
+
// NOT CURRENTLY IMPLEMENTED from ujs
|
131
|
+
`ajax:aborted:required`
|
132
|
+
`ajax:aborted:file`
|
133
|
+
}
|
134
|
+
```
|
135
|
+
|
136
|
+
</details>
|
137
|
+
|
138
|
+
#### Cancelling Events
|
139
|
+
|
140
|
+
<details>
|
141
|
+
<summary> How to cancel AJAX events </summary>
|
142
|
+
|
143
|
+
You can cancel events at anytime simply by calling `event.preventDefault()` or
|
144
|
+
`event.stopImmediatePropagation()`:
|
145
|
+
|
146
|
+
Example:
|
147
|
+
|
148
|
+
```js
|
149
|
+
document.querySelector("form").addEventListener("ajax:before", (event) => {
|
150
|
+
event.preventDefault();
|
151
|
+
})
|
152
|
+
|
153
|
+
|
154
|
+
document.querySelector("form").addEventListener("ajax:before", (event) => {
|
155
|
+
event.stopImmediatePropagation();
|
156
|
+
})
|
157
|
+
|
158
|
+
// For extra certainty
|
159
|
+
document.querySelector("form").addEventListener("ajax:before", (event) => {
|
160
|
+
event.preventDefault();
|
161
|
+
event.stopImmediatePropagation();
|
162
|
+
})
|
163
|
+
|
164
|
+
```
|
165
|
+
|
166
|
+
`ajax:send` is a special case and must be aborted with an abort
|
167
|
+
controller.
|
168
|
+
</details>
|
169
|
+
|
170
|
+
### Fetch
|
171
|
+
|
172
|
+
Fetch is called like you would expect. Except it will also prefill the
|
173
|
+
`X-CSRF-TOKEN` for you. The difference between
|
174
|
+
`window.fetch` and `mrujs.fetch` is that the first argument for the url
|
175
|
+
is positional in `window.fetch`, but in `mrujs.fetch` it is required as part of the object.
|
176
|
+
|
177
|
+
`mrujs.fetch` can also leverage the events listed above for Ajax and
|
178
|
+
fire the `ajax:<lifecycle>` events if `dispatchEvents === true`. When
|
179
|
+
called this way, `mrujs.fetch` will not return a promise. Instead you
|
180
|
+
should listen for `ajax:success` and then parse the response from
|
181
|
+
`event.detail.response`.
|
182
|
+
|
183
|
+
```js
|
184
|
+
document.addEventListener("ajax:success", (event) => {
|
185
|
+
// equivalent to fetch().then((response) => response)
|
186
|
+
event.detail.response
|
187
|
+
})
|
188
|
+
```
|
189
|
+
|
190
|
+
#### Examples
|
191
|
+
|
192
|
+
```js
|
193
|
+
// Native Fetch
|
194
|
+
window.fetch("/url", { ... })
|
195
|
+
.then((response) => ...)
|
196
|
+
.catch((error) => ...)
|
197
|
+
|
198
|
+
// mrujs fetch
|
199
|
+
window.mrujs.fetch({url: "/url", ...})
|
200
|
+
.then((response) => ...)
|
201
|
+
.catch((error) => ...)
|
202
|
+
|
203
|
+
// If you would prefer, you can also listen to the above ajax events.
|
204
|
+
// `mrujs.fetch({url: "/url", dispatchEvents: true})` fires all the above listed ajax events, `ajax:before`, `ajax:send`, etc
|
205
|
+
|
206
|
+
// mrujs fetch with events
|
207
|
+
|
208
|
+
window.mrujs.fetch({url: "url", method: "POST", dispatchEvents: true})
|
209
|
+
window.addEventListener("ajax:success", (event) => doStuff(event.detail.response))
|
210
|
+
```
|
211
|
+
|
212
|
+
To *receive* a `json` response, make sure to set the `Accept` header to
|
213
|
+
`"application/json"` like so:
|
214
|
+
|
215
|
+
```js
|
216
|
+
window.mrujs.fetch({
|
217
|
+
url: "/url",
|
218
|
+
"Accept": "application/json"
|
219
|
+
}).then(response => {}).catch(error => {})
|
220
|
+
```
|
221
|
+
|
222
|
+
To *send* a `json` payload, make sure to set the `Content-Type` header to
|
223
|
+
`"application/json"` like so:
|
224
|
+
|
225
|
+
```js
|
226
|
+
window.mrujs.fetch({
|
227
|
+
url: "/url",
|
228
|
+
"Content-Type": "application/json"
|
229
|
+
}).then(response => {}).catch(error => {})
|
230
|
+
```
|
231
|
+
|
232
|
+
#### Using native fetch
|
233
|
+
|
234
|
+
Maybe you dont like my fetch wrapper, thats fine! To use native fetch
|
235
|
+
heres all you have to do to include the CSRF-Token.
|
236
|
+
|
237
|
+
```js
|
238
|
+
import mrujs from "mrujs"
|
239
|
+
|
240
|
+
window.mrujs = mrujs.start()
|
241
|
+
window.fetch("url", {
|
242
|
+
headers: {
|
243
|
+
"X-CSRF-TOKEN": window.mrujs.csrfToken
|
244
|
+
}
|
245
|
+
})
|
246
|
+
```
|
247
|
+
|
248
|
+
### Remote forms
|
249
|
+
|
250
|
+
Remote forms can also negotiate the proper `Accept` headers. To do so,
|
251
|
+
set the `data-response='json'` to tell the server you can only accept
|
252
|
+
json.
|
253
|
+
|
254
|
+
<details>
|
255
|
+
<summary> List of predefined `data-response` values </summary>
|
256
|
+
|
257
|
+
```js
|
258
|
+
'*': '*/*',
|
259
|
+
any: '*/*',
|
260
|
+
text: 'text/plain',
|
261
|
+
html: 'text/html',
|
262
|
+
xml: 'application/xml, text/xml',
|
263
|
+
json: 'application/json, text/javascript',
|
264
|
+
```
|
265
|
+
|
266
|
+
The above are all predefined for you
|
267
|
+
</details>
|
268
|
+
|
269
|
+
Example:
|
270
|
+
|
271
|
+
```html
|
272
|
+
<!-- Sends a `application/json` and `text/javascript` accept header. -->
|
273
|
+
<form data-remote="true" data-response="json">
|
274
|
+
</form>
|
275
|
+
|
276
|
+
<!-- Sends an XML accept header -->
|
277
|
+
<form data-remote="true" data-response="application/xml">
|
278
|
+
</form>
|
279
|
+
|
280
|
+
<!-- Sends a default '*/*' Accept header. -->
|
281
|
+
<form data-remote="true">
|
282
|
+
</form>
|
283
|
+
```
|
284
|
+
|
285
|
+
## Roadmap
|
286
|
+
|
287
|
+
- [ ] - Alias `window.Rails` to `window.mrujs` (Allows drop in
|
288
|
+
replacement)
|
289
|
+
- [ ] - Allow the use of `data-confirm=""`
|
290
|
+
- [ ] - Provide a confirm dialog for `data-confirm`
|
291
|
+
- [ ] - Allow users to provide their own confirm function to `data-confirm`
|
292
|
+
- [ ] - Allow `ajax:send` to be cancelled via abort controllers.
|
293
|
+
|
294
|
+
<details>
|
295
|
+
<summary> Example of `data-confirm` </summary>
|
296
|
+
|
297
|
+
```html
|
298
|
+
<!-- Uses user provided HTML -->
|
299
|
+
<a href="blah" data-method="delete" data-confirm="<p>Are you
|
300
|
+
sure?</p>">
|
301
|
+
Logout
|
302
|
+
</a>
|
303
|
+
|
304
|
+
<!-- Uses a web component modal -->
|
305
|
+
<a href="/blah" data-method="delete" data-confirm="Are you
|
306
|
+
sure you want to logout?">
|
307
|
+
Logout
|
308
|
+
</a>
|
309
|
+
|
310
|
+
<!-- Uses a regular alert -->
|
311
|
+
<a href="/blah" data-method="delete" data-confirm="Are you
|
312
|
+
sure you want to logout?" data-use-alert="true">
|
313
|
+
Logout
|
314
|
+
</a>
|
315
|
+
```
|
316
|
+
|
317
|
+
</details>
|
318
|
+
|
319
|
+
- [ ] - add support for `data-method="<REQUEST_TYPE>"` for non-forms
|
320
|
+
- [ ] - Asset pipeline, if someone would like to add support im open to
|
321
|
+
it.
|
322
|
+
- [x] - `data-response='type'` for forms.
|
323
|
+
- [ ] - Other UJS features deemed necessary.
|
324
|
+
|
325
|
+
## Developing locally
|
326
|
+
|
327
|
+
1. Clone the repo
|
328
|
+
|
329
|
+
```bash
|
330
|
+
git clone https://github.com/ParamagicDev/mrujs
|
331
|
+
cd mrujs
|
332
|
+
```
|
333
|
+
|
334
|
+
2. Install packages
|
335
|
+
|
336
|
+
```bash
|
337
|
+
yarn install
|
338
|
+
```
|
339
|
+
|
340
|
+
### View Dev Server
|
341
|
+
|
342
|
+
```bash
|
343
|
+
yarn start
|
344
|
+
```
|
345
|
+
|
346
|
+
### Run tests
|
347
|
+
|
348
|
+
```bash
|
349
|
+
yarn test
|
350
|
+
```
|
351
|
+
|
data/Rakefile
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
require "bundler/setup"
|
2
|
+
|
3
|
+
APP_RAKEFILE = File.expand_path("test/ruby/dummy/Rakefile", __dir__)
|
4
|
+
load "rails/tasks/engine.rake"
|
5
|
+
|
6
|
+
load "rails/tasks/statistics.rake"
|
7
|
+
|
8
|
+
require "bundler/gem_tasks"
|
9
|
+
|
10
|
+
require "rake/testtask"
|
11
|
+
|
12
|
+
Rake::TestTask.new(:test) do |t|
|
13
|
+
t.libs << "test/ruby"
|
14
|
+
t.pattern = "test/ruby/**/*_test.rb"
|
15
|
+
t.verbose = false
|
16
|
+
end
|
17
|
+
|
18
|
+
task default: :test
|
19
|
+
|
20
|
+
require "standard/rake"
|
data/lib/mrujs_rails.rb
ADDED
metadata
ADDED
@@ -0,0 +1,88 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: mrujs_rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.6
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- ParamagicDev
|
8
|
+
- Leastbad
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2021-05-06 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: rails
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
requirements:
|
18
|
+
- - "~>"
|
19
|
+
- !ruby/object:Gem::Version
|
20
|
+
version: 6.1.3
|
21
|
+
- - ">="
|
22
|
+
- !ruby/object:Gem::Version
|
23
|
+
version: 6.1.3.2
|
24
|
+
type: :runtime
|
25
|
+
prerelease: false
|
26
|
+
version_requirements: !ruby/object:Gem::Requirement
|
27
|
+
requirements:
|
28
|
+
- - "~>"
|
29
|
+
- !ruby/object:Gem::Version
|
30
|
+
version: 6.1.3
|
31
|
+
- - ">="
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: 6.1.3.2
|
34
|
+
- !ruby/object:Gem::Dependency
|
35
|
+
name: standardrb
|
36
|
+
requirement: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ">="
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
type: :development
|
42
|
+
prerelease: false
|
43
|
+
version_requirements: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - ">="
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: '0'
|
48
|
+
description:
|
49
|
+
email:
|
50
|
+
- konnor5456@gmail.com
|
51
|
+
executables: []
|
52
|
+
extensions: []
|
53
|
+
extra_rdoc_files: []
|
54
|
+
files:
|
55
|
+
- MIT-LICENSE
|
56
|
+
- README.md
|
57
|
+
- Rakefile
|
58
|
+
- lib/mrujs_rails.rb
|
59
|
+
- lib/mrujs_rails/engine.rb
|
60
|
+
- lib/mrujs_rails/version.rb
|
61
|
+
- lib/tasks/mrujs_rails_tasks.rake
|
62
|
+
homepage: https://github.com/paramagicdev/mrujs
|
63
|
+
licenses:
|
64
|
+
- MIT
|
65
|
+
metadata:
|
66
|
+
homepage_uri: https://github.com/paramagicdev/mrujs
|
67
|
+
source_code_uri: https://github.com/paramagicdev/mrujs
|
68
|
+
changelog_uri: https://github.com/paramagicdev/mrujs/tree/main/CHANGELOG.md
|
69
|
+
post_install_message:
|
70
|
+
rdoc_options: []
|
71
|
+
require_paths:
|
72
|
+
- lib
|
73
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
74
|
+
requirements:
|
75
|
+
- - ">="
|
76
|
+
- !ruby/object:Gem::Version
|
77
|
+
version: '0'
|
78
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
79
|
+
requirements:
|
80
|
+
- - ">="
|
81
|
+
- !ruby/object:Gem::Version
|
82
|
+
version: '0'
|
83
|
+
requirements: []
|
84
|
+
rubygems_version: 3.1.6
|
85
|
+
signing_key:
|
86
|
+
specification_version: 4
|
87
|
+
summary: A rails plugin for mrujs to make Turbolinks work.
|
88
|
+
test_files: []
|