jslint prevents Raphael.js to be used?
I want to use the (lateley very much praise)d Raphael.js cross browser svg library in a webView. After a lot of tries at how to link to a local version of this library I decided to just try it in an new project to better debug why it won't work. I created a new project and just copied the raphael.js file in the Resources dir without any other code. When I try to launch this empty new project in the iphone simulator the javascript compiler shows many [WARN] warnings. And finally the line "JavaScript compiler reported "Stopping, unable to continue. (30% scanned)." at raphael.js:1083"
If I use one of the raphael examples from its website in a html file and browse to it in the simulator with safari mobile I get 0 errors in the developer console and it just works as expected. My real project uses exactly the same html file but just doesn't show any svg in the webView.
So this makes me think that the javascript compiler prevents javascript with warnings to be used in titanium projects, because the compiler is too strict. I usually try to correct every warning but with external libraries this is just not maintainable when you want to upgrade to a newer version of the library.
I really regret that it seems that Titanium just prevents us to use cool libraries like these, or can we? Has anyone else tried raphael (I know it did work before version 0.9, but that was a totally different Titanium)
5 Answers
-
As far as the "Too many errors" problem, if you add this comment to the external library, Ti will ignore the errors. I started to use Thanasis Polychronakis' fix here: http://developer.appcelerator.com/question/27621/just-started—want-to-use-googles-closure-tools, but looking at the code in compiler.js, I realized it is just looking for the strings 'jQuery' and 'Sizzle' to skip the message. I added the comment to jQ mobile and it works….
/* jQuery Sizzle - these are to fool the Ti compiler into not reporting errors! */ -
You will have to disable jslint.
I also have to do so because I use some minified code.http://developer.appcelerator.com/question/27621/just-started—want-to-use-googles-closure-tools
-
Thanks for the tip Daniel, that does of course take care of the jsLint errors and warnings, but unfortunately it does not solve my problem with Raphaeljs. I also did some other tests, for example linking to the official github source of the raphael.js raw file, like this in the script src attribute: http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true
This works if I browse to the html file in mobile safari in the simulator (and all the raphael examples work on the device in the safari app), but it does NOT work from within a titanium app which uses a webView with the exact same url pointing to the html file. This seems to indicate that the Titanium webView is either using a webkit version which is different than the usual safari (probably, but should not be too much of an issue) or that Titanium restricts the webView in some ways..
Take this example from raphael: Raphael touches url: http://raphaeljs.com/touches.html
It will work in mobile safari, but it won't work when using the same url as a url property of a webView in a Titanium app. It will load and display the html, but won't run the scripts, it just stops and never displays the actual svg and events.
I would love to have an Appcelerator employee check this out, otherwise I will create a ticket for this
-
I solved the problem as I described in another thread:
http://developer.appcelerator.com/question/15861/using-raphaeljs-js-drawing-library-in-a-mobile-app
Hope it helps!
-
Finally found the real issue. It is an issue in the Raphael source code which tries to find a match in the navigator.userAgent which isn't there and therefore returns null and can't continue. This happens because the navigator.userAgent differs in the webView object from mobile safari and the error can also be seen on any iPad, iPhone, iP* when you use safari and browse to a Raphael js example and then use the 'add to homescreen' option to create a mobile app. The created mobile app won't run the raphael example because of this bug in the raphael.js, more info and a solution can be found in this github issue: http://github.com/DmitryBaranovskiy/raphael/issues#issue/185
(I can confirm that raphael does work after changing this small regex line in its source, so lets have svg in our iphone apps !)