typeit-react - npm Package Compare versions

Comparing version 2.5.1-alpha.0 to 2.5.1

dist/index.es.js

 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -17,2 +19,3 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
@@ -39,3 +42,3 @@ var target = {};
       var _a;
-      return _q.set(Symbol((_a = step.char) == null ? void 0 : _a.innerText), __spreadValues({}, step));
+      return _q.set(Symbol((_a = step.char) == null ? void 0 : _a.innerText), buildQueueItem(__spreadValues({}, step)));
     });
@@ -47,4 +50,10 @@ return this;
     let keys = [..._q.keys()];
-    _q.set(keys[index], item);
+    _q.set(keys[index], buildQueueItem(item));
   };
+  let buildQueueItem = (queueItem) => {
+    queueItem.shouldPauseCursor = function() {
+      return Boolean(this.typeable || this.cursorable || this.deletable);
+    };
+    return queueItem;
+  };
   let reset = function() {
@@ -98,2 +107,3 @@ _q.forEach((item) => delete item.done);
 const CURSOR_CLASS = "ti-cursor";
+const CURSOR_WRAPPER_CLASS = "ti-cursor-wrapper";
 const END = "END";
@@ -134,7 +144,17 @@ const DEFAULT_STATUSES = {
 const PLACEHOLDER_CSS = `[${DATA_ATTRIBUTE}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`;
-function walkElementNodes(element, shouldReverse = false) {
+const CURSOR_ANIMATION_RESTART_DELAY = 500;
+function walkElementNodes(element, shouldReverse = false, shouldIncludeCursor = false) {
+  let cursor = element.querySelector(`.${CURSOR_CLASS}`);
   let walker = document.createTreeWalker(element, NodeFilter.SHOW_ALL, {
     acceptNode: (node) => {
-      var _a;
-      return ((_a = node.classList) == null ? void 0 : _a.contains(CURSOR_CLASS)) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
+      var _a, _b;
+      if (cursor && shouldIncludeCursor) {
+        if ((_a = node.classList) == null ? void 0 : _a.contains(CURSOR_CLASS)) {
+          return NodeFilter.FILTER_ACCEPT;
+        }
+        if (cursor.contains(node)) {
+          return NodeFilter.FILTER_REJECT;
+        }
+      }
+      return ((_b = node.classList) == null ? void 0 : _b.contains(CURSOR_CLASS)) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
     }
@@ -145,3 +165,5 @@ });
   while (nextNode = walker.nextNode()) {
-    nextNode.originalParent = nextNode.parentNode;
+    if (!nextNode.originalParent) {
+      nextNode.originalParent = nextNode.parentNode;
+    }
     nodes.push(nextNode);
@@ -212,3 +234,3 @@ }
 };
-let isBodyElement = (node) => (node == null ? void 0 : node.tagName) === "BODY";
+let isBodyElement = (node) => /body/i.test(node == null ? void 0 : node.tagName);
 let insertIntoElement = (originalTarget, character) => {
@@ -238,6 +260,3 @@ if (isInput(originalTarget)) {
   element = (nodeToInsertBefore == null ? void 0 : nodeToInsertBefore.parentNode) || element;
-  if (nodeToInsertBefore) {
-    return nodeToInsertBefore.before(cursor);
-  }
-  element.append(cursor);
+  element.insertBefore(cursor, nodeToInsertBefore || null);
 };
@@ -248,3 +267,3 @@ function selectorToElement(thing) {
 var isNonVoidElement = (el) => /<(.+)>(.*?)<\/(.+)>/.test(el.outerHTML);
-let wait = async (callback, delay, timeouts) => {
+let wait = (callback, delay, timeouts) => {
   return new Promise((resolve) => {
@@ -265,6 +284,5 @@ let cb = async () => {
   color: "",
-  "margin-left": "-.125em",
-  "margin-right": ".125em"
+  transform: "translateX(-.125em)"
 };
-let setCursorStyles = (id, options, element) => {
+let setCursorStyles = (id, element) => {
   let rootSelector = `[${DATA_ATTRIBUTE}='${id}']`;
@@ -276,3 +294,3 @@ let cursorSelector = `${rootSelector} .${CURSOR_CLASS}`;
   }, "");
-  appendStyleBlock(`@keyframes blink-${id} { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} } ${cursorSelector} { display: inline; letter-spacing: -1em; ${customProperties} animation: blink-${id} ${options.cursorSpeed / 1e3}s infinite; } ${cursorSelector}.with-delay { animation-delay: 500ms; } ${cursorSelector}.disabled { animation: none; }`, id);
+  appendStyleBlock(`${cursorSelector} { display: inline-block; width: 0; ${customProperties} } .${CURSOR_WRAPPER_CLASS} { display: inline-block; font: inherit; color: inherit; }`, id);
 };
@@ -311,2 +329,43 @@ var duplicate = (value, times) => new Array(times).fill(value);
 };
+const DEFAULT_TIMING_OPTIONS = {
+  iterations: Infinity,
+  easing: "steps(2, start)",
+  fill: "forwards"
+};
+const DEFAULT_FRAMES = [
+  { opacity: 0 },
+  { opacity: 0 },
+  { opacity: 1 }
+];
+let setCursorAnimation = ({
+  cursor,
+  frames = null,
+  timingOptions = {}
+}) => {
+  return cursor.animate(frames || DEFAULT_FRAMES, __spreadValues(__spreadValues({}, DEFAULT_TIMING_OPTIONS), timingOptions));
+};
+let rebuildCursorAnimation = ({
+  cursor,
+  frames,
+  timingOptions
+}) => {
+  if (!cursor)
+    return;
+  let animation = cursor.getAnimations()[0];
+  let oldCurrentTime;
+  if (animation && animation.playState !== "idle") {
+    timingOptions.delay = animation.effect.getComputedTiming().delay;
+    oldCurrentTime = animation.currentTime;
+    animation.cancel();
+  }
+  let newAnimation = setCursorAnimation({
+    cursor,
+    frames,
+    timingOptions
+  });
+  if (oldCurrentTime) {
+    newAnimation.currentTime = oldCurrentTime;
+  }
+  return newAnimation;
+};
 let execute = (queueItem) => {
@@ -316,3 +375,8 @@ var _a;
 };
-let fireItem = async (index, queueItems, wait2) => {
+let fireItem = async ({
+  index,
+  queueItems,
+  wait: wait2,
+  cursor
+}) => {
   let queueItem = queueItems[index][1];
@@ -336,3 +400,20 @@ let instantQueue = [];
   }
-  await wait2(() => beforePaint(() => execute(queueItem)), queueItem.delay);
+  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();
+    }
+    await beforePaint(() => {
+      execute(queueItem);
+    });
+  }, queueItem.delay);
+  rebuildCursorAnimation({
+    cursor,
+    frames,
+    timingOptions
+  });
   return index;
@@ -392,8 +473,10 @@ };
     !_elementIsInput() && _cursor && _element.appendChild(_cursor);
-    _shouldRenderCursor && setCursorStyles(_id, _opts, _element);
-  };
-  let _disableCursorBlink = (shouldDisable) => {
-    if (_shouldRenderCursor && _cursor) {
-      _cursor.classList.toggle("disabled", shouldDisable);
-      _cursor.classList.toggle("with-delay", !shouldDisable);
+    if (_shouldRenderCursor) {
+      setCursorStyles(_id, _element);
+      setCursorAnimation({
+        cursor: _cursor,
+        timingOptions: {
+          duration: _opts.cursorSpeed
+        }
+      });
     }
@@ -446,3 +529,2 @@ };
     let cleanUp = (qKey) => {
-      _disableCursorBlink(false);
       _queue.done(qKey, !remember);
@@ -456,6 +538,9 @@ };
           continue;
-        if (queueItem.typeable && !_statuses.frozen)
-          _disableCursorBlink(true);
         if (!queueItem.deletable || queueItem.deletable && _getAllChars().length) {
-          let newIndex = await fireItem(index, queueItems, _wait);
+          let newIndex = await fireItem({
+            index,
+            queueItems,
+            wait: _wait,
+            cursor: _cursor
+          });
           Array(newIndex - index).fill(index + 1).map((x, y) => x + y).forEach((i) => {
@@ -569,3 +654,4 @@ let [key] = queueItems[i];
         func: () => _move(directionalStep),
-        delay: instant ? 0 : _getPace()
+        delay: instant ? 0 : _getPace(),
+        cursorable: true
       }, Math.abs(numberOfSteps)),
@@ -572,0 +658,0 @@ bookEndQueueItems[1]

dist/index.umd.js

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

package.json

 {
   "name": "typeit-react",
-  "version": "2.5.1-alpha.0",
+  "version": "2.5.1",
   "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-alpha.0",
+    "typeit": "^8.6.1",
     "vite": "^2.9.12"
@@ -51,3 +51,3 @@ },
   },
-  "gitHead": "55d58a67ba5f12a5251a35f215ec12d7341c90bb"
+  "gitHead": "3600a4d499c4792d0488f016f48d3c230087a78b"
 }

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81088

increased by3.99%

Lines of code

934

increased by10.53%

Number of low quality alerts

2

decreased by-33.33%

Dependency changes

• Updatedtypeit@^8.6.1