favicon-marquee - npm Package Compare versions

Comparing version 1.1.5 to 1.2.1

lib/main.js

@@ -1,1 +0,74 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.FaviconMarquee=e():t.FaviconMarquee=e()}(self,(function(){return function(){"use strict";var t={};function e(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}var i=function(){function t(e){var i,s,n,a,o,r;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.size=null!==(i=e.size)&&void 0!==i?i:32,this.text=null!==(s=e.text)&&void 0!==s?s:"SCROLLING TEXT",this.color=null!==(n=e.color)&&void 0!==n?n:"green",this.step=null!==(a=e.step)&&void 0!==a?a:.5,this.font=null!==(o=e.font)&&void 0!==o?o:"Arial, sans-serif",this.marginBottom=null!==(r=e.marginBottom)&&void 0!==r?r:0,this.background=e.background,this.pixelsScrolled=0,this.redraws=0}var i,s;return i=t,(s=[{key:"start",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1e3/24;this.favicon=document.createElement("link"),this.favicon.type="image/jpeg",this.favicon.rel="shortcut icon",document.head.appendChild(this.favicon),this.createCanvas(),this.interval=setInterval((function(){return t.draw()}),e)}},{key:"stop",value:function(){clearInterval(this.interval)}},{key:"createCanvas",value:function(){this.canvas=document.createElement("canvas"),this.canvas.width=this.size,this.canvas.height=this.size,this.canvas.hidden=!0,this.ctx=this.canvas.getContext("2d"),this.ctx.font=this.size+"px "+this.font,this.textWidth=Math.ceil(this.ctx.measureText(this.text).width)}},{key:"draw",value:function(){500===this.redraws&&(this.createCanvas(),this.redraws=0),this.background?(this.ctx.fillStyle=this.background,this.ctx.rect(0,0,this.size,this.size),this.ctx.fill()):this.ctx.clearRect(0,0,this.size,this.size),this.pixelsScrolled+=this.step,this.pixelsScrolled>this.textWidth+2*this.size&&(this.pixelsScrolled=0);var t=-1*this.pixelsScrolled+this.size;this.ctx.fillStyle=this.color,this.ctx.fillText(this.text,t,this.size-this.marginBottom),this.favicon.href=this.canvas.toDataURL("image/png",.3),this.redraws++}}])&&e(i.prototype,s),t}();return t.default=i,t.default}()}));
+export class FaviconMarquee {
+    constructor({ text = "SCROLLING TEXT", font = '"Arial", sans-serif', color = "green", step = 0.5, size = 32, marginBottom = 0, background, }) {
+        this.text = text;
+        this.size = size;
+        this.color = color;
+        this.step = step;
+        this.font = font;
+        this.marginBottom = marginBottom;
+        this.background = background;
+        this.pixelsScrolled = 0;
+        this.redraws = 0; // counts how many times the same canvas has been used for drawing the favicon
+        // needed because Firefox slows down horribly when reusing the same canvas too many times
+    }
+    start(interval = 1000 / 24) {
+        this.favicon = document.createElement("link");
+        this.favicon.type = "image/jpeg";
+        this.favicon.rel = "shortcut icon";
+        document.head.appendChild(this.favicon);
+        this.createCanvas();
+        this.interval = setInterval(() => this.draw(), interval);
+    }
+    stop() {
+        clearInterval(this.interval);
+        this.interval = undefined;
+    }
+    draw() {
+        if (this.redraws === 500) {
+            // make a new canvas every 500 redraws
+            // this number is high enough to avoid frequent garbage collection
+            // but low enough to avoid Firefox performance problems
+            this.createCanvas();
+            this.redraws = 0;
+        }
+        if (this.ctx === undefined ||
+            this.textWidth === undefined ||
+            this.favicon === undefined ||
+            this.canvas === undefined) {
+            throw new Error("Error: uninitialized member variables -- have you called the start() function?");
+        }
+        if (this.background) {
+            this.ctx.fillStyle = this.background;
+            this.ctx.rect(0, 0, this.size, this.size);
+            this.ctx.fill();
+        }
+        else {
+            this.ctx.clearRect(0, 0, this.size, this.size);
+        }
+        this.pixelsScrolled += this.step;
+        if (this.pixelsScrolled > this.textWidth + 2 * this.size) {
+            // 2 * this.size to begin and end with blank canvas
+            this.pixelsScrolled = 0; // loop around
+        }
+        const canvasWidthOffset = -1 * this.pixelsScrolled + this.size; // negation of pixelsScrolled because canvas scrolls left-to-right
+        // add this.size to begin rendering with blank canvas
+        this.ctx.fillStyle = this.color;
+        this.ctx.fillText(this.text, canvasWidthOffset, this.size - this.marginBottom);
+        this.favicon.href = this.canvas.toDataURL("image/png", 0.3);
+    }
+    createCanvas() {
+        this.canvas = document.createElement("canvas");
+        this.canvas.width = this.size;
+        this.canvas.height = this.size;
+        this.canvas.hidden = true;
+        const renderingContext = this.canvas.getContext("2d");
+        if (renderingContext === null) {
+            throw new Error("Error getting 2D rendering context from canvas. This browser does not support FaviconMarquee");
+        }
+        this.ctx = renderingContext;
+        this.ctx.font = this.size + "px " + this.font;
+        this.textWidth = Math.ceil(this.ctx.measureText(this.text).width);
+        this.redraws++;
+    }
+}
+export default FaviconMarquee;

