show-js-error - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

dist/helpers/dom.d.ts

 export declare function getScreenSize(): string;
 export declare function getScreenOrientation(): string;
 export declare function copyTextToClipboard(text: string): void;
+export declare function injectStyle(style: string): HTMLStyleElement;

dist/index.d.ts

@@ -7,3 +7,2 @@ import { ShowJSError } from './ShowJSError';
 }
-declare const showJSError: ShowJSError;
-export default showJSError;
+export declare const showJSError: ShowJSError;

dist/show-js-error.esm.js

@@ -0,1 +1,2 @@
+/*! show-js-error | © 2023 Denis Seleznev | MIT License | https://github.com/hcodes/show-js-error/ */
 function getScreenSize() {
@@ -8,3 +9,3 @@ return [screen.width, screen.height, screen.colorDepth].join('×');
 function copyTextToClipboard(text) {
-    var textarea = document.createElement('textarea');
+    const textarea = document.createElement('textarea');
     textarea.value = text;
@@ -21,2 +22,8 @@ document.body.appendChild(textarea);
 }
+function injectStyle(style) {
+    const styleNode = document.createElement('style');
+    document.body.appendChild(styleNode);
+    styleNode.textContent = style;
+    return styleNode;
+}
 
@@ -83,2 +90,3 @@ function createElem(data) {
 
+const STYLE = '.show-js-error{background:#ffc1cc;bottom:15px;color:#000;font-family:Arial,sans-serif;font-size:13px;left:15px;max-width:90vw;min-width:15em;opacity:1;position:fixed;transition:opacity .2s ease-out;transition-delay:0s;visibility:visible;z-index:10000000}.show-js-error_size_big{transform:scale(2) translate(25%,-25%)}.show-js-error_hidden{opacity:0;transition:opacity .3s,visibility 0s linear .3s;visibility:hidden}.show-js-error__title{background:#f66;color:#fff;font-weight:700;padding:4px 30px 4px 7px}.show-js-error__title_no-errors{background:#6b6}.show-js-error__message{cursor:pointer;display:inline}.show-js-error__message:before{background-color:#eee;border-radius:10px;content:"+";display:inline-block;font-size:10px;height:10px;line-height:10px;margin-bottom:2px;margin-right:5px;text-align:center;vertical-align:middle;width:10px}.show-js-error__body_detailed .show-js-error__message:before{content:"-"}.show-js-error__body_no-stack .show-js-error__message:before{display:none}.show-js-error__body_detailed .show-js-error__filename{display:block}.show-js-error__body_no-stack .show-js-error__filename{display:none}.show-js-error__close{color:#fff;cursor:pointer;font-size:20px;line-height:20px;padding:3px;position:absolute;right:2px;top:0}.show-js-error__body{line-height:19px;padding:5px 8px}.show-js-error__body_hidden{display:none}.show-js-error__filename{background:#ffe1ec;border:1px solid #faa;display:none;margin:3px 0 3px -2px;max-height:15em;overflow-y:auto;padding:5px;white-space:pre-wrap}.show-js-error__actions{border-top:1px solid #faa;margin-top:5px;padding:5px 0 3px}.show-js-error__actions_hidden{display:none}.show-js-error__arrows{margin-left:8px;white-space:nowrap}.show-js-error__arrows_hidden{display:none}.show-js-error__copy,.show-js-error__next,.show-js-error__num,.show-js-error__prev,.show-js-error__report{font-size:12px}.show-js-error__report_hidden{display:none}.show-js-error__next{margin-left:1px}.show-js-error__num{margin-left:5px;margin-right:5px}.show-js-error__copy,.show-js-error__report{margin-right:3px}.show-js-error input{padding:1px 2px}.show-js-error a,.show-js-error a:visited{color:#000;text-decoration:underline}.show-js-error a:hover{text-decoration:underline}';
 class ShowJSError {
@@ -94,3 +102,4 @@ constructor() {
         this.onerror = (event) => {
-            const error = event.error;
+            const error = event.error ? event.error : event;
+            console.log(1, event);
             this.pushError({
@@ -127,2 +136,3 @@ title: 'JavaScript Error',
             if (this.elems.container) {
+                this.styleNode = injectStyle(STYLE);
                 document.body.appendChild(this.elems.container);
@@ -137,2 +147,3 @@ }
     destruct() {
+        var _a;
         window.removeEventListener('error', this.onerror, false);
@@ -147,2 +158,6 @@ window.removeEventListener('unhandledrejection', this.onunhandledrejection, false);
         this.elems = {};
+        if (this.styleNode) {
+            (_a = this.styleNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.styleNode);
+            this.styleNode = undefined;
+        }
     }
@@ -178,2 +193,3 @@ setSettings(settings) {
             this.elems.container.className = buildElemClass('', {
+                size: this.settings.size,
                 hidden: true
@@ -201,2 +217,3 @@ });
         return {
+            size: settings.size || 'normal',
             reportUrl: settings.reportUrl || '',
@@ -213,3 +230,5 @@ templateDetailedMessage: settings.templateDetailedMessage || '',
         const container = document.createElement('div');
-        container.className = buildElemClass('');
+        container.className = buildElemClass('', {
+            size: this.settings.size,
+        });
         this.elems.container = container;
@@ -254,2 +273,3 @@ this.elems.close = createElem({
             document.body.appendChild(container);
+            this.styleNode = injectStyle(STYLE);
         }
@@ -363,3 +383,5 @@ else {
         if (this.elems.container) {
-            this.elems.container.className = buildElemClass('');
+            this.elems.container.className = buildElemClass('', {
+                size: this.settings.size,
+            });
         }
@@ -446,2 +468,5 @@ }
 
-export { ShowJSError };
+const showJSError = new ShowJSError();
+window.showJSError = showJSError;
+
+export { showJSError };

dist/show-js-error.js

@@ -1,6 +0,4 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.showJSError = factory());
-})(this, (function () { 'use strict';
+/*! show-js-error | © 2023 Denis Seleznev | MIT License | https://github.com/hcodes/show-js-error/ */
+(function (exports) {
+    'use strict';
 
@@ -26,2 +24,8 @@ function getScreenSize() {
     }
+    function injectStyle(style) {
+        var styleNode = document.createElement('style');
+        document.body.appendChild(styleNode);
+        styleNode.textContent = style;
+        return styleNode;
+    }
 
@@ -88,2 +92,3 @@ function createElem(data) {
 
+    var STYLE = '.show-js-error{background:#ffc1cc;bottom:15px;color:#000;font-family:Arial,sans-serif;font-size:13px;left:15px;max-width:90vw;min-width:15em;opacity:1;position:fixed;transition:opacity .2s ease-out;transition-delay:0s;visibility:visible;z-index:10000000}.show-js-error_size_big{transform:scale(2) translate(25%,-25%)}.show-js-error_hidden{opacity:0;transition:opacity .3s,visibility 0s linear .3s;visibility:hidden}.show-js-error__title{background:#f66;color:#fff;font-weight:700;padding:4px 30px 4px 7px}.show-js-error__title_no-errors{background:#6b6}.show-js-error__message{cursor:pointer;display:inline}.show-js-error__message:before{background-color:#eee;border-radius:10px;content:"+";display:inline-block;font-size:10px;height:10px;line-height:10px;margin-bottom:2px;margin-right:5px;text-align:center;vertical-align:middle;width:10px}.show-js-error__body_detailed .show-js-error__message:before{content:"-"}.show-js-error__body_no-stack .show-js-error__message:before{display:none}.show-js-error__body_detailed .show-js-error__filename{display:block}.show-js-error__body_no-stack .show-js-error__filename{display:none}.show-js-error__close{color:#fff;cursor:pointer;font-size:20px;line-height:20px;padding:3px;position:absolute;right:2px;top:0}.show-js-error__body{line-height:19px;padding:5px 8px}.show-js-error__body_hidden{display:none}.show-js-error__filename{background:#ffe1ec;border:1px solid #faa;display:none;margin:3px 0 3px -2px;max-height:15em;overflow-y:auto;padding:5px;white-space:pre-wrap}.show-js-error__actions{border-top:1px solid #faa;margin-top:5px;padding:5px 0 3px}.show-js-error__actions_hidden{display:none}.show-js-error__arrows{margin-left:8px;white-space:nowrap}.show-js-error__arrows_hidden{display:none}.show-js-error__copy,.show-js-error__next,.show-js-error__num,.show-js-error__prev,.show-js-error__report{font-size:12px}.show-js-error__report_hidden{display:none}.show-js-error__next{margin-left:1px}.show-js-error__num{margin-left:5px;margin-right:5px}.show-js-error__copy,.show-js-error__report{margin-right:3px}.show-js-error input{padding:1px 2px}.show-js-error a,.show-js-error a:visited{color:#000;text-decoration:underline}.show-js-error a:hover{text-decoration:underline}';
     var ShowJSError = /** @class */ (function () {
@@ -100,3 +105,4 @@ function ShowJSError() {
             this.onerror = function (event) {
-                var error = event.error;
+                var error = event.error ? event.error : event;
+                console.log(1, event);
                 _this.pushError({
@@ -133,2 +139,3 @@ title: 'JavaScript Error',
                 if (_this.elems.container) {
+                    _this.styleNode = injectStyle(STYLE);
                     document.body.appendChild(_this.elems.container);
@@ -143,2 +150,3 @@ }
         ShowJSError.prototype.destruct = function () {
+            var _a;
             window.removeEventListener('error', this.onerror, false);
@@ -153,2 +161,6 @@ window.removeEventListener('unhandledrejection', this.onunhandledrejection, false);
             this.elems = {};
+            if (this.styleNode) {
+                (_a = this.styleNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.styleNode);
+                this.styleNode = undefined;
+            }
         };
@@ -184,2 +196,3 @@ ShowJSError.prototype.setSettings = function (settings) {
                 this.elems.container.className = buildElemClass('', {
+                    size: this.settings.size,
                     hidden: true
@@ -207,2 +220,3 @@ });
             return {
+                size: settings.size || 'normal',
                 reportUrl: settings.reportUrl || '',
@@ -220,3 +234,5 @@ templateDetailedMessage: settings.templateDetailedMessage || '',
             var container = document.createElement('div');
-            container.className = buildElemClass('');
+            container.className = buildElemClass('', {
+                size: this.settings.size,
+            });
             this.elems.container = container;
@@ -261,2 +277,3 @@ this.elems.close = createElem({
                 document.body.appendChild(container);
+                this.styleNode = injectStyle(STYLE);
             }
@@ -372,3 +389,5 @@ else {
             if (this.elems.container) {
-                this.elems.container.className = buildElemClass('');
+                this.elems.container.className = buildElemClass('', {
+                    size: this.settings.size,
+                });
             }
@@ -457,5 +476,8 @@ };
     var showJSError = new ShowJSError();
+    window.showJSError = showJSError;
 
-    return showJSError;
+    exports.showJSError = showJSError;
 
-}));
+    return exports;
+
+})({});

dist/ShowJSError.d.ts

@@ -5,2 +5,3 @@ import { ExtendedError } from './helpers/error';
     templateDetailedMessage?: string;
+    size?: 'big' | 'normal';
 }
@@ -32,2 +33,3 @@ export interface ShowJSErrorElems {
     private state;
+    private styleNode?;
     constructor();
@@ -34,0 +36,0 @@ destruct(): void;

package.json

 {
   "name": "show-js-error",
   "description": "Show a message about a js error in any browser",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "author": {
@@ -11,2 +11,3 @@ "name": "Denis Seleznev",
   "type": "module",
+  "typings": "dist/index.esm.d.ts",
   "module": "dist/show-js-error.esm.js",
@@ -27,3 +28,3 @@ "homepage": "https://github.com/hcodes/show-js-error",
     "typings": "./dist/index.esm.d.ts",
-    "import": "./dist/index.esm.js"
+    "import": "./dist/show-js-error.esm.js"
   },
@@ -36,13 +37,18 @@ "engines": {
     "del-cli": "^5.1.0",
-    "eslint": "^8.53.0",
-    "rollup": "^4.4.0",
+    "eslint": "^8.54.0",
+    "rollup": "^4.6.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2",
+    "autoprefixer": "^10.4.16",
+    "cssnano": "^6.0.1",
+    "postcss-cli": "^10.1.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.0",
+    "@typescript-eslint/parser": "^6.13.0"        
   },
   "scripts": {
     "clean": "del dist/*",
-    "build": "npm run clean && npm run ts && npm run css",
-    "inject:copyright": "",
+    "build": "npm run clean && npm run ts && npm run css && npm run inject",
+    "css": "postcss --no-map src/*.css --dir dist",
+    "inject": "node ./tools/inject.mjs",
     "ts": "rollup --config rollup.config.mjs",
-    "css": "cp src/ShowJSError.css dist/show-js-error.css",
     "test": "eslint ."
@@ -49,0 +55,0 @@ },

README.md

@@ -1,2 +0,2 @@
-⚠️ Show js error
+⚠️ Show JS Error
 =============
@@ -6,7 +6,6 @@
 [![NPM Downloads](https://img.shields.io/npm/dm/show-js-error.svg?style=flat)](https://www.npmjs.org/package/show-js-error)
-[![Bundlephobia](https://badgen.net/bundlephobia/minzip/show-js-error)](https://bundlephobia.com/package/show-js-error)
 [![install size](https://packagephobia.com/badge?p=show-js-error)](https://packagephobia.com/result?p=show-js-error)
 
 Shows a message when an js error occurs in a browser.<br>
-Useful for developing and testing your site on mobile phones, tablets and desktop.
+Useful for developing and testing your site on mobile phones, smart TV, tablets and desktop.
 
@@ -16,2 +15,15 @@ Shortly:<br>![Shortly](https://raw.githubusercontent.com/hcodes/show-js-error/master/images/simple.png?)<br><br>
 
+## Features
+- Support:
+    - Window errors
+    - Unhandled rejections
+    - CSP errors
+- [Small size](https://bundlephobia.com/package/show-js-error)
+- Only one JavaScript file
+- No dependencies
+- Short and detailed mode
+- Links with error hints on MDN and StackOverflow
+- UI
+- Integration with Github
+
 ## Browsers
@@ -24,7 +36,2 @@ - Chrome
 
-## Support
-- Window errors
-- Unhanled rejections
-- CSP errors
-
 ## Install
@@ -37,6 +44,5 @@ ```
 
-### Browser:
+### Browser
 With default settings:
 ```html
-<link rel="stylesheet" href="https://unpkg.com/show-js-error/dist/show-js-error.css" />
 <script src="https://unpkg.com/show-js-error/dist/show-js-error.js"></script>
@@ -46,3 +52,2 @@ ```
 ```html
-<link rel="stylesheet" href="https://unpkg.com/show-js-error/dist/show-js-error.css" />
 <script src="https://unpkg.com/show-js-error/dist/show-js-error.js"></script>
@@ -57,19 +62,14 @@ ```
 ### ES6 or TypeScript
-```html
-<link rel="stylesheet" href="./node_modules/show-js-error/dist/show-js-error.css" />
-```
-
 With default settings:
 ```js
-import { ShowJSError } from 'show-js-error'; // default settings
-const showJSError = new ShowJSError();
+import 'show-js-error';
 ```
 or with own settings:
 ```js
-import { ShowJSError } from 'show-js-error';
-
-const showJSError = new ShowJSError();
+import { showJSError } from 'show-js-error';
 showJSError.setSettings({
     reportUrl: 'https://github.com/hcodes/show-js-error/issues/new?title={title}&body={body}'
 });
+
+showJSError.show(new Error('error'));
 ```
@@ -86,2 +86,3 @@
     templateDetailedMessage: 'My title\n{message}',
+    size: 'big' // for smart TV
 })
@@ -125,5 +126,5 @@ ```
 ### .destruct()
-Deattach error panel from page, remove global event listeners.
+Detach error panel from page, remove global event listeners.
 
-## Examples
+## [Examples](./tests)
 - [Simple](http://hcodes.github.io/show-js-error/tests/many.html)
@@ -130,0 +131,0 @@ - [Advanced](http://hcodes.github.io/show-js-error/tests/index.html)

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47298

13.68%

Number of lines in readme file

127

0.79%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

11

83.33%

Number of package files

11

-8.33%

Lines of code

1033

-6.52%

No dependency changes