@financial-times/o-syntax-highlight - npm Package Compare versions

Comparing version 3.0.4 to 3.0.5

dist/js/syntax-highlight.js

@@ -74,2 +74,3 @@ "use strict";
   * @param {HTMLElement} - The element with a language-relevant class name
+  * @return {String | Null} - The language name e.g. `js` or null if not defined.
   */
@@ -81,9 +82,12 @@
 
-    if (className.includes('o-syntax-highlight--')) {
-      this.opts.language = className.replace('o-syntax-highlight--', '');
-    } else {
-      (0, _helpers.default)("In order to highlight a codeblock, the '<code>' requires a specific class to define a language. E.g. class=\"o-syntax-highlight--html\" or class=\"o-syntax-highlight--js\"");
+    if (!className.includes('o-syntax-highlight--')) {
+      console.warn("In order to highlight a codeblock, the '<code>' " + "requires a specific class to define a language. E.g. " + "class=\"o-syntax-highlight--html\" or " + "class=\"o-syntax-highlight--js\"", element);
+      return null;
     }
 
+    this.opts.language = className.replace('o-syntax-highlight--', '');
+
     this._checkLanguage();
+
+    return this.opts.language;
   }
@@ -106,12 +110,3 @@ /**
   _tokeniseCodeBlocks() {
-    /* eslint-disable array-callback-return */
-    var codeBlocks = Array.from(this.syntaxElement.querySelectorAll('PRE'), pre => {
-      if (pre.firstElementChild && pre.firstElementChild.tagName === 'CODE') {
-        return pre.firstElementChild;
-      } else {
-        (0, _helpers.default)("No '<code>' tag found. In order to highlight a codeblock semantically, a '<pre>' tag must wrap a '<code>' tag.");
-      }
-    });
-    /* eslint-enable array-callback-return */
-
+    var codeBlocks = Array.from(this.syntaxElement.querySelectorAll('PRE')).filter(pre => pre.firstElementChild && pre.firstElementChild.tagName === 'CODE').map(pre => pre.firstElementChild);
     codeBlocks.forEach(this._tokeniseBlock.bind(this));
@@ -126,6 +121,8 @@ }
   _tokeniseBlock(element) {
-    this._getLanguage(element);
+    var language = this._getLanguage(element);
 
-    this.opts.syntaxString = element.innerText;
-    element.innerHTML = this.tokenise();
+    if (language) {
+      this.opts.syntaxString = element.innerText;
+      element.innerHTML = this.tokenise();
+    }
   }
@@ -132,0 +129,0 @@ /**

package.json

@@ -28,3 +28,3 @@ {
 	"name": "@financial-times/o-syntax-highlight",
-	"version": "3.0.4",
+	"version": "3.0.5",
 	"description": "syntax highlighter for FT products",
@@ -31,0 +31,0 @@ "homepage": "https://github.com/Financial-Times/o-syntax-highlight",

src/js/syntax-highlight.js

@@ -53,2 +53,3 @@ import throwError from './helpers';
 	* @param {HTMLElement} - The element with a language-relevant class name
+	* @return {String | Null} - The language name e.g. `js` or null if not defined.
 	*/
@@ -58,9 +59,16 @@ _getLanguage (element) {
 
-		if (className.includes('o-syntax-highlight--')) {
-			this.opts.language = className.replace('o-syntax-highlight--', '');
-		} else {
-			throwError(`In order to highlight a codeblock, the '<code>' requires a specific class to define a language. E.g. class="o-syntax-highlight--html" or class="o-syntax-highlight--js"`);
+		if (!className.includes('o-syntax-highlight--')) {
+			console.warn(
+				`In order to highlight a codeblock, the '<code>' ` +
+				`requires a specific class to define a language. E.g. ` +
+				`class="o-syntax-highlight--html" or ` +
+				`class="o-syntax-highlight--js"`, element);
+			return null;
 		}
 
+		this.opts.language = className.replace('o-syntax-highlight--', '');
+
 		this._checkLanguage();
+
+		return this.opts.language;
 	}
@@ -81,11 +89,5 @@
 	_tokeniseCodeBlocks () {
-		/* eslint-disable array-callback-return */
-		const codeBlocks = Array.from(this.syntaxElement.querySelectorAll('PRE'), pre => {
-			if (pre.firstElementChild && pre.firstElementChild.tagName === 'CODE') {
-				return pre.firstElementChild;
-			} else {
-				throwError(`No '<code>' tag found. In order to highlight a codeblock semantically, a '<pre>' tag must wrap a '<code>' tag.`);
-			}
-		});
-		/* eslint-enable array-callback-return */
+		const codeBlocks = Array.from(this.syntaxElement.querySelectorAll('PRE'))
+			.filter(pre => pre.firstElementChild && pre.firstElementChild.tagName === 'CODE')
+			.map(pre => pre.firstElementChild);
 
@@ -100,5 +102,7 @@ codeBlocks.forEach(this._tokeniseBlock.bind(this));
 	_tokeniseBlock (element) {
-		this._getLanguage(element);
-		this.opts.syntaxString = element.innerText;
-		element.innerHTML = this.tokenise();
+		const language = this._getLanguage(element);
+		if (language) {
+			this.opts.syntaxString = element.innerText;
+			element.innerHTML = this.tokenise();
+		}
 	}
@@ -105,0 +109,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

31703

decreased by-0.43%

Lines of code

400

decreased by-0.5%

No dependency changes