Socket
Socket
Sign inDemoInstall

typeit-react

Package Overview
Dependencies
174
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.6.0 to 2.6.1

dist/index.d.ts

259

dist/index.es.js

@@ -1,33 +0,3 @@

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
import * as React from "react";
import { forwardRef } from "react";
const isArray = (thing) => Array.isArray(thing);

@@ -41,3 +11,3 @@ const asArray = (value) => {

var _a;
return _q.set(Symbol((_a = step.char) == null ? void 0 : _a.innerText), buildQueueItem(__spreadValues({}, step)));
return _q.set(Symbol((_a = step.char) == null ? void 0 : _a.innerText), buildQueueItem({ ...step }));
});

@@ -199,3 +169,5 @@ return this;

const randomInRange = (value, range2) => {
return Math.abs(Math.random() * (value + range2 - (value - range2)) + (value - range2));
return Math.abs(
Math.random() * (value + range2 - (value - range2)) + (value - range2)
);
};

@@ -221,13 +193,18 @@ let range = (val) => val / 2;

}
return walkElementNodes(element, true).filter((c) => !(c.childNodes.length > 0));
return walkElementNodes(element, true).filter(
(c) => !(c.childNodes.length > 0)
);
};
const fireWhenVisible = (element, func) => {
let observer = new IntersectionObserver((entries, observer2) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
func();
observer2.unobserve(element);
}
});
}, { threshold: 1 });
let observer = new IntersectionObserver(
(entries, observer2) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
func();
observer2.unobserve(element);
}
});
},
{ threshold: 1 }
);
observer.observe(element);

@@ -250,6 +227,12 @@ };

let target = isBodyElement(character.originalParent) ? originalTarget : character.originalParent || originalTarget;
target.insertBefore(character, select("." + CURSOR_CLASS, target) || null);
target.insertBefore(
character,
select("." + CURSOR_CLASS, target) || null
);
};
let updateCursorPosition = (steps, cursorPosition, printedCharacters) => {
return Math.min(Math.max(cursorPosition + steps, 0), printedCharacters.length);
return Math.min(
Math.max(cursorPosition + steps, 0),
printedCharacters.length
);
};

@@ -296,6 +279,12 @@ const merge = (originalObj, newObj) => Object.assign({}, originalObj, newObj);

let computedStyles = getComputedStyle(element);
let customProperties = Object.entries(cursorFontStyles).reduce((accumulator, [item, value]) => {
return `${accumulator} ${item}: var(--ti-cursor-${item}, ${value || computedStyles[item]});`;
}, "");
appendStyleBlock(`${cursorSelector} { display: inline-block; width: 0; ${customProperties} }`, id);
let customProperties = Object.entries(cursorFontStyles).reduce(
(accumulator, [item, value]) => {
return `${accumulator} ${item}: var(--ti-cursor-${item}, ${value || computedStyles[item]});`;
},
""
);
appendStyleBlock(
`${cursorSelector} { display: inline-block; width: 0; ${customProperties} }`,
id
);
};

@@ -411,5 +400,6 @@ const duplicate = (value, times) => new Array(times).fill(value);

if (animation) {
options = __spreadProps(__spreadValues({}, animation.effect.getComputedTiming()), {
options = {
...animation.effect.getComputedTiming(),
delay: shouldPauseCursor ? cursorOptions.autoPauseDelay : 0
});
};
}

