Deno script which creates a HTML table (or text) showing browser feature implementations state

caniuse.ts

/*
Get Browser feature implementation state
- fetches data from caniuse.com
- checks each browser for support of known features
- generates a HTML table as seen here: https://codepen.io/netsi1964/pen/PoGWoWP
RUN: deno run --allow-net caniuse.ts
Created by Sten Hougaard @netsi1964 12/12-2020
 */
interface SupportStatus {
  supported: number;
  unsupported: number;
  name: string;
}
async function fetchSync(url: string): Promise<any> {
  const response = await fetch(url);
  var data = await response.json();
  return data;
}

const canIUseData: any = await fetchSync(
  "https://raw.githubusercontent.com/Fyrd/caniuse/master/data.json"
);
const allBrowsers = [
  "ie",
  "edge",
  "firefox",
  "chrome",
  "safari",
  "opera",
  "ios_saf",
  "op_mini",
  "android",
  "bb",
  "op_mob",
  "and_chr",
  "and_ff",
  "ie_mob",
  "and_uc",
  "samsung",
  "and_qq",
  "baidu",
  "kaios",
];
const requiredBrowserNames: string[] = ["safari"];
let supportStatus: SupportStatus[] = [];
const { data } = canIUseData;
const features = Object.keys(data);
allBrowsers.forEach((currentBrowserName) => {
  let supportInfo: SupportStatus = {
    supported: 0,
    unsupported: 0,
    name: currentBrowserName,
  };
  features.forEach((feature, i) => {
    const { stats } = data[feature];
    const browser = stats[currentBrowserName];
    const versions = Object.keys(browser);
    let supported = false;
    let version = versions.length - 1;
    while (version > 0 && !supported) {
      supported = browser[versions[version]] === "y";
      version--;
    }
    supported ? supportInfo.supported++ : supportInfo.unsupported++;
  });
  if (supportInfo.supported > 0) {
    supportStatus.push(supportInfo);
  }
});

supportStatus = supportStatus.sort((a, b) =>
  a.supported < b.supported ? 1 : -1
);
const textResult = supportStatus.reduce(
  (result, status) => `${result}${toText(status)}`,
  ""
);
const htmlResult =
  supportStatus.reduce(
    (result, status, i) => `${result}${toHTML(status, i)}`,
    "<table><thead><tr><th>Position</th><th>Browser</th><th>Supported features</th><th>Unupported features</th><th>% supported</th></tr></thead><tbody>"
  ) + "</tbody></table>";
console.log(htmlResult);

function toText(status: SupportStatus) {
  return `${status.name}
${underline(status.name)}
Supported features : ${status.supported}
Unupported features: ${status.unsupported}\n
`;
}

function toHTML(status: SupportStatus, i: number) {
  return `
<tr><th>${i + 1}</th><th>${status.name}</th><td>${status.supported}</td><td>${
    status.unsupported
  }</td><td>${Math.round((status.supported / features.length) * 100)}%</td></tr>
`;
}
function underline(name: string): string {
  return "=".repeat(name.length);
}