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 @@
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];