feat(web): add online atom (#940)

* feat(web): add online atom * chore(web): fix atoms names --------- Co-authored-by: Arutiunian Artem <[email protected]>
artalar · Oct 14, 2024 · 6413696 · 6413696
1 parent 042a77c
commit 6413696
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -27,7 +27,9 @@
     "test:watch": "tsx watch src/index.test.ts"
   },
   "dependencies": {
-    "@reatom/core": ">=3.5.0"
+    "@reatom/core": ">=3.5.0",
+    "@reatom/hooks": "^3.2.0",
+    "@reatom/primitives": "^3.5.0"
   },
   "author": "artalar",
   "maintainers": [

diff --git a/packages/web/src/event.ts b/packages/web/src/event.ts
@@ -31,12 +31,14 @@ export const onEvent: {
     target: Target,
     type: Type,
     cb: (value: EventOfTarget<Target, Type>) => any,
+    options?: AddEventListenerOptions
   ): Unsubscribe
   <Event>(
     ctx: Ctx,
     target: EventTarget,
     type: string,
     cb: (value: Event) => any,
+    options?: AddEventListenerOptions
   ): Unsubscribe
 } = (ctx: Ctx, target: EventTarget, type: string, listener: Fn) => {
   let un

diff --git a/packages/web/src/index.ts b/packages/web/src/index.ts
@@ -1 +1,2 @@
 export * from './event'
+export * from './online'
diff --git a/packages/web/src/online.ts b/packages/web/src/online.ts
@@ -0,0 +1,36 @@
+import { atom, type Atom } from '@reatom/core'
+import { onConnect } from '@reatom/hooks'
+import { withAssign } from '@reatom/primitives'
+import { onEvent } from './event'
+
+type OnlineAtom = Atom<boolean> & {
+  /** Time stamp of transition to online mode. */
+  offlineAtAtom: Atom<number | undefined>
+  /** Time stamp of transition to offline mode. */
+  onlineAtAtom: Atom<number | undefined>
+}
+
+/**
+ * @note https://issues.chromium.org/issues/338514113
+ */
+export const createOnlineAtom = (): OnlineAtom => {
+  const onlineAtom = atom(navigator.onLine, 'onLine')
+    .pipe(withAssign(() => ({
+      offlineAtAtom: atom<number | undefined>(undefined, 'onLine.offlineAtAtom'),
+      onlineAtAtom: atom<number | undefined>(undefined, 'onLine.onlineAtAtom'),
+    })))
+
+  onConnect(onlineAtom, (ctx) => {
+    onlineAtom(ctx, navigator.onLine)
+    onEvent(ctx, window, 'online', () => {
+      onlineAtom(ctx, true)
+      onlineAtom.onlineAtAtom(ctx, Date.now())
+    })
+    onEvent(ctx, window, 'offline', () => {
+      onlineAtom(ctx, false)
+      onlineAtom.offlineAtAtom(ctx, Date.now())
+    })
+  })
+
+  return onlineAtom
+}