alpinejs - npm Package Compare versions

Comparing version 2.7.2 to 2.7.3

package.json

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

README.de.md

@@ -37,5 +37,5 @@ # Alpine.js
 Für die Produktionsumgebung wird empfohlen, den Link mit einer spezifischen Versionsnummer zu versehen. Somit kann präventiv sichergestellt werden, dass keine unerwarteten Fehler durch Versionsaktualisierungen zustande kommen.
-Als Beispiel wird hier die (letzte) Version `2.7.2` spezifiziert:
+Als Beispiel wird hier die (letzte) Version `2.7.3` spezifiziert:
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.2/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
 ```
@@ -42,0 +42,0 @@

README.es.md

@@ -24,5 +24,5 @@ # Alpine.js
 
-Para entornos de producción, se recomienda especificar una número de versión en concreto en el enlace para evitar comportamientos inesperados que puedan romper las nuevas versiones. Por ejemplo, para usar la versión `2.7.2` (la última):
+Para entornos de producción, se recomienda especificar una número de versión en concreto en el enlace para evitar comportamientos inesperados que puedan romper las nuevas versiones. Por ejemplo, para usar la versión `2.7.3` (la última):
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.2/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
 ```
@@ -29,0 +29,0 @@

README.id.md

@@ -35,5 +35,5 @@ # Alpine.js
 
-Untuk lingkungan produksi, disarankan untuk memasang pin pada nomor versi tertentu di link untuk menghindari kerusakan yang tidak terduga dari versi yang lebih baru. Misalnya, untuk menggunakan versi `2.7.2` (terbaru):
+Untuk lingkungan produksi, disarankan untuk memasang pin pada nomor versi tertentu di link untuk menghindari kerusakan yang tidak terduga dari versi yang lebih baru. Misalnya, untuk menggunakan versi `2.7.3` (terbaru):
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.2/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
 ```
@@ -40,0 +40,0 @@

README.ja.md

@@ -17,3 +17,3 @@ # Alpine.js
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.2/dist/alpine.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>
 ```
@@ -20,0 +20,0 @@

README.md

@@ -37,5 +37,5 @@ # Alpine.js
 For production environments, it's recommended to pin a specific version number in the link to avoid unexpected breakage from newer versions.
-For example, to use version `2.7.2` (latest):
+For example, to use version `2.7.3` (latest):
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.2/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
 ```
@@ -42,0 +42,0 @@

README.pt.md

@@ -26,6 +26,6 @@ # Alpine.js
 Para ambiente de produção, é recomendado fixar o número da versão específico no link para evitar problemas inesperadas das versões mais recentes.
-Por exemplo, para usar a versão `2.7.2`:
+Por exemplo, para usar a versão `2.7.3`:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.2/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
 ```
@@ -32,0 +32,0 @@

README.ru.md

@@ -25,5 +25,5 @@ # Alpine.js
 Для продакшн-окружения, рекомендуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок после выпуска новых версий.
-Например, чтобы использовать версию `2.7.2`:
+Например, чтобы использовать версию `2.7.3`:
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.2/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
 ```
@@ -30,0 +30,0 @@

README.zh-TW.md

@@ -25,5 +25,5 @@ # Alpine.js
 在正式環境中，建議在連結中固定特定版本，以避免新版本使功能無法使用。
-如，要使用 `2.7.2` 版則可以這樣寫：
+如，要使用 `2.7.3` 版則可以這樣寫：
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.2/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
 ```
@@ -30,0 +30,0 @@

src/component.js

@@ -1,2 +0,2 @@
-import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce, convertClassStringToArray } from './utils'
+import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce, convertClassStringToArray, TRANSITION_CANCELLED } from './utils'
 import { handleForDirective } from './directives/for'
@@ -259,13 +259,15 @@ import { handleAttributeBindingDirective } from './directives/bind'
         // only hide when the children are finished hiding.
