mrujs_rails 0.0.6

Sign up to get free protection for your applications and to get access to all the features.
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"
@@ -0,0 +1,6 @@
1
+ require "mrujs_rails/version"
2
+ require "mrujs_rails/engine"
3
+
4
+ module MrujsRails
5
+ # Your code goes here...
6
+ end
@@ -0,0 +1,5 @@
1
+ module MrujsRails
2
+ class Engine < ::Rails::Engine
3
+ isolate_namespace MrujsRails
4
+ end
5
+ end
@@ -0,0 +1,3 @@
1
+ module MrujsRails
2
+ VERSION = "0.0.6"
3
+ end
@@ -0,0 +1,4 @@
1
+ # desc "Explaining what the task does"
2
+ # task :mrujs_rails do
3
+ # # Task goes here
4
+ # end
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: []