https://github.com/sphinxknight/compat-tester
NPM package to statically analyze the compatibility of a web page across a given browser scope
https://github.com/sphinxknight/compat-tester
compatibility mdn-data nodejs
Last synced: about 1 year ago
JSON representation
NPM package to statically analyze the compatibility of a web page across a given browser scope
- Host: GitHub
- URL: https://github.com/sphinxknight/compat-tester
- Owner: SphinxKnight
- Created: 2018-02-11T13:54:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-21T01:52:18.000Z (over 3 years ago)
- Last Synced: 2024-11-12T19:43:49.064Z (over 1 year ago)
- Topics: compatibility, mdn-data, nodejs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/compat-tester
- Size: 40 KB
- Stars: 27
- Watchers: 4
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# compat-tester
`compat-tester` is a static tool analysis that, provided a "browser scope", scans HTML, CSS and JS files and outputs a compatibility report for features that might not be available for such a scope (e.g. if my scope contains IE8 and my `style.css` stylesheet contains CSS Grid properties).
`compat-tester`'s approach is pretty naive and currently doesn't detect any [progressive enhancement](https://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/), polyfills, etc. that could improve actual compatibility.
This tool is heavily built upon:
* [`mdn-browser-compat-data`](https://www.npmjs.com/package/mdn-browser-compat-data) from MDN team, please [contribute](https://developer.mozilla.org/docs/MDN/Contribute/Structures/Compatibility_tables) so that more data is available :)
* [`htmlparser2`](https://www.npmjs.com/package/htmlparser2) for parsing HTML
* [`css-tree`](https://www.npmjs.com/package/css-tree) for parsing CSS
Thanks to them for doing the heavy work :)
**This project must be considered as alpha-stage.**
## Install
npm install compat-tester
## Usage
### As an command line tool
compat-tester # Scans index.html as root file and uses scope.json as defaults
compat-tester mySite.html myScope.json
compat-tester https://developer.mozilla.org/en-US/ myScope.json # Scans the remote web page
compat-tester -html myPage.html myScope.json # Only scans the HTML of myPage.html
compat-tester -css myStyle.css myScope.json # Only scans the CSS of myStyle.css
compat-tester -js myScript.js myScope.json # !Not implemented yet! Only scans myScript.js
### As a module
const compatTester = require("compat-tester");
const options = {"contrib": "all"} // "all"|"true"|"null"
let report = compatTester.cssStringAnalyzer(string, browserScope, callback[, options ]);
let report = compatTester.cssFileAnalyzer(filePath, browserScope, callback[, options ]);
let report = compatTester.htmlStringAnalyzer(string, browserScope, callback[, options ]);
let report = compatTester.htmlFileAnalyzer(filePath, browserScope, callback[, options ]);
let report = compatTester.jsStringAnalyzer(string, browserScope, callback[, options ]); // Not implemented yet
let report = compatTester.jsFileAnalyzer(filePath, browserScope, callback[, options ]); // Not implemented yet
## Browser-scope file
The `scope.json` file is simply a JSON file where the keys are the identifiers of the browsers you want/need to support, following [mdn-browser-compat](https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers)'s syntax and where the values are the minimum version you want/need to support.
For instance with the following `scope.json`
{
"ie":"8",
"firefox":"34"
}
`compat-tester` will report any detected feature that isn't available before Internet Explorer 8 and Firefox 34.
## Examples
Using an scope with IE "1" (not a typo ;)) and Firefox "8", the report might look like:
HTML Report:
firefox incompatible - @index.html#L21 - - attrcrossorigin - minVer: 18
firefox incompatible - @index.html#L21 - - attrintegrity not implemented
firefox incompatible - @index.html#L99 - - attrcrossorigin - minVer: 18
firefox incompatible - @index.html#L186 - - minVer: 49
ie incompatible - @index.html#L21 - - attrcrossorigin not implemented
ie incompatible - @index.html#L21 - - attrintegrity not implemented
ie incompatible - @index.html#L99 - - attrcrossorigin not implemented
ie incompatible - @index.html#L117 - - minVer: 9
ie incompatible - @index.html#L186 - not implemented
CSS Report:
firefox incompatible - @test_files/style.css#L191 - Property: animation - minVer: 16
firefox incompatible - @test_files/style.css#L477 - Property: word-wrap - minVer: 49
firefox incompatible - @test_files/style.css#L485 - Property: font-variant-ligatures - minVer: 34
firefox incompatible - @test_files/style.css#L489 - Property: word-wrap - minVer: 49
firefox incompatible - @test_files/style.css#L491 - Property: word-break - minVer: 15
firefox incompatible - @test_files/style.css#L522 - Property: box-sizing - minVer: 29
firefox incompatible - @test_files/style.css#L686 - Property: box-sizing - minVer: 29
firefox incompatible - @test_files/style.css#L941 - Property: transform - minVer: 16
ie incompatible - @test_files/style.css#L49 - Property: background-color - minVer: 4
ie incompatible - @test_files/style.css#L54 - Property: background-color - minVer: 4
ie incompatible - @test_files/style.css#L58 - Property: content - minVer: 8
ie incompatible - @test_files/style.css#L62 - Property: font-weight - minVer: 3
…
## Limitations - Wishlist
The following features are currently missing :'(
### CSS
(*current feature set: properties, @-rules*)
* Selectors
### JavaScript
(*current feature set: nothing*)
* Parsing JS and dealing with primary features like statements, operators
### Misc.
* Resolving a tree of resources (e.g. fetch internal HTML pages, CSS with @import…)
* Adding comments to locally disable warnings
* An interactive CLI to easily create a `scope.json` file (something like "compat-tester --init")
* Tests
### Integration
* Addon for VSCode
* Addon for SublimeText
## Notes
This project is one of my first "real" JavaScript project, feel free to add [issues](https://github.com/SphinxKnight/compat-tester/issues) if you see any minor/major/confusing/horrendous stuff.