#Problem
The problem is pretty straight forward: I am attempting to implement .js libraries that require non-js files to be in the same directory in order to work.
An example of this is the webpjs javascript library which polyfills the ability for the next-generation Webp(Weppy) image format be supported by browsers that don’t natively support it, such as Firefox, desktop and mobile versions safari, and even IE6.
I’ve been able to verify the library works outside of Rails by merely following the defacto instructions of including the library and its dependency, a .swf file, in the same directory and attaching both files in the header or footer of the .html/.haml file. I’ve been able to even have the library mentioned and verified to be valid to be mentioned on CanIUse.com after testing the library on iOS Safary, IE6, IE8 and 10; and Firefox.
Nonetheless, when I attempt to integrate the library in any rails app via the assets/javascripts/ folder, the app doesn’t implement the library correctly (including the shouter app everyone who participated in Thoughtbot’s Intermediate Rails Course created) .
What I’ve attempted to do to solve the problem with no luck:
Naturally I attempted seeing if the removal of the sprocket directive //= require_tree . and manually inserting the library in the application.html.haml file with the following link directive would work:
= javascript_include_tag "webpjs-0.0.2", "data-turbolinks-track" => true
Unfortunately, I’ve had no luck getting this to work either. I’m begun to think whether there’s an implicit expectation for a folder called js these files are stored in being the issue given the asynchronous version I don’t use but is still featured on the website being the following:
<script>(function(){var WebP=new Image();WebP.onload=WebP.onerror=function(){
if(WebP.height!=2){var sc=document.createElement('script');sc.type='text/javascript';sc.async=true;
var s=document.getElementsByTagName('script')[0];sc.src='js/webpjs-0.0.2.min.js';s.parentNode.insertBefore(sc,s);}};
WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';})();</script>
Again I know it’s not the format or files, being able to successfully hook the library up to my XAMP local server configuration and including the files both outside of Rails, as well as within Wordpress, with no problems.
In addition, ImageMagick was able to handle the format just fine within my style directive below involving PaperClip:
class PhotoShout < ActiveRecord::Base
has_attached_file :image, styles: {
shout: ["200x200>", :webp]
}
end
In general, trying out similar js libraries that have non .js dependencies and having the same issue, I thought this validates a forum entry.
Any help the next few days would be greatly appreciated.
Update 1: Seems the MIME-TYPE in the headers is ‘plain’ which is rather odd; seems I have to alter my local server’s or RACK’s MIME-TYPE file (or both)? . Would appreciate any ideas on which would be the correct course of action.
Attempted to do the following within Rails to see if it’ll fix the problem:
Rack::Mime::MIME_TYPES[".webp"] = "image/webp"
Update 2 (Partial solution) : As stated by @cpytel and @halogenandtoast, non-js files should never be inside the assets/javascripts/, regardless if a JavaScript file depends on it . Such files are appropriate to be in the public folder.
The only problem now seems to be related to “fingerprinted” .webp fies. Based on what’s been investigated so far, the library has a brittle way of identifying what’s .webp files and what aren’t through a substring if/else clause instead of a more surer way such as a regular expression test.
As a result, I"m testing more rigid ways to test whether an image is a webp image or not . From there I’ll issue a ticket/pull request on Github for the creator to then look into towards an improved version of this otherwise excellent library.
