Skip to content

Commit

Permalink
Update test and example pages to use Autoloader (#1936)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RunDevelopment
RunDevelopment committed Oct 5, 2021
1 parent b5a70e4 commit 3d96eed
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 115 deletions.
64 changes: 12 additions & 52 deletions assets/examples.js
View file
Expand Up @@ -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];
}

}());
1 change: 1 addition & 0 deletions examples.html
View file
Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions examples/prism-js-templates.html
View file
@@ -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>
62 changes: 5 additions & 57 deletions test.html
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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];

Expand Down

0 comments on commit 3d96eed

Please sign in to comment.