stimulus-use - npm Package Compare versions

Comparing version 0.22.0-1 to 0.22.0

dist/index.d.ts

@@ -9,2 +9,3 @@ export { useIntersection, IntersectionController } from './use-intersection/index';
 export { useHover, UseHover, HoverController } from './use-hover/index';
+export { useMutation, UseMutation, MutationController } from './use-mutation/index';
 export { useWindowResize, WindowResizeController } from './use-window-resize/index';
@@ -11,0 +12,0 @@ export { useMemo } from './use-memo/index';

dist/index.js

@@ -9,2 +9,3 @@ export { useIntersection, IntersectionController } from './use-intersection/index';
 export { useHover, UseHover, HoverController } from './use-hover/index';
+export { useMutation, UseMutation, MutationController } from './use-mutation/index';
 export { useWindowResize, WindowResizeController } from './use-window-resize/index';
@@ -11,0 +12,0 @@ export { useMemo } from './use-memo/index';

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("stimulus")):"function"==typeof define&&define.amd?define(["exports","stimulus"],n):n((e=e||self).StimulusUse={},e.Stimulus)}(this,function(e,n){var t=function(e,n){var t=e[n];if("function"==typeof t)return t;throw new Error('undefined method "'+n+'"')},i=function(e,n,t){var i=e;return!0===t?i=n.identifier+":"+e:"string"==typeof t&&(i=t+":"+e),i},r=function(e,n,t){var i=n||{bubbles:!0,cancelable:!0,composed:!0},r=i.bubbles,o=i.cancelable,s=i.composed;return n&&Object.assign(t,{originalEvent:n}),new CustomEvent(e,{bubbles:r,cancelable:o,composed:s,detail:t})},o={dispatchEvent:!0,eventPrefix:!0},s=function(e,n){var s;void 0===n&&(n={});var l=Object.assign({},o,n),c=l.dispatchEvent,a=l.eventPrefix,u=(null==(s=n)?void 0:s.element)||e.element,v=e.disconnect.bind(e),d=new IntersectionObserver(function(n){var o=n[0];o.isIntersecting?function(n){if(e.isVisible=!0,e.appear&&t(e,"appear").call(e,n),c){var o=i("appear",e,a),s=r(o,null,{controller:e,entry:n});u.dispatchEvent(s)}}(o):e.isVisible&&function(n){if(e.isVisible=!1,e.disappear&&t(e,"disappear").call(e,n),c){var o=i("disappear",e,a),s=r(o,null,{controller:e,entry:n});u.dispatchEvent(s)}}(o)},n),f=function(){d.observe(u)},b=function(){d.unobserve(u)};return Object.assign(e,{isVisible:!1,disconnect:function(){b(),v()}}),f(),[f,b]};function l(){return(l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}function c(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var u=function(e){function n(n){var t;return(t=e.call(this,n)||this).isVisible=!1,requestAnimationFrame(function(){var e=s(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n}(n.Controller),v=function(e,n){var i=e.disconnect.bind(e),r=new IntersectionObserver(function(n){n[0].isIntersecting&&!e.isLoaded&&function(n){var i=e.data.get("src");if(i){var r=e.element;e.isLoading=!0,e.loading&&t(e,"loading").call(e,i),r.onload=function(){!function(n){e.isLoading=!1,e.isLoaded=!0,e.loading&&t(e,"loaded").call(e,n)}(i)},r.src=i}}()},n),o=function(){r.observe(e.element)},s=function(){r.unobserve(e.element)};return Object.assign(e,{isVisible:!1,disconnect:function(){s(),i()}}),o(),[o,s]},d=function(e){function n(n){var t;return(t=e.call(this,n)||this).isLoading=!1,t.isLoaded=!1,t.options={rootMargin:"10%"},requestAnimationFrame(function(){var e=v(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}c(n,e);var t=n.prototype;return t.loading=function(e){},t.loaded=function(e){},n}(n.Controller),f={dispatchEvent:!0,eventPrefix:!0},b=function(e,n){var o;void 0===n&&(n={});var s=Object.assign({},f,n),l=s.dispatchEvent,c=s.eventPrefix,a=(null==(o=n)?void 0:o.element)||e.element,u=e.disconnect.bind(e),v=new ResizeObserver(function(n){var o=n[0];if(e.resize&&t(e,"resize").call(e,o.contentRect),l){var s=i("resize",e,c),u=r(s,null,{controller:e,entry:o});a.dispatchEvent(u)}}),d=function(){v.observe(a)},b=function(){v.unobserve(a)};return Object.assign(e,{disconnect:function(){b(),u()}}),d(),[d,b]},m=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=b(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n.prototype.resize=function(e){},n}(n.Controller),h={events:["click","touchend"],onlyVisible:!0,dispatchEvent:!0,eventPrefix:!0},p=function(e,n){void 0===n&&(n={});var o=Object.assign({},h,n),s=o.onlyVisible,l=o.dispatchEvent,c=o.events,a=o.eventPrefix,u=function(o){var c,u,v=(null==(c=n)?void 0:c.element)||e.element;if(!v.contains(o.target)&&((u=v.getBoundingClientRect()).top>=0&&u.left>=0&&u.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&u.right<=(window.innerWidth||document.documentElement.clientWidth)||!s)&&(e.clickOutside&&t(e,"clickOutside").call(e,o),l)){var d=i("click:outside",e,a),f=r(d,o,{controller:e});v.dispatchEvent(f)}},v=function(){null==c||c.forEach(function(e){window.addEventListener(e,u,!1)})},d=function(){null==c||c.forEach(function(e){window.removeEventListener(e,u,!1)})},f=e.disconnect.bind(e);return Object.assign(e,{disconnect:function(){d(),f()}}),v(),[v,d]},g=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=p(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n.prototype.clickOutside=function(e){},n}(n.Controller),E={debug:!1,logger:console},y=function(e,n){var t,i,r,o,s,c=this;void 0===n&&(n={}),this.log=function(e,n){c.debug&&(c.logger.groupCollapsed("%c"+c.controller.identifier+" %c#"+e,"color: #3B82F6","color: unset"),c.logger.log(l({controllerId:c.controllerId},n)),c.logger.groupEnd())},this.debug=null!=(t=null!=(i=null==(r=n)?void 0:r.debug)?i:e.application.stimulusUseDebug)?t:E.debug,this.logger=null!=(o=null==(s=n)?void 0:s.logger)?o:E.logger,this.controller=e,this.controllerId=e.element.id||e.element.dataset.id,this.controllerInitialize=e.initialize.bind(e),this.controllerConnect=e.connect.bind(e),this.controllerDisconnect=e.disconnect.bind(e)},w=function(e){function n(n,t){var r,o,s,l,c;return void 0===t&&(t={}),(c=e.call(this,n,t)||this).dispatch=function(e,n){void 0===n&&(n={});var t=a(c),r=t.targetElement,o=t.eventPrefix,s=t.bubbles,l=t.cancelable,u=t.log;Object.assign(n,{controller:t.controller});var v=i(e,c.controller,o),d=new CustomEvent(v,{detail:n,bubbles:s,cancelable:l});return r.dispatchEvent(d),u("dispatch",{eventName:v,detail:n,bubbles:s,cancelable:l}),d},c.targetElement=null!=(r=t.element)?r:n.element,c.eventPrefix=null==(o=t.eventPrefix)||o,c.bubbles=null==(s=t.bubbles)||s,c.cancelable=null==(l=t.cancelable)||l,c.enhanceController(),c}return c(n,e),n.prototype.enhanceController=function(){Object.assign(this.controller,{dispatch:this.dispatch})},n}(y),C=function(e,n){return void 0===n&&(n={}),new w(e,n)},O=function(e,n){Object.defineProperty(e,"isPreview",{get:function(){return document.documentElement.hasAttribute("data-turbolinks-preview")}}),Object.defineProperty(e,"csrfToken",{get:function(){return this.metaValue("csrf-token")}}),C(e,n),Object.assign(e,{metaValue:function(e){var n=document.head.querySelector('meta[name="'+e+'"]');return n&&n.getAttribute("content")}})},j=function(e){function n(n){var t;return(t=e.call(this,n)||this).isPreview=!1,t.csrfToken="",O(a(t),t.options),t}return c(n,e),n}(n.Controller),L={ms:6e4,initialState:!1,events:["mousemove","mousedown","resize","keydown","touchstart","wheel"],dispatchEvent:!0,eventPrefix:!0},P=function(e,n){void 0===n&&(n={});var o=Object.assign({},L,n),s=o.ms,l=o.events,c=o.dispatchEvent,a=o.eventPrefix,u=o.initialState,v=setTimeout(function(){u=!0,d()},s),d=function(n){var o=i("away",e,a);if(e.isIdle=!0,e.away&&t(e,"away").call(e,n),c){var s=r(o,n||null,{controller:e});e.element.dispatchEvent(s)}},f=function(n){var o=i("back",e,a);if(e.isIdle=!1,e.back&&t(e,"back").call(e,n),c){var s=r(o,n||null,{controller:e});e.element.dispatchEvent(s)}},b=function(e){u&&f(e),u=!1,clearTimeout(v),v=setTimeout(function(){u=!0,d(e)},s)},m=function(e){document.hidden||b(e)};u?d():f();var h=e.disconnect.bind(e),p=function(){l.forEach(function(e){window.addEventListener(e,b)}),document.addEventListener("visibilitychange",m)},g=function(){l.forEach(function(e){window.removeEventListener(e,b)}),document.removeEventListener("visibilitychange",m)};return Object.assign(e,{disconnect:function(){g(),h()}}),p(),[p,g]},V=function(e){function n(n){var t;return(t=e.call(this,n)||this).isIdle=!1,requestAnimationFrame(function(){var e=P(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}c(n,e);var t=n.prototype;return t.away=function(){},t.back=function(){},n}(n.Controller),x={dispatchEvent:!0,eventPrefix:!0},T=function(e){function n(n,o){var s;void 0===o&&(o={}),(s=e.call(this,n,o)||this).observe=function(){s.controller.isVisible=!document.hidden,document.addEventListener("visibilitychange",s.handleVisibilityChange)},s.unobserve=function(){document.removeEventListener("visibilitychange",s.handleVisibilityChange)},s.becomesInvisible=function(e){var n=i("invisible",s.controller,s.eventPrefix);s.controller.isVisible=!1,s.controller.invisible&&t(s.controller,"invisible").call(s.controller,e),s.log("invisible",{isVisible:!1}),s.dispatch(n,e)},s.becomesVisible=function(e){var n=i("visible",s.controller,s.eventPrefix);s.controller.isVisible=!0,s.controller.visible&&t(s.controller,"visible").call(s.controller,e),s.log("visible",{isVisible:!0}),s.dispatch(n,e)},s.dispatch=function(e,n){if(s.dispatchEvent){var t={controller:s.controller,isVisible:s.controller.isVisible},i=r(e,n||null,t);s.controller.element.dispatchEvent(i),s.log("dispatchEvent",l({eventName:e},t))}},s.handleVisibilityChange=function(e){document.hidden?s.becomesInvisible(e):s.becomesVisible(e)};var c=Object.assign({},x,o),u=c.dispatchEvent,v=c.eventPrefix;return Object.assign(a(s),{dispatchEvent:u,eventPrefix:v}),s.controller=n,Object.assign(n,{disconnect:function(){s.unobserve(),s.controllerDisconnect()}}),s.handleVisibilityChange(),s.observe(),s}return c(n,e),n}(y),z=function(e,n){void 0===n&&(n={});var t=new T(e,n);return[t.observe,t.unobserve]},A=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=z(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n}(n.Controller),I=function(e){function n(n,i){var r,o;return void 0===i&&(i={}),(o=e.call(this,n,i)||this).observe=function(){o.targetElement.addEventListener("mouseenter",o.onEnter),o.targetElement.addEventListener("mouseleave",o.onLeave)},o.unobserve=function(){o.targetElement.removeEventListener("mouseenter",o.onEnter),o.targetElement.removeEventListener("mouseleave",o.onLeave)},o.onEnter=function(){o.controller.mouseEnter&&t(o.controller,"mouseEnter").call(o.controller),o.log("mouseEnter",{hover:!0})},o.onLeave=function(){o.controller.mouseLeave&&t(o.controller,"mouseLeave").call(o.controller),o.log("mouseLeave",{hover:!1})},o.targetElement=(null==(r=i)?void 0:r.element)||n.element,o.controller=n,o.enhanceController(),o.observe(),o}return c(n,e),n.prototype.enhanceController=function(){var e=this,n=this.controller.disconnect.bind(this.controller);Object.assign(this.controller,{disconnect:function(){e.unobserve(),n()}})},n}(y),k=function(e,n){void 0===n&&(n={});var t=new I(e,n);return[t.observe,t.unobserve]},q=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=k(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n}(n.Controller),F=function(e){var n=function(n){var i=window,r={height:i.innerHeight||Infinity,width:i.innerWidth||Infinity,event:n};e.windowResize&&t(e,"windowResize").call(e,r)},i=e.disconnect.bind(e),r=function(){window.addEventListener("resize",n),n()},o=function(){window.removeEventListener("resize",n)};return Object.assign(e,{disconnect:function(){o(),i()}}),r(),[r,o]},R=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=F(a(t)),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n.prototype.windowResize=function(e){},n}(n.Controller),S=function(e,n){void 0===n&&(n=200);var t=null;return function(){var i=arguments,r=this,o=function(){return e.apply(r,i)};clearTimeout(t),t=setTimeout(o,n)}};function H(e,n){var t;return void 0===n&&(n=200),function(){var i=arguments,r=this;t||(t=!0,e.apply(r,i),setTimeout(function(){return t=!1},n))}}function D(e){var n=document.head.querySelector('meta[name="'+e+'"]');return n&&n.getAttribute("content")}function U(e){try{return JSON.parse(e)}catch(n){return e}}function M(e){return e.replace(/(?:[_-])([a-z0-9])/g,function(e,n){return n.toUpperCase()})}var N={enterClass:"enter",enterActiveClass:"enterStart",enterToClass:"enterEnd",leaveClass:"leave",leaveActiveClass:"leaveStart",leaveToClass:"leaveEnd"},W={dispatchEvent:!0,eventPrefix:!0,transitioned:!1,hiddenClass:"hidden"},_=function(e,n){var t,i,r,o,s=function(e,n,t,i){try{var r,o;return(r=e.classList).add.apply(r,n),(o=e.classList).add.apply(o,t),Promise.resolve(function(){try{return Promise.resolve(new Promise(function(e){requestAnimationFrame(function(){requestAnimationFrame(e)})}))}catch(e){return Promise.reject(e)}}()).then(function(){var r,o;return(r=e.classList).remove.apply(r,t),(o=e.classList).add.apply(o,i),Promise.resolve(function(e){try{return Promise.resolve(new Promise(function(n){var t=1e3*Number(getComputedStyle(e).transitionDuration.split(",")[0].replace("s",""));setTimeout(function(){n(t)},t)}))}catch(e){return Promise.reject(e)}}(e)).then(function(){var t;(t=e.classList).remove.apply(t,n)})})}catch(e){return Promise.reject(e)}},l=function(t){try{if(!e.transitioned)return Promise.resolve();e.transitioned=!1,p&&p(t);var i=B("leave",n,d),r=B("leaveActive",n,d),o=B("leaveTo",n,d);return Promise.resolve(s(v,i,r,o)).then(function(){m&&v.classList.add(m)})}catch(e){return Promise.reject(e)}},c=function(t){try{if(e.transitioned)return Promise.resolve();e.transitioned=!0,h&&h(t);var i=B("enter",n,d),r=B("enterActive",n,d),o=B("enterTo",n,d);return m&&v.classList.remove(m),Promise.resolve(s(v,i,r,o)).then(function(){})}catch(e){return Promise.reject(e)}};void 0===n&&(n={});var a,u=e.element.dataset.transitionTarget;u&&(a=e[u+"Target"]);var v=(null==(t=n)?void 0:t.element)||a||e.element;if(v instanceof HTMLElement||v instanceof SVGElement){var d=v.dataset,f=Object.assign(W,n),b=f.transitioned,m=f.hiddenClass,h=null==(i=e.enter)?void 0:i.bind(e),p=null==(r=e.leave)?void 0:r.bind(e),g=null==(o=e.toggleTransition)?void 0:o.bind(e);return e.transitioned=b,b?(m&&v.classList.remove(m),c()):(m&&v.classList.add(m),l()),Object.assign(e,{enter:c,leave:l,toggleTransition:E}),[c,l,E]}function E(n){g&&g(n),e.transitioned?l():c()}};function B(e,n,t){var i="transition"+e[0].toUpperCase()+e.substr(1);return(n[e]||t[i]||t[N[e]]||"").split(" ")}var G=function(e){function n(n){var t;return(t=e.call(this,n)||this).transitioned=!1,requestAnimationFrame(function(){_(a(t),t.options)}),t}return c(n,e),n}(n.Controller);e.ApplicationController=j,e.ClickOutsideController=g,e.HoverController=q,e.IdleController=V,e.IntersectionController=u,e.LazyLoadController=d,e.ResizeController=m,e.TransitionController=G,e.UseHover=I,e.UseVisibility=T,e.VisibilityController=A,e.WindowResizeController=R,e.useApplication=O,e.useClickOutside=p,e.useDebounce=function(e,n){var t;null==(t=e.constructor.debounces)||t.forEach(function(t){if("string"==typeof t&&(e[t]=S(e[t],null==n?void 0:n.wait)),"object"==typeof t){var i=t.name;if(!i)return;e[i]=S(e[i],t.wait||(null==n?void 0:n.wait))}})},e.useDispatch=C,e.useHover=k,e.useIdle=P,e.useIntersection=s,e.useLazyLoad=v,e.useMemo=function(e){var n;null==(n=e.constructor.memos)||n.forEach(function(n){!function(e,n,t){Object.defineProperty(e,n,{value:t})}(e,n,e[n])})},e.useMeta=function(e,n){void 0===n&&(n={suffix:!0});var t=e.constructor.metaNames,i=n.suffix;null==t||t.forEach(function(n){!function(e,n,t){var i=t?M(n)+"Meta":M(n);Object.defineProperty(e,i,{get:function(){return U(D(n))}})}(e,n,i)}),Object.defineProperty(e,"metas",{get:function(){var e={};return null==t||t.forEach(function(n){var t=U(D(n));null!=t&&(e[M(n)]=t)}),e}})},e.useResize=b,e.useThrottle=function(e,n){var t;null==(t=e.constructor.throttles)||t.forEach(function(t){if("string"==typeof t&&(e[t]=H(e[t],null==n?void 0:n.wait)),"object"==typeof t){var i=t.name;if(!i)return;e[i]=H(e[i],t.wait||(null==n?void 0:n.wait))}})},e.useTransition=_,e.useVisibility=z,e.useWindowResize=F});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("stimulus")):"function"==typeof define&&define.amd?define(["exports","stimulus"],n):n((e=e||self).StimulusUse={},e.Stimulus)}(this,function(e,n){var t=function(e,n){var t=e[n];if("function"==typeof t)return t;throw new Error('undefined method "'+n+'"')},i=function(e,n,t){var i=e;return!0===t?i=n.identifier+":"+e:"string"==typeof t&&(i=t+":"+e),i},r=function(e,n,t){var i=n||{bubbles:!0,cancelable:!0,composed:!0},r=i.bubbles,o=i.cancelable,s=i.composed;return n&&Object.assign(t,{originalEvent:n}),new CustomEvent(e,{bubbles:r,cancelable:o,composed:s,detail:t})},o={dispatchEvent:!0,eventPrefix:!0},s=function(e,n){var s;void 0===n&&(n={});var l=Object.assign({},o,n),c=l.dispatchEvent,a=l.eventPrefix,u=(null==(s=n)?void 0:s.element)||e.element,v=e.disconnect.bind(e),d=new IntersectionObserver(function(n){var o=n[0];o.isIntersecting?function(n){if(e.isVisible=!0,e.appear&&t(e,"appear").call(e,n),c){var o=i("appear",e,a),s=r(o,null,{controller:e,entry:n});u.dispatchEvent(s)}}(o):e.isVisible&&function(n){if(e.isVisible=!1,e.disappear&&t(e,"disappear").call(e,n),c){var o=i("disappear",e,a),s=r(o,null,{controller:e,entry:n});u.dispatchEvent(s)}}(o)},n),f=function(){d.observe(u)},b=function(){d.unobserve(u)};return Object.assign(e,{isVisible:!1,disconnect:function(){b(),v()}}),f(),[f,b]};function l(){return(l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}function c(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var u=function(e){function n(n){var t;return(t=e.call(this,n)||this).isVisible=!1,requestAnimationFrame(function(){var e=s(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n}(n.Controller),v=function(e,n){var i=e.disconnect.bind(e),r=new IntersectionObserver(function(n){n[0].isIntersecting&&!e.isLoaded&&function(n){var i=e.data.get("src");if(i){var r=e.element;e.isLoading=!0,e.loading&&t(e,"loading").call(e,i),r.onload=function(){!function(n){e.isLoading=!1,e.isLoaded=!0,e.loading&&t(e,"loaded").call(e,n)}(i)},r.src=i}}()},n),o=function(){r.observe(e.element)},s=function(){r.unobserve(e.element)};return Object.assign(e,{isVisible:!1,disconnect:function(){s(),i()}}),o(),[o,s]},d=function(e){function n(n){var t;return(t=e.call(this,n)||this).isLoading=!1,t.isLoaded=!1,t.options={rootMargin:"10%"},requestAnimationFrame(function(){var e=v(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}c(n,e);var t=n.prototype;return t.loading=function(e){},t.loaded=function(e){},n}(n.Controller),f={dispatchEvent:!0,eventPrefix:!0},b=function(e,n){var o;void 0===n&&(n={});var s=Object.assign({},f,n),l=s.dispatchEvent,c=s.eventPrefix,a=(null==(o=n)?void 0:o.element)||e.element,u=e.disconnect.bind(e),v=new ResizeObserver(function(n){var o=n[0];if(e.resize&&t(e,"resize").call(e,o.contentRect),l){var s=i("resize",e,c),u=r(s,null,{controller:e,entry:o});a.dispatchEvent(u)}}),d=function(){v.observe(a)},b=function(){v.unobserve(a)};return Object.assign(e,{disconnect:function(){b(),u()}}),d(),[d,b]},m=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=b(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n.prototype.resize=function(e){},n}(n.Controller),h={events:["click","touchend"],onlyVisible:!0,dispatchEvent:!0,eventPrefix:!0},p=function(e,n){void 0===n&&(n={});var o=Object.assign({},h,n),s=o.onlyVisible,l=o.dispatchEvent,c=o.events,a=o.eventPrefix,u=function(o){var c,u,v,d,f=(null==(c=n)?void 0:c.element)||e.element;if(!f.contains(o.target)&&(u=f.getBoundingClientRect(),v=window.innerHeight||document.documentElement.clientHeight,d=window.innerWidth||document.documentElement.clientWidth,u.top<=v&&u.top+u.height>=0&&u.left<=d&&u.left+u.width>=0||!s)&&(e.clickOutside&&t(e,"clickOutside").call(e,o),l)){var b=i("click:outside",e,a),m=r(b,o,{controller:e});f.dispatchEvent(m)}},v=function(){null==c||c.forEach(function(e){window.addEventListener(e,u,!1)})},d=function(){null==c||c.forEach(function(e){window.removeEventListener(e,u,!1)})},f=e.disconnect.bind(e);return Object.assign(e,{disconnect:function(){d(),f()}}),v(),[v,d]},g=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=p(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n.prototype.clickOutside=function(e){},n}(n.Controller),E={debug:!1,logger:console},y=function(e,n){var t,i,r,o,s,c=this;void 0===n&&(n={}),this.log=function(e,n){c.debug&&(c.logger.groupCollapsed("%c"+c.controller.identifier+" %c#"+e,"color: #3B82F6","color: unset"),c.logger.log(l({controllerId:c.controllerId},n)),c.logger.groupEnd())},this.debug=null!=(t=null!=(i=null==(r=n)?void 0:r.debug)?i:e.application.stimulusUseDebug)?t:E.debug,this.logger=null!=(o=null==(s=n)?void 0:s.logger)?o:E.logger,this.controller=e,this.controllerId=e.element.id||e.element.dataset.id,this.controllerInitialize=e.initialize.bind(e),this.controllerConnect=e.connect.bind(e),this.controllerDisconnect=e.disconnect.bind(e)},w=function(e){function n(n,t){var r,o,s,l,c;return void 0===t&&(t={}),(c=e.call(this,n,t)||this).dispatch=function(e,n){void 0===n&&(n={});var t=a(c),r=t.targetElement,o=t.eventPrefix,s=t.bubbles,l=t.cancelable,u=t.log;Object.assign(n,{controller:t.controller});var v=i(e,c.controller,o),d=new CustomEvent(v,{detail:n,bubbles:s,cancelable:l});return r.dispatchEvent(d),u("dispatch",{eventName:v,detail:n,bubbles:s,cancelable:l}),d},c.targetElement=null!=(r=t.element)?r:n.element,c.eventPrefix=null==(o=t.eventPrefix)||o,c.bubbles=null==(s=t.bubbles)||s,c.cancelable=null==(l=t.cancelable)||l,c.enhanceController(),c}return c(n,e),n.prototype.enhanceController=function(){Object.assign(this.controller,{dispatch:this.dispatch})},n}(y),C=function(e,n){return void 0===n&&(n={}),new w(e,n)},O=function(e,n){Object.defineProperty(e,"isPreview",{get:function(){return document.documentElement.hasAttribute("data-turbolinks-preview")}}),Object.defineProperty(e,"csrfToken",{get:function(){return this.metaValue("csrf-token")}}),C(e,n),Object.assign(e,{metaValue:function(e){var n=document.head.querySelector('meta[name="'+e+'"]');return n&&n.getAttribute("content")}})},j=function(e){function n(n){var t;return(t=e.call(this,n)||this).isPreview=!1,t.csrfToken="",O(a(t),t.options),t}return c(n,e),n}(n.Controller),L={ms:6e4,initialState:!1,events:["mousemove","mousedown","resize","keydown","touchstart","wheel"],dispatchEvent:!0,eventPrefix:!0},P=function(e,n){void 0===n&&(n={});var o=Object.assign({},L,n),s=o.ms,l=o.events,c=o.dispatchEvent,a=o.eventPrefix,u=o.initialState,v=setTimeout(function(){u=!0,d()},s),d=function(n){var o=i("away",e,a);if(e.isIdle=!0,e.away&&t(e,"away").call(e,n),c){var s=r(o,n||null,{controller:e});e.element.dispatchEvent(s)}},f=function(n){var o=i("back",e,a);if(e.isIdle=!1,e.back&&t(e,"back").call(e,n),c){var s=r(o,n||null,{controller:e});e.element.dispatchEvent(s)}},b=function(e){u&&f(e),u=!1,clearTimeout(v),v=setTimeout(function(){u=!0,d(e)},s)},m=function(e){document.hidden||b(e)};u?d():f();var h=e.disconnect.bind(e),p=function(){l.forEach(function(e){window.addEventListener(e,b)}),document.addEventListener("visibilitychange",m)},g=function(){l.forEach(function(e){window.removeEventListener(e,b)}),document.removeEventListener("visibilitychange",m)};return Object.assign(e,{disconnect:function(){g(),h()}}),p(),[p,g]},V=function(e){function n(n){var t;return(t=e.call(this,n)||this).isIdle=!1,requestAnimationFrame(function(){var e=P(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}c(n,e);var t=n.prototype;return t.away=function(){},t.back=function(){},n}(n.Controller),x={dispatchEvent:!0,eventPrefix:!0},A=function(e){function n(n,o){var s;void 0===o&&(o={}),(s=e.call(this,n,o)||this).observe=function(){s.controller.isVisible=!document.hidden,document.addEventListener("visibilitychange",s.handleVisibilityChange)},s.unobserve=function(){document.removeEventListener("visibilitychange",s.handleVisibilityChange)},s.becomesInvisible=function(e){var n=i("invisible",s.controller,s.eventPrefix);s.controller.isVisible=!1,s.controller.invisible&&t(s.controller,"invisible").call(s.controller,e),s.log("invisible",{isVisible:!1}),s.dispatch(n,e)},s.becomesVisible=function(e){var n=i("visible",s.controller,s.eventPrefix);s.controller.isVisible=!0,s.controller.visible&&t(s.controller,"visible").call(s.controller,e),s.log("visible",{isVisible:!0}),s.dispatch(n,e)},s.dispatch=function(e,n){if(s.dispatchEvent){var t={controller:s.controller,isVisible:s.controller.isVisible},i=r(e,n||null,t);s.controller.element.dispatchEvent(i),s.log("dispatchEvent",l({eventName:e},t))}},s.handleVisibilityChange=function(e){document.hidden?s.becomesInvisible(e):s.becomesVisible(e)};var c=Object.assign({},x,o),u=c.dispatchEvent,v=c.eventPrefix;return Object.assign(a(s),{dispatchEvent:u,eventPrefix:v}),s.controller=n,Object.assign(n,{disconnect:function(){s.unobserve(),s.controllerDisconnect()}}),s.handleVisibilityChange(),s.observe(),s}return c(n,e),n}(y),T=function(e,n){void 0===n&&(n={});var t=new A(e,n);return[t.observe,t.unobserve]},z=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=T(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n}(n.Controller),I=function(e){function n(n,i){var r,o;return void 0===i&&(i={}),(o=e.call(this,n,i)||this).observe=function(){o.targetElement.addEventListener("mouseenter",o.onEnter),o.targetElement.addEventListener("mouseleave",o.onLeave)},o.unobserve=function(){o.targetElement.removeEventListener("mouseenter",o.onEnter),o.targetElement.removeEventListener("mouseleave",o.onLeave)},o.onEnter=function(){o.controller.mouseEnter&&t(o.controller,"mouseEnter").call(o.controller),o.log("mouseEnter",{hover:!0})},o.onLeave=function(){o.controller.mouseLeave&&t(o.controller,"mouseLeave").call(o.controller),o.log("mouseLeave",{hover:!1})},o.targetElement=(null==(r=i)?void 0:r.element)||n.element,o.controller=n,o.enhanceController(),o.observe(),o}return c(n,e),n.prototype.enhanceController=function(){var e=this,n=this.controller.disconnect.bind(this.controller);Object.assign(this.controller,{disconnect:function(){e.unobserve(),n()}})},n}(y),k=function(e,n){void 0===n&&(n={});var t=new I(e,n);return[t.observe,t.unobserve]},q=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=k(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n}(n.Controller),F=function(e){function n(n,i){var r,o;return void 0===i&&(i={}),(o=e.call(this,n,i)||this).observe=function(){try{o.observer.observe(o.targetElement,o.options)}catch(e){o.controller.application.handleError(e,"At a minimum, one of childList, attributes, and/or characterData must be true",{})}},o.unobserve=function(){o.observer.disconnect()},o.mutation=function(e){o.controller.mutate&&t(o.controller,"mutate").call(o.controller,e),o.log("mutate",{entries:e})},o.targetElement=(null==(r=i)?void 0:r.element)||n.element,o.controller=n,o.options=i,o.observer=new MutationObserver(o.mutation),o.enhanceController(),o.observe(),o}return c(n,e),n.prototype.enhanceController=function(){var e=this,n=this.controller.disconnect.bind(this.controller);Object.assign(this.controller,{disconnect:function(){e.unobserve(),n()}})},n}(y),R=function(e,n){void 0===n&&(n={});var t=new F(e,n);return[t.observe,t.unobserve]},S=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=R(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n}(n.Controller),M=function(e){var n=function(n){var i=window,r={height:i.innerHeight||Infinity,width:i.innerWidth||Infinity,event:n};e.windowResize&&t(e,"windowResize").call(e,r)},i=e.disconnect.bind(e),r=function(){window.addEventListener("resize",n),n()},o=function(){window.removeEventListener("resize",n)};return Object.assign(e,{disconnect:function(){o(),i()}}),r(),[r,o]},D=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=M(a(t)),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n.prototype.windowResize=function(e){},n}(n.Controller),H=function(e,n){void 0===n&&(n=200);var t=null;return function(){var i=arguments,r=this,o=function(){return e.apply(r,i)};clearTimeout(t),t=setTimeout(o,n)}};function U(e,n){var t;return void 0===n&&(n=200),function(){var i=arguments,r=this;t||(t=!0,e.apply(r,i),setTimeout(function(){return t=!1},n))}}function N(e){var n=document.head.querySelector('meta[name="'+e+'"]');return n&&n.getAttribute("content")}function W(e){try{return JSON.parse(e)}catch(n){return e}}function _(e){return e.replace(/(?:[_-])([a-z0-9])/g,function(e,n){return n.toUpperCase()})}var B={enterClass:"enter",enterActiveClass:"enterStart",enterToClass:"enterEnd",leaveClass:"leave",leaveActiveClass:"leaveStart",leaveToClass:"leaveEnd"},G={dispatchEvent:!0,eventPrefix:!0,transitioned:!1,hiddenClass:"hidden"},J=function(e,n){var t,i,r,o,s=function(e,n,t,i){try{var r,o;return(r=e.classList).add.apply(r,n),(o=e.classList).add.apply(o,t),Promise.resolve(function(){try{return Promise.resolve(new Promise(function(e){requestAnimationFrame(function(){requestAnimationFrame(e)})}))}catch(e){return Promise.reject(e)}}()).then(function(){var r,o;return(r=e.classList).remove.apply(r,t),(o=e.classList).add.apply(o,i),Promise.resolve(function(e){try{return Promise.resolve(new Promise(function(n){var t=1e3*Number(getComputedStyle(e).transitionDuration.split(",")[0].replace("s",""));setTimeout(function(){n(t)},t)}))}catch(e){return Promise.reject(e)}}(e)).then(function(){var t;(t=e.classList).remove.apply(t,n)})})}catch(e){return Promise.reject(e)}},l=function(t){try{if(!e.transitioned)return Promise.resolve();e.transitioned=!1,p&&p(t);var i=K("leave",n,d),r=K("leaveActive",n,d),o=K("leaveTo",n,d);return Promise.resolve(s(v,i,r,o)).then(function(){m&&v.classList.add(m)})}catch(e){return Promise.reject(e)}},c=function(t){try{if(e.transitioned)return Promise.resolve();e.transitioned=!0,h&&h(t);var i=K("enter",n,d),r=K("enterActive",n,d),o=K("enterTo",n,d);return m&&v.classList.remove(m),Promise.resolve(s(v,i,r,o)).then(function(){})}catch(e){return Promise.reject(e)}};void 0===n&&(n={});var a,u=e.element.dataset.transitionTarget;u&&(a=e[u+"Target"]);var v=(null==(t=n)?void 0:t.element)||a||e.element;if(v instanceof HTMLElement||v instanceof SVGElement){var d=v.dataset,f=Object.assign(G,n),b=f.transitioned,m=f.hiddenClass,h=null==(i=e.enter)?void 0:i.bind(e),p=null==(r=e.leave)?void 0:r.bind(e),g=null==(o=e.toggleTransition)?void 0:o.bind(e);return e.transitioned=b,b?(m&&v.classList.remove(m),c()):(m&&v.classList.add(m),l()),Object.assign(e,{enter:c,leave:l,toggleTransition:E}),[c,l,E]}function E(n){g&&g(n),e.transitioned?l():c()}};function K(e,n,t){var i="transition"+e[0].toUpperCase()+e.substr(1);return(n[e]||t[i]||t[B[e]]||"").split(" ")}var Q=function(e){function n(n){var t;return(t=e.call(this,n)||this).transitioned=!1,requestAnimationFrame(function(){J(a(t),t.options)}),t}return c(n,e),n}(n.Controller);e.ApplicationController=j,e.ClickOutsideController=g,e.HoverController=q,e.IdleController=V,e.IntersectionController=u,e.LazyLoadController=d,e.MutationController=S,e.ResizeController=m,e.TransitionController=Q,e.UseHover=I,e.UseMutation=F,e.UseVisibility=A,e.VisibilityController=z,e.WindowResizeController=D,e.useApplication=O,e.useClickOutside=p,e.useDebounce=function(e,n){var t;null==(t=e.constructor.debounces)||t.forEach(function(t){if("string"==typeof t&&(e[t]=H(e[t],null==n?void 0:n.wait)),"object"==typeof t){var i=t.name;if(!i)return;e[i]=H(e[i],t.wait||(null==n?void 0:n.wait))}})},e.useDispatch=C,e.useHover=k,e.useIdle=P,e.useIntersection=s,e.useLazyLoad=v,e.useMemo=function(e){var n;null==(n=e.constructor.memos)||n.forEach(function(n){!function(e,n,t){Object.defineProperty(e,n,{value:t})}(e,n,e[n])})},e.useMeta=function(e,n){void 0===n&&(n={suffix:!0});var t=e.constructor.metaNames,i=n.suffix;null==t||t.forEach(function(n){!function(e,n,t){var i=t?_(n)+"Meta":_(n);Object.defineProperty(e,i,{get:function(){return W(N(n))}})}(e,n,i)}),Object.defineProperty(e,"metas",{get:function(){var e={};return null==t||t.forEach(function(n){var t=W(N(n));null!=t&&(e[_(n)]=t)}),e}})},e.useMutation=R,e.useResize=b,e.useThrottle=function(e,n){var t;null==(t=e.constructor.throttles)||t.forEach(function(t){if("string"==typeof t&&(e[t]=U(e[t],null==n?void 0:n.wait)),"object"==typeof t){var i=t.name;if(!i)return;e[i]=U(e[i],t.wait||(null==n?void 0:n.wait))}})},e.useTransition=J,e.useVisibility=T,e.useWindowResize=M});
 //# sourceMappingURL=index.umd.js.map

dist/support/index.d.ts

@@ -5,3 +5,3 @@ import { Controller } from 'stimulus';
 export declare const extendedEvent: (type: string, event: Event | null, detail: object) => CustomEvent;
-export declare const isElementInViewport: (el: Element) => boolean;
+export declare function isElementInViewport(el: Element): boolean;
 //# sourceMappingURL=index.d.ts.map

dist/support/index.js

@@ -31,9 +31,10 @@ export const method = (controller, methodName) => {
 };
-export const isElementInViewport = (el) => {
+export function isElementInViewport(el) {
     const rect = el.getBoundingClientRect();
-    return (rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
-};
+    const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
+    const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
+    const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
+    const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
+    return (vertInView && horInView);
+}
 //# sourceMappingURL=index.js.map

dist/use-throttle/use-throttle.d.ts

@@ -7,3 +7,3 @@ import { Controller } from 'stimulus';
 declare class ThrottleController extends Controller {
-    static trottles: string[] | ThrottleOptions[];
+    static throttles: string[] | ThrottleOptions[];
 }
@@ -10,0 +10,0 @@ export declare function throttle(func: Function, wait?: number): Function;

dist/use-throttle/use-throttle.js

 import { Controller } from 'stimulus';
 class ThrottleController extends Controller {
 }
-ThrottleController.trottles = [];
+ThrottleController.throttles = [];
 const defaultWait = 200;
@@ -6,0 +6,0 @@ export function throttle(func, wait = defaultWait) {

package.json

 {
   "name": "stimulus-use",
-  "version": "0.22.0-1",
+  "version": "0.22.0",
   "description": "A collection of standard controllers and utilities for Stimulus",
@@ -5,0 +5,0 @@ "main": "dist/index.umd.js",

README.md

@@ -55,5 +55,6 @@ <p align="center">
   |[`useClickOutside`](./docs/use-click-outside.md)|Tracks the clicks outside of the element and adds a new lifecyle callback **clickOutside**.|`clickOutside`|
-  |[`useHover`](./docs/use-hover.md)|Tracks the user's mouse movements over an element and adds **mouseEnter** and **mouseLeave** callbacks to your controller**.|`mouseEnter` `mouseLeave`|
+  |[`useHover`](./docs/use-hover.md)|Tracks the user's mouse movements over an element and adds **mouseEnter** and **mouseLeave** callbacks to your controller.|`mouseEnter` `mouseLeave`|
   |[`useIdle`](./docs/use-idle.md)| Tracks if the user is idle on your page and adds **away** and **back** callbacks to your controller.|`away`</br> `back`|
   |[`useIntersection`](./docs/use-intersection.md) | Tracks the element's intersection and adds **appear**, **disappear** callbacks to your controller.|`appear`</br> `disappear`|
+  |[`useMutation`](./docs/use-mutation.md) | Tracks mutations on an element, its attributes and/or subtree. Adds a **mutate** callback to your controller.|`mutate`|
   |[`useResize`](./docs/use-resize.md)|Tracks the element's size and adds a new lifecyle callback **resize**.|`resize`|
@@ -73,2 +74,10 @@ |[`useVisibility`](./docs/use-visibility.md) </br>| Tracks the page visibility and adds **visible**, **invisible** callbacks to your controller.|`visible`</br> `invisible`|
 
+### Animation
+
+  A set of mixin and controllers to build animations.
+
+  | Mixin| Description |
+  |------|-------------|
+  |[`useTransition`](./docs/use-transition.md)|Mixin or controller to apply classes to various stages of an element's transition.|
+
 ### Application
@@ -156,3 +165,4 @@ | Mixin | Description |
     <td align="center"><a href="https://github.com/tsmd"><img src="https://avatars3.githubusercontent.com/u/490085?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Takayuki Shimada</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/issues?q=author%3Atsmd" title="Bug reports">🐛</a></td>
-    <td align="center"><a href="https://github.com/Sub-Xaero"><img src="https://avatars0.githubusercontent.com/u/9960703?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Dylan Clarke</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=Sub-Xaero" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Sub-Xaero"><img src="https://avatars0.githubusercontent.com/u/9960703?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Dylan Clarke</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=Sub-Xaero" title="Code">💻</a> <a href="https://github.com/stimulus-use/stimulus-use/commits?author=Sub-Xaero" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://www.howtoruby.com"><img src="https://avatars0.githubusercontent.com/u/1651750?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Martin Tomov</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=mtomov" title="Documentation">📖</a></td>
   </tr>
@@ -159,0 +169,0 @@ </table>

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

Total package byte prevSize

208138

increased by7.12%

Number of package files

193

increased by6.63%

Lines of code

1377

increased by6.99%

Number of lines in readme file

182

increased by5.81%

No dependency changes