Improve plugin downloads

Author: DmitrySharabin

README.json

@@ -1,4 +1,7 @@
 {
 	"layout": "home.njk",
-	"resources": ["plugins/keep-markup/prism-keep-markup.js", "https://dev.prismjs.com/components/prism-bash.js"]
+	"resources": [
+		"/dist/plugins/keep-markup.js { type=module }",
+		"/languages/bash.js { type=module }"
+	]
 }

README.md

@@ -23,7 +23,7 @@ Prism is used on several websites, small and large. Some of them are:
 # Examples
 
 The Prism source, highlighted with Prism (don’t you just love how meta this is?):
-<pre data-src="https://dev.prismjs.com/prism.js"></pre>
+<pre data-src="https://v2.dev.prismjs.com/dist/prism.js"></pre>
 
 This page’s CSS code, highlighted with Prism:
 
@@ -56,7 +56,7 @@ If you’re still not sold, you can [view more examples](examples.html) or [try
 - Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML).
 - Highlights inline code as well, not just code blocks.
 - It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.
-- Highlight specific lines and/or line ranges (requires [plugin](plugins/line-highlight/)).
+- Highlight specific lines and/or line ranges (requires [plugin](plugins/line-highlight/index.html)).
 - Show invisible characters like tabs, line breaks etc (requires [plugin](plugins/show-invisibles/)).
 - Autolink URLs and emails, use Markdown links in comments (requires [plugin](plugins/autolinker/)).
 
@@ -221,7 +221,7 @@ This is the list of all {{ languages | length }} languages currently supported b
 <ul id="languages-list">
 	{% for id, language in languages -%}
 	<li data-id="{{ id }}">
-		{{ language.title }}&nbsp;— 
+		{{ language.title }}&nbsp;—
 		{%- for alias in language.alias -%}
 			<code>{{ alias }}</code>{{ ", " if not loop.last }}
 		{%- endfor %}

_data/eleventyComputed.js

