hauleth / vanilla-ujs Goto Github PK

View Code? Open in Web Editor NEW

192.0 11.0 27.0 166 KB

UJS without jQuery dependency

License: MIT License

JavaScript 92.40% HTML 3.03% Ruby 4.57%

vanilla-ujs's Introduction

Vanilla UJS

It is implementation of Rails jQuery UJS in pure JavaScript. No extra dependencies.

Installation using the vanilla-ujs gem

For automated installation in Rails, use the vanilla-ujs gem. Place this in your Gemfile:

gem 'vanilla-ujs'

And run:

$ bundle install

Require vanilla-ujs into your application.js manifest.

//= require vanilla-ujs

Does it mean that I shouldn't use jQuery

No. You should if you want. This library is created to make your Rails code independent from front-end library.

Contribute

Clone repo

 $ git clone git://github.com/hauleth/vanilla-ujs.git
 $ cd vanilla-js/

Install dependencies
```
 $ npm install
```
Run tests
```
 $ grunt test
```

Thanks

Alex Tsokurov (@ximik)
Matt Huggins (@mhuggins)
Tasveer Singh (@tazsingh)
Tim O'Sulg (@timgluz)
Walter Lee Davis (@walterdavis)

License

See LICENSE file.

vanilla-ujs's People

Contributors

Stargazers

Watchers

vanilla-ujs's Issues

Compile

Can we not have have this in .min Bower users need to compile in node and rails. Can you push a production ready file?

I needed to include Vanilla UJS via webpack in our product and couldn't figure out how to stop webpack tree shaking it all away, so I converted Vanilla UJS to use module syntax and have an init method when it's imported.

