alert-message - npm Package Compare versions

Comparing version 0.1.22 to 0.1.23

dist/index.d.ts

+export declare class Message {
+    fadeTime: number;
+    messageContainer: any;
+    constructor();
+    renderDom(type: string, args: any): void;
+    /**
+     *
+     * @param args - {txt: "", time: 2500}
+     */
+    warn(args?: {
+        txt: string;
+        time: number;
+    }): void;
+    error(args?: {
+        txt: string;
+        time: number;
+    }): void;
+    success(args?: {
+        txt: string;
+        time: number;
+    }): void;
+}
+declare const _default: Message;
+export default _default;

dist/index.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var warnImg = require("./images/warn.png"), errorImg = require("./images/error.png"), successImg = require("./images/success.png"), IMG = {
+    warn: warnImg,
+    error: errorImg,
+    success: successImg
+};
+var Message = /** @class */ (function () {
+    function Message() {
+        this.fadeTime = 2500;
+        this.messageContainer = null;
+    }
+    Message.prototype.renderDom = function (type, args) {
+        var _this = this;
+        if (!this.messageContainer) {
+            this.messageContainer = document.createElement("div");
+            this.messageContainer.className = "r-message-container";
+        }
+        var divOuter = document.createElement("div"), div = document.createElement("div"), img = document.createElement("img"), span = document.createElement("span");
+        div.className = "r-alert";
+        img.className = "r-alert-img";
+        if (IMG[type]) {
+            img.src = IMG[type];
+        }
+        else {
+            img.src = IMG.warn;
+        }
+        span.innerText = args.txt;
+        span.className = "r-warn-txt";
+        div.appendChild(img);
+        divOuter.className = "r-alert-outer";
+        div.appendChild(span);
+        divOuter.appendChild(div);
+        this.messageContainer.appendChild(divOuter);
+        document.querySelector("body").appendChild(this.messageContainer);
+        setTimeout(function () {
+            _this.messageContainer.removeChild(divOuter);
+        }, args.time || this.fadeTime);
+    };
+    /**
+     *
+     * @param args - {txt: "", time: 2500}
+     */
+    Message.prototype.warn = function (args) {
+        if (args === void 0) { args = { txt: "", time: 2500 }; }
+        this.renderDom("warn", args);
+    };
+    Message.prototype.error = function (args) {
+        if (args === void 0) { args = { txt: "", time: 2500 }; }
+        this.renderDom("error", args);
+    };
+    Message.prototype.success = function (args) {
+        if (args === void 0) { args = { txt: "", time: 2500 }; }
+        this.renderDom("success", args);
+    };
+    return Message;
+}());
+exports.Message = Message;
+exports.default = new Message();

src/index.ts

+const warnImg = require("./images/warn.png"),
+    errorImg = require("./images/error.png"),
+    successImg = require("./images/success.png"),
+    IMG = {
+        warn: warnImg,
+        error: errorImg,
+        success: successImg
+    };
+export class Message {
+    fadeTime: number;
+    messageContainer: any;
+    constructor () {
+        this.fadeTime = 2500;
+        this.messageContainer = null;
+    }
+
+    renderDom (type: string, args: any) {
+
+        if (!this.messageContainer) {
+            this.messageContainer = document.createElement("div");
+            this.messageContainer.className = "r-message-container";
+        }
+        let divOuter = document.createElement("div"),
+            div = document.createElement("div"),
+            img = document.createElement("img"),
+            span = document.createElement("span");
+        div.className = "r-alert";
+        img.className = "r-alert-img";
+        if ((IMG as any)[type]) {
+            img.src = (IMG as any)[type];
+        } else {
+            img.src = (IMG as any).warn;
+        }
+        span.innerText = args.txt;
+        span.className = "r-warn-txt";
+        div.appendChild(img);
+        divOuter.className = "r-alert-outer";
+        div.appendChild(span);
+        divOuter.appendChild(div);
+        this.messageContainer.appendChild(divOuter);
+        (document as any).querySelector("body").appendChild(this.messageContainer);
+        setTimeout(() => {
+            this.messageContainer.removeChild(divOuter);
+        }, args.time || this.fadeTime);
+    }
+
+    /**
+     *
+     * @param args - {txt: "", time: 2500}
+     */
+    warn (args = {txt: "", time: 2500}) {
+        this.renderDom("warn", args);
+    }
+    error (args = {txt: "", time: 2500}) {
+        this.renderDom("error", args);
+    }
+    success (args = {txt: "", time: 2500}) {
+        this.renderDom("success", args);
+    }
+}
+
+export default new Message();

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "lib": ["es2017", "es7", "es6", "dom"],
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package.json

 {
   "name": "alert-message",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "description": "show alert message on webpage",
-  "main": "index.js",
-  "types": "index.d.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "babel src --out-dir lib",
+    "build-ts": "tsc",
     "eslint": "eslint src",
-    "gulp": "gulp",
-    "prepublish": "run-s eslint gulp"
+    "gulp": "gulp"
   },
@@ -40,7 +40,9 @@ "repository": {
     "gulp-uglify": "^3.0.2",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "typescript": "^3.7.4"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.4.3"
+    "@babel/polyfill": "^7.4.3",
+    "@types/node": "^13.1.6"
   }
 }

