Socket
Socket
Sign inDemoInstall

typeit-react

Package Overview
Dependencies
5
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.3.3 to 2.4.0

404

dist/index.es.js

@@ -36,23 +36,26 @@ var __defProp = Object.defineProperty;

let add = function(steps) {
_queue = _queue.concat(asArray(steps));
asArray(steps).forEach((step) => {
var _a;
return _q.set(Symbol((_a = step.char) == null ? void 0 : _a.innerText), __spreadValues({}, step));
});
return this;
};
let getTypeable = () => rawValues().filter((value) => value.typeable);
let set = function(index, item) {
_queue[index] = item;
let keys = _q.keys();
_q.set(keys[index], item);
};
let reset = function() {
_queue = _queue.map((item) => {
delete item.done;
return item;
});
_q.forEach((item) => delete item.done);
};
let wipe = function() {
_queue = [];
_q = /* @__PURE__ */ new Map();
add(initialItems);
};
let getItems = (all = false) => _queue.filter((i) => all || !i.done);
let markDone = (index) => {
_queue[index].done = true;
};
let _queue = [];
let getQueue = () => _q;
let rawValues = () => Array.from(_q.values());
let destroy = (key) => _q.delete(key);
let getItems = (all = false) => all ? rawValues() : rawValues().filter((i) => !i.done);
let done = (key, shouldDestroy = false) => shouldDestroy ? _q.delete(key) : _q.get(key).done = true;
let _q = /* @__PURE__ */ new Map();
add(initialItems);

