⚡ Consolidate logic for highlighting in one place

Author: heppokofrontend

src/class/HTMLCodeBlockElement.ts

@@ -1,47 +1,20 @@
-import {HLJSApi, HighlightOptions} from 'highlight.js';
-
 export default class HTMLCodeBlockElement extends HTMLElement {
-  /**
-   * A library for performing syntax highlighting.
-   * Before running `customElements.define()`,
-   * you need to assign it directly to `HTMLCodeBlockElement.endgine`.
-   * Currently, only highlight.js is assumed.
-   */
-  static endgine: any;
-
   /**
    * Returns the result of highlighting the received source code string.
+   * Before running `customElements.define()`,
+   * you need to assign it directly to `HTMLCodeBlockElement.highlight`.
    * @param src - Source code string for highlight
-   * @param options - Option for library of highlight
+   * @param options - Option for highlight
    * @returns - Object of the highlight result
    */
-  static highlight(
-    src: string,
-    options?: HighlightOptions,
-  ): {
-    value: string,
-  } {
-    const {endgine} = HTMLCodeBlockElement;
-
-    if (!endgine) {
-      throw new Error('The syntax highlighting engine is not set to `HTMLCodeBlockElement.endgine`.');
-    }
-
-    const hljs: HLJSApi = endgine;
-
-    if (
-      // Verifying the existence of a language
-      options?.language &&
-      hljs.getLanguage(options.language)
-    ) {
-      return hljs.highlight(
-        src,
-        options,
-      );
-    }
-
-    return hljs.highlightAuto(src);
-  }
+  static highlight: (src: string, options?: {
+    /** Language Mode Name */
+    language: string,
+  }) => {
+    markup: string,
+  } = () => {
+    throw new TypeError('The syntax highlighting engine is not set to `HTMLCodeBlockElement.highlight`.');
+  };
 
   #slots = (() => {
     /**
@@ -113,7 +86,7 @@ export default class HTMLCodeBlockElement extends HTMLElement {
     })()
 
     /** The resulting syntax-highlighted markup */
-    const {value: markup} = HTMLCodeBlockElement.highlight(src, {
+    const {markup} = HTMLCodeBlockElement.highlight(src, {
       language: this.#language,
     });
 

src/index.all.ts

@@ -1,8 +1,9 @@
 import hljs from 'highlight.js';
 import CustomElementConstructor from './class/HTMLCodeBlockElement';
+import {mkHighlightCallback} from './utils/highlight';
 import './utils/add-style';
 
-CustomElementConstructor.endgine = hljs;
+CustomElementConstructor.highlight = mkHighlightCallback(hljs);
 customElements.define('code-block', CustomElementConstructor);
 
 export const HTMLCodeBlockElement = CustomElementConstructor;

src/index.common.ts

@@ -1,8 +1,9 @@
 import hljs from 'highlight.js/lib/common';
 import CustomElementConstructor from './class/HTMLCodeBlockElement';
+import {mkHighlightCallback} from './utils/highlight';
 import './utils/add-style';
 
-CustomElementConstructor.endgine = hljs;
+CustomElementConstructor.highlight = mkHighlightCallback(hljs);
 customElements.define('code-block', CustomElementConstructor);
 
 export const HTMLCodeBlockElement = CustomElementConstructor;

src/index.core.ts

@@ -1,8 +1,9 @@
 import hljs from 'highlight.js/lib/core';
 import CustomElementConstructor from './class/HTMLCodeBlockElement';
+import {mkHighlightCallback} from './utils/highlight';
 import './utils/add-style';
 
-CustomElementConstructor.endgine = hljs;
+CustomElementConstructor.highlight = mkHighlightCallback(hljs);
 customElements.define('code-block', CustomElementConstructor);
 
 export const HTMLCodeBlockElement = CustomElementConstructor;

src/utils/highlight.ts

@@ -0,0 +1,30 @@
+import {HLJSApi, HighlightOptions} from 'highlight.js';
+
+/**
+ * Callback maker for highlight.js
+ * @param endgine - A library for performing syntax highlighting.
+ * @returns - A function for HTMLCodeBlockElement.highlight
+ */
+export const mkHighlightCallback = (endgine: HLJSApi) => (
+  src: string,
+  options?: HighlightOptions,
+) => {
+  const hljs: HLJSApi = endgine;
+
+  if (
+    // Verifying the existence of a language
+    options?.language &&
+    hljs.getLanguage(options.language)
+  ) {
+    return {
+      markup: hljs.highlight(
+        src,
+        options,
+      ).value,
+    };
+  }
+
+  return {
+    markup: hljs.highlightAuto(src).value,
+  };
+};