@@ -432,3 +422,3 @@ await wait2(async () => {

let processCursorOptions = (cursorOptions) => {
var _a, _b, _c;
var _a, _b;
if (typeof cursorOptions === "object") {

@@ -439,4 +429,7 @@ let newOptions = {};

newOptions.animation.frames = ((_a = cursorOptions.animation) == null ? void 0 : _a.frames) || defaultFrames;
newOptions.animation.options = merge(defaultOptions, ((_b = cursorOptions.animation) == null ? void 0 : _b.options) || {});
newOptions.autoPause = (_c = cursorOptions.autoPause) != null ? _c : DEFAULT_OPTIONS.cursor.autoPause;
newOptions.animation.options = merge(
defaultOptions,
((_b = cursorOptions.animation) == null ? void 0 : _b.options) || {}
);
newOptions.autoPause = cursorOptions.autoPause ?? DEFAULT_OPTIONS.cursor.autoPause;
newOptions.autoPauseDelay = cursorOptions.autoPauseDelay || DEFAULT_OPTIONS.cursor.autoPauseDelay;

@@ -451,3 +444,2 @@ return newOptions;

const TypeIt$1 = function(element, options = {}) {
var _a;
let _wait = async (callback, delay, silent = false) => {

@@ -488,3 +480,3 @@ if (_statuses.frozen) {

};
let _getDerivedCursorPosition = () => _predictedCursorPosition != null ? _predictedCursorPosition : _cursorPosition;
let _getDerivedCursorPosition = () => _predictedCursorPosition ?? _cursorPosition;
let _generateTemporaryOptionQueueItems = (newOptions = {}) => {

@@ -523,5 +515,6 @@ return [

cursor: _cursor,
options: __spreadValues({
duration: _opts.cursorSpeed
}, options2)
options: {
duration: _opts.cursorSpeed,
...options2
}
});

@@ -537,6 +530,9 @@ }

}
let splitItems = _opts.breakLines ? [{ func: () => _type(createElement("BR")), typeable: true }] : duplicate({
func: _delete,
delay: _getPace(1)
}, _queue.getTypeable().length);
let splitItems = _opts.breakLines ? [{ func: () => _type(createElement("BR")), typeable: true }] : duplicate(
{
func: _delete,
delay: _getPace(1)
},
_queue.getTypeable().length
);
_addSplitPause(splitItems);

@@ -574,7 +570,12 @@ });

expandTextNodes(_element);
_addSplitPause(duplicate({
func: _delete,
delay: _getPace(1),
deletable: true
}, _getAllChars().length));
_addSplitPause(
duplicate(
{
func: _delete,
delay: _getPace(1),
deletable: true
},
_getAllChars().length
)
);
return strings;

@@ -624,3 +625,7 @@ }

let _move = async (step) => {
_cursorPosition = updateCursorPosition(step, _cursorPosition, _getAllChars());
_cursorPosition = updateCursorPosition(
step,
_cursorPosition,
_getAllChars()
);
repositionCursor(_element, _getAllChars(), _cursorPosition);

@@ -649,6 +654,9 @@ };

this.break = function(actionOpts) {
return _queueAndReturn({
func: () => _type(createElement("BR")),
typeable: true
}, actionOpts);
return _queueAndReturn(
{
func: () => _type(createElement("BR")),
typeable: true
},
actionOpts
);
};

@@ -675,11 +683,17 @@ this.delete = function(numCharacters = null, actionOpts = {}) {

})();
return _queueAndReturn([
bookEndQueueItems[0],
...duplicate({
func: _delete,
delay: instant ? 0 : _getPace(1),
deletable: true
}, rounds),
bookEndQueueItems[1]
], actionOpts);
return _queueAndReturn(
[
bookEndQueueItems[0],
...duplicate(
{
func: _delete,
delay: instant ? 0 : _getPace(1),
deletable: true
},
rounds
),
bookEndQueueItems[1]
],
actionOpts
);
};