@@ -13,7 +13,7 @@ export default {
 
 		for (let id in languages) {
 			let ret = [id];
-			let alias = languages[id].alias;
+			let alias = Object.keys(languages[id].aliasTitles ?? {});
 			if (alias) {
 				ret = ret.concat(Array.isArray(alias) ? alias : [alias]);
 			}
@@ -59,10 +59,10 @@ export default {
 		}
 
 		// We are working with plugin resources
-		ret.push(`./prism-${id}.js { type="module" }`);
+		ret.push(`/dist/plugins/${id}.js { type="module" }`);
 
 		if (!data.noCSS) {
-			ret.push(`./prism-${id}.css`);
+			ret.push(`/dist/plugins/${id}.css`);
 		}
 
 		return ret;

_layouts/page.njk

@@ -14,7 +14,7 @@
 	<meta charset="utf-8" />
 	<link rel="icon" href="{{ base_url }}/assets/logo.svg" />
 	<link rel="stylesheet" href="{{ base_url }}/assets/style.css" />
-	<link rel="stylesheet" href="https://dev.prismjs.com/themes/prism.css" />
+	<link rel="stylesheet" href="/themes/prism.css" />
 	<script>var _gaq = [["_setAccount", "UA-33746269-1"], ["_trackPageview"]];</script>
 	<script src="https://www.google-analytics.com/ga.js" async></script>
 
@@ -89,7 +89,7 @@
 		</nav>
 	</footer>
 
-	<script src="https://dev.prismjs.com/prism.js"></script>
+	<script src="https://v2.dev.prismjs.com/dist/prism.js"></script>
 	{% if theme_switcher -%}
 	<script src="{{ base_url }}/assets/theme-switcher.js" type="module"></script>
 	{%- endif %}

_redirects

@@ -1,12 +1,4 @@
-# Do not redirect
-/plugins/:plugin/index.html    /plugins/:plugin/index.html                    200
-/plugins/:plugin/demo.html     /plugins/:plugin/demo.html                     200
-/plugins/:plugin/demo.js       /plugins/:plugin/demo.js                       200
-/plugins/:plugin/demo.css       /plugins/:plugin/demo.css                     200
-
 # Components: languages, themes, plugins, etc.
-/components/*                  https://dev.prismjs.com/components/:splat      200
-/plugins/:plugin/:file         https://dev.prismjs.com/plugins/:plugin/:file  200
-
-# Make the autoloader plugin work
-/plugins/:plugin/components/*  https://dev.prismjs.com/components/:splat      200
+/themes/:file                  https://v2.dev.prismjs.com/dist/themes/:file         301
+/languages/:file               https://v2.dev.prismjs.com/dist/languages/:file      301
+/dist/plugins/:file            https://v2.dev.prismjs.com/dist/plugins/:file        301

assets/download.js

@@ -27,7 +27,7 @@ if (hstr) {
 				}
 			}
 			if (category === "themes" && ids.length) {
-				let themeInput = document.querySelector(`#theme input[value="${ ids[0] }"]`);
+				let themeInput = document.querySelector(`#theme input[value="${ids[0]}"]`);
 				if (themeInput) {
 					themeInput.checked = true;
 					themeInput.dispatchEvent(new Event("change"));
@@ -60,7 +60,9 @@ for (let category in components) {
 	let all = components[category];
 
 	all.meta.section = form.querySelector(`#category-${category}`);
-	all.meta.section.querySelector(`[name="check-all-${category}"]`)?.addEventListener("change", ({ target }) => {
+	all.meta.section.querySelector(`[name="check-all-${category}"]`)?.addEventListener("change", ({
+		target,
+	}) => {
 		all.meta.section.querySelectorAll(`input[name="download-${category}"]`).forEach(input => {
 			all[input.value].enabled = input.checked = target.checked;
 		});
@@ -80,8 +82,10 @@ for (let category in components) {
 		let option = all[id].option || all.meta.option;
 
 		switch (option) {
-			case "mandatory": disabled = true; // fallthrough
-			case "default": checked = true;
+			case "mandatory":
+				disabled = true; // fallthrough
+			case "default":
+				checked = true;
 		}
 
 		if (category === "themes" && storedTheme) {
@@ -99,7 +103,7 @@ for (let category in components) {
 
 		filepath = filepath.replace(/\{id\}/g, id);
 
-		let info = all[id] = {
+		let info = (all[id] = {
 			noCSS: all[id].noCSS || all.meta.noCSS,
 			noJS: all[id].noJS || all.meta.noJS,
 			enabled: checked,
@@ -110,7 +114,7 @@ for (let category in components) {
 				paths: [],
 				size: 0,
 			},
-		};
+		});
 
 		info.require.forEach(v => {
 			dependencies[v] = (dependencies[v] || []).concat(id);
@@ -137,7 +141,8 @@ for (let category in components) {
 				});
 			}
 
-			if (dependencies[id] && !target.checked) { // It’s required by others
+			if (dependencies[id] && !target.checked) {
+				// It’s required by others
 				dependencies[id].forEach(dependent => {
 					let input = form.querySelector(`label[data-id="${dependent}"] > input`);
 					input.checked = false;
@@ -174,7 +179,7 @@ function getFileSize (category, id, filepath) {
 	}
 }
 
-function getFilesSizes() {
+function getFilesSizes () {
 	for (let category in components) {
 		let all = components[category];
 
@@ -187,7 +192,7 @@ function getFilesSizes() {
 			let files = distro.paths;
 
 			files.forEach(filepath => {
-				let file = cache[filepath] = cache[filepath] || {};
+				let file = (cache[filepath] = cache[filepath] || {});
 
 				if (!file.size) {
 					let size = getFileSize(category, id, filepath);
@@ -206,13 +211,14 @@ function getFilesSizes() {
 	}
 }
 
-function prettySize(size) {
-	return Math.round(100 * size / 1024) / 100 + "KB";
+function prettySize (size) {
+	return Math.round((100 * size) / 1024) / 100 + "KB";
 }
 
-function update(updatedCategory, updatedId) {
+function update (updatedCategory, updatedId) {
 	// Update total size
-	let total = { js: 0, css: 0 }; let updated = { js: 0, css: 0 };
+	let total = { js: 0, css: 0 };
+	let updated = { js: 0, css: 0 };
 
 	for (let category in components) {
 		let all = components[category];
@@ -232,10 +238,11 @@ function update(updatedCategory, updatedId) {
 						let size = file.size || 0;
 
 						if (info.enabled) {
-
 							if (!file.contentsPromise) {
 								// FIXME: Remove “v2” when Prism v2 is released
-								file.contentsPromise = getFileContents("https://v2.dev.prismjs.com/dist/" + path);
+								file.contentsPromise = getFileContents(
+									"https://v2.dev.prismjs.com/dist/" + path,
+								);
 							}
 
 							total[type] += size;
@@ -273,36 +280,37 @@ function update(updatedCategory, updatedId) {
 
 		Object.assign(form.querySelector(`label[data-id="${updatedId}"] .filesize`), {
 			textContent: prettySize(updated.all),
-			title: (updated.js ? Math.round(100 * updated.js / updated.all) + "% JavaScript" : "") +
+			title:
+				(updated.js ? Math.round((100 * updated.js) / updated.all) + "% JavaScript" : "") +
 				(updated.js && updated.css ? " + " : "") +
-				(updated.css ? Math.round(100 * updated.css / updated.all) + "% CSS" : "")
+				(updated.css ? Math.round((100 * updated.css) / updated.all) + "% CSS" : ""),
 		});
 	}
 
 	form.querySelector("#filesize").textContent = prettySize(total.all);
 
 	Object.assign(form.querySelector("#percent-js"), {
-		textContent: Math.round(100 * total.js / total.all) + "%",
-		title: prettySize(total.js)
+		textContent: Math.round((100 * total.js) / total.all) + "%",
+		title: prettySize(total.js),
 	});
 
 	Object.assign(form.querySelector("#percent-css"), {
-		textContent: Math.round(100 * total.css / total.all) + "%",
-		title: prettySize(total.css)
+		textContent: Math.round((100 * total.css) / total.all) + "%",
+		title: prettySize(total.css),
 	});
 
 	delayedGenerateCode();
 }
 
 // "debounce" multiple rapid requests to generate and highlight code
-function delayedGenerateCode() {
+function delayedGenerateCode () {
 	if (timerId !== 0) {
 		clearTimeout(timerId);
 	}
 	timerId = setTimeout(generateCode, 500);
 }
 
-async function generateCode() {
+async function generateCode () {
 	/** @type {CodePromiseInfo[]} */
 	let promises = [];
 	let redownload = {};
@@ -328,7 +336,7 @@ async function generateCode() {
 							id: id,
 							category: category,
 							path: path,
-							type: type
+							type: type,
 						});
 					}
 				});
