refactor(core/caniuse): use html response from API (#2796)
This commit is contained in:
Sid Vishnoi
GitHub
parent
98a76b4c73
commit
8cee065620
|
|
@ -13,34 +13,22 @@ export const name = "core/caniuse";
|
|||
|
||||
const API_URL = "https://respec.org/caniuse/";
|
||||
|
||||
// browser name dictionary
|
||||
const BROWSERS = new Map([
|
||||
["and_chr", "Chrome (Android)"],
|
||||
["and_ff", "Firefox (Android)"],
|
||||
["and_uc", "UC Browser (Android)"],
|
||||
["android", "Android"],
|
||||
["bb", "Blackberry"],
|
||||
["chrome", "Chrome"],
|
||||
["edge", "Edge"],
|
||||
["firefox", "Firefox"],
|
||||
["ie", "IE"],
|
||||
["ios_saf", "Safari (iOS)"],
|
||||
["op_mini", "Opera Mini"],
|
||||
["op_mob", "Opera Mobile"],
|
||||
["opera", "Opera"],
|
||||
["safari", "Safari"],
|
||||
["samsung", "Samsung Internet"],
|
||||
]);
|
||||
|
||||
// Keys from https://github.com/Fyrd/caniuse/blob/master/CONTRIBUTING.md
|
||||
const supportTitles = new Map([
|
||||
["y", "Supported."],
|
||||
["a", "Almost supported (aka Partial support)."],
|
||||
["n", "No support, or disabled by default."],
|
||||
["p", "No support, but has Polyfill."],
|
||||
["u", "Support unknown."],
|
||||
["x", "Requires prefix to work."],
|
||||
["d", "Disabled by default (needs to enabled)."],
|
||||
const BROWSERS = new Set([
|
||||
"and_chr",
|
||||
"and_ff",
|
||||
"and_uc",
|
||||
"android",
|
||||
"bb",
|
||||
"chrome",
|
||||
"edge",
|
||||
"firefox",
|
||||
"ie",
|
||||
"ios_saf",
|
||||
"op_mini",
|
||||
"op_mob",
|
||||
"opera",
|
||||
"safari",
|
||||
"samsung",
|
||||
]);
|
||||
|
||||
if (
|
||||
|
|
@ -83,7 +71,7 @@ export async function run(conf) {
|
|||
try {
|
||||
const apiUrl = options.apiURL || API_URL;
|
||||
const stats = await fetchStats(apiUrl, options);
|
||||
return createTableHTML(featureURL, stats);
|
||||
return hyperHTML`${{ html: stats }}`;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
const msg =
|
||||
|
|
@ -138,7 +126,6 @@ function getNormalizedConf(conf) {
|
|||
/**
|
||||
* @param {string} apiURL
|
||||
* @typedef {Record<string, [string, string[]][]>} ApiResponse
|
||||
* @return {Promise<ApiResponse>}
|
||||
* @throws {Error} on failure
|
||||
*/
|
||||
async function fetchStats(apiURL, options) {
|
||||
|
|
@ -149,62 +136,13 @@ async function fetchStats(apiURL, options) {
|
|||
if (Array.isArray(browsers)) {
|
||||
searchParams.set("browsers", browsers.join(","));
|
||||
}
|
||||
searchParams.set("format", "html");
|
||||
const url = `${apiURL}?${searchParams.toString()}`;
|
||||
const response = await fetch(url);
|
||||
const stats = await response.json();
|
||||
if (!response.ok) {
|
||||
const { status, statusText } = response;
|
||||
throw new Error(`Failed to get caniuse data: (${status}) ${statusText}`);
|
||||
}
|
||||
const stats = await response.text();
|
||||
return stats;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get HTML element for the canIUse support table.
|
||||
* @param {string} featureURL
|
||||
* @param {ApiResponse} stats
|
||||
*/
|
||||
function createTableHTML(featureURL, stats) {
|
||||
// render the support table
|
||||
return hyperHTML`
|
||||
${Object.entries(stats).map(addBrowser)}
|
||||
<a href="${featureURL}"
|
||||
title="Get details at caniuse.com">More info
|
||||
</a>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a browser and it's support to table.
|
||||
* @param {[ string, ApiResponse["browserName"] ]} args
|
||||
*/
|
||||
function addBrowser([browserName, browserData]) {
|
||||
/** @param {string[]} supportKeys */
|
||||
const getSupport = supportKeys => {
|
||||
const titles = supportKeys
|
||||
.filter(key => supportTitles.has(key))
|
||||
.map(key => supportTitles.get(key));
|
||||
return {
|
||||
className: `caniuse-cell ${supportKeys.join(" ")}`,
|
||||
title: titles.join(" "),
|
||||
};
|
||||
};
|
||||
|
||||
/** @param {[string, string[]]} args */
|
||||
const addLatestVersion = ([version, supportKeys]) => {
|
||||
const { className, title } = getSupport(supportKeys);
|
||||
const buttonText = `${BROWSERS.get(browserName) || browserName} ${version}`;
|
||||
return hyperHTML`
|
||||
<button class="${className}" title="${title}">${buttonText}</button>`;
|
||||
};
|
||||
|
||||
/** @param {[string, string[]]} args */
|
||||
const addBrowserVersion = ([version, supportKeys]) => {
|
||||
const { className, title } = getSupport(supportKeys);
|
||||
return hyperHTML`<li class="${className}" title="${title}">${version}</li>`;
|
||||
};
|
||||
|
||||
const [latestVersion, ...olderVersions] = browserData;
|
||||
return hyperHTML`
|
||||
<div class="caniuse-browser">
|
||||
${addLatestVersion(latestVersion)}
|
||||
<ul>
|
||||
${olderVersions.map(addBrowserVersion)}
|
||||
</ul>
|
||||
</div>`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<div class="caniuse-browser">
|
||||
<button class="caniuse-cell y" title="Supported.">Firefox 61</button>
|
||||
<ul>
|
||||
<li class="caniuse-cell n d" title="No support, or disabled by default.">
|
||||
60
|
||||
</li>
|
||||
<li class="caniuse-cell n d" title="No support, or disabled by default.">
|
||||
59
|
||||
</li>
|
||||
<li class="caniuse-cell n d" title="No support, or disabled by default.">
|
||||
58
|
||||
</li>
|
||||
<li class="caniuse-cell u" title="Support unknown.">57</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="caniuse-browser">
|
||||
<button class="caniuse-cell y" title="Supported.">Chrome 68</button>
|
||||
<ul>
|
||||
<li class="caniuse-cell y" title="Supported.">67</li>
|
||||
<li class="caniuse-cell n d" title="No support, or disabled by default.">
|
||||
66
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="https://caniuse.com/FEATURE" title="Get details at caniuse.com"
|
||||
>More info
|
||||
</a>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"firefox": [
|
||||
["61", ["y"]],
|
||||
["60", ["n", "d"]],
|
||||
["59", ["n", "d"]],
|
||||
["58", ["n"]],
|
||||
["57", ["u"]],
|
||||
["56", ["u"]]
|
||||
],
|
||||
"chrome": [
|
||||
["68", ["y"]],
|
||||
["67", ["y"]],
|
||||
["66", ["n", "d"]]
|
||||
]
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ import {
|
|||
|
||||
describe("Core — Can I Use", () => {
|
||||
afterAll(flushIframes);
|
||||
const apiURL = `${window.location.origin}/tests/data/caniuse/FEATURE.json`;
|
||||
const apiURL = `${window.location.origin}/tests/data/caniuse/FEATURE.html`;
|
||||
|
||||
it("uses meaningful defaults", async () => {
|
||||
const ops = makeStandardOps({
|
||||
|
|
@ -98,7 +98,7 @@ describe("Core — Can I Use", () => {
|
|||
expect(chromeVersions.length).toBe(2);
|
||||
|
||||
const firefoxVersions = firefox.querySelectorAll("ul li.caniuse-cell");
|
||||
expect(firefoxVersions.length).toBe(5);
|
||||
expect(firefoxVersions.length).toBe(4);
|
||||
|
||||
const firefoxButton = firefox.querySelector("button");
|
||||
expect(firefoxButton.textContent.trim()).toBe("Firefox 61");
|
||||
|
|
@ -106,16 +106,6 @@ describe("Core — Can I Use", () => {
|
|||
|
||||
expect(firefoxVersions[0].textContent.trim()).toBe("60");
|
||||
expect(firefoxVersions[0].classList.value).toBe("caniuse-cell n d");
|
||||
|
||||
// test dropdown
|
||||
// let style = getComputedStyle(firefox.querySelector("ul"));
|
||||
// expect(style.getPropertyValue("display")).toBe("none");
|
||||
|
||||
// // BUG: cannot trigger focus:
|
||||
// see: https://github.com/w3c/respec/issues/1642
|
||||
// firefoxButton.focus();
|
||||
// style = getComputedStyle(firefox.querySelector("ul"));
|
||||
// expect(style.getPropertyValue("display")).toBe("block");
|
||||
});
|
||||
|
||||
it("removes irrelevant config for caniuse feature", async () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue