{"size": 852, "ext": "js", "max_stars_repo_path": "web/app/components/intersectable-comp.js", "max_stars_repo_name": "nicolasparada/nakama", "max_stars_repo_stars_event_min_datetime": "2017-09-16T12:59:48.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-21T02:19:19.000Z", "max_issues_repo_path": "web/app/components/intersectable-comp.js", "max_issues_repo_name": "arjundoye/nakama", "max_issues_repo_issues_event_min_datetime": "2019-02-01T06:16:40.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-26T18:30:04.000Z", "max_forks_repo_path": "web/app/components/intersectable-comp.js", "max_forks_repo_name": "nakamauwu/nakama", "max_forks_repo_forks_event_min_datetime": "2018-01-15T16:44:09.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-10T21:09:51.000Z"}
{"max_stars_count": 183, "max_issues_count": 50, "max_forks_count": 28, "avg_line_length": 25.0588235294, "max_line_length": 98, "alphanum_fraction": 0.5657276995}
import { component, html, useEffect, useRef } from "haunted"
import { ref } from "../directives/ref.js"

function IntersectableComp() {
    const nodeRef = useRef(null)

    const dispatchIsIntersecting = () => {
        this.dispatchEvent(new CustomEvent("is-intersecting", { bubbles: true }))
    }

    useEffect(() => {
        if (nodeRef.current === null) {
            return
        }

        const obs = new IntersectionObserver(([entry]) => {
            if (!entry.isIntersecting) {
                return
            }

            dispatchIsIntersecting()
        })

        obs.observe(nodeRef.current)
        return () => {
            obs.disconnect()
        }
    }, [nodeRef])

    return html`<div .ref=${ref(nodeRef)}></div>`
}

customElements.define("intersectable-comp", component(IntersectableComp, { useShadowDOM: false }))