src/index.js

@@ -1,17 +0,15 @@
-const warnImg = require("./images/warn.png"),
-    errorImg = require("./images/error.png"),
-    successImg = require("./images/success.png"),
-    IMG = {
-        warn: warnImg,
-        error: errorImg,
-        success: successImg
-    };
-class Message {
-    constructor () {
+"use strict";
+exports.__esModule = true;
+var warnImg = require("./images/warn.png"), errorImg = require("./images/error.png"), successImg = require("./images/success.png"), IMG = {
+    warn: warnImg,
+    error: errorImg,
+    success: successImg
+};
+var Message = /** @class */ (function () {
+    function Message() {
         this.fadeTime = 2500;
         this.messageContainer = null;
     }
-
-    renderDom (type, args) {
-
+    Message.prototype.renderDom = function (type, args) {
+        var _this = this;
         if (!this.messageContainer) {
@@ -21,6 +19,3 @@ this.messageContainer = document.createElement("div");
         }
-        let divOuter = document.createElement("div"),
-            div = document.createElement("div"),
-            img = document.createElement("img"),
-            span = document.createElement("span");
+        var divOuter = document.createElement("div"), div = document.createElement("div"), img = document.createElement("img"), span = document.createElement("span");
         div.className = "r-alert";
@@ -30,3 +25,4 @@ img.className = "r-alert-img";
             img.src = IMG[type];
-        } else {
+        }
+        else {
             img.src = IMG.warn;
@@ -42,7 +38,6 @@ }
         document.querySelector("body").appendChild(this.messageContainer);
-        setTimeout(() => {
-            this.messageContainer.removeChild(divOuter);
+        setTimeout(function () {
+            _this.messageContainer.removeChild(divOuter);
         }, args.time || this.fadeTime);
-    }
-
+    };
     /**
@@ -52,13 +47,17 @@ *
      */
-    warn (args = {txt: "", time: 2500}) {
+    Message.prototype.warn = function (args) {
+        if (args === void 0) { args = { txt: "", time: 2500 }; }
         this.renderDom("warn", args);
-    }
-    error (args = {txt: "", time: 2500}) {
+    };
+    Message.prototype.error = function (args) {
+        if (args === void 0) { args = { txt: "", time: 2500 }; }
         this.renderDom("error", args);
-    }
-    success (args = {txt: "", time: 2500}) {
+    };
+    Message.prototype.success = function (args) {
+        if (args === void 0) { args = { txt: "", time: 2500 }; }
         this.renderDom("success", args);
-    }
-}
-
-export default new Message();
+    };
+    return Message;
+}());
+exports.Message = Message;
+exports["default"] = new Message();

index.d.ts

-interface Message {
-    success: void;
-    error: void;
-    warn: void;
-}

index.js

-"use strict";
-import Message from "./src/index";
-export default Message;

lib/index.js

-"use strict";function _classCallCheck(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var warnImg=require("./images/warn.png"),errorImg=require("./images/error.png"),successImg=require("./images/success.png"),IMG={warn:warnImg,error:errorImg,success:successImg},Message=function(){function e(){_classCallCheck(this,e),this.fadeTime=2500,this.messageContainer=null}return _createClass(e,[{key:"renderDom",value:function(e,r){var t=this;this.messageContainer||(this.messageContainer=document.createElement("div"),this.messageContainer.className="r-message-container");var n=document.createElement("div"),a=document.createElement("div"),s=document.createElement("img"),i=document.createElement("span");a.className="r-alert",s.className="r-alert-img",IMG[e]?s.src=IMG[e]:s.src=IMG.warn,i.innerText=r.txt,i.className="r-warn-txt",a.appendChild(s),n.className="r-alert-outer",a.appendChild(i),n.appendChild(a),this.messageContainer.appendChild(n),document.querySelector("body").appendChild(this.messageContainer),setTimeout(function(){t.messageContainer.removeChild(n)},r.time||this.fadeTime)}},{key:"warn",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{txt:"",time:2500};this.renderDom("warn",e)}},{key:"error",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{txt:"",time:2500};this.renderDom("error",e)}},{key:"success",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{txt:"",time:2500};this.renderDom("success",e)}}]),e}(),_default=new Message;exports.default=_default;

lib/styles/index.min.css

-.r-message-container{position:fixed;top:16px;left:0;width:100%;z-index:1010}.r-message-container .r-alert{box-shadow:0 4px 12px rgba(0,0,0,.15);background-color:#fff;padding:8px 15px;font-size:14px;color:#000;border-radius:6px;display:inline-block}.r-message-container .r-alert-outer{margin-top:5px;text-align:center}.r-message-container .r-alert-img{width:24px;height:24px;vertical-align:middle;margin-right:5px}.r-message-container .r-warn-txt{vertical-align:middle}

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Improved metrics

Total package byte prevSize

21232

14.5%

Lines of code

366

70.23%

Number of low quality alerts

2

-33.33%

Worsened metrics

Dependency count

2

100%

Dev dependency count

14

7.69%

Dependency changes

• + Added

  @types/node@^13.1.6

• + Added

  @types/node@13.13.52
  (transitive)