Socket
Socket
Sign inDemoInstall

typeit-react

Package Overview
Dependencies
128
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.1.1 to 2.2.0

package-lock.json

324

dist/index.es.js

@@ -30,18 +30,9 @@ var __defProp = Object.defineProperty;

import * as React from "react";
const defaults = [null, null, {}];
var guaranteeThreeKeys = (q) => {
return q.map((queueItem) => {
return defaults.map((defaultValue, index) => {
if (queueItem[index])
return queueItem[index];
return defaultValue;
});
});
var isArray = (thing) => Array.isArray(thing);
var asArray = (value) => {
return isArray(value) ? value : [value];
};
var merge = (originalObj, newObj) => {
return Object.assign({}, originalObj, newObj);
};
const Queue = function(initialItems) {
const add = function(steps) {
_queue = _queue.concat(guaranteeThreeKeys(steps));
_queue = _queue.concat(asArray(steps));
return this;

@@ -54,12 +45,10 @@ };

_queue = _queue.map((item) => {
item[2].executed = false;
delete item.done;
return item;
});
};
const getItems = function() {
return _queue.filter((i) => !i[2].executed);
const getItems = () => _queue.filter((i) => !i.done);
const markDone = (index) => {
_queue[index].done = true;
};
const setMeta = function(index, meta) {
_queue[index][2] = merge(_queue[index][2], meta);
};
let _queue = [];

@@ -72,3 +61,3 @@ add(initialItems);

getItems,
setMeta
markDone
};

@@ -79,67 +68,23 @@ };

};
var getParsedBody = (content) => {
let doc = document.implementation.createHTMLDocument();
doc.body.innerHTML = content;
return doc.body;
var createTextNode = (content) => {
return document.createTextNode(content);
};
var isTypeableNode = (node) => {
return node.nodeType === 3 || node.tagName === "BR";
};
const getAllTypeableNodes = (element, parentToExclude = null, shouldReverse = false) => {
let nodes = toArray(element.childNodes).flatMap((child) => {
return isTypeableNode(child) ? child : getAllTypeableNodes(child);
});
if (parentToExclude) {
nodes = nodes.filter((n) => !parentToExclude.contains(n));
}
return shouldReverse ? nodes.reverse() : nodes;
};
const constructQueueFromNodes = (el) => {
let nodeArray = getAllTypeableNodes(el);
return nodeArray.flatMap((item) => {
if (item.nodeValue) {
return toArray(item.nodeValue).map((character) => {
return createCharacterObject(character, item);
const expandTextNodes = (element) => {
[...element.childNodes].forEach((child) => {
if (child.nodeValue) {
[...child.nodeValue].forEach((c) => {
child.parentNode.insertBefore(createTextNode(c), child);
});
child.remove();
return;
}
return createCharacterObject(item);
expandTextNodes(child);
});
return element;
};
const createCharacterObject = (content, node = null) => {
return { node, content };
var getParsedBody = (content) => {
let doc = document.implementation.createHTMLDocument();
doc.body.innerHTML = content;
return expandTextNodes(doc.body);
};
function chunkStringAsHtml(string) {
let htmlBody = getParsedBody(string);
return constructQueueFromNodes(htmlBody);
}
function maybeChunkStringAsHtml(str, asHtml = true) {
if (asHtml) {
return chunkStringAsHtml(str);
}
return toArray(str).map((char) => createCharacterObject(char));
}
var createElement = (el) => {
return document.createElement(el);
};
var createTextNode = (content) => {
return document.createTextNode(content);
};
var appendStyleBlock = (styles, id = "") => {
let styleBlock = createElement("style");
styleBlock.id = id;
styleBlock.appendChild(createTextNode(styles));
document.head.appendChild(styleBlock);
};
var isArray = (thing) => {
return Array.isArray(thing);
};
var asArray = (value) => {
return isArray(value) ? value : [value];
};
const isNumber = (value) => {
return Number.isInteger(value);
};
const select = (selector, element = document, all = false) => {
return element[`querySelector${all ? "All" : ""}`](selector);
};
const DATA_ATTRIBUTE = "data-typeit-id";

@@ -182,11 +127,55 @@ const CURSOR_CLASS = "ti-cursor";

};
function walkElementNodes(element, shouldReverse = false) {
const walker = document.createTreeWalker(element, NodeFilter.SHOW_ALL, {
acceptNode: (node) => {
var _a;
return ((_a = node == null ? void 0 : node.classList) == null ? void 0 : _a.contains(CURSOR_CLASS)) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
}
});
let nextNode;
let nodes = [];
while (nextNode = walker.nextNode()) {
nextNode.originalParent = nextNode.parentNode;
nodes.push(nextNode);
}
return shouldReverse ? nodes.reverse() : nodes;
}
function chunkStringAsHtml(string) {
return walkElementNodes(getParsedBody(string));
}
function maybeChunkStringAsHtml(str, asHtml = true) {
return asHtml ? chunkStringAsHtml(str) : toArray(str).map(createTextNode);
}
var createElement = (el) => {
return document.createElement(el);
};
var appendStyleBlock = (styles, id = "") => {
let styleBlock = createElement("style");
styleBlock.id = id;
styleBlock.appendChild(createTextNode(styles));
document.head.appendChild(styleBlock);
};
const isNumber = (value) => {
return Number.isInteger(value);
};
const select = (selector, element = document, all = false) => {
return element[`querySelector${all ? "All" : ""}`](selector);
};
var isInput = (el) => {
return "value" in el;
};
const getAllChars = (element) => {
if (isInput(element)) {
return toArray(element.value);
}
return walkElementNodes(element, true).filter((c) => !(c.childNodes.length > 0));
};
const calculateStepsToSelector = (selector, element, to = START) => {
let isMovingToLast = new RegExp(END, "i").test(to);
let cursor = select(`.${CURSOR_CLASS}`, element);
let selectedElement = selector ? select(selector, element) : element;
let selectedElementNodes = getAllTypeableNodes(selectedElement, cursor, true);
let selectedElementNodes = walkElementNodes(selectedElement, true);
let selectedElementFirstChild = selectedElementNodes[0];
let selectedElementLastChild = selectedElementNodes[selectedElementNodes.length - 1];
let isMovingToEndOfRootElement = isMovingToLast && !selector;
let childIndex = isMovingToEndOfRootElement ? 0 : getAllTypeableNodes(element, cursor, true).findIndex((character) => {
let childIndex = isMovingToEndOfRootElement ? 0 : getAllChars(element).findIndex((character) => {
return character.isSameNode(isMovingToLast ? selectedElementFirstChild : selectedElementLastChild);

@@ -235,8 +224,2 @@ });

};
var isInput = (el) => {
return "value" in el;
};
const getAllChars = (element) => {
return isInput(element) ? toArray(element.value) : getAllTypeableNodes(element, select(`.${CURSOR_CLASS}`, element), true);
};
var fireWhenVisible = (element, func) => {

@@ -256,50 +239,11 @@ let observer = new IntersectionObserver((entries, observer2) => {

};
var isBodyElement = (node) => {
return node.tagName === "BODY";
};
const findPrintedNode = (node, elementToSearch) => {
let printedNodes = toArray(select("*", elementToSearch, true));
return [elementToSearch].concat(printedNodes.reverse()).find((i) => {
return i.cloneNode().isEqualNode(node.cloneNode());
});
};
const isLastElement = (node, nodeToIgnore) => {
let sibling = node.nextSibling;
return !sibling || sibling.isEqualNode(nodeToIgnore);
};
const insertIntoElement = (targetElement, character, cursorNode, cursorPosition) => {
let contentIsElement = character.content instanceof HTMLElement;
let characterNode = character.node;
let parentNode = characterNode == null ? void 0 : characterNode.parentNode;
let content = contentIsElement ? character.content : createTextNode(character.content);
if (isInput(targetElement)) {
targetElement.value = `${targetElement.value}${character.content}`;
const isBodyElement = (node) => (node == null ? void 0 : node.tagName) === "BODY";
const insertIntoElement = (originalTarget, character) => {
if (isInput(originalTarget)) {
originalTarget.value = `${originalTarget.value}${character.textContent}`;
return;
}
if (!contentIsElement && parentNode && !isBodyElement(parentNode)) {
let existingNode = findPrintedNode(parentNode, targetElement);
if (existingNode && isLastElement(existingNode, cursorNode)) {
targetElement = existingNode;
} else {
content = parentNode.cloneNode();
content.appendChild(createTextNode(character.content));
let genericAncestor = parentNode.parentNode;
let genericAncestorClone = genericAncestor.cloneNode();
if (!isBodyElement(genericAncestor)) {
let printedAncestor = findPrintedNode(genericAncestorClone, targetElement);
while (!printedAncestor && !isBodyElement(genericAncestor)) {
let newContentNode = genericAncestorClone;
newContentNode["innerHTML"] = content["outerHTML"];
content = newContentNode;
genericAncestor = genericAncestor.parentNode;
genericAncestorClone = genericAncestor.cloneNode();
printedAncestor = findPrintedNode(genericAncestorClone, targetElement);
}
targetElement = printedAncestor || targetElement;
}
}
}
let lastNode = getAllTypeableNodes(targetElement, cursorNode, true)[cursorPosition - 1];
let elementToTypeInto = lastNode ? lastNode.parentNode : targetElement;
elementToTypeInto.insertBefore(content, elementToTypeInto.contains(cursorNode) ? cursorNode : null);
character.innerHTML = "";
let target = isBodyElement(character.originalParent) ? originalTarget : character.originalParent || originalTarget;
target.insertBefore(character, select("." + CURSOR_CLASS, target) || null);
};

@@ -309,18 +253,15 @@ const updateCursorPosition = (steps, cursorPosition, printedCharacters) => {

};
var merge = (originalObj, newObj) => {
return Object.assign({}, originalObj, newObj);
};
var removeNode = (node) => {
return node && node.remove();
if (!node)
return;
const nodeParent = node.parentNode;
const nodeToRemove = nodeParent.childNodes.length > 1 ? node : nodeParent;
nodeToRemove.remove();
};
var removeEmptyElements = (node, nodeToIgnore) => {
select("*", node, true).forEach((i) => {
if (!i.innerHTML && i.tagName !== "BR" && !i.isSameNode(nodeToIgnore)) {
let nodeToRemove = i;
while (nodeToRemove.parentElement.childNodes.length === 1) {
nodeToRemove = nodeToRemove.parentElement;
}
removeNode(nodeToRemove);
}
});
};
var repositionCursor = (element, allChars, cursor, newCursorPosition) => {
var repositionCursor = (element, allChars, newCursorPosition) => {
let nodeToInsertBefore = allChars[newCursorPosition - 1];
let cursor = select(`.${CURSOR_CLASS}`, element);
element = (nodeToInsertBefore == null ? void 0 : nodeToInsertBefore.parentNode) || element;

@@ -332,2 +273,3 @@ element.insertBefore(cursor, nodeToInsertBefore || null);

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

@@ -383,3 +325,3 @@ return new Promise((resolve) => {

let delay = opts["delay"];
delay && _queue.add([[_pause, delay]]);
delay && _queue.add(() => _pause(delay));
};

@@ -393,4 +335,4 @@ const _queueAndReturn = (steps, opts) => {

return [
[_options, newOptions],
[_options, _opts]
() => _options(newOptions),
() => _options(_opts)
];

@@ -400,3 +342,7 @@ };

let delay = _opts.nextStringDelay;
_queue.add([[_pause, delay[0]], ...items, [_pause, delay[1]]]);
_queue.add([
() => _pause(delay[0]),
...items,
() => _pause(delay[1])
]);
};

@@ -430,16 +376,12 @@ const _setUpCursor = () => {

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

@@ -451,3 +393,3 @@ });

_queue.reset();
_queue.set(0, [_pause, delay, {}]);
_queue.set(0, () => _pause(delay));
await _delete({ num: null });

@@ -462,6 +404,7 @@ };

if (_opts.startDelete) {
chunkStringAsHtml(existingMarkup).forEach((item) => {
insertIntoElement(_element, item, _cursor, _cursorPosition);
});
_addSplitPause([[_delete, { num: null }]]);
_element.innerHTML = existingMarkup;
expandTextNodes(_element);
_addSplitPause([
() => _delete({ num: null })
]);
return strings;

@@ -477,7 +420,4 @@ }

for (let i = 0; i < queueItems.length; i++) {
let queueAction = queueItems[i];
let queueActionMeta = queueAction[2];
queueActionMeta.freezeCursor && _disableCursorBlink(true);
await queueAction[0].call(this, queueAction[1], queueActionMeta);
_queue.setMeta(i, { executed: true });
await queueItems[i]();
_queue.markDone(i);
_disableCursorBlink(false);

@@ -508,2 +448,3 @@ }

}) => {
_disableCursorBlink(true);
let numberOfSteps = calculateCursorSteps({

@@ -517,3 +458,3 @@ el: _element,

_cursorPosition = updateCursorPosition(numberOfSteps < 0 ? -1 : 1, _cursorPosition, _getAllChars());
repositionCursor(_element, _getAllChars(), _cursor, _cursorPosition);
repositionCursor(_element, _getAllChars(), _cursorPosition);
};

@@ -528,12 +469,11 @@ await _wait(async () => {

chars,
instant,
silent
silent = false,
instant = false
}) => {
_disableCursorBlink(true);
return _wait(async () => {
const insert = (character) => insertIntoElement(_element, character, _cursor, _cursorPosition);
const insert = (character) => insertIntoElement(_element, character);
silent || await _opts.beforeString(chars, this);
for (let i = 0; i < chars.length; i++) {
instant ? insert(chars[i]) : await _wait(() => {
insert(chars[i]);
}, _getPace(0));
for (let char of chars) {
instant || isNonVoidElement(char) ? insert(char) : await _wait(() => insert(char), _getPace(0));
}

@@ -562,4 +502,5 @@ silent || await _opts.afterString(chars, this);

}) => {
_disableCursorBlink(true);
await _wait(async () => {
let rounds = isNumber(num) ? num : calculateCursorSteps({
let rounds = isNumber(num) || _elementIsInput() ? num : calculateCursorSteps({
el: _element,

@@ -578,3 +519,2 @@ move: num,

removeNode(allChars[_cursorPosition]);
removeEmptyElements(_element, _cursor);
}

@@ -591,4 +531,3 @@ };

this.break = function(actionOpts) {
const breakCharacter = createCharacterObject(createElement("BR"));
return _queueAndReturn([[_type, { chars: [breakCharacter], silent: true }]], actionOpts);
return _queueAndReturn(() => _type({ chars: [createElement("BR")], silent: true }), actionOpts);
};

@@ -602,3 +541,3 @@ this.delete = function(numCharacters = null, actionOpts = {}) {

bookEndQueueItems[0],
[_delete, { num, instant, to }, _freezeCursorMeta],
() => _delete({ num, instant, to }),
bookEndQueueItems[1]

@@ -608,7 +547,7 @@ ], actionOpts);

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

@@ -626,3 +565,3 @@ this.move = function(movementArg, actionOpts = {}) {

bookEndQueueItems[0],
[_move, moveArgs, _freezeCursorMeta],
() => _move(moveArgs),
bookEndQueueItems[1]

@@ -633,6 +572,6 @@ ], actionOpts);

opts = handleFunctionalArg(opts);
return _queueAndReturn([[_options, opts]], opts);
return _queueAndReturn(() => _options(opts), opts);
};
this.pause = function(milliseconds, actionOpts = {}) {
return _queueAndReturn([[_pause, handleFunctionalArg(milliseconds)]], actionOpts);
return _queueAndReturn(() => _pause(handleFunctionalArg(milliseconds)), actionOpts);
};

@@ -646,3 +585,3 @@ this.type = function(string, actionOpts = {}) {

bookEndQueueItems[0],
[_type, { chars, instant }, _freezeCursorMeta],
() => _type({ chars, instant }),
bookEndQueueItems[1]

@@ -694,3 +633,2 @@ ];

let _cursorPosition = 0;
let _freezeCursorMeta = { freezeCursor: true };
let _statuses = merge({}, DEFAULT_STATUSES);

@@ -704,3 +642,3 @@ let _opts = merge(DEFAULT_OPTIONS, options);

let _id = generateHash();
let _queue = Queue([[_pause, _opts.startDelay]]);
let _queue = Queue([() => _pause(_opts.startDelay)]);
_element.dataset.typeitId = _id;

@@ -707,0 +645,0 @@ appendStyleBlock(`[${DATA_ATTRIBUTE}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`);

2

dist/index.umd.js

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

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

7

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

@@ -42,3 +42,3 @@ "homepage": "https://typeitjs.com",

"react-dom": "^17.0.2",
"typeit": "^8.1.0",
"typeit": "^8.2.0",
"vite": "^2.7.4"

@@ -50,4 +50,3 @@ },

"typescript": "^4.5.4"
},
"gitHead": "14d6bd988556c59ad0b88006fdaa576169dfc5d2"
}
}
LICENSE
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