@@ -369,11 +377,14 @@ async function generateCode() {
 
 		let newCode = Object.assign(document.createElement("code"), {
 			className: codeElement.className,
-			textContent: text
+			textContent: text,
 		});
 
-		Prism.highlightElement(newCode, false, () => {
-			codeElement.replaceWith(newCode);
+		Prism.highlightElement(newCode, {
+			async: false,
+			callback: () => {
+				codeElement.replaceWith(newCode);
+			},
 		});
 
 		form.querySelector(`#download-${type} .download-button`).onclick = () => {
@@ -395,7 +406,7 @@ async function generateCode() {
  * @property {string} path
  * @property {string} type
  */
-function buildCode(promises) {
+function buildCode (promises) {
 	// sort the promises
 
 	/** @type {CodePromiseInfo[]} */
@@ -406,7 +417,8 @@ function buildCode(promises) {
 	promises.forEach(p => {
 		if (p.category === "core" || p.category === "themes") {
 			finalPromises.push(p);
-		} else {
+		}
+		else {
 			let infos = toSortMap[p.id];
 			if (!infos) {
 				toSortMap[p.id] = infos = [];
@@ -416,12 +428,14 @@ function buildCode(promises) {
 	});
 
 	// this assumes that the ids in `toSortMap` are complete under transitive requirements
-	getLoader(components, Object.keys(toSortMap)).getIds().forEach(id => {
-		if (!toSortMap[id]) {
-			console.error(`${ id } not found.`);
-		}
-		finalPromises.push.apply(finalPromises, toSortMap[id]);
-	});
+	getLoader(components, Object.keys(toSortMap))
+		.getIds()
+		.forEach(id => {
+			if (!toSortMap[id]) {
+				console.error(`${id} not found.`);
+			}
+			finalPromises.push.apply(finalPromises, toSortMap[id]);
+		});
 	promises = finalPromises;
 
 	// build
@@ -434,18 +448,22 @@ function buildCode(promises) {
 		if (i < l) {
 			let p = promises[i];
 			p.contentsPromise.then(function (contents) {
-				code[p.type] += contents + (p.type === "js" && !/;\s*$/.test(contents) ? ";" : "") + "\n";
+				code[p.type] +=
+					contents + (p.type === "js" && !/;\s*$/.test(contents) ? ";" : "") + "\n";
 				i++;
 				f(resolve);
 			});
 			p.contentsPromise["catch"](function () {
-				errors.push(Object.assign(document.createElement("p"), {
-					textContent: `An error occurred while fetching the file "${ p.path }".`
-				}));
+				errors.push(
+					Object.assign(document.createElement("p"), {
+						textContent: `An error occurred while fetching the file "${p.path}".`,
+					}),
+				);
 				i++;
 				f(resolve);
 			});
-		} else {
+		}
+		else {
 			resolve({ code: code, errors: errors });
 		}
 	};
@@ -456,7 +474,7 @@ function buildCode(promises) {
 /**
  * @returns {Promise<string>}
  */
-async function getVersion() {
-	let packageJSON = await getFileContents("https://dev.prismjs.com/package.json");
+async function getVersion () {
+	let packageJSON = await getFileContents("https://v2.dev.prismjs.com/package.json");
 	return JSON.parse(packageJSON).version;
 }