typeit - npm Package Compare versions

Comparing version 8.6.4 to 8.6.5

dist/index.es.js

@@ -296,7 +296,5 @@ // TypeIt by Alex MacArthur - https://typeitjs.com
 };
-const DEFAULT_FRAMES = [
-  { opacity: 0 },
-  { opacity: 0 },
-  { opacity: 1 }
-];
+const DEFAULT_FRAMES = [0, 0, 1].map((n) => {
+  return { opacity: n };
+});
 let setCursorAnimation = ({
@@ -311,3 +309,9 @@ cursor,
   });
+  animation.pause();
   animation.id = cursor.dataset.tiAnimationId;
+  beforePaint(() => {
+    beforePaint(() => {
+      animation.play();
+    });
+  });
   return animation;
@@ -324,3 +328,3 @@ };
   let oldCurrentTime;
-  if (animation && animation.playState !== "idle") {
+  if (animation) {
     timingOptions.delay = animation.effect.getComputedTiming().delay;
@@ -369,14 +373,15 @@ oldCurrentTime = animation.currentTime;
   let fire = async () => {
-    let animation2 = getAnimationFromElement(cursor);
-    let timingOptions2, frames2;
-    if (animation2) {
+    let animation = getAnimationFromElement(cursor);
+    let timingOptions2 = {};
+    let frames2 = null;
+    if (animation) {
       timingOptions2 = cursor ? {
-        ...animation2.effect.getComputedTiming(),
+        ...animation.effect.getComputedTiming(),
         delay: queueItem.shouldPauseCursor() ? CURSOR_ANIMATION_RESTART_DELAY : 0
       } : {};
-      frames2 = cursor ? animation2.effect.getKeyframes() : [];
+      frames2 = cursor ? animation.effect.getKeyframes() : [];
     }
     await wait2(async () => {
-      if (animation2 && queueItem.shouldPauseCursor()) {
-        animation2.cancel();
+      if (animation && queueItem.shouldPauseCursor()) {
+        animation.cancel();
       }
@@ -387,6 +392,6 @@ await beforePaint(() => {
     }, queueItem.delay);
-    return { animation: animation2, frames: frames2, timingOptions: timingOptions2 };
+    return { frames: frames2, timingOptions: timingOptions2 };
   };
-  let { animation, frames, timingOptions } = await fire();
-  animation && rebuildCursorAnimation({
+  let { frames, timingOptions } = await fire();
+  await rebuildCursorAnimation({
     cursor,
@@ -393,0 +398,0 @@ frames,

dist/index.umd.js

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

package.json

 {
   "name": "typeit",
-  "version": "8.6.4",
+  "version": "8.6.5",
   "description": "The most versatile animated typing utility on the planet.",
@@ -61,3 +61,3 @@ "author": "Alex MacArthur <[e-mail]> (https://macarthur.me)",
   },
-  "gitHead": "be00e9f19bf0caddbb027a66435394af4b117f3f"
+  "gitHead": "0a49a65bd6c31a18d1991d919152a712f6493f14"
 }

src/helpers/fireItem.ts

@@ -51,3 +51,2 @@ import { CURSOR_ANIMATION_RESTART_DELAY } from "../constants";
   let fire = async (): Promise<{
-    animation: Animation;
     timingOptions: object;
@@ -59,3 +58,4 @@ frames: AnimationKeyFrame[];
     let animation = getAnimationFromElement(cursor);
-    let timingOptions: object, frames: AnimationKeyFrame[];
+    let timingOptions: object = {};
+    let frames: AnimationKeyFrame[] = null;
 
@@ -75,3 +75,5 @@ if (animation) {
     await wait(async () => {
-      // Pause the cursor while stuff is happening.
+      // If it's a qualified queue item, pause the cursor at the
+      // beginning of the item's execution by destroying the aniatmion.
+      // Immediately after completing, the animation will be recreated (with a delay).
       if (animation && queueItem.shouldPauseCursor()) {
@@ -86,13 +88,12 @@ animation.cancel();
 
-    return { animation, frames, timingOptions };
+    return { frames, timingOptions };
   };
 
-  let { animation, frames, timingOptions } = await fire();
+  let { frames, timingOptions } = await fire();
 
-  animation &&
-    rebuildCursorAnimation({
-      cursor,
-      frames,
-      timingOptions,
-    });
+  await rebuildCursorAnimation({
+    cursor,
+    frames,
+    timingOptions,
+  });
 
@@ -99,0 +100,0 @@ return index;

src/helpers/rebuildCursorAnimation.ts

 import { El } from "../types";
+import beforePaint from "./beforePaint";
 import getAnimationFromElement from "./getAnimationFromElement";
@@ -29,3 +30,3 @@ import setCursorAnimation from "./setCursorAnimation";
   // so carry over the timing properties we care about.
-  if (animation && animation.playState !== "idle") {
+  if (animation) {
     timingOptions.delay = animation.effect.getComputedTiming().delay;
@@ -32,0 +33,0 @@

src/helpers/setCursorAnimation.ts

 import { El } from "../types";
+import beforePaint from "./beforePaint";
 
@@ -9,7 +10,5 @@ const DEFAULT_TIMING_OPTIONS: Partial<AnimationEffectTiming> = {
 
-const DEFAULT_FRAMES: AnimationKeyFrame[] = [
-  { opacity: 0 },
-  { opacity: 0 },
-  { opacity: 1 },
-];
+const DEFAULT_FRAMES: AnimationKeyFrame[] = [0, 0, 1].map((n) => {
+  return { opacity: n };
+});
 
@@ -33,4 +32,15 @@ /**
 
+  animation.pause();
+
   animation.id = cursor.dataset.tiAnimationId;
 
+  // Kicking back the animation until after the next repaint
+  // prevents odd freezing issues when a new animation is
+  // generated in place of an older one.
+  beforePaint(() => {
+    beforePaint(() => {
+      animation.play();
+    });
+  });
+
   return animation;
@@ -37,0 +47,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

117768

increased by0.41%

Lines of code

2303

increased by0.66%

No dependency changes