refactor: abstract config

Author: andreruffert

index.html

@@ -97,6 +97,9 @@
       //  */
       // import '/src/index.js'
       import SyntaxHighlightElement from '/src/index.js'
+      // import SyntaxHighlightElement from '/src/index.js?define=false'
+      // SyntaxHighlightElement.config.languages = ['html', 'css', 'js', 'jsx', 'md'];
+      // window.SyntaxHighlightElement = await SyntaxHighlightElement.define();
 
       /**
        * Option 2. Opt out of prism autoload by manually importing prism core

src/config.js

@@ -0,0 +1,20 @@
+import { NAMESPACE } from './constants';
+import { tokenizer as defaultTokenizer } from './tokenizer/prism';
+
+/**
+ * @typedef Config
+ * @type {object}
+ * @property {string[]} languages - Languages.
+ * @property {{ [key: string]: string[] }} languageTokens - Language specific token types.
+ * @property {object} tokenizer - Tokenizer.
+ */
+
+/** @type {Config} */
+export default Object.assign(
+  {
+    languages: ['markup', 'css', 'javascript'],
+    languageTokens: {},
+    tokenizer: Object.assign(defaultTokenizer, window[NAMESPACE]?.config?.tokenizer || {}),
+  },
+  window[NAMESPACE]?.config || {},
+);

src/constants.js

@@ -1,21 +1 @@
-import { tokenizer as defaultTokenizer } from './tokenizer/prism';
-
 export const NAMESPACE = 'she';
-
-/**
- * @typedef Config
- * @type {object}
- * @property {string[]} languages - Languages.
- * @property {{ [key: string]: string[] }} languageTokens - Language specific token types.
- * @property {object} tokenizer - Tokenizer.
- */
-
-/** @type {Config} */
-export const CONFIG = Object.assign(
-  {
-    languages: ['markup', 'css', 'javascript'],
-    languageTokens: {},
-    tokenizer: Object.assign(defaultTokenizer, window[NAMESPACE]?.config?.tokenizer || {}),
-  },
-  window[NAMESPACE]?.config || {},
-);

src/index.js

@@ -8,5 +8,5 @@ export default SyntaxHighlightElement;
 window[NAMESPACE] = window[NAMESPACE] || {};
 
 if (!new URL(import.meta.url).searchParams.has('define', 'false')) {
-  window.SyntaxHighlightElement = SyntaxHighlightElement.define();
+  window.SyntaxHighlightElement = await SyntaxHighlightElement.define();
 }

src/syntax-highlight-element.js

@@ -1,4 +1,4 @@
-import { CONFIG } from './constants';
+import config from './config';
 
 export class SyntaxHighlightElement extends HTMLElement {
   static async define(tagName = 'syntax-highlight', registry = customElements) {
@@ -8,12 +8,14 @@ export class SyntaxHighlightElement extends HTMLElement {
     }
 
     if (!registry.get(tagName)) {
-      CONFIG.tokenizer?.setup && (await CONFIG.tokenizer.setup());
+      config?.tokenizer?.setup && (await config.tokenizer.setup(config));
       registry.define(tagName, SyntaxHighlightElement);
       return SyntaxHighlightElement;
     }
   }
 
+  // static config = config;
+
   #internals;
   #highlights = new Set();
 
@@ -54,8 +56,8 @@ export class SyntaxHighlightElement extends HTMLElement {
    */
   paintTokenHighlights() {
     // Tokenize the text
-    const tokens = CONFIG.tokenizer?.tokenize(this.contentElement.innerText, this.language) || [];
-    const languageTokenTypes = CONFIG.languageTokens?.[this.language] || [];
+    const tokens = config.tokenizer?.tokenize(this.contentElement.innerText, this.language) || [];
+    const languageTokenTypes = config.languageTokens?.[this.language] || [];
 
     // Paint highlights
     let pos = 0;

src/tokenizer/prism.js

@@ -1,20 +1,17 @@
-import { CONFIG } from '../constants';
 import { setupTokenHighlights } from '../utils';
 
 export const tokenizer = {
-  async setup() {
+  async setup(config) {
     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,
+          language: config.languages,
         });
       }
-      setupTokenHighlights(tokenTypes, {
-        languageTokens: CONFIG?.languageTokens || {},
-      });
+      setupTokenHighlights(tokenTypes, { languageTokens: config.languageTokens });
     } catch (error) {
       console.error(error);
     }