trott / cordova-linter Goto Github PK

Find common patterns in HTML, CSS, and JavaScript that are incompatible with Apache Cordova and PhoneGap

License: Apache License 2.0

JavaScript 69.22% CSS 14.90% HTML 15.88%

cordova-linter's Introduction

cordova-linter

Find common patterns in HTML, CSS, and JavaScript that are incompatible with Apache Cordova and PhoneGap.

This project is deprecated. It was a beautiful idea that never took off. Feel free to fork it and make it awesome. I'm not doing any cordova work these days so my motivation just isn't there right now.

Getting Started

Install the tool with: npm install -g cordova-linter

Then lint a project with: cordova-linter path/to/your/project

Things The Linter Flags

absolute paths in src or href attributes
protocol-less paths in src or href attributes
omission of a script tag loading cordova.js

Stuff That Needs To Be Implemented

Find potentially problematic uses of load event when deviceReady is what is really needed.
Issue #1: Flag techniques used to trigger deviceReady in the browser for testing if they should be removed from a production build.
Detect CSS transitions that would benefit from hardware acceleration via the translate3d hack?
Detect use of click event handlers without FastClick loaded
Detect loading of phonegap.js instead of cordova.js
Detect when an app isn't a single-page app? Or is that overkill? I mean, that's not really a lint thing, that's a whole app architecture thing.
Documentation
Examples

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

(Nothing yet)

License

cordova-linter's People

Contributors

Stargazers

Watchers

Forkers

shawnb457

cordova-linter's Issues

DRY out code in lib/cordova-linter/lint.js

Absolute Paths

What's the most elegant way to programmatically cover all the places where an absolute path within HTML breaks stuff in Cordova/PhoneGap?

Is it to compile a list like:

src attribute of img element
href attribute of a element
...

Or is there something more elegant and future-proof than that?

Or is compiling a list imperfect but perhaps the best route to go as those two above along with a rule for iframes, script, and link tags will probably cover 90% of the cases?

usage message is outdated

should be:

cordova-linter [-v | -h | project_path]

DRY out lib/cordova-linter/util/html.js

Friendlier output when path is not a project, please

Parsing HTML

Need to implement HTML parsing to do things like identify href attributes that have absolute paths instead of relative paths. jsdom? cheerio? htmlparser2? Something else?

Detect use of `load` when `deviceReady` is called for

What should be the heuristic for detecting when load is being used where deviceReady is called for?

Without knowing what I'm talking about, I'm thinking:

Use esprima to parse JS
Find addEventListener with 'load' as the first parameter (and perhaps window.load = too)
Look inside the event callback for... ???

I'm OK with an 80% solution. Or even a 50% solution. It just needs to find common problems, not every problem.

Refactor repeated code in find*PathsInHtml.js

protocol-less URLs should not trigger absolute path warning

//google.com or whatever should be fine.

Best deviceready method?

When I'm developing a PhoneGap app, I usually develop a lot of the time in Chrome, because of the superior debugging. Hence, I cannot use the deviceready event to kickstart the app. Rather I'm using a function that wraps cordova API calls and puts them on a queue for (possibly) later execution when the deviceready event fires. One could also use a deferred to do the same.

I'm curious, what are others out there using to combat this problem? What are the implications of waiting for deviceready before kickstarting the app? What are the pros and cons of using the method I described above? I hope we can start a discussion here that finally leads to a recommendation for the implementation in this project.