glitched-writer - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

package.json

 {
   "name": "glitched-writer",
-  "version": "1.3.0",
-  "description": "glitched text writer module",
+  "version": "2.0.0",
+  "description": "Glitched text-writer module, with highly customizable settings to get the effect You're looking for. Generally for web as a client dependency, but can be also used elswere.",
   "author": "Damian Tarnawski @thetarnav <[e-mail]>",
@@ -12,38 +12,32 @@ "license": "MIT",
   "homepage": "https://github.com/thetarnav/glitched-writer#readme",
-  "main": "glitchedWriter.min.js",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib/**/*"
+  ],
   "scripts": {
     "dev": "parcel test/index.pug --out-dir dev",
-    "build": "parcel build glitchedWriter.js --no-cache --out-dir . --out-file glitchedWriter.min.js",
-    "test": "parcel index.html"
+    "build": "tsc"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/preset-env": "^7.6.3",
-    "babel-eslint": "^10.0.3",
-    "browserslist": "^4.7.1",
-    "eslint": "^6.5.1",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.1.2",
-    "parcel-bundler": "^1.12.4",
+    "@parcel/transformer-typescript-types": "^2.0.0-nightly.630",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "lodash.debounce": "^4.0.8",
+    "nodemon": "^2.0.7",
+    "parcel-bundler": "^1.12.5",
     "pug": "^2.0.4",
-    "sass": "^1.23.0"
+    "sass": "^1.32.8",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.2.3"
   },
-  "dependencies": {
-    "lodash.debounce": "^4.0.8",
-    "regenerator-runtime": "^0.13.3"
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-env"
-    ],
-    "plugins": [
-      "@babel/plugin-proposal-class-properties"
-    ]
-  },
   "browserslist": [
-    "defaults"
+    "last 3 and_chr versions",
+    "last 3 chrome versions",
+    "last 3 opera versions",
+    "last 3 ios_saf versions",
+    "last 3 safari versions"
   ],
@@ -54,9 +48,10 @@ "keywords": [
     "glitch",
+    "header",
+    "decrypt",
     "content",
-    "decrypt",
-    "async",
-    "front-end",
+    "frontend",
     "web",
-    "html"
+    "html",
+    "typewriter"
   ]
 }

README.md

 # Glitched Writer
