@xenterprises/nuxt-x-marketing 1.5.1 → 1.5.2

package/CHANGELOG.md

@@ -30,6 +30,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   section and its sample product data were dropped with them. Every other section of the
   demo page is unchanged.
 
+## [1.5.2] - 2026-10-12
+
+### Fixed
+
+- **Scroll reveal uses one long-lived shared IntersectionObserver.** It is created once
+  and never disconnected or rebuilt; plugin hooks (`app:mounted`, `page:finish`) and
+  components only scan for new reveal elements and observe them. Removes the observer
+  churn that left elements unrevealed when IO callbacks did not fire in time. In-viewport
+  elements are still marked visible synchronously, and the fallback timer remains.
+  XMarkHero default look is unchanged from 1.5.1 (text visible by default, new props opt-in).
+
 ## [1.5.1] - 2026-10-12
 
 ### Fixed

package/app/composables/useScrollReveal.js

@@ -24,10 +24,12 @@ const animationSelectors = [
   '.xFadeUp-stagger',
 ].join(', ');
 
-// One active observer app-wide. Every init (plugin, app.vue workaround,
-// component) replaces the previous one, so callers never stack observers.
-let activeObserver = null;
+// One long-lived observer shared app-wide. It is created once and never
+// rebuilt: every init (plugin hooks, components, app.vue workarounds) only
+// scans for new elements and observes them, so there is no observer churn.
+let sharedObserver = null;
 let fallbackTimer = null;
+const observed = new WeakSet();
 
 const prefersReducedMotion = () =>
   typeof window !== 'undefined' &&
@@ -41,18 +43,40 @@ const inViewport = (el) => {
   return r.bottom > 0 && r.right > 0 && r.top < vh && r.left < vw;
 };
 
-export const useScrollReveal = (options = {}) => {
-  // Lifecycle hooks are only registered inside a component instance.
-  // Outside one (e.g. a plugin) the caller drives initScrollReveal/cleanup itself.
-  const instance = getCurrentInstance();
+const revealInViewport = () => {
+  document.querySelectorAll(animationSelectors).forEach((el) => {
+    if (!el.classList.contains('is-visible') && inViewport(el)) {
+      el.classList.add('is-visible');
+      sharedObserver?.unobserve(el);
+    }
+  });
+};
 
-  const defaultOptions = {
-    threshold: 0.15,
-    rootMargin: '0px 0px -80px 0px',
-    ...options,
-  };
+const getSharedObserver = () => {
+  if (!sharedObserver) {
+    sharedObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('is-visible');
+          sharedObserver?.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.15, rootMargin: '0px 0px -80px 0px' });
+  }
+  return sharedObserver;
+};
 
-  const observer = ref(null);
+// Test-only: drop the shared observer and pending fallback.
+export const __resetScrollRevealForTests = () => {
+  sharedObserver = null;
+  if (fallbackTimer) clearTimeout(fallbackTimer);
+  fallbackTimer = null;
+};
+
+export const useScrollReveal = () => {
+  // Lifecycle hooks are only registered inside a component instance.
+  // Outside one (e.g. a plugin) the caller drives initScrollReveal itself.
+  const instance = getCurrentInstance();
 
   const initScrollReveal = () => {
     if (!import.meta.client || typeof document === 'undefined') return;
@@ -75,54 +99,31 @@ export const useScrollReveal = (options = {}) => {
     });
     root.classList.add(REVEAL_ARMED_CLASS);
 
-    if (activeObserver && activeObserver !== observer.value) activeObserver.disconnect();
-    if (observer.value) observer.value.disconnect();
-
-    observer.value = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          entry.target.classList.add('is-visible');
-          if (options.once !== false) {
-            observer.value?.unobserve(entry.target);
-          }
-        } else if (options.once === false) {
-          entry.target.classList.remove('is-visible');
-        }
-      });
-    }, defaultOptions);
-    activeObserver = observer.value;
-
-    elements.forEach((el) => observer.value?.observe(el));
+    const io = getSharedObserver();
+    elements.forEach((el) => {
+      if (!el.classList.contains('is-visible') && !observed.has(el)) {
+        observed.add(el);
+        io.observe(el);
+      }
+    });
 
     // Fallback: if IO never fires, reveal anything on screen after a short wait.
     if (fallbackTimer) clearTimeout(fallbackTimer);
     fallbackTimer = setTimeout(() => {
       fallbackTimer = null;
-      document.querySelectorAll(animationSelectors).forEach((el) => {
-        if (!el.classList.contains('is-visible') && inViewport(el)) {
-          el.classList.add('is-visible');
-        }
-      });
+      revealInViewport();
     }, REVEAL_FALLBACK_MS);
   };
 
-  const cleanup = () => {
-    if (observer.value) {
-      observer.value.disconnect();
-      if (activeObserver === observer.value) activeObserver = null;
-      observer.value = null;
-    }
-  };
+  // The shared observer is long-lived; per-caller cleanup is a no-op.
+  // Detached elements are released by the WeakSet and by IO itself.
+  const cleanup = () => {};
 
   if (import.meta.client && instance) {
     onMounted(() => {
       // Small delay to ensure DOM is ready
       setTimeout(initScrollReveal, 100);
     });
-
-    onUnmounted(() => {
-      cleanup();
-    });
   }
 
   return {

package/app/plugins/marketing.client.ts

@@ -9,7 +9,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   // instance, so drive it from app hooks: app:mounted covers initial
   // hydration (including prerendered pages, where page:finish can fire
   // before mount or not at all), page:finish covers client navigations.
-  // initScrollReveal is idempotent and keeps one observer app-wide.
+  // initScrollReveal only scans and observes new elements on one shared,
+  // long-lived observer; it never tears down or rebuilds it.
   const { initScrollReveal } = useScrollReveal();
   const run = () => nextTick(() => initScrollReveal());
   nuxtApp.hook('app:mounted', run);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xenterprises/nuxt-x-marketing",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",