-        this.showDirectiveStack.reverse().map(thing => {
-            return new Promise(resolve => {
-                thing(finish => {
-                    resolve(finish)
+        this.showDirectiveStack.reverse().map(handler => {
+            return new Promise((resolve, reject) => {
+                handler(resolve, reject)
+            })
+        }).reduce((promiseChain, promise) => {
+            return promiseChain.then(() => {
+                return promise.then(finishElement => {
+                    finishElement()
                 })
             })
-        }).reduce((nestedPromise, promise) => {
-            return nestedPromise.then(() => {
-                return promise.then(finish => finish())
-            })
-        }, Promise.resolve(() => {}))
+        }, Promise.resolve(() => {})).catch(e => {
+            if (e !== TRANSITION_CANCELLED) throw e
+        })
 
@@ -272,0 +274,0 @@ // We've processed the handler stack. let's clear it.

src/directives/for.js

@@ -24,3 +24,3 @@ import { transitionIn, transitionOut, getXAttrs, warnIfMalformedTemplate, isNumeric } from '../utils'
             // And transition it in if it's not the first page load.
-            transitionIn(nextEl, () => {}, component, initialUpdate)
+            transitionIn(nextEl, () => {}, () => {}, component, initialUpdate)
 
@@ -95,3 +95,3 @@ nextEl.__x_for = iterationScopeVariables
     }
-    
+
     let items = component.evaluateReturnExpression(el, iteratorNames.items, extraVars)
@@ -142,5 +142,5 @@
             nextElementFromOldLoopImmutable.remove()
-        }, component)
+        }, () => {}, component)
         nextElementFromOldLoop = (nextSibling && nextSibling.__x_for_key !== undefined) ? nextSibling : false
     }
 }

src/directives/if.js

@@ -13,3 +13,3 @@ import { transitionIn, transitionOut, warnIfMalformedTemplate } from '../utils'
 
-        transitionIn(el.nextElementSibling, () => {}, component, initialUpdate)
+        transitionIn(el.nextElementSibling, () => {}, () => {}, component, initialUpdate)
 
@@ -22,4 +22,4 @@ component.initializeElements(el.nextElementSibling, extraVars)
             el.nextElementSibling.remove()
-        }, component, initialUpdate)
+        }, () => {}, component, initialUpdate)
     }
 }

src/directives/show.js

@@ -6,2 +6,3 @@ import { transitionIn, transitionOut } from '../utils'
         el.style.display = 'none'
+        el.__x_is_shown = false
     }
@@ -15,2 +16,4 @@
         }
+
+        el.__x_is_shown = true
     }
@@ -27,8 +30,8 @@
 
-    const handle = (resolve) => {
+    const handle = (resolve, reject) => {
         if (value) {
-            if(el.style.display === 'none' || el.__x_transition) {
+            if (el.style.display === 'none' || el.__x_transition) {
                 transitionIn(el, () => {
                     show()
-                }, component)
+                }, reject, component)
             }
@@ -42,3 +45,3 @@ resolve(() => {})
                     })
