Socket
Socket
Sign inDemoInstall

typeit-react

Package Overview
Dependencies
Maintainers
1
Versions
65
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

typeit-react - npm Package Compare versions

Comparing version 2.7.1 to 2.7.2

304

dist/index.es.js
var __defProp = Object.defineProperty;
var __typeError = (msg) => {
throw TypeError(msg);
};
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
return value;
};
var __accessCheck = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet = (obj, member, getter) => {
__accessCheck(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd = (obj, member, value) => {
if (member.has(obj))
throw TypeError("Cannot add the same private member more than once");
member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var _empty, empty_fn, _fire, fire_fn, _move, move_fn, _prepLoop, prepLoop_fn, _fireItemWithContext, fireItemWithContext_fn, _wait, wait_fn, _attachCursor, attachCursor_fn, _elementIsInput, elementIsInput_fn, _queueAndReturn, queueAndReturn_fn, _maybeAppendPause, maybeAppendPause_fn, _generateTemporaryOptionQueueItems, generateTemporaryOptionQueueItems_fn, _updateOptions, updateOptions_fn, _generateQueue, generateQueue_fn, _buildOptions, _prependHardcodedStrings, prependHardcodedStrings_fn, _setUpCursor, setUpCursor_fn, _addSplitPause, addSplitPause_fn, _type, type_fn, _delete, delete_fn, _removeNode, removeNode_fn, _getPace, getPace_fn, _derivedCursorPosition, derivedCursorPosition_get, _isInput, isInput_get, _shouldRenderCursor, shouldRenderCursor_get, _allChars, allChars_get, _a;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
var _TypeIt_instances, empty_fn, fire_fn, move_fn, prepLoop_fn, fireItemWithContext_fn, wait_fn, attachCursor_fn, elementIsInput_fn, queueAndReturn_fn, maybeAppendPause_fn, generateTemporaryOptionQueueItems_fn, updateOptions_fn, generateQueue_fn, _buildOptions, prependHardcodedStrings_fn, setUpCursor_fn, addSplitPause_fn, type_fn, delete_fn, removeNode_fn, getPace_fn, derivedCursorPosition_get, isInput_get, shouldRenderCursor_get, allChars_get, _a;
import React, { forwardRef, useRef, useState, useEffect } from "react";

@@ -202,2 +189,12 @@ const isArray = (thing) => Array.isArray(thing);

}
const cleanUpSkipped = ({
index,
newIndex,
queueItems,
cleanUp
}) => {
for (let i = index + 1; i < newIndex + 1; i++) {
cleanUp(queueItems[i][0]);
}
};
const isNumber = (value) => Number.isInteger(value);

@@ -265,4 +262,3 @@ const countStepsToSelector = ({

}) => {
if (!cursor || !cursorOptions)
return;
if (!cursor || !cursorOptions) return;
let animation = getAnimationFromElement(cursor);

@@ -410,4 +406,3 @@ let oldCurrentTime;

const removeNode = (node, rootElement) => {
if (!node)
return;
if (!node) return;
let nodeParent = node.parentNode;

@@ -477,47 +472,3 @@ let nodeToRemove = nodeParent.childNodes.length > 1 || nodeParent.isSameNode(rootElement) ? (

constructor(element, options = {}) {
__privateAdd(this, _empty);
/**
* Execute items in the queue.
*
* @param remember If false, each queue item will be destroyed once executed.
* @returns
*/
__privateAdd(this, _fire);
__privateAdd(this, _move);
/**
* 1. Reset queue.
* 2. Reset initial pause.
*/
__privateAdd(this, _prepLoop);
__privateAdd(this, _fireItemWithContext);
__privateAdd(this, _wait);
/**
* Attach it to the DOM so, along with the required CSS transition.
*/
__privateAdd(this, _attachCursor);
__privateAdd(this, _elementIsInput);
__privateAdd(this, _queueAndReturn);
__privateAdd(this, _maybeAppendPause);
__privateAdd(this, _generateTemporaryOptionQueueItems);
__privateAdd(this, _updateOptions);
/**
* Based on provided strings, generate a TypeIt queue
* to be fired for each character in the string.
*/
__privateAdd(this, _generateQueue);
__privateAdd(this, _prependHardcodedStrings);
/**
* Provided it's a non-form element and the options is provided,
* set up the cursor element for the animation.
*/
__privateAdd(this, _setUpCursor);
__privateAdd(this, _addSplitPause);
__privateAdd(this, _type);
__privateAdd(this, _delete);
__privateAdd(this, _removeNode);
__privateAdd(this, _getPace);
__privateAdd(this, _derivedCursorPosition);
__privateAdd(this, _isInput);
__privateAdd(this, _shouldRenderCursor);
__privateAdd(this, _allChars);
__privateAdd(this, _TypeIt_instances);
__publicField(this, "element");

@@ -546,5 +497,5 @@ __publicField(this, "timeouts");

);
this.opts.strings = __privateMethod(this, _prependHardcodedStrings, prependHardcodedStrings_fn).call(this, asArray(this.opts.strings));
this.opts.strings = __privateMethod(this, _TypeIt_instances, prependHardcodedStrings_fn).call(this, asArray(this.opts.strings));
this.opts = merge(this.opts, {
html: !__privateGet(this, _isInput, isInput_get) && this.opts.html,
html: !__privateGet(this, _TypeIt_instances, isInput_get) && this.opts.html,
nextStringDelay: calculateDelay(this.opts.nextStringDelay),

@@ -565,7 +516,7 @@ loopDelay: calculateDelay(this.opts.loopDelay)

__privateGet(this, _buildOptions).call(this, options);
this.cursor = __privateMethod(this, _setUpCursor, setUpCursor_fn).call(this);
this.cursor = __privateMethod(this, _TypeIt_instances, setUpCursor_fn).call(this);
this.element.dataset.typeitId = this.id;
appendStyleBlock(PLACEHOLDER_CSS);
if (this.opts.strings.length) {
__privateMethod(this, _generateQueue, generateQueue_fn).call(this);
__privateMethod(this, _TypeIt_instances, generateQueue_fn).call(this);
}

@@ -580,8 +531,8 @@ }

}
__privateMethod(this, _attachCursor, attachCursor_fn).call(this);
__privateMethod(this, _TypeIt_instances, attachCursor_fn).call(this);
if (!this.opts.waitUntilVisible) {
__privateMethod(this, _fire, fire_fn).call(this);
__privateMethod(this, _TypeIt_instances, fire_fn).call(this);
return this;
}
fireWhenVisible(this.element, __privateMethod(this, _fire, fire_fn).bind(this));
fireWhenVisible(this.element, __privateMethod(this, _TypeIt_instances, fire_fn).bind(this));
return this;

@@ -591,3 +542,3 @@ }

this.timeouts = destroyTimeouts(this.timeouts);
handleFunctionalArg(shouldRemoveCursor) && this.cursor && __privateMethod(this, _removeNode, removeNode_fn).call(this, this.cursor);
handleFunctionalArg(shouldRemoveCursor) && this.cursor && __privateMethod(this, _TypeIt_instances, removeNode_fn).call(this, this.cursor);
this.statuses.destroyed = true;

@@ -607,3 +558,3 @@ }

}
this.element[__privateMethod(this, _elementIsInput, elementIsInput_fn).call(this) ? "value" : "innerHTML"] = "";
this.element[__privateMethod(this, _TypeIt_instances, elementIsInput_fn).call(this) ? "value" : "innerHTML"] = "";
return this;

@@ -614,9 +565,9 @@ }

let { instant } = actionOpts;
let bookEndQueueItems = __privateMethod(this, _generateTemporaryOptionQueueItems, generateTemporaryOptionQueueItems_fn).call(this, actionOpts);
let bookEndQueueItems = __privateMethod(this, _TypeIt_instances, generateTemporaryOptionQueueItems_fn).call(this, actionOpts);
let chars = maybeChunkStringAsHtml(string, this.opts.html);
let charsAsQueueItems = chars.map((char) => {
return {
func: () => __privateMethod(this, _type, type_fn).call(this, char),
func: () => __privateMethod(this, _TypeIt_instances, type_fn).call(this, char),
char,
delay: instant || isNonVoidElement(char) ? 0 : __privateMethod(this, _getPace, getPace_fn).call(this),
delay: instant || isNonVoidElement(char) ? 0 : __privateMethod(this, _TypeIt_instances, getPace_fn).call(this),
typeable: char.nodeType === Node.TEXT_NODE

@@ -632,7 +583,7 @@ };

];
return __privateMethod(this, _queueAndReturn, queueAndReturn_fn).call(this, itemsToQueue, actionOpts);
return __privateMethod(this, _TypeIt_instances, queueAndReturn_fn).call(this, itemsToQueue, actionOpts);
}
break(actionOpts = {}) {
return __privateMethod(this, _queueAndReturn, queueAndReturn_fn).call(this, {
func: () => __privateMethod(this, _type, type_fn).call(this, createElement("BR")),
return __privateMethod(this, _TypeIt_instances, queueAndReturn_fn).call(this, {
func: () => __privateMethod(this, _TypeIt_instances, type_fn).call(this, createElement("BR")),
typeable: true

@@ -643,3 +594,3 @@ }, actionOpts);

movementArg = handleFunctionalArg(movementArg);
let bookEndQueueItems = __privateMethod(this, _generateTemporaryOptionQueueItems, generateTemporaryOptionQueueItems_fn).call(this, actionOpts);
let bookEndQueueItems = __privateMethod(this, _TypeIt_instances, generateTemporaryOptionQueueItems_fn).call(this, actionOpts);
let { instant, to } = actionOpts;

@@ -650,12 +601,12 @@ let numberOfSteps = countStepsToSelector({

to,
cursorPosition: __privateGet(this, _derivedCursorPosition, derivedCursorPosition_get)
cursorPosition: __privateGet(this, _TypeIt_instances, derivedCursorPosition_get)
});
let directionalStep = numberOfSteps < 0 ? -1 : 1;
this.predictedCursorPosition = __privateGet(this, _derivedCursorPosition, derivedCursorPosition_get) + numberOfSteps;
return __privateMethod(this, _queueAndReturn, queueAndReturn_fn).call(this, [
this.predictedCursorPosition = __privateGet(this, _TypeIt_instances, derivedCursorPosition_get) + numberOfSteps;
return __privateMethod(this, _TypeIt_instances, queueAndReturn_fn).call(this, [
bookEndQueueItems[0],
...duplicate(
{
func: () => __privateMethod(this, _move, move_fn).call(this, directionalStep),
delay: instant ? 0 : __privateMethod(this, _getPace, getPace_fn).call(this),
func: () => __privateMethod(this, _TypeIt_instances, move_fn).call(this, directionalStep),
delay: instant ? 0 : __privateMethod(this, _TypeIt_instances, getPace_fn).call(this),
cursorable: true

@@ -669,16 +620,16 @@ },

exec(func, actionOpts = {}) {
let bookEndQueueItems = __privateMethod(this, _generateTemporaryOptionQueueItems, generateTemporaryOptionQueueItems_fn).call(this, actionOpts);
return __privateMethod(this, _queueAndReturn, queueAndReturn_fn).call(this, [bookEndQueueItems[0], { func: () => func(this) }, bookEndQueueItems[1]], actionOpts);
let bookEndQueueItems = __privateMethod(this, _TypeIt_instances, generateTemporaryOptionQueueItems_fn).call(this, actionOpts);
return __privateMethod(this, _TypeIt_instances, queueAndReturn_fn).call(this, [bookEndQueueItems[0], { func: () => func(this) }, bookEndQueueItems[1]], actionOpts);
}
options(opts, actionOpts = {}) {
opts = handleFunctionalArg(opts);
__privateMethod(this, _updateOptions, updateOptions_fn).call(this, opts);
return __privateMethod(this, _queueAndReturn, queueAndReturn_fn).call(this, {}, actionOpts);
__privateMethod(this, _TypeIt_instances, updateOptions_fn).call(this, opts);
return __privateMethod(this, _TypeIt_instances, queueAndReturn_fn).call(this, {}, actionOpts);
}
pause(milliseconds, actionOpts = {}) {
return __privateMethod(this, _queueAndReturn, queueAndReturn_fn).call(this, { delay: handleFunctionalArg(milliseconds) }, actionOpts);
return __privateMethod(this, _TypeIt_instances, queueAndReturn_fn).call(this, { delay: handleFunctionalArg(milliseconds) }, actionOpts);
}
delete(numCharacters = null, actionOpts = {}) {
numCharacters = handleFunctionalArg(numCharacters);
let bookEndQueueItems = __privateMethod(this, _generateTemporaryOptionQueueItems, generateTemporaryOptionQueueItems_fn).call(this, actionOpts);
let bookEndQueueItems = __privateMethod(this, _TypeIt_instances, generateTemporaryOptionQueueItems_fn).call(this, actionOpts);
let num = numCharacters;

@@ -697,12 +648,12 @@ let { instant, to } = actionOpts;

selector: num,
cursorPosition: __privateGet(this, _derivedCursorPosition, derivedCursorPosition_get),
cursorPosition: __privateGet(this, _TypeIt_instances, derivedCursorPosition_get),
to
});
})();
return __privateMethod(this, _queueAndReturn, queueAndReturn_fn).call(this, [
return __privateMethod(this, _TypeIt_instances, queueAndReturn_fn).call(this, [
bookEndQueueItems[0],
...duplicate(
{
func: __privateMethod(this, _delete, delete_fn).bind(this),
delay: instant ? 0 : __privateMethod(this, _getPace, getPace_fn).call(this, 1),
func: __privateMethod(this, _TypeIt_instances, delete_fn).bind(this),
delay: instant ? 0 : __privateMethod(this, _TypeIt_instances, getPace_fn).call(this, 1),
deletable: true

@@ -729,4 +680,4 @@ },

}) {
__privateMethod(this, _attachCursor, attachCursor_fn).call(this);
__privateMethod(this, _fire, fire_fn).call(this, false).then(cb);
__privateMethod(this, _TypeIt_instances, attachCursor_fn).call(this);
__privateMethod(this, _TypeIt_instances, fire_fn).call(this, false).then(cb);
return this;

@@ -741,3 +692,3 @@ }

updateOptions(options) {
return __privateMethod(this, _updateOptions, updateOptions_fn).call(this, options);
return __privateMethod(this, _TypeIt_instances, updateOptions_fn).call(this, options);
}

@@ -748,12 +699,12 @@ getElement() {

empty(actionOpts = {}) {
return __privateMethod(this, _queueAndReturn, queueAndReturn_fn).call(this, { func: __privateMethod(this, _empty, empty_fn).bind(this) }, actionOpts);
return __privateMethod(this, _TypeIt_instances, queueAndReturn_fn).call(this, { func: __privateMethod(this, _TypeIt_instances, empty_fn).bind(this) }, actionOpts);
}
}, _empty = new WeakSet(), empty_fn = async function() {
if (__privateMethod(this, _elementIsInput, elementIsInput_fn).call(this)) {
}, _TypeIt_instances = new WeakSet(), empty_fn = async function() {
if (__privateMethod(this, _TypeIt_instances, elementIsInput_fn).call(this)) {
this.element.value = "";
return;
}
__privateGet(this, _allChars, allChars_get).forEach(__privateMethod(this, _removeNode, removeNode_fn).bind(this));
__privateGet(this, _TypeIt_instances, allChars_get).forEach(__privateMethod(this, _TypeIt_instances, removeNode_fn).bind(this));
return;
}, _fire = new WeakSet(), fire_fn = async function(remember = true) {
}, fire_fn = async function(remember = true) {
this.statuses.started = true;

@@ -767,9 +718,10 @@ let cleanUp = (qKey) => {

let [queueKey, queueItem] = queueItems[index];
if (queueItem.done)
continue;
if (!queueItem.deletable || queueItem.deletable && __privateGet(this, _allChars, allChars_get).length) {
let newIndex = await __privateMethod(this, _fireItemWithContext, fireItemWithContext_fn).call(this, index, queueItems);
Array(newIndex - index).fill(index + 1).map((x, y) => x + y).forEach((i) => {
let [key] = queueItems[i];
cleanUp(key);
if (queueItem.done) continue;
if (!queueItem.deletable || queueItem.deletable && __privateGet(this, _TypeIt_instances, allChars_get).length) {
let newIndex = await __privateMethod(this, _TypeIt_instances, fireItemWithContext_fn).call(this, index, queueItems);
cleanUpSkipped({
index,
newIndex,
queueItems,
cleanUp
});

@@ -789,5 +741,5 @@ index = newIndex;

let delay = this.opts.loopDelay;
__privateMethod(this, _wait, wait_fn).call(this, async () => {
await __privateMethod(this, _prepLoop, prepLoop_fn).call(this, delay[0]);
__privateMethod(this, _fire, fire_fn).call(this);
__privateMethod(this, _TypeIt_instances, wait_fn).call(this, async () => {
await __privateMethod(this, _TypeIt_instances, prepLoop_fn).call(this, delay[0]);
__privateMethod(this, _TypeIt_instances, fire_fn).call(this);
}, delay[1]);

@@ -797,18 +749,18 @@ } catch (e) {

return this;
}, _move = new WeakSet(), move_fn = async function(step) {
}, move_fn = async function(step) {
this.cursorPosition = updateCursorPosition(
step,
this.cursorPosition,
__privateGet(this, _allChars, allChars_get)
__privateGet(this, _TypeIt_instances, allChars_get)
);
repositionCursor(this.element, __privateGet(this, _allChars, allChars_get), this.cursorPosition);
}, _prepLoop = new WeakSet(), prepLoop_fn = async function(delay) {
let derivedCursorPosition = __privateGet(this, _derivedCursorPosition, derivedCursorPosition_get);
derivedCursorPosition && await __privateMethod(this, _move, move_fn).call(this, { value: derivedCursorPosition });
let queueItems = __privateGet(this, _allChars, allChars_get).map((c) => {
repositionCursor(this.element, __privateGet(this, _TypeIt_instances, allChars_get), this.cursorPosition);
}, prepLoop_fn = async function(delay) {
let derivedCursorPosition = __privateGet(this, _TypeIt_instances, derivedCursorPosition_get);
derivedCursorPosition && await __privateMethod(this, _TypeIt_instances, move_fn).call(this, { value: derivedCursorPosition });
let queueItems = __privateGet(this, _TypeIt_instances, allChars_get).map((c) => {
return [
Symbol(),
{
func: __privateMethod(this, _delete, delete_fn).bind(this),
delay: __privateMethod(this, _getPace, getPace_fn).call(this, 1),
func: __privateMethod(this, _TypeIt_instances, delete_fn).bind(this),
delay: __privateMethod(this, _TypeIt_instances, getPace_fn).call(this, 1),
deletable: true,

@@ -820,15 +772,15 @@ shouldPauseCursor: () => true

for (let index = 0; index < queueItems.length; index++) {
await __privateMethod(this, _fireItemWithContext, fireItemWithContext_fn).call(this, index, queueItems);
await __privateMethod(this, _TypeIt_instances, fireItemWithContext_fn).call(this, index, queueItems);
}
this.queue.reset();
this.queue.set(0, { delay });
}, _fireItemWithContext = new WeakSet(), fireItemWithContext_fn = function(index, queueItems) {
}, fireItemWithContext_fn = function(index, queueItems) {
return fireItem({
index,
queueItems,
wait: __privateMethod(this, _wait, wait_fn).bind(this),
wait: __privateMethod(this, _TypeIt_instances, wait_fn).bind(this),
cursor: this.cursor,
cursorOptions: this.opts.cursor
});
}, _wait = new WeakSet(), wait_fn = async function(callback, delay, silent = false) {
}, wait_fn = async function(callback, delay, silent = false) {
if (this.statuses.frozen) {

@@ -845,5 +797,5 @@ await new Promise((resolve) => {

silent || await this.opts.afterStep(this);
}, _attachCursor = new WeakSet(), attachCursor_fn = async function() {
!__privateMethod(this, _elementIsInput, elementIsInput_fn).call(this) && this.cursor && this.element.appendChild(this.cursor);
if (__privateGet(this, _shouldRenderCursor, shouldRenderCursor_get)) {
}, attachCursor_fn = async function() {
!__privateMethod(this, _TypeIt_instances, elementIsInput_fn).call(this) && this.cursor && this.element.appendChild(this.cursor);
if (__privateGet(this, _TypeIt_instances, shouldRenderCursor_get)) {
setCursorStyles(this.id, this.element);

@@ -862,19 +814,23 @@ this.cursor.dataset.tiAnimationId = this.id;

}
}, _elementIsInput = new WeakSet(), elementIsInput_fn = function() {
}, elementIsInput_fn = function() {
return isInput(this.element);
}, _queueAndReturn = new WeakSet(), queueAndReturn_fn = function(steps, opts) {
}, queueAndReturn_fn = function(steps, opts) {
this.queue.add(steps);
__privateMethod(this, _maybeAppendPause, maybeAppendPause_fn).call(this, opts);
__privateMethod(this, _TypeIt_instances, maybeAppendPause_fn).call(this, opts);
return this;
}, _maybeAppendPause = new WeakSet(), maybeAppendPause_fn = function(opts = {}) {
}, maybeAppendPause_fn = function(opts = {}) {
let delay = opts.delay;
delay && this.queue.add({ delay });
}, _generateTemporaryOptionQueueItems = new WeakSet(), generateTemporaryOptionQueueItems_fn = function(newOptions = {}) {
}, generateTemporaryOptionQueueItems_fn = function(newOptions = {}) {
return [
{ func: () => __privateMethod(this, _updateOptions, updateOptions_fn).call(this, newOptions) },
{ func: () => __privateMethod(this, _updateOptions, updateOptions_fn).call(this, this.opts) }
{ func: () => __privateMethod(this, _TypeIt_instances, updateOptions_fn).call(this, newOptions) },
{ func: () => __privateMethod(this, _TypeIt_instances, updateOptions_fn).call(this, this.opts) }
];
}, _updateOptions = new WeakSet(), updateOptions_fn = async function(opts) {
}, updateOptions_fn = async function(opts) {
this.opts = merge(this.opts, opts);
}, _generateQueue = new WeakSet(), generateQueue_fn = function() {
}, /**
* Based on provided strings, generate a TypeIt queue
* to be fired for each character in the string.
*/
generateQueue_fn = function() {
let strings = this.opts.strings.filter((string) => !!string);

@@ -886,12 +842,12 @@ strings.forEach((string, index) => {

}
let splitItems = this.opts.breakLines ? [{ func: () => __privateMethod(this, _type, type_fn).call(this, createElement("BR")), typeable: true }] : duplicate(
let splitItems = this.opts.breakLines ? [{ func: () => __privateMethod(this, _TypeIt_instances, type_fn).call(this, createElement("BR")), typeable: true }] : duplicate(
{
func: __privateMethod(this, _delete, delete_fn).bind(this),
delay: __privateMethod(this, _getPace, getPace_fn).call(this, 1)
func: __privateMethod(this, _TypeIt_instances, delete_fn).bind(this),
delay: __privateMethod(this, _TypeIt_instances, getPace_fn).call(this, 1)
},
this.queue.getTypeable().length
);
__privateMethod(this, _addSplitPause, addSplitPause_fn).call(this, splitItems);
__privateMethod(this, _TypeIt_instances, addSplitPause_fn).call(this, splitItems);
});
}, _buildOptions = new WeakMap(), _prependHardcodedStrings = new WeakSet(), prependHardcodedStrings_fn = function(strings) {
}, _buildOptions = new WeakMap(), prependHardcodedStrings_fn = function(strings) {
let existingMarkup = this.element.innerHTML;

@@ -905,9 +861,9 @@ if (!existingMarkup) {

expandTextNodes(this.element);
__privateMethod(this, _addSplitPause, addSplitPause_fn).call(this, duplicate(
__privateMethod(this, _TypeIt_instances, addSplitPause_fn).call(this, duplicate(
{
func: __privateMethod(this, _delete, delete_fn).bind(this),
delay: __privateMethod(this, _getPace, getPace_fn).call(this, 1),
func: __privateMethod(this, _TypeIt_instances, delete_fn).bind(this),
delay: __privateMethod(this, _TypeIt_instances, getPace_fn).call(this, 1),
deletable: true
},
__privateGet(this, _allChars, allChars_get).length
__privateGet(this, _TypeIt_instances, allChars_get).length
));

@@ -917,4 +873,8 @@ return strings;

return splitOnBreak(existingMarkup).concat(strings);
}, _setUpCursor = new WeakSet(), setUpCursor_fn = function() {
if (__privateGet(this, _isInput, isInput_get)) {
}, /**
* Provided it's a non-form element and the options is provided,
* set up the cursor element for the animation.
*/
setUpCursor_fn = function() {
if (__privateGet(this, _TypeIt_instances, isInput_get)) {
return null;

@@ -924,3 +884,3 @@ }

cursor.className = CURSOR_CLASS;
if (!__privateGet(this, _shouldRenderCursor, shouldRenderCursor_get)) {
if (!__privateGet(this, _TypeIt_instances, shouldRenderCursor_get)) {
cursor.style.visibility = "hidden";

@@ -931,26 +891,25 @@ return cursor;

return cursor;
}, _addSplitPause = new WeakSet(), addSplitPause_fn = function(items) {
}, addSplitPause_fn = function(items) {
let delay = this.opts.nextStringDelay;
this.queue.add([{ delay: delay[0] }, ...items, { delay: delay[1] }]);
}, _type = new WeakSet(), type_fn = function(char) {
}, type_fn = function(char) {
insertIntoElement(this.element, char);
}, _delete = new WeakSet(), delete_fn = function() {
if (!__privateGet(this, _allChars, allChars_get).length)
return;
if (__privateGet(this, _isInput, isInput_get)) {
}, delete_fn = function() {
if (!__privateGet(this, _TypeIt_instances, allChars_get).length) return;
if (__privateGet(this, _TypeIt_instances, isInput_get)) {
this.element.value = this.element.value.slice(0, -1);
} else {
__privateMethod(this, _removeNode, removeNode_fn).call(this, __privateGet(this, _allChars, allChars_get)[this.cursorPosition]);
__privateMethod(this, _TypeIt_instances, removeNode_fn).call(this, __privateGet(this, _TypeIt_instances, allChars_get)[this.cursorPosition]);
}
}, _removeNode = new WeakSet(), removeNode_fn = function(node) {
}, removeNode_fn = function(node) {
removeNode(node, this.element);
}, _getPace = new WeakSet(), getPace_fn = function(index = 0) {
}, getPace_fn = function(index = 0) {
return calculatePace(this.opts)[index];
}, _derivedCursorPosition = new WeakSet(), derivedCursorPosition_get = function() {
}, derivedCursorPosition_get = function() {
return this.predictedCursorPosition ?? this.cursorPosition;
}, _isInput = new WeakSet(), isInput_get = function() {
}, isInput_get = function() {
return isInput(this.element);
}, _shouldRenderCursor = new WeakSet(), shouldRenderCursor_get = function() {
return !!this.opts.cursor && !__privateGet(this, _isInput, isInput_get);
}, _allChars = new WeakSet(), allChars_get = function() {
}, shouldRenderCursor_get = function() {
return !!this.opts.cursor && !__privateGet(this, _TypeIt_instances, isInput_get);
}, allChars_get = function() {
return getAllChars(this.element);

@@ -994,4 +953,3 @@ }, _a);

var _a2;
if (!instanceOptions)
return;
if (!instanceOptions) return;
((_a2 = instanceRef.current) == null ? void 0 : _a2.updateOptions(instanceOptions)) || generateNewInstance();

@@ -998,0 +956,0 @@ }, [instanceOptions]);

2

dist/index.umd.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).TypeIt=e(t.React)}(this,(function(t){"use strict";var e,s,i,n,r,a,o,l,h,u,c,d,f,p,m,y,g,w,b,v,S,T,P,k,E,W,C,q,L,N,I,D,M,x,A,O,$,R,H,z,F,B,j,_,V,Q,J,U,X,G,K=Object.defineProperty,Y=(t,e,s)=>(((t,e,s)=>{e in t?K(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s})(t,"symbol"!=typeof e?e+"":e,s),s),Z=(t,e,s)=>{if(!e.has(t))throw TypeError("Cannot "+s)},tt=(t,e,s)=>(Z(t,e,"read from private field"),s?s.call(t):e.get(t)),et=(t,e,s)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,s)},st=(t,e,s)=>(Z(t,e,"access private method"),s);const it=t=>Array.isArray(t),nt=t=>it(t)?t:[t];const rt="data-typeit-id",at="ti-cursor",ot={started:!1,completed:!1,frozen:!1,destroyed:!1},lt={breakLines:!0,cursor:{autoPause:!0,autoPauseDelay:500,animation:{frames:[0,0,1].map((t=>({opacity:t}))),options:{iterations:1/0,easing:"steps(2, start)",fill:"forwards"}}},cursorChar:"|",cursorSpeed:1e3,deleteSpeed:null,html:!0,lifeLike:!0,loop:!1,loopDelay:750,nextStringDelay:750,speed:100,startDelay:250,startDelete:!1,strings:[],waitUntilVisible:!1,beforeString:()=>{},afterString:()=>{},beforeStep:()=>{},afterStep:()=>{},afterComplete:()=>{}},ht=`[${rt}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`,ut=t=>document.createElement(t),ct=t=>document.createTextNode(t),dt=(t,e="")=>{let s=ut("style");s.id=e,s.appendChild(ct(t)),document.head.appendChild(s)},ft=t=>(it(t)||(t=[t/2,t/2]),t),pt=(t,e)=>Math.abs(Math.random()*(t+e-(t-e))+(t-e));let mt=t=>t/2;const yt=t=>Array.from(t);let gt=t=>([...t.childNodes].forEach((t=>{if(t.nodeValue)return[...t.nodeValue].forEach((e=>{t.parentNode.insertBefore(ct(e),t)})),void t.remove();gt(t)})),t);const wt=t=>{let e=document.implementation.createHTMLDocument();return e.body.innerHTML=t,gt(e.body)};function bt(t,e=!1,s=!1){let i,n=t.querySelector(`.${at}`),r=document.createTreeWalker(t,NodeFilter.SHOW_ALL,{acceptNode:t=>{var e,i;if(n&&s){if(null==(e=t.classList)?void 0:e.contains(at))return NodeFilter.FILTER_ACCEPT;if(n.contains(t))return NodeFilter.FILTER_REJECT}return(null==(i=t.classList)?void 0:i.contains(at))?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),a=[];for(;i=r.nextNode();)i.originalParent||(i.originalParent=i.parentNode),a.push(i);return e?a.reverse():a}function vt(t,e=!0){return e?bt(wt(t)):yt(t).map(ct)}const St=t=>Number.isInteger(t),Tt=({queueItems:t,selector:e,cursorPosition:s,to:i})=>{if(St(e))return-1*e;let n=new RegExp("END","i").test(i),r=e?[...t].reverse().findIndex((({char:t})=>{let s=t.parentElement,i=s.matches(e);return!(!n||!i)||i&&s.firstChild.isSameNode(t)})):-1;return r<0&&(r=n?0:t.length-1),r-s+(n?0:1)},Pt=(t,e)=>new Array(e).fill(t);let kt=t=>new Promise((e=>{requestAnimationFrame((async()=>{e(await t())}))})),Et=t=>null==t?void 0:t.getAnimations().find((e=>e.id===t.dataset.tiAnimationId)),Wt=({cursor:t,frames:e,options:s})=>{let i=t.animate(e,s);return i.pause(),i.id=t.dataset.tiAnimationId,kt((()=>{kt((()=>{i.play()}))})),i},Ct=t=>{var e;return null==(e=t.func)?void 0:e.call(null)},qt=async({index:t,queueItems:e,wait:s,cursor:i,cursorOptions:n})=>{let r=e[t][1],a=[],o=t,l=r,h=()=>l&&!l.delay,u=r.shouldPauseCursor()&&n.autoPause;for(;h();)a.push(l),h()&&o++,l=e[o]?e[o][1]:null;if(a.length)return await kt((async()=>{for(let t of a)await Ct(t)})),o-1;let c,d=Et(i);return d&&(c={...d.effect.getComputedTiming(),delay:u?n.autoPauseDelay:0}),await s((async()=>{d&&u&&d.cancel(),await kt((()=>{Ct(r)}))}),r.delay),await(({cursor:t,options:e,cursorOptions:s})=>{if(!t||!s)return;let i,n=Et(t);n&&(e.delay=n.effect.getComputedTiming().delay,i=n.currentTime,n.cancel());let r=Wt({cursor:t,frames:s.animation.frames,options:e});return i&&(r.currentTime=i),r})({cursor:i,options:c,cursorOptions:n}),t};const Lt=t=>"value"in t;let Nt=t=>"function"==typeof t?t():t,It=(t,e=document,s=!1)=>e["querySelector"+(s?"All":"")](t);const Dt=(t,e)=>Object.assign({},t,e);let Mt={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"",transform:"translateX(-.125em)"};let xt=(G=class{constructor(t,s={}){var n;et(this,e),et(this,i),et(this,r),et(this,o),et(this,h),et(this,c),et(this,f),et(this,m),et(this,g),et(this,b),et(this,S),et(this,P),et(this,E),et(this,q),et(this,N),et(this,D),et(this,x),et(this,O),et(this,R),et(this,z),et(this,B),et(this,_),et(this,Q),et(this,U),Y(this,"element"),Y(this,"timeouts"),Y(this,"cursorPosition"),Y(this,"predictedCursorPosition"),Y(this,"statuses",{started:!1,completed:!1,frozen:!1,destroyed:!1}),Y(this,"opts"),Y(this,"id"),Y(this,"queue"),Y(this,"cursor"),Y(this,"unfreeze",(()=>{})),Y(this,"is",(function(t){return this.statuses[t]})),et(this,C,(t=>{t.cursor=(t=>{var e,s;if("object"==typeof t){let i={},{frames:n,options:r}=lt.cursor.animation;return i.animation=t.animation||{},i.animation.frames=(null==(e=t.animation)?void 0:e.frames)||n,i.animation.options=Dt(r,(null==(s=t.animation)?void 0:s.options)||{}),i.autoPause=t.autoPause??lt.cursor.autoPause,i.autoPauseDelay=t.autoPauseDelay||lt.cursor.autoPauseDelay,i}return!0===t?lt.cursor:t})(t.cursor??lt.cursor),this.opts.strings=st(this,q,L).call(this,nt(this.opts.strings)),this.opts=Dt(this.opts,{html:!tt(this,_,V)&&this.opts.html,nextStringDelay:ft(this.opts.nextStringDelay),loopDelay:ft(this.opts.loopDelay)})})),this.opts=Dt(lt,s),this.element="string"==typeof(n=t)?It(n):n,this.timeouts=[],this.cursorPosition=0,this.unfreeze=()=>{},this.predictedCursorPosition=null,this.statuses=Dt({},ot),this.id=Math.random().toString().substring(2,9),this.queue=function(t){let e=function(t){return nt(t).forEach((t=>{var e;return n.set(Symbol(null==(e=t.char)?void 0:e.innerText),s({...t}))})),this},s=t=>(t.shouldPauseCursor=function(){return Boolean(this.typeable||this.cursorable||this.deletable)},t),i=()=>Array.from(n.values()),n=new Map;return e(t),{add:e,set:function(t,e){let i=[...n.keys()];n.set(i[t],s(e))},wipe:function(){n=new Map,e(t)},done:(t,e=!1)=>e?n.delete(t):n.get(t).done=!0,reset:function(){n.forEach((t=>delete t.done))},destroy:t=>n.delete(t),getItems:(t=!1)=>t?i():i().filter((t=>!t.done)),getQueue:()=>n,getTypeable:()=>i().filter((t=>t.typeable))}}([{delay:this.opts.startDelay}]),tt(this,C).call(this,s),this.cursor=st(this,N,I).call(this),this.element.dataset.typeitId=this.id,dt(ht),this.opts.strings.length&&st(this,E,W).call(this)}go(){return this.statuses.started?this:(st(this,f,p).call(this),this.opts.waitUntilVisible?(t=this.element,e=st(this,i,n).bind(this),new IntersectionObserver(((s,i)=>{s.forEach((s=>{s.isIntersecting&&(e(),i.unobserve(t))}))}),{threshold:1}).observe(t),this):(st(this,i,n).call(this),this));var t,e}destroy(t=!0){this.timeouts=(this.timeouts.forEach(clearTimeout),[]),Nt(t)&&this.cursor&&st(this,R,H).call(this,this.cursor),this.statuses.destroyed=!0}reset(t){!this.is("destroyed")&&this.destroy(),t?(this.queue.wipe(),t(this)):this.queue.reset(),this.cursorPosition=0;for(let e in this.statuses)this.statuses[e]=!1;return this.element[st(this,m,y).call(this)?"value":"innerHTML"]="",this}type(t,e={}){t=Nt(t);let{instant:s}=e,i=st(this,S,T).call(this,e),n=vt(t,this.opts.html).map((t=>{return{func:()=>st(this,x,A).call(this,t),char:t,delay:s||(e=t,/<(.+)>(.*?)<\/(.+)>/.test(e.outerHTML))?0:st(this,z,F).call(this),typeable:t.nodeType===Node.TEXT_NODE};var e})),r=[i[0],{func:async()=>await this.opts.beforeString(t,this)},...n,{func:async()=>await this.opts.afterString(t,this)},i[1]];return st(this,g,w).call(this,r,e)}break(t={}){return st(this,g,w).call(this,{func:()=>st(this,x,A).call(this,ut("BR")),typeable:!0},t)}move(t,e={}){t=Nt(t);let s=st(this,S,T).call(this,e),{instant:i,to:n}=e,o=Tt({queueItems:this.queue.getTypeable(),selector:null===t?"":t,to:n,cursorPosition:tt(this,B,j)}),l=o<0?-1:1;return this.predictedCursorPosition=tt(this,B,j)+o,st(this,g,w).call(this,[s[0],...Pt({func:()=>st(this,r,a).call(this,l),delay:i?0:st(this,z,F).call(this),cursorable:!0},Math.abs(o)),s[1]],e)}exec(t,e={}){let s=st(this,S,T).call(this,e);return st(this,g,w).call(this,[s[0],{func:()=>t(this)},s[1]],e)}options(t,e={}){return t=Nt(t),st(this,P,k).call(this,t),st(this,g,w).call(this,{},e)}pause(t,e={}){return st(this,g,w).call(this,{delay:Nt(t)},e)}delete(t=null,e={}){t=Nt(t);let s=st(this,S,T).call(this,e),i=t,{instant:n,to:r}=e,a=this.queue.getTypeable(),o=(()=>null===i?a.length:St(i)?i:Tt({queueItems:a,selector:i,cursorPosition:tt(this,B,j),to:r}))();return st(this,g,w).call(this,[s[0],...Pt({func:st(this,O,$).bind(this),delay:n?0:st(this,z,F).call(this,1),deletable:!0},o),s[1]],e)}freeze(){this.statuses.frozen=!0}flush(t=(()=>{})){return st(this,f,p).call(this),st(this,i,n).call(this,!1).then(t),this}getQueue(){return this.queue}getOptions(){return this.opts}updateOptions(t){return st(this,P,k).call(this,t)}getElement(){return this.element}empty(t={}){return st(this,g,w).call(this,{func:st(this,e,s).bind(this)},t)}},e=new WeakSet,s=async function(){st(this,m,y).call(this)?this.element.value="":tt(this,U,X).forEach(st(this,R,H).bind(this))},i=new WeakSet,n=async function(t=!0){this.statuses.started=!0;let e=e=>{this.queue.done(e,!t)};try{let s=[...this.queue.getQueue()];for(let t=0;t<s.length;t++){let[i,n]=s[t];if(!n.done){if(!n.deletable||n.deletable&&tt(this,U,X).length){let i=await st(this,h,u).call(this,t,s);Array(i-t).fill(t+1).map(((t,e)=>t+e)).forEach((t=>{let[i]=s[t];e(i)})),t=i}e(i)}}if(!t)return this;if(this.statuses.completed=!0,await this.opts.afterComplete(this),!this.opts.loop)throw"";let r=this.opts.loopDelay;st(this,c,d).call(this,(async()=>{await st(this,o,l).call(this,r[0]),st(this,i,n).call(this)}),r[1])}catch(s){}return this},r=new WeakSet,a=async function(t){var e,s,i;this.cursorPosition=(e=t,s=this.cursorPosition,i=tt(this,U,X),Math.min(Math.max(s+e,0),i.length)),((t,e,s)=>{let i=e[s-1],n=It(`.${at}`,t);(t=(null==i?void 0:i.parentNode)||t).insertBefore(n,i||null)})(this.element,tt(this,U,X),this.cursorPosition)},o=new WeakSet,l=async function(t){let e=tt(this,B,j);e&&await st(this,r,a).call(this,{value:e});let s=tt(this,U,X).map((t=>[Symbol(),{func:st(this,O,$).bind(this),delay:st(this,z,F).call(this,1),deletable:!0,shouldPauseCursor:()=>!0}]));for(let i=0;i<s.length;i++)await st(this,h,u).call(this,i,s);this.queue.reset(),this.queue.set(0,{delay:t})},h=new WeakSet,u=function(t,e){return qt({index:t,queueItems:e,wait:st(this,c,d).bind(this),cursor:this.cursor,cursorOptions:this.opts.cursor})},c=new WeakSet,d=async function(t,e,s=!1){this.statuses.frozen&&await new Promise((t=>{this.unfreeze=()=>{this.statuses.frozen=!1,t()}})),s||await this.opts.beforeStep(this),await((t,e,s)=>new Promise((i=>{s.push(setTimeout((async()=>{await t(),i()}),e||0))})))(t,e,this.timeouts),s||await this.opts.afterStep(this)},f=new WeakSet,p=async function(){if(!st(this,m,y).call(this)&&this.cursor&&this.element.appendChild(this.cursor),tt(this,Q,J)){((t,e)=>{let s=`[${rt}='${t}'] .${at}`,i=getComputedStyle(e),n=Object.entries(Mt).reduce(((t,[e,s])=>`${t} ${e}: var(--ti-cursor-${e}, ${s||i[e]});`),"");dt(`${s} { display: inline-block; width: 0; ${n} }`,t)})(this.id,this.element),this.cursor.dataset.tiAnimationId=this.id;let{animation:t}=this.opts.cursor,{frames:e,options:s}=t;Wt({frames:e,cursor:this.cursor,options:{duration:this.opts.cursorSpeed,...s}})}},m=new WeakSet,y=function(){return Lt(this.element)},g=new WeakSet,w=function(t,e){return this.queue.add(t),st(this,b,v).call(this,e),this},b=new WeakSet,v=function(t={}){let e=t.delay;e&&this.queue.add({delay:e})},S=new WeakSet,T=function(t={}){return[{func:()=>st(this,P,k).call(this,t)},{func:()=>st(this,P,k).call(this,this.opts)}]},P=new WeakSet,k=async function(t){this.opts=Dt(this.opts,t)},E=new WeakSet,W=function(){let t=this.opts.strings.filter((t=>!!t));t.forEach(((e,s)=>{if(this.type(e),s+1===t.length)return;let i=this.opts.breakLines?[{func:()=>st(this,x,A).call(this,ut("BR")),typeable:!0}]:Pt({func:st(this,O,$).bind(this),delay:st(this,z,F).call(this,1)},this.queue.getTypeable().length);st(this,D,M).call(this,i)}))},C=new WeakMap,q=new WeakSet,L=function(t){let e=this.element.innerHTML;return e?(this.element.innerHTML="",this.opts.startDelete?(this.element.innerHTML=e,gt(this.element),st(this,D,M).call(this,Pt({func:st(this,O,$).bind(this),delay:st(this,z,F).call(this,1),deletable:!0},tt(this,U,X).length)),t):(s=e,s.replace(/<!--(.+?)-->/g,"").trim().split(/<br(?:\s*?)(?:\/)?>/)).concat(t)):t;var s},N=new WeakSet,I=function(){if(tt(this,_,V))return null;let t=ut("span");return t.className=at,tt(this,Q,J)?(t.innerHTML=wt(this.opts.cursorChar).innerHTML,t):(t.style.visibility="hidden",t)},D=new WeakSet,M=function(t){let e=this.opts.nextStringDelay;this.queue.add([{delay:e[0]},...t,{delay:e[1]}])},x=new WeakSet,A=function(t){((t,e)=>{if(Lt(t))return void(t.value=`${t.value}${e.textContent}`);e.innerHTML="";let s=(i=e.originalParent,/body/i.test(null==i?void 0:i.tagName)?t:e.originalParent||t);var i;s.insertBefore(e,It("."+at,s)||null)})(this.element,t)},O=new WeakSet,$=function(){tt(this,U,X).length&&(tt(this,_,V)?this.element.value=this.element.value.slice(0,-1):st(this,R,H).call(this,tt(this,U,X)[this.cursorPosition]))},R=new WeakSet,H=function(t){((t,e)=>{if(!t)return;let s=t.parentNode;(s.childNodes.length>1||s.isSameNode(e)?t:s).remove()})(t,this.element)},z=new WeakSet,F=function(t=0){return function(t){let{speed:e,deleteSpeed:s,lifeLike:i}=t;return s=null!==s?s:e/3,i?[pt(e,mt(e)),pt(s,mt(s))]:[e,s]}(this.opts)[t]},B=new WeakSet,j=function(){return this.predictedCursorPosition??this.cursorPosition},_=new WeakSet,V=function(){return Lt(this.element)},Q=new WeakSet,J=function(){return!!this.opts.cursor&&!tt(this,_,V)},U=new WeakSet,X=function(){return t=this.element,Lt(t)?yt(t.value):bt(t,!0).filter((t=>!(t.childNodes.length>0)));var t},G);const At=t.forwardRef(((e,s)=>{const{as:i}=e;return t.createElement(i,{ref:s,...e})})),Ot={};return({as:e="span",options:s=Ot,children:i=null,getBeforeInit:n=(t=>t),getAfterInit:r=(t=>t),...a})=>{const o=t.useRef(null),l=t.useRef(null),[h,u]=t.useState(!0),[c,d]=t.useState(null);return t.useEffect((()=>{!function(){const t=Object.assign({},s);i&&o.current&&(t.strings=o.current.innerHTML),d(t)}(),u(!1)}),[s]),t.useEffect((()=>{var t;c&&((null==(t=l.current)?void 0:t.updateOptions(c))||(l.current=new xt(o.current,c),l.current=n(l.current),l.current.go(),l.current=r(l.current)))}),[c]),t.useEffect((()=>()=>{var t;return null==(t=l.current)?void 0:t.destroy()}),[]),t.createElement(At,{ref:o,as:e,children:h?i:null,style:{opacity:h?0:1},...a})}}));
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).TypeIt=e(t.React)}(this,(function(t){"use strict";var e,s,i,n,r,o,a,l,u,h,c,d,f,p,m,y,g,b,v,w,T,P,E,S,C,q,I,L=Object.defineProperty,N=t=>{throw TypeError(t)},x=(t,e,s)=>((t,e,s)=>e in t?L(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s)(t,"symbol"!=typeof e?e+"":e,s),D=(t,e,s)=>e.has(t)||N("Cannot "+s),M=(t,e,s)=>(D(t,e,"read from private field"),s?s.call(t):e.get(t)),A=(t,e,s)=>e.has(t)?N("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),O=(t,e,s)=>(D(t,e,"access private method"),s);const $=t=>Array.isArray(t),R=t=>$(t)?t:[t];const k="data-typeit-id",H="ti-cursor",z={started:!1,completed:!1,frozen:!1,destroyed:!1},F={breakLines:!0,cursor:{autoPause:!0,autoPauseDelay:500,animation:{frames:[0,0,1].map((t=>({opacity:t}))),options:{iterations:1/0,easing:"steps(2, start)",fill:"forwards"}}},cursorChar:"|",cursorSpeed:1e3,deleteSpeed:null,html:!0,lifeLike:!0,loop:!1,loopDelay:750,nextStringDelay:750,speed:100,startDelay:250,startDelete:!1,strings:[],waitUntilVisible:!1,beforeString:()=>{},afterString:()=>{},beforeStep:()=>{},afterStep:()=>{},afterComplete:()=>{}},B=`[${k}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`,j=t=>document.createElement(t),_=t=>document.createTextNode(t),W=(t,e="")=>{let s=j("style");s.id=e,s.appendChild(_(t)),document.head.appendChild(s)},U=t=>($(t)||(t=[t/2,t/2]),t),V=(t,e)=>Math.abs(Math.random()*(t+e-(t-e))+(t-e));let Q=t=>t/2;const J=t=>Array.from(t);let X=t=>([...t.childNodes].forEach((t=>{if(t.nodeValue)return[...t.nodeValue].forEach((e=>{t.parentNode.insertBefore(_(e),t)})),void t.remove();X(t)})),t);const G=t=>{let e=document.implementation.createHTMLDocument();return e.body.innerHTML=t,X(e.body)};function K(t,e=!1,s=!1){let i,n=t.querySelector(`.${H}`),r=document.createTreeWalker(t,NodeFilter.SHOW_ALL,{acceptNode:t=>{var e,i;if(n&&s){if(null==(e=t.classList)?void 0:e.contains(H))return NodeFilter.FILTER_ACCEPT;if(n.contains(t))return NodeFilter.FILTER_REJECT}return(null==(i=t.classList)?void 0:i.contains(H))?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),o=[];for(;i=r.nextNode();)i.originalParent||(i.originalParent=i.parentNode),o.push(i);return e?o.reverse():o}function Y(t,e=!0){return e?K(G(t)):J(t).map(_)}const Z=({index:t,newIndex:e,queueItems:s,cleanUp:i})=>{for(let n=t+1;n<e+1;n++)i(s[n][0])},tt=t=>Number.isInteger(t),et=({queueItems:t,selector:e,cursorPosition:s,to:i})=>{if(tt(e))return-1*e;let n=new RegExp("END","i").test(i),r=e?[...t].reverse().findIndex((({char:t})=>{let s=t.parentElement,i=s.matches(e);return!(!n||!i)||i&&s.firstChild.isSameNode(t)})):-1;return r<0&&(r=n?0:t.length-1),r-s+(n?0:1)},st=(t,e)=>new Array(e).fill(t);let it=t=>new Promise((e=>{requestAnimationFrame((async()=>{e(await t())}))})),nt=t=>null==t?void 0:t.getAnimations().find((e=>e.id===t.dataset.tiAnimationId)),rt=({cursor:t,frames:e,options:s})=>{let i=t.animate(e,s);return i.pause(),i.id=t.dataset.tiAnimationId,it((()=>{it((()=>{i.play()}))})),i},ot=t=>{var e;return null==(e=t.func)?void 0:e.call(null)},at=async({index:t,queueItems:e,wait:s,cursor:i,cursorOptions:n})=>{let r=e[t][1],o=[],a=t,l=r,u=()=>l&&!l.delay,h=r.shouldPauseCursor()&&n.autoPause;for(;u();)o.push(l),u()&&a++,l=e[a]?e[a][1]:null;if(o.length)return await it((async()=>{for(let t of o)await ot(t)})),a-1;let c,d=nt(i);return d&&(c={...d.effect.getComputedTiming(),delay:h?n.autoPauseDelay:0}),await s((async()=>{d&&h&&d.cancel(),await it((()=>{ot(r)}))}),r.delay),await(({cursor:t,options:e,cursorOptions:s})=>{if(!t||!s)return;let i,n=nt(t);n&&(e.delay=n.effect.getComputedTiming().delay,i=n.currentTime,n.cancel());let r=rt({cursor:t,frames:s.animation.frames,options:e});return i&&(r.currentTime=i),r})({cursor:i,options:c,cursorOptions:n}),t};const lt=t=>"value"in t;let ut=t=>"function"==typeof t?t():t,ht=(t,e=document,s=!1)=>e["querySelector"+(s?"All":"")](t);const ct=(t,e)=>Object.assign({},t,e);let dt={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"",transform:"translateX(-.125em)"};let ft=(I=class{constructor(t,s={}){var i;A(this,e),x(this,"element"),x(this,"timeouts"),x(this,"cursorPosition"),x(this,"predictedCursorPosition"),x(this,"statuses",{started:!1,completed:!1,frozen:!1,destroyed:!1}),x(this,"opts"),x(this,"id"),x(this,"queue"),x(this,"cursor"),x(this,"unfreeze",(()=>{})),x(this,"is",(function(t){return this.statuses[t]})),A(this,m,(t=>{t.cursor=(t=>{var e,s;if("object"==typeof t){let i={},{frames:n,options:r}=F.cursor.animation;return i.animation=t.animation||{},i.animation.frames=(null==(e=t.animation)?void 0:e.frames)||n,i.animation.options=ct(r,(null==(s=t.animation)?void 0:s.options)||{}),i.autoPause=t.autoPause??F.cursor.autoPause,i.autoPauseDelay=t.autoPauseDelay||F.cursor.autoPauseDelay,i}return!0===t?F.cursor:t})(t.cursor??F.cursor),this.opts.strings=O(this,e,y).call(this,R(this.opts.strings)),this.opts=ct(this.opts,{html:!M(this,e,S)&&this.opts.html,nextStringDelay:U(this.opts.nextStringDelay),loopDelay:U(this.opts.loopDelay)})})),this.opts=ct(F,s),this.element="string"==typeof(i=t)?ht(i):i,this.timeouts=[],this.cursorPosition=0,this.unfreeze=()=>{},this.predictedCursorPosition=null,this.statuses=ct({},z),this.id=Math.random().toString().substring(2,9),this.queue=function(t){let e=function(t){return R(t).forEach((t=>{var e;return n.set(Symbol(null==(e=t.char)?void 0:e.innerText),s({...t}))})),this},s=t=>(t.shouldPauseCursor=function(){return Boolean(this.typeable||this.cursorable||this.deletable)},t),i=()=>Array.from(n.values()),n=new Map;return e(t),{add:e,set:function(t,e){let i=[...n.keys()];n.set(i[t],s(e))},wipe:function(){n=new Map,e(t)},done:(t,e=!1)=>e?n.delete(t):n.get(t).done=!0,reset:function(){n.forEach((t=>delete t.done))},destroy:t=>n.delete(t),getItems:(t=!1)=>t?i():i().filter((t=>!t.done)),getQueue:()=>n,getTypeable:()=>i().filter((t=>t.typeable))}}([{delay:this.opts.startDelay}]),M(this,m).call(this,s),this.cursor=O(this,e,g).call(this),this.element.dataset.typeitId=this.id,W(B),this.opts.strings.length&&O(this,e,p).call(this)}go(){return this.statuses.started?this:(O(this,e,l).call(this),this.opts.waitUntilVisible?(t=this.element,s=O(this,e,i).bind(this),new IntersectionObserver(((e,i)=>{e.forEach((e=>{e.isIntersecting&&(s(),i.unobserve(t))}))}),{threshold:1}).observe(t),this):(O(this,e,i).call(this),this));var t,s}destroy(t=!0){this.timeouts=(this.timeouts.forEach(clearTimeout),[]),ut(t)&&this.cursor&&O(this,e,T).call(this,this.cursor),this.statuses.destroyed=!0}reset(t){!this.is("destroyed")&&this.destroy(),t?(this.queue.wipe(),t(this)):this.queue.reset(),this.cursorPosition=0;for(let e in this.statuses)this.statuses[e]=!1;return this.element[O(this,e,u).call(this)?"value":"innerHTML"]="",this}type(t,s={}){t=ut(t);let{instant:i}=s,n=O(this,e,d).call(this,s),r=Y(t,this.opts.html).map((t=>{return{func:()=>O(this,e,v).call(this,t),char:t,delay:i||(s=t,/<(.+)>(.*?)<\/(.+)>/.test(s.outerHTML))?0:O(this,e,P).call(this),typeable:t.nodeType===Node.TEXT_NODE};var s})),o=[n[0],{func:async()=>await this.opts.beforeString(t,this)},...r,{func:async()=>await this.opts.afterString(t,this)},n[1]];return O(this,e,h).call(this,o,s)}break(t={}){return O(this,e,h).call(this,{func:()=>O(this,e,v).call(this,j("BR")),typeable:!0},t)}move(t,s={}){t=ut(t);let i=O(this,e,d).call(this,s),{instant:r,to:o}=s,a=et({queueItems:this.queue.getTypeable(),selector:null===t?"":t,to:o,cursorPosition:M(this,e,E)}),l=a<0?-1:1;return this.predictedCursorPosition=M(this,e,E)+a,O(this,e,h).call(this,[i[0],...st({func:()=>O(this,e,n).call(this,l),delay:r?0:O(this,e,P).call(this),cursorable:!0},Math.abs(a)),i[1]],s)}exec(t,s={}){let i=O(this,e,d).call(this,s);return O(this,e,h).call(this,[i[0],{func:()=>t(this)},i[1]],s)}options(t,s={}){return t=ut(t),O(this,e,f).call(this,t),O(this,e,h).call(this,{},s)}pause(t,s={}){return O(this,e,h).call(this,{delay:ut(t)},s)}delete(t=null,s={}){t=ut(t);let i=O(this,e,d).call(this,s),n=t,{instant:r,to:o}=s,a=this.queue.getTypeable(),l=(()=>null===n?a.length:tt(n)?n:et({queueItems:a,selector:n,cursorPosition:M(this,e,E),to:o}))();return O(this,e,h).call(this,[i[0],...st({func:O(this,e,w).bind(this),delay:r?0:O(this,e,P).call(this,1),deletable:!0},l),i[1]],s)}freeze(){this.statuses.frozen=!0}flush(t=()=>{}){return O(this,e,l).call(this),O(this,e,i).call(this,!1).then(t),this}getQueue(){return this.queue}getOptions(){return this.opts}updateOptions(t){return O(this,e,f).call(this,t)}getElement(){return this.element}empty(t={}){return O(this,e,h).call(this,{func:O(this,e,s).bind(this)},t)}},e=new WeakSet,s=async function(){O(this,e,u).call(this)?this.element.value="":M(this,e,q).forEach(O(this,e,T).bind(this))},i=async function(t=!0){this.statuses.started=!0;let s=e=>{this.queue.done(e,!t)};try{let n=[...this.queue.getQueue()];for(let t=0;t<n.length;t++){let[i,r]=n[t];if(!r.done){if(!r.deletable||r.deletable&&M(this,e,q).length){let i=await O(this,e,o).call(this,t,n);Z({index:t,newIndex:i,queueItems:n,cleanUp:s}),t=i}s(i)}}if(!t)return this;if(this.statuses.completed=!0,await this.opts.afterComplete(this),!this.opts.loop)throw"";let l=this.opts.loopDelay;O(this,e,a).call(this,(async()=>{await O(this,e,r).call(this,l[0]),O(this,e,i).call(this)}),l[1])}catch(n){}return this},n=async function(t){var s,i,n;this.cursorPosition=(s=t,i=this.cursorPosition,n=M(this,e,q),Math.min(Math.max(i+s,0),n.length)),((t,e,s)=>{let i=e[s-1],n=ht(`.${H}`,t);(t=(null==i?void 0:i.parentNode)||t).insertBefore(n,i||null)})(this.element,M(this,e,q),this.cursorPosition)},r=async function(t){let s=M(this,e,E);s&&await O(this,e,n).call(this,{value:s});let i=M(this,e,q).map((t=>[Symbol(),{func:O(this,e,w).bind(this),delay:O(this,e,P).call(this,1),deletable:!0,shouldPauseCursor:()=>!0}]));for(let n=0;n<i.length;n++)await O(this,e,o).call(this,n,i);this.queue.reset(),this.queue.set(0,{delay:t})},o=function(t,s){return at({index:t,queueItems:s,wait:O(this,e,a).bind(this),cursor:this.cursor,cursorOptions:this.opts.cursor})},a=async function(t,e,s=!1){this.statuses.frozen&&await new Promise((t=>{this.unfreeze=()=>{this.statuses.frozen=!1,t()}})),s||await this.opts.beforeStep(this),await((t,e,s)=>new Promise((i=>{s.push(setTimeout((async()=>{await t(),i()}),e||0))})))(t,e,this.timeouts),s||await this.opts.afterStep(this)},l=async function(){if(!O(this,e,u).call(this)&&this.cursor&&this.element.appendChild(this.cursor),M(this,e,C)){((t,e)=>{let s=`[${k}='${t}'] .${H}`,i=getComputedStyle(e),n=Object.entries(dt).reduce(((t,[e,s])=>`${t} ${e}: var(--ti-cursor-${e}, ${s||i[e]});`),"");W(`${s} { display: inline-block; width: 0; ${n} }`,t)})(this.id,this.element),this.cursor.dataset.tiAnimationId=this.id;let{animation:t}=this.opts.cursor,{frames:e,options:s}=t;rt({frames:e,cursor:this.cursor,options:{duration:this.opts.cursorSpeed,...s}})}},u=function(){return lt(this.element)},h=function(t,s){return this.queue.add(t),O(this,e,c).call(this,s),this},c=function(t={}){let e=t.delay;e&&this.queue.add({delay:e})},d=function(t={}){return[{func:()=>O(this,e,f).call(this,t)},{func:()=>O(this,e,f).call(this,this.opts)}]},f=async function(t){this.opts=ct(this.opts,t)},p=function(){let t=this.opts.strings.filter((t=>!!t));t.forEach(((s,i)=>{if(this.type(s),i+1===t.length)return;let n=this.opts.breakLines?[{func:()=>O(this,e,v).call(this,j("BR")),typeable:!0}]:st({func:O(this,e,w).bind(this),delay:O(this,e,P).call(this,1)},this.queue.getTypeable().length);O(this,e,b).call(this,n)}))},m=new WeakMap,y=function(t){let s=this.element.innerHTML;return s?(this.element.innerHTML="",this.opts.startDelete?(this.element.innerHTML=s,X(this.element),O(this,e,b).call(this,st({func:O(this,e,w).bind(this),delay:O(this,e,P).call(this,1),deletable:!0},M(this,e,q).length)),t):(i=s,i.replace(/<!--(.+?)-->/g,"").trim().split(/<br(?:\s*?)(?:\/)?>/)).concat(t)):t;var i},g=function(){if(M(this,e,S))return null;let t=j("span");return t.className=H,M(this,e,C)?(t.innerHTML=G(this.opts.cursorChar).innerHTML,t):(t.style.visibility="hidden",t)},b=function(t){let e=this.opts.nextStringDelay;this.queue.add([{delay:e[0]},...t,{delay:e[1]}])},v=function(t){((t,e)=>{if(lt(t))return void(t.value=`${t.value}${e.textContent}`);e.innerHTML="";let s=(i=e.originalParent,/body/i.test(null==i?void 0:i.tagName)?t:e.originalParent||t);var i;s.insertBefore(e,ht("."+H,s)||null)})(this.element,t)},w=function(){M(this,e,q).length&&(M(this,e,S)?this.element.value=this.element.value.slice(0,-1):O(this,e,T).call(this,M(this,e,q)[this.cursorPosition]))},T=function(t){((t,e)=>{if(!t)return;let s=t.parentNode;(s.childNodes.length>1||s.isSameNode(e)?t:s).remove()})(t,this.element)},P=function(t=0){return function(t){let{speed:e,deleteSpeed:s,lifeLike:i}=t;return s=null!==s?s:e/3,i?[V(e,Q(e)),V(s,Q(s))]:[e,s]}(this.opts)[t]},E=function(){return this.predictedCursorPosition??this.cursorPosition},S=function(){return lt(this.element)},C=function(){return!!this.opts.cursor&&!M(this,e,S)},q=function(){return t=this.element,lt(t)?J(t.value):K(t,!0).filter((t=>!(t.childNodes.length>0)));var t},I);const pt=t.forwardRef(((e,s)=>{const{as:i}=e;return t.createElement(i,{ref:s,...e})})),mt={};return({as:e="span",options:s=mt,children:i=null,getBeforeInit:n=t=>t,getAfterInit:r=t=>t,...o})=>{const a=t.useRef(null),l=t.useRef(null),[u,h]=t.useState(!0),[c,d]=t.useState(null);return t.useEffect((()=>{!function(){const t=Object.assign({},s);i&&a.current&&(t.strings=a.current.innerHTML),d(t)}(),h(!1)}),[s]),t.useEffect((()=>{var t;c&&((null==(t=l.current)?void 0:t.updateOptions(c))||(l.current=new ft(a.current,c),l.current=n(l.current),l.current.go(),l.current=r(l.current)))}),[c]),t.useEffect((()=>()=>{var t;return null==(t=l.current)?void 0:t.destroy()}),[]),t.createElement(pt,{ref:a,as:e,children:u?i:null,style:{opacity:u?0:1},...o})}}));

2

dist/setup.d.ts

@@ -1,2 +0,2 @@

import '@testing-library/jest-dom/vitest';
import "@testing-library/jest-dom/vitest";
import "vitest-dom/extend-expect";

26

package.json
{
"name": "typeit-react",
"version": "2.7.1",
"version": "2.7.2",
"description": "React component for the most versatile JavaScript animated typing utility on the planet.",

@@ -41,18 +41,18 @@ "homepage": "https://typeitjs.com",

"dependencies": {
"react": ">=18.2.0",
"react-dom": ">=18.2.0",
"typeit": "^8.8.3"
"react": ">=18.3.1",
"react-dom": ">=18.3.1",
"typeit": "^8.8.4"
},
"devDependencies": {
"@babel/preset-typescript": "^7.23.3",
"@testing-library/jest-dom": "^6.2.0",
"@testing-library/react": "^14.1.2",
"@types/react": "^18.2.47",
"jsdom": "^23.2.0",
"terser": "^5.26.0",
"typescript": "^5.3.3",
"vite": "^5.0.11",
"vitest": "^1.2.0",
"@babel/preset-typescript": "^7.24.7",
"@testing-library/jest-dom": "^6.4.8",
"@testing-library/react": "^16.0.0",
"@types/react": "^18.3.3",
"jsdom": "^24.1.1",
"terser": "^5.31.3",
"typescript": "^5.5.4",
"vite": "^5.3.4",
"vitest": "^2.0.4",
"vitest-dom": "^0.1.1"
}
}

2

src/setup.ts

@@ -1,2 +0,2 @@

import '@testing-library/jest-dom/vitest';
import "@testing-library/jest-dom/vitest";
import { beforeEach } from "vitest";

@@ -3,0 +3,0 @@ import "vitest-dom/extend-expect";

src/index.test.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc