alpinejs - npm Package Compare versions

Comparing version 2.3.4 to 2.3.5

package.json

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

src/utils.js

@@ -154,3 +154,3 @@
     // Otherwise, we can assume x-transition:enter.
-    } else if (attrs.length > 0) {
+    } else if (attrs.filter(attr => ['enter', 'enter-start', 'enter-end'].includes(attr.value)).length > 0) {
         transitionClassesIn(el, attrs, show)
@@ -180,3 +180,3 @@ } else {
         transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hide)
-    } else if (attrs.length > 0) {
+    } else if (attrs.filter(attr => ['leave', 'leave-start', 'leave-end'].includes(attr.value)).length > 0) {
         transitionClassesOut(el, attrs, hide)
@@ -183,0 +183,0 @@ } else {

test/transition.spec.js

 import Alpine from 'alpinejs'
 import { wait } from '@testing-library/dom'
+const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
 
@@ -148,2 +149,64 @@ global.MutationObserver = class {
 
+test('if only transition leave directives are present, don\'t transition in at all', async () => {
+    var frameStack = []
+
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+        frameStack.push(callback)
+    });
+
+    document.body.innerHTML = `
+        <div x-data="{ show: false }">
+            <button x-on:click="show = ! show"></button>
+
+            <span x-show="show"
+                x-transition:leave="leave"
+                x-transition:leave-start="leave-start"
+                x-transition:leave-end="leave-end"
+            ></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;') })
+
+    document.querySelector('button').click()
+
+    await timeout(10)
+
+    expect(frameStack.length).toEqual(0)
+    expect(document.querySelector('span').getAttribute('style')).toEqual(null)
+})
+
+test('if only transition enter directives are present, don\'t transition out at all', async () => {
+    var frameStack = []
+
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+        frameStack.push(callback)
+    });
+
+    document.body.innerHTML = `
+        <div x-data="{ show: true }">
+            <button x-on:click="show = ! show"></button>
+
+            <span x-show="show"
+                x-transition:enter="enter"
+                x-transition:enter-start="enter-start"
+                x-transition:enter-end="enter-end"
+            ></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual(null) })
+
+    document.querySelector('button').click()
+
+    await timeout(10)
+
+    expect(frameStack.length).toEqual(0)
+    expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
+})
+
 test('original class attribute classes are preserved after transition finishes', async () => {
@@ -150,0 +213,0 @@ var frameStack = []

No alert changes

Improved metrics

Total package byte prevSize

581707

0.44%

Lines of code

11913

0.43%

No dependency changes