-                }, component)
+                }, reject, component)
             } else {
@@ -56,3 +59,3 @@ resolve(() => {})
     if (modifiers.includes('immediate')) {
-        handle(finish => finish())
+        handle(finish => finish(), () => {})
         return
@@ -59,0 +62,0 @@ }

src/utils.js

@@ -188,6 +188,7 @@
 
-const TRANSITION_TYPE_IN = 'in'
-const TRANSITION_TYPE_OUT = 'out'
+export const TRANSITION_TYPE_IN = 'in'
+export const TRANSITION_TYPE_OUT = 'out'
+export const TRANSITION_CANCELLED = 'cancelled'
 
-export function transitionIn(el, show, component, forceSkip = false) {
+export function transitionIn(el, show, reject, component, forceSkip = false) {
     // We don't want to transition on the initial page load.
@@ -218,6 +219,6 @@ if (forceSkip) return show()
 
-        transitionHelperIn(el, modifiers, show)
+        transitionHelperIn(el, modifiers, show, reject)
     // Otherwise, we can assume x-transition:enter.
     } else if (attrs.some(attr => ['enter', 'enter-start', 'enter-end'].includes(attr.value))) {
-        transitionClassesIn(el, component, attrs, show)
+        transitionClassesIn(el, component, attrs, show, reject)
     } else {
@@ -229,3 +230,3 @@ // If neither, just show that damn thing.
 
-export function transitionOut(el, hide, component, forceSkip = false) {
+export function transitionOut(el, hide, reject, component, forceSkip = false) {
     // We don't want to transition on the initial page load.
@@ -253,5 +254,5 @@ if (forceSkip) return hide()
 
-        transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hide)
+        transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hide, reject)
     } else if (attrs.some(attr => ['leave', 'leave-start', 'leave-end'].includes(attr.value))) {
-        transitionClassesOut(el, component, attrs, hide)
+        transitionClassesOut(el, component, attrs, hide, reject)
     } else {
@@ -262,3 +263,3 @@ hide()
 
-export function transitionHelperIn(el, modifiers, showCallback) {
+export function transitionHelperIn(el, modifiers, showCallback, reject) {
     // Default values inspired by: https://material.io/design/motion/speed.html#duration
@@ -278,6 +279,6 @@ const styleValues = {
 
-    transitionHelper(el, modifiers, showCallback, () => {}, styleValues, TRANSITION_TYPE_IN)
+    transitionHelper(el, modifiers, showCallback, () => {}, reject, styleValues, TRANSITION_TYPE_IN)
 }
 
-export function transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hideCallback) {
+export function transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hideCallback, reject) {
     // Make the "out" transition .5x slower than the "in". (Visually better)
@@ -303,3 +304,3 @@ // HOWEVER, if they explicitly set a duration for the "out" transition,
 
-    transitionHelper(el, modifiers, () => {}, hideCallback, styleValues, TRANSITION_TYPE_OUT)
+    transitionHelper(el, modifiers, () => {}, hideCallback, reject, styleValues, TRANSITION_TYPE_OUT)
 }
@@ -339,7 +340,6 @@
 
-export function transitionHelper(el, modifiers, hook1, hook2, styleValues, type) {
+export function transitionHelper(el, modifiers, hook1, hook2, reject, styleValues, type) {
     // clear the previous transition if exists to avoid caching the wrong styles
     if (el.__x_transition) {
-        cancelAnimationFrame(el.__x_transition.nextFrame)
-        el.__x_transition.callback && el.__x_transition.callback()
+        el.__x_transition.cancel && el.__x_transition.cancel()
     }
@@ -391,3 +391,3 @@
 
-    transition(el, stages, type)
+    transition(el, stages, type, reject)
 }
@@ -401,3 +401,3 @@
 
-export function transitionClassesIn(el, component, directives, showCallback) {
+export function transitionClassesIn(el, component, directives, showCallback, reject) {
     const enter = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter') || { expression: '' }).expression, el, component))
@@ -407,6 +407,6 @@ const enterStart = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter-start') || { expression: '' }).expression, el, component))
 
-    transitionClasses(el, enter, enterStart, enterEnd, showCallback, () => {}, TRANSITION_TYPE_IN)
+    transitionClasses(el, enter, enterStart, enterEnd, showCallback, () => {}, TRANSITION_TYPE_IN, reject)
 }
 
-export function transitionClassesOut(el, component, directives, hideCallback) {
+export function transitionClassesOut(el, component, directives, hideCallback, reject) {
     const leave = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'leave') || { expression: '' }).expression, el, component))
@@ -416,10 +416,9 @@ const leaveStart = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'leave-start') || { expression: '' }).expression, el, component))
 
-    transitionClasses(el, leave, leaveStart, leaveEnd, () => {}, hideCallback, TRANSITION_TYPE_OUT)
+    transitionClasses(el, leave, leaveStart, leaveEnd, () => {}, hideCallback, TRANSITION_TYPE_OUT, reject)
 }
 
