real-view 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,23 @@
+type realViewOptions = {
+    threshold?: number;
+    pollInterval?: number;
+    trackTab?: boolean;
+};
+type VisibilityCallback = (isVisible: boolean) => void;
+declare class realViewEngine {
+    private static instance;
+    private observer;
+    private watchers;
+    static get(): realViewEngine;
+    private constructor();
+    private initObserver;
+    private initTabListener;
+    private handleIntersect;
+    private checkOcclusion;
+    private startPolling;
+    private stopPolling;
+    private notify;
+    observe(el: Element, cb: VisibilityCallback, options?: realViewOptions): () => void;
+}
+
+export { realViewEngine, type realViewOptions };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+type realViewOptions = {
+    threshold?: number;
+    pollInterval?: number;
+    trackTab?: boolean;
+};
+type VisibilityCallback = (isVisible: boolean) => void;
+declare class realViewEngine {
+    private static instance;
+    private observer;
+    private watchers;
+    static get(): realViewEngine;
+    private constructor();
+    private initObserver;
+    private initTabListener;
+    private handleIntersect;
+    private checkOcclusion;
+    private startPolling;
+    private stopPolling;
+    private notify;
+    observe(el: Element, cb: VisibilityCallback, options?: realViewOptions): () => void;
+}
+
+export { realViewEngine, type realViewOptions };

package/dist/index.js

@@ -0,0 +1,6 @@
+import {
+  realViewEngine
+} from "./chunk-UW5FKFTH.js";
+export {
+  realViewEngine
+};

package/dist/react.cjs

@@ -0,0 +1,149 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react.ts
+var react_exports = {};
+__export(react_exports, {
+  userealView: () => userealView
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
+
+// src/core/utils.ts
+var isBrowser = () => {
+  return typeof window !== "undefined" && typeof window.document !== "undefined";
+};
+
+// src/core/engine.ts
+var realViewEngine = class _realViewEngine {
+  constructor() {
+    this.observer = null;
+    this.watchers = /* @__PURE__ */ new Map();
+    if (!isBrowser()) return;
+    this.initObserver();
+    this.initTabListener();
+  }
+  static get() {
+    if (!this.instance) this.instance = new _realViewEngine();
+    return this.instance;
+  }
+  initObserver() {
+    this.observer = new IntersectionObserver(this.handleIntersect.bind(this), {
+      threshold: 0
+    });
+  }
+  initTabListener() {
+    document.addEventListener("visibilitychange", () => {
+      const isHidden = document.hidden;
+      this.watchers.forEach((w) => {
+        if (w.opts.trackTab && isHidden) {
+          this.notify(w, false);
+        } else if (w.state.inViewport && !isHidden) {
+          this.checkOcclusion(w);
+        }
+      });
+    });
+  }
+  handleIntersect(entries) {
+    entries.forEach((entry) => {
+      const watcher = this.watchers.get(entry.target);
+      if (!watcher) return;
+      watcher.state.inViewport = entry.isIntersecting;
+      if (entry.isIntersecting) {
+        this.startPolling(watcher);
+      } else {
+        this.stopPolling(watcher);
+        this.notify(watcher, false);
+      }
+    });
+  }
+  checkOcclusion(w) {
+    if (w.opts.trackTab && document.hidden) return this.notify(w, false);
+    const rect = w.el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return this.notify(w, false);
+    const style = window.getComputedStyle(w.el);
+    if (style.opacity === "0" || style.visibility === "hidden") return this.notify(w, false);
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    const topEl = document.elementFromPoint(x, y);
+    const isVisible = topEl ? w.el.contains(topEl) || w.el === topEl : false;
+    this.notify(w, isVisible);
+  }
+  startPolling(w) {
+    if (w.state.timer) return;
+    const tick = () => {
+      if ("requestIdleCallback" in window) {
+        window.requestIdleCallback(() => this.checkOcclusion(w));
+      } else {
+        this.checkOcclusion(w);
+      }
+    };
+    tick();
+    w.state.timer = window.setInterval(tick, w.opts.pollInterval);
+  }
+  stopPolling(w) {
+    if (w.state.timer) {
+      clearInterval(w.state.timer);
+      w.state.timer = null;
+    }
+  }
+  notify(w, isVisible) {
+    if (w.state.isOccluded !== !isVisible) {
+      w.state.isOccluded = !isVisible;
+      w.cb(isVisible);
+    }
+  }
+  observe(el, cb, options = {}) {
+    if (!isBrowser()) return () => {
+    };
+    const opts = {
+      threshold: 0,
+      pollInterval: 1e3,
+      trackTab: true,
+      ...options
+    };
+    this.watchers.set(el, {
+      el,
+      cb,
+      opts,
+      state: { inViewport: false, isOccluded: false, timer: null }
+    });
+    this.observer?.observe(el);
+    return () => {
+      this.stopPolling(this.watchers.get(el));
+      this.observer?.unobserve(el);
+      this.watchers.delete(el);
+    };
+  }
+};
+
+// src/react.ts
+function userealView(options) {
+  const ref = (0, import_react.useRef)(null);
+  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!ref.current) return;
+    const cleanup = realViewEngine.get().observe(ref.current, setIsVisible, options);
+    return cleanup;
+  }, [options?.pollInterval, options?.trackTab]);
+  return [ref, isVisible];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  userealView
+});