@@ -691,3 +705,6 @@ this.empty = function(actionOpts = {}) {

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

@@ -706,11 +723,17 @@ this.move = function(movementArg, actionOpts = {}) {

_predictedCursorPosition = _getDerivedCursorPosition() + numberOfSteps;
return _queueAndReturn([
bookEndQueueItems[0],
...duplicate({
func: () => _move(directionalStep),
delay: instant ? 0 : _getPace(),
cursorable: true
}, Math.abs(numberOfSteps)),
bookEndQueueItems[1]
], actionOpts);
return _queueAndReturn(
[
bookEndQueueItems[0],
...duplicate(
{
func: () => _move(directionalStep),
delay: instant ? 0 : _getPace(),
cursorable: true
},
Math.abs(numberOfSteps)
),
bookEndQueueItems[1]
],
actionOpts
);
};

@@ -723,3 +746,6 @@ this.options = function(opts, actionOpts = {}) {

this.pause = function(milliseconds, actionOpts = {}) {
return _queueAndReturn({ delay: handleFunctionalArg(milliseconds) }, actionOpts);
return _queueAndReturn(
{ delay: handleFunctionalArg(milliseconds) },
actionOpts
);
};

@@ -803,3 +829,5 @@ this.type = function(string, actionOpts = {}) {

let _statuses = merge({}, DEFAULT_STATUSES);
options.cursor = processCursorOptions((_a = options.cursor) != null ? _a : DEFAULT_OPTIONS.cursor);
options.cursor = processCursorOptions(
options.cursor ?? DEFAULT_OPTIONS.cursor
);
let _opts = merge(DEFAULT_OPTIONS, options);

@@ -829,21 +857,12 @@ _opts = merge(_opts, {

};
const DynamicElementComponent = forwardRef((props, ref) => {
const { as: As } = props;
return /* @__PURE__ */ React.createElement(As, { ref, ...props });
});
const TypeIt = (props) => {
const elementRef = useRef(null);
const instanceRef = useRef(null);
const _a = props, {
options,
as,
children,
getBeforeInit,
getAfterInit
} = _a, remainingProps = __objRest(_a, [
"options",
"as",
"children",
"getBeforeInit",
"getAfterInit"
]);
const { options, children, getBeforeInit, getAfterInit, ...remainingProps } = props;
const [shouldShowChildren, setShouldShowChildren] = useState(true);
const [instanceOptions, setInstanceOptions] = useState(null);
const DynamicElement = as;
function calculateOptions() {

@@ -867,20 +886,26 @@ const optionsClone = Object.assign({}, options);

useEffect(() => {
var _a2;
var _a;
if (!instanceOptions)
return;
((_a2 = instanceRef.current) == null ? void 0 : _a2.updateOptions(instanceOptions)) || generateNewInstance();
((_a = instanceRef.current) == null ? void 0 : _a.updateOptions(instanceOptions)) || generateNewInstance();
}, [instanceOptions]);
useEffect(() => {
return () => {
var _a2;
return (_a2 = instanceRef.current) == null ? void 0 : _a2.destroy();
var _a;
return (_a = instanceRef.current) == null ? void 0 : _a.destroy();
};
}, []);
return /* @__PURE__ */ React.createElement(DynamicElement, __spreadValues({
ref: elementRef,
children: shouldShowChildren ? children : null,
style: { opacity: shouldShowChildren ? 0 : 1 }
}, remainingProps));
return /* @__PURE__ */ React.createElement(
DynamicElementComponent,
{
ref: elementRef,
children: shouldShowChildren ? children : null,
style: { opacity: shouldShowChildren ? 0 : 1 },
...remainingProps
}
);
};
TypeIt.defaultProps = defaultProps;
export { TypeIt as default };
export {
TypeIt as default
};

2

dist/index.umd.js

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

var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,r)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,__spreadValues=(e,t)=>{for(var r in t||(t={}))__hasOwnProp.call(t,r)&&__defNormalProp(e,r,t[r]);if(__getOwnPropSymbols)for(var r of __getOwnPropSymbols(t))__propIsEnum.call(t,r)&&__defNormalProp(e,r,t[r]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t)),__objRest=(e,t)=>{var r={};for(var n in e)__hasOwnProp.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&__getOwnPropSymbols)for(var n of __getOwnPropSymbols(e))t.indexOf(n)<0&&__propIsEnum.call(e,n)&&(r[n]=e[n]);return r};!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).TypeIt=t(e.React)}(this,(function(e){"use strict";function t(e){if(e&&e.__esModule)return e;var t={__proto__:null,[Symbol.toStringTag]:"Module"};return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var r=t(e);const n=e=>Array.isArray(e),o=e=>n(e)?e:[e];const i=e=>Array.from(e),a=e=>document.createTextNode(e);let s=e=>([...e.childNodes].forEach((e=>{if(e.nodeValue)return[...e.nodeValue].forEach((t=>{e.parentNode.insertBefore(a(t),e)})),void e.remove();s(e)})),e);const l=e=>{let t=document.implementation.createHTMLDocument();return t.body.innerHTML=e,s(t.body)},u="ti-cursor",c={started:!1,completed:!1,frozen:!1,destroyed:!1},d={breakLines:!0,cursor:{autoPause:!0,autoPauseDelay:500,animation:{frames:[0,0,1].map((e=>({opacity:e}))),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:()=>{}};function f(e,t=!1,r=!1){let n,o=e.querySelector(".ti-cursor"),i=document.createTreeWalker(e,NodeFilter.SHOW_ALL,{acceptNode:e=>{var t,n;if(o&&r){if(null==(t=e.classList)?void 0:t.contains(u))return NodeFilter.FILTER_ACCEPT;if(o.contains(e))return NodeFilter.FILTER_REJECT}return(null==(n=e.classList)?void 0:n.contains(u))?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),a=[];for(;n=i.nextNode();)n.originalParent||(n.originalParent=n.parentNode),a.push(n);return t?a.reverse():a}function p(e,t=!0){return t?f(l(e)):i(e).map(a)}const y=e=>document.createElement(e),h=(e,t="")=>{let r=y("style");r.id=t,r.appendChild(a(e)),document.head.appendChild(r)},m=e=>(n(e)||(e=[e/2,e/2]),e),g=(e,t)=>Math.abs(Math.random()*(e+t-(e-t))+(e-t));let b=e=>e/2;const _=e=>"value"in e;let v=e=>"function"==typeof e?e():e;const w=e=>Number.isInteger(e);let P=(e,t=document,r=!1)=>t["querySelector"+(r?"All":"")](e);const O=(e,t)=>Object.assign({},e,t);let T={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"",transform:"translateX(-.125em)"};const S=(e,t)=>new Array(t).fill(e),E=({queueItems:e,selector:t,cursorPosition:r,to:n})=>{if(w(t))return-1*t;let o=new RegExp("END","i").test(n),i=t?[...e].reverse().findIndex((({char:e})=>{let r=e.parentElement,n=r.matches(t);return!(!o||!n)||n&&r.firstChild.isSameNode(e)})):-1;return i<0&&(i=o?0:e.length-1),i-r+(o?0:1)};let I=e=>new Promise((t=>{requestAnimationFrame((async()=>{t(await e())}))})),N=e=>null==e?void 0:e.getAnimations().find((t=>t.id===e.dataset.tiAnimationId)),D=({cursor:e,frames:t,options:r})=>{let n=e.animate(t,r);return n.pause(),n.id=e.dataset.tiAnimationId,I((()=>{I((()=>{n.play()}))})),n},L=e=>{var t;return null==(t=e.func)?void 0:t.call(null)},C=async({index:e,queueItems:t,wait:r,cursor:n,cursorOptions:o})=>{let i=t[e][1],a=[],s=e,l=i,u=()=>l&&!l.delay,c=i.shouldPauseCursor()&&o.autoPause;for(;u();)a.push(l),u()&&s++,l=t[s]?t[s][1]:null;if(a.length)return await I((async()=>{for(let e of a)await L(e)})),s-1;let d,f=N(n);return f&&(d=__spreadProps(__spreadValues({},f.effect.getComputedTiming()),{delay:c?o.autoPauseDelay:0})),await r((async()=>{f&&c&&f.cancel(),await I((()=>{L(i)}))}),i.delay),await(({cursor:e,options:t,cursorOptions:r})=>{if(!e||!r)return;let n,o=N(e);o&&(t.delay=o.effect.getComputedTiming().delay,n=o.currentTime,o.cancel());let i=D({cursor:e,frames:r.animation.frames,options:t});return n&&(i.currentTime=n),i})({cursor:n,options:d,cursorOptions:o}),e};const M=function(e,t={}){var r;let n=async(e,t,r=!1)=>{G.frozen&&await new Promise((e=>{this.unfreeze=()=>{G.frozen=!1,e()}})),r||await K.beforeStep(this),await((e,t,r)=>new Promise((n=>{r.push(setTimeout((async()=>{await e(),n()}),t||0))})))(e,t,U),r||await K.afterStep(this)},a=(e,t)=>C({index:e,queueItems:t,wait:n,cursor:te,cursorOptions:K.cursor}),I=e=>((e,t)=>{if(!e)return;let r=e.parentNode;(r.childNodes.length>1||r.isSameNode(t)?e:r).remove()})(e,Q),N=()=>_(Q),L=(e=0)=>function(e){let{speed:t,deleteSpeed:r,lifeLike:n}=e;return r=null!==r?r:t/3,n?[g(t,b(t)),g(r,b(r))]:[t,r]}(K)[e],M=()=>(e=>_(e)?i(e.value):f(e,!0).filter((e=>!(e.childNodes.length>0))))(Q),x=(e,t)=>(Z.add(e),((e={})=>{let t=e.delay;t&&Z.add({delay:t})})(t),this),A=()=>null!=X?X:W,j=(e={})=>[{func:()=>B(e)},{func:()=>B(K)}],R=e=>{let t=K.nextStringDelay;Z.add([{delay:t[0]},...e,{delay:t[1]}])},H=async()=>{if(!N()&&te&&Q.appendChild(te),ee){((e,t)=>{let r=`[data-typeit-id='${e}'] .ti-cursor`,n=getComputedStyle(t),o=Object.entries(T).reduce(((e,[t,r])=>`${e} ${t}: var(--ti-cursor-${t}, ${r||n[t]});`),"");h(`${r} { display: inline-block; width: 0; ${o} }`,e)})(Y,Q),te.dataset.tiAnimationId=Y;let{animation:e}=K.cursor,{frames:t,options:r}=e;D({frames:t,cursor:te,options:__spreadValues({duration:K.cursorSpeed},r)})}},k=()=>{let e=K.strings.filter((e=>!!e));e.forEach(((t,r)=>{if(this.type(t),r+1===e.length)return;let n=K.breakLines?[{func:()=>z(y("BR")),typeable:!0}]:S({func:$,delay:L(1)},Z.getTypeable().length);R(n)}))},F=async(e=!0)=>{G.started=!0;let t=t=>{Z.done(t,!e)};try{let r=[...Z.getQueue()];for(let e=0;e<r.length;e++){let[n,o]=r[e];if(!o.done){if(!o.deletable||o.deletable&&M().length){let n=await a(e,r);Array(n-e).fill(e+1).map(((e,t)=>e+t)).forEach((e=>{let[n]=r[e];t(n)})),e=n}t(n)}}if(!e)return this;if(G.completed=!0,await K.afterComplete(this),!K.loop)throw"";let o=K.loopDelay;n((async()=>{await(async e=>{let t=A();t&&await q({value:t});let r=M().map((e=>[Symbol(),{func:$,delay:L(1),deletable:!0,shouldPauseCursor:()=>!0}]));for(let n=0;n<r.length;n++)await a(n,r);Z.reset(),Z.set(0,{delay:e})})(o[0]),F()}),o[1])}catch(r){}return this},q=async e=>{var t,r,n;t=e,r=W,n=M(),W=Math.min(Math.max(r+t,0),n.length),((e,t,r)=>{let n=t[r-1],o=P(".ti-cursor",e);(e=(null==n?void 0:n.parentNode)||e).insertBefore(o,n||null)})(Q,M(),W)},z=e=>((e,t)=>{if(_(e))return void(e.value=`${e.value}${t.textContent}`);t.innerHTML="";let r=(n=t.originalParent,/body/i.test(null==n?void 0:n.tagName)?e:t.originalParent||e);var n;r.insertBefore(t,P(".ti-cursor",r)||null)})(Q,e),B=async e=>K=O(K,e),V=async()=>{N()?Q.value="":M().forEach(I)},$=()=>{let e=M();e.length&&(N()?Q.value=Q.value.slice(0,-1):I(e[W]))};this.break=function(e){return x({func:()=>z(y("BR")),typeable:!0},e)},this.delete=function(e=null,t={}){e=v(e);let r=j(t),n=e,{instant:o,to:i}=t,a=Z.getTypeable(),s=null===n?a.length:w(n)?n:E({queueItems:a,selector:n,cursorPosition:A(),to:i});return x([r[0],...S({func:$,delay:o?0:L(1),deletable:!0},s),r[1]],t)},this.empty=function(e={}){return x({func:V},e)},this.exec=function(e,t={}){let r=j(t);return x([r[0],{func:()=>e(this)},r[1]],t)},this.move=function(e,t={}){e=v(e);let r=j(t),{instant:n,to:o}=t,i=E({queueItems:Z.getTypeable(),selector:null===e?"":e,to:o,cursorPosition:A()}),a=i<0?-1:1;return X=A()+i,x([r[0],...S({func:()=>q(a),delay:n?0:L(),cursorable:!0},Math.abs(i)),r[1]],t)},this.options=function(e,t={}){return e=v(e),B(e),x({},t)},this.pause=function(e,t={}){return x({delay:v(e)},t)},this.type=function(e,t={}){e=v(e);let{instant:r}=t,n=j(t),o=p(e,K.html).map((e=>{return{func:()=>z(e),char:e,delay:r||(t=e,/<(.+)>(.*?)<\/(.+)>/.test(t.outerHTML))?0:L(),typeable:e.nodeType===Node.TEXT_NODE};var t})),i=[n[0],{func:async()=>await K.beforeString(e,this)},...o,{func:async()=>await K.afterString(e,this)},n[1]];return x(i,t)},this.is=function(e){return G[e]},this.destroy=function(e=!0){U.forEach(clearTimeout),U=[],v(e)&&te&&I(te),G.destroyed=!0},this.freeze=function(){G.frozen=!0},this.unfreeze=()=>{},this.reset=function(e){!this.is("destroyed")&&this.destroy(),e?(Z.wipe(),e(this)):Z.reset(),W=0;for(let t in G)G[t]=!1;return Q[N()?"value":"innerHTML"]="",this},this.go=function(){return G.started?this:(H(),K.waitUntilVisible?(((e,t)=>{new IntersectionObserver(((r,n)=>{r.forEach((r=>{r.isIntersecting&&(t(),n.unobserve(e))}))}),{threshold:1}).observe(e)})(Q,F.bind(this)),this):(F(),this))},this.flush=function(e=(()=>{})){return H(),F(!1).then(e),this},this.getQueue=()=>Z,this.getOptions=()=>K,this.updateOptions=e=>B(e),this.getElement=()=>Q;let Q="string"==typeof(J=e)?P(J):J;var J;let U=[],W=0,X=null,G=O({},c);t.cursor=(e=>{var t,r,n;if("object"==typeof e){let o={},{frames:i,options:a}=d.cursor.animation;return o.animation=e.animation||{},o.animation.frames=(null==(t=e.animation)?void 0:t.frames)||i,o.animation.options=O(a,(null==(r=e.animation)?void 0:r.options)||{}),o.autoPause=null!=(n=e.autoPause)?n:d.cursor.autoPause,o.autoPauseDelay=e.autoPauseDelay||d.cursor.autoPauseDelay,o}return!0===e?d.cursor:e})(null!=(r=t.cursor)?r:d.cursor);let K=O(d,t);K=O(K,{html:!N()&&K.html,nextStringDelay:m(K.nextStringDelay),loopDelay:m(K.loopDelay)});let Y=Math.random().toString().substring(2,9),Z=function(e){let t=function(e){return o(e).forEach((e=>{var t;return i.set(Symbol(null==(t=e.char)?void 0:t.innerText),r(__spreadValues({},e)))})),this},r=e=>(e.shouldPauseCursor=function(){return Boolean(this.typeable||this.cursorable||this.deletable)},e),n=()=>Array.from(i.values()),i=new Map;return t(e),{add:t,set:function(e,t){let n=[...i.keys()];i.set(n[e],r(t))},wipe:function(){i=new Map,t(e)},reset:function(){i.forEach((e=>delete e.done))},destroy:e=>i.delete(e),done:(e,t=!1)=>t?i.delete(e):i.get(e).done=!0,getItems:(e=!1)=>e?n():n().filter((e=>!e.done)),getQueue:()=>i,getTypeable:()=>n().filter((e=>e.typeable))}}([{delay:K.startDelay}]);Q.dataset.typeitId=Y,h("[data-typeit-id]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}");let ee=!!K.cursor&&!N(),te=(()=>{if(N())return;let e=y("span");return e.className=u,ee?(e.innerHTML=l(K.cursorChar).innerHTML,e):(e.style.visibility="hidden",e)})();K.strings=(e=>{let t=Q.innerHTML;return t?(Q.innerHTML="",K.startDelete?(Q.innerHTML=t,s(Q),R(S({func:$,delay:L(1),deletable:!0},M().length)),e):t.replace(/<!--(.+?)-->/g,"").trim().split(/<br(?:\s*?)(?:\/)?>/).concat(e)):e})(o(K.strings)),K.strings.length&&k()},{useRef:x,useEffect:A,useState:j}=r,R=e=>{const t=x(null),n=x(null),o=e,{options:i,as:a,children:s,getBeforeInit:l,getAfterInit:u}=o,c=__objRest(o,["options","as","children","getBeforeInit","getAfterInit"]),[d,f]=j(!0),[p,y]=j(null),h=a;return A((()=>{!function(){const e=Object.assign({},i);s&&t.current&&(e.strings=t.current.innerHTML),y(e)}(),f(!1)}),[i]),A((()=>{var e;p&&((null==(e=n.current)?void 0:e.updateOptions(p))||(n.current=new M(t.current,p),n.current=l(n.current),n.current.go(),n.current=u(n.current)))}),[p]),A((()=>()=>{var e;return null==(e=n.current)?void 0:e.destroy()}),[]),r.createElement(h,__spreadValues({ref:t,children:d?s:null,style:{opacity:d?0:1}},c))};return R.defaultProps={as:"span",options:{},getBeforeInit:e=>e,getAfterInit:e=>e},R}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).TypeIt=t(e.React)}(this,(function(e){"use strict";function t(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}const n=t(e),r=e=>Array.isArray(e),i=e=>r(e)?e:[e];const a=e=>Array.from(e),o=e=>document.createTextNode(e);let s=e=>([...e.childNodes].forEach((e=>{if(e.nodeValue)return[...e.nodeValue].forEach((t=>{e.parentNode.insertBefore(o(t),e)})),void e.remove();s(e)})),e);const l=e=>{let t=document.implementation.createHTMLDocument();return t.body.innerHTML=e,s(t.body)},u="data-typeit-id",c="ti-cursor",d={started:!1,completed:!1,frozen:!1,destroyed:!1},f={breakLines:!0,cursor:{autoPause:!0,autoPauseDelay:500,animation:{frames:[0,0,1].map((e=>({opacity:e}))),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:()=>{}},h=`[${u}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`;function p(e,t=!1,n=!1){let r,i=e.querySelector(`.${c}`),a=document.createTreeWalker(e,NodeFilter.SHOW_ALL,{acceptNode:e=>{var t,r;if(i&&n){if(null==(t=e.classList)?void 0:t.contains(c))return NodeFilter.FILTER_ACCEPT;if(i.contains(e))return NodeFilter.FILTER_REJECT}return(null==(r=e.classList)?void 0:r.contains(c))?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),o=[];for(;r=a.nextNode();)r.originalParent||(r.originalParent=r.parentNode),o.push(r);return t?o.reverse():o}function y(e,t=!0){return t?p(l(e)):a(e).map(o)}const m=e=>document.createElement(e),g=(e,t="")=>{let n=m("style");n.id=t,n.appendChild(o(e)),document.head.appendChild(n)},b=e=>(r(e)||(e=[e/2,e/2]),e),v=(e,t)=>Math.abs(Math.random()*(e+t-(e-t))+(e-t));let w=e=>e/2;const T=e=>"value"in e;let E=e=>"function"==typeof e?e():e;const P=e=>Number.isInteger(e);let S=(e,t=document,n=!1)=>t["querySelector"+(n?"All":"")](e);const I=(e,t)=>Object.assign({},e,t);let L={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"",transform:"translateX(-.125em)"};const N=(e,t)=>new Array(t).fill(e),C=({queueItems:e,selector:t,cursorPosition:n,to:r})=>{if(P(t))return-1*t;let i=new RegExp("END","i").test(r),a=t?[...e].reverse().findIndex((({char:e})=>{let n=e.parentElement,r=n.matches(t);return!(!i||!r)||r&&n.firstChild.isSameNode(e)})):-1;return a<0&&(a=i?0:e.length-1),a-n+(i?0:1)};let D=e=>new Promise((t=>{requestAnimationFrame((async()=>{t(await e())}))})),M=e=>null==e?void 0:e.getAnimations().find((t=>t.id===e.dataset.tiAnimationId)),O=({cursor:e,frames:t,options:n})=>{let r=e.animate(t,n);return r.pause(),r.id=e.dataset.tiAnimationId,D((()=>{D((()=>{r.play()}))})),r},A=e=>{var t;return null==(t=e.func)?void 0:t.call(null)},x=async({index:e,queueItems:t,wait:n,cursor:r,cursorOptions:i})=>{let a=t[e][1],o=[],s=e,l=a,u=()=>l&&!l.delay,c=a.shouldPauseCursor()&&i.autoPause;for(;u();)o.push(l),u()&&s++,l=t[s]?t[s][1]:null;if(o.length)return await D((async()=>{for(let e of o)await A(e)})),s-1;let d,f=M(r);return f&&(d={...f.effect.getComputedTiming(),delay:c?i.autoPauseDelay:0}),await n((async()=>{f&&c&&f.cancel(),await D((()=>{A(a)}))}),a.delay),await(({cursor:e,options:t,cursorOptions:n})=>{if(!e||!n)return;let r,i=M(e);i&&(t.delay=i.effect.getComputedTiming().delay,r=i.currentTime,i.cancel());let a=O({cursor:e,frames:n.animation.frames,options:t});return r&&(a.currentTime=r),a})({cursor:r,options:d,cursorOptions:i}),e};const $=function(e,t={}){let n=async(e,t,n=!1)=>{K.frozen&&await new Promise((e=>{this.unfreeze=()=>{K.frozen=!1,e()}})),n||await Y.beforeStep(this),await((e,t,n)=>new Promise((r=>{n.push(setTimeout((async()=>{await e(),r()}),t||0))})))(e,t,W),n||await Y.afterStep(this)},r=(e,t)=>x({index:e,queueItems:t,wait:n,cursor:ne,cursorOptions:Y.cursor}),o=e=>((e,t)=>{if(!e)return;let n=e.parentNode;(n.childNodes.length>1||n.isSameNode(t)?e:n).remove()})(e,J),D=()=>T(J),M=(e=0)=>function(e){let{speed:t,deleteSpeed:n,lifeLike:r}=e;return n=null!==n?n:t/3,r?[v(t,w(t)),v(n,w(n))]:[t,n]}(Y)[e],A=()=>(e=>T(e)?a(e.value):p(e,!0).filter((e=>!(e.childNodes.length>0))))(J),$=(e,t)=>(ee.add(e),((e={})=>{let t=e.delay;t&&ee.add({delay:t})})(t),this),H=()=>G??X,R=(e={})=>[{func:()=>_(e)},{func:()=>_(Y)}],F=e=>{let t=Y.nextStringDelay;ee.add([{delay:t[0]},...e,{delay:t[1]}])},j=async()=>{if(!D()&&ne&&J.appendChild(ne),te){((e,t)=>{let n=`[${u}='${e}'] .${c}`,r=getComputedStyle(t),i=Object.entries(L).reduce(((e,[t,n])=>`${e} ${t}: var(--ti-cursor-${t}, ${n||r[t]});`),"");g(`${n} { display: inline-block; width: 0; ${i} }`,e)})(Z,J),ne.dataset.tiAnimationId=Z;let{animation:e}=Y.cursor,{frames:t,options:n}=e;O({frames:t,cursor:ne,options:{duration:Y.cursorSpeed,...n}})}},k=()=>{let e=Y.strings.filter((e=>!!e));e.forEach(((t,n)=>{if(this.type(t),n+1===e.length)return;let r=Y.breakLines?[{func:()=>B(m("BR")),typeable:!0}]:N({func:Q,delay:M(1)},ee.getTypeable().length);F(r)}))},q=async(e=!0)=>{K.started=!0;let t=t=>{ee.done(t,!e)};try{let i=[...ee.getQueue()];for(let e=0;e<i.length;e++){let[n,a]=i[e];if(!a.done){if(!a.deletable||a.deletable&&A().length){let n=await r(e,i);Array(n-e).fill(e+1).map(((e,t)=>e+t)).forEach((e=>{let[n]=i[e];t(n)})),e=n}t(n)}}if(!e)return this;if(K.completed=!0,await Y.afterComplete(this),!Y.loop)throw"";let a=Y.loopDelay;n((async()=>{await(async e=>{let t=H();t&&await z({value:t});let n=A().map((e=>[Symbol(),{func:Q,delay:M(1),deletable:!0,shouldPauseCursor:()=>!0}]));for(let i=0;i<n.length;i++)await r(i,n);ee.reset(),ee.set(0,{delay:e})})(a[0]),q()}),a[1])}catch(i){}return this},z=async e=>{var t,n,r;t=e,n=X,r=A(),X=Math.min(Math.max(n+t,0),r.length),((e,t,n)=>{let r=t[n-1],i=S(`.${c}`,e);(e=(null==r?void 0:r.parentNode)||e).insertBefore(i,r||null)})(J,A(),X)},B=e=>((e,t)=>{if(T(e))return void(e.value=`${e.value}${t.textContent}`);t.innerHTML="";let n=(r=t.originalParent,/body/i.test(null==r?void 0:r.tagName)?e:t.originalParent||e);var r;n.insertBefore(t,S("."+c,n)||null)})(J,e),_=async e=>Y=I(Y,e),V=async()=>{D()?J.value="":A().forEach(o)},Q=()=>{let e=A();e.length&&(D()?J.value=J.value.slice(0,-1):o(e[X]))};this.break=function(e){return $({func:()=>B(m("BR")),typeable:!0},e)},this.delete=function(e=null,t={}){e=E(e);let n=R(t),r=e,{instant:i,to:a}=t,o=ee.getTypeable(),s=null===r?o.length:P(r)?r:C({queueItems:o,selector:r,cursorPosition:H(),to:a});return $([n[0],...N({func:Q,delay:i?0:M(1),deletable:!0},s),n[1]],t)},this.empty=function(e={}){return $({func:V},e)},this.exec=function(e,t={}){let n=R(t);return $([n[0],{func:()=>e(this)},n[1]],t)},this.move=function(e,t={}){e=E(e);let n=R(t),{instant:r,to:i}=t,a=C({queueItems:ee.getTypeable(),selector:null===e?"":e,to:i,cursorPosition:H()}),o=a<0?-1:1;return G=H()+a,$([n[0],...N({func:()=>z(o),delay:r?0:M(),cursorable:!0},Math.abs(a)),n[1]],t)},this.options=function(e,t={}){return e=E(e),_(e),$({},t)},this.pause=function(e,t={}){return $({delay:E(e)},t)},this.type=function(e,t={}){e=E(e);let{instant:n}=t,r=R(t),i=y(e,Y.html).map((e=>{return{func:()=>B(e),char:e,delay:n||(t=e,/<(.+)>(.*?)<\/(.+)>/.test(t.outerHTML))?0:M(),typeable:e.nodeType===Node.TEXT_NODE};var t})),a=[r[0],{func:async()=>await Y.beforeString(e,this)},...i,{func:async()=>await Y.afterString(e,this)},r[1]];return $(a,t)},this.is=function(e){return K[e]},this.destroy=function(e=!0){W.forEach(clearTimeout),W=[],E(e)&&ne&&o(ne),K.destroyed=!0},this.freeze=function(){K.frozen=!0},this.unfreeze=()=>{},this.reset=function(e){!this.is("destroyed")&&this.destroy(),e?(ee.wipe(),e(this)):ee.reset(),X=0;for(let t in K)K[t]=!1;return J[D()?"value":"innerHTML"]="",this},this.go=function(){return K.started?this:(j(),Y.waitUntilVisible?(((e,t)=>{new IntersectionObserver(((n,r)=>{n.forEach((n=>{n.isIntersecting&&(t(),r.unobserve(e))}))}),{threshold:1}).observe(e)})(J,q.bind(this)),this):(q(),this))},this.flush=function(e=(()=>{})){return j(),q(!1).then(e),this},this.getQueue=()=>ee,this.getOptions=()=>Y,this.updateOptions=e=>_(e),this.getElement=()=>J;let J="string"==typeof(U=e)?S(U):U;var U;let W=[],X=0,G=null,K=I({},d);t.cursor=(e=>{var t,n;if("object"==typeof e){let r={},{frames:i,options:a}=f.cursor.animation;return r.animation=e.animation||{},r.animation.frames=(null==(t=e.animation)?void 0:t.frames)||i,r.animation.options=I(a,(null==(n=e.animation)?void 0:n.options)||{}),r.autoPause=e.autoPause??f.cursor.autoPause,r.autoPauseDelay=e.autoPauseDelay||f.cursor.autoPauseDelay,r}return!0===e?f.cursor:e})(t.cursor??f.cursor);let Y=I(f,t);Y=I(Y,{html:!D()&&Y.html,nextStringDelay:b(Y.nextStringDelay),loopDelay:b(Y.loopDelay)});let Z=Math.random().toString().substring(2,9),ee=function(e){let t=function(e){return i(e).forEach((e=>{var t;return a.set(Symbol(null==(t=e.char)?void 0:t.innerText),n({...e}))})),this},n=e=>(e.shouldPauseCursor=function(){return Boolean(this.typeable||this.cursorable||this.deletable)},e),r=()=>Array.from(a.values()),a=new Map;return t(e),{add:t,set:function(e,t){let r=[...a.keys()];a.set(r[e],n(t))},wipe:function(){a=new Map,t(e)},reset:function(){a.forEach((e=>delete e.done))},destroy:e=>a.delete(e),done:(e,t=!1)=>t?a.delete(e):a.get(e).done=!0,getItems:(e=!1)=>e?r():r().filter((e=>!e.done)),getQueue:()=>a,getTypeable:()=>r().filter((e=>e.typeable))}}([{delay:Y.startDelay}]);J.dataset.typeitId=Z,g(h);let te=!!Y.cursor&&!D(),ne=(()=>{if(D())return;let e=m("span");return e.className=c,te?(e.innerHTML=l(Y.cursorChar).innerHTML,e):(e.style.visibility="hidden",e)})();Y.strings=(e=>{let t=J.innerHTML;return t?(J.innerHTML="",Y.startDelete?(J.innerHTML=t,s(J),F(N({func:Q,delay:M(1),deletable:!0},A().length)),e):t.replace(/<!--(.+?)-->/g,"").trim().split(/<br(?:\s*?)(?:\/)?>/).concat(e)):e})(i(Y.strings)),Y.strings.length&&k()},{useRef:H,useEffect:R,useState:F}=n,j=e.forwardRef(((e,t)=>{const{as:r}=e;return n.createElement(r,{ref:t,...e})})),k=e=>{const t=H(null),r=H(null),{options:i,children:a,getBeforeInit:o,getAfterInit:s,...l}=e,[u,c]=F(!0),[d,f]=F(null);return R((()=>{!function(){const e=Object.assign({},i);a&&t.current&&(e.strings=t.current.innerHTML),f(e)}(),c(!1)}),[i]),R((()=>{var e;d&&((null==(e=r.current)?void 0:e.updateOptions(d))||(r.current=new $(t.current,d),r.current=o(r.current),r.current.go(),r.current=s(r.current)))}),[d]),R((()=>()=>{var e;return null==(e=r.current)?void 0:e.destroy()}),[]),n.createElement(j,{ref:t,children:u?a:null,style:{opacity:u?0:1},...l})};return k.defaultProps={as:"span",options:{},getBeforeInit:e=>e,getAfterInit:e=>e},k}));

21

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

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

"build": "vite build && tsc",
"tsc": "tsc",
"start": "vite serve examples",

@@ -41,13 +42,13 @@ "prettier": "prettier --write \"**/*.{md,js}\"",

"dependencies": {
"@types/react": "^18.0.12",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"typeit": "^8.7.0",
"vite": "^2.9.12"
"@types/react": "^18.0.26",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typeit": "^8.7.1",
"vite": "^4.0.1"
},
"devDependencies": {
"@babel/preset-typescript": "^7.17.12",
"typescript": "^4.7.3"
},
"gitHead": "9dadb02e14ffad67e9c859430aafcc6db1583d22"
"@babel/preset-typescript": "^7.18.6",
"terser": "^5.16.1",
"typescript": "^4.9.4"
}
}
dist/examples/app.d.ts
dist/src/index.d.ts
LICENSE
src/types/index.d.ts
src/index.tsx

Sorry, the diff of this file is not supported yet

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