Reference

Architecture

Four packages sharing one design: @macrulez/inview-core does the actual work with zero framework dependency — createScrollEngine, createVisibilityEngine, createElementTracker. All three read from a single shared rafLoop (one requestAnimationFrame callback for the whole engine, instead of every scroll/tracker subscription running its own), and visibility observation goes through a shared, pooled ObserverPool (native IntersectionObserver instances pooled by (root, rootMargin, threshold)). @macrulez/inview-vue and @macrulez/inview-react are both thin adapters over these same three engines — reactive Refs for Vue, useSyncExternalStore for React — with useParallaxLayer as the one composable/hook on each side that adds its own logic on top, rather than just forwarding engine state. @macrulez/inview-nuxt adds nothing of its own beyond auto-imports and a client-side plugin that seeds the Vue package's shared defaults from nuxt.config.ts.

SSR compatibility

Every core engine and every composable/hook is SSR-safe on its own: without a window (or without IntersectionObserver), each one returns a static, zero-value snapshot instead of throwing, and starts a real subscription only once it's actually running on the client. No package requires <ClientOnly> anywhere — including the Nuxt module, whose client-only plugin only seeds defaults, not the composables' core SSR-safety.

Bundle size & peer dependencies

@macrulez/inview-core has no peer dependencies at all — it's usable standalone in any environment, including outside a framework entirely. @macrulez/inview-vue depends on @macrulez/inview-core and peers on vue: ^3.3.0. @macrulez/inview-react depends on @macrulez/inview-core and peers on react: ^18.0.0 || ^19.0.0. @macrulez/inview-nuxt depends on @macrulez/inview-vue and @nuxt/kit, and peers on nuxt: ^3.9.0 || ^4.0.0. All four ship sideEffects: false.

Development

A pnpm workspaces monorepo (packages/* + a Vite + Vue playground).

pnpm install

pnpm test        # tests for every package (vitest)
pnpm build       # build core/vue/react/nuxt (tsup)
pnpm dev         # playground on Vite
pnpm typecheck   # build + tsc/vue-tsc across every package

Packages are linked via workspace:* — pnpm build builds core before the packages that depend on it automatically (pnpm's topological order). The vue/react test suites resolve @macrulez/inview-core straight from its src/ via a Vitest alias, so pnpm test doesn't need a prior build — but typechecking the adapters resolves core through its built dist, so run pnpm build after editing core before pnpm typecheck.

License

MIT.