Update test and example pages to use Autoloader

examples.html

@@ -101,6 +101,7 @@ <h1>Per language examples</h1>
 
 <script src="scripts/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="scripts/code.js"></script>
 <script src="scripts/vendor/promise.js"></script>

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>

scripts/examples.js

@@ -152,64 +152,23 @@ function update(id) {
 			language.examplesPromise = getFileContents(language.examplesPath);
 		}
 		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} code */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 {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];
-}
-
 }());

test.html

@@ -128,15 +128,22 @@ <h2>Test drive</h2>
 
 <script src="scripts/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="scripts/code.js"></script>
 <script src="scripts/vendor/promise.js"></script>
 
 <script>
 (function() {
-var form = $('form'), code = $('code', form),
-    languages = components.languages,
-    highlightCode = function() { Prism.highlightElement(code); };
+var form = $('form');
+var code = $('code', form);
+var languages = components.languages;
+function highlightCode() {
+	Prism.highlightElement(code);
+}
 
 
 function updateHashLanguage(lang) {
@@ -184,10 +191,7 @@ <h2>Test drive</h2>
 						code.textContent = code.textContent;
 						updateHashLanguage(lang);
 
-						// 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
@@ -197,59 +201,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];