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!