package/dist/react.d.cts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { realViewOptions } from './index.cjs';
+
+declare function userealView(options?: realViewOptions): readonly [react.MutableRefObject<HTMLElement>, boolean];
+
+export { userealView };

package/dist/react.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { realViewOptions } from './index.js';
+
+declare function userealView(options?: realViewOptions): readonly [react.MutableRefObject<HTMLElement>, boolean];
+
+export { userealView };

package/dist/react.js

@@ -0,0 +1,19 @@
+import {
+  realViewEngine
+} from "./chunk-UW5FKFTH.js";
+
+// src/react.ts
+import { useEffect, useRef, useState } from "react";
+function userealView(options) {
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    if (!ref.current) return;
+    const cleanup = realViewEngine.get().observe(ref.current, setIsVisible, options);
+    return cleanup;
+  }, [options?.pollInterval, options?.trackTab]);
+  return [ref, isVisible];
+}
+export {
+  userealView
+};

package/dist/solid.cjs

@@ -0,0 +1,150 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/solid.ts
+var solid_exports = {};
+__export(solid_exports, {
+  createrealView: () => createrealView
+});
+module.exports = __toCommonJS(solid_exports);
+var import_solid_js = require("solid-js");
+
+// src/core/utils.ts
+var isBrowser = () => {
+  return typeof window !== "undefined" && typeof window.document !== "undefined";
+};
+
+// src/core/engine.ts
+var realViewEngine = class _realViewEngine {
+  constructor() {
+    this.observer = null;
+    this.watchers = /* @__PURE__ */ new Map();
+    if (!isBrowser()) return;
+    this.initObserver();
+    this.initTabListener();
+  }
+  static get() {
+    if (!this.instance) this.instance = new _realViewEngine();
+    return this.instance;
+  }
+  initObserver() {
+    this.observer = new IntersectionObserver(this.handleIntersect.bind(this), {
+      threshold: 0
+    });
+  }
+  initTabListener() {
+    document.addEventListener("visibilitychange", () => {
+      const isHidden = document.hidden;
+      this.watchers.forEach((w) => {
+        if (w.opts.trackTab && isHidden) {
+          this.notify(w, false);
+        } else if (w.state.inViewport && !isHidden) {
+          this.checkOcclusion(w);
+        }
+      });
+    });
+  }
+  handleIntersect(entries) {
+    entries.forEach((entry) => {
+      const watcher = this.watchers.get(entry.target);
+      if (!watcher) return;
+      watcher.state.inViewport = entry.isIntersecting;
+      if (entry.isIntersecting) {
+        this.startPolling(watcher);
+      } else {
+        this.stopPolling(watcher);
+        this.notify(watcher, false);
+      }
+    });
+  }
+  checkOcclusion(w) {
+    if (w.opts.trackTab && document.hidden) return this.notify(w, false);
+    const rect = w.el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return this.notify(w, false);
+    const style = window.getComputedStyle(w.el);
+    if (style.opacity === "0" || style.visibility === "hidden") return this.notify(w, false);
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    const topEl = document.elementFromPoint(x, y);
+    const isVisible = topEl ? w.el.contains(topEl) || w.el === topEl : false;
+    this.notify(w, isVisible);
+  }
+  startPolling(w) {
+    if (w.state.timer) return;
+    const tick = () => {
+      if ("requestIdleCallback" in window) {
+        window.requestIdleCallback(() => this.checkOcclusion(w));
+      } else {
+        this.checkOcclusion(w);
+      }
+    };
+    tick();
+    w.state.timer = window.setInterval(tick, w.opts.pollInterval);
+  }
+  stopPolling(w) {
+    if (w.state.timer) {
+      clearInterval(w.state.timer);
+      w.state.timer = null;
+    }
+  }
+  notify(w, isVisible) {
+    if (w.state.isOccluded !== !isVisible) {
+      w.state.isOccluded = !isVisible;
+      w.cb(isVisible);
+    }
+  }
+  observe(el, cb, options = {}) {
+    if (!isBrowser()) return () => {
+    };
+    const opts = {
+      threshold: 0,
+      pollInterval: 1e3,
+      trackTab: true,
+      ...options
+    };
+    this.watchers.set(el, {
+      el,
+      cb,
+      opts,
+      state: { inViewport: false, isOccluded: false, timer: null }
+    });
+    this.observer?.observe(el);
+    return () => {
+      this.stopPolling(this.watchers.get(el));
+      this.observer?.unobserve(el);
+      this.watchers.delete(el);
+    };
+  }
+};
+
+// src/solid.ts
+function createrealView(el, options) {
+  const [isVisible, setIsVisible] = (0, import_solid_js.createSignal)(false);
+  (0, import_solid_js.onMount)(() => {
+    const node = el();
+    if (node) {
+      const stop = realViewEngine.get().observe(node, setIsVisible, options);
+      (0, import_solid_js.onCleanup)(stop);
+    }
+  });
+  return isVisible;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createrealView
+});

