typeit-react
Advanced tools
Comparing version 2.0.4 to 2.0.5
@@ -1,13 +0,24 @@ | ||
import * as React from 'react'; | ||
export interface TypeItOptions { | ||
strings?: Array<string> | string; | ||
/// <reference types="react" /> | ||
declare module "helpers/isVoidElement" { | ||
const _default: (elementName: string) => boolean; | ||
/** | ||
* Given the name of an element, check if it's one of the "void" elements, | ||
* which cannot contain any children. | ||
*/ | ||
export default _default; | ||
} | ||
export interface TypeItProps { | ||
as?: keyof JSX.IntrinsicElements; | ||
options?: TypeItOptions; | ||
children?: React.ReactNode; | ||
getBeforeInit?: (instance: any) => Function; | ||
getAfterInit?: (instance: any) => Function; | ||
declare module "index" { | ||
import * as React from 'react'; | ||
export interface TypeItOptions { | ||
strings?: Array<string> | string; | ||
} | ||
export interface TypeItProps { | ||
as?: keyof JSX.IntrinsicElements; | ||
options?: TypeItOptions; | ||
children?: React.ReactNode; | ||
getBeforeInit?: (instance: any) => Function; | ||
getAfterInit?: (instance: any) => Function; | ||
} | ||
const TypeIt: React.FunctionComponent<TypeItProps>; | ||
export default TypeIt; | ||
} | ||
declare const TypeIt: React.FunctionComponent<TypeItProps>; | ||
export default TypeIt; |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e||self).TypeIt=t(e.react)}(this,function(e){function t(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var n=t(e);function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}const o=[null,null,{}];var i=(e,t)=>Object.assign({},e,t),u=e=>Array.from(e),s=e=>{let t=document.implementation.createHTMLDocument();return t.body.innerHTML=e,t.body};const c=(e,t=null,n=!1)=>{let r=u(e.childNodes).flatMap(e=>{return 3===(t=e).nodeType||"BR"===t.tagName?e:c(e);var t});return t&&(r=r.filter(e=>!t.contains(e))),n?r.reverse():r},l=(e,t=null)=>({node:t,content:e});function a(e){let t=s(e);return c(t).flatMap(e=>e.nodeValue?u(e.nodeValue).map(t=>l(t,e)):l(e))}function f(e,t=!0){return t?a(e):u(e).map(e=>l(e))}var h=e=>document.createElement(e),d=e=>document.createTextNode(e),m=(e,t="")=>{let n=h("style");n.id=t,n.appendChild(d(e)),document.head.appendChild(n)},v=e=>Array.isArray(e);const p=e=>Number.isInteger(e),y=(e,t=document,n=!1)=>t["querySelector"+(n?"All":"")](e),g={started:!1,completed:!1,frozen:!1,destroyed:!1},b={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:()=>{}};var P=({el:e,move:t,cursorPos:n,to:r})=>p(t)?-1*t:((e,t,n="START")=>{let r=new RegExp("END","i").test(n),o=y(".ti-cursor",t),i=e?y(e,t):t,u=c(i,o,!0),s=u[0],l=u[u.length-1],a=r&&!e?0:c(t,o,!0).findIndex(e=>e.isSameNode(r?s:l));return r&&a--,a+1})(t,e,r)-n,S=e=>(v(e)||(e=[e/2,e/2]),e),T=(e,t)=>Math.abs(Math.random()*(e+t-(e-t))+(e-t));let j=e=>e/2;var M=e=>"value"in e;const N=e=>"function"==typeof e?e():e;var w=e=>"BODY"===e.tagName;const E=(e,t)=>{let n=u(y("*",t,!0));return[t].concat(n.reverse()).find(t=>t.cloneNode().isEqualNode(e.cloneNode()))},L=(e,t,n,r)=>{let o=t.content instanceof HTMLElement,i=t.node,u=null==i?void 0:i.parentNode,s=o?t.content:d(t.content);if(M(e))return void(e.value=""+e.value+t.content);if(!o&&u&&!w(u)){let r=E(u,e);if(r&&((e,t)=>{let n=e.nextSibling;return!n||n.isEqualNode(t)})(r,n))e=r;else{s=u.cloneNode(),s.appendChild(d(t.content));let n=u.parentNode,r=n.cloneNode();if(!w(n)){let t=E(r,e);for(;!t&&!w(n);){let o=r;o.innerHTML=s.outerHTML,s=o,n=n.parentNode,r=n.cloneNode(),t=E(r,e)}e=t||e}}}let l=c(e,n,!0)[r-1],a=l?l.parentNode:e;a.insertBefore(s,a.contains(n)?n:null)};var x=e=>e&&e.remove();const k={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"","margin-left":"-.125em","margin-right":".125em"};function D(e,t,n){if(!e.s){if(n instanceof O){if(!n.s)return void(n.o=D.bind(null,e,t));1&t&&(t=n.s),n=n.v}if(n&&n.then)return void n.then(D.bind(null,e,t),D.bind(null,e,2));e.s=t,e.v=n;const r=e.o;r&&r(e)}}const O=function(){function e(){}return e.prototype.then=function(t,n){const r=new e,o=this.s;if(o){const e=1&o?t:n;if(e){try{D(r,1,e(this.v))}catch(e){D(r,2,e)}return r}return this}return this.o=function(e){try{const o=e.v;1&e.s?D(r,1,t?t(o):o):n?D(r,1,n(o)):D(r,2,o)}catch(e){D(r,2,e)}},r},e}();function I(e){return e instanceof O&&1&e.s}function C(e,t,n){var r,o,i=-1;return function u(s){try{for(;++i<e.length&&(!n||!n());)if((s=t(i))&&s.then){if(!I(s))return void s.then(u,o||(o=D.bind(null,r=new O,2)));s=s.v}r?D(r,1,s):r=s}catch(e){D(r||(r=new O),2,e)}}(),r}function H(e,t,n){for(var r;;){var o=e();if(I(o)&&(o=o.v),!o)return i;if(o.then){r=0;break}var i=n();if(i&&i.then){if(!I(i)){r=1;break}i=i.s}if(t){var u=t();if(u&&u.then&&!I(u)){r=2;break}}}var s=new O,c=D.bind(null,s,2);return(0===r?o.then(a):1===r?i.then(l):u.then(f)).then(void 0,c),s;function l(r){i=r;do{if(t&&(u=t())&&u.then&&!I(u))return void u.then(f).then(void 0,c);if(!(o=e())||I(o)&&!o.v)return void D(s,1,i);if(o.then)return void o.then(a).then(void 0,c);I(i=n())&&(i=i.v)}while(!i||!i.then);i.then(l).then(void 0,c)}function a(e){e?(i=n())&&i.then?i.then(l).then(void 0,c):l(i):D(s,1,i)}function f(){(o=e())?o.then?o.then(a).then(void 0,c):a(o):D(s,1,i)}}function z(e,t={}){const n=this,r=this,d=function(e,t,r=!1){try{function o(){function o(o){return Promise.resolve(function(e,t,n){try{return Promise.resolve(new Promise(r=>{n.push(setTimeout(function(){try{return Promise.resolve(e()).then(function(){r()})}catch(e){return Promise.reject(e)}},t))}))}catch(e){return Promise.reject(e)}}(e,t,J)).then(function(){return r?void 0:Promise.resolve(Z.afterStep(n)).then(function(e){})})}return r?o():Promise.resolve(Z.beforeStep(n)).then(o)}const i=function(){if(X.frozen)return Promise.resolve(new Promise(e=>{n.unfreeze=()=>{X.frozen=!1,e()}})).then(function(){})}();return Promise.resolve(i&&i.then?i.then(o):o())}catch(e){return Promise.reject(e)}},w=()=>M(F),E=e=>function(e){let{speed:t,deleteSpeed:n,lifeLike:r}=e;return n=null!==n?n:t/3,r?[T(t,j(t)),T(n,j(n))]:[t,n]}(Z)[e],D=(e,t=0)=>e?E(t):0,O=(e,t)=>(ee.add(e),((e={})=>{let t=e.delay;t&&ee.add([[q,t]])})(t),this),I=()=>(e=>M(e)?u(e.value):c(e,y(".ti-cursor",e),!0))(F),z=(e={})=>[[_,e],[_,Z]],A=e=>{let t=Z.nextStringDelay;ee.add([[q,t[0]],...e,[q,t[1]]])},B=e=>{te&&(ne.classList.toggle("disabled",e),ne.classList.toggle("with-delay",!e))},R=function(){try{let e;X.started=!0;let t=ee.getItems();const n=function(e,n){try{var o=function(){function e(){return X.completed=!0,Promise.resolve(Z.afterComplete(r)).then(function(){if(!Z.loop)throw"";let e=Z.loopDelay;d(function(){try{return Promise.resolve(function(e){try{function t(t){return ee.reset(),ee.set(0,[q,e,{}]),Promise.resolve(Y({num:null})).then(function(){})}return Promise.resolve(K?Promise.resolve(V({value:K})).then(t):t())}catch(e){return Promise.reject(e)}}(e[0])).then(function(){R()})}catch(e){return Promise.reject(e)}},e[1])})}const n=C(t,function(e){let n=t[e],o=n[2];return o.freezeCursor&&B(!0),Promise.resolve(n[0].call(r,n[1],o)).then(function(){ee.setMeta(e,{executed:!0}),B(!1)})});return n&&n.then?n.then(e):e()}()}catch(e){return}return o&&o.then?o.then(void 0,function(){}):o}();return Promise.resolve(n&&n.then?n.then(function(t){return e?t:r}):e?n:r)}catch(e){return Promise.reject(e)}},q=(e=0)=>d(()=>{},e),V=function({value:e,to:t="START",instant:n=!1}){try{let r=P({el:F,move:e,cursorPos:K,to:t}),o=()=>{var e,t,n;e=r<0?-1:1,t=K,n=I(),K=Math.min(Math.max(t+e,0),n.length),((e,t,n,r)=>{let o=t[r-1];(e=(null==o?void 0:o.parentNode)||e).insertBefore(n,o||null)})(F,I(),ne,K)};return Promise.resolve(d(function(){try{let e=0;const t=H(function(){return e<Math.abs(r)},function(){return e++},function(){return n?void o():Promise.resolve(d(o,E(0))).then(function(e){})});return Promise.resolve(t&&t.then?t.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},D(n))).then(function(){})}catch(e){return Promise.reject(e)}},U=({chars:e,instant:t,silent:n})=>{const r=this;return d(function(){try{function o(o){function u(){return n?void 0:Promise.resolve(Z.afterString(e,r)).then(function(e){})}const s=C(e,function(n){return t?void i(e[n]):Promise.resolve(d(()=>{i(e[n])},E(0))).then(function(e){})});return s&&s.then?s.then(u):u()}const i=e=>L(F,e,ne,K);return Promise.resolve(n?o():Promise.resolve(Z.beforeString(e,r)).then(o))}catch(e){return Promise.reject(e)}},D(t),!0)},_=function(e){try{return Z=i(Z,e),Promise.resolve()}catch(e){return Promise.reject(e)}},Q=function(){try{return w()?(F.value="",Promise.resolve()):(I().forEach(e=>{x(e)}),Promise.resolve())}catch(e){return Promise.reject(e)}},Y=function({num:e=null,instant:t=!1,to:n="START"}){try{return Promise.resolve(d(function(){try{let r=p(e)?e:P({el:F,move:e,cursorPos:K,to:n});const o=()=>{let e=I();var t;e.length&&(w()?F.value=F.value.slice(0,-1):(x(e[K]),t=ne,y("*",F,!0).forEach(e=>{if(!e.innerHTML&&"BR"!==e.tagName&&!e.isSameNode(t)){let t=e;for(;1===t.parentElement.childNodes.length;)t=t.parentElement;x(t)}})))};let i=0;const u=H(function(){return i<r},function(){return i++},function(){return t?void o():Promise.resolve(d(o,E(1))).then(function(e){})});return Promise.resolve(u&&u.then?u.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},D(t,1))).then(function(){const t=function(){if(null===e&&I().length-1>0)return Promise.resolve(Y({num:null})).then(function(){})}();if(t&&t.then)return t.then(function(){})})}catch(e){return Promise.reject(e)}};this.break=function(e){const t=l(h("BR"));return O([[U,{chars:[t],silent:!0}]],e)},this.delete=function(e=null,t={}){e=N(e);let n=z(t),r=e,{instant:o,to:i}=t;return O([n[0],[Y,{num:r,instant:o,to:i},W],n[1]],t)},this.empty=function(e={}){return O([[Q]],e)},this.exec=function(e,t){let n=z(t);return O([n[0],[e,null],n[1]],t)},this.move=function(e,t={}){e=N(e);let n=z(t),{instant:r,to:o}=t;return O([n[0],[V,{value:null===e?"":e,to:o,instant:r},W],n[1]],t)},this.options=function(e){return e=N(e),O([[_,e]],e)},this.pause=function(e,t={}){return O([[q,N(e)]],t)},this.type=function(e,t={}){e=N(e);let n=z(t),r=f(e,Z.html),{instant:o}=t;return O([n[0],[U,{chars:r,instant:o},W],n[1]],t)},this.is=function(e){return X[e]},this.destroy=function(e=!0){J.forEach(e=>clearTimeout(e)),J=[],N(e)&&x(ne),X.destroyed=!0},this.freeze=function(){X.frozen=!0},this.unfreeze=function(){},this.reset=function(){!this.is("destroyed")&&this.destroy(),ee.reset(),K=0;for(let e in X)X[e]=!1;return F[w()?"value":"innerHTML"]="",this},this.go=function(){return X.started?this:(function(){try{!w()&&F.appendChild(ne),te?(((e,t,n)=>{let r="[data-typeit-id='"+e+"'] .ti-cursor",o=getComputedStyle(n),i=Object.entries(k).reduce((e,[t,n])=>e+" "+t+": var(--ti-"+t+", "+(n||o[t])+");","");m("@keyframes blink-"+e+" { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} } "+r+" { display: inline; letter-spacing: -1em; "+i+" animation: blink-"+e+" "+t.cursorSpeed/1e3+"s infinite; } "+r+".with-delay { animation-delay: 500ms; } "+r+".disabled { animation: none; }",e)})($,Z,F),Promise.resolve()):Promise.resolve()}catch(e){return Promise.reject(e)}}(),Z.waitUntilVisible?(((e,t)=>{new IntersectionObserver((n,r)=>{n.forEach(n=>{n.isIntersecting&&(t(),r.unobserve(e))})},{threshold:1}).observe(e)})(F,R.bind(this)),this):(R(),this))},this.getQueue=function(){return ee},this.getOptions=function(){return Z},this.getElement=function(){return F};let F="string"==typeof(G=e)?y(G):G;var G;let J=[],K=0,W={freezeCursor:!0},X=i({},g),Z=i(b,t);Z=i(Z,{html:!w()&&Z.html,nextStringDelay:S(Z.nextStringDelay),loopDelay:S(Z.loopDelay)});let $=Math.random().toString().substring(2,9),ee=function(e){const t=function(e){return n=n.concat(e.map(e=>o.map((t,n)=>e[n]?e[n]:t))),this};let n=[];return t(e),{add:t,set:function(e,t){n[e]=t},reset:function(){n=n.map(e=>(e[2].executed=!1,e))},getItems:function(){return n.filter(e=>!e[2].executed)},setMeta:function(e,t){n[e][2]=i(n[e][2],t)}}}([[q,Z.startDelay]]);F.dataset.typeitId=$,m("[data-typeit-id]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}");let te=Z.cursor&&!w(),ne=(()=>{if(w())return;let e=h("span");return e.className="ti-cursor",te?(e.innerHTML=s(Z.cursorChar).innerHTML,e):(e.style.visibility="hidden",e)})();var re;Z.strings=(e=>{let t=F.innerHTML;return t?(F.innerHTML="",Z.startDelete?(a(t).forEach(e=>{L(F,e,ne,K)}),A([[Y,{num:null}]]),e):t.trim().split(/<br(?:\s*?)(?:\/)?>/).concat(e)):e})(v(re=Z.strings)?re:[re]),Z.strings.length&&(()=>{let e=Z.strings.filter(e=>!!e);e.forEach((t,n)=>{let r=f(t,Z.html);if(ee.add([[U,{chars:r},W]]),n+1===e.length)return;const o=Z.breakLines?[[U,{chars:[l(h("BR"))],silent:!0},W]]:[[Y,{num:r.length},W]];A(o)})})()}var A=["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"],B=["options","as","children","getBeforeInit","getAfterInit"],R=n.useRef,q=n.useEffect,V=n.useState,U=n.useMemo,_=function(e){var t=V(!0),o=t[0],i=t[1],u=R(null),s=e.options,c=e.as,l=e.children,a=e.getBeforeInit,f=e.getAfterInit,h=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}(e,B),d=c,m=U(function(){return A.indexOf(d.toLowerCase())>-1},[d]);return q(function(){l&&(s.strings=u.current.innerHTML),i(!1)},[]),q(function(){if(!o){var e=new z(u.current,r({},s));return(e=a(e)).go(),e=f(e),function(){e.destroy()}}},[o]),n.createElement("div",{style:{opacity:o?0:1}},m?n.createElement(d,r({ref:u},h)):n.createElement(d,r({ref:u},h),o&&l))};return _.defaultProps={as:"span",options:{},getBeforeInit:function(e){return e},getAfterInit:function(e){return e}},_}); | ||
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-${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}); |
{ | ||
"name": "typeit-react", | ||
"version": "2.0.4", | ||
"version": "2.0.5", | ||
"description": "React component for the most versatile JavaScript animated typing utility on the planet.", | ||
"homepage": "https://typeitjs.com", | ||
"main": "dist/index.umd.js", | ||
"module": "dist/index.esm.js", | ||
"module": "dist/index.es.js", | ||
"types": "dist/index.d.ts", | ||
"scripts": { | ||
"build": "microbundle -i src/index.tsx -o dist/index.js --name TypeIt --no-sourcemap --jsx React.createElement && scripts/banner", | ||
"watch": "microbundle -i src/index.tsx -o dist/index.js --name TypeIt --format umd --no-sourcemap --jsx React.createElement watch", | ||
"build": "vite build && tsc", | ||
"start": "vite serve examples", | ||
"prettier": "prettier --write \"**/*.{md,js}\"", | ||
"test": "echo \"Error: no test specified\" && exit 1", | ||
"prepare": "husky install" | ||
"test": "echo \"Error: no test specified\" && exit 0" | ||
}, | ||
@@ -40,20 +39,14 @@ "files": [ | ||
"dependencies": { | ||
"@types/react": "^17.0.32" | ||
}, | ||
"peerDependencies": { | ||
"@types/react": "^17.0.32", | ||
"react": "^17.0.2", | ||
"react-dom": "^17.0.2" | ||
"react-dom": "^17.0.2", | ||
"typeit": "^8.0.5", | ||
"vite": "^2.6.10" | ||
}, | ||
"devDependencies": { | ||
"@babel/preset-typescript": "^7.15.0", | ||
"husky": "^7.0.4", | ||
"lint-staged": "^11.2.4", | ||
"microbundle": "^0.14.1", | ||
"prettier": "^2.4.1", | ||
"typeit": "^8.0.4", | ||
"typescript": "^4.4.4" | ||
}, | ||
"lint-staged": { | ||
"*.{js,css,md}": "prettier --write" | ||
} | ||
"gitHead": "28ef6deb4e0fb7a040a44ab880e30d2d019e91d3" | ||
} |
# TypeIt - React | ||
The official React component for [TypeIt](https://github.com/alexmacarthur/typeit), the most versatile JavaScript animated typing utility on the planet. You can use it to bring dynamic typewriter effects to your React applications. | ||
The official React component for [TypeIt](https://typeitjs.com), the most versatile JavaScript animated typing utility on the planet. You can use it to bring dynamic typewriter effects to your React applications. | ||
@@ -5,0 +5,0 @@ ## License Options |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
3
952
2
79627
5
12
1
+ Addedreact@^17.0.2
+ Addedreact-dom@^17.0.2
+ Addedtypeit@^8.0.5
+ Addedvite@^2.6.10
+ Added@esbuild/linux-loong64@0.14.54(transitive)
+ Added@types/web-animations-js@2.2.16(transitive)
+ Addedesbuild@0.14.54(transitive)
+ Addedesbuild-android-64@0.14.54(transitive)
+ Addedesbuild-android-arm64@0.14.54(transitive)
+ Addedesbuild-darwin-64@0.14.54(transitive)
+ Addedesbuild-darwin-arm64@0.14.54(transitive)
+ Addedesbuild-freebsd-64@0.14.54(transitive)
+ Addedesbuild-freebsd-arm64@0.14.54(transitive)
+ Addedesbuild-linux-32@0.14.54(transitive)
+ Addedesbuild-linux-64@0.14.54(transitive)
+ Addedesbuild-linux-arm@0.14.54(transitive)
+ Addedesbuild-linux-arm64@0.14.54(transitive)
+ Addedesbuild-linux-mips64le@0.14.54(transitive)
+ Addedesbuild-linux-ppc64le@0.14.54(transitive)
+ Addedesbuild-linux-riscv64@0.14.54(transitive)
+ Addedesbuild-linux-s390x@0.14.54(transitive)
+ Addedesbuild-netbsd-64@0.14.54(transitive)
+ Addedesbuild-openbsd-64@0.14.54(transitive)
+ Addedesbuild-sunos-64@0.14.54(transitive)
+ Addedesbuild-windows-32@0.14.54(transitive)
+ Addedesbuild-windows-64@0.14.54(transitive)
+ Addedesbuild-windows-arm64@0.14.54(transitive)
+ Addedfsevents@2.3.3(transitive)
+ Addedfunction-bind@1.1.2(transitive)
+ Addedhasown@2.0.2(transitive)
+ Addedis-core-module@2.15.1(transitive)
+ Addednanoid@3.3.7(transitive)
+ Addedpath-parse@1.0.7(transitive)
+ Addedpicocolors@1.1.1(transitive)
+ Addedpostcss@8.4.47(transitive)
+ Addedresolve@1.22.8(transitive)
+ Addedrollup@2.77.3(transitive)
+ Addedsource-map-js@1.2.1(transitive)
+ Addedsupports-preserve-symlinks-flag@1.0.0(transitive)
+ Addedtypeit@8.8.7(transitive)
+ Addedvite@2.9.18(transitive)