feat: add useIntersectionObserver (#27)

* WIP: intersectionObserver * WIP: IntersectionObserver * docs: add IntersectionObserver documentation * test: add intersectionObserver tests * types: fix Ref<Element> to use RefElement * changelog: added intersectionObserver to unreleased * trigger build * types: fix types * hiding debug method

Author: pikax

CHANGELOG.md

@@ -3,6 +3,12 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+------------------------------
+
+### Added
+- [IntersectionObserver](composable/web/intersectionObserver) - Provides functionality to IntersectionObserver #27
+
 ## 0.2.2
 ------------------------------
 *2019-12-10*

docs/.vuepress/components/ArrayPaginationExample.vue

@@ -14,7 +14,6 @@
 </template>
 
 <script>
-// import { useArrayPagination } from '../../../packages/core';
 import { useArrayPagination } from "vue-composable";
 
 export default {

docs/.vuepress/components/IntersectionObserverExample.vue

@@ -0,0 +1,32 @@
+<template>
+ <div>
+ Visible: {{ isIntersecting }}
+
+ <p>Scroll down</p>
+
+ <div style="height:500px"/>
+
+ <div ref="el" style="background:lightgreen">
+ Hide me
+ </div>
+ 
+ <p>Scroll up</p>
+ </div>
+</template>
+
+<script>
+import {ref, watch, reactive} from '@vue/composition-api';
+import {useIntersectionObserver} from 'vue-composable';
+
+export default {
+ name: "intersection-observer-example",
+ setup(){
+ const el = ref(null);
+ const o = useIntersectionObserver(el);
+ return {
+ ...o,
+ el
+ }
+ }
+}
+</script>

docs/.vuepress/config.js

@@ -196,7 +196,9 @@ module.exports = {
  collapsable: false,
  children: [
  ["composable/web/fetch", "fetch"],
- ["composable/web/webSocket", "webSocket"]
+ ["composable/web/webSocket", "webSocket"],
+ ["composable/web/intersectionObserver", "IntersectionObserver"]
+
  ]
  },
  {

docs/README.md

@@ -71,6 +71,7 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
 
 - [Fetch](composable/web/fetch) - reactive `fetch` wrapper
 - [WebSocket](composable/web/webSocket) - reactive `WebSocket` wrapper
+- [IntersectionObserver](composable/web/intersectionObserver) - reactive `IntersectionObserver`
 
 ### External
 

docs/composable/web/intersectionObserver.md

@@ -0,0 +1,78 @@
+# IntersectionObserver
+
+> The [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+
+## State
+
+The `useIntersectionObserver` function exposes the following reactive state:
+
+```js
+import { useIntersectionObserver } from "vue-composable";
+
+const { elements, isIntersecting } = useIntersectionObserver(options);
+```
+
+| State | Type | Description |
+| -------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------- |
+| elements | `IntersectionObserverEntry[]` | [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
+| isIntersecting | `Boolean` | Returns true if **all** observed elements are intersection |
+
+## Methods
+
+The `useIntersectionObserver` function exposes the following methods:
+
+```js
+import { useIntersectionObserver } from "vue-composable";
+
+const { observe, unobserve, disconnect, debug } = useIntersectionObserver();
+```
+
+| Signature | Description |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `observe(Element)` | Starts observing Element |
+| `unobserve(Element` | Stops observing Element |
+| `disconnect()` | [IntersectionObserver.disconnect](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/disconnect) |
+
+<!-- | `debug()` | Provides some debug information: [WIP] | -->
+
+## Example
+
+```vue
+<template>
+ <div>
+ Visible: {{ isIntersecting }}
+
+ <p>Scroll down</p>
+ <div style="height:500px" />
+
+ <div ref="el" style="background:lightgreen">
+ Hide me
+ </div>
+
+ <p>Scroll up</p>
+ </div>
+</template>
+
+<script>
+import { ref, watch, reactive } from "@vue/composition-api";
+import { useIntersectionObserver } from "vue-composable";
+
+export default {
+ name: "intersection-observer-example",
+ setup() {
+ const el = ref(null);
+ const o = useIntersectionObserver(el);
+ return {
+ ...o,
+ el
+ };
+ }
+};
+</script>
+```
+
+### Code
+
+<ClientOnly>
+<intersection-observer-example/>
+</ClientOnly>

packages/core/src/utils.ts

@@ -2,11 +2,16 @@
 import { Ref, isRef, ref } from "@vue/composition-api";
 
 export type RefTyped<T> = T | Ref<T>;
-export type RefElement = RefTyped<Element>;
+export type RefElement = Element | Ref<Element | undefined>;
 
-// export function unwrap<T>(o: RefTyped<T>): T {
-// return isRef(o) ? o.value : o;
-// }
+export function unwrap(o: RefElement): Element;
+export function unwrap<T>(o: RefTyped<T>): T;
+export function unwrap<T>(o: RefTyped<T>): T {
+ return isRef(o) ? o.value : o;
+}
+
+export function wrap(o: RefElement): Ref<Element>;
+export function wrap<T>(o: RefTyped<T>): Ref<T>;
 export function wrap<T>(o: RefTyped<T>): Ref<T> {
  return isRef(o) ? o : ref(o);
 }
@@ -28,6 +33,9 @@ export const isNumber = (val: unknown): val is number =>
 export const isObject = (val: unknown): val is Record<any, any> =>
  val !== null && typeof val === "object";
 
+export const isElement = (val: unknown): val is Element =>
+ isObject(val) && !!val.tagName;
+
 export function isPromise<T = any>(val: unknown): val is Promise<T> {
  return isObject(val) && isFunction(val.then) && isFunction(val.catch);
 }