typeit - npm Package Compare versions

Comparing version 8.6.2 to 8.6.3

dist/constants.d.ts

 import { Options } from "./types";
 export declare const DATA_ATTRIBUTE = "data-typeit-id";
 export declare const CURSOR_CLASS = "ti-cursor";
-export declare const CURSOR_WRAPPER_CLASS = "ti-cursor-wrapper";
 export declare const START = "START";
@@ -6,0 +5,0 @@ export declare const END = "END";

dist/helpers/rebuildCursorAnimation.d.ts

@@ -13,3 +13,3 @@ /// <reference types="web-animations-js" />
 }
-declare let rebuildCursorAnimation: ({ cursor, frames, timingOptions }: rebuildCursorAnimationArgs) => Animation;
+declare let rebuildCursorAnimation: ({ cursor, frames, timingOptions, }: rebuildCursorAnimationArgs) => Animation;
 export default rebuildCursorAnimation;

dist/helpers/setCursorAnimation.d.ts

@@ -6,3 +6,3 @@ /// <reference types="web-animations-js" />
  */
-declare let setCursorAnimation: ({ cursor, frames, timingOptions }: {
+declare let setCursorAnimation: ({ cursor, frames, timingOptions, }: {
     cursor: El;
@@ -9,0 +9,0 @@ frames?: AnimationKeyFrame[] | null;

dist/index.es.js

@@ -73,3 +73,2 @@ // TypeIt by Alex MacArthur - https://typeitjs.com
 const CURSOR_CLASS = "ti-cursor";
-const CURSOR_WRAPPER_CLASS = "ti-cursor-wrapper";
 const END = "END";
@@ -254,3 +253,3 @@ const DEFAULT_STATUSES = {
   }, "");
-  appendStyleBlock(`${cursorSelector} { display: inline-block; width: 0; ${customProperties} } .${CURSOR_WRAPPER_CLASS} { display: inline-block; font: inherit; color: inherit; }`, id);
+  appendStyleBlock(`${cursorSelector} { display: inline-block; width: 0; ${customProperties} }`, id);
 };
@@ -362,14 +361,16 @@ var duplicate = (value, times) => new Array(times).fill(value);
   let fire = async () => {
-    let animation2 = cursor == null ? void 0 : cursor.getAnimations()[0];
+    let animations = (cursor == null ? void 0 : cursor.getAnimations()) || [];
+    let animation = animations[0];
+    let hasAnimation2 = animations.length > 0;
     let timingOptions2, frames2;
-    if (animation2) {
+    if (hasAnimation2) {
       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 (queueItem.shouldPauseCursor()) {
-        animation2 == null ? void 0 : animation2.cancel();
+      if (hasAnimation2 && queueItem.shouldPauseCursor()) {
+        animation.cancel();
       }
@@ -380,6 +381,6 @@ await beforePaint(() => {
     }, queueItem.delay);
-    return { animation: animation2, frames: frames2, timingOptions: timingOptions2 };
+    return { hasAnimation: hasAnimation2, frames: frames2, timingOptions: timingOptions2 };
   };
-  let { animation, frames, timingOptions } = await fire();
-  animation && rebuildCursorAnimation({
+  let { hasAnimation, frames, timingOptions } = await fire();
+  hasAnimation && rebuildCursorAnimation({
     cursor,
@@ -386,0 +387,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 c(e,t=!0){return t?u(a(e)):n(e).map(r)}var d=e=>document.createElement(e),f=(e,t="")=>{let n=d("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())}))}));const N={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={}})=>e.animate(t||M,{...N,...n}),I=e=>{var t;return null==(t=e.func)?void 0:t.call(globalThis)},P=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 I(e)})),l-1;let{animation:u,frames:c,timingOptions:d}=await(async()=>{let e,t,a=null==r?void 0:r.getAnimations()[0];return a&&(e=r?{...a.effect.getComputedTiming(),delay:i.shouldPauseCursor()?500:0}:{},t=r?a.effect.getKeyframes():[]),await n((async()=>{i.shouldPauseCursor()&&(null==a||a.cancel()),await L((()=>{I(i)}))}),i.delay),{animation:a,frames:t,timingOptions:e}})();return u&&(({cursor:e,frames:t,timingOptions:n})=>{if(!e)return;let r,i=e.getAnimations()[0];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:c,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)=>P({index:e,queueItems:t,wait:L,cursor:ee}),M=()=>m(j),I=(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],D=()=>(e=>m(e)?n(e.value):u(e,!0).filter((e=>!(e.childNodes.length>0))))(j),O=(e,t)=>(Y.add(e),((e={})=>{let t=e.delay;t&&Y.add({delay:t})})(t),this),A=()=>null!=W?W:U,H=(e={})=>[{func:()=>B(e)},{func:()=>B(K)}],k=e=>{let t=K.nextStringDelay;Y.add([{delay:t[0]},...e,{delay:t[1]}])},F=async()=>{!M()&&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} } .ti-cursor-wrapper { display: inline-block; font: inherit; color: inherit; }`,e)})(G,j),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(d("BR")),typeable:!0}]:S({func:V,delay:I(1)},Y.getTypeable().length);k(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&&D().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=A();t&&await q({value:t});let n=D().map((e=>[Symbol(),{func:V,delay:I(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=D(),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,D(),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()=>{M()?j.value="":D().forEach(T)},V=()=>{let e=D();e.length&&(M()?j.value=j.value.slice(0,-1):T(e[U]))};this.break=function(e){return O({func:()=>z(d("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:A(),to:a});return O([n[0],...S({func:V,delay:i?0:I(1),deletable:!0},o),n[1]],t)},this.empty=function(e={}){return O({func:_},e)},this.exec=function(e,t={}){let n=H(t);return O([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:A()}),l=a<0?-1:1;return W=A()+a,O([n[0],...S({func:()=>q(l),delay:r?0:I(),cursorable:!0},Math.abs(a)),n[1]],t)},this.options=function(e,t={}){return e=g(e),B(e),O({},t)},this.pause=function(e,t={}){return O({delay:g(e)},t)},this.type=function(e,t={}){e=g(e);let{instant:n}=t,r=H(t),i=c(e,K.html).map((e=>{return{func:()=>z(e),char:e,delay:n||(t=e,/<(.+)>(.*?)<\/(.+)>/.test(t.outerHTML))?0:I(),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 O(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[M()?"value":"innerHTML"]="",this},this.go=function(){return X.started?this:(F(),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 F(),$(!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({},o),K=w(s,r);K=w(K,{html:!M()&&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&&!M(),ee=(()=>{if(M())return;let e=d("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),k(S({func:V,delay:I(1),deletable:!0},D().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",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 c(e,t=!0){return t?u(a(e)):n(e).map(r)}var d=e=>document.createElement(e),f=(e,t="")=>{let n=d("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())}))}));const N={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={}})=>e.animate(t||M,{...N,...n}),I=e=>{var t;return null==(t=e.func)?void 0:t.call(globalThis)},P=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 I(e)})),l-1;let{hasAnimation:u,frames:c,timingOptions:d}=await(async()=>{let e,t,a=(null==r?void 0:r.getAnimations())||[],l=a[0],o=a.length>0;return o&&(e=r?{...l.effect.getComputedTiming(),delay:i.shouldPauseCursor()?500:0}:{},t=r?l.effect.getKeyframes():[]),await n((async()=>{o&&i.shouldPauseCursor()&&l.cancel(),await L((()=>{I(i)}))}),i.delay),{hasAnimation:o,frames:t,timingOptions:e}})();return u&&(({cursor:e,frames:t,timingOptions:n})=>{if(!e)return;let r,i=e.getAnimations()[0];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:c,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)=>P({index:e,queueItems:t,wait:L,cursor:ee}),M=()=>m(j),I=(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],A=()=>(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()=>{!M()&&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),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(d("BR")),typeable:!0}]:S({func:V,delay:I(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&&A().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=A().map((e=>[Symbol(),{func:V,delay:I(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=A(),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,A(),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()=>{M()?j.value="":A().forEach(w)},V=()=>{let e=A();e.length&&(M()?j.value=j.value.slice(0,-1):w(e[U]))};this.break=function(e){return D({func:()=>z(d("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:I(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:I(),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=c(e,K.html).map((e=>{return{func:()=>z(e),char:e,delay:n||(t=e,/<(.+)>(.*?)<\/(.+)>/.test(t.outerHTML))?0:I(),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[M()?"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:!M()&&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&&!M(),ee=(()=>{if(M())return;let e=d("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:I(1),deletable:!0},A().length)),e):t.replace(/<!--(.+?)-->/g,"").trim().split(/<br(?:\s*?)(?:\/)?>/).concat(e)):e})(t(K.strings)),K.strings.length&&R()}}));

dist/types.d.ts

@@ -20,3 +20,3 @@ export declare type TypeItInstance = (element: El | string, options: Options) => void;
     startDelete?: boolean;
-    strings?: string[];
+    strings?: string[] | string;
     waitUntilVisible?: boolean;
@@ -23,0 +23,0 @@ beforeString?: Function;

package.json

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

src/constants.ts

@@ -5,3 +5,2 @@ import { Options } from "./types";
 export const CURSOR_CLASS = "ti-cursor";
-export const CURSOR_WRAPPER_CLASS = "ti-cursor-wrapper";
 export const START = "START";
@@ -8,0 +7,0 @@ export const END = "END";

src/helpers/beforePaint.ts

@@ -5,7 +5,6 @@ let beforePaint = (cb): Promise<any> => {
       resolve(await cb());
-    })
+    });
   });
-}
+};
 
 export default beforePaint;
-

src/helpers/duplicate.ts

@@ -1,1 +0,2 @@
-export default <T>(value: T, times: number): T[] => new Array(times).fill(value);
+export default <T>(value: T, times: number): T[] =>
+  new Array(times).fill(value);

src/helpers/fireItem.ts

@@ -31,7 +31,7 @@ import { CURSOR_ANIMATION_RESTART_DELAY } from "../constants";
     instantQueue.push(futureItem);
-    
+
     shouldBeGrouped() && tempIndex++;
     futureItem = queueItems[tempIndex] ? queueItems[tempIndex][1] : null;
   }
-  
+
   if (instantQueue.length) {
@@ -44,3 +44,3 @@ // All are executed together before the browser has a chance to repaint.
     });
-    
+
     // Important! Because we moved into the future, the index
@@ -51,37 +51,48 @@ // needs to be modified and returned for accurate remaining execution.
 
-  let fire = async (): Promise<{animation: Animation, timingOptions: object, frames: AnimationKeyFrame[]}> => {
-    // An animation is only registered on the cursor when it's made visible. 
+  let fire = async (): Promise<{
+    hasAnimation: boolean;
+    timingOptions: object;
+    frames: AnimationKeyFrame[];
+  }> => {
+    // An animation is only registered on the cursor when it's made visible.
     // If the cursor has been disabled, there won't be one here.
-    let animation = cursor?.getAnimations()[0];
+    let animations = cursor?.getAnimations() || [];
+    let animation = animations[0];
+    let hasAnimation = animations.length > 0;
     let timingOptions: object, frames: AnimationKeyFrame[];
 
-    if(animation) {
-      timingOptions = cursor ? {
-        ...animation.effect.getComputedTiming(),
-        delay: queueItem.shouldPauseCursor() ? CURSOR_ANIMATION_RESTART_DELAY : 0
-      } : {};
+    if (hasAnimation) {
+      timingOptions = cursor
+        ? {
+            ...animation.effect.getComputedTiming(),
+            delay: queueItem.shouldPauseCursor()
+              ? CURSOR_ANIMATION_RESTART_DELAY
+              : 0,
+          }
+        : {};
       frames = cursor ? animation.effect.getKeyframes() : [];
     }
-    
+
     await wait(async () => {
       // Pause the cursor while stuff is happening.
-      if(queueItem.shouldPauseCursor()) {
-        animation?.cancel();
+      if (hasAnimation && queueItem.shouldPauseCursor()) {
+        animation.cancel();
       }
 
-      await beforePaint(() => {    
+      await beforePaint(() => {
         execute(queueItem);
-      })
+      });
     }, queueItem.delay);
 
-    return { animation, frames, timingOptions };
-  }
+    return { hasAnimation, frames, timingOptions };
+  };
 
-  let { animation, frames, timingOptions } = await fire();
+  let { hasAnimation, frames, timingOptions } = await fire();
 
-  animation && rebuildCursorAnimation({
-    cursor,
-    frames,
-    timingOptions
-  });
+  hasAnimation &&
+    rebuildCursorAnimation({
+      cursor,
+      frames,
+      timingOptions,
+    });
 
@@ -88,0 +99,0 @@ return index;

src/helpers/getAllChars.ts

@@ -11,12 +11,11 @@ import isInput from "./isInput";
 let getAllChars = (element: El) => {
-    if(isInput(element)) {
-      return toArray(element.value);
-    }
+  if (isInput(element)) {
+    return toArray(element.value);
+  }
 
-    return walkElementNodes(
-      element,
-      true
-    ).filter(c => !(c.childNodes.length > 0));
+  return walkElementNodes(element, true).filter(
+    (c) => !(c.childNodes.length > 0)
+  );
 };
 
 export default getAllChars;

src/helpers/insertIntoElement.ts

@@ -10,6 +10,3 @@ import isInput from "./isInput";
  */
-let insertIntoElement = (
-  originalTarget: El,
-  character: El
-) => {
+let insertIntoElement = (originalTarget: El, character: El) => {
   if (isInput(originalTarget)) {
@@ -20,16 +17,15 @@ originalTarget.value = `${originalTarget.value}${character.textContent}`;
 
-  // Necessary for creating *empty* elements that will 
+  // Necessary for creating *empty* elements that will
   // later be filled with actual characters.
   character.innerHTML = "";
 
-  let target = isBodyElement(character.originalParent as El) 
-  ? originalTarget
-  
-  // If we add one-off fresh elements, there will be no 
-  // "originalParent", so always fall back to the default target.
-  : character.originalParent || originalTarget;
+  let target = isBodyElement(character.originalParent as El)
+    ? originalTarget
+    : // If we add one-off fresh elements, there will be no
+      // "originalParent", so always fall back to the default target.
+      character.originalParent || originalTarget;
 
   target.insertBefore(
     character as El,
-    select("." + CURSOR_CLASS, target) as Node || null
+    (select("." + CURSOR_CLASS, target) as Node) || null
   );
@@ -36,0 +32,0 @@ };

src/helpers/rebuildCursorAnimation.ts

@@ -6,3 +6,3 @@ import { El } from "../types";
   interface AnimationEffect {
-    getKeyframes: () => any
+    getKeyframes: () => any;
   }
@@ -12,5 +12,5 @@ }
 interface rebuildCursorAnimationArgs {
-  cursor: El | undefined, 
-  frames: AnimationKeyFrame[], 
-  timingOptions: any
+  cursor: El | undefined;
+  frames: AnimationKeyFrame[];
+  timingOptions: any;
 }
@@ -20,16 +20,16 @@
   cursor,
-  frames, 
-  timingOptions
+  frames,
+  timingOptions,
 }: rebuildCursorAnimationArgs): Animation => {
-  if(!cursor) return;
-  
+  if (!cursor) return;
+
   let animation = cursor.getAnimations()[0];
   let oldCurrentTime: number;
 
-  // An existing animation is actively running... 
-  // so carry over the timing properties we care about. 
+  // An existing animation is actively running...
+  // so carry over the timing properties we care about.
   if (animation && animation.playState !== "idle") {
     timingOptions.delay = animation.effect.getComputedTiming().delay;
 
-    // This needs to be set later, since there's no way to pass 
+    // This needs to be set later, since there's no way to pass
     // the current time into the constructor.
@@ -45,8 +45,8 @@ oldCurrentTime = animation.currentTime;
     frames,
-    timingOptions
+    timingOptions,
   });
-  
+
   // By setting the currentTime, the animation will
-  // be in sync with the previous one. But when we're 
-  // totally pausing the animation (indicated by a `delay` 
+  // be in sync with the previous one. But when we're
+  // totally pausing the animation (indicated by a `delay`
   // value), there's no need to do this.
@@ -53,0 +53,0 @@ if (oldCurrentTime) {

src/helpers/removeNode.ts

 export default (node: Node): void => {
-  if(!node) return;
+  if (!node) return;
 
   let nodeParent = node.parentNode as HTMLElement;
-  let nodeToRemove = nodeParent.childNodes.length > 1
-    // This parent still needs to exist.
-    ? node
+  let nodeToRemove =
+    nodeParent.childNodes.length > 1
+      ? // This parent still needs to exist.
+        node
+      : // There's nothing else in there, so just delete the entire thing.
+        // By doing this, we clean up markup as we go along.
+        nodeParent;
 
-    // There's nothing else in there, so just delete the entire thing.
-    // By doing this, we clean up markup as we go along.
-    : nodeParent;
-
   (nodeToRemove as Element).remove();
 };

src/helpers/selectorToElement.ts

@@ -5,5 +5,3 @@ import { El } from "../types";
 export default function (thing: string | El): El {
-  return typeof thing === "string"
-    ? (select(thing as string) as El)
-    : thing;
+  return typeof thing === "string" ? (select(thing as string) as El) : thing;
 }

src/helpers/setCursorAnimation.ts

@@ -21,3 +21,3 @@ import { El } from "../types";
   frames = null,
-  timingOptions = {}
+  timingOptions = {},
 }: {
@@ -24,0 +24,0 @@ cursor: El;

src/helpers/setCursorStyles.ts

@@ -1,2 +0,2 @@
-import { CURSOR_CLASS, CURSOR_WRAPPER_CLASS, DATA_ATTRIBUTE } from "../constants";
+import { CURSOR_CLASS, DATA_ATTRIBUTE } from "../constants";
 import { El } from "../types";
@@ -12,9 +12,6 @@ import appendStyleBlock from "./appendStyleBlock";
   color: "",
-  transform: "translateX(-.125em)"
+  transform: "translateX(-.125em)",
 } as const;
 
-export let setCursorStyles = (
-  id: string,
-  element: El
-) => {
+export let setCursorStyles = (id: string, element: El) => {
   let rootSelector = `[${DATA_ATTRIBUTE}='${id}']`;
@@ -34,5 +31,5 @@ let cursorSelector = `${rootSelector} .${CURSOR_CLASS}`;
   appendStyleBlock(
-    `${cursorSelector} { display: inline-block; width: 0; ${customProperties} } .${CURSOR_WRAPPER_CLASS} { display: inline-block; font: inherit; color: inherit; }`,
+    `${cursorSelector} { display: inline-block; width: 0; ${customProperties} }`,
     id
   );
 };

src/helpers/wait.ts

 /**
  * Fire a callback after a delay, and add the timeout ID to a referenced array.
  */
-let wait = (callback: Function, delay: number | undefined, timeouts: number[]) => {
+let wait = (
+  callback: Function,
+  delay: number | undefined,
+  timeouts: number[]
+) => {
   return new Promise<void>((resolve) => {
@@ -6,0 +10,0 @@ let cb = async () => {

src/index.ts

@@ -70,10 +70,13 @@ import Queue from "./Queue";
 
-  let _fireItemWithCursor = (index: number, queueItems: QueueMapPair[]): Promise<number> => {
+  let _fireItemWithCursor = (
+    index: number,
+    queueItems: QueueMapPair[]
+  ): Promise<number> => {
     return fireItem({
-            index,
-            queueItems,
-            wait: _wait,
-            cursor: _cursor as El,
-          });
-  }
+      index,
+      queueItems,
+      wait: _wait,
+      cursor: _cursor as El,
+    });
+  };
 
@@ -168,3 +171,3 @@ let _elementIsInput = () => isInput(_element);
   let _generateQueue = () => {
-    let strings = _opts.strings.filter((string) => !!string);
+    let strings = (_opts.strings as string[]).filter((string) => !!string);
 
@@ -203,22 +206,21 @@ strings.forEach((string, index) => {
     // in order to wipe the slate clean before restarting.
-    // 
-    // It's important to first convert each deletion to a 
+    //
+    // It's important to first convert each deletion to a
     // queue item, so that we can take advantage of the same
     // cursor-pausing logic (and anything else that might be
     // introduced in the future).
-    let queueItems: QueueMapPair[] = _getAllChars().map(c => {
+    let queueItems: QueueMapPair[] = _getAllChars().map((c) => {
       return [
-        Symbol(), 
+        Symbol(),
         {
-          func: _delete, 
-          delay: _getPace(1), 
-          deletable: true, 
-          shouldPauseCursor: () => true
-        }
-      ]
+          func: _delete,
+          delay: _getPace(1),
+          deletable: true,
+          shouldPauseCursor: () => true,
+        },
+      ];
     });
 
-    for(let index = 0; index < queueItems.length; index++) {
-      await _fireItemWithCursor(        index,
-        queueItems);
+    for (let index = 0; index < queueItems.length; index++) {
+      await _fireItemWithCursor(index, queueItems);
     }
@@ -489,3 +491,3 @@
             delay: instant ? 0 : _getPace(),
-            cursorable: true
+            cursorable: true,
           },
@@ -492,0 +494,0 @@ Math.abs(numberOfSteps)

src/Queue.ts

@@ -31,6 +31,6 @@ import asArray from "./helpers/asArray";
       return Boolean(this.typeable || this.cursorable || this.deletable);
-    }
+    };
 
     return queueItem;
-  }
+  };
 
@@ -37,0 +37,0 @@ /**

src/types.ts

@@ -22,3 +22,3 @@ export type TypeItInstance = (element: El | string, options: Options) => void;
   startDelete?: boolean;
-  strings?: string[];
+  strings?: string[] | string;
   waitUntilVisible?: boolean;
@@ -54,5 +54,5 @@ beforeString?: Function;
 
-  // An item should pause the cursor of it's 
+  // An item should pause the cursor of it's
   // EITHER "typeable," "cusorable," or "deleteable."
-  shouldPauseCursor?: () => boolean
+  shouldPauseCursor?: () => boolean;
 };
@@ -59,0 +59,0 @@

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

Lines of code

2269

increased by0.4%

Worsened metrics

Total package byte prevSize

116426

decreased by-0.12%

No dependency changes