alpinejs - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

dist/alpine.js

@@ -1,1 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Alpine=t()}(this,(function(){"use strict";function e(){return navigator.userAgent.includes("Node.js")||navigator.userAgent.includes("jsdom")}function t(e,n,i=!0){if(e.hasAttribute("x-data")&&!i)return;n(e);let a=e.firstElementChild;for(;a;)t(a,n,!1),a=a.nextElementSibling}function n(e,t,n={}){return new Function(["$data",...Object.keys(n)],`var result; with($data) { result = ${e} }; return result`)(t,...Object.values(n))}function i(e){return/x-(on|bind|data|text|model|if|show|cloak|ref)/.test(e.name)}function a(e,t){return Array.from(e.attributes).filter(i).map(e=>{const t=e.name.match(/x-(on|bind|data|text|model|if|show|cloak|ref)/),n=e.name.match(/:([a-zA-Z\-]+)/),i=e.name.match(/\.[^.\]]+(?=[^\]]*$)/g)||[];return{type:t?t[1]:null,value:n?n[1]:null,modifiers:i.map(e=>e.replace(".","")),expression:e.value}}).filter(e=>!t||e.type===name)}class r{constructor(e){this.el=e;const t=n(this.el.getAttribute("x-data"),{});t.$refs=this.getRefsProxy(),this.data=this.wrapDataInObservable(t),this.initialize(),this.listenForNewElementsToInitialize()}wrapDataInObservable(e){this.concernedData=[];var t=this;const n=e=>({set(n,i,a){const r=e?`${e}.${i}`:i,s=Reflect.set(n,i,a);return-1===t.concernedData.indexOf(r)&&t.concernedData.push(r),t.refresh(),s},get(t,i){if("object"==typeof t[i]&&null!==t[i]){const a=e?`${e}.${i}`:i;return new Proxy(t[i],n(a))}return t[i]}});return new Proxy(e,n())}initialize(){t(this.el,e=>{this.initializeElement(e)})}initializeElement(e){a(e).forEach(({type:t,value:n,modifiers:i,expression:a})=>{switch(t){case"on":var r=n;this.registerListener(e,r,i,a);break;case"model":r="select"===e.tagName.toLowerCase()||["checkbox","radio"].includes(e.type)||i.includes("lazy")?"change":"input";const t=this.generateExpressionForXModelListener(e,i,a);this.registerListener(e,r,i,t);var s="value",{output:o}=this.evaluateReturnExpression(a);this.updateAttributeValue(e,s,o);break;case"bind":s=n;var{output:o}=this.evaluateReturnExpression(a);this.updateAttributeValue(e,s,o);break;case"text":var{output:o}=this.evaluateReturnExpression(a);this.updateTextValue(e,o);break;case"show":var{output:o}=this.evaluateReturnExpression(a);this.updateVisibility(e,o);break;case"if":var{output:o}=this.evaluateReturnExpression(a);this.updatePresence(e,o);break;case"cloak":e.removeAttribute("x-cloak")}})}listenForNewElementsToInitialize(){const e=this.el;new MutationObserver(e=>{for(let t=0;t<e.length;t++){if(!e[t].target.closest("[x-data]").isSameNode(this.el))return;if("attributes"===e[t].type&&"x-data"===e[t].attributeName){const i=n(e[t].target.getAttribute("x-data"),{});Object.keys(i).forEach(e=>{this.data[e]!==i[e]&&(this.data[e]=i[e])})}e[t].addedNodes.length>0&&e[t].addedNodes.forEach(e=>{1===e.nodeType&&(e.matches("[x-data]")||a(e).length>0&&this.initializeElement(e))})}}).observe(e,{childList:!0,attributes:!0,subtree:!0})}refresh(){var e=this;const n={model:({el:t,output:n})=>{e.updateAttributeValue(t,"value",n)},bind:({el:t,attrName:n,output:i})=>{e.updateAttributeValue(t,n,i)},text:({el:t,output:n})=>{e.updateTextValue(t,n)},show:({el:t,output:n})=>{e.updateVisibility(t,n)},if:({el:t,output:n})=>{e.updatePresence(t,n)}};var i,r,s,o;(i=(n,i)=>{t(n,i),e.concernedData=[]},r=5,function(){var e=this,t=arguments,n=function(){o=null,s||i.apply(e,t)},a=s&&!o;clearTimeout(o),o=setTimeout(n,r),a&&i.apply(e,t)})(this.el,(function(t){a(t).forEach(({type:i,value:a,expression:r})=>{if(n[i]){var{output:s,deps:o}=e.evaluateReturnExpression(r);e.concernedData.filter(e=>o.includes(e)).length>0&&n[i]({el:t,attrName:a,output:s})}})}))}generateExpressionForXModelListener(e,t,n){var i="";return i="checkbox"===e.type?Array.isArray(this.data[n])?`$event.target.checked ? ${n}.concat([$event.target.value]) : ${n}.filter(i => i !== $event.target.value)`:"$event.target.checked":"select"===e.tagName.toLowerCase()&&e.multiple?t.includes("number")?"Array.from($event.target.selectedOptions).map(option => { return parseFloat(option.value || option.text) })":"Array.from($event.target.selectedOptions).map(option => { return option.value || option.text })":t.includes("number")?"parseFloat($event.target.value)":t.includes("trim")?"$event.target.value.trim()":"$event.target.value","radio"===e.type&&(e.hasAttribute("name")||e.setAttribute("name",n)),`${n} = ${i}`}registerListener(e,t,n,i){if(n.includes("away")){const a=r=>{e.contains(r.target)||e.offsetWidth<1&&e.offsetHeight<1||(this.runListenerHandler(i,r),n.includes("once")&&document.removeEventListener(t,a))};document.addEventListener(t,a)}else{const a=n.includes("window")?window:n.includes("document")?document:e,r=e=>{const s=n.filter(e=>"window"!==e).filter(e=>"document"!==e);"keydown"===t&&s.length>0&&!s.includes(e.key.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase())||(n.includes("prevent")&&e.preventDefault(),n.includes("stop")&&e.stopPropagation(),this.runListenerHandler(i,e),n.includes("once")&&a.removeEventListener(t,r))};a.addEventListener(t,r)}}runListenerHandler(e,t){this.evaluateCommandExpression(e,{$event:t})}evaluateReturnExpression(e){var t=[];const i=e=>({get(n,a){if("symbol"==typeof a)return;const r=e?`${e}.${a}`:a;return"object"!=typeof n[a]||null===n[a]||Array.isArray(n[a])?(t.push(r),n[a]):new Proxy(n[a],i(r))}});return{output:n(e,new Proxy(this.data,i())),deps:t}}evaluateCommandExpression(e,t){!function(e,t,n={}){new Function(["$data",...Object.keys(n)],`with($data) { ${e} }`)(t,...Object.values(n))}(e,this.data,t)}updateTextValue(e,t){e.innerText=t}updateVisibility(e,t){t?1===e.style.length&&""!==e.style.display?e.removeAttribute("style"):e.style.removeProperty("display"):e.style.display="none"}updatePresence(e,t){"template"!==e.nodeName.toLowerCase()&&console.warn("Alpine: [x-if] directive should only be added to <template> tags.");const n=e.nextElementSibling&&!0===e.nextElementSibling.__x_inserted_me;if(t&&!n){const t=document.importNode(e.content,!0);e.parentElement.insertBefore(t,e.nextElementSibling),e.nextElementSibling.__x_inserted_me=!0}else!t&&n&&e.nextElementSibling.remove()}updateAttributeValue(e,t,n){if("value"===t)if("radio"===e.type)e.checked=e.value==n;else if("checkbox"===e.type)if(Array.isArray(n)){let t=!1;n.forEach(n=>{n==e.value&&(t=!0)}),e.checked=t}else e.checked=!!n;else"SELECT"===e.tagName?this.updateSelect(e,n):e.value=n;else"class"===t?Array.isArray(n)?e.setAttribute("class",n.join(" ")):Object.keys(n).forEach(t=>{n[t]?t.split(" ").forEach(t=>e.classList.add(t)):t.split(" ").forEach(t=>e.classList.remove(t))}):["disabled","readonly","required","checked","hidden"].includes(t)?n?e.setAttribute(t,""):e.removeAttribute(t):e.setAttribute(t,n)}updateSelect(e,t){const n=[].concat(t).map(e=>e+"");Array.from(e.options).forEach(e=>{e.selected=n.includes(e.value||e.text)})}getRefsProxy(){var e=this;return new Proxy({},{get(n,i){var a;return t(e.el,e=>{e.hasAttribute("x-ref")&&e.getAttribute("x-ref")===i&&(a=e)}),a}})}}const s={start:async function(){e()||await new Promise(e=>{"loading"==document.readyState?document.addEventListener("DOMContentLoaded",e):e()}),this.discoverComponents(e=>{this.initializeComponent(e)}),document.addEventListener("turbolinks:load",()=>{this.discoverUninitializedComponents(e=>{this.initializeComponent(e)})}),this.listenForNewUninitializedComponentsAtRunTime(e=>{this.initializeComponent(e)})},discoverComponents:function(e){document.querySelectorAll("[x-data]").forEach(t=>{e(t)})},discoverUninitializedComponents:function(e){const t=document.querySelectorAll("[x-data]");Array.from(t).filter(e=>void 0===e.__x).forEach(t=>{e(t)})},listenForNewUninitializedComponentsAtRunTime:function(e){const t=document.querySelector("body");new MutationObserver(t=>{for(let n=0;n<t.length;n++)t[n].addedNodes.length>0&&t[n].addedNodes.forEach(t=>{1===t.nodeType&&t.matches("[x-data]")&&e(t)})}).observe(t,{childList:!0,attributes:!0,subtree:!0})},initializeComponent:function(e){e.__x=new r(e)}};return e()||(window.Alpine=s,window.Alpine.start()),s}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Alpine=t()}(this,(function(){"use strict";function e(){return navigator.userAgent.includes("Node.js")||navigator.userAgent.includes("jsdom")}function t(e,n,i=!0){if(e.hasAttribute("x-data")&&!i)return;n(e);let s=e.firstElementChild;for(;s;)t(s,n,!1),s=s.nextElementSibling}function n(e,t,n={}){return new Function(["$data",...Object.keys(n)],`var result; with($data) { result = ${e} }; return result`)(t,...Object.values(n))}function i(e){return/x-(on|bind|data|text|model|if|show|cloak|transition|ref)/.test(e.name)}function s(e,t){return Array.from(e.attributes).filter(i).map(e=>{const t=e.name.match(/x-(on|bind|data|text|model|if|show|cloak|transition|ref)/),n=e.name.match(/:([a-zA-Z\-]+)/),i=e.name.match(/\.[^.\]]+(?=[^\]]*$)/g)||[];return{type:t?t[1]:null,value:n?n[1]:null,modifiers:i.map(e=>e.replace(".","")),expression:e.value}}).filter(e=>!t||e.type===t)}function r(e,t,n=!1){n&&t();const i=s(e,"transition");i.length<1&&t(),o(e,(i.find(e=>"enter"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"enter-start"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"enter-end"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),t,()=>{})}function a(e,t,n=!1){n&&t();const i=s(e,"transition");i.length<1&&t(),o(e,(i.find(e=>"leave"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"leave-start"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),(i.find(e=>"leave-end"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),()=>{},t)}function o(e,t,n,i,s,r){e.classList.add(...n),e.classList.add(...t),requestAnimationFrame(()=>{const a=1e3*Number(getComputedStyle(e).transitionDuration.replace("s",""));s(),requestAnimationFrame(()=>{e.classList.remove(...n),e.classList.add(...i),setTimeout(()=>{r(),e.isConnected&&(e.classList.remove(...t),e.classList.remove(...i))},a)})})}class l{constructor(e){this.el=e;const t=n(this.el.getAttribute("x-data"),{});t.$refs=this.getRefsProxy(),this.data=this.wrapDataInObservable(t),this.initialize(),this.listenForNewElementsToInitialize()}wrapDataInObservable(e){this.concernedData=[];var t=this;const n=e=>({set(n,i,s){const r=e?`${e}.${i}`:i,a=Reflect.set(n,i,s);return-1===t.concernedData.indexOf(r)&&t.concernedData.push(r),t.refresh(),a},get(t,i){if("object"==typeof t[i]&&null!==t[i]){const s=e?`${e}.${i}`:i;return new Proxy(t[i],n(s))}return t[i]}});return new Proxy(e,n())}initialize(){t(this.el,e=>{this.initializeElement(e)})}initializeElement(e){s(e).forEach(({type:t,value:n,modifiers:i,expression:s})=>{switch(t){case"on":var r=n;this.registerListener(e,r,i,s);break;case"model":r="select"===e.tagName.toLowerCase()||["checkbox","radio"].includes(e.type)||i.includes("lazy")?"change":"input";const t=this.generateExpressionForXModelListener(e,i,s);this.registerListener(e,r,i,t);var a="value",{output:o}=this.evaluateReturnExpression(s);this.updateAttributeValue(e,a,o);break;case"bind":a=n;var{output:o}=this.evaluateReturnExpression(s);this.updateAttributeValue(e,a,o);break;case"text":var{output:o}=this.evaluateReturnExpression(s);this.updateTextValue(e,o);break;case"show":var{output:o}=this.evaluateReturnExpression(s);this.updateVisibility(e,o,!0);break;case"if":var{output:o}=this.evaluateReturnExpression(s);this.updatePresence(e,o);break;case"cloak":e.removeAttribute("x-cloak")}})}listenForNewElementsToInitialize(){const e=this.el;new MutationObserver(e=>{for(let t=0;t<e.length;t++){if(!e[t].target.closest("[x-data]").isSameNode(this.el))return;if("attributes"===e[t].type&&"x-data"===e[t].attributeName){const i=n(e[t].target.getAttribute("x-data"),{});Object.keys(i).forEach(e=>{this.data[e]!==i[e]&&(this.data[e]=i[e])})}e[t].addedNodes.length>0&&e[t].addedNodes.forEach(e=>{1===e.nodeType&&(e.matches("[x-data]")||s(e).length>0&&this.initializeElement(e))})}}).observe(e,{childList:!0,attributes:!0,subtree:!0})}refresh(){var e=this;const n={model:({el:t,output:n})=>{e.updateAttributeValue(t,"value",n)},bind:({el:t,attrName:n,output:i})=>{e.updateAttributeValue(t,n,i)},text:({el:t,output:n})=>{e.updateTextValue(t,n)},show:({el:t,output:n})=>{e.updateVisibility(t,n)},if:({el:t,output:n})=>{e.updatePresence(t,n)}};var i,r,a,o;(i=(n,i)=>{t(n,i),e.concernedData=[]},r=5,function(){var e=this,t=arguments,n=function(){o=null,a||i.apply(e,t)},s=a&&!o;clearTimeout(o),o=setTimeout(n,r),s&&i.apply(e,t)})(this.el,(function(t){s(t).forEach(({type:i,value:s,expression:r})=>{if(n[i]){var{output:a,deps:o}=e.evaluateReturnExpression(r);e.concernedData.filter(e=>o.includes(e)).length>0&&n[i]({el:t,attrName:s,output:a})}})}))}generateExpressionForXModelListener(e,t,n){var i="";return i="checkbox"===e.type?Array.isArray(this.data[n])?`$event.target.checked ? ${n}.concat([$event.target.value]) : ${n}.filter(i => i !== $event.target.value)`:"$event.target.checked":"select"===e.tagName.toLowerCase()&&e.multiple?t.includes("number")?"Array.from($event.target.selectedOptions).map(option => { return parseFloat(option.value || option.text) })":"Array.from($event.target.selectedOptions).map(option => { return option.value || option.text })":t.includes("number")?"parseFloat($event.target.value)":t.includes("trim")?"$event.target.value.trim()":"$event.target.value","radio"===e.type&&(e.hasAttribute("name")||e.setAttribute("name",n)),`${n} = ${i}`}registerListener(e,t,n,i){if(n.includes("away")){const s=r=>{e.contains(r.target)||e.offsetWidth<1&&e.offsetHeight<1||(this.runListenerHandler(i,r),n.includes("once")&&document.removeEventListener(t,s))};document.addEventListener(t,s)}else{const s=n.includes("window")?window:n.includes("document")?document:e,r=e=>{const a=n.filter(e=>"window"!==e).filter(e=>"document"!==e);"keydown"===t&&a.length>0&&!a.includes(e.key.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase())||(n.includes("prevent")&&e.preventDefault(),n.includes("stop")&&e.stopPropagation(),this.runListenerHandler(i,e),n.includes("once")&&s.removeEventListener(t,r))};s.addEventListener(t,r)}}runListenerHandler(e,t){this.evaluateCommandExpression(e,{$event:t})}evaluateReturnExpression(e){var t=[];const i=e=>({get(n,s){if("symbol"==typeof s)return;const r=e?`${e}.${s}`:s;return"object"!=typeof n[s]||null===n[s]||Array.isArray(n[s])?(t.push(r),n[s]):new Proxy(n[s],i(r))}});return{output:n(e,new Proxy(this.data,i())),deps:t}}evaluateCommandExpression(e,t){!function(e,t,n={}){new Function(["$data",...Object.keys(n)],`with($data) { ${e} }`)(t,...Object.values(n))}(e,this.data,t)}updateTextValue(e,t){e.innerText=t}updateVisibility(e,t,n=!1){t?r(e,()=>{1===e.style.length&&""!==e.style.display?e.removeAttribute("style"):e.style.removeProperty("display")},n):a(e,()=>{e.style.display="none"},n)}updatePresence(e,t){"template"!==e.nodeName.toLowerCase()&&console.warn("Alpine: [x-if] directive should only be added to <template> tags.");const n=e.nextElementSibling&&!0===e.nextElementSibling.__x_inserted_me;if(t&&!n){const t=document.importNode(e.content,!0);e.parentElement.insertBefore(t,e.nextElementSibling),e.nextElementSibling.__x_inserted_me=!0,r(e.nextElementSibling,()=>{})}else!t&&n&&a(e.nextElementSibling,()=>{e.nextElementSibling.remove()})}updateAttributeValue(e,t,n){if("value"===t)if("radio"===e.type)e.checked=e.value==n;else if("checkbox"===e.type)if(Array.isArray(n)){let t=!1;n.forEach(n=>{n==e.value&&(t=!0)}),e.checked=t}else e.checked=!!n;else"SELECT"===e.tagName?this.updateSelect(e,n):e.value=n;else"class"===t?Array.isArray(n)?e.setAttribute("class",n.join(" ")):Object.keys(n).forEach(t=>{n[t]?t.split(" ").forEach(t=>e.classList.add(t)):t.split(" ").forEach(t=>e.classList.remove(t))}):["disabled","readonly","required","checked","hidden"].includes(t)?n?e.setAttribute(t,""):e.removeAttribute(t):e.setAttribute(t,n)}updateSelect(e,t){const n=[].concat(t).map(e=>e+"");Array.from(e.options).forEach(e=>{e.selected=n.includes(e.value||e.text)})}getRefsProxy(){var e=this;return new Proxy({},{get(n,i){var s;return t(e.el,e=>{e.hasAttribute("x-ref")&&e.getAttribute("x-ref")===i&&(s=e)}),s}})}}const u={start:async function(){e()||await new Promise(e=>{"loading"==document.readyState?document.addEventListener("DOMContentLoaded",e):e()}),this.discoverComponents(e=>{this.initializeComponent(e)}),document.addEventListener("turbolinks:load",()=>{this.discoverUninitializedComponents(e=>{this.initializeComponent(e)})}),this.listenForNewUninitializedComponentsAtRunTime(e=>{this.initializeComponent(e)})},discoverComponents:function(e){document.querySelectorAll("[x-data]").forEach(t=>{e(t)})},discoverUninitializedComponents:function(e){const t=document.querySelectorAll("[x-data]");Array.from(t).filter(e=>void 0===e.__x).forEach(t=>{e(t)})},listenForNewUninitializedComponentsAtRunTime:function(e){const t=document.querySelector("body");new MutationObserver(t=>{for(let n=0;n<t.length;n++)t[n].addedNodes.length>0&&t[n].addedNodes.forEach(t=>{1===t.nodeType&&t.matches("[x-data]")&&e(t)})}).observe(t,{childList:!0,attributes:!0,subtree:!0})},initializeComponent:function(e){e.__x=new l(e)}};return e()||(window.Alpine=u,window.Alpine.start()),u}));
+//# sourceMappingURL=alpine.js.map

package.json

 {
   "main": "dist/alpine.js",
   "name": "alpinejs",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "repository": {
@@ -6,0 +6,0 @@ "type": "git",

README.md

@@ -15,3 +15,3 @@ # Alpine.js
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.1.2/dist/alpine.umd.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.1.4/dist/alpine.js" defer></script>
 ```
@@ -18,0 +18,0 @@

rollup.config.js

@@ -11,2 +11,3 @@ import resolve from "rollup-plugin-node-resolve"
         format: 'umd',
+        sourcemap: true,
     },
@@ -13,0 +14,0 @@ plugins: [

src/component.js

@@ -1,2 +0,2 @@
-import { walkSkippingNestedComponents, kebabCase, saferEval, saferEvalNoReturn, getXAttrs, debounce } from './utils'
+import { walkSkippingNestedComponents, kebabCase, saferEval, saferEvalNoReturn, getXAttrs, debounce, transitionIn, transitionOut } from './utils'
 
@@ -95,3 +95,3 @@ export default class Component {
                     var { output } = this.evaluateReturnExpression(expression)
-                    this.updateVisibility(el, output)
+                    this.updateVisibility(el, output, true)
                     break;
@@ -305,12 +305,17 @@
 
-    updateVisibility(el, value) {
+    updateVisibility(el, value, initialUpdate = false) {
         if (! value) {
-            el.style.display = 'none'
+            transitionOut(el, () => {
+                el.style.display = 'none'
+            }, initialUpdate)
         } else {
-            if (el.style.length === 1 && el.style.display !== '') {
-                el.removeAttribute('style')
-            } else {
-                el.style.removeProperty('display')
-            }
+            transitionIn(el, () => {
+                if (el.style.length === 1 && el.style.display !== '') {
+                    el.removeAttribute('style')
+                } else {
+                    el.style.removeProperty('display')
+                }
+            }, initialUpdate)
         }
+
     }
@@ -329,4 +334,8 @@
             el.nextElementSibling.__x_inserted_me = true
+
+            transitionIn(el.nextElementSibling, () => {})
         } else if (! expressionResult && elementHasAlreadyBeenAdded) {
-            el.nextElementSibling.remove()
+            transitionOut(el.nextElementSibling, () => {
+                el.nextElementSibling.remove()
+            })
         }
@@ -333,0 +342,0 @@ }

src/utils.js

@@ -69,3 +69,3 @@
 export function isXAttr(attr) {
-    const xAttrRE = /x-(on|bind|data|text|model|if|show|cloak|ref)/
+    const xAttrRE = /x-(on|bind|data|text|model|if|show|cloak|transition|ref)/
 
@@ -79,3 +79,3 @@ return xAttrRE.test(attr.name)
         .map(attr => {
-            const typeMatch = attr.name.match(/x-(on|bind|data|text|model|if|show|cloak|ref)/)
+            const typeMatch = attr.name.match(/x-(on|bind|data|text|model|if|show|cloak|transition|ref)/)
             const valueMatch = attr.name.match(/:([a-zA-Z\-]+)/)
@@ -95,4 +95,59 @@ const modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []
 
-            return i.type === name
+            return i.type === type
         })
 }
+
+export function transitionIn(el, callback, forceSkip = false) {
+    if (forceSkip) callback()
+
+    const attrs = getXAttrs(el, 'transition')
+
+    if (attrs.length < 1) callback()
+
+    const enter = (attrs.find(i => i.value === 'enter') || { expression: '' }).expression.split(' ').filter(i => i !== '')
+    const enterStart = (attrs.find(i => i.value === 'enter-start') || { expression: '' }).expression.split(' ').filter(i => i !== '')
+    const enterEnd = (attrs.find(i => i.value === 'enter-end') || { expression: '' }).expression.split(' ').filter(i => i !== '')
+
+    transition(el, enter, enterStart, enterEnd, callback, () => {})
+}
+
+export function transitionOut(el, callback, forceSkip = false) {
+    if (forceSkip) callback()
+
+    const attrs = getXAttrs(el, 'transition')
+
+    if (attrs.length < 1) callback()
+
+    const leave = (attrs.find(i => i.value === 'leave') || { expression: '' }).expression.split(' ').filter(i => i !== '')
+    const leaveStart = (attrs.find(i => i.value === 'leave-start') || { expression: '' }).expression.split(' ').filter(i => i !== '')
+    const leaveEnd = (attrs.find(i => i.value === 'leave-end') || { expression: '' }).expression.split(' ').filter(i => i !== '')
+
+    transition(el, leave, leaveStart, leaveEnd, () => {}, callback)
+}
+
+export function transition(el, classesDuring, classesStart, classesEnd, hook1, hook2) {
+    el.classList.add(...classesStart)
+    el.classList.add(...classesDuring)
+
+    requestAnimationFrame(() => {
+        const duration = Number(getComputedStyle(el).transitionDuration.replace('s', '')) * 1000
+
+        hook1()
+
+        requestAnimationFrame(() => {
+            el.classList.remove(...classesStart)
+            el.classList.add(...classesEnd)
+
+            setTimeout(() => {
+                hook2()
+
+                // Adding an "isConnected" check, in case the callback
+                // removed the element from the DOM.
+                if (el.isConnected) {
+                    el.classList.remove(...classesDuring)
+                    el.classList.remove(...classesEnd)
+                }
+            }, duration);
+        })
+    });
+}

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

Worsened metrics

Total package byte prevSize

129271

decreased by-24.24%

Lines of code

1524

decreased by-16.49%

Published versions last week

0

decreased by-100%

No dependency changes