netstack.js 1.2.0 → 2.0.0

package/README.md

@@ -4,7 +4,7 @@
 ![Tests](https://github.com/elmahio/netstack.js/actions/workflows/test.yml/badge.svg)
 
 
-A simple and easy jQuery plugin for highlighting .NET stack traces
+A simple and easy JavaScript library for highlighting .NET stack traces
 
 #### Stacktrace - Language support
 [![English](images/flags/US%20-%20United%20States.svg)](#) [![Danish](images/flags/DK%20-%20Denmark.svg)](#) [![German](images/flags/DE%20-%20Germany.svg)](#) [![Russian](images/flags/RU%20-%20Russian%20Federation.svg)](#) [![Chinese](images/flags/CN%20-%20China.svg)](#)
@@ -15,13 +15,19 @@ A simple and easy jQuery plugin for highlighting .NET stack traces
 [Stack Trace Formatter - Online pretty print of .NET stack traces](https://elmah.io/tools/stack-trace-formatter/)
 
 #### Initialization
+Using a string that represents a CSS selector:
 ```javascript
-$('.stacktrace').netStack();
+const stack = new netStack('.stacktrace');
+```
+Passing an HTMLElement object:
+```javascript
+const stackElement = document.querySelector('.stacktrace');
+const stack = new netStack(stackElement);
 ```
 
 #### Default values for classes
 ```javascript
-$('.stacktrace').netStack({
+const stack = new netStack('.stacktrace', {
     frame: 'st-frame',
     type: 'st-type',
     method: 'st-method',
@@ -38,7 +44,7 @@ $('.stacktrace').netStack({
 Default: false. 
 Pretty prints your stacktrace.
 ```javascript
-$('.stacktrace').netStack({
+const stack = new netStack('.stacktrace', {
     prettyprint: true
 });
 ```
@@ -58,4 +64,4 @@ pre, code {background-color:#333; color: #ffffff;}
 ---
 ### Acknowledgments
 
-* [IgoR-NiK](https://github.com/IgoR-NiK)
+* [IgoR-NiK](https://github.com/IgoR-NiK)

package/netstack.js

@@ -1,57 +1,38 @@
 /*!
- * netStack v1.2.0
- * A simple and easy jQuery plugin for highlighting .NET stack traces
- * License : Apache 2
- * Author : https://elmah.io
+ * netStack v2.0.0
+ * A simple and easy JavaScript library for highlighting .NET stack traces
+ * License: Apache 2
+ * Author: https://elmah.io
  */
-(function($) {
-    'use strict';
 
-    $.fn.netStack = function(options) {
-
-        var self = this;
-
-        function search(nameKey, myArray){
-            for (var i=0; i < myArray.length; i++) {
-                if (myArray[i].name === nameKey) {
-                    return myArray[i];
-                }
-            }
-        }
-
-        function replacer(args, at_language) {
-            if(args[0].substr(0).match(/(-{3})/)) {
-                return '\r\n\   ' + args[0];
+(function(root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD
+        define([], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // Node, CommonJS-like
+        module.exports = factory();
+    } else {
+        // Browser globals (root is window)
+        root.netStack = factory();
+    }
+}(typeof self !== 'undefined' ? self : this, function() {
+
+    function netStack(element, options) {
+        if (typeof document !== 'undefined') {
+            if (typeof element === 'string') {
+                this.element = document.querySelector(element);
+            } else if (element instanceof HTMLElement) {
+                this.element = element;
             } else {
-                return '\r\n\   ' + at_language + ' ' + args[2] + '(' + args[3] + ')';
+                throw new Error('The element parameter must be a selector string or an HTMLElement.');
             }
+        } else {
+            throw new Error('netStack requires a DOM environment');
         }
-
-        function formatException(exceptionMessage, at_language){
-            var result = exceptionMessage || '';
-            var searchReplaces = [
-                {
-                    find: /(-{3}\s)(.*?)(-{3})/gm,
-                    repl: null
-                },
-                {
-                    find: new RegExp('(\\s)'+at_language+' ([^-:]*?)\\((.*?)\\)', 'g'),
-                    repl: null
-                }
-            ]
-            searchReplaces.forEach(function(item){
-                if(item.repl == null) {
-                    result = result.replace(item.find, function(){ return replacer(arguments, at_language); });
-                } else {
-                    result = result.replace(item.find, item.repl);
-                }
-            });
-            return result;
-        };
-
-        var settings = $.extend({
-
-            // Default values for classes
+        
+        // Default values for classes
+        this.settings = extend({
             prettyprint: false,
             frame: 'st-frame',
             type: 'st-type',
@@ -61,10 +42,9 @@
             paramName: 'st-param-name',
             file: 'st-file',
             line: 'st-line'
-
         }, options);
 
-        var languages = [
+        this.languages = [
             { name: 'english', at: 'at', in: 'in', line: 'line' },
             { name: 'danish', at: 'ved', in: 'i', line: 'linje' },
             { name: 'german', at: 'bei', in: 'in', line: 'Zeile' },
@@ -72,151 +52,206 @@
             { name: 'chinese', at: '在', in: '位置', line: '行号' }
         ];
 
-        return this.each(function() {
-
-            // Get the stacktrace, sanitize it, and split it into lines
-
-            var stacktrace = $(this).text(),
-                sanitizedStack = stacktrace.replace(/</g, '&lt;').replace(/>/g, '&gt;'),
-                lines = sanitizedStack.split('\n'),
-                lang = '',
-                clone = '';
-
-            // search for language
-            for (var i = 0, j = lines.length; i < j; ++i) {
-                if(lang === '') {
-                    var line = lines[i];
-                    var english = new RegExp('(\\s+)at .*\\)'),
-                        danish = new RegExp('(\\s+)ved .*\\)'),
-                        german = new RegExp('(\\s+)bei .*\\)'),
-                        russian = new RegExp('(\\s+)в .*\\)'),
-                        chinese = new RegExp('(\\s+)在 .*\\)');
-
-                    if(english.test(lines[i])) {
-                        lang = 'english';
-                    } else if (danish.test(lines[i])) {
-                        lang = 'danish';
-                    } else if (german.test(lines[i])) {
-                        lang = 'german';
-                    } else if (russian.test(lines[i])) {
-                        lang = 'russian';
-                    } else if (chinese.test(lines[i])) {
-                        lang = 'chinese';
-                    }
+        this.init();
+    }
+
+    function extend() {
+        for (var i = 1; i < arguments.length; i++) {
+            for (var key in arguments[i]) {
+                if (arguments[i].hasOwnProperty(key)) {
+                    arguments[0][key] = arguments[i][key];
                 }
             }
+        }
+        return arguments[0];
+    }
 
-            if (lang === '') return;
+    netStack.prototype.search = function(nameKey, myArray) {
+        for (var i = 0; i < myArray.length; i++) {
+            if (myArray[i].name === nameKey) {
+                return myArray[i];
+            }
+        }
+        return null;
+    };
 
-            var selectedLanguage = search(lang, languages);
+    netStack.prototype.replacer = function(args, at_language) {
+        if (args[0].substring(0).match(/(-{3}&gt;)/)) {
+            return '\r\n ' + args[0];
+        } else if (args[0].substring(0).match(/(-{3})/)) {
+            return '\r\n   ' + args[0];
+        } else {
+            return '\r\n   ' + at_language + ' ' + args[2] + '(' + args[3] + ')';
+        }
+    };
+
+    netStack.prototype.formatException = function(exceptionMessage, at_language) {
+        var result = exceptionMessage || '';
+        var searchReplaces = [
+            {
+                find: new RegExp('(-{3}&gt;\\s)(.*?)(?=\\s-{3}|(\\s)+' + at_language + ')', 'g'),
+                repl: null
+            },
+            {
+                find: /(-{3}\s)(.*?)(-{3})/gm,
+                repl: null
+            },
+            {
+                find: new RegExp('(\\s)' + at_language + ' ([^-:]*?)\\((.*?)\\)', 'g'),
+                repl: null
+            }
+        ];
+
+        var self = this;
+        searchReplaces.forEach(function(item) {
+            if (item.repl == null) {
+                result = result.replace(item.find, function() {
+                    return self.replacer(arguments, at_language);
+                });
+            } else {
+                result = result.replace(item.find, item.repl);
+            }
+        });
+        return result;
+    };
 
-            // Pritty print result if is set to true
-            if (settings.prettyprint) {
-                sanitizedStack = formatException(sanitizedStack, selectedLanguage['at']);
-                lines = sanitizedStack.split('\n');
+    netStack.prototype.init = function() {
+        // Get the stacktrace, sanitize it, and split it into lines
+        var stacktrace = this.element.textContent,
+            sanitizedStack = stacktrace.replace(/</g, '&lt;').replace(/>/g, '&gt;'),
+            lines = sanitizedStack.split('\n'),
+            lang = '',
+            clone = '';
+
+        // look for the language
+        for (var i = 0; i < lines.length; ++i) {
+            if (lang === '') {
+                var regexes = {
+                    english: /\s+at .*\)/,
+                    danish: /\s+ved .*\)/,
+                    german: /\s+bei .*\)/,
+                    russian: /\s+в .*\)/,
+                    chinese: /\s+在 .*\)/
+                };
+
+                for (var key in regexes) {
+                    if (regexes[key].test(lines[i])) {
+                        lang = key;
+                        break;
+                    }
+                }
             }
+        }
 
-            for (var i = 0, j = lines.length; i < j; ++i) {
+        if (lang === '') return;
 
-                var li = lines[i],
-                    hli = new RegExp('(\\S*)'+selectedLanguage['at']+' .*\\)');
+        var selectedLanguage = this.search(lang, this.languages);
+        this.language = selectedLanguage.name;
 
+        // Pritty print result if is set to true
+        if (this.settings.prettyprint) {
+            sanitizedStack = this.formatException(sanitizedStack, selectedLanguage.at);
+            lines = sanitizedStack.split('\n');
+        }
 
-                if (hli.test(lines[i])) {
+        for (var i = 0; i < lines.length; ++i) {
+            var li = lines[i],
+                hli = new RegExp('(\\S*)' + selectedLanguage.at + ' .*\\)');
 
-                    // Frame
-                    var regFrame = new RegExp('(\\S*)'+selectedLanguage['at']+' .*?\\)'),
-                        partsFrame = String(regFrame.exec(lines[i]));
+            if (hli.test(lines[i])) {
+                
+                // Frame
+                var regFrame = new RegExp('(\\S*)' + selectedLanguage.at + ' .*?\\)'),
+                    partsFrame = String(regFrame.exec(lines[i]));
 
-                    if(partsFrame.substr(partsFrame.length - 1) == ',') {
-                        partsFrame = partsFrame.slice(0, -1);
-                    }
+                if (partsFrame.substring(partsFrame.length - 1) == ',') {
+                    partsFrame = partsFrame.slice(0, -1);
+                }
 
-                    partsFrame = partsFrame.replace(selectedLanguage['at']+' ', '');
+                partsFrame = partsFrame.replace(selectedLanguage.at + ' ', '');
 
-                    // Frame -> ParameterList
-                    var regParamList = new RegExp('\\(.*\\)'),
-                        partsParamList = String(regParamList.exec(lines[i]));
+                // Frame -> ParameterList
+                var regParamList = /\(.*\)/,
+                    partsParamList = String(regParamList.exec(lines[i]));
 
-                    // Frame -> Params
-                    var partsParams = partsParamList.replace('(', '').replace(')', ''),
-                        arrParams = partsParams.split(', '),
-                        stringParam = '';
+                // Frame -> Params
+                var partsParams = partsParamList.replace('(', '').replace(')', ''),
+                    arrParams = partsParams.split(', '),
+                    stringParam = '';
 
-                    for (var x = 0, y = arrParams.length; x < y; ++x) {
-                        var theParam = '',
-                            param = arrParams[x].split(' '),
-                            paramType = param[0],
-                            paramName = param[1];
+                for (var x = 0; x < arrParams.length; ++x) {
+                    var param = arrParams[x].split(' '),
+                        paramType = param[0],
+                        paramName = param[1];
 
-                        if (param[0] !== "null" && param[0] !== '') {
-                            theParam = '<span class="' + settings.paramType + '">' + paramType + '</span>' + ' ' + '<span class="' + settings.paramName + '">' + paramName + '</span>';
-                            stringParam += String(theParam) + ', ';
-                        }
+                    if (param[0] !== "null" && param[0] !== '') {
+                        var theParam = '<span class="' + this.settings.paramType + '">' + paramType + '</span>' + ' ' + '<span class="' + this.settings.paramName + '">' + paramName + '</span>';
+                        stringParam += String(theParam) + ', ';
                     }
+                }
 
-                    stringParam = stringParam.replace(/,\s*$/, "");
-                    stringParam = '<span class="' + settings.paramsList + '">' + '(' + stringParam + ')' + '</span>';
+                stringParam = stringParam.replace(/,\s*$/, "");
+                stringParam = '<span class="' + this.settings.paramsList + '">' + '(' + stringParam + ')' + '</span>';
 
-                    // Frame -> Type & Method
-                    var partsTypeMethod = partsFrame.replace(partsParamList, ''),
-                        arrTypeMethod = partsTypeMethod.split('.'),
-                        method = arrTypeMethod.pop(),
-                        type = partsTypeMethod.replace('.' + method, ''),
-                        stringTypeMethod = '<span class="' + settings.type + '">' + type + '</span>.' + '<span class="' + settings.method + '">' + method + '</span>';
+                // Frame -> Type & Method
+                var partsTypeMethod = partsFrame.replace(partsParamList, ''),
+                    arrTypeMethod = partsTypeMethod.split('.'),
+                    method = arrTypeMethod.pop(),
+                    type = partsTypeMethod.replace('.' + method, ''),
+                    stringTypeMethod = '<span class="' + this.settings.type + '">' + type + '</span>.' + '<span class="' + this.settings.method + '">' + method + '</span>';
 
-                    // Construct Frame
-                    var newPartsFrame = partsFrame.replace(partsParamList, stringParam).replace(partsTypeMethod, stringTypeMethod);
+                // Construct Frame
+                var newPartsFrame = partsFrame.replace(partsParamList, stringParam).replace(partsTypeMethod, stringTypeMethod);
 
-                    // Line
-                    var regLine = new RegExp('\\b:'+selectedLanguage['line']+'.*'),
-                        partsLine = String(regLine.exec(lines[i]));
-                    partsLine = partsLine.replace(':', '').trim();
+                // Line
+                var regLine = new RegExp('\\b:' + selectedLanguage.line + ' \\d+'),
+                    partsLine = String(regLine.exec(lines[i]));
 
-                    var fileLi = li.replace(selectedLanguage['at'] + " " + partsFrame, '').trim();
+                partsLine = partsLine.replace(':', '').trim();
 
-                    // File => (!) text requires multiline to exec regex, otherwise it will return null.
-                    var regFile = new RegExp(selectedLanguage['in']+'\\s.*$', 'm'),
-                        partsFile = String(regFile.exec(fileLi));
+                var fileLi = li.replace(selectedLanguage.at + " " + partsFrame, '').trim();
 
-                    partsFile = partsFile.replace(selectedLanguage['in']+' ', '').replace(':' + partsLine, '');
+                // File => (!) text requires multiline to exec regex, otherwise it will return null.
+                var regFile = new RegExp(selectedLanguage.in + '\\s.*$', 'm'),
+                    partsFile = String(regFile.exec(fileLi));
 
-                    li = li.replace(partsFrame, '<span class="' + settings.frame + '">' + newPartsFrame + '</span>')
-                        .replace(partsFile, '<span class="' + settings.file + '">' + partsFile + '</span>')
-                        .replace(partsLine, '<span class="' + settings.line + '">' + partsLine + '</span>');
+                partsFile = partsFile.replace(selectedLanguage.in + ' ', '').replace(':' + partsLine, '').replace('&lt;---', '');
 
-                    li = li.replace(/&lt;/g, '<span>&lt;</span>').replace(/&gt;/g, '<span>&gt;</span>');
+                li = li.replace(partsFrame, '<span class="' + this.settings.frame + '">' + newPartsFrame + '</span>')
+                    .replace(partsFile, '<span class="' + this.settings.file + '">' + partsFile + '</span>')
+                    .replace(partsLine, '<span class="' + this.settings.line + '">' + partsLine + '</span>');
+
+                li = li.replace(/&lt;/g, '<span>&lt;</span>').replace(/&gt;/g, '<span>&gt;</span>');
+
+                if (lines.length - 1 == i) {
+                    clone += li;
+                } else {
+                    clone += li + '\n';
+                }
+            } else {
+                if ((lines[i].trim()).length) {
+                    li = lines[i];
 
                     if (lines.length - 1 == i) {
                         clone += li;
                     } else {
                         clone += li + '\n';
                     }
-                } else {
-                    if((lines[i].trim()).length) {
-                        li = lines[i];
-
-                        if (lines.length - 1 == i) {
-                            clone += li;
-                        } else {
-                            clone += li + '\n';
-                        }
-                    }
                 }
             }
+        }
 
-            self.getJSON = function () {
-                return JSON.stringify(clone);
-            }
-
-            self.getLanguage = function () {
-                return selectedLanguage ? selectedLanguage.name : null;
-            }
-
-            return $(this).html(clone);
+        this.element.innerHTML = clone;
+    };
 
-        });
+    netStack.prototype.getJSON = function() {
+        return JSON.stringify(this.element.innerHTML);
+    };
 
+    netStack.prototype.getLanguage = function() {
+        return this.language;
     };
 
-}(jQuery));
+    return netStack;
+
+}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "netstack.js",
-  "version": "1.2.0",
-  "description": "A simple and easy jQuery plugin for highlighting .NET stack traces",
+  "version": "2.0.0",
+  "description": "A simple and easy JavaScript library for highlighting .NET stack traces",
   "main": "netstack.js",
   "scripts": {
     "test": "mocha"
@@ -20,15 +20,17 @@
     ".NET",
     "stacktrace",
     "formatter",
-    "jQuery",
-    "plugin",
+    "JavaScript",
+    "library",
     "elmah.io"
   ],
   "devDependencies": {
     "assert": "^2.0.0",
     "chai": "^4.3.4",
-    "jquery": "^3.6.0",
     "jsdom": "^17.0.0",
     "mocha": "^9.1.2"
+  },
+  "dependencies": {
+    "gulp": "^5.0.0"
   }
-}
+}