update, add testing framework

eleventy.config.js

@@ -40,10 +40,10 @@ module.exports = eleventyConfig => {
 	});
 	//config.setServerPassthroughCopyBehavior("passthrough"); // doesn't work
 	eleventyConfig.addPassthroughCopy({ assets: "/" });
+	eleventyConfig.addWatchTarget("src/**/*.css");
 	eleventyConfig.addWatchTarget("src/**/*.js");
 	eleventyConfig.addWatchTarget("src/**/*.ts");
 	eleventyConfig.addWatchTarget("src/**/*.json");
-	// TODO does the css need a watch target?
 	return {
 		dir: {
 			input,

jest.config.mjs

@@ -0,0 +1,5 @@
+export default {
+	roots: ["./src"],
+	preset: "ts-jest",
+	testEnvironment: "jsdom",
+};

package.json5

@@ -1,19 +1,24 @@
 {
 	scripts: {
-		clean: "rm -rf _site",
-		build: "rm -rf _site && eleventy",
-		serve: "eleventy --serve",
-		debug: "DEBUG=* eleventy --serve",
+		clean: 'rm -rf _site',
+		build: 'rm -rf _site && eleventy',
+		serve: 'eleventy --serve',
+		debug: 'DEBUG=* eleventy --serve',
+		test: 'tsc; jest --passWithNoTests',
 	},
 	dependencies: {
-		"@11ty/eleventy": "^2.0.1",
-		esbuild: "^0.19.11",
-		"html-minifier": "^4.0.0",
-		"ts-essentials": "^9.4.1",
+		'@11ty/eleventy': '^2.0.1',
+		esbuild: '^0.20.1',
+		'html-minifier': '^4.0.0',
 	},
 	devDependencies: {
-		prettier: "^3.2.4",
-		"@prettier/plugin-pug": "^3.0.0",
-		typescript: "^5.3.3",
+		'@prettier/plugin-pug': '^3.0.0',
+		'@types/jest': '^29.5.12',
+		jest: '^29.7.0',
+		'jest-environment-jsdom': '^29.7.0',
+		prettier: '^3.2.5',
+		'ts-essentials': '^9.4.1',
+		'ts-jest': '^29.1.2',
+		typescript: '^5.4.2',
 	},
 }

src/dom.ts

@@ -0,0 +1,17 @@
+const domLoaded = new Promise(resolve => {
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", () => resolve(undefined));
+	} else {
+		resolve(undefined);
+	}
+});
+
+// returns promise for object with just about every element needed for js
+// this should make it unneccecary to get element by id
+const elements = (async () => {
+	await domLoaded;
+	let elems = Array.from(document.querySelectorAll("[data-js]"));
+	return Object.fromEntries(elems.map(x => [x.id, x]))
+})();
+
+export { elements };