typeit-react - npm Package Compare versions

Comparing version 2.0.9 to 2.1.0

dist/index.es.js

@@ -700,22 +700,3 @@ var __defProp = Object.defineProperty;
 }
-const voidElements = [
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-];
-var isVoidElement = (elementName) => {
-  return voidElements.indexOf(elementName.toLowerCase()) > -1;
-};
-const { useRef, useEffect, useState, useMemo } = React;
+const { useRef, useEffect, useState } = React;
 const defaultProps = {
@@ -728,36 +709,44 @@ as: "span",
 const TypeIt = (props) => {
-  const [shouldRenderChildren, setShouldRenderChildren] = useState(true);
-  const ref = useRef(null);
+  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 [shouldShowChildren, setShouldShowChildren] = useState(true);
+  const [instanceOptions, setInstanceOptions] = useState(null);
   const DynamicElement = as;
-  const elementIsVoid = useMemo(() => {
-    return isVoidElement(DynamicElement);
-  }, [DynamicElement]);
-  useEffect(() => {
-    if (children) {
-      options.strings = ref.current.innerHTML;
+  function calculateOptions() {
+    const optionsClone = Object.assign({}, options);
+    if (children && elementRef.current) {
+      optionsClone.strings = elementRef.current.innerHTML;
     }
-    setShouldRenderChildren(false);
-  }, []);
+    setInstanceOptions(optionsClone);
+  }
+  function generateNewInstance() {
+    instanceRef.current = new TypeIt$1(elementRef.current, instanceOptions);
+    instanceRef.current = getBeforeInit(instanceRef.current);
+    instanceRef.current.go();
+    instanceRef.current = getAfterInit(instanceRef.current);
+  }
   useEffect(() => {
-    if (shouldRenderChildren) {
+    calculateOptions();
+    setShouldShowChildren(false);
+  }, [options]);
+  useEffect(() => {
+    var _a2;
+    if (!instanceOptions)
       return;
-    }
-    let i = new TypeIt$1(ref.current, __spreadValues({}, options));
-    i = getBeforeInit(i);
-    i.go();
-    i = getAfterInit(i);
+    ((_a2 = instanceRef.current) == null ? void 0 : _a2.updateOptions(instanceOptions)) || generateNewInstance();
+  }, [instanceOptions]);
+  useEffect(() => {
     return () => {
-      i.destroy();
+      var _a2;
+      return (_a2 = instanceRef.current) == null ? void 0 : _a2.destroy();
     };
-  }, [shouldRenderChildren]);
-  return /* @__PURE__ */ React.createElement("div", {
-    style: { opacity: shouldRenderChildren ? 0 : 1 }
-  }, elementIsVoid ? /* @__PURE__ */ React.createElement(DynamicElement, __spreadValues({
-    ref
-  }, remainingProps)) : /* @__PURE__ */ React.createElement(DynamicElement, __spreadValues({
-    ref
-  }, remainingProps), shouldRenderChildren && children));
+  }, []);
+  return /* @__PURE__ */ React.createElement(DynamicElement, __spreadValues({
+    ref: elementRef,
+    children: shouldShowChildren ? children : null,
+    style: { opacity: shouldShowChildren ? 0 : 1 }
+  }, remainingProps));
 };
 TypeIt.defaultProps = defaultProps;
 export { TypeIt as default };

dist/index.umd.js

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

package.json

 {
   "name": "typeit-react",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "description": "React component for the most versatile JavaScript animated typing utility on the planet.",
@@ -42,4 +42,4 @@ "homepage": "https://typeitjs.com",
     "react-dom": "^17.0.2",
-    "typeit": "^8.0.9",
-    "vite": "^2.7.3"
+    "typeit": "^8.1.0",
+    "vite": "^2.7.4"
   },
@@ -51,3 +51,3 @@ "devDependencies": {
   },
-  "gitHead": "df890d54994a793b7f80ccf2ce00d1f5d40e8c0d"
+  "gitHead": "6a5a794a1f6b6f8da850d8bfbc5daaa9c76b58a1"
 }

No alert changes

Worsened metrics

Total package byte prevSize

78736

decreased by-1.23%

Number of package files

8

decreased by-33.33%

Lines of code

878

decreased by-6.7%

Dependency changes

• Updatedtypeit@^8.1.0

• Updatedvite@^2.7.4