Update test and example pages to use Autoloader (#1936)

RunDevelopment · web-flow · commit 3d96eedc6b1a · 2021-10-05T12:53:51.000+02:00
diff --git 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
@@ -101,6 +101,7 @@ <h1>Per language examples</h1>
 
 <script src="assets/vendor/utopia.js"></script>
 <script src="prism.js"></script>
+<script src="plugins/autoloader/prism-autoloader.js" data-autoloader-path="components/"></script>
 <script src="components.js"></script>
 <script src="assets/code.js"></script>
 <script src="assets/vendor/promise.js"></script>
diff --git a/examples/prism-js-templates.html b/examples/prism-js-templates.html
@@ -1,25 +1,25 @@
 <h2>HTML template literals</h2>
-<pre><code class="language-javascript">html`
+<pre data-dependencies="markup"><code class="language-javascript">html`
 &lt;p>
 	Foo.
 &lt;/p>`;</code></pre>
 
 <h2>JS DOM</h2>
-<pre><code class="language-javascript">div.innerHTML = `&lt;p>&lt;/p>`;
+<pre data-dependencies="markup"><code class="language-javascript">div.innerHTML = `&lt;p>&lt;/p>`;
 div.outerHTML = `&lt;p>&lt;/p>`;</code></pre>
 
 <h2><a href="https://github.com/zeit/styled-jsx">styled-jsx</a> CSS template literals</h2>
-<pre><code class="language-javascript">css`a:hover { color: blue; }`;</code></pre>
+<pre data-dependencies="css"><code class="language-javascript">css`a:hover { color: blue; }`;</code></pre>
 
 <h2><a href="https://github.com/styled-components/styled-components"><code class="language-none">styled-components</code></a> CSS template literals</h2>
-<pre><code class="language-javascript">const Button = styled.button`
+<pre data-dependencies="css"><code class="language-javascript">const Button = styled.button`
 	color: blue;
 	background: red;
 `;</code></pre>
 
 <h2>Markdown template literals</h2>
-<pre><code class="language-javascript">markdown`# My title`;</code></pre>
+<pre data-dependencies="markdown"><code class="language-javascript">markdown`# My title`;</code></pre>
 
 <h2>GraphQL template literals</h2>
-<pre><code class="language-javascript">gql`{ foo }`;
+<pre data-dependencies="graphql"><code class="language-javascript">gql`{ foo }`;
 graphql`{ foo }`;</code></pre>
diff --git a/test.html b/test.html
@@ -173,6 +173,10 @@ <h2>Test drive</h2>
 
 <script src="assets/vendor/utopia.js"></script>
 <script src="components/prism-core.js"></script>
+<script src="plugins/autoloader/prism-autoloader.js" data-autoloader-path="components/"></script>
+<script>
+Prism.plugins.autoloader.use_minified = false;
+</script>
 <script src="components.js"></script>
 <script src="assets/code.js"></script>
 <script src="assets/vendor/promise.js"></script>
@@ -266,10 +270,7 @@ <h2>Test drive</h2>
 						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 @@ <h2>Test drive</h2>
 }
 
 
-/**
- * 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.<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];
-}
-
-
 var radios = $$('input[name=language]');
 var selectedRadio = radios[0];
 