package/dist/solid.d.cts

@@ -0,0 +1,6 @@
+import * as solid_js from 'solid-js';
+import { realViewOptions } from './index.cjs';
+
+declare function createrealView(el: () => HTMLElement | null, options?: realViewOptions): solid_js.Accessor<boolean>;
+
+export { createrealView };

package/dist/solid.d.ts

@@ -0,0 +1,6 @@
+import * as solid_js from 'solid-js';
+import { realViewOptions } from './index.js';
+
+declare function createrealView(el: () => HTMLElement | null, options?: realViewOptions): solid_js.Accessor<boolean>;
+
+export { createrealView };

package/dist/solid.js

@@ -0,0 +1,20 @@
+import {
+  realViewEngine
+} from "./chunk-UW5FKFTH.js";
+
+// src/solid.ts
+import { createSignal, onCleanup, onMount } from "solid-js";
+function createrealView(el, options) {
+  const [isVisible, setIsVisible] = createSignal(false);
+  onMount(() => {
+    const node = el();
+    if (node) {
+      const stop = realViewEngine.get().observe(node, setIsVisible, options);
+      onCleanup(stop);
+    }
+  });
+  return isVisible;
+}
+export {
+  createrealView
+};

package/dist/svelte.cjs

@@ -0,0 +1,146 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/svelte.ts
+var svelte_exports = {};
+__export(svelte_exports, {
+  realView: () => realView
+});
+module.exports = __toCommonJS(svelte_exports);
+
+// src/core/utils.ts
+var isBrowser = () => {
+  return typeof window !== "undefined" && typeof window.document !== "undefined";
+};
+
+// src/core/engine.ts
+var realViewEngine = class _realViewEngine {
+  constructor() {
+    this.observer = null;
+    this.watchers = /* @__PURE__ */ new Map();
+    if (!isBrowser()) return;
+    this.initObserver();
+    this.initTabListener();
+  }
+  static get() {
+    if (!this.instance) this.instance = new _realViewEngine();
+    return this.instance;
+  }
+  initObserver() {
+    this.observer = new IntersectionObserver(this.handleIntersect.bind(this), {
+      threshold: 0
+    });
+  }
+  initTabListener() {
+    document.addEventListener("visibilitychange", () => {
+      const isHidden = document.hidden;
+      this.watchers.forEach((w) => {
+        if (w.opts.trackTab && isHidden) {
+          this.notify(w, false);
+        } else if (w.state.inViewport && !isHidden) {
+          this.checkOcclusion(w);
+        }
+      });
+    });
+  }
+  handleIntersect(entries) {
+    entries.forEach((entry) => {
+      const watcher = this.watchers.get(entry.target);
+      if (!watcher) return;
+      watcher.state.inViewport = entry.isIntersecting;
+      if (entry.isIntersecting) {
+        this.startPolling(watcher);
+      } else {
+        this.stopPolling(watcher);
+        this.notify(watcher, false);
+      }
+    });
+  }
+  checkOcclusion(w) {
+    if (w.opts.trackTab && document.hidden) return this.notify(w, false);
+    const rect = w.el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return this.notify(w, false);
+    const style = window.getComputedStyle(w.el);
+    if (style.opacity === "0" || style.visibility === "hidden") return this.notify(w, false);
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    const topEl = document.elementFromPoint(x, y);
+    const isVisible = topEl ? w.el.contains(topEl) || w.el === topEl : false;
+    this.notify(w, isVisible);
+  }
+  startPolling(w) {
+    if (w.state.timer) return;
+    const tick = () => {
+      if ("requestIdleCallback" in window) {
+        window.requestIdleCallback(() => this.checkOcclusion(w));
+      } else {
+        this.checkOcclusion(w);
+      }
+    };
+    tick();
+    w.state.timer = window.setInterval(tick, w.opts.pollInterval);
+  }
+  stopPolling(w) {
+    if (w.state.timer) {
+      clearInterval(w.state.timer);
+      w.state.timer = null;
+    }
+  }
+  notify(w, isVisible) {
+    if (w.state.isOccluded !== !isVisible) {
+      w.state.isOccluded = !isVisible;
+      w.cb(isVisible);
+    }
+  }
+  observe(el, cb, options = {}) {
+    if (!isBrowser()) return () => {
+    };
+    const opts = {
+      threshold: 0,
+      pollInterval: 1e3,
+      trackTab: true,
+      ...options
+    };
+    this.watchers.set(el, {
+      el,
+      cb,
+      opts,
+      state: { inViewport: false, isOccluded: false, timer: null }
+    });
+    this.observer?.observe(el);
+    return () => {
+      this.stopPolling(this.watchers.get(el));
+      this.observer?.unobserve(el);
+      this.watchers.delete(el);
+    };
+  }
+};
+
+// src/svelte.ts
+function realView(node, params) {
+  const stop = realViewEngine.get().observe(node, params.onVisible, params.options);
+  return {
+    destroy() {
+      stop();
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  realView
+});

package/dist/svelte.d.cts

@@ -0,0 +1,11 @@
+import { realViewOptions } from './index.cjs';
+
+type Params = {
+    onVisible: (v: boolean) => void;
+    options?: realViewOptions;
+};
+declare function realView(node: HTMLElement, params: Params): {
+    destroy(): void;
+};
+
+export { realView };

package/dist/svelte.d.ts

@@ -0,0 +1,11 @@
+import { realViewOptions } from './index.js';
+
+type Params = {
+    onVisible: (v: boolean) => void;
+    options?: realViewOptions;
+};
+declare function realView(node: HTMLElement, params: Params): {
+    destroy(): void;
+};
+
+export { realView };

package/dist/svelte.js

@@ -0,0 +1,16 @@
+import {
+  realViewEngine
+} from "./chunk-UW5FKFTH.js";
+
+// src/svelte.ts
+function realView(node, params) {
+  const stop = realViewEngine.get().observe(node, params.onVisible, params.options);
+  return {
+    destroy() {
+      stop();
+    }
+  };
+}
+export {
+  realView
+};