Drop Babel in favor of esm and TypeScript (#1726)

To get some meaningful errors during feature development, I thought it'd be useful to use TypeScript on `features.js` only, hoping to keep it contained to that file.

@sindresorhus suggested we just extend it the whole extension and maybe that can be done incrementally, without having to necessarily use types on everything.

1 files changed, 58 insertions, 0 deletions

diff --git a/source/features/embed-gist-inline.tsx b/source/features/embed-gist-inline.tsx
new file mode 100644
index 00000000..55841f16
--- /dev/null
+++ b/source/features/embed-gist-inline.tsx
@@ -0,0 +1,58 @@
+import {React} from 'dom-chef/react';
+import select from 'select-dom';
+import domify from '../libs/domify';
+import features from '../libs/features';
+
+const isGist = link =>
+	!link.pathname.includes('.') && // Exclude links to embed files
+	(
+		link.hostname.startsWith('gist.') ||
+		link.pathname.startsWith('gist/')
+	);
+
+const isOnlyChild = link => link.textContent.trim() === link.parentNode.textContent.trim();
+
+async function embedGist(link) {
+	const info = <em> (loading)</em>;
+	link.after(info);
+
+	try {
+		const response = await fetch(`${link.href}.json`);
+		const gistData = await response.json();
+
+		const files = domify(gistData.div).firstElementChild;
+		const fileCount = files.children.length;
+
+		if (fileCount > 1) {
+			info.textContent = ` (${fileCount} files)`;
+		} else {
+			link.parentNode.attachShadow({mode: 'open'}).append(
+				<style>{`
+					.gist .gist-data {
+						max-height: 16em;
+						overflow-y: auto;
+					}
+				`}</style>,
+				<link rel="stylesheet" href={gistData.stylesheet} />,
+				files
+			);
+		}
+	} catch (_) {
+		info.remove(' (embed failed)');
+	}
+}
+function init() {
+	select.all('.js-comment-body p a:only-child')
+		.filter(item => isGist(item) && isOnlyChild(item))
+		.forEach(embedGist);
+}
+
+features.add({
+	id: 'embed-gist-inline',
+	include: [
+		features.isPR,
+		features.isIssue
+	],
+	load: features.onAjaxedPages,
+	init
+});