diff --git a/README.md b/README.md index 6a7ad4b..82544df 100644 --- a/README.md +++ b/README.md @@ -2,19 +2,19 @@ [![npm](https://img.shields.io/npm/v/jsstack.js.svg)](https://www.npmjs.com/package/jsstack.js) ![license](https://img.shields.io/hexpm/l/plug.svg?style=flat-square) -A simple and easy jQuery plugin for highlighting JavaScript stack traces +A simple and easy library for highlighting JavaScript stack traces #### Demo jsStack.js - demo #### Initialization -``` -$('.stacktrace').jsStack(); +```javascript +jsStack('.stacktrace'); ``` #### Default values for classes -``` -$('.stacktrace').jsStack({ +```javascript +jsStack('.stacktrace', { method: 'st-methodName', file: 'st-fileName', line: 'st-lineNumber', @@ -23,7 +23,7 @@ $('.stacktrace').jsStack({ ``` #### Ready to go css -``` +```css pre {padding: 20px 10px;} pre, code {background-color: #333;color: #ffffff;} .st-methodName {color: #70c9ba;font-weight: bolder;} diff --git a/jsStack.js b/jsStack.js index 35d8594..1260a47 100644 --- a/jsStack.js +++ b/jsStack.js @@ -1,101 +1,123 @@ /*! - * jsStack v1.0.1 - * A simple and easy jQuery plugin for highlighting JavaScript stack traces - * License : Apache 2 - * Author : Stanescu Eduard-Dan (https://elmah.io) + * jsStack v2.0.0 + * A simple and easy library for highlighting JavaScript stack traces + * License: Apache 2 + * Author: https://elmah.io */ -(function($) { - 'use strict'; - - $.fn.jsStack = function(options) { - var settings = $.extend({ +(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.jsStack = factory(); + } +}(typeof self !== 'undefined' ? self : this, function () { + 'use strict'; - // Default values for classes + function jsStack(element, options) { + // Default settings + var settings = Object.assign({ method: 'st-methodName', file: 'st-fileName', line: 'st-lineNumber', column: 'st-column' - }, options); - return this.each(function() { + var UNKNOWN_FUNCTION = ''; + var chrome = /^\s*at (?:(?:(?:Anonymous function)?|((?:\[object object\])?\S+(?: \[as \S+\])?)) )?\(?((?:file|http|https):.*?):(\d+)(?::(\d+))?\)?\s*$/i, + gecko = /^(?:\s*([^@]*)(?:\((.*?)\))?@)?(\S.*?):(\d+)(?::(\d+))?\s*$/i, + node = /^\s*at (?:((?:\[object object\])?\S+(?: \[as \S+\])?) )?\(?(.*?):(\d+)(?::(\d+))?\)?\s*$/i, + other = /^\s*at (?:(?:(?:Anonymous function)?|((?:\[object object\])?\S+(?: \[as \S+\])?)) )\(?((?:).*?)?\)?\s*$/i; - var UNKNOWN_FUNCTION = ''; - var chrome = /^\s*at (?:(?:(?:Anonymous function)?|((?:\[object object\])?\S+(?: \[as \S+\])?)) )?\(?((?:file|http|https):.*?):(\d+)(?::(\d+))?\)?\s*$/i, - gecko = /^(?:\s*([^@]*)(?:\((.*?)\))?@)?(\S.*?):(\d+)(?::(\d+))?\s*$/i, - node = /^\s*at (?:((?:\[object object\])?\S+(?: \[as \S+\])?) )?\(?(.*?):(\d+)(?::(\d+))?\)?\s*$/i, - other = /^\s*at (?:(?:(?:Anonymous function)?|((?:\[object object\])?\S+(?: \[as \S+\])?)) )\(?((?:).*?)?\)?\s*$/i; - var stacktrace = escapeHtml($(this).text()), - lines = stacktrace.split('\n'), - stack = '', - parts, - element; + var stacktrace = escapeHtml(element.textContent), + lines = stacktrace.split('\n'), + stack = '', + parts, + elementObj; - function template_line(line, element) { - line = line.replace(element.file, '' + element.file + '') - .replace(element.methodName + ' (', '' + element.methodName + ' (') - .replace(':' + element.lineNumber + ':' + element.column, ':' + element.lineNumber + ':' + element.column + ''); - line = line.replace(/</g, '<').replace(/>/g, '>'); + function template_line(line, element) { + line = line.replace(element.file, '' + element.file + '') + .replace(element.methodName + ' (', '' + element.methodName + ' (') + .replace(':' + element.lineNumber + ':' + element.column, ':' + element.lineNumber + ':' + element.column + ''); + line = line.replace(/</g, '<').replace(/>/g, '>'); - return line; - } + return line; + } - function escapeHtml(unsafe) { - return unsafe - .replace(/&/g, "&") - .replace(//g, ">") - .replace(/"/g, """) - .replace(/'/g, "'"); - } + function escapeHtml(unsafe) { + return unsafe + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + } - for (var i = 0, j = lines.length; i < j; ++i) { - var line = ''; + for (var i = 0, j = lines.length; i < j; ++i) { + var line = ''; - if ((parts = gecko.exec(lines[i]))) { - element = { - 'file': parts[3], - 'methodName': parts[1] || UNKNOWN_FUNCTION, - 'lineNumber': +parts[4], - 'column': parts[5] ? +parts[5] : null - }; - line = template_line(lines[i], element); - } else if ((parts = chrome.exec(lines[i]))) { - element = { - 'file': parts[2], - 'methodName': parts[1] || UNKNOWN_FUNCTION, - 'lineNumber': +parts[3], - 'column': parts[4] ? +parts[4] : null - }; - line = template_line(lines[i], element); - } else if ((parts = node.exec(lines[i]))) { - element = { - 'file': parts[2], - 'methodName': parts[1] || UNKNOWN_FUNCTION, - 'lineNumber': +parts[3], - 'column': parts[4] ? +parts[4] : null - }; - line = template_line(lines[i], element); - } else if ((parts = other.exec(lines[i]))) { - element = { - 'file': parts[2], - 'methodName': parts[1] || UNKNOWN_FUNCTION - }; - line = template_line(lines[i], element); - } else { - line = lines[i].replace(/</g, '<').replace(/>/g, '>'); - } + if ((parts = gecko.exec(lines[i]))) { + elementObj = { + 'file': parts[3], + 'methodName': parts[1] || UNKNOWN_FUNCTION, + 'lineNumber': +parts[4], + 'column': parts[5] ? +parts[5] : null + }; + line = template_line(lines[i], elementObj); + } else if ((parts = chrome.exec(lines[i]))) { + elementObj = { + 'file': parts[2], + 'methodName': parts[1] || UNKNOWN_FUNCTION, + 'lineNumber': +parts[3], + 'column': parts[4] ? +parts[4] : null + }; + line = template_line(lines[i], elementObj); + } else if ((parts = node.exec(lines[i]))) { + elementObj = { + 'file': parts[2], + 'methodName': parts[1] || UNKNOWN_FUNCTION, + 'lineNumber': +parts[3], + 'column': parts[4] ? +parts[4] : null + }; + line = template_line(lines[i], elementObj); + } else if ((parts = other.exec(lines[i]))) { + elementObj = { + 'file': parts[2], + 'methodName': parts[1] || UNKNOWN_FUNCTION + }; + line = template_line(lines[i], elementObj); + } else { + line = lines[i].replace(/</g, '<').replace(/>/g, '>'); + } - if (lines.length - 1 == i) { - stack += line; - } else { - stack += line + '\n'; - } + if (lines.length - 1 == i) { + stack += line; + } else { + stack += line + '\n'; } + } + + element.innerHTML = stack; + } - return $(this).html(stack); + // Function to initialize the plugin on elements + function initJsStack(elements, options) { + elements.forEach(function(element) { + jsStack(element, options); }); - }; + } + + // Expose the plugin globally + function jsStackLibrary(selector, options) { + var elements = document.querySelectorAll(selector); + initJsStack(Array.from(elements), options); + } + + return jsStackLibrary; -}(jQuery)); +})); \ No newline at end of file diff --git a/package.json b/package.json index e89e034..8c07a7f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "jsstack.js", - "version": "1.0.1", - "description": "A simple and easy jQuery plugin for highlighting JavaScript stack traces", + "version": "2.0.0", + "description": "A simple and easy library for highlighting JavaScript stack traces", "main": "jsStack.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"