rexr 0.2.0 → 0.4.0

package/src/windowSize/index.ts

@@ -0,0 +1,34 @@
+import { EventState, event } from 'reev/src'
+import { WindowSizeState } from './types'
+
+export * from './types'
+
+export const windowSizeEvent = () => {
+        const mount = () => {
+                self.change()
+                window.addEventListener('resize', self.change)
+        }
+
+        const clean = () => {
+                window.removeEventListener('resize', self.change)
+        }
+
+        const change = () => {
+                self.callback()
+                self.snapshot = [self]
+                self.width = window.innerWidth
+                self.height = window.innerHeight
+        }
+
+        const self = event({
+                width: 1920,
+                height: 1080,
+                change,
+                mount,
+                clean,
+        }) as EventState<WindowSizeState>
+
+        self.snapshot = [self]
+
+        return self
+}

package/src/windowSize/react.ts

@@ -0,0 +1,19 @@
+import { useSyncExternalStore } from 'react'
+import { windowSizeEvent } from './index'
+import { WindowSizeState } from './types'
+import { EventState } from 'reev/src'
+
+let self: EventState<WindowSizeState>
+
+const subscribe = (callback = () => {}) => {
+        self({ callback }).mount()
+        return () => self({ callback }).clean()
+}
+
+const getSnapshot = () => self.snapshot
+
+export const useWindowSize = () => {
+        if (!self) self = windowSizeEvent()
+        const [ret] = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+        return ret
+}

package/src/windowSize/types.ts

@@ -0,0 +1,11 @@
+export interface WindowSizeState {
+        snapshot: [WindowSizeState]
+        width: number
+        height: number
+        callback(): void
+        change(): void
+        mount(): void
+        clean(): void
+}
+
+export type WindowSizeArg = Partial<WindowSizeState> | WindowSizeState['change']