glitched-writer - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

lib/char.d.ts

@@ -11,6 +11,6 @@ import GlitchedWriter from './index';
     stop: boolean;
-    constructor(char: string, goal: string, writer: GlitchedWriter, initialGhosts?: string);
+    instant: boolean;
+    constructor(char: string, goal: string, writer: GlitchedWriter, initialGhosts?: string, instant?: boolean);
     get string(): string;
     get finished(): boolean;
-    get isSpecial(): boolean;
     type(): Promise<boolean>;
@@ -17,0 +17,0 @@ nextStep(): void;

lib/char.js

@@ -5,3 +5,3 @@ "use strict";
 class Char {
-    constructor(char, goal, writer, initialGhosts) {
+    constructor(char, goal, writer, initialGhosts, instant = false) {
         this.ghostsBefore = [];
@@ -13,6 +13,7 @@ this.ghostsAfter = [];
         this.writer = writer;
+        this.instant = instant;
         if (initialGhosts)
             this.ghostsBefore = [...initialGhosts];
         this.stepsLeft = writer.options.stepsLeft;
-        if (this.isSpecial)
+        if (this.instant)
             this.stepsLeft = 0;
@@ -29,8 +30,5 @@ this.maxGhosts = writer.options.genMaxGhosts;
     }
-    get isSpecial() {
-        return ['\t', '\n', '\r', '\f', '\v'].includes(this.goal);
-    }
     async type() {
         const loop = async () => {
-            await utils_1.wait(this.writer.options.genInterval);
+            !this.instant && (await utils_1.wait(this.writer.options.genInterval));
             this.nextStep();
@@ -40,3 +38,3 @@ this.writer.emiter.call('step');
         };
-        !this.isSpecial && (await utils_1.wait(this.writer.options.genInitDelay));
+        !this.instant && (await utils_1.wait(this.writer.options.genInitDelay));
         await utils_1.promiseWhile(() => !this.finished && !this.writer.state.isPaused && !this.stop, loop);
@@ -43,0 +41,0 @@ return this.finished;

lib/emiter.js

@@ -13,3 +13,6 @@ "use strict";
         if (htmlElement) {
-            htmlElement.textContent = string;
+            if (this.writer.options.html)
+                htmlElement.innerHTML = string;
+            else
+                htmlElement.textContent = string;
             htmlElement.setAttribute('data-string', string);
@@ -16,0 +19,0 @@ }

lib/index.d.ts

@@ -9,3 +9,3 @@ import Options from './options';
 export default class GlitchedWriter {
-    htmlElement?: HTMLElement;
+    htmlElement?: HTMLElement | Element;
     options: Options;
@@ -15,7 +15,6 @@ state: State;
     charTable: Char[];
-    previousString: string;
     goalString: string;
-    constructor(htmlElement?: HTMLElement, options?: ConstructorOptions, onStepCallback?: Callback, onFinishCallback?: Callback);
+    constructor(htmlElement?: HTMLElement | Element, options?: ConstructorOptions, onStepCallback?: Callback, onFinishCallback?: Callback);
     get string(): string;
-    get genPreviousString(): string;
+    get previousString(): string;
     get writerData(): WriterDataResponse;
@@ -28,4 +27,6 @@ write(string: string, writeOptions?: WriteOptions): Promise<WriterDataResponse>;
     private createPreviousCharTable;
+    private addChar;
+    private get goalStringArray();
     private getWriterData;
-    private genEraseGoalString;
+    private genGoalStringToErase;
 }
@@ -32,0 +33,0 @@ export declare const createGlitchedWriter: (htmlElement?: HTMLElement | undefined, options?: ConstructorOptions | undefined, onStepCallback?: Callback | undefined, onFinishCallback?: Callback | undefined) => GlitchedWriter;

lib/index.js

@@ -16,3 +16,2 @@ "use strict";
         this.charTable = [];
-        this.previousString = '';
         this.goalString = '';
@@ -25,13 +24,18 @@ this.htmlElement = htmlElement;
     get string() {
-        const charTableMap = this.charTable.map(char => char.string);
+        const string = this.charTable.map(char => char.string).join('');
         return [
             this.options.getAppendedText('leading'),
-            charTableMap.join(''),
+            string,
             this.options.getAppendedText('trailing'),
         ].join('');
     }
-    get genPreviousString() {
-        var _a;
-        const elTextContent = (_a = this.htmlElement) === null || _a === void 0 ? void 0 : _a.textContent;
-        return (elTextContent !== null && elTextContent !== void 0 ? elTextContent : this.previousString).trim();
+    get previousString() {
+        var _a, _b, _c, _d;
+        let prev = (_b = (_a = this.htmlElement) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : this.string;
+        if (this.options.html) {
+            prev = (_d = (_c = this.htmlElement) === null || _c === void 0 ? void 0 : _c.innerHTML) !== null && _d !== void 0 ? _d : prev;
+            prev = utils_1.filterHtml(prev);
+        }
+        prev = prev.trim();
+        return prev;
     }
@@ -48,6 +52,4 @@ get writerData() {
     async write(string, writeOptions) {
-        var _a, _b;
         if (this.options.startFrom === 'erase' && !(writeOptions === null || writeOptions === void 0 ? void 0 : writeOptions.erase))
-            await this.write(this.genEraseGoalString(string), { erase: true });
-        this.previousString = (_b = (_a = this.htmlElement) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : this.string;
+            await this.write(this.genGoalStringToErase(string), { erase: true });
         this.goalString = string;
@@ -102,13 +104,18 @@ this.charTable.forEach(char => (char.stop = true));
     createMatchingCharTable() {
-        const { genPreviousString: previous, goalString: goal } = this, goalStringArray = makeGoalArray(previous, goal), maxDist = Math.ceil(this.options.genMaxGhosts / 2);
+        const { goalStringArray, previousString: previous } = this, maxDist = Math.ceil(this.options.genMaxGhosts / 2);
         let pi = -1;
         goalStringArray.forEach(gl => {
+            pi++;
             const pl = previous[pi];
-            pi++;
             if (gl === '' && !pl)
                 return;
+            if (typeof gl === 'object' || utils_1.isSpecialChar(gl)) {
+                pi--;
+                this.addChar('', typeof gl === 'object' ? gl.tag : gl, undefined, true);
+                return;
+            }
             const fi = gl !== '' ? previous.indexOf(gl, pi) : -1;
             if (fi !== -1 && fi - pi <= maxDist) {
                 const appendedText = previous.substring(pi, fi);
-                this.charTable.push(new char_1.default(gl, gl, this, appendedText));
+                this.addChar(gl, gl, appendedText);
                 pi = fi;
@@ -118,9 +125,28 @@ this.state.nGhosts += appendedText.length;
             else
-                this.charTable.push(new char_1.default(pl || ' ', gl, this));
+                this.addChar(pl || ' ', gl);
         });
     }
     createPreviousCharTable() {
-        const { previousString: previous, goalString: goal } = this, goalStringArray = makeGoalArray(previous, goal);
-        goalStringArray.forEach((l, i) => this.charTable.push(new char_1.default(previous[i] || ' ', l, this)));
+        const { goalStringArray, previousString: previous } = this;
+        let pi = -1;
+        goalStringArray.forEach(gl => {
+            pi++;
+            const pl = previous[pi] || ' ';
+            if (typeof gl === 'object' || utils_1.isSpecialChar(gl)) {
+                pi--;
+                this.addChar('', typeof gl === 'object' ? gl.tag : gl, undefined, true);
+                return;
+            }
+            this.addChar(pl, gl);
+        });
     }
+    addChar(pl, gl, appendedText, instant = false) {
+        this.charTable.push(new char_1.default(pl, gl, this, appendedText, instant));
+    }
+    get goalStringArray() {
+        const { goalString: goal, previousString: previous } = this, goalArray = this.options.html ? utils_1.htmlToArray(goal) : Array.from(goal);
+        const prevGtGoal = Math.max(previous.length - goalArray.length, 0);
+        goalArray.push(...' '.repeat(prevGtGoal));
+        return goalArray;
+    }
     getWriterData(status, message, error) {
@@ -132,5 +158,5 @@ const { writerData } = this;
     }
-    genEraseGoalString(goal) {
+    genGoalStringToErase(goal) {
         var _a;
-        const { genPreviousString: previous } = this;
+        const { previousString: previous } = this;
         let result = '';
@@ -151,7 +177,2 @@ for (let i = 0; i < goal.length; i++) {
 exports.default = GlitchedWriter;
-function makeGoalArray(previous, goal) {
-    const goalArray = Array.from(goal), prevGtGoal = Math.max(previous.length - goal.length, 0);
-    goalArray.push(...''.padEnd(prevGtGoal, ' '));
-    return goalArray;
-}
 const createGlitchedWriter = (htmlElement, options, onStepCallback, onFinishCallback) => new GlitchedWriter(htmlElement, options, onStepCallback, onFinishCallback);
@@ -164,3 +185,1 @@ exports.createGlitchedWriter = createGlitchedWriter;
 exports.glitchWrite = glitchWrite;
-// const Writer = new GlitchedWriter(undefined, {}, string => console.log(string))
-// Writer.write('\tNothing\n\tspecial here!')

lib/options.d.ts

@@ -13,3 +13,5 @@ import { OptionsFields, ConstructorOptions, RangeOrNumber, AppendedText } from './types';
     glyphsFromString: 'previous' | 'goal' | 'both' | 'none';
+    ghostCharset: string;
     oneAtATime: boolean;
+    html: boolean;
     startFrom: 'matching' | 'previous' | 'erase';
@@ -19,3 +21,2 @@ leadingText: AppendedText | undefined;
     writer: GlitchedWriter;
-    ghostCharset: string;
     constructor(writer: GlitchedWriter, options?: ConstructorOptions | PresetName);
@@ -22,0 +23,0 @@ get stepsLeft(): number;

lib/options.js

@@ -7,34 +7,21 @@ "use strict";
     constructor(writer, options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        this.steps = [1, 6];
-        this.interval = [50, 150];
-        this.initialDelay = [0, 1500];
-        this.changeChance = 0.6;
-        this.ghostChance = 0.15;
-        this.maxGhosts = 'relative';
-        this.glyphs = presets_1.glyphs.full;
-        this.glyphsFromString = 'none';
-        this.oneAtATime = false;
-        this.startFrom = 'matching';
-        this.leadingText = undefined;
-        this.trailingText = undefined;
-        this.ghostCharset = '';
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         if (typeof options === 'string')
             options = presets_1.presets[options];
         options || (options = {});
-        this.steps = (_a = options.steps) !== null && _a !== void 0 ? _a : this.steps;
-        this.interval = (_b = options.interval) !== null && _b !== void 0 ? _b : this.interval;
-        this.initialDelay = (_c = options.initialDelay) !== null && _c !== void 0 ? _c : this.initialDelay;
-        this.changeChance = (_d = options.changeChance) !== null && _d !== void 0 ? _d : this.changeChance;
-        this.ghostChance = (_e = options.ghostChance) !== null && _e !== void 0 ? _e : this.ghostChance;
-        this.maxGhosts = (_f = options.maxGhosts) !== null && _f !== void 0 ? _f : this.maxGhosts;
-        if (options.glyphs !== undefined)
-            this.glyphs = utils_1.parseCharset(options.glyphs);
+        this.writer = writer;
+        this.steps = (_a = options.steps) !== null && _a !== void 0 ? _a : [1, 6];
+        this.interval = (_b = options.interval) !== null && _b !== void 0 ? _b : [50, 150];
+        this.initialDelay = (_c = options.initialDelay) !== null && _c !== void 0 ? _c : [0, 1500];
+        this.changeChance = (_d = options.changeChance) !== null && _d !== void 0 ? _d : 0.6;
+        this.ghostChance = (_e = options.ghostChance) !== null && _e !== void 0 ? _e : 0.15;
+        this.maxGhosts = (_f = options.maxGhosts) !== null && _f !== void 0 ? _f : 'relative';
+        this.glyphs = (_g = utils_1.parseCharset(options.glyphs)) !== null && _g !== void 0 ? _g : presets_1.glyphs.full;
+        this.glyphsFromString = (_h = options.glyphsFromString) !== null && _h !== void 0 ? _h : 'none';
         this.ghostCharset = this.glyphs;
-        this.glyphsFromString = (_g = options.glyphsFromString) !== null && _g !== void 0 ? _g : this.glyphsFromString;
-        this.oneAtATime = (_h = options.oneAtATime) !== null && _h !== void 0 ? _h : this.oneAtATime;
-        this.startFrom = (_j = options.startFrom) !== null && _j !== void 0 ? _j : this.startFrom;
-        this.leadingText = (_k = options.leadingText) !== null && _k !== void 0 ? _k : this.leadingText;
-        this.trailingText = (_l = options.trailingText) !== null && _l !== void 0 ? _l : this.trailingText;
-        this.writer = writer;
+        this.oneAtATime = (_j = options.oneAtATime) !== null && _j !== void 0 ? _j : false;
+        this.html = (_k = options.html) !== null && _k !== void 0 ? _k : false;
+        this.startFrom = (_l = options.startFrom) !== null && _l !== void 0 ? _l : 'matching';
+        this.leadingText = (_m = options.leadingText) !== null && _m !== void 0 ? _m : undefined;
+        this.trailingText = (_o = options.trailingText) !== null && _o !== void 0 ? _o : undefined;
     }
@@ -59,3 +46,3 @@ get stepsLeft() {
         if (this.maxGhosts === 'relative')
-            return Math.round((((_a = this.writer.goalString) === null || _a === void 0 ? void 0 : _a.length) || 25) * 0.2);
+            return Math.round((((_a = this.writer.goalString) === null || _a === void 0 ? void 0 : _a.length) || 25) * 0.25);
         return this.maxGhosts;
@@ -62,0 +49,0 @@ }

lib/presets.js

@@ -20,2 +20,3 @@ "use strict";
         oneAtATime: false,
+        html: false,
         startFrom: 'matching',
@@ -22,0 +23,0 @@ leadingText: undefined,

lib/utils.d.ts

@@ -7,3 +7,3 @@ import { RangeOrNumber } from './types';
 export declare function filterDuplicates<T>(iterable: Array<T>): Array<T>;
-export declare function parseCharset(input: string | string[] | Set<string>): string;
+export declare function parseCharset(input?: string | string[] | Set<string>): string | undefined;
 export declare function deleteRandom(array: any[]): void;
@@ -14,5 +14,11 @@ export declare const wait: (time: number) => Promise<number>;
 export declare const isInRange: (min: number, value: number, max: number) => boolean;
-export declare const animateWithClass: (element: HTMLElement, className: string) => void;
+export declare const animateWithClass: (element: HTMLElement | Element, className: string) => void;
 export declare const reverseString: (str: string) => string;
 export declare function getRandomFromRange(range: RangeOrNumber, round?: boolean): number;
 export declare const coinFlip: (p?: number) => boolean;
+export declare type TagOrString = {
+    tag: string;
+} | string;
+export declare function htmlToArray(string: string): TagOrString[];
+export declare function filterHtml(string: string): string;
+export declare const isSpecialChar: (l: string) => boolean;

lib/utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.coinFlip = exports.getRandomFromRange = exports.reverseString = exports.animateWithClass = exports.isInRange = exports.arrayOfTheSame = exports.promiseWhile = exports.wait = exports.deleteRandom = exports.parseCharset = exports.filterDuplicates = exports.randomChild = exports.random = void 0;
+exports.isSpecialChar = exports.filterHtml = exports.htmlToArray = exports.coinFlip = exports.getRandomFromRange = exports.reverseString = exports.animateWithClass = exports.isInRange = exports.arrayOfTheSame = exports.promiseWhile = exports.wait = exports.deleteRandom = exports.parseCharset = exports.filterDuplicates = exports.randomChild = exports.random = void 0;
 /* eslint-disable no-unused-vars */
@@ -32,2 +32,4 @@ function random(min, max, math) {
 function parseCharset(input) {
+    if (input === undefined)
+        return undefined;
     let result;
@@ -79,1 +81,23 @@ // Charset is a string
 exports.coinFlip = coinFlip;
+const findTagPattern = '(?:<style.+?>.+?</style>|<script.+?>.+?</script>|<(?:!|/?[a-zA-Z]+).*?/?>)';
+function htmlToArray(string) {
+    const reg = new RegExp(findTagPattern, 'g'), result = [];
+    let find, lastIndex = 0;
+    // eslint-disable-next-line no-cond-assign
+    while ((find = reg.exec(string))) {
+        const from = find.index, to = reg.lastIndex, stringBefore = string.slice(lastIndex, from);
+        lastIndex = to;
+        stringBefore && result.push(...stringBefore);
+        result.push({ tag: find[0] });
+    }
+    string.length > lastIndex && result.push(...string.slice(lastIndex));
+    return result;
+}
+exports.htmlToArray = htmlToArray;
+function filterHtml(string) {
+    const reg = new RegExp(findTagPattern, 'g');
+    return string.replace(reg, '');
+}
+exports.filterHtml = filterHtml;
+const isSpecialChar = (l) => ['\t', '\n', '\r', '\f', '\v'].includes(l);
+exports.isSpecialChar = isSpecialChar;

package.json

 {
   "name": "glitched-writer",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "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.",
@@ -18,7 +18,6 @@ "author": "Damian Tarnawski @thetarnav <[e-mail]>",
   "scripts": {
-    "dev": "parcel test/index.pug --out-dir dev",
+    "start": "nodemon src/index.ts",
     "build": "tsc"
   },
   "devDependencies": {
-    "@parcel/transformer-typescript-types": "^2.0.0-nightly.630",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
@@ -29,17 +28,6 @@ "@typescript-eslint/parser": "^4.18.0",
     "eslint-plugin-import": "^2.22.1",
-    "lodash.debounce": "^4.0.8",
     "nodemon": "^2.0.7",
-    "parcel-bundler": "^1.12.5",
-    "pug": "^3.0.2",
-    "sass": "^1.32.8",
     "ts-node": "^9.1.1",
     "typescript": "^4.2.3"
   },
-  "browserslist": [
-    "last 3 and_chr versions",
-    "last 3 chrome versions",
-    "last 3 opera versions",
-    "last 3 ios_saf versions",
-    "last 3 safari versions"
-  ],
   "keywords": [
@@ -52,3 +40,3 @@ "glitch",
     "content",
-    "frontend",
+    "front-end",
     "web",
@@ -55,0 +43,0 @@ "html",

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)
+![npm](https://img.shields.io/npm/v/glitched-writer) [![npm type definitions](https://img.shields.io/npm/types/glitched-writer)](https://www.npmjs.com/package/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)](https://www.npmjs.com/package/glitched-writer)
 
@@ -102,9 +102,2 @@ [![glitched-writer-preview](https://user-images.githubusercontent.com/24491503/67164275-06ab6900-f379-11e9-81ac-cab76dbc8dcd.gif)](https://codepen.io/thetarnav/pen/MWWyPzY)
 ```js
-import GlitchedWriter, { wait } from 'glitched-writer'
-
-const Writer = new GlitchedWriter(textEl, {}, undefined, string => {
-	// do sth after each finished write
-})
-Writer.write('Some placeholder')
-
 inputEl.addEventListener('input', () => {
@@ -156,2 +149,13 @@ Writer.write(inputEl.value)
 
+### Writing HTML
+
+New (**experimental & potentially dangerous**) config option let's you write text with html tags in it.
+
+```js
+// You need to enable html option.
+const Writer = new GlitchedWriter(htmlElement, { html: true })
+
+Writer.write('<b>Be sure to click <a href="...">this!</a></b>')
+```
+
 ### Available imports
@@ -163,4 +167,4 @@
 import GlitchedWriter, { // <-- GlitchedWriter class
-   ConstructorOptions // <-- Options type
-   Callback // <-- Callback type
+	ConstructorOptions, // <-- Options type
+	Callback, // <-- Callback type
 	WriterDataResponse, // <-- Type of response in callbacks
@@ -214,5 +218,6 @@ createGlitchedWriter, // <-- Alternative to creating writer class instance
    oneAtATime?: boolean, // false
+   html?: boolean, // false
    startFrom?: 'matching' | 'previous' | 'erase', // 'matching'
    leadingText?: AppendedText, // undefined
-   trailingText?: AppendedText, // undefined
+   trailingText?: AppendedText // undefined
 }
@@ -227,3 +232,3 @@
 
-### Description
+### Options Description
 
@@ -247,2 +252,3 @@ **Range** values will result in random values for each step for every letter.
 -  **oneAtATime** - _If writing should take place from left-to-right, letter-by-letter or normally: all-at-once._
+-  **html** - Potentially dangerous option. If true, written string will be injected as html, not text content. It provides advanced text formating with html tags and more. But be sure to not enable it on user-provided content.
 -  **startFrom** - _Decides on witch algorithm to use._
@@ -249,0 +255,0 @@ -  'matching' - Will scan starting and goal string for matching characters and will try to build character map from that.

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

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

Improved metrics

Total package byte prevSize

43328

increased by7.71%

Dev dependency count

8

decreased by-38.46%

Number of package files

19

increased by11.76%

Lines of code

773

increased by12.35%

Number of lines in readme file

265

increased by2.32%

No dependency changes