Build DOM via JSX

package.json

@@ -13,6 +13,7 @@
 	"dependencies": {
 		"copy-text-to-clipboard": "^1.0.2",
 		"debounce-fn": "^1.0.0",
+		"dom-chef": "^1.0.2",
 		"dom-loaded": "^1.0.0",
 		"element-ready": "^2.0.0",
 		"github-injection": "^0.3.0",
@@ -28,7 +29,11 @@
 	"devDependencies": {
 		"ava": "*",
 		"babel-cli": "^6.24.1",
+		"babel-core": "^6.25.0",
+		"babel-loader": "^7.1.1",
+		"babel-plugin-jsx": "^1.2.0",
 		"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
+		"babel-plugin-transform-react-jsx": "^6.24.1",
 		"chrome-webstore-upload-cli": "^1.0.0",
 		"dot-json": "^1.0.3",
 		"npm-run-all": "^4.0.2",
@@ -43,7 +48,13 @@
 			"webextensions"
 		],
 		"rules": {
-			"import/no-unassigned-import": 0
+			"import/no-unassigned-import": 0,
+			"no-unused-vars": [
+				2,
+				{
+					"varsIgnorePattern": "^h$"
+				}
+			]
 		},
 		"ignores": [
 			"extension/**"
@@ -61,8 +72,16 @@
 		]
 	},
 	"babel": {
+		"comments": false,
 		"plugins": [
-			"transform-es2015-modules-commonjs"
+			"transform-es2015-modules-commonjs",
+			[
+				"transform-react-jsx",
+				{
+					"pragma": "h",
+					"useBuiltIns": true
+				}
+			]
 		]
 	}
 }

src/content.js

@@ -7,7 +7,7 @@ import toSemver from 'to-semver';
 import linkifyIssues from 'linkify-issues';
 import select from 'select-dom';
 import domLoaded from 'dom-loaded';
-import domify from './libs/domify';
+import {h} from 'dom-chef';
 
 import markUnread from './libs/mark-unread';
 import addGistCopyButton from './libs/copy-gist';
@@ -59,7 +59,7 @@ function linkifyBranchRefs() {
 
 		const branchUrl = canonicalBranch.replace(':', '/tree/');
 
-		$el.wrap(`<a href="/${branchUrl}">`);
+		$el.wrap(<a href={`/${branchUrl}`}></a>);
 	});
 }
 
@@ -68,7 +68,7 @@ function appendReleasesCount(count) {
 		return;
 	}
 
