From 3d96eedc6b1aa1cac0b0179fb6e7c13987b3557b Mon Sep 17 00:00:00 2001 From: Michael Schmidt Date: Tue, 5 Oct 2021 12:53:51 +0200 Subject: [PATCH] Update test and example pages to use Autoloader (#1936) --- assets/examples.js | 64 ++++++-------------------------- examples.html | 1 + examples/prism-js-templates.html | 12 +++--- test.html | 62 +++---------------------------- 4 files changed, 24 insertions(+), 115 deletions(-) diff --git a/assets/examples.js b/assets/examples.js index fe1c275b1b..a72b37e8d7 100644 --- a/assets/examples.js +++ b/assets/examples.js @@ -179,62 +179,22 @@ language.examplesPromise.then(function (contents) { examples[id].innerHTML = buildContentsHeader(id) + contents; - loadLanguage(id).then(function () { - Prism.highlightAllUnder(examples[id]); + /** @type {HTMLElement} */ + var container = examples[id]; + container.innerHTML = buildContentsHeader(id) + contents; + + // the current language might be an extension of a language + // so to be safe, we explicitly add a dependency to the current language + $$('pre', container).forEach(/** @param {HTMLElement} pre */function (pre) { + var dependencies = (pre.getAttribute('data-dependencies') || '').trim(); + dependencies = dependencies ? dependencies + ',' + id : id; + pre.setAttribute('data-dependencies', dependencies); }); + + Prism.highlightAllUnder(container); }); } else { examples[id].innerHTML = ''; } } - - /** - * Loads a language, including all dependencies - * - * @param {string} lang the language to load - * @returns {Promise} the promise which resolves as soon as everything is loaded - */ - function loadLanguage(lang) { - // at first we need to fetch all dependencies for the main language - // Note: we need to do this, even if the main language already is loaded (just to be sure..) - // - // We load an array of all dependencies and call recursively this function on each entry - // - // dependencies is now an (possibly empty) array of loading-promises - var dependencies = getDependenciesOfLanguage(lang).map(loadLanguage); - - // We create a promise, which will resolve, as soon as all dependencies are loaded. - // They need to be fully loaded because the main language may extend them. - return Promise.all(dependencies) - .then(function () { - - // If the main language itself isn't already loaded, load it now - // and return the newly created promise (we chain the promises). - // If the language is already loaded, just do nothing - the next .then() - // will immediately be called - if (!Prism.languages[lang]) { - return new Promise(function (resolve) { - $u.script('components/prism-' + lang + '.js', resolve); - }); - } - }); - } - - - /** - * Returns all dependencies (as identifiers) of a specific language - * - * @param {string} lang - * @returns {string[]} the list of dependencies. Empty if the language has none. - */ - function getDependenciesOfLanguage(lang) { - if (!components.languages[lang] || !components.languages[lang].require) { - return []; - } - - return ($u.type(components.languages[lang].require) === 'array') - ? components.languages[lang].require - : [components.languages[lang].require]; - } - }()); diff --git a/examples.html b/examples.html index 6ce28fe6ec..0d979d5981 100644 --- a/examples.html +++ b/examples.html @@ -101,6 +101,7 @@

Per language examples

+ diff --git a/examples/prism-js-templates.html b/examples/prism-js-templates.html index 2fc947aa76..e1fd09dc6c 100644 --- a/examples/prism-js-templates.html +++ b/examples/prism-js-templates.html @@ -1,25 +1,25 @@

HTML template literals

-
html`
+
html`
 <p>
 	Foo.
 </p>`;

 
 
JS DOM

-
div.innerHTML = `<p></p>`;
+
div.innerHTML = `<p></p>`;
 div.outerHTML = `<p></p>`;

 
 
styled-jsx CSS template literals

-
css`a:hover { color: blue; }`;

+
css`a:hover { color: blue; }`;

 
 
styled-components CSS template literals

-
const Button = styled.button`
+
const Button = styled.button`
 	color: blue;
 	background: red;
 `;

 
 
Markdown template literals

-
markdown`# My title`;

+
markdown`# My title`;

 
 
GraphQL template literals

-
gql`{ foo }`;
+
gql`{ foo }`;
 graphql`{ foo }`;

diff --git a/test.html b/test.html
index 0f363e8b47..04a0dfc59f 100644
--- a/test.html
+++ b/test.html
@@ -173,6 +173,10 @@ 
Test drive

 
 
 
+
+
 
 
 
@@ -266,10 +270,7 @@ 
Test drive

 						updateHashLanguage(lang);
 						updateShareLink();
 
-						// loadLanguage() returns a promise, so we use highlightCode()
-						// as resolve callback. The promise will be immediately
-						// resolved if there is nothing to load.
-						loadLanguage(lang).then(highlightCode);
+						highlightCode();
 					}
 				}
 			}, name
@@ -279,59 +280,6 @@ 
Test drive

 }
 
 
-/**
- * Loads a language, including all dependencies
- *
- * @param {string} lang the language to load
- * @type {Promise} the promise which resolves as soon as everything is loaded
- */
-function loadLanguage (lang)
-{
-	// at first we need to fetch all dependencies for the main language
-	// Note: we need to do this, even if the main language already is loaded (just to be sure..)
-	//
-	// We load an array of all dependencies and call recursively this function on each entry
-	//
-	// dependencies is now an (possibly empty) array of loading-promises
-	var dependencies = getDependenciesOfLanguage(lang).map(loadLanguage);
-
-	// We create a promise, which will resolve, as soon as all dependencies are loaded.
-	// They need to be fully loaded because the main language may extend them.
-	return Promise.all(dependencies)
-		.then(function () {
-
-			// If the main language itself isn't already loaded, load it now
-			// and return the newly created promise (we chain the promises).
-			// If the language is already loaded, just do nothing - the next .then()
-			// will immediately be called
-			if (!Prism.languages[lang]) {
-				return new Promise(function (resolve) {
-					$u.script('components/prism-' + lang + '.js', resolve);
-				});
-			}
-		});
-}
-
-
-/**
- * Returns all dependencies (as identifiers) of a specific language
- *
- * @param {string} lang
- * @returns {Array.} the list of dependencies. Empty if the language has none.
- */
-function getDependenciesOfLanguage (lang)
-{
-	if (!components.languages[lang] || !components.languages[lang].require)
-	{
-		return [];
-	}
-
-	return ($u.type(components.languages[lang].require) === "array")
-		? components.languages[lang].require
-		: [components.languages[lang].require];
-}
-
-
 var radios = $$('input[name=language]');
 var selectedRadio = radios[0];