+
+![npm](https://img.shields.io/npm/v/glitched-writer) ![npm type definitions](https://img.shields.io/npm/types/glitched-writer) [![](https://data.jsdelivr.com/v1/package/npm/glitched-writer/badge?style=rounded)](https://www.jsdelivr.com/package/npm/glitched-writer) ![NPM](https://img.shields.io/npm/l/glitched-writer)
+
+[![glitched-writer-preview](https://user-images.githubusercontent.com/24491503/67164275-06ab6900-f379-11e9-81ac-cab76dbc8dcd.gif)](https://codepen.io/thetarnav/pen/MWWyPzY)
+
+### What it is:
+
+Glitched, text-writing npm module, with highly customizable settings to get the effect You're looking for. Works for both **web** and **node.js** applications.
+
+### Features:
+
+-  Writes your text, by glitching or spelling it out.
+
+-  Can be attached to a **HTML Element** or simply printed out, by providing callback function. Therefore it can be used anywhere.
+
+-  Highly customizable behavior. Set of options will help you achieve the effect you desire.
+
+-  For styling purposes, while writing: attatches **glitched-writer--writing** class to the HTML Element and **data-string attribute** with current string state.
+
+-  Written in **typescript**.
+
+---
+
+## Usage:
+
+### Installation
+
+Download package through npm.
+
+```bash
+npm i glitched-writer
+```
+
+Then import GlitchedWriter class in the JavaScript file.
+
+```js
+import GlitchedWriter from 'glitched-writer'
+```
+
+Or use the CDN and attach this script link to your html document.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/glitched-writer@1.3.0/glitchedWriter.min.js"></script>
+```
+
+-  Standalone function call with .then:
+
+`glitchWrite( htmlElement, 'text to write' ).then(console.log)`
+
+-  Creating GlitchedWriter class instance for later use:
+
+`const writerObject = setGlitchedWriter( htmlElement, { glitches: 'cUsToM gLiTcH cHaRs', stepsMax: 10} )`
+
+-  Writing using instance: (glitchesFromString <- means that glitched characters will be taken from the inputed text characters)
+
+`writerObject.write( 'message', {glitchesFromString: true} )`
+
+-  Adding event listener (**e.detail** holds Object with usefull **text** property):
+
+`htmlElement.addEventListener('glitchWrote', e => console.log( e.detail.text ))`
+
+---
+
+#### settings _/w defaults_:
+
+| setting | default |
+
+| ------------ | ------------ |
+
+| steps | [0, 6] _(min & max)_ |
+
+| delay | [140, 400] _(min & max)_ |
+
+| firstDelay | [0, 1700] |
+
+| ghostsProbability | 0.1 |
+
+| maxGhosts | 7 |
+
+| glitches | 'ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư 一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何 ĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>$€£¥¢:;,.\* •°·…±†‡æ«»¦¯—–~˜¨_øÞ¿▬▭▮▯┐└╛╟╚╔╘╒╓┘┌░▒▓○‼' |
+
+| glitchesFromString | false |
+
+| oneAtATime | false |
+
+| startText | **'previous'** _(or anything rly)_, 'matchingOnly', 'eraseWhole' |
+
+| instantErase | false |
+
+| combineGlitches | false |
+
+| preset | 'default', 'nier', 'normal' |
+
+| className | 'glitch-writing' |
+
+| leadingChar | { char: '', onTyping: false } |
+
+---
+
+#### Links:
+
+-  [GitHub](https://github.com/thetarnav/glitched-writer 'GitHub')
+
+-  [npm](https://www.npmjs.com/package/glitched-writer 'npm')
+
+-  [JSDelivr](https://www.jsdelivr.com/package/npm/glitched-writer 'JSDelivr')
+
+-  [Codepen DEMO](https://codepen.io/thetarnav/pen/MWWyPzY 'Codepen DEMO')# Glitched Writer
+
 [![](https://data.jsdelivr.com/v1/package/npm/glitched-writer/badge)](https://www.jsdelivr.com/package/npm/glitched-writer)
@@ -8,54 +117,78 @@
 
-- Edits **textContent** of chosen html element with a (custom or not) set of "glitched" characters until it writes wanted text.
-- Can be used as an object (instance of **GlitchedWriter** class) so that on multiple write function calls the writing process will be automatically reset and write the lastest inputed message.
-- The write function is an asynchronous so .then can be used.
-- Finished writing will cause CustomEvent **glitchWrote** dispatch on html element.
-- The html element gets **glitch-writing** class for the process of writing.
+-  Edits **textContent** of chosen html element with a (custom or not) set of "glitched" characters until it writes wanted text.
 
-------------
+-  Can be used as an object (instance of **GlitchedWriter** class) so that on multiple write function calls the writing process will be automatically reset and write the lastest inputed message.
 
+-  The write function is an asynchronous so .then can be used.
+
+-  Finished writing will cause CustomEvent **glitchWrote** dispatch on html element.
+
+-  The html element gets **glitch-writing** class for the process of writing.
+
+---
+
 ### Code Examples:
-- Standalone function call with .then:
 
+-  Standalone function call with .then:
+
 `glitchWrite( htmlElement, 'text to write' ).then(console.log)`
 
-- Creating GlitchedWriter class instance for later use:
+-  Creating GlitchedWriter class instance for later use:
 
 `const writerObject = setGlitchedWriter( htmlElement, { glitches: 'cUsToM gLiTcH cHaRs', stepsMax: 10} )`
 
-- Writing using instance: (glitchesFromString <- means that glitched characters will be taken from the inputed text characters)
+-  Writing using instance: (glitchesFromString <- means that glitched characters will be taken from the inputed text characters)
 
 `writerObject.write( 'message', {glitchesFromString: true} )`
 
-- Adding event listener (**e.detail** holds Object with usefull **text** property):
+-  Adding event listener (**e.detail** holds Object with usefull **text** property):
 
 `htmlElement.addEventListener('glitchWrote', e => console.log( e.detail.text ))`
 
-------------
+---
 
-#### settings */w defaults*:
-|  setting  | default  |
+#### settings _/w defaults_:
+
+| setting | default |
+
 | ------------ | ------------ |
-|  steps  |  [0, 6] *(min & max)* |
-| delay |  [140, 400] *(min & max)* |
+
+| steps | [0, 6] _(min & max)_ |
+
+| delay | [140, 400] _(min & max)_ |
+
 | firstDelay | [0, 1700] |
-| ghostsProbability  | 0.1  |
-| maxGhosts  |  7 |
-| glitches  | 'ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何ĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>$€£¥¢:;,.* •°·…±†‡æ«»¦¯—–~˜¨_øÞ¿▬▭▮▯┐└╛╟╚╔╘╒╓┘┌░▒▓○‼'  |
-| glitchesFromString  |  false |
-| oneAtATime  |  false |
-| startText  |  **'previous'** *(or anything rly)*, 'matchingOnly', 'eraseWhole' |
+
+| ghostsProbability | 0.1 |
+
+| maxGhosts | 7 |
+
+| glitches | 'ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư 一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何 ĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>$€£¥¢:;,.\* •°·…±†‡æ«»¦¯—–~˜¨_øÞ¿▬▭▮▯┐└╛╟╚╔╘╒╓┘┌░▒▓○‼' |
+
+| glitchesFromString | false |
+
+| oneAtATime | false |
+
+| startText | **'previous'** _(or anything rly)_, 'matchingOnly', 'eraseWhole' |
+
 | instantErase | false |
-| combineGlitches  |  false |
+
+| combineGlitches | false |
+
 | preset | 'default', 'nier', 'normal' |
+
 | className | 'glitch-writing' |
+
 | leadingChar | { char: '', onTyping: false } |
 
-------------
+---
 
 #### Links:
 
-- [GitHub](https://github.com/thetarnav/glitched-writer "GitHub")
-- [npm](https://www.npmjs.com/package/glitched-writer "npm")
-- [JSDelivr](https://www.jsdelivr.com/package/npm/glitched-writer "JSDelivr")
-- [Codepen DEMO](https://codepen.io/thetarnav/pen/MWWyPzY "Codepen DEMO")
+-  [GitHub](https://github.com/thetarnav/glitched-writer 'GitHub')
+
+-  [npm](https://www.npmjs.com/package/glitched-writer 'npm')
+
+-  [JSDelivr](https://www.jsdelivr.com/package/npm/glitched-writer 'JSDelivr')
+
+-  [Codepen DEMO](https://codepen.io/thetarnav/pen/MWWyPzY 'Codepen DEMO')

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

High entropy strings

Supply chain risk

Contains high entropy strings. This could be a sign of encrypted data, leaked secrets or obfuscated code.

Found 1 instance in 1 package

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.

Found 1 instance in 1 package

Improved metrics

Dependency count

0

decreased by-100%

Dev dependency count

13

decreased by-7.14%

Number of package files

15

increased by15.38%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

194

increased by218.03%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

38382

decreased by-65.51%

Lines of code

652

decreased by-33.74%

Dependency changes

• - Removedlodash.debounce@^4.0.8

• - Removedregenerator-runtime@^0.13.3

• - Removedlodash.debounce@4.0.8(transitive)

• - Removedregenerator-runtime@0.13.11(transitive)