feat: add toHTML function

eik-lib · Oct 9, 2024 · 4576ddd · 4576ddd
1 parent 6738052
commit 4576ddd
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/src/index.js b/src/index.js
@@ -294,4 +294,35 @@ export default class Eik {
 			'Eik config was not loaded or "loadMaps" is "false" when calling .maps()',
 		);
 	}
+
+	/**
+	 * Function that generates and returns an import map script tag for use in an document head.
+	 *
+	 * Currently only a single import map is supported in the browser so we need to merge together import map objects into a single object
+	 * by using a JS Map object. Last in wins so order of import maps defined in eik.json is important if multiple maps share the same entries.
+	 *
+	 * @example
+	 * ```
+	 * const importMap = eik.toHTML();
+	 *
+	 * <head>
+	 *   ...
+	 *   ${importMap}
+	 *   ...
+	 * </head>
+	 * ```
+	 *
+	 * @returns {string}
+	 */
+	toHTML() {
+		const allImportMapKeyValuePairs = this.maps().flatMap((map) =>
+			Object.entries(map.imports),
+		);
+		const mergedAndDedupedImportMapObject = Object.fromEntries(
+			new Map(allImportMapKeyValuePairs).entries(),
+		);
+		return `<script type="importmap">${JSON.stringify({
+			imports: mergedAndDedupedImportMapObject,
+		})}</script>`;
+	}
 }
diff --git a/test/index.test.js b/test/index.test.js
@@ -342,3 +342,23 @@ tap.test(
 		t.end();
 	},
 );
+
+tap.test(
+	"Client - toHTML - import maps merged and script tag created",
+	async (t) => {
+		const client = new Eik({
+			loadMaps: true,
+			path: t.context.fixture,
+		});
+		await client.load();
+
+		const resolved = client.toHTML();
+
+		t.same(
+			resolved,
+			`<script type="importmap">${JSON.stringify({ imports: { eik: "/src/eik.js" } })}</script>`,
+			"Should return an import map script tag",
+		);
+		t.end();
+	},
+);