-	$('.reponav-releases').append(`<span class="Counter">${count}</span>`);
+	select('.reponav-releases').append(<span class="Counter">{count}</span>);
 }
 
 function cacheReleasesCount() {
@@ -90,12 +90,12 @@ function addCompareLink() {
 		return;
 	}
 
-	$('.reponav-dropdown .dropdown-menu').prepend(`
-		<a href="/${repoUrl}/compare" class="dropdown-item refined-github-compare-tab">
-			${icons.darkCompare}
-			<span itemprop="name">Compare</span>
+	select('.reponav-dropdown .dropdown-menu').prepend(
+		<a href={`/${repoUrl}/compare`} class="dropdown-item refined-github-compare-tab">
+			{icons.darkCompare}
+			<span itemprop="name"> Compare</span>
 		</a>
-	`);
+	);
 }
 
 function renameInsightsDropdown() {
@@ -116,62 +116,59 @@ function hideEmptyMeta() {
 
 function moveMarketplaceLinkToProfileDropdown() {
 	const thirdDropdownItem = select('.dropdown-item[href="/explore"]');
-	const marketplaceLink = domify('<a class="dropdown-item" href="/marketplace">Marketplace</a>');
+	const marketplaceLink = <a class="dropdown-item" href="/marketplace">Marketplace</a>;
 	thirdDropdownItem.insertAdjacentElement('afterend', marketplaceLink);
 }
 
 function addReleasesTab() {
-	const $repoNav = $('.js-repo-nav');
-	let $releasesTab = $repoNav.children('[data-selected-links~="repo_releases"]');
-	const hasReleases = $releasesTab.length > 0;
-
-	if (!hasReleases) {
-		$releasesTab = $(`<a href="/${repoUrl}/releases" class="reponav-item reponav-releases" data-hotkey="g r" data-selected-links="repo_releases /${repoUrl}/releases">
-			${icons.tag}
-			<span>Releases</span>
-		</a>`);
+	if (select.exists('.reponav-releases')) {
+		return;
 	}
 
-	if (pageDetect.isReleases()) {
-		$repoNav.find('.selected')
-			.removeClass('js-selected-navigation-item selected');
+	const releasesTab = (
+		<a href={`/${repoUrl}/releases`} class="reponav-item reponav-releases" data-hotkey="g r" data-selected-links={`repo_releases /${repoUrl}/releases`}>
+			{icons.tag}
+			<span> Releases </span>
+		</a>
+	);
 
-		$releasesTab.addClass('js-selected-navigation-item selected');
-	}
+	select('.reponav-dropdown, [data-selected-links~="repo_settings"]')
+		.insertAdjacentElement('beforeBegin', releasesTab);
 
-	if (!hasReleases) {
-		$releasesTab.insertBefore(select('.reponav-dropdown, [data-selected-links~="repo_settings"]'));
+	cacheReleasesCount();
 
-		cacheReleasesCount();
+	if (pageDetect.isReleases()) {
+		releasesTab.classList.add('js-selected-navigation-item', 'selected');
+		select('.reponav-item.selected')
+			.classList.remove('js-selected-navigation-item', 'selected');
 	}
 }
 
 async function addTrendingMenuItem() {
 	const secondListItem = await elementReady('.header-nav.float-left .header-nav-item:nth-child(2)');
 
-	$(secondListItem).after(`
+	secondListItem.insertAdjacentElement('afterEnd',
 		<li class="header-nav-item">
 			<a href="/trending" class="header-nav-link" data-hotkey="g t">Trending</a>
 		</li>
-	`);
+	);
 }
 
 function addYoursMenuItem() {
 	const pageName = pageDetect.isIssueSearch() ? 'issues' : 'pulls';
 	const username = getUsername();
-	const $menu = $('.subnav-links');
 
-	if ($menu.find('.refined-github-yours').length > 0) {
+	if (select.exists('.refined-github-yours')) {
 		return;
 	}
 
-	const yoursMenuItem = $(`<a href="/${pageName}?q=is%3Aopen+is%3Aissue+user%3A${username}" class="subnav-item refined-github-yours">Yours</a>`);
+	const yoursMenuItem = <a href={`/${pageName}?q=is%3Aopen+is%3Aissue+user%3A${username}`} class="subnav-item refined-github-yours">Yours</a>;
 
-	if ($('.subnav-links .selected').length === 0 && location.search.includes(`user%3A${username}`)) {
-		yoursMenuItem.addClass('selected');
+	if (!select.exists('.subnav-links .selected') && location.search.includes(`user%3A${username}`)) {
+		yoursMenuItem.classList.add('selected');
 	}
 
-	$menu.append(yoursMenuItem);
+	select('.subnav-links').append(yoursMenuItem);
 }
 
 function addReadmeButtons() {
@@ -180,7 +177,7 @@ function addReadmeButtons() {
 		return;
 	}
 
-	const buttons = domify('<div id="refined-github-readme-buttons"></div>');
+	const buttons = <div id="refined-github-readme-buttons"></div>;
 
 	/**
 	 * Generate Release button
@@ -193,10 +190,14 @@ function addReadmeButtons() {
 	const releases = new Map(tags);
 	const [latestRelease] = toSemver([...releases.keys()], {clean: false});
 	if (latestRelease) {
-		const button = domify(`<a class="tooltipped tooltipped-nw">${icons.tag}</a>`);
-		button.href = `${releases.get(latestRelease)}#readme`;
-		button.setAttribute('aria-label', `View this file at the latest version (${latestRelease})`);
-		buttons.appendChild(button);
+		buttons.appendChild(
+			<a
+				class="tooltipped tooltipped-nw"
+				href={`${releases.get(latestRelease)}#readme`}
+				aria-label={`View this file at the latest version (${latestRelease})`}>
+				{icons.tag}
+			</a>
+		);
 	}
 
 	/**
@@ -206,9 +207,14 @@ function addReadmeButtons() {
 		const readmeName = select('#readme > h3').textContent.trim();
 		const path = select('.breadcrumb').textContent.trim().split('/').slice(1).join('/');
 		const currentBranch = select('.branch-select-menu .select-menu-item.selected').textContent.trim();
-		const button = domify(`<a class="tooltipped tooltipped-nw" aria-label="Edit this file">${icons.edit}</a>`);
-		button.href = `/${repoUrl}/edit/${currentBranch}/${path}${readmeName}`;
-		buttons.appendChild(button);
+		buttons.appendChild(
+			<a
+				href={`/${repoUrl}/edit/${currentBranch}/${path}${readmeName}`}
+				class="tooltipped tooltipped-nw"
+				aria-label="Edit this file">
+				{icons.edit}
+			</a>
+		);
 	}
 
 	readmeContainer.appendChild(buttons);
@@ -222,13 +228,13 @@ function addDeleteForkLink() {
 		const forkPath = currentBranch ? currentBranch.title.split(':')[0] : null;
 
 		if (forkPath && forkPath !== repoUrl) {
-			$(postMergeDescription).append(
-				`<p id="refined-github-delete-fork-link">
-					<a href="/${forkPath}/settings">
-						${icons.fork}
+			postMergeDescription.append(
+				<p id="refined-github-delete-fork-link">
+					<a href={`/${forkPath}/settings`}>
+						{icons.fork}
 						Delete fork
 					</a>
-				</p>`
+				</p>
 			);
 		}
 	}
@@ -249,14 +255,13 @@ function addPatchDiffLinks() {
 		commitUrl = commitUrl.replace(/\/pull\/\d+\/commits/, '/commit');
 	}
 
-	const $commitMeta = $('.commit-meta span.float-right');
-
-	$commitMeta.append(`
+	select('.commit-meta span.float-right').append(
 		<span class="sha-block patch-diff-links">
-			<a href="${commitUrl}.patch" class="sha">patch</a>
-			<a href="${commitUrl}.diff" class="sha">diff</a>
+			<a href={`${commitUrl}.patch`} class="sha">patch</a>
+			{ ' ' /* Workaround for: JSX eats whitespace between elements */ }
+			<a href={`${commitUrl}.diff`} class="sha">diff</a>
 		</span>
-	`);
+	);
 }
 
 function removeDiffSigns() {
@@ -314,7 +319,7 @@ function showRecentlyPushedBranches() {
 		}
 
 		const uri = `/${repoUrl}/show_partial?partial=tree/recently_touched_branches_list`;
-		$(`<include-fragment src=${uri}></include-fragment>`).prependTo('.repository-content');
+		select('.repository-content').prepend(<include-fragment src={uri}></include-fragment>);
 	});
 }
 
@@ -403,14 +408,14 @@ function addOPLabels() {
 }
 
 function addMilestoneNavigation() {
-	$('.repository-content').before(`
+	select('.repository-content').insertAdjacentElement('beforeBegin',
 		<div class="subnav">
 			<div class="subnav-links float-left" role="navigation">
-				<a href="/${repoUrl}/labels" class="subnav-item">Labels</a>
-				<a href="/${repoUrl}/milestones" class="subnav-item">Milestones</a>
+				<a href={`/${repoUrl}/labels`} class="subnav-item">Labels</a>
+				<a href={`/${repoUrl}/milestones`} class="subnav-item">Milestones</a>
 			</div>
 		</div>
-	`);
+	);
 }
 
 function addFilterCommentsByYou() {
@@ -427,9 +432,10 @@ function addFilterCommentsByYou() {
 }
 
 function addProjectNewLink() {
-	const projectNewLink = `<a href="/${repoUrl}/projects/new" class="btn btn-sm" id="refined-github-project-new-link">Add a project</a>`;
 	if (select.exists('#projects-feature:checked') && !select.exists('#refined-github-project-new-link')) {
-		$(`#projects-feature ~ p.note`).after(projectNewLink);
+		select(`#projects-feature ~ p.note`).insertAdjacentElement('afterEnd',
+			<a href={`/${repoUrl}/projects/new`} class="btn btn-sm" id="refined-github-project-new-link">Add a project</a>
+		);
 	}
 }
 

src/libs/copy-file-path.js

@@ -1,5 +1,6 @@
 import copyToClipboard from 'copy-text-to-clipboard';
 import select from 'select-dom';
+import {h} from 'dom-chef';
 
 function addFilePathCopyBtn() {
 	const $files = $('#files .file');
@@ -11,13 +12,14 @@ function addFilePathCopyBtn() {
 
 		const fileUri = el.querySelector('.file-header .file-info a');
 		const filePath = fileUri.getAttribute('title');
-		const copyButton = `
+		const copyButton = (
 			<button id="rg-copy-filepath-btn" class="btn-octicon tooltipped tooltipped-nw btn btn-sm copy-filepath-btn">
 				<svg aria-hidden="true" class="octicon octicon-clippy" height="16" version="1.1" viewBox="0 0 14 16" width="14" aria-label="Copy to clipboard">
 					<path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z">
 					</path>
 				</svg>
-			</button>`;
+			</button>
+		);
 		$(copyButton)
 			.insertAfter(fileUri)
 			.mouseenter(e => {

src/libs/copy-file.js

@@ -1,5 +1,6 @@
 import copyToClipboard from 'copy-text-to-clipboard';
 import select from 'select-dom';
+import {h} from 'dom-chef';
 
 export default () => {
 	// Button already added (partial page nav), or non-text file
@@ -9,7 +10,9 @@ export default () => {
 
 	const targetSibling = select('#raw-url');
 	const fileUri = targetSibling.getAttribute('href');
-	$(`<a href="${fileUri}" class="btn btn-sm BtnGroup-item copy-btn">Copy</a>`).insertBefore(targetSibling);
+	targetSibling.insertAdjacentElement('beforeBegin',
+		<a href={fileUri} class="btn btn-sm BtnGroup-item copy-btn">Copy</a>
+	);
 
 	$(document).on('click', '.copy-btn', e => {
 		e.preventDefault();

src/libs/copy-gist.js

@@ -1,5 +1,6 @@
 import copyToClipboard from 'copy-text-to-clipboard';
 import select from 'select-dom';
+import {h} from 'dom-chef';
 
 export default () => {
 	// Button already added (partial page nav), or non-text file
@@ -9,7 +10,7 @@ export default () => {
 
 	$('.blob-wrapper').each((i, blob) => {
 		const actionsParent = blob.parentNode.querySelector('.file-actions');
-		const $btn = $(`<button class="btn btn-sm copy-btn gist-copy-btn">Copy</button>`);
+		const $btn = $(<button class="btn btn-sm copy-btn gist-copy-btn">Copy</button>);
 		$btn.data('blob', blob);
 		$btn.prependTo(actionsParent);
 	});

src/libs/diffheader.js

@@ -1,5 +1,6 @@
 import debounce from 'debounce-fn';
 import select from 'select-dom';
+import {h} from 'dom-chef';
 
 const diffFile = (() => {
 	let lastFile;
@@ -111,7 +112,9 @@ const setup = () => {
 
 	$('.diffbar > .diffstat').insertAfter('.pr-review-tools');
 
-	$(`<span class="diffbar-item diff-toolbar-filename"></span>`).insertAfter('.toc-select');
+	select('.toc-select').insertAdjacentElement('afterEnd',
+		<span class="diffbar-item diff-toolbar-filename"></span>
+	);
 	diffFile.reset();
 };