Might bee too big of a change for a pull request and I needed it pretty quick, so I made a fork and an npm module. (https://github.com/sakamies/modular-ujs)

Is this something you'd want to integrate to this repo?

disable_with does not work with Safari

I have the following in Rails 4.2.

<%= link_to "Add new post", new_post_path, data: { disable_with: "Please wait..." } %>

Tested on other browser is fine except Safari. On Safari, it doesn't change the text to Please wait..., and is still clickable multiple times and fire to controller multiple times.

How to use on JSPM

Add these lines on anything thats used in the page, such as main.js

import 'hauleth/vanilla-ujs/lib/assets/javascripts/vanilla-ujs/polyfills.js';
import 'hauleth/vanilla-ujs/lib/assets/javascripts/vanilla-ujs/confirm.js'; // or whatever part the module requires.

Then run

jspm require github:hauleth/vanilla-ujs
jspm update

no need to manually initialize.
polyfill.js is required even for current evergreen browsers. You'll get something like Uncaught ReferenceError: "matches is not defined" if you don't.

Any chance of getting a new release with latest changes?

Would be interested in getting this aed5e97 as an actual release.

Use outside of Sprockets

Versions after 0.1.0 don't seem to be able to be (reasonably) used outside of Sprockets (within other build tools, like Webpack, for example). Currently installing this package from npm seem kind of pointless since it contains Sprockets directives that don't work outside of Sprockets.

Was this a conscious decision? With Rails moving towards being friendlier to external asset tools with Webpacker and all that, it seems like this project should support that stuff. Thoughts?

data-method on element inside link

If we have element inside link with data-method attribute, ujs will not work, example:

<script>
  var matches = (function(doc) {
    return doc.matchesSelector ||
      doc.webkitMatchesSelector ||
      doc.mozMatchesSelector ||
      doc.oMatchesSelector ||
      doc.msMatchesSelector;
  })(document.documentElement);

  document.addEventListener('click', function(event) {
    var element, url, method, data, handler;
    // Only left click allowed. Firefox triggers click event on right click/contextmenu.
    if (event.button !== 0) {
      return;
    }
    element = event.target;
    if (matches.call(element, 'a[data-method]')) {
      alert("data-method detected!\n" + element.outerHTML);
    } else {
      alert("No data-method!\n" + element.outerHTML);
    }
  });
</script>

<a href="#" data-method="post">
  <img src="https://avatars3.githubusercontent.com/u/291639?v=4&s=20"/> User Name
<a/>

Possible solution will be:

var VanillaUjs.closest = function (element, selector) {
  var parent = element;
  while (parent && !matches(parent, selector)) {
    parent = parent.parentNode;
    if (parent instanceof HTMLDocument) {
      return null;
    }
  }

  return parent;
};

if (matches.call(element, 'a[data-method]') || VanillaUjs.closest(element, 'a[data-method]')) {
  ...
}

I notice it declares global variables that can be mistakenly changed by user, would be nice to put it in inside VanillaUJS, I found: matches, CSRF, sameOrigin

data-method + data-remote on a link should perform an XHR request

I'm trying to use this to perform background XHR requests by including both data-method="post" and data-remote on a link, the same as I've done in Rails many times before. Unfortunately, following the code path in the click event handler of this plugin shows that it just returns true, allowing the browser to handle the link normally. Instead, this should perform an XHR POST to the HREF.

Wiki / readme

Is there any readme available how to use this gem?
I tried to replace with jquery-ujs with vanilla-ujs, but it's not working just by changing gems.
For example, in jquery-ujs there is "ajax:beforeSend" but in vanilla-ujs there is no such event.

Link with data-confirm and data-confirm

I have this link:

<a data-method="delete" data-confirm="Delete airport TPE?" href="/admin/airports/TPE">Delete</a>

If I click 'Cancel' in confirm window, request is still being send.

Solution: move code to handle 'a[data-confirm], button[data-confirm]' above code for 'a[data-method]'. Problem happens because data-method handler create form and submit it, then data-confirm handler will try to stop event.

Rubygems

Would be great if this Gem was also available on Rubygems.

Right now @Ximik, who owns a fork, released a gem with this name, was a little bit confusing to me: https://rubygems.org/gems/vanilla-ujs/.

Remote form without inputs sends corrupt multipart request

vanilla-ujs version: 1.2.0

I'm running into issues with remote forms when running feature tests in Poltergeist. Apparently, in test environment authenticity tokens are not included in (remote) forms. Nevertheless, an empty FormData is passed to LiteAjax which generates an empty multipart request without closing boundary. The corrupt request raises an error in Rack, as shown in the RSpec output below.

I also investigated how jquery-ujs deals with remote forms. For forms with inputs it sends an URL encoded request and without inputs it is just a plain request without body. Besides that, when using jquery-ujs I could add a type: :json to the button_to tag which would send a empty JSON request.

I see a few solutions:

post requests without data (and maybe all post request without files) should be x-www-form-urlencoded
when the FormData object has no values, it should not be sent (just xhr.send() instead of xhr.send(data))
vanilla-ujs should support data-type on the remote form to able to switch to a JSON request

RSpec output:

     1.2) Failure/Error: raise EOFError if eof
          
          EOFError:
            EOFError
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart/parser.rb:361:in `handle_empty_content!'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart/parser.rb:185:in `on_read'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart/parser.rb:72:in `block in parse'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart/parser.rb:70:in `loop'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart/parser.rb:70:in `parse'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart.rb:52:in `extract_multipart'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/request.rb:472:in `parse_multipart'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/request.rb:335:in `POST'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/method_override.rb:39:in `method_override_param'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/method_override.rb:27:in `method_override'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/method_override.rb:15:in `call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/runtime.rb:22:in `call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/activesupport-5.0.0.1/lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/executor.rb:12:in `call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/static.rb:136:in `call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/sendfile.rb:111:in `call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/railties-5.0.0.1/lib/rails/engine.rb:522:in `call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/urlmap.rb:68:in `block in call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/urlmap.rb:53:in `each'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/urlmap.rb:53:in `call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/capybara-2.8.1/lib/capybara/server.rb:43:in `call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/puma-3.6.0/lib/puma/server.rb:578:in `handle_request'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/puma-3.6.0/lib/puma/server.rb:415:in `process_client'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/puma-3.6.0/lib/puma/server.rb:275:in `block in run'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/puma-3.6.0/lib/puma/thread_pool.rb:116:in `call'
          # /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/puma-3.6.0/lib/puma/thread_pool.rb:116:in `block in spawn_thread'
          # 
          #   Showing full backtrace because every line was filtered out.
          #   See docs for RSpec::Configuration#backtrace_exclusion_patterns and
          #   RSpec::Configuration#backtrace_inclusion_patterns for more information.
          # ------------------
          # --- Caused by: ---
          # Capybara::CapybaraError:
          #   Your application server raised an error - It has been raised in your test code because Capybara.raise_server_errors == true
          #   /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/capybara-2.8.1/lib/capybara/session.rb:126:in `raise_server_error!'

Comparison between `vanilla-ujs` and `jquery-ujs`

Library	Form inputs	`Content-Type` request header	Request body
`vanilla-ujs`	no	`Content-Type:multipart/form-data; boundary=----WebKitFormBoundarytlflAqgCb2rxgZF7`
`vanilla-ujs`	yes	`Content-Type:multipart/form-data; boundary=----WebKitFormBoundarylncJBPQwE3m4lhEm`
`jquery-ujs`	no	-none-	-none-
`jquery-ujs`	yes	`Content-Type:application/x-www-form-urlencoded; charset=UTF-8`