Search caniuse.com

Open caniuse in Script Kit

// Menu: caniuse
// Description: Search caniuse.com for browser feature support
// Author: Ollie W
// Twitter: @pxlprfct
import "@johnlindquist/kit";
export interface Agents {
[browser: string]: Agent;
}
export interface Agent {
browser: string;
long_name: string;
abbr: string;
prefix: string;
type: string;
usage_global?: {
string: number;
};
versions: Array<null | string>;
}
export interface Data {
[browser: string]: Feature;
}
export interface Feature {
title: string;
description: string;
spec: string;
status: string;
links: Link[];
categories: string[];
stats: Stats[];
notes?: string;
notes_by_num?: { [num: string]: string };
}
export interface Link {
url: string;
title: string;
}
export interface Stats {
[browser: string]: null | string;
}
// ----------------------------------------------------------------------------
const TABLE_HEADER = `
| Browser (Latest version) | Can I Use? |
| ------------------------ | ---------- |`;
const PRETTY_SUPPORT = new Map([
["y", "Yes"],
["n", "No"],
]);
const GLOBAL_BROWSER_USAGE_CUT_OFF = 0.5;
// ----------------------------------------------------------------------------
const pretty_formatted_support = (caniuse: string) => {
const support = PRETTY_SUPPORT.get(caniuse);
return support ? support : "Caveats";
};
const get_latest_browser_version = (browser_versions: Stats) => {
const latest_browser = Object.keys(browser_versions)
.sort((a, b) => Number(a) - Number(b))
.pop();
return [latest_browser, browser_versions[latest_browser]];
};
const create_table_row = (browser, version, support) =>
`| ${pretty_browser_agents.get(
browser
)} *(${version})* | ${pretty_formatted_support(support)} |`;
const create_browser_support_rows = (feature: Stats[]) =>
Object.entries(feature)
.reduce((rows, [browser, browser_versions]) => {
const [version, support] = get_latest_browser_version(browser_versions);
if (pretty_browser_agents.has(browser)) {
rows.push(create_table_row(browser, version, support));
}
return rows;
}, [])
.join("\n");
const create_browser_support_table = (stats: Stats[]) =>
[TABLE_HEADER, create_browser_support_rows(stats)].join("\n");
const create_preview = (feature: Feature) =>
md(
[
`## ${feature.title}`,
"",
`${feature.description}`,
`${create_browser_support_table(feature.stats)}`,
].join("\n")
);
// ----------------------------------------------------------------------------
const { agents, data } = await get<{ agents: Agents; data: Data }>(
`https://raw.githubusercontent.com/Fyrd/caniuse/master/data.json`
).then((response) => response.data);
const pretty_browser_agents = new Map(
Object.entries(agents).reduce((acc, [browser, data]) => {
const total_usage = Object.values(data.usage_global).reduce(
(sum, value) => sum + value || 0,
0
);
if (total_usage >= GLOBAL_BROWSER_USAGE_CUT_OFF) {
acc.push([browser, data.browser]);
}
return acc;
}, [])
);
const choices = Object.entries(data).map(([feature, feature_value]) => ({
name: feature_value.title,
description: feature_value.description,
value: feature,
preview: () => create_preview(feature_value),
}));
const query = await arg("Search for browser feature", choices);
browse(`https://caniuse.com/?search=${query}`);

Based on https://github.com/willfarrell/alfred-caniuse-workflow

First thing I've made with scriptkit - very slick!