Adjust the download page

Author: DmitrySharabin

assets/download.js

@@ -4,14 +4,11 @@
 
 import { getFileContents, toArray } from "./util.js";
 
-let components = await (await fetch("https://dev.prismjs.com/components.json")).json();
-
-let treeURL = "https://api.github.com/repos/PrismJS/prism/git/trees/master?recursive=1";
-let tree = (await (await fetch(treeURL)).json()).tree;
+let components = await (await fetch("/components.json")).json();
+let fileSizes = await (await fetch("/file-sizes.json")).json();
 
 let cache = {};
 let form = document.querySelector("form");
-let minified = true;
 
 let dependencies = {};
 let timerId = 0;
@@ -94,7 +91,13 @@ for (let category in components) {
 		input.checked = checked;
 		input.disabled = disabled;
 
-		let filepath = all.meta.path.replace(/\{id\}/g, id);
+		let filepath = all.meta.path;
+		if (category === "plugins") {
+			// When built, the plugins live in one directory called `plugins/`, not every plugin in its own directory
+			filepath = filepath.replace("{id}/", "");
+		}
+
+		filepath = filepath.replace(/\{id\}/g, id);
 
 		let info = all[id] = {
 			noCSS: all[id].noCSS || all.meta.noCSS,
@@ -104,33 +107,21 @@ for (let category in components) {
 			after: toArray(all[id].after),
 			modify: toArray(all[id].modify),
 			files: {
-				minified: {
-					paths: [],
-					size: 0
-				},
-				dev: {
-					paths: [],
-					size: 0
-				}
-			}
+				paths: [],
+				size: 0,
+			},
 		};
 
 		info.require.forEach(v => {
 			dependencies[v] = (dependencies[v] || []).concat(id);
 		});
 
 		if (!all[id].noJS && !/\.css$/.test(filepath)) {
-			info.files.minified.paths.push(filepath.replace(/(\.js)?$/, ".min.js"));
-			info.files.dev.paths.push(filepath.replace(/(\.js)?$/, ".js"));
+			info.files.paths.push(filepath.replace(/(\.js)?$/, ".js"));
 		}
 
-
 		if ((!all[id].noCSS && !/\.js$/.test(filepath)) || /\.css$/.test(filepath)) {
-			let cssFile = filepath.replace(/(\.css)?$/, ".css");
-			let minCSSFile = cssFile.replace(/(?:\.css)$/, ".min.css");
-
-			info.files.minified.paths.push(minCSSFile);
-			info.files.dev.paths.push(cssFile);
+			info.files.paths.push(filepath.replace(/(\.css)?$/, ".css"));
 		}
 
 		input.addEventListener("change", ({ target }) => {
@@ -170,20 +161,16 @@ for (let category in components) {
 	}
 }
 
-form.elements.compression[0].onclick =
-	form.elements.compression[1].onclick = function () {
-		minified = !!+this.value;
-
-		getFilesSizes();
-	};
-
 getFilesSizes();
 
-function getFileSize(filepath) {
-	for (let i = 0, l = tree.length; i < l; i++) {
-		if (tree[i].path === filepath) {
-			return tree[i].size;
-		}
+function getFileSize (category, id, filepath) {
+	let type = filepath.match(/\.(css|js)$/)[1];
+
+	if (category === "core") {
+		return fileSizes.core.js;
+	}
+	else {
+		return fileSizes[category][id]?.[type] ?? 0;
 	}
 }
 
@@ -196,14 +183,14 @@ function getFilesSizes() {
 				continue;
 			}
 
-			let distro = all[id].files[minified ? "minified" : "dev"];
+			let distro = all[id].files;
 			let files = distro.paths;
 
 			files.forEach(filepath => {
 				let file = cache[filepath] = cache[filepath] || {};
 
 				if (!file.size) {
-					let size = getFileSize(filepath);
+					let size = getFileSize(category, id, filepath);
 					if (size) {
 						file.size = size;
 						distro.size += file.size;
@@ -235,7 +222,7 @@ function update(updatedCategory, updatedId) {
 			let info = all[id];
 
 			if (info.enabled || id === updatedId) {
-				let distro = info.files[minified ? "minified" : "dev"];
+				let distro = info.files;
 
 				distro.paths.forEach(path => {
 					if (cache[path]) {
@@ -247,7 +234,8 @@ function update(updatedCategory, updatedId) {
 						if (info.enabled) {
 
 							if (!file.contentsPromise) {
-								file.contentsPromise = getFileContents("https://dev.prismjs.com/" + path);
+								// FIXME: Remove “v2” when Prism v2 is released
+								file.contentsPromise = getFileContents("https://v2.dev.prismjs.com/dist/" + path);
 							}
 
 							total[type] += size;
@@ -331,7 +319,7 @@ async function generateCode() {
 					redownload[category] = redownload[category] || [];
 					redownload[category].push(id);
 				}
-				info.files[minified ? "minified" : "dev"].paths.forEach(path => {
+				info.files.paths.forEach(path => {
 					if (cache[path]) {
 						let type = path.match(/\.(\w+)$/)[1];
 

download.njk

@@ -26,18 +26,19 @@ resources:
 					{%- set name = name + " + " + title -%}
 				{%- endfor %}
 			{%- endif %}
-			{%- set files_path = meta.path | replace("{id}", id) | replace(".css", "") | replace(".js", "") -%}
 			{%- set option = component.option or meta.option -%}
 
 			<label data-id="{{ id }}">
-				<input type="{{ "radio" if meta.exclusive else "checkbox" }}" name="download-{{ category }}" value="{{ id }}" {{ "checked" if option == "mandatory" }} {{ "disabled" if option == "mandatory" }} />
+				{%- set js_size = (file_sizes[category][id].js if id != "core" else file_sizes.core.js) or 0 -%}
+				{%- set css_size = file_sizes[category][id].css or 0 -%}
+				{%- set total_size = js_size + css_size -%}
+
+				<input type="{{ "radio" if meta.exclusive else "checkbox" }}" name="download-{{ category }}" value="{{ id }}" {{ "checked" if option == "mandatory" }} {{ "disabled" if option == "mandatory" or total_size == 0 }} />
 
 				{%- if meta.link -%}
-					{%- set link = meta.link | replace("{id}", id) -%}
-					{%- set base = meta.domain or "https://prismjs.com/" -%}
-					{%- set url = base + link -%}
+					{%- set url = meta.link | replace("{id}", id) -%}
 
-					<a href="{{ url }}" class="name">{{ name }}</a>
+					<a href="/{{ url }}" class="name">{{ name }}</a>
 				{%- else -%}
 					<span class="name">{{ name }}</span>
 				{%- endif -%}
@@ -46,11 +47,6 @@ resources:
 					<a href="https://github.com/{{ component.owner }}" class="owner" target="_blank">{{ component.owner }}</a>
 				{% endif %}
 
-				{%- set js_file_path = files_path + ".min.js" -%}
-				{%- set css_file_path = files_path + ".min.css" -%}
-				{%- set js_size = files_sizes[js_file_path] or 0 -%}
-				{%- set css_size = files_sizes[css_file_path] or 0 -%}
-				{%- set total_size = js_size + css_size -%}
 				<strong class="filesize">{{ total_size | pretty_size }}</strong>
 			</label>
 		{% endif %}
@@ -60,11 +56,6 @@ resources:
 
 <section>
 	<form>
-		<p>
-			Compression level:
-			<label><input type="radio" name="compression" value="0" /> Development version</label>
-			<label><input type="radio" name="compression" value="1" checked /> Minified version</label>
-		</p>
 		<section id="components">
 			{%- for category, components in components -%}
 				{{ list(category, components) }}