feat: optional prism autoload

Adds support to manually load tokenizer dependencies to bundle them instead of loading on the fly via CDN.

- Skips prism autoload core + dependencies when `window.Prism` is already defined
- Reverts `config.prismBaseUrl`  (#34)

Author: andreruffert

README.md

@@ -71,7 +71,6 @@ Currently there are only limited [themes](https://github.com/andreruffert/syntax
 /**
  * @typedef Config
  * @type {object}
- * @property {string} prismBaseUrl - Prism base URL to fetch the tokenizer + language data.
  * @property {string[]} languages - Language grammars to highlight.
  * @property {{ [key: string]: string[] }} languageTokens - Language specific token types.
  */
@@ -80,7 +79,6 @@ window.she = window.she || {};
 
 /** @type {Config} */
 window.she.config = {
-  prismBaseUrl: 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0', // Default
   languages: ['markup', 'css', 'javascript'], // Default
 };
 ```

docs/index.html

@@ -161,7 +161,6 @@ <h1>Configuration</h1>
           <syntax-highlight language="js" id="copy-config">/**
  * @typedef Config
  * @type {object}
- * @property {string} prismBaseUrl - Prism base URL to fetch the tokenizer + language data.
  * @property {string[]} languages - Prism languages.
  * @property {{ [key: string]: string[] }} languageTokens - Language specific token types.
  */
@@ -170,7 +169,6 @@ <h1>Configuration</h1>
 
 /** @type {Config} */
 window.she.config = {
-  prismBaseUrl: 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0', // Default
   languages: ['markup', 'css', 'javascript'], // Default
 };</syntax-highlight>
           <clipboard-copy for="copy-config" class="button" aria-label="Copy content">

index.html

@@ -32,8 +32,7 @@
     <script>
       window.she = window.she || {};
       window.she.config = {
-        prismBaseUrl: 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0', // Default
-        languages: ['html', 'css', 'js', 'jsx', 'md'],
+        languages: ['html', 'css', 'js', 'jsx', 'md'], // Default
         // Optional: language specific token type overwrites
         languageTokens: {
           css: ['important'],
@@ -81,12 +80,23 @@
   - unordered list item 2
 </syntax-highlight>
 
-<syntax-highlight language="jsx">
-  {/* ... */}
-  &lt;Component>&lt;/Component&gt;
+<syntax-highlight language="jsx">{/* ... */}
+&lt;Component attr="value">
+  {children}
+&lt;/Component&gt;
 </syntax-highlight>
 
-    <script type="module" src="/src/index.js"></script>
+    <script type="module">
+      // Manually loading prism dependencies
+      // import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js'
+      // import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-markup.min.js'
+      // import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-css.min.js'
+      // import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-clike.min.js'
+      // import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-javascript.min.js'
+      // import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-markdown.min.js'
+
+      import '/src/index.js'
+    </script>
     <script>
       document.addEventListener('DOMContentLoaded', () => {
         document.addEventListener('keyup', event => {

src/constants.js

@@ -1,11 +1,8 @@
 export const NAMESPACE = 'she';
-export const DEFAULT_LANGUAGES = ['markup', 'css', 'javascript'];
-export const DEFAULT_PRISM_BASE_URL = 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0';
 
 /**
  * @typedef Config
  * @type {object}
- * @property {string} prismBaseUrl - Prism base URL to fetch the tokenizer + language data.
  * @property {string[]} languages - Prism languages.
  * @property {{ [key: string]: string[] }} languageTokens - Language specific token types.
  */

src/syntax-highlight-element.js

@@ -1,5 +1,5 @@
-import { CONFIG, DEFAULT_LANGUAGES, DEFAULT_PRISM_BASE_URL } from './constants';
-import { loadPrismCore, loadPrismLanguage, setupTokenHighlights, tokenize } from './utils';
+import { CONFIG } from './constants';
+import { setupTokenHighlights, setupTokenizer, tokenize } from './utils';
 
 const DEFAULT_TAG_NAME = 'syntax-highlight';
 
@@ -11,19 +11,10 @@ export class SyntaxHighlightElement extends HTMLElement {
     }
 
     if (!registry.get(tagName)) {
+      await setupTokenizer();
       setupTokenHighlights(CONFIG?.languageTokens || {});
-      try {
-        const prismBaseUrl = CONFIG?.prismBaseUrl || DEFAULT_PRISM_BASE_URL;
-        await loadPrismCore(prismBaseUrl);
-        await loadPrismLanguage({
-          baseUrl: prismBaseUrl,
-          language: CONFIG?.languages || DEFAULT_LANGUAGES,
-        });
-        registry.define(tagName, SyntaxHighlightElement);
-        return SyntaxHighlightElement;
-      } catch (error) {
-        console.error(error);
-      }
+      registry.define(tagName, SyntaxHighlightElement);
+      return SyntaxHighlightElement;
     }
   }
 

src/utils.js

@@ -1,3 +1,20 @@
+import { CONFIG } from './constants';
+
+export async function setupTokenizer() {
+  try {
+    if (!window.Prism) {
+      const prismBaseUrl = 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0';
+      await loadPrismCore(prismBaseUrl);
+      await loadPrismLanguage({
+        baseUrl: prismBaseUrl,
+        language: CONFIG?.languages || ['markup', 'css', 'javascript'],
+      });
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 /**
  * Create & register the token `Highlight`'s in the `CSS.highlights` registry.
  * This enables the use of `::highlight(tokenType)` in CSS to style them.