Fix x-intersect reliability (#2557)

* Fix x-intersect reliability

Makes `x-intersect` a true alias of `x-intersect:enter`,
and ensures that it reliably works when the tracked element
enters the viewport.

No longer relies on the untrustworthy `intersectionRatio`.

see #1871
see #1833

* Simplify the intersection callback "bail" condition

Because there are only two modes, anything that is not "leave"
is therefore "enter"/default and we can save some bytes here.

packages/docs/src/en/plugins/intersect.md

@@ -78,16 +78,18 @@ For example, in the following snippet, `shown` will remain `false` until the ele
 <a name="x-intersect-enter"></a>
 ### x-intersect:enter
 
-You can opt to only trigger x-intersect when the element ENTERS the viewport by adding the `:enter` suffix to `x-intersect` like so:
+The `:enter` suffix is an alias of `x-intersect`, and works the same way:
 
 ```alpine
 <div x-intersect:enter="shown = true">...</div>
 ```
 
+You may choose to use this for clarity when also using the `:leave` suffix.
+
 <a name="x-intersect-leave"></a>
 ### x-intersect:leave
 
-Similarly, you can add `:leave` to only trigger x-intersect when the element LEAVES the viewport:
+Appending `:leave` runs your expression when the element leaves the viewport:
 
 ```alpine
 <div x-intersect:leave="shown = true">...</div>

packages/intersect/src/index.js

@@ -9,11 +9,8 @@ export default function (Alpine) {
 
         let observer = new IntersectionObserver(entries => {
             entries.forEach(entry => {
-                if (
-                     ! entry.isIntersecting && value === 'enter'
-                    || entry.isIntersecting && value === 'leave'
-                    || entry.intersectionRatio === 0 && ! value
-                ) return
+                // Ignore entry if intersecting in leave mode, or not intersecting in enter mode
+                if (entry.isIntersecting === (value === 'leave')) return
 
                 evaluate()