-export function transitionClasses(el, classesDuring, classesStart, classesEnd, hook1, hook2, type) {
+export function transitionClasses(el, classesDuring, classesStart, classesEnd, hook1, hook2, type, reject) {
     // clear the previous transition if exists to avoid caching the wrong classes
     if (el.__x_transition) {
-        cancelAnimationFrame(el.__x_transition.nextFrame)
-        el.__x_transition.callback && el.__x_transition.callback()
+        el.__x_transition.cancel && el.__x_transition.cancel()
     }
@@ -453,6 +452,18 @@
 
-    transition(el, stages, type)
+    transition(el, stages, type, reject)
 }
 
-export function transition(el, stages, type) {
+export function transition(el, stages, type, reject) {
+    const finish = once(() => {
+        stages.hide()
+
+        // Adding an "isConnected" check, in case the callback
+        // removed the element from the DOM.
+        if (el.isConnected) {
+            stages.cleanup()
+        }
+
+        delete el.__x_transition
+    })
+
     el.__x_transition = {
@@ -464,13 +475,8 @@ // Set transition type so we can avoid clearing transition if the direction is the same
         // is only called one time.
-        callback: once(() => {
-            stages.hide()
+        cancel: once(() => {
+            reject(TRANSITION_CANCELLED)
 
-            // Adding an "isConnected" check, in case the callback
-            // removed the element from the DOM.
-            if (el.isConnected) {
-                stages.cleanup()
-            }
-
-            delete el.__x_transition
+            finish()
         }),
+        finish,
         // This store the next animation frame so we can cancel it
@@ -483,3 +489,3 @@ nextFrame: null
 
-    el.__x_transition.nextFrame =requestAnimationFrame(() => {
+    el.__x_transition.nextFrame = requestAnimationFrame(() => {
         // Note: Safari's transitionDuration property will list out comma separated transition durations
@@ -495,6 +501,6 @@ // for every single transition property. Let's grab the first one and call it a day.
 
-        el.__x_transition.nextFrame =requestAnimationFrame(() => {
+        el.__x_transition.nextFrame = requestAnimationFrame(() => {
             stages.end()
 
-            setTimeout(el.__x_transition.callback, duration)
+            setTimeout(el.__x_transition.finish, duration)
         })
@@ -501,0 +507,0 @@ });

test/transition.spec.js

@@ -735,1 +735,77 @@ import Alpine from 'alpinejs'
 })
+
+test('x-transition with parent x-show does not overlap', async () => {
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+        setTimeout(callback, 0)
+    });
+
+    document.body.innerHTML = `
+        <div x-data="{ show: true }">
+            <button x-on:click="show = ! show"></button>
+
+            <h1 x-show="show">
+                <span x-show.transition="show"></span>
+            </h1>
+        </div>
+    `
+
+    Alpine.start()
+
+    // Initial state
+    expect(document.querySelector('span').style.display).toEqual("")
+    expect(document.querySelector('span').style.opacity).toEqual("")
+    expect(document.querySelector('span').style.transform).toEqual("")
+    expect(document.querySelector('span').style.transformOrigin).toEqual("")
+    expect(document.querySelector('h1').style.display).toEqual("")
+    expect(document.querySelector('h1').style.opacity).toEqual("")
+    expect(document.querySelector('h1').style.transform).toEqual("")
+    expect(document.querySelector('h1').style.transformOrigin).toEqual("")
+
+    // Trigger transition out
+    document.querySelector('button').click()
+
+    // Trigger transition in before the previous one has finished
+    await timeout(10)
+    document.querySelector('button').click()
+
+    // Check the element is still visible and style properties are correct
+    await timeout(200)
+    expect(document.querySelector('span').style.display).toEqual("")
+    expect(document.querySelector('span').style.opacity).toEqual("")
+    expect(document.querySelector('span').style.transform).toEqual("")
+    expect(document.querySelector('span').style.transformOrigin).toEqual("")
+    expect(document.querySelector('h1').style.display).toEqual("")
+    expect(document.querySelector('h1').style.opacity).toEqual("")
+    expect(document.querySelector('h1').style.transform).toEqual("")
+    expect(document.querySelector('h1').style.transformOrigin).toEqual("")
+
+    // Hide the element
+    document.querySelector('button').click()
+    await timeout(200)
+    expect(document.querySelector('span').style.display).toEqual("none")
+    expect(document.querySelector('span').style.opacity).toEqual("")
+    expect(document.querySelector('span').style.transform).toEqual("")
+    expect(document.querySelector('span').style.transformOrigin).toEqual("")
+    expect(document.querySelector('h1').style.display).toEqual("none")
+    expect(document.querySelector('h1').style.opacity).toEqual("")
+    expect(document.querySelector('h1').style.transform).toEqual("")
+    expect(document.querySelector('h1').style.transformOrigin).toEqual("")
+
+    // Trigger transition in
+    document.querySelector('button').click()
+
+    // Trigger transition out before the previous one has finished
+    await timeout(10)
+    document.querySelector('button').click()
+
+    // Check the element is hidden and style properties are correct
+    await timeout(200)
+    expect(document.querySelector('span').style.display).toEqual("none")
+    expect(document.querySelector('span').style.opacity).toEqual("")
+    expect(document.querySelector('span').style.transform).toEqual("")
+    expect(document.querySelector('span').style.transformOrigin).toEqual("")
+    expect(document.querySelector('h1').style.display).toEqual("none")
+    expect(document.querySelector('h1').style.opacity).toEqual("")
+    expect(document.querySelector('h1').style.transform).toEqual("")
+    expect(document.querySelector('h1').style.transformOrigin).toEqual("")
+})

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

902807

increased by0.55%

Lines of code

14020

increased by0.69%

No dependency changes