Merge pull request #35 from hcodes/onefile

Injected CSS to JS

Author: hcodes

.eslintignore

@@ -1,5 +1,4 @@
 .*
-coverage/**
-dist/*.js
-node_modules/**
-tests/**
+dist
+node_modules
+tests

.eslintrc

@@ -1,8 +1,11 @@
 {
-    "rules": {
-        "semi": [2, "always"],
-        "quotes": [2, "single"]
-    },
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
     "env": {
         "browser": true,
         "node": true,
@@ -14,6 +17,5 @@
     },
     "globals": {
         "showJSError": true
-    },
-    "extends": "eslint:recommended"
+    }
 }

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v4.0.0
+- Fixed package.json properties.
+- Injected CSS to JS file.
+- Removed default export.
+- Fixes for Safari.
+
 ## v3.0.0
 - Dropped support for old browsers.
 - Dropped default exports.

README.md

@@ -17,6 +17,7 @@ Detail:<br>![Detail](https://raw.githubusercontent.com/hcodes/show-js-error/mast
     - 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
@@ -40,12 +41,10 @@ npm install show-js-error --save-dev
 ### 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>
 ```
 or with own 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>
 ```
 ```js
@@ -55,23 +54,18 @@ window.showJSError.setSettings({
 ```
 
 ### 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';
-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'));
 ```
 
 ## API
@@ -83,6 +77,7 @@ Set settings for error panel.
 showJSError.setSettings({
     reportUrl: 'https://github.com/hcodes/show-js-error/issues/new?title={title}&body={body}', // Default: ""
     templateDetailedMessage: 'My title\n{message}',
+    size: 'big' // for smart TV
 })
 ```
 

dist/ShowJSError.d.ts

@@ -2,6 +2,7 @@ import { ExtendedError } from './helpers/error';
 export interface ShowJSErrorSettings {
     reportUrl?: string;
     templateDetailedMessage?: string;
+    size?: 'big' | 'normal';
 }
 export interface ShowJSErrorElems {
     actions: HTMLDivElement;
@@ -28,6 +29,7 @@ export declare class ShowJSError {
     private elems;
     private settings;
     private state;
+    private styleNode?;
     constructor();
     destruct(): void;
     setSettings(settings: ShowJSErrorSettings): void;

dist/helpers/dom.d.ts

@@ -1,3 +1,4 @@
 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.css

@@ -4,5 +4,4 @@ declare global {
         showJSError: ShowJSError;
     }
 }
-declare const showJSError: ShowJSError;
-export default showJSError;
+export declare const showJSError: ShowJSError;

dist/index.d.ts

@@ -1,11 +1,12 @@
+/*! show-js-error | © 2023 Denis Seleznev | MIT License | https://github.com/hcodes/show-js-error/ */
 function getScreenSize() {
     return [screen.width, screen.height, screen.colorDepth].join('×');
 }
 function getScreenOrientation() {
     return typeof screen.orientation === 'string' ? screen.orientation : screen.orientation.type;
 }
 function copyTextToClipboard(text) {
-    var textarea = document.createElement('textarea');
+    const textarea = document.createElement('textarea');
     textarea.value = text;
     document.body.appendChild(textarea);
     try {
@@ -17,6 +18,12 @@ function copyTextToClipboard(text) {
     }
     document.body.removeChild(textarea);
 }
+function injectStyle(style) {
+    const styleNode = document.createElement('style');
+    document.body.appendChild(styleNode);
+    styleNode.textContent = style;
+    return styleNode;
+}
 
 function createElem(data) {
     const elem = document.createElement(data.tag || 'div');
@@ -78,6 +85,7 @@ function getFilenameWithPosition(error) {
     return text;
 }
 
+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 {
     constructor() {
         this.elems = {};
@@ -88,7 +96,8 @@ class ShowJSError {
             errorBuffer: [],
         };
         this.onerror = (event) => {
-            const error = event.error;
+            const error = event.error ? event.error : event;
+            console.log(1, event);
             this.pushError({
                 title: 'JavaScript Error',
                 message: error.message,
@@ -120,6 +129,7 @@ class ShowJSError {
         this.appendToBody = () => {
             document.removeEventListener('DOMContentLoaded', this.appendToBody, false);
             if (this.elems.container) {
+                this.styleNode = injectStyle(STYLE);
                 document.body.appendChild(this.elems.container);
             }
         };
@@ -129,6 +139,7 @@ class ShowJSError {
         document.addEventListener('securitypolicyviolation', this.onsecuritypolicyviolation, false);
     }
     destruct() {
+        var _a;
         window.removeEventListener('error', this.onerror, false);
         window.removeEventListener('unhandledrejection', this.onunhandledrejection, false);
         document.removeEventListener('securitypolicyviolation', this.onsecuritypolicyviolation, false);
@@ -138,6 +149,10 @@ class ShowJSError {
         }
         this.state.errorBuffer = [];
         this.elems = {};
+        if (this.styleNode) {
+            (_a = this.styleNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.styleNode);
+            this.styleNode = undefined;
+        }
     }
     setSettings(settings) {
         this.settings = this.prepareSettings(settings);
@@ -168,6 +183,7 @@ class ShowJSError {
     hide() {
         if (this.elems.container) {
             this.elems.container.className = buildElemClass('', {
+                size: this.settings.size,
                 hidden: true
             });
         }
@@ -190,6 +206,7 @@ class ShowJSError {
     prepareSettings(rawSettings) {
         const settings = rawSettings || {};
         return {
+            size: settings.size || 'normal',
             reportUrl: settings.reportUrl || '',
             templateDetailedMessage: settings.templateDetailedMessage || '',
         };
@@ -201,7 +218,9 @@ class ShowJSError {
     }
     appendUI() {
         const container = document.createElement('div');
-        container.className = buildElemClass('');
+        container.className = buildElemClass('', {
+            size: this.settings.size,
+        });
         this.elems.container = container;
         this.elems.close = createElem({
             name: 'close',
@@ -241,6 +260,7 @@ class ShowJSError {
         this.createActions(body);
         if (document.body) {
             document.body.appendChild(container);
+            this.styleNode = injectStyle(STYLE);
         }
         else {
             document.addEventListener('DOMContentLoaded', this.appendToBody, false);
@@ -349,7 +369,9 @@ class ShowJSError {
     }
     showUI() {
         if (this.elems.container) {
-            this.elems.container.className = buildElemClass('');
+            this.elems.container.className = buildElemClass('', {
+                size: this.settings.size,
+            });
         }
     }
     hasStack() {
@@ -431,4 +453,7 @@ class ShowJSError {
     }
 }
 
-export { ShowJSError };
+const showJSError = new ShowJSError();
+window.showJSError = showJSError;
+
+export { showJSError };