feat: replace jsdom with cheerio

README.md

@@ -57,7 +57,7 @@ npx --yes define-html
 or
 
 ```sh
-bunx define-html
+bunx --bun define-html
 ```
 
 This will create `dist` folder with the output files.

package.json

@@ -12,7 +12,7 @@
 		"watch": "bun build ./src/index.ts --outdir ./dist --watch",
 		"build": "bun build ./src/index.ts --outdir ./dist",
 		"build:bin": "bun build ./src/bin.ts --target node --outdir ./dist",
-		"compile": "cd example && bun ../src/bin.ts --outdir ./dist",
+		"compile": "cd example && bun --bun ../src/bin.ts --outdir ./dist",
 		"lint": "bunx biome lint",
 		"test": "playwright test",
 		"test:local": "playwright test --ui"
@@ -44,12 +44,11 @@
 	"devDependencies": {
 		"@biomejs/biome": "1.8.3",
 		"@playwright/test": "^1.37.1",
-		"@types/jsdom": "^21.1.7",
 		"http-server": "^14.1.1",
 		"typescript": "^5.2.2"
 	},
 	"dependencies": {
-		"fast-glob": "^3.3.2",
-		"jsdom": "^24.1.1"
+		"cheerio": "^1.0.0-rc.12",
+		"fast-glob": "^3.3.2"
 	}
 }

src/bin.ts

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
 
 import fg from "fast-glob";
-import { JSDOM } from "jsdom";
+import * as cheerio from "cheerio";
 
 import { copyFile, mkdir, readFile, writeFile } from "node:fs/promises";
 import { dirname, relative, resolve } from "node:path";
 
-import { commentMarker, getComponentLinks } from "./helpers";
+import { commentMarker, componentSelector } from "./helpers";
 
 // TODO get from args
 const DIST_DIR = "./dist";
@@ -20,9 +20,9 @@ const pages = new Set<string>();
 
 for (const path of files) {
 	const text = await readFile(path, "utf8");
-	const dom = new JSDOM(text);
+	const $ = cheerio.load(text);
 
-	const links = getComponentLinks(dom.window.document);
+	const links = $(componentSelector);
 	if (links.length === 0) {
 		if (!components.has(path)) {
 			pages.add(path);
@@ -33,19 +33,17 @@ for (const path of files) {
 	console.log(`${path} has ${links.length} components`);
 
 	for (const link of links) {
-		const component = relative(dirname(path), link.href);
+		const component = relative(dirname(path), link.attribs.href);
 		components.add(component);
 		pages.delete(component);
 		const text = await readFile(component, "utf8");
-		const comment = dom.window.document.createComment(
-			`${commentMarker}${component}\n${text}`
-		);
-		link.before(comment);
-		link.remove();
+		$(`<!--${commentMarker}${component}\n${text}-->`).insertBefore(link);
 	}
 
+	$(componentSelector).remove();
+
 	const out = await prepareSave(path);
-	await writeFile(out, dom.serialize());
+	await writeFile(out, $.html());
 }
 
 for (const page of pages) {

src/helpers.ts

@@ -1,3 +1,5 @@
+const IGNORE_DATA_ATTRIBUTE = "data-define-html-ignore";
+
 export const commentMarker = "__DEFINE_HTML__";
 
 export function cloneNode<T extends Node>(element: T): T {
@@ -21,9 +23,4 @@ export function returnIfDefined<T>(
 	return value;
 }
 
-const ignoreDataAttribute = "data-define-html-ignore";
-const selector = `link[rel='preload'][as='fetch'][href$='.html']:not([${ignoreDataAttribute}])`;
-
-export function getComponentLinks(document: Document): HTMLLinkElement[] {
-	return Array.from(document.querySelectorAll(selector));
-}
+export const componentSelector = `link[rel='preload'][as='fetch'][href$='.html']:not([${IGNORE_DATA_ATTRIBUTE}])`;

src/index.ts

@@ -1,7 +1,7 @@
 import { createComponent } from "./create-component.js";
 import {
 	commentMarker,
-	getComponentLinks,
+	componentSelector,
 	returnIfDefined,
 } from "./helpers.js";
 
@@ -13,7 +13,10 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 async function fetchFromLinks(): Promise<void> {
-	await Promise.all(getComponentLinks(document).map(defineHtml));
+	const links = Array.from<HTMLLinkElement>(
+		document.querySelectorAll(componentSelector)
+	);
+	await Promise.all(links.map(defineHtml));
 }
 
 async function defineHtml(link: HTMLLinkElement): Promise<void> {