Skip to content

Commit 62bf207

Browse files
ZsharEZsharE
committed
Converted library to vanilla javascript
1 parent a803478 commit 62bf207

File tree

4 files changed

+194
-86
lines changed

4 files changed

+194
-86
lines changed

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
[![npm](https://img.shields.io/npm/v/jsstack.js.svg)](https://www.npmjs.com/package/jsstack.js)
33
![license](https://img.shields.io/hexpm/l/plug.svg?style=flat-square)
44

5-
A simple and easy jQuery plugin for highlighting JavaScript stack traces
5+
A simple and easy library for highlighting JavaScript stack traces
66

77
#### Demo
88
<img src="example.png" alt="jsStack.js - demo" width="700" />
99

1010
#### Initialization
11-
```
12-
$('.stacktrace').jsStack();
11+
```javascript
12+
jsStack('.stacktrace');
1313
```
1414

1515
#### Default values for classes
16-
```
17-
$('.stacktrace').jsStack({
16+
```javascript
17+
jsStack('.stacktrace', {
1818
method: 'st-methodName',
1919
file: 'st-fileName',
2020
line: 'st-lineNumber',
@@ -23,7 +23,7 @@ $('.stacktrace').jsStack({
2323
```
2424

2525
#### Ready to go css
26-
```
26+
```css
2727
pre {padding: 20px 10px;}
2828
pre, code {background-color: #333;color: #ffffff;}
2929
.st-methodName {color: #70c9ba;font-weight: bolder;}

‎jquery.jsStack.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/*!
2+
* jsStack v1.0.1
3+
* A simple and easy jQuery plugin for highlighting JavaScript stack traces
4+
* License: Apache 2
5+
* Author: https://elmah.io
6+
*/
7+
(function($) {
8+
'use strict';
9+
10+
$.fn.jsStack = function(options) {
11+
12+
var settings = $.extend({
13+
14+
// Default values for classes
15+
method: 'st-methodName',
16+
file: 'st-fileName',
17+
line: 'st-lineNumber',
18+
column: 'st-column'
19+
20+
}, options);
21+
22+
return this.each(function() {
23+
24+
var UNKNOWN_FUNCTION = '<unknown>';
25+
var chrome = /^\s*at (?:(?:(?:Anonymous function)?|((?:\[object object\])?\S+(?: \[as \S+\])?)) )?\(?((?:file|http|https):.*?):(\d+)(?::(\d+))?\)?\s*$/i,
26+
gecko = /^(?:\s*([^@]*)(?:\((.*?)\))?@)?(\S.*?):(\d+)(?::(\d+))?\s*$/i,
27+
node = /^\s*at (?:((?:\[object object\])?\S+(?: \[as \S+\])?) )?\(?(.*?):(\d+)(?::(\d+))?\)?\s*$/i,
28+
other = /^\s*at (?:(?:(?:Anonymous function)?|((?:\[object object\])?\S+(?: \[as \S+\])?)) )\(?((?:).*?)?\)?\s*$/i;
29+
var stacktrace = escapeHtml($(this).text()),
30+
lines = stacktrace.split('\n'),
31+
stack = '',
32+
parts,
33+
element;
34+
35+
function template_line(line, element) {
36+
line = line.replace(element.file, '<span class="'+ settings.file +'">' + element.file + '</span>')
37+
.replace(element.methodName + ' (', '<span class="'+ settings.method +'">' + element.methodName + '</span> (')
38+
.replace(':' + element.lineNumber + ':' + element.column, ':<span class="'+ settings.line +'">' + element.lineNumber + '</span>:<span class="'+ settings.column +'">' + element.column + '</span>');
39+
line = line.replace(/&lt;/g, '<span>&lt;</span>').replace(/&gt;/g, '<span>&gt;</span>');
40+
41+
return line;
42+
}
43+
44+
function escapeHtml(unsafe) {
45+
return unsafe
46+
.replace(/&/g, "&amp;")
47+
.replace(/</g, "&lt;")
48+
.replace(/>/g, "&gt;")
49+
.replace(/"/g, "&quot;")
50+
.replace(/'/g, "&#039;");
51+
}
52+
53+
for (var i = 0, j = lines.length; i < j; ++i) {
54+
var line = '';
55+
56+
if ((parts = gecko.exec(lines[i]))) {
57+
element = {
58+
'file': parts[3],
59+
'methodName': parts[1] || UNKNOWN_FUNCTION,
60+
'lineNumber': +parts[4],
61+
'column': parts[5] ? +parts[5] : null
62+
};
63+
line = template_line(lines[i], element);
64+
} else if ((parts = chrome.exec(lines[i]))) {
65+
element = {
66+
'file': parts[2],
67+
'methodName': parts[1] || UNKNOWN_FUNCTION,
68+
'lineNumber': +parts[3],
69+
'column': parts[4] ? +parts[4] : null
70+
};
71+
line = template_line(lines[i], element);
72+
} else if ((parts = node.exec(lines[i]))) {
73+
element = {
74+
'file': parts[2],
75+
'methodName': parts[1] || UNKNOWN_FUNCTION,
76+
'lineNumber': +parts[3],
77+
'column': parts[4] ? +parts[4] : null
78+
};
79+
line = template_line(lines[i], element);
80+
} else if ((parts = other.exec(lines[i]))) {
81+
element = {
82+
'file': parts[2],
83+
'methodName': parts[1] || UNKNOWN_FUNCTION
84+
};
85+
line = template_line(lines[i], element);
86+
} else {
87+
line = lines[i].replace(/&lt;/g, '<span>&lt;</span>').replace(/&gt;/g, '<span>&gt;</span>');
88+
}
89+
90+
if (lines.length - 1 == i) {
91+
stack += line;
92+
} else {
93+
stack += line + '\n';
94+
}
95+
}
96+
97+
return $(this).html(stack);
98+
});
99+
};
100+
101+
}(jQuery));

‎jsStack.js‎

Lines changed: 86 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,108 @@
11
/*!
22
* jsStack v1.0.1
3-
* A simple and easy jQuery plugin for highlighting JavaScript stack traces
4-
* License : Apache 2
5-
* Author : Stanescu Eduard-Dan (https://elmah.io)
3+
* A simple and easy library for highlighting JavaScript stack traces
4+
* License: Apache 2
5+
* Author: https://elmah.io
66
*/
7-
(function($) {
7+
(function() {
88
'use strict';
99

10-
$.fn.jsStack = function(options) {
11-
12-
var settings = $.extend({
13-
14-
// Default values for classes
10+
function jsStack(element, options) {
11+
// Default settings
12+
var settings = Object.assign({
1513
method: 'st-methodName',
1614
file: 'st-fileName',
1715
line: 'st-lineNumber',
1816
column: 'st-column'
19-
2017
}, options);
2118

22-
return this.each(function() {
19+
var UNKNOWN_FUNCTION = '<unknown>';
20+
var chrome = /^\s*at (?:(?:(?:Anonymous function)?|((?:\[object object\])?\S+(?: \[as \S+\])?)) )?\(?((?:file|http|https):.*?):(\d+)(?::(\d+))?\)?\s*$/i,
21+
gecko = /^(?:\s*([^@]*)(?:\((.*?)\))?@)?(\S.*?):(\d+)(?::(\d+))?\s*$/i,
22+
node = /^\s*at (?:((?:\[object object\])?\S+(?: \[as \S+\])?) )?\(?(.*?):(\d+)(?::(\d+))?\)?\s*$/i,
23+
other = /^\s*at (?:(?:(?:Anonymous function)?|((?:\[object object\])?\S+(?: \[as \S+\])?)) )\(?((?:).*?)?\)?\s*$/i;
2324

24-
var UNKNOWN_FUNCTION = '<unknown>';
25-
var chrome = /^\s*at (?:(?:(?:Anonymous function)?|((?:\[object object\])?\S+(?: \[as \S+\])?)) )?\(?((?:file|http|https):.*?):(\d+)(?::(\d+))?\)?\s*$/i,
26-
gecko = /^(?:\s*([^@]*)(?:\((.*?)\))?@)?(\S.*?):(\d+)(?::(\d+))?\s*$/i,
27-
node = /^\s*at (?:((?:\[object object\])?\S+(?: \[as \S+\])?) )?\(?(.*?):(\d+)(?::(\d+))?\)?\s*$/i,
28-
other = /^\s*at (?:(?:(?:Anonymous function)?|((?:\[object object\])?\S+(?: \[as \S+\])?)) )\(?((?:).*?)?\)?\s*$/i;
29-
var stacktrace = escapeHtml($(this).text()),
30-
lines = stacktrace.split('\n'),
31-
stack = '',
32-
parts,
33-
element;
25+
var stacktrace = escapeHtml(element.textContent),
26+
lines = stacktrace.split('\n'),
27+
stack = '',
28+
parts,
29+
elementObj;
3430

35-
function template_line(line, element) {
36-
line = line.replace(element.file, '<span class="'+ settings.file +'">' + element.file + '</span>')
37-
.replace(element.methodName + ' (', '<span class="'+ settings.method +'">' + element.methodName + '</span> (')
38-
.replace(':' + element.lineNumber + ':' + element.column, ':<span class="'+ settings.line +'">' + element.lineNumber + '</span>:<span class="'+ settings.column +'">' + element.column + '</span>');
39-
line = line.replace(/&lt;/g, '<span>&lt;</span>').replace(/&gt;/g, '<span>&gt;</span>');
31+
function template_line(line, element) {
32+
line = line.replace(element.file, '<span class="'+ settings.file +'">' + element.file + '</span>')
33+
.replace(element.methodName + ' (', '<span class="'+ settings.method +'">' + element.methodName + '</span> (')
34+
.replace(':' + element.lineNumber + ':' + element.column, ':<span class="'+ settings.line +'">' + element.lineNumber + '</span>:<span class="'+ settings.column +'">' + element.column + '</span>');
35+
line = line.replace(/&lt;/g, '<span>&lt;</span>').replace(/&gt;/g, '<span>&gt;</span>');
4036

41-
return line;
42-
}
37+
return line;
38+
}
4339

44-
function escapeHtml(unsafe) {
45-
return unsafe
46-
.replace(/&/g, "&amp;")
47-
.replace(/</g, "&lt;")
48-
.replace(/>/g, "&gt;")
49-
.replace(/"/g, "&quot;")
50-
.replace(/'/g, "&#039;");
51-
}
40+
function escapeHtml(unsafe) {
41+
return unsafe
42+
.replace(/&/g, "&amp;")
43+
.replace(/</g, "&lt;")
44+
.replace(/>/g, "&gt;")
45+
.replace(/"/g, "&quot;")
46+
.replace(/'/g, "&#039;");
47+
}
5248

53-
for (var i = 0, j = lines.length; i < j; ++i) {
54-
var line = '';
49+
for (var i = 0, j = lines.length; i < j; ++i) {
50+
var line = '';
5551

56-
if ((parts = gecko.exec(lines[i]))) {
57-
element = {
58-
'file': parts[3],
59-
'methodName': parts[1] || UNKNOWN_FUNCTION,
60-
'lineNumber': +parts[4],
61-
'column': parts[5] ? +parts[5] : null
62-
};
63-
line = template_line(lines[i], element);
64-
} else if ((parts = chrome.exec(lines[i]))) {
65-
element = {
66-
'file': parts[2],
67-
'methodName': parts[1] || UNKNOWN_FUNCTION,
68-
'lineNumber': +parts[3],
69-
'column': parts[4] ? +parts[4] : null
70-
};
71-
line = template_line(lines[i], element);
72-
} else if ((parts = node.exec(lines[i]))) {
73-
element = {
74-
'file': parts[2],
75-
'methodName': parts[1] || UNKNOWN_FUNCTION,
76-
'lineNumber': +parts[3],
77-
'column': parts[4] ? +parts[4] : null
78-
};
79-
line = template_line(lines[i], element);
80-
} else if ((parts = other.exec(lines[i]))) {
81-
element = {
82-
'file': parts[2],
83-
'methodName': parts[1] || UNKNOWN_FUNCTION
84-
};
85-
line = template_line(lines[i], element);
86-
} else {
87-
line = lines[i].replace(/&lt;/g, '<span>&lt;</span>').replace(/&gt;/g, '<span>&gt;</span>');
88-
}
52+
if ((parts = gecko.exec(lines[i]))) {
53+
elementObj = {
54+
'file': parts[3],
55+
'methodName': parts[1] || UNKNOWN_FUNCTION,
56+
'lineNumber': +parts[4],
57+
'column': parts[5] ? +parts[5] : null
58+
};
59+
line = template_line(lines[i], elementObj);
60+
} else if ((parts = chrome.exec(lines[i]))) {
61+
elementObj = {
62+
'file': parts[2],
63+
'methodName': parts[1] || UNKNOWN_FUNCTION,
64+
'lineNumber': +parts[3],
65+
'column': parts[4] ? +parts[4] : null
66+
};
67+
line = template_line(lines[i], elementObj);
68+
} else if ((parts = node.exec(lines[i]))) {
69+
elementObj = {
70+
'file': parts[2],
71+
'methodName': parts[1] || UNKNOWN_FUNCTION,
72+
'lineNumber': +parts[3],
73+
'column': parts[4] ? +parts[4] : null
74+
};
75+
line = template_line(lines[i], elementObj);
76+
} else if ((parts = other.exec(lines[i]))) {
77+
elementObj = {
78+
'file': parts[2],
79+
'methodName': parts[1] || UNKNOWN_FUNCTION
80+
};
81+
line = template_line(lines[i], elementObj);
82+
} else {
83+
line = lines[i].replace(/&lt;/g, '<span>&lt;</span>').replace(/&gt;/g, '<span>&gt;</span>');
84+
}
8985

90-
if (lines.length - 1 == i) {
91-
stack += line;
92-
} else {
93-
stack += line + '\n';
94-
}
86+
if (lines.length - 1 == i) {
87+
stack += line;
88+
} else {
89+
stack += line + '\n';
9590
}
91+
}
92+
93+
element.innerHTML = stack;
94+
}
9695

97-
return $(this).html(stack);
96+
// Function to initialize the plugin on elements
97+
function initJsStack(elements, options) {
98+
elements.forEach(function(element) {
99+
jsStack(element, options);
98100
});
99-
};
101+
}
100102

101-
}(jQuery));
103+
// Expose the plugin globally
104+
window.jsStack = function(selector, options) {
105+
var elements = document.querySelectorAll(selector);
106+
initJsStack(Array.from(elements), options);
107+
};
108+
})();

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "jsstack.js",
33
"version": "1.0.1",
4-
"description": "A simple and easy jQuery plugin for highlighting JavaScript stack traces",
4+
"description": "A simple and easy library for highlighting JavaScript stack traces",
55
"main": "jsStack.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"

0 commit comments

Comments
 (0)