package.json

 {
     "name": "favicon-marquee",
-    "version": "1.1.5",
+    "version": "1.2.1",
     "description": "An animated scrolling favicon for your website",
+    "author": "Sten Laane <[e-mail]> (https://laane.xyz)",
     "main": "lib/main.js",
+    "types": "lib/main.d.ts",
+    "files": [
+        "lib"
+    ],
     "scripts": {
-        "build": "webpack --mode production",
-        "prepublish": "npm run build",
-        "webpack": "webpack --mode development"
+        "build": "tsc",
+        "prepublish": "npm run build"
     },
-    "keywords": [
-        "favicon",
-        "marquee",
-        "animated",
-        "front-end"
-    ],
-    "author": "Sten Laane <[e-mail]> (https://laane.xyz)",
     "license": "MIT",
-    "repository": "https://github.com/StenAL/favicon-marquee",
+    "dependencies": {},
     "devDependencies": {
-        "@babel/cli": "^7.11.6",
-        "@babel/core": "^7.11.6",
-        "@babel/preset-env": "^7.11.5",
-        "babel-loader": "^8.1.0",
-        "core-js": "^3.6.5",
-        "husky": "^4.3.0",
-        "lint-staged": "^10.4.0",
-        "prettier": "2.1.2",
-        "webpack": "^5.31.0",
-        "webpack-cli": "^4.6.0"
+        "husky": "^4.3.8",
+        "typescript": "^4.5.5",
+        "lint-staged": "^12.3.2",
+        "prettier": "^2.5.1"
     },
-    "browserslist": [
-        ">0.2%",
-        "not dead",
-        "not op_mini all"
-    ],
-    "files": [
-        "lib/main.js"
-    ],
     "husky": {
@@ -47,3 +30,13 @@ "hooks": {
         "*.{js,css,md}": "prettier --write"
-    }
+    },
+    "repository": "https://github.com/StenAL/favicon-marquee",
+    "keywords": [
+        "favicon",
+        "marquee",
+        "scrolling",
+        "animated",
+        "front-end",
+        "typescript",
+        "esm"
+    ]
 }

README.md

@@ -7,9 +7,6 @@ # favicon-marquee
 
-> A <10 kB JavaScript class with no dependencies that adds an animated scrolling
+> A <5 kB JavaScript class with no dependencies that adds an animated scrolling
 > favicon to your website.
 > See the [demo](https://laane.xyz/favicon/example1.html).
 
-This package is transpiled and polyfilled to be pre-ES6 compatible which means it
-works on all modern browsers
-
 ## Install
@@ -25,23 +22,24 @@
 
-## Usage
+## Use
 
-favicon-marquee can be bundled with all major build tools
+favicon-marquee can be imported using ESM syntax
 
-```
+```js
 import FaviconMarquee from "favicon-marquee";
 ```
 
-or loaded using a script tag and used as a global variable
+or loaded from a CDN and used in a HTML module script
 
+```html
+<script type="module">
+    import FaviconMarquee from "https://cdn.jsdelivr.net/npm/favicon-marquee@1.2.0/lib/main.js";
+    // ...
+</script>
 ```
-<script type="text/javascript" src="path/to/lib/main.js">
-// a CDN can also be used
-<script src="https://cdn.jsdelivr.net/npm/favicon-marquee@1.1.2/lib/main.js"></script>
-```
 
-Now that FaviconMarquee is accessible, you can use it by running the following code
+Now that FaviconMarquee is in scope, you can use it by running the following code
 
-```
+```js
 const marquee = new FaviconMarquee({
-    text: 'easy!",
+    text: "easy!",
     font: '"Comic Sans MS", sans-serif',
@@ -57,18 +55,19 @@ });
 
-`text` - text to be displayed in the favicon. This can be any unicode character
-including emojis, cyrillic, hangul, etc.  
-`font` - font of the text. This can be any valid CSS `font-family` value  
-`color` - color of the text to be displayed. Can be any valid CSS `color` value  
-`background` - color of the marquee's background. Transparent by default. Can be
-any valid CSS `color` value  
-`step` - specifies how many pixels the marquee scrolls each render. This can be used
-to speed up or slow down the text  
-`size` - size of the canvas used to render the marquee's text. A larger size results in
-a more detailed picture but might cause performance issues  
-`marginBottom` - the text rendered is displayed at the bottom of the favicon. This
-can optionally be used to add some margin to the bottom to center the text instead
+-   `text` - text to be displayed in the favicon. This can be any unicode characters
+    including emojis, cyrillic, hangul, etc.
+-   `font` - font of the text. This can be any valid CSS `font-family` value
+-   `color` - color of the text to be displayed. Can be any valid CSS `color` value
+-   `background` - color of the marquee's background. Transparent by default. Can be
+    any valid CSS `color` value
+-   `step` - specifies how many pixels the marquee scrolls each render. This can be used
+    to speed up or slow down the text's scrolling
+-   `size` - size of the canvas used to render the marquee's text. A larger size results in
+    a more detailed picture but might cause performance issues
+-   `marginBottom` - the text is rendered at the bottom of the favicon. This option
+    can be used to add some margin to the bottom to center the text instead
+-   `background` - the background color of the text. Can be any valid CSS `color` value.
 
 These properties must be wrapped in an object before passing them to the constructor.
 
-Additionally, a number can be passed into the `start` to control how often (in ms) the
+Additionally, a number can be passed into the `start` method to control how often (in ms) the
 marquee is re-rendered.
@@ -75,0 +74,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10485

increased by34.05%

Dev dependency count

4

decreased by-60%

Number of package files

5

increased by25%

Lines of code

140

increased byInfinity%

Worsened metrics

Number of lines in readme file

92

decreased by-1.08%

No dependency changes