@@ -62,14 +65,13 @@ return {

set,
wipe,
reset,
wipe,
destroy,
done,
getItems,
markDone
getQueue,
getTypeable
};
};
var toArray = (val) => {
return Array.from(val);
};
var createTextNode = (content) => {
return document.createTextNode(content);
};
var toArray = (val) => Array.from(val);
var createTextNode = (content) => document.createTextNode(content);
let expandTextNodes = (element) => {

@@ -95,3 +97,2 @@ [...element.childNodes].forEach((child) => {

const CURSOR_CLASS = "ti-cursor";
const START = "START";
const END = "END";

@@ -131,2 +132,3 @@ const DEFAULT_STATUSES = {

};
const PLACEHOLDER_CSS = `[${DATA_ATTRIBUTE}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`;
function walkElementNodes(element, shouldReverse = false) {

@@ -136,3 +138,3 @@ let walker = document.createTreeWalker(element, NodeFilter.SHOW_ALL, {

var _a;
return ((_a = node == null ? void 0 : node.classList) == null ? void 0 : _a.contains(CURSOR_CLASS)) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
return ((_a = node.classList) == null ? void 0 : _a.contains(CURSOR_CLASS)) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
}

@@ -154,5 +156,3 @@ });

}
var createElement = (el) => {
return document.createElement(el);
};
var createElement = (el) => document.createElement(el);
var appendStyleBlock = (styles, id = "") => {

@@ -164,43 +164,2 @@ let styleBlock = createElement("style");

};
let isNumber = (value) => {
return Number.isInteger(value);
};
let select = (selector, element = document, all = false) => {
return element[`querySelector${all ? "All" : ""}`](selector);
};
var isInput = (el) => {
return "value" in el;
};
let getAllChars = (element) => {
if (isInput(element)) {
return toArray(element.value);
}
return walkElementNodes(element, true).filter((c) => !(c.childNodes.length > 0));
};
let calculateStepsToSelector = (selector, element, to = START) => {
let isMovingToLast = new RegExp(END, "i").test(to);
let selectedElement = selector ? select(selector, element) : element;
let selectedElementNodes = walkElementNodes(selectedElement, true);
let selectedElementFirstChild = selectedElementNodes[0];
let selectedElementLastChild = selectedElementNodes[selectedElementNodes.length - 1];
let isMovingToEndOfRootElement = isMovingToLast && !selector;
let childIndex = isMovingToEndOfRootElement ? 0 : getAllChars(element).findIndex((character) => {
return character.isSameNode(isMovingToLast ? selectedElementFirstChild : selectedElementLastChild);
});
if (isMovingToLast)
childIndex--;
return childIndex + 1;
};
var calculateCursorSteps = ({
el,
move,
cursorPos,
to
}) => {
if (isNumber(move)) {
return move * -1;
}
let childIndex = calculateStepsToSelector(move, el, to);
return childIndex - cursorPos;
};
var calculateDelay = (delayArg) => {

@@ -225,7 +184,12 @@ if (!isArray(delayArg)) {

var destroyTimeouts = (timeouts) => {
timeouts.forEach((timeout) => clearTimeout(timeout));
timeouts.forEach(clearTimeout);
return [];
};
var generateHash = () => {
return Math.random().toString().substring(2, 9);
var generateHash = () => Math.random().toString().substring(2, 9);
var isInput = (el) => "value" in el;
let getAllChars = (element) => {
if (isInput(element)) {
return toArray(element.value);
}
return walkElementNodes(element, true).filter((c) => !(c.childNodes.length > 0));
};

@@ -246,2 +210,6 @@ var fireWhenVisible = (element, func) => {

};
var isNumber = (value) => Number.isInteger(value);
let select = (selector, element = document, all = false) => {
return element[`querySelector${all ? "All" : ""}`](selector);
};
let isBodyElement = (node) => (node == null ? void 0 : node.tagName) === "BODY";

@@ -260,5 +228,3 @@ let insertIntoElement = (originalTarget, character) => {

};
var merge = (originalObj, newObj) => {
return Object.assign({}, originalObj, newObj);
};
var merge = (originalObj, newObj) => Object.assign({}, originalObj, newObj);
var removeNode = (node) => {

@@ -280,3 +246,3 @@ if (!node)

}
let isNonVoidElement = (el) => /<(.+)>(.*?)<\/(.+)>/.test(el.outerHTML);
var isNonVoidElement = (el) => /<(.+)>(.*?)<\/(.+)>/.test(el.outerHTML);
let wait = async (callback, delay, timeouts) => {

@@ -288,3 +254,3 @@ return new Promise((resolve) => {

};
timeouts.push(setTimeout(cb, delay));
timeouts.push(setTimeout(cb, delay || 0));
});

@@ -311,3 +277,41 @@ };

};
function TypeIt$1(element, options = {}) {
var duplicate = (value, times) => new Array(times).fill(value);
const countStepsToSelector = ({
queueItems,
selector,
cursorPosition,
to
}) => {
if (isNumber(selector)) {
return selector * -1;
}
let isMovingToEnd = new RegExp(END, "i").test(to);
let selectorIndex = [...queueItems].reverse().findIndex(({ char }) => {
let parentElement = char.parentElement;
let parentMatches = parentElement.matches(selector);
if (isMovingToEnd && parentMatches) {
return true;
}
return parentMatches && parentElement.firstChild.isSameNode(char);
});
if (selectorIndex < 0) {
selectorIndex = isMovingToEnd ? 0 : queueItems.length - 1;
}
let offset = isMovingToEnd ? 0 : 1;
return selectorIndex - cursorPosition + offset;
};
let fireItem = async (queueItem, wait2) => {
let execute = async () => {
var _a;
return (_a = queueItem.func) == null ? void 0 : _a.call(globalThis);
};
if (queueItem.delay) {
await wait2(async () => {
await execute();
}, queueItem.delay);
} else {
await execute();
}
};
const TypeIt$1 = function(element, options = {}) {
let _wait = async (callback, delay, silent = false) => {

@@ -327,10 +331,7 @@ if (_statuses.frozen) {

let _elementIsInput = () => isInput(_element);
let _getPace = (index) => calculatePace(_opts)[index];
let _getPace = (index = 0) => calculatePace(_opts)[index];
let _getAllChars = () => getAllChars(_element);
let _getActionPace = (instant, paceIndex = 0) => {
return instant ? _getPace(paceIndex) : 0;
};
let _maybeAppendPause = (opts = {}) => {
let delay = opts["delay"];
delay && _queue.add(() => _pause(delay));
let delay = opts.delay;
delay && _queue.add({ delay });
};

@@ -344,13 +345,9 @@ let _queueAndReturn = (steps, opts) => {

return [
() => _options(newOptions),
() => _options(_opts)
{ func: () => _options(newOptions) },
{ func: () => _options(_opts) }
];
};
let _addSplitPause = (items) => {
let _addSplitPause = (item) => {
let delay = _opts.nextStringDelay;
_queue.add([
() => _pause(delay[0]),
...items,
() => _pause(delay[1])
]);
_queue.add([{ delay: delay[0] }, item, { delay: delay[1] }]);
};

@@ -371,7 +368,7 @@ let _setUpCursor = () => {

let _attachCursor = async () => {
!_elementIsInput() && _element.appendChild(_cursor);
!_elementIsInput() && _cursor && _element.appendChild(_cursor);
_shouldRenderCursor && setCursorStyles(_id, _opts, _element);
};
let _disableCursorBlink = (shouldDisable) => {
if (_shouldRenderCursor) {
if (_shouldRenderCursor && _cursor) {
_cursor.classList.toggle("disabled", shouldDisable);

@@ -384,14 +381,10 @@ _cursor.classList.toggle("with-delay", !shouldDisable);

strings.forEach((string, index) => {
let chars = maybeChunkStringAsHtml(string, _opts.html);
_queue.add(() => _type({ chars }));
this.type(string);
if (index + 1 === strings.length) {
return;
}
let splitPauseArgs = [
_opts.breakLines ? () => _type({
chars: [createElement("BR")],
silent: true
}) : () => _delete({ num: chars.length })
];
_addSplitPause(splitPauseArgs);
_addSplitPause({
func: _opts.breakLines ? () => _type(createElement("BR")) : _delete,
typeable: !!_opts.breakLines
});
});

@@ -401,5 +394,7 @@ };

_cursorPosition && await _move({ value: _cursorPosition });
for (let _i of _queue.getTypeable()) {
await _wait(_delete, _getPace(1));
}
_queue.reset();
_queue.set(0, () => _pause(delay));
await _delete({ num: null });
_queue.set(0, { delay });
};

@@ -415,5 +410,3 @@ let _maybePrependHardcodedStrings = (strings) => {

expandTextNodes(_element);
_addSplitPause([
() => _delete({ num: null })
]);
_addSplitPause({ func: _delete });
return strings;

@@ -424,11 +417,17 @@ }

};
let _fire = async () => {
let _fire = async (remember = true) => {
_statuses.started = true;
let queueItems = _queue.getItems();
try {
for (let i = 0; i < queueItems.length; i++) {
await queueItems[i]();
_queue.markDone(i);
for (let [queueKey, queueItem] of _queue.getQueue()) {
if (queueItem.done)
continue;
if (queueItem.typeable)
_disableCursorBlink(true);
await fireItem(queueItem, _wait);
_disableCursorBlink(false);
_queue.done(queueKey, !remember);
}
if (!remember) {
return this;
}
_statuses.completed = true;

@@ -448,45 +447,8 @@ await _opts.afterComplete(this);

};
let _pause = (time = 0) => _wait(() => {
}, time);
let _move = async ({
value,
to = START,
instant = false
}) => {
_disableCursorBlink(true);
let numberOfSteps = calculateCursorSteps({
el: _element,
move: value,
cursorPos: _cursorPosition,
to
});
let moveCursor = () => {
_cursorPosition = updateCursorPosition(numberOfSteps < 0 ? -1 : 1, _cursorPosition, _getAllChars());
repositionCursor(_element, _getAllChars(), _cursorPosition);
};
await _wait(async () => {
for (let i = 0; i < Math.abs(numberOfSteps); i++) {
instant ? moveCursor() : await _wait(moveCursor, _getPace(0));
}
}, _getActionPace(instant));
let _move = async (step) => {
_cursorPosition = updateCursorPosition(step, _cursorPosition, _getAllChars());
repositionCursor(_element, _getAllChars(), _cursorPosition);
};
let _type = ({
chars,
silent = false,
instant = false
}) => {
_disableCursorBlink(true);
return _wait(async () => {
let insert = (character) => insertIntoElement(_element, character);
silent || await _opts.beforeString(chars, this);
for (let char of chars) {
instant || isNonVoidElement(char) ? insert(char) : await _wait(() => insert(char), _getPace(0));
}
silent || await _opts.afterString(chars, this);
}, _getActionPace(instant), true);
};
let _options = async (opts) => {
_opts = merge(_opts, opts);
return;
};
let _type = (char) => insertIntoElement(_element, char);
let _options = async (opts) => _opts = merge(_opts, opts);
let _empty = async () => {

@@ -497,48 +459,20 @@ if (_elementIsInput()) {

}
_getAllChars().forEach((n) => {
removeNode(n);
});
_getAllChars().forEach(removeNode);
return;
};
let _delete = async ({
num = null,
instant = false,
to = START
}) => {
_disableCursorBlink(true);
await _wait(async () => {
let rounds = (() => {
if (num === null) {
return _getAllChars().length;
}
if (isNumber(num)) {
return num;
}
return calculateCursorSteps({
el: _element,
move: num,
cursorPos: _cursorPosition,
to
});
})();
let deleteIt = () => {
let allChars = _getAllChars();
if (!allChars.length)
return;
if (_elementIsInput()) {
_element.value = _element.value.slice(0, -1);
} else {
removeNode(allChars[_cursorPosition]);
}
};
for (let i = 0; i < rounds; i++) {
instant ? deleteIt() : await _wait(deleteIt, _getPace(1));
}
}, _getActionPace(instant, 1));
if (num === null && _getAllChars().length - 1 > 0) {
await _delete({ num: null });
let _delete = () => {
let allChars = _getAllChars();
if (!allChars.length)
return;
if (_elementIsInput()) {
_element.value = _element.value.slice(0, -1);
} else {
removeNode(allChars[_cursorPosition]);
}
};
this.break = function(actionOpts) {
return _queueAndReturn(() => _type({ chars: [createElement("BR")], silent: true }), actionOpts);
return _queueAndReturn({
func: () => _type(createElement("BR")),
typeable: true
}, actionOpts);
};

@@ -550,5 +484,23 @@ this.delete = function(numCharacters = null, actionOpts = {}) {

let { instant, to } = actionOpts;
let typeableQueueItems = _queue.getTypeable();
let rounds = (() => {
if (num === null) {
return typeableQueueItems.length;
}
if (isNumber(num)) {
return num;
}
return countStepsToSelector({
queueItems: typeableQueueItems,
selector: num,
cursorPosition: _predictedCursorPosition,
to
});
})();
return _queueAndReturn([
bookEndQueueItems[0],
() => _delete({ num, instant, to }),
...duplicate({
func: _delete,
delay: instant ? 0 : _getPace(1)
}, rounds),
bookEndQueueItems[1]

@@ -558,7 +510,7 @@ ], actionOpts);

this.empty = function(actionOpts = {}) {
return _queueAndReturn(_empty, actionOpts);
return _queueAndReturn({ func: _empty }, actionOpts);
};
this.exec = function(func, actionOpts) {
this.exec = function(func, actionOpts = {}) {
let bookEndQueueItems = _generateTemporaryOptionQueueItems(actionOpts);
return _queueAndReturn([bookEndQueueItems[0], func, bookEndQueueItems[1]], actionOpts);
return _queueAndReturn([bookEndQueueItems[0], { func: () => func(this) }, bookEndQueueItems[1]], actionOpts);
};

@@ -569,28 +521,45 @@ this.move = function(movementArg, actionOpts = {}) {

let { instant, to } = actionOpts;
let moveArgs = {
value: movementArg === null ? "" : movementArg,
let numberOfSteps = countStepsToSelector({
queueItems: _queue.getTypeable(),
selector: movementArg === null ? "" : movementArg,
to,
instant
};
cursorPosition: _cursorPosition
});
let directionalStep = numberOfSteps < 0 ? -1 : 1;
_predictedCursorPosition = _cursorPosition + numberOfSteps;
return _queueAndReturn([
bookEndQueueItems[0],
() => _move(moveArgs),
...duplicate({
func: () => _move(directionalStep),
delay: instant ? 0 : _getPace()
}, Math.abs(numberOfSteps)),
bookEndQueueItems[1]
], actionOpts);
};
this.options = function(opts) {
this.options = function(opts, actionOpts = {}) {
opts = handleFunctionalArg(opts);
return _queueAndReturn(() => _options(opts), opts);
_options(opts);
return _queueAndReturn({}, actionOpts);
};
this.pause = function(milliseconds, actionOpts = {}) {
return _queueAndReturn(() => _pause(handleFunctionalArg(milliseconds)), actionOpts);
return _queueAndReturn({ delay: handleFunctionalArg(milliseconds) }, actionOpts);
};
this.type = function(string, actionOpts = {}) {
string = handleFunctionalArg(string);
let { instant } = actionOpts;
let bookEndQueueItems = _generateTemporaryOptionQueueItems(actionOpts);
let chars = maybeChunkStringAsHtml(string, _opts.html);
let { instant } = actionOpts;
let charsAsQueueItems = chars.map((char) => {
return {
func: () => _type(char),
char,
delay: instant || isNonVoidElement(char) ? 0 : _getPace(),
typeable: char.nodeType === Node.TEXT_NODE
};
});
let itemsToQueue = [
bookEndQueueItems[0],
() => _type({ chars, instant }),
{ func: async () => await _opts.beforeString(string, this) },
...charsAsQueueItems,
{ func: async () => await _opts.afterString(string, this) },
bookEndQueueItems[1]

@@ -605,3 +574,3 @@ ];

_timeouts = destroyTimeouts(_timeouts);
handleFunctionalArg(shouldRemoveCursor) && removeNode(_cursor);
handleFunctionalArg(shouldRemoveCursor) && _cursor && removeNode(_cursor);
_statuses.destroyed = true;

@@ -641,2 +610,8 @@ };

};
this.flush = function(cb = () => {
}) {
_attachCursor();
_fire(false).then(cb);
return this;
};
this.getQueue = () => _queue;

@@ -649,2 +624,3 @@ this.getOptions = () => _opts;

let _cursorPosition = 0;
let _predictedCursorPosition = 0;
let _statuses = merge({}, DEFAULT_STATUSES);

@@ -658,5 +634,11 @@ let _opts = merge(DEFAULT_OPTIONS, options);

let _id = generateHash();
let _queue = Queue([() => _pause(_opts.startDelay)]);
let _queue = Queue([
{
func: () => {
},
delay: _opts.startDelay
}
]);
_element.dataset.typeitId = _id;
appendStyleBlock(`[${DATA_ATTRIBUTE}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`);
appendStyleBlock(PLACEHOLDER_CSS);
let _shouldRenderCursor = _opts.cursor && !_elementIsInput();

@@ -668,3 +650,3 @@ let _cursor = _setUpCursor();

}
}
};
const { useRef, useEffect, useState } = React;

@@ -671,0 +653,0 @@ const defaultProps = {

2

dist/index.umd.js

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

var je=Object.defineProperty;var F=Object.getOwnPropertySymbols;var ge=Object.prototype.hasOwnProperty,Se=Object.prototype.propertyIsEnumerable;var ye=(c,f,y)=>f in c?je(c,f,{enumerable:!0,configurable:!0,writable:!0,value:y}):c[f]=y,be=(c,f)=>{for(var y in f||(f={}))ge.call(f,y)&&ye(c,y,f[y]);if(F)for(var y of F(f))Se.call(f,y)&&ye(c,y,f[y]);return c};var ve=(c,f)=>{var y={};for(var _ in c)ge.call(c,_)&&f.indexOf(_)<0&&(y[_]=c[_]);if(c!=null&&F)for(var _ of F(c))f.indexOf(_)<0&&Se.call(c,_)&&(y[_]=c[_]);return y};(function(c,f){typeof exports=="object"&&typeof module!="undefined"?module.exports=f(require("react")):typeof define=="function"&&define.amd?define(["react"],f):(c=typeof globalThis!="undefined"?globalThis:c||self,c.TypeIt=f(c.React))})(this,function(c){"use strict";function f(e){if(e&&e.__esModule)return e;var r={__proto__:null,[Symbol.toStringTag]:"Module"};return e&&Object.keys(e).forEach(function(n){if(n!=="default"){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}}),r.default=e,Object.freeze(r)}var y=f(c),_=e=>Array.isArray(e),Z=e=>_(e)?e:[e];let _e=function(e){let r=function(u){return g=g.concat(Z(u)),this},n=function(u,S){g[u]=S},i=function(){g=g.map(u=>(delete u.done,u))},a=function(){g=[],r(e)},d=(u=!1)=>g.filter(S=>u||!S.done),b=u=>{g[u].done=!0},g=[];return r(e),{add:r,set:n,reset:i,wipe:a,getItems:d,markDone:b}};var ee=e=>Array.from(e),z=e=>document.createTextNode(e);let Q=e=>([...e.childNodes].forEach(r=>{if(r.nodeValue){[...r.nodeValue].forEach(n=>{r.parentNode.insertBefore(z(n),r)}),r.remove();return}Q(r)}),e);var te=e=>{let r=document.implementation.createHTMLDocument();return r.body.innerHTML=e,Q(r.body)};const re="data-typeit-id",D="ti-cursor",j="START",Te="END",Ee={started:!1,completed:!1,frozen:!1,destroyed:!1},we={breakLines:!0,cursor:!0,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:()=>{}};function U(e,r=!1){let n=document.createTreeWalker(e,NodeFilter.SHOW_ALL,{acceptNode:d=>{var b;return((b=d==null?void 0:d.classList)==null?void 0:b.contains(D))?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),i,a=[];for(;i=n.nextNode();)i.originalParent=i.parentNode,a.push(i);return r?a.reverse():a}function Ie(e){return U(te(e))}function ne(e,r=!0){return r?Ie(e):ee(e).map(z)}var R=e=>document.createElement(e),le=(e,r="")=>{let n=R("style");n.id=r,n.appendChild(z(e)),document.head.appendChild(n)};let ie=e=>Number.isInteger(e),k=(e,r=document,n=!1)=>r[`querySelector${n?"All":""}`](e);var q=e=>"value"in e;let se=e=>q(e)?ee(e.value):U(e,!0).filter(r=>!(r.childNodes.length>0)),Ce=(e,r,n=j)=>{let i=new RegExp(Te,"i").test(n),a=e?k(e,r):r,d=U(a,!0),b=d[0],g=d[d.length-1],S=i&&!e?0:se(r).findIndex(N=>N.isSameNode(i?b:g));return i&&S--,S+1};var oe=({el:e,move:r,cursorPos:n,to:i})=>ie(r)?r*-1:Ce(r,e,i)-n,ue=e=>(_(e)||(e=[e/2,e/2]),e),ae=(e,r)=>Math.abs(Math.random()*(e+r-(e-r))+(e-r));let ce=e=>e/2;function Ne(e){let{speed:r,deleteSpeed:n,lifeLike:i}=e;return n=n!==null?n:r/3,i?[ae(r,ce(r)),ae(n,ce(n))]:[r,n]}var Le=e=>(e.forEach(r=>clearTimeout(r)),[]),Pe=()=>Math.random().toString().substring(2,9),Ae=(e,r)=>{new IntersectionObserver((i,a)=>{i.forEach(d=>{d.isIntersecting&&(r(),a.unobserve(e))})},{threshold:1}).observe(e)};let C=e=>typeof e=="function"?e():e,De=e=>(e==null?void 0:e.tagName)==="BODY",Me=(e,r)=>{if(q(e)){e.value=`${e.value}${r.textContent}`;return}r.innerHTML="";let n=De(r.originalParent)?e:r.originalParent||e;n.insertBefore(r,k("."+D,n)||null)},Re=(e,r,n)=>Math.min(Math.max(r+e,0),n.length);var x=(e,r)=>Object.assign({},e,r),V=e=>{if(!e)return;let r=e.parentNode;(r.childNodes.length>1?e:r).remove()},ke=(e,r,n)=>{let i=r[n-1],a=k(`.${D}`,e);e=(i==null?void 0:i.parentNode)||e,e.insertBefore(a,i||null)};function xe(e){return typeof e=="string"?k(e):e}let $e=e=>/<(.+)>(.*?)<\/(.+)>/.test(e.outerHTML),Oe=async(e,r,n)=>new Promise(i=>{let a=async()=>{await e(),i()};n.push(setTimeout(a,r))}),He={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"","margin-left":"-.125em","margin-right":".125em"},Be=(e,r,n)=>{let a=`${`[${re}='${e}']`} .${D}`,d=getComputedStyle(n),b=Object.entries(He).reduce((g,[u,S])=>`${g} ${u}: var(--ti-cursor-${u}, ${S||d[u]});`,"");le(`@keyframes blink-${e} { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} } ${a} { display: inline; letter-spacing: -1em; ${b} animation: blink-${e} ${r.cursorSpeed/1e3}s infinite; } ${a}.with-delay { animation-delay: 500ms; } ${a}.disabled { animation: none; }`,e)};function Fe(e,r={}){let n=async(t,l,o=!1)=>{w.frozen&&await new Promise(m=>{this.unfreeze=()=>{w.frozen=!1,m()}}),o||await s.beforeStep(this),await Oe(t,l,K),o||await s.afterStep(this)},i=()=>q(p),a=t=>Ne(s)[t],d=()=>se(p),b=(t,l=0)=>t?a(l):0,g=(t={})=>{let l=t.delay;l&&E.add(()=>A(l))},u=(t,l)=>(E.add(t),g(l),this),S=(t={})=>[()=>H(t),()=>H(s)],N=t=>{let l=s.nextStringDelay;E.add([()=>A(l[0]),...t,()=>A(l[1])])},L=()=>{if(i())return;let t=R("span");return t.className=D,X?(t.innerHTML=te(s.cursorChar).innerHTML,t):(t.style.visibility="hidden",t)},J=async()=>{!i()&&p.appendChild(B),X&&Be(me,s,p)},P=t=>{X&&(B.classList.toggle("disabled",t),B.classList.toggle("with-delay",!t))},Y=()=>{let t=s.strings.filter(l=>!!l);t.forEach((l,o)=>{let m=ne(l,s.html);if(E.add(()=>O({chars:m})),o+1===t.length)return;let h=[s.breakLines?()=>O({chars:[R("BR")],silent:!0}):()=>M({num:m.length})];N(h)})},G=async t=>{I&&await he({value:I}),E.reset(),E.set(0,()=>A(t)),await M({num:null})},$=t=>{let l=p.innerHTML;return l?(p.innerHTML="",s.startDelete?(p.innerHTML=l,Q(p),N([()=>M({num:null})]),t):l.trim().split(/<br(?:\s*?)(?:\/)?>/).concat(t)):t},T=async()=>{w.started=!0;let t=E.getItems();try{for(let o=0;o<t.length;o++)await t[o](),E.markDone(o),P(!1);if(w.completed=!0,await s.afterComplete(this),!s.loop)throw"";let l=s.loopDelay;n(async()=>{await G(l[0]),T()},l[1])}catch{}return this},A=(t=0)=>n(()=>{},t),he=async({value:t,to:l=j,instant:o=!1})=>{P(!0);let m=oe({el:p,move:t,cursorPos:I,to:l}),h=()=>{I=Re(m<0?-1:1,I,d()),ke(p,d(),I)};await n(async()=>{for(let v=0;v<Math.abs(m);v++)o?h():await n(h,a(0))},b(o))},O=({chars:t,silent:l=!1,instant:o=!1})=>(P(!0),n(async()=>{let m=h=>Me(p,h);l||await s.beforeString(t,this);for(let h of t)o||$e(h)?m(h):await n(()=>m(h),a(0));l||await s.afterString(t,this)},b(o),!0)),H=async t=>{s=x(s,t)},Qe=async()=>{if(i()){p.value="";return}d().forEach(t=>{V(t)})},M=async({num:t=null,instant:l=!1,to:o=j})=>{P(!0),await n(async()=>{let m=(()=>t===null?d().length:ie(t)?t:oe({el:p,move:t,cursorPos:I,to:o}))(),h=()=>{let v=d();!v.length||(i()?p.value=p.value.slice(0,-1):V(v[I]))};for(let v=0;v<m;v++)l?h():await n(h,a(1))},b(l,1)),t===null&&d().length-1>0&&await M({num:null})};this.break=function(t){return u(()=>O({chars:[R("BR")],silent:!0}),t)},this.delete=function(t=null,l={}){t=C(t);let o=S(l),m=t,{instant:h,to:v}=l;return u([o[0],()=>M({num:m,instant:h,to:v}),o[1]],l)},this.empty=function(t={}){return u(Qe,t)},this.exec=function(t,l){let o=S(l);return u([o[0],t,o[1]],l)},this.move=function(t,l={}){t=C(t);let o=S(l),{instant:m,to:h}=l,v={value:t===null?"":t,to:h,instant:m};return u([o[0],()=>he(v),o[1]],l)},this.options=function(t){return t=C(t),u(()=>H(t),t)},this.pause=function(t,l={}){return u(()=>A(C(t)),l)},this.type=function(t,l={}){t=C(t);let o=S(l),m=ne(t,s.html),{instant:h}=l,v=[o[0],()=>O({chars:m,instant:h}),o[1]];return u(v,l)},this.is=function(t){return w[t]},this.destroy=function(t=!0){K=Le(K),C(t)&&V(B),w.destroyed=!0},this.freeze=function(){w.frozen=!0},this.unfreeze=function(){},this.reset=function(t){!this.is("destroyed")&&this.destroy(),t?(E.wipe(),t(this)):E.reset(),I=0;for(let l in w)w[l]=!1;return p[i()?"value":"innerHTML"]="",this},this.go=function(){return w.started?this:(J(),s.waitUntilVisible?(Ae(p,T.bind(this)),this):(T(),this))},this.getQueue=()=>E,this.getOptions=()=>s,this.updateOptions=t=>H(t),this.getElement=()=>p;let p=xe(e),K=[],I=0,w=x({},Ee),s=x(we,r);s=x(s,{html:!i()&&s.html,nextStringDelay:ue(s.nextStringDelay),loopDelay:ue(s.loopDelay)});let me=Pe(),E=_e([()=>A(s.startDelay)]);p.dataset.typeitId=me,le(`[${re}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`);let X=s.cursor&&!i(),B=L();s.strings=$(Z(s.strings)),s.strings.length&&Y()}const{useRef:de,useEffect:W,useState:fe}=y,ze={as:"span",options:{},getBeforeInit:e=>e,getAfterInit:e=>e},pe=e=>{const r=de(null),n=de(null),$=e,{options:i,as:a,children:d,getBeforeInit:b,getAfterInit:g}=$,u=ve($,["options","as","children","getBeforeInit","getAfterInit"]),[S,N]=fe(!0),[L,J]=fe(null),P=a;function Y(){const T=Object.assign({},i);d&&r.current&&(T.strings=r.current.innerHTML),J(T)}function G(){n.current=new Fe(r.current,L),n.current=b(n.current),n.current.go(),n.current=g(n.current)}return W(()=>{Y(),N(!1)},[i]),W(()=>{var T;!L||((T=n.current)==null?void 0:T.updateOptions(L))||G()},[L]),W(()=>()=>{var T;return(T=n.current)==null?void 0:T.destroy()},[]),y.createElement(P,be({ref:r,children:S?d:null,style:{opacity:S?0:1}},u))};return pe.defaultProps=ze,pe});
var Ve=Object.defineProperty;var z=Object.getOwnPropertySymbols;var ge=Object.prototype.hasOwnProperty,be=Object.prototype.propertyIsEnumerable;var me=(a,u,h)=>u in a?Ve(a,u,{enumerable:!0,configurable:!0,writable:!0,value:h}):a[u]=h,G=(a,u)=>{for(var h in u||(u={}))ge.call(u,h)&&me(a,h,u[h]);if(z)for(var h of z(u))be.call(u,h)&&me(a,h,u[h]);return a};var Se=(a,u)=>{var h={};for(var _ in a)ge.call(a,_)&&u.indexOf(_)<0&&(h[_]=a[_]);if(a!=null&&z)for(var _ of z(a))u.indexOf(_)<0&&be.call(a,_)&&(h[_]=a[_]);return h};(function(a,u){typeof exports=="object"&&typeof module!="undefined"?module.exports=u(require("react")):typeof define=="function"&&define.amd?define(["react"],u):(a=typeof globalThis!="undefined"?globalThis:a||self,a.TypeIt=u(a.React))})(this,function(a){"use strict";function u(e){if(e&&e.__esModule)return e;var r={__proto__:null,[Symbol.toStringTag]:"Module"};return e&&Object.keys(e).forEach(function(n){if(n!=="default"){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}}),r.default=e,Object.freeze(r)}var h=u(a),_=e=>Array.isArray(e),Z=e=>_(e)?e:[e];let _e=function(e){let r=function(d){return Z(d).forEach(E=>{var N;return p.set(Symbol((N=E.char)==null?void 0:N.innerText),G({},E))}),this},n=()=>f().filter(d=>d.typeable),i=function(d,E){let N=p.keys();p.set(N[d],E)},o=function(){p.forEach(d=>delete d.done)},c=function(){p=new Map,r(e)},T=()=>p,f=()=>Array.from(p.values()),g=d=>p.delete(d),v=(d=!1)=>d?f():f().filter(E=>!E.done),$=(d,E=!1)=>E?p.delete(d):p.get(d).done=!0,p=new Map;return r(e),{add:r,set:i,wipe:c,reset:o,destroy:g,done:$,getItems:v,getQueue:T,getTypeable:n}};var ee=e=>Array.from(e),F=e=>document.createTextNode(e);let j=e=>([...e.childNodes].forEach(r=>{if(r.nodeValue){[...r.nodeValue].forEach(n=>{r.parentNode.insertBefore(F(n),r)}),r.remove();return}j(r)}),e);var te=e=>{let r=document.implementation.createHTMLDocument();return r.body.innerHTML=e,j(r.body)};const re="data-typeit-id",x="ti-cursor",Te="END",ve={started:!1,completed:!1,frozen:!1,destroyed:!1},Ee={breakLines:!0,cursor:!0,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:()=>{}},we=`[${re}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`;function ne(e,r=!1){let n=document.createTreeWalker(e,NodeFilter.SHOW_ALL,{acceptNode:c=>{var T;return(T=c.classList)!=null&&T.contains(x)?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),i,o=[];for(;i=n.nextNode();)i.originalParent=i.parentNode,o.push(i);return r?o.reverse():o}function Ce(e){return ne(te(e))}function Ie(e,r=!0){return r?Ce(e):ee(e).map(F)}var R=e=>document.createElement(e),le=(e,r="")=>{let n=R("style");n.id=r,n.appendChild(F(e)),document.head.appendChild(n)},ie=e=>(_(e)||(e=[e/2,e/2]),e),se=(e,r)=>Math.abs(Math.random()*(e+r-(e-r))+(e-r));let oe=e=>e/2;function Ne(e){let{speed:r,deleteSpeed:n,lifeLike:i}=e;return n=n!==null?n:r/3,i?[se(r,oe(r)),se(n,oe(n))]:[r,n]}var Le=e=>(e.forEach(clearTimeout),[]),Pe=()=>Math.random().toString().substring(2,9),U=e=>"value"in e;let Me=e=>U(e)?ee(e.value):ne(e,!0).filter(r=>!(r.childNodes.length>0));var De=(e,r)=>{new IntersectionObserver((i,o)=>{i.forEach(c=>{c.isIntersecting&&(r(),o.unobserve(e))})},{threshold:1}).observe(e)};let D=e=>typeof e=="function"?e():e;var ae=e=>Number.isInteger(e);let V=(e,r=document,n=!1)=>r[`querySelector${n?"All":""}`](e),ke=e=>(e==null?void 0:e.tagName)==="BODY",Ae=(e,r)=>{if(U(e)){e.value=`${e.value}${r.textContent}`;return}r.innerHTML="";let n=ke(r.originalParent)?e:r.originalParent||e;n.insertBefore(r,V("."+x,n)||null)},xe=(e,r,n)=>Math.min(Math.max(r+e,0),n.length);var H=(e,r)=>Object.assign({},e,r),q=e=>{if(!e)return;let r=e.parentNode;(r.childNodes.length>1?e:r).remove()},$e=(e,r,n)=>{let i=r[n-1],o=V(`.${x}`,e);e=(i==null?void 0:i.parentNode)||e,e.insertBefore(o,i||null)};function Re(e){return typeof e=="string"?V(e):e}var He=e=>/<(.+)>(.*?)<\/(.+)>/.test(e.outerHTML);let Oe=async(e,r,n)=>new Promise(i=>{let o=async()=>{await e(),i()};n.push(setTimeout(o,r||0))}),Be={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"","margin-left":"-.125em","margin-right":".125em"},Qe=(e,r,n)=>{let o=`${`[${re}='${e}']`} .${x}`,c=getComputedStyle(n),T=Object.entries(Be).reduce((f,[g,v])=>`${f} ${g}: var(--ti-cursor-${g}, ${v||c[g]});`,"");le(`@keyframes blink-${e} { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} } ${o} { display: inline; letter-spacing: -1em; ${T} animation: blink-${e} ${r.cursorSpeed/1e3}s infinite; } ${o}.with-delay { animation-delay: 500ms; } ${o}.disabled { animation: none; }`,e)};var ue=(e,r)=>new Array(r).fill(e);const ce=({queueItems:e,selector:r,cursorPosition:n,to:i})=>{if(ae(r))return r*-1;let o=new RegExp(Te,"i").test(i),c=[...e].reverse().findIndex(({char:f})=>{let g=f.parentElement,v=g.matches(r);return o&&v?!0:v&&g.firstChild.isSameNode(f)});c<0&&(c=o?0:e.length-1);let T=o?0:1;return c-n+T};let ze=async(e,r)=>{let n=async()=>{var i;return(i=e.func)==null?void 0:i.call(globalThis)};e.delay?await r(async()=>{await n()},e.delay):await n()};const Fe=function(e,r={}){let n=async(t,l,y=!1)=>{C.frozen&&await new Promise(b=>{this.unfreeze=()=>{C.frozen=!1,b()}}),y||await s.beforeStep(this),await Oe(t,l,X),y||await s.afterStep(this)},i=()=>U(m),o=(t=0)=>Ne(s)[t],c=()=>Me(m),T=(t={})=>{let l=t.delay;l&&S.add({delay:l})},f=(t,l)=>(S.add(t),T(l),this),g=(t={})=>[{func:()=>O(t)},{func:()=>O(s)}],v=t=>{let l=s.nextStringDelay;S.add([{delay:l[0]},t,{delay:l[1]}])},$=()=>{if(i())return;let t=R("span");return t.className=x,Y?(t.innerHTML=te(s.cursorChar).innerHTML,t):(t.style.visibility="hidden",t)},p=async()=>{!i()&&P&&m.appendChild(P),Y&&Qe(he,s,m)},d=t=>{Y&&P&&(P.classList.toggle("disabled",t),P.classList.toggle("with-delay",!t))},E=()=>{let t=s.strings.filter(l=>!!l);t.forEach((l,y)=>{this.type(l),y+1!==t.length&&v({func:s.breakLines?()=>K(R("BR")):B,typeable:!!s.breakLines})})},N=async t=>{I&&await w({value:I});for(let l of S.getTypeable())await n(B,o(1));S.reset(),S.set(0,{delay:t})},J=t=>{let l=m.innerHTML;return l?(m.innerHTML="",s.startDelete?(m.innerHTML=l,j(m),v({func:B}),t):l.trim().split(/<br(?:\s*?)(?:\/)?>/).concat(t)):t},L=async(t=!0)=>{C.started=!0;try{for(let[y,b]of S.getQueue())b.done||(b.typeable&&d(!0),await ze(b,n),d(!1),S.done(y,!t));if(!t)return this;if(C.completed=!0,await s.afterComplete(this),!s.loop)throw"";let l=s.loopDelay;n(async()=>{await N(l[0]),L()},l[1])}catch{}return this},w=async t=>{I=xe(t,I,c()),$e(m,c(),I)},K=t=>Ae(m,t),O=async t=>s=H(s,t),Ue=async()=>{if(i()){m.value="";return}c().forEach(q)},B=()=>{let t=c();!t.length||(i()?m.value=m.value.slice(0,-1):q(t[I]))};this.break=function(t){return f({func:()=>K(R("BR")),typeable:!0},t)},this.delete=function(t=null,l={}){t=D(t);let y=g(l),b=t,{instant:Q,to:M}=l,k=S.getTypeable(),A=(()=>b===null?k.length:ae(b)?b:ce({queueItems:k,selector:b,cursorPosition:ye,to:M}))();return f([y[0],...ue({func:B,delay:Q?0:o(1)},A),y[1]],l)},this.empty=function(t={}){return f({func:Ue},t)},this.exec=function(t,l={}){let y=g(l);return f([y[0],{func:()=>t(this)},y[1]],l)},this.move=function(t,l={}){t=D(t);let y=g(l),{instant:b,to:Q}=l,M=ce({queueItems:S.getTypeable(),selector:t===null?"":t,to:Q,cursorPosition:I}),k=M<0?-1:1;return ye=I+M,f([y[0],...ue({func:()=>w(k),delay:b?0:o()},Math.abs(M)),y[1]],l)},this.options=function(t,l={}){return t=D(t),O(t),f({},l)},this.pause=function(t,l={}){return f({delay:D(t)},l)},this.type=function(t,l={}){t=D(t);let{instant:y}=l,b=g(l),M=Ie(t,s.html).map(A=>({func:()=>K(A),char:A,delay:y||He(A)?0:o(),typeable:A.nodeType===Node.TEXT_NODE})),k=[b[0],{func:async()=>await s.beforeString(t,this)},...M,{func:async()=>await s.afterString(t,this)},b[1]];return f(k,l)},this.is=function(t){return C[t]},this.destroy=function(t=!0){X=Le(X),D(t)&&P&&q(P),C.destroyed=!0},this.freeze=function(){C.frozen=!0},this.unfreeze=function(){},this.reset=function(t){!this.is("destroyed")&&this.destroy(),t?(S.wipe(),t(this)):S.reset(),I=0;for(let l in C)C[l]=!1;return m[i()?"value":"innerHTML"]="",this},this.go=function(){return C.started?this:(p(),s.waitUntilVisible?(De(m,L.bind(this)),this):(L(),this))},this.flush=function(t=()=>{}){return p(),L(!1).then(t),this},this.getQueue=()=>S,this.getOptions=()=>s,this.updateOptions=t=>O(t),this.getElement=()=>m;let m=Re(e),X=[],I=0,ye=0,C=H({},ve),s=H(Ee,r);s=H(s,{html:!i()&&s.html,nextStringDelay:ie(s.nextStringDelay),loopDelay:ie(s.loopDelay)});let he=Pe(),S=_e([{func:()=>{},delay:s.startDelay}]);m.dataset.typeitId=he,le(we);let Y=s.cursor&&!i(),P=$();s.strings=J(Z(s.strings)),s.strings.length&&E()},{useRef:fe,useEffect:W,useState:de}=h,je={as:"span",options:{},getBeforeInit:e=>e,getAfterInit:e=>e},pe=e=>{const r=fe(null),n=fe(null),L=e,{options:i,as:o,children:c,getBeforeInit:T,getAfterInit:f}=L,g=Se(L,["options","as","children","getBeforeInit","getAfterInit"]),[v,$]=de(!0),[p,d]=de(null),E=o;function N(){const w=Object.assign({},i);c&&r.current&&(w.strings=r.current.innerHTML),d(w)}function J(){n.current=new Fe(r.current,p),n.current=T(n.current),n.current.go(),n.current=f(n.current)}return W(()=>{N(),$(!1)},[i]),W(()=>{var w;!p||(w=n.current)!=null&&w.updateOptions(p)||J()},[p]),W(()=>()=>{var w;return(w=n.current)==null?void 0:w.destroy()},[]),h.createElement(E,G({ref:r,children:v?c:null,style:{opacity:v?0:1}},g))};return pe.defaultProps=je,pe});

16

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

@@ -40,13 +40,13 @@ "homepage": "https://typeitjs.com",

"dependencies": {
"@types/react": "^17.0.39",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"typeit": "^8.3.3",
"vite": "^2.8.6"
"@types/react": "^18.0.7",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"typeit": "^8.5.0",
"vite": "^2.9.5"
},
"devDependencies": {
"@babel/preset-typescript": "^7.16.7",
"lint-staged": "^12.3.5",
"typescript": "^4.6.2"
"lint-staged": "^12.4.0",
"typescript": "^4.6.3"
}
}
SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc