Skip to content

Commit

Permalink
Create CLI Tool (#2)
Browse files Browse the repository at this point in the history
  • Loading branch information
BenAAndrew committed Feb 7, 2024
1 parent 06ac712 commit 42d9bb4
Show file tree
Hide file tree
Showing 9 changed files with 206 additions and 13 deletions.
42 changes: 39 additions & 3 deletions .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,48 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'
- run: npm ci
- run: npm run compile
- run: npm test
- run: xvfb-run -a npm run extension-test
- name: Install package
run: npm i -g
- name: Run CLI Command (expected to fail)
run: |
set +e
browser-compatibility-checker -f sample_project
if [ $? -eq 0 ]; then
echo "Command succeeded unexpectedly"
exit 1
fi
echo "Command failed as expected"
- name: Run CLI Command (expected to pass)
run: browser-compatibility-checker -f sample_project_2
- name: Run unit tests
run: npm test
- name: Run extension tests
run: xvfb-run -a npm run extension-test
test-npm-package:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'
- run: npm install browser-compatibility-checker
- name: Run CLI Command (expected to fail)
run: |
set +e
npx browser-compatibility-checker -f sample_project
if [ $? -eq 0 ]; then
echo "Command succeeded unexpectedly"
exit 1
fi
echo "Command failed as expected"
- name: Run CLI Command (expected to pass)
run: npx browser-compatibility-checker -f sample_project_2
15 changes: 15 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
sample_project/
sample_project_2/
*.test.*
*.spec.*
src/
.vscode-test/
.vscode/
.github/
*.png
*.gif
*.vsix
.eslintrc.json
.vscode-test.mjs
.vscodeignore
extension.*
26 changes: 21 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,43 @@

A tool for analyzing frontend code to find browser compatibility issues powered by [MDN compatibility data](https://developer.mozilla.org/en-US/)

- Scans HTML, CSS & JS files for compatibility issues
- Reports both deprecated & mixed-support features
- Supports configuration of target browsers

## VSCode Extension

![](preview.gif)

- Scans HTML, CSS & JS files for compatibility issues
- Reports both deprecated & mixed-support features
- Supports configuration of target browsers

### Extension Settings

- `browser-compatibility-checker.enableOnChange`: Enable this extension on start and file change
- `browser-compatibility-checker.useError`: Use a severity of 'Error' for each problem (otherwise uses 'Warning')
- `browser-compatibility-checker.browserList`: Which browsers to check compatibility for (defaults to all MDN recognised browsers)
- `browser-compatibility-checker.warnForOtherBrowsers`: Show a warning for issues with browsers not in the browser list
- `browser-compatibility-checker.foldersToIgnore`: Glob paths to exclude from scanning

## CLI Tool

1. `npm i -g browser-compatibility-checker`
2. `npx browser-compatibility-checker`

### Arguments

- **-f, --folder**: Folder path to scan
- **-b, --browsers**: Comma seperated list of browsers to check (defaults to all)

## Local development

### Installation

1. `npm install`
2. `npm run watch`
3. Open VSCode & press F5 to run the extension
3. Run:
- **VSCode extension**: Open VSCode & press F5 to run the extension
- **CLI tool**: `npm i -g`, then run with `browser-compatibility-checker`

## Disclaimer

This tool is not a replacement for cross-browser testing and cannot verify how elements will perform on various browsers.
Elements which are not flagged as incompatible may still have issues on some browsers.
22 changes: 20 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 8 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
"description": "Checks compatibility of your HTML/CSS/JS with modern browsers. Uses MDN compatibility data to check for deprecated/mixed-support features.",
"publisher": "benandrew",
"icon": "icon.png",
"version": "1.0.2",
"version": "1.0.3",
"repository": {
"type": "git",
"url": "https://github.com/BenAAndrew/browser-compatibility-checker.git"
"url": "git+https://github.com/BenAAndrew/browser-compatibility-checker.git"
},
"engines": {
"vscode": "^1.85.0"
Expand Down Expand Up @@ -94,7 +94,10 @@
"format": "npx prettier . --write",
"test": "mocha 'out/browser-compatibility-checker/test/*.spec.js'",
"extension-test": "vscode-test",
"publish": "vsce package && vsce publish"
"publish-extension": "vsce package && vsce publish"
},
"bin": {
"browser-compatibility-checker": "./out/index.js"
},
"devDependencies": {
"@types/mocha": "^10.0.6",
Expand All @@ -112,6 +115,8 @@
},
"dependencies": {
"@mdn/browser-compat-data": "^5.5.8",
"commander": "^12.0.0",
"kleur": "^4.1.5",
"minimatch": "^9.0.3"
}
}
7 changes: 7 additions & 0 deletions sample_project_2/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<html>
<body>
<!-- Following should be fine -->
<h1>A title</h1>
<p>Some text</p>
</body>
</html>
3 changes: 3 additions & 0 deletions sample_project_2/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// Following should be OK
const finite = isFinite(1000 / x);
const x = parseFloat("55.5");
13 changes: 13 additions & 0 deletions sample_project_2/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
body {
/* Following should be OK */
background: #ffffff;
font-family: "Source Sans Pro", sans-serif;
font-style: normal;
font-weight: 300;
}

/* Following should be OK */
@font-face {
font-family: "Source Sans Pro";
src: url("");
}
80 changes: 80 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
#!/usr/bin/env node

import { program } from "commander";
import { minimatch } from "minimatch";
import { readFileSync, readdirSync } from "fs";
import path from "path";
import kleur from "kleur";
import { findIssues, CompatIssue } from "./browser-compatibility-checker";
const compatIssues: {
[path: string]: { [key: string]: CompatIssue };
} = require("./browser-compatibility-checker/compat-issues.json");

interface CliOptions {
folder: string;
browsers: string[] | string;
}

program
.description("Scan files for browser compatibility issues")
.option("-f, --folder <folder>", "Folder to scan")
.option(
"-b, --browsers [browsers]",
"Comma seperated list of browsers to check",
[
"chrome",
"edge",
"firefox",
"opera",
"safari",
"ie",
"chrome_android",
"firefox_android",
"opera_android",
"safari_ios",
"samsunginternet_android",
"webview_android",
]
);

program.parse(process.argv);
const { folder, browsers } = program.opts() as CliOptions;
const browsersToCheck =
typeof browsers === "string" ? browsers.split(",") : browsers;

if (!folder) {
console.error(kleur.red("No folder path provided."));
process.exit(1);
}

const files = readdirSync(folder, { recursive: true, encoding: "utf8" });
console.log(`Scanning: ${folder} (${files.length} files)`);
let hasIssue = false;

for (const [fileRegex, issues] of Object.entries(compatIssues)) {
for (const file of files) {
const filePath = path.join(folder, file);
if (minimatch(filePath, fileRegex, { nocase: true })) {
const text = readFileSync(filePath, "utf8");
const matches = findIssues(text, issues, browsersToCheck, false);
if (matches.length > 0) {
hasIssue = true;
console.error(kleur.red(`Issues found with ${filePath}:`));
for (const { message } of matches) {
console.log(` - ${message}`);
}
} else {
console.log(kleur.green(filePath));
}
}
}
}

if (hasIssue) {
console.log(
"Issues detected. Address these issues or change --browsers to ingore irrelavant browser issues"
);
process.exit(1);
} else {
console.log("No issues detected!");
}

0 comments on commit 42d9bb4

Please sign in to comment.