typeit-react - npm Package Compare versions

Comparing version 2.5.1 to 2.5.2

dist/index.es.js

@@ -387,16 +387,23 @@ var __defProp = Object.defineProperty;
   }
-  let animation = cursor == null ? void 0 : cursor.getAnimations()[0];
-  let timingOptions = cursor ? __spreadProps(__spreadValues({}, animation.effect.getComputedTiming()), {
-    delay: queueItem.shouldPauseCursor() ? CURSOR_ANIMATION_RESTART_DELAY : 0
-  }) : {};
-  let frames = cursor ? animation.effect.getKeyframes() : [];
-  await wait2(async () => {
-    if (queueItem.shouldPauseCursor()) {
-      animation == null ? void 0 : animation.cancel();
+  let fire = async () => {
+    let animation2 = cursor == null ? void 0 : cursor.getAnimations()[0];
+    let timingOptions2, frames2;
+    if (animation2) {
+      timingOptions2 = cursor ? __spreadProps(__spreadValues({}, animation2.effect.getComputedTiming()), {
+        delay: queueItem.shouldPauseCursor() ? CURSOR_ANIMATION_RESTART_DELAY : 0
+      }) : {};
+      frames2 = cursor ? animation2.effect.getKeyframes() : [];
     }
-    await beforePaint(() => {
-      execute(queueItem);
-    });
-  }, queueItem.delay);
-  rebuildCursorAnimation({
+    await wait2(async () => {
+      if (queueItem.shouldPauseCursor()) {
+        animation2 == null ? void 0 : animation2.cancel();
+      }
+      await beforePaint(() => {
+        execute(queueItem);
+      });
+    }, queueItem.delay);
+    return { animation: animation2, frames: frames2, timingOptions: timingOptions2 };
+  };
+  let { animation, frames, timingOptions } = await fire();
+  animation && rebuildCursorAnimation({
     cursor,
@@ -422,2 +429,10 @@ frames,
   };
+  let _fireItemWithCursor = (index, queueItems) => {
+    return fireItem({
+      index,
+      queueItems,
+      wait: _wait,
+      cursor: _cursor
+    });
+  };
   let _elementIsInput = () => isInput(_element);
@@ -488,4 +503,15 @@ let _getPace = (index = 0) => calculatePace(_opts)[index];
     derivedCursorPosition && await _move({ value: derivedCursorPosition });
-    for (let _i of _getAllChars()) {
-      await _wait(_delete, _getPace(1));
+    let queueItems = _getAllChars().map((c) => {
+      return [
+        Symbol(),
+        {
+          func: _delete,
+          delay: _getPace(1),
+          deletable: true,
+          shouldPauseCursor: () => true
+        }
+      ];
+    });
+    for (let index = 0; index < queueItems.length; index++) {
+      await _fireItemWithCursor(index, queueItems);
     }
@@ -526,8 +552,3 @@ _queue.reset();
         if (!queueItem.deletable || queueItem.deletable && _getAllChars().length) {
-          let newIndex = await fireItem({
-            index,
-            queueItems,
-            wait: _wait,
-            cursor: _cursor
-          });
+          let newIndex = await _fireItemWithCursor(index, queueItems);
           Array(newIndex - index).fill(index + 1).map((x, y) => x + y).forEach((i) => {
@@ -534,0 +555,0 @@ let [key] = queueItems[i];

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

package.json

 {
   "name": "typeit-react",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "React component for the most versatile JavaScript animated typing utility on the planet.",
@@ -43,3 +43,3 @@ "homepage": "https://typeitjs.com",
     "react-dom": "^18.1.0",
-    "typeit": "^8.6.1",
+    "typeit": "^8.6.2",
     "vite": "^2.9.12"
@@ -51,3 +51,3 @@ },
   },
-  "gitHead": "3600a4d499c4792d0488f016f48d3c230087a78b"
+  "gitHead": "0cc007e43d2ecc37b715188debaa95ef1fff9d98"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81967

increased by1.08%

Lines of code

956

increased by2.36%

Dependency changes

• Updatedtypeit@^8.6.2