@blackglory/observe 0.2.0 → 0.2.1

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@blackglory/observe",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A module for observing things happening.",
   "keywords": [
     "DOM"
   ],
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "type": "module",
   "main": "lib/index.js",

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './observe-addtion-of-descendant-nodes.js'
+export * from './observe-removal-of-descendant-nodes.js'
+export * from './observe-state-changes.js'
+export * from './observe-url-changes.js'

package/src/observe-addtion-of-descendant-nodes.ts

@@ -0,0 +1,18 @@
+import { fromMutationObserver } from '@utils/from-mutation-observer.js'
+import { filter, map } from 'rxjs/operators'
+import { Observable } from 'rxjs'
+import * as Iter from 'iterable-operator'
+
+export function observeAdditionOfDescendantNodes(node: Node): Observable<Node[]> {
+  return fromMutationObserver(
+    node
+  , { childList: true, subtree: true }
+  ).pipe(
+    map(records => Iter.toArray(
+      Iter.flatten<Node>(
+        Iter.map(records, x => x.addedNodes)
+      )
+    ))
+  , filter(addedNodes => addedNodes.length > 0)
+  )
+}

package/src/observe-removal-of-descendant-nodes.ts

@@ -0,0 +1,18 @@
+import { fromMutationObserver } from '@utils/from-mutation-observer.js'
+import { filter, map } from 'rxjs/operators'
+import { Observable } from 'rxjs'
+import * as Iter from 'iterable-operator'
+
+export function observeRemovalOfDescendantNodes(node: Node): Observable<Node[]> {
+  return fromMutationObserver(
+    node
+  , { childList: true, subtree: true }
+  ).pipe(
+    map(records => Iter.toArray(
+      Iter.flatten<Node>(
+        Iter.map(records, x => x.removedNodes)
+      )
+    ))
+  , filter(removedNodes => removedNodes.length > 0)
+  )
+}

package/src/observe-state-changes.ts

@@ -0,0 +1,55 @@
+import { Observable, Subscriber, fromEvent, merge } from 'rxjs'
+import { map } from 'rxjs/operators'
+
+const pushStateHooks = new Set<Subscriber<void>>()
+const replaceStateHooks = new Set<Subscriber<void>>()
+let pushStateHookRegistered = false
+let replaceStateHookRegistered = false
+
+export function observeStateChanges(): Observable<void> {
+  return merge(
+    observePushState()
+  , observeReplaceState()
+  , fromEvent(window, 'popstate')
+  ).pipe(
+    map(_ => undefined)
+  )
+}
+
+function observePushState(): Observable<void> {
+  return new Observable(observer => {
+    if (!pushStateHookRegistered) {
+      registerPushStateHook()
+    }
+    pushStateHooks.add(observer)
+    return () => pushStateHooks.delete(observer)
+  })
+}
+
+function observeReplaceState(): Observable<void> {
+  return new Observable(observer => {
+    if (!replaceStateHookRegistered) {
+      registerReplaceStateHook()
+    }
+    replaceStateHooks.add(observer)
+    return () => replaceStateHooks.delete(observer)
+  })
+}
+
+function registerPushStateHook() {
+  const pushState = history.pushState
+  history.pushState = function (...args) {
+    Reflect.apply(pushState, this, args)
+    pushStateHooks.forEach(observer => observer.next())
+  }
+  pushStateHookRegistered = true
+}
+
+function registerReplaceStateHook() {
+  const replaceState = history.replaceState
+  history.replaceState = function (...args) {
+    Reflect.apply(replaceState, this, args)
+    replaceStateHooks.forEach(observer => observer.next())
+  }
+  replaceStateHookRegistered = true
+}

package/src/observe-url-changes.ts

@@ -0,0 +1,11 @@
+import { Observable, animationFrames } from 'rxjs'
+import { filter, tap, map } from 'rxjs/operators'
+
+export function observeURLChanges(): Observable<void> {
+  let url = document.URL
+  return animationFrames().pipe(
+    filter(() => url !== document.URL)
+  , tap(() => url = document.URL)
+  , map(() => undefined)
+  )
+}

package/src/utils/from-mutation-observer.ts

@@ -0,0 +1,13 @@
+import { Observable } from 'rxjs'
+
+export function fromMutationObserver(
+  ...args: Parameters<MutationObserver['observe']>
+): Observable<MutationRecord[]> {
+  return new Observable(subscriber => {
+    const observer = new MutationObserver(
+      mutationList => subscriber.next(mutationList)
+    )
+    observer.observe(...args)
+    return () => observer.disconnect()
+  })
+}