Extend data-on-intersect

[Mortalife]

Feature Request

I'm hoping that you will consider extending the data-on-intersect attribute to support entry and exit.

Right now, it fires only when you enter the element and there is no way to reuse the the IntersectionObserver to extend it in userland.

I have "solved" this with web components, but I believe it would be beneficial to have inside Datastar for everyone.

Proposed Changes

• Allow the option to invert the intersection with a modifier, this will allow the user to choose whether they're tracking the entry or exit.
• Allow the user to omit the callback and receive events instead.

// Icon: mdi-light:vector-intersection
// Slug: Runs an expression on intersection.
// Description: Runs an expression when the element intersects with the viewport.

import type { AttributePlugin, HTMLOrSVG } from '../../engine/types'
import { modifyTiming } from '../../utils/timing'
import { modifyViewTransition } from '../../utils/view-transitions'

const once = new WeakSet<HTMLOrSVG>()

export const OnIntersect: AttributePlugin = {
  type: 'attribute',
  name: 'onIntersect',
  keyReq: 'denied',
  onLoad: ({ el, mods, rx, startBatch, endBatch }) => {
    let callback = () => {
      startBatch()
      rx()
      endBatch()
    }
    callback = modifyTiming(callback, mods)
    callback = modifyViewTransition(callback, mods)
    const options = { threshold: 0 }
    if (mods.has('full')) {
      options.threshold = 1
    } else if (mods.has('half')) {
      options.threshold = 0.5
    }
    let observer: IntersectionObserver | null = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
            el.dispatchEvent(
              new CustomEvent(entry.isIntersecting ? "intersect-entry" : "intersect-exit", { bubbles: false })
            )
          
          if (mods.has('exit') ^ entry.isIntersecting) {
            callback()
            if (observer && once.has(el)) {
              observer.disconnect()
            }
          }
        }
      },
      options,
    )
    observer.observe(el)
    if (mods.has('once')) {
      once.add(el)
    }
    return () => {
      if (!mods.has('once')) {
        once.delete(el)
      }
      if (observer) {
        observer.disconnect()
        observer = null
      }
    }
  },
}

Datastar Version

v1.0.0–RC.2

[bencroker]

The exit modifier sounds like a great enhancement. I’m not so keep on dispatching an event, as that could open the door to feature requests for other data-on-* attributes to dispatch events.

[Mortalife]

The reason behind that was to allow for tracking both entry and exit with a single IntersectionObserver while keeping the expressions for each separate. You could do also do a modifier for entryexit, but then I think you'd need to expose an argument to allow for handling them separately.

[Mortalife]

Entry/Exit

// Icon: mdi-light:vector-intersection
// Slug: Runs an expression on intersection.
// Description: Runs an expression when the element intersects with the viewport.

import type { AttributePlugin, HTMLOrSVG } from '../../engine/types'
import { modifyTiming } from '../../utils/timing'
import { modifyViewTransition } from '../../utils/view-transitions'

const once = new WeakSet<HTMLOrSVG>()

export const OnIntersect: AttributePlugin = {
  type: 'attribute',
  name: 'onIntersect',
  keyReq: 'denied',
  argNames: ['evt'],
  onLoad: ({ el, mods, rx, startBatch, endBatch }) => {
    let callback = (evt?: IntersectionObserverEntry) => {
      if (evt) {
        ctx.evt = evt
      }
      startBatch()
      rx(evt)
      endBatch()
    }
    callback = modifyTiming(callback, mods)
    callback = modifyViewTransition(callback, mods)
    const options = { threshold: 0 }
    if (mods.has('full')) {
      options.threshold = 1
    } else if (mods.has('half')) {
      options.threshold = 0.5
    }
    let observer: IntersectionObserver | null = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {         
          if (mods.has('entryexit') || mods.has('exit') ^ entry.isIntersecting) {
            callback(entry)
            if (observer && once.has(el)) {
              observer.disconnect()
            }
          }
        }
      },
      options,
    )
    observer.observe(el)
    if (mods.has('once')) {
      once.add(el)
    }
    return () => {
      if (!mods.has('once')) {
        once.delete(el)
      }
      if (observer) {
        observer.disconnect()
        observer = null
      }
    }
  },
}