import { blob } from "https://esm.town/v/std/blob";
import { email } from "https://esm.town/v/std/email";
import { renderToString } from "npm:react-dom@18/server";
const updatedKey = "caniuse-updated-at";
const dataKey = "caniuse-data";
function Feature({ feature }: any) {
const links = feature.links ?? [];
return (
<>
<h2>{feature.title}</h2>
<p>{feature.description}</p>
<p>Full support: {feature.usage_perc_y}%</p>
{feature.usage_perc_a > 0 ? <p>Partial support: {feature.usage_perc_a}%</p> : null}
{!!feature.notes ? <p>Notes: {feature.notes}</p> : null}
<ul>
{links.map(link => (
<li key={link.url}>
<a href={link.url}>{link.title}</a>
</li>
))}
</ul>
</>
);
}
export default async function(interval: Interval) {
const previousDataUpdatedAt = await blob.getJSON(updatedKey) ?? 0;
const previousData = await blob.getJSON(dataKey);
const url = "https://raw.githubusercontent.com/Fyrd/caniuse/main/fulldata-json/data-1.0.json";
const data = await fetch(url).then((res) => res.json());
const updatedAt = data.updated;
if (previousDataUpdatedAt >= updatedAt) return;
const fetchedFeatures = Object.keys(data.data);
const features = [];
for (const feature of fetchedFeatures) {
const previousFeature = previousData?.[feature];
const previousUsage = previousFeature?.usage_perc_y ?? 0;
const nextFeature = data.data[feature];
const nextUsage = nextFeature.usage_perc_y;
if (nextUsage >= 90 && previousUsage < 90)
features.push(feature);
}
await blob.setJSON(updatedKey, data.updated);
await blob.setJSON(dataKey, data.data);
if (features.length === 0) return;
const html = renderToString(
<html>
<main>
<h1>Hello gunnnnii!</h1>
<p>Here are some new Web features that have become available widely available in browsers</p>
{features.map(feature => <Feature key={feature} feature={data.data[feature]} />)}
</main>
</html>,
);
await email({
subject: `You can use!`,
html,
});
}