rexr 0.2.0 → 0.4.0

package/dist/{types-5626eef1.d.ts → types-144e414c.d.ts}

@@ -6,38 +6,42 @@ interface BatteryState {
     chargingTime: number;
     dischargingTime: number;
     callback(): void;
-    onChange(): void;
-    onMount(): void;
-    onClean(): void;
+    change(): void;
+    mount(): void;
+    clean(): void;
 }
+declare type BatteryArg = Partial<BatteryState> | BatteryState['change'];
 
 interface ClipboardState {
     snapshot: [ClipboardState];
     clipboard: string;
     callback(): void;
-    onChange(): void;
-    onMount(): void;
-    onClean(): void;
+    change(): void;
+    mount(): void;
+    clean(): void;
 }
+declare type ClipboardArg = Partial<ClipboardState> | ClipboardState['change'];
 
 interface GeolocationState {
     snapshot: [GeolocationState];
     geolocation: any;
     id: number;
     callback(): void;
-    onChange(): void;
-    onMount(): void;
-    onClean(): void;
+    change(): void;
+    mount(): void;
+    clean(): void;
 }
+declare type GeolocationArg = Partial<GeolocationState> | GeolocationState['change'];
 
 interface OnlineState {
     snapshot: [OnlineState];
     online: boolean;
     callback(): void;
-    onChange(): void;
-    onMount(): void;
-    onClean(): void;
+    change(): void;
+    mount(): void;
+    clean(): void;
 }
+declare type OnlineArg = Partial<OnlineState> | OnlineState['change'];
 
 declare type Vec3 = [x: number, y: number, z: number];
 
@@ -52,19 +56,21 @@ interface OrientState {
     movement: Vec3;
     memo: any;
     callback(): void;
-    onChange(): void;
-    onMount(): void;
-    onClean(): void;
+    change(): void;
+    mount(): void;
+    clean(): void;
 }
+declare type OrientArg = Partial<OrientState> | OrientState['change'];
 
 interface WindowSizeState {
     snapshot: [WindowSizeState];
     width: number;
     height: number;
     callback(): void;
-    onChange(): void;
-    onMount(): void;
-    onClean(): void;
+    change(): void;
+    mount(): void;
+    clean(): void;
 }
+declare type WindowSizeArg = Partial<WindowSizeState> | WindowSizeState['change'];
 
-export { BatteryState as B, ClipboardState as C, GeolocationState as G, OnlineState as O, WindowSizeState as W, OrientState as a };
+export { BatteryState as B, ClipboardState as C, GeolocationState as G, OnlineState as O, WindowSizeState as W, OrientState as a, BatteryArg as b, ClipboardArg as c, GeolocationArg as d, OnlineArg as e, OrientArg as f, WindowSizeArg as g };

package/package.json

@@ -2,7 +2,7 @@
         "name": "rexr",
         "author": "tseijp",
         "license": "MIT",
-        "version": "0.2.0",
+        "version": "0.4.0",
         "private": false,
         "sideEffect": false,
         "publishConfig": {
@@ -29,11 +29,35 @@
         ],
         "files": [
                 "dist/**/*.{js,ts,mjs,mts,map}",
+                "src/**/*.{js,ts,mjs,mts,map}",
                 "packages.json",
                 "README.md"
         ],
         "exports": {
                 "./packages.json": "./packages.json",
+                "./src": {
+                        "types": "./src/index.ts",
+                        "import": "./src/index.ts",
+                        "default": "./src/index.ts"
+                },
+                "./src/react": {
+                        "types": "./src/react.ts",
+                        "import": "./src/react.ts",
+                        "default": "./src/react.ts"
+                },
+                "./react": {
+                        "types": "./dist/react.d.ts",
+                        "import": {
+                                "types": "./dist/react.d.ts",
+                                "default": "./dist/react.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/react.d.ts",
+                                "default": "./dist/react.mjs"
+                        },
+                        "require": "./dist/react.js",
+                        "default": "./dist/react.js"
+                },
                 ".": {
                         "types": "./dist/index.d.ts",
                         "import": {
@@ -59,35 +83,37 @@
                         },
                         "require": "./dist/index.js",
                         "default": "./dist/index.js"
+                }
+        },
+        "dependencies": {
+                "reev": "0.12.0"
+        },
+        "peerDependencies": {
+                "expo": "*",
+                "expo-gl": "*",
+                "react": ">=16.8",
+                "react-dom": ">=16.8",
+                "solid-js": "*",
+                "vue": "*"
+        },
+        "peerDependenciesMeta": {
+                "expo": {
+                        "optional": true
                 },
-                "./react": {
-                        "types": "./dist/react.d.ts",
-                        "import": {
-                                "types": "./dist/react.d.ts",
-                                "default": "./dist/react.mjs"
-                        },
-                        "module": {
-                                "types": "./dist/react.d.ts",
-                                "default": "./dist/react.mjs"
-                        },
-                        "require": "./dist/react.js",
-                        "default": "./dist/react.js"
+                "expo-gl": {
+                        "optional": true
                 },
-                "./react/*": {
-                        "types": "./dist/react.d.ts",
-                        "import": {
-                                "types": "./dist/react.d.ts",
-                                "default": "./dist/react.mjs"
-                        },
-                        "module": {
-                                "types": "./dist/react.d.ts",
-                                "default": "./dist/react.mjs"
-                        },
-                        "require": "./dist/react.js",
-                        "default": "./dist/react.js"
+                "react": {
+                        "optional": true
+                },
+                "react-dom": {
+                        "optional": true
+                },
+                "solid-js": {
+                        "optional": true
+                },
+                "vue": {
+                        "optional": true
                 }
-        },
-        "devDependencies": {
-                "reev": "*"
         }
 }

package/src/battery/index.ts

@@ -0,0 +1,44 @@
+import { EventState, event } from 'reev/src'
+import { BatteryState } from './types'
+
+export * from './types'
+
+export const batteryEvent = () => {
+        const change = async () => {
+                // @ts-ignore
+                const battery = await navigator.getBattery()
+                self.level = battery.level
+                self.charging = battery.charging
+                self.chargingTime = battery.chargingTime
+                self.dischargingTime = battery.dischargingTime
+                self.snapshot = [self]
+                self.callback()
+        }
+
+        const mount = () => {
+                // @ts-ignore
+                navigator.getBattery().then((target: any) => {
+                        self.target = target
+                        target.addEventListener('levelchange', self.change)
+                        target.addEventListener('chargingchange', self.change)
+                })
+                self.change()
+        }
+
+        const clean = () => {
+                const target = self.target
+                if (!target) return
+                target.removeEventListener('levelchange', self.change)
+                target.removeEventListener('chargingchange', self.change)
+        }
+
+        const self = event({
+                change,
+                mount,
+                clean,
+        }) as EventState<BatteryState>
+
+        self.snapshot = [self]
+
+        return self
+}

package/src/battery/react.ts

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

package/src/battery/types.ts

@@ -0,0 +1,14 @@
+export interface BatteryState {
+        snapshot: [BatteryState]
+        target: any
+        level: number // 0 ~ 1
+        charging: boolean
+        chargingTime: number // 3180
+        dischargingTime: number // Infinity
+        callback(): void
+        change(): void
+        mount(): void
+        clean(): void
+}
+
+export type BatteryArg = Partial<BatteryState> | BatteryState['change']

package/src/clipboard/index.ts

@@ -0,0 +1,37 @@
+import { EventState, event } from 'reev/src'
+import { ClipboardState } from './types'
+
+export * from './types'
+
+export const clipboardEvent = () => {
+        const change = () => {
+                navigator.clipboard.readText().then((clipboard) => {
+                        self.clipboard = clipboard
+                        self.snapshot = [self]
+                        self.callback()
+                })
+        }
+
+        const mount = () => {
+                window.addEventListener('copy', self.change)
+                window.addEventListener('cut', self.change)
+                window.addEventListener('paste', self.change)
+        }
+
+        const clean = () => {
+                window.removeEventListener('copy', self.change)
+                window.removeEventListener('cut', self.change)
+                window.removeEventListener('paste', self.change)
+        }
+
+        const self = event({
+                clipboard: '',
+                change,
+                mount,
+                clean,
+        }) as EventState<ClipboardState>
+
+        self.snapshot = [self]
+
+        return self
+}

package/src/clipboard/react.ts

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

package/src/clipboard/types.ts

@@ -0,0 +1,10 @@
+export interface ClipboardState {
+        snapshot: [ClipboardState]
+        clipboard: string
+        callback(): void
+        change(): void
+        mount(): void
+        clean(): void
+}
+
+export type ClipboardArg = Partial<ClipboardState> | ClipboardState['change']

package/src/geolocation/index.ts

@@ -0,0 +1,33 @@
+import { EventState, event } from 'reev/src'
+import { GeolocationState } from './types'
+
+export * from './types'
+
+export const geolocationEvent = () => {
+        const change = () => {
+                navigator.geolocation.getCurrentPosition((geolocation) => {
+                        self.geolocation = geolocation
+                        self.snapshot = [self]
+                        self.callback()
+                })
+        }
+
+        const mount = () => {
+                self.change()
+                self.id = navigator.geolocation.watchPosition(self.change)
+        }
+
+        const clean = () => {
+                if (typeof self.id !== 'undefined') navigator.geolocation.clearWatch(self.id)
+        }
+
+        const self = event({
+                change,
+                mount,
+                clean,
+        }) as EventState<GeolocationState>
+
+        self.snapshot = [self]
+
+        return self
+}

package/src/geolocation/react.ts

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

package/src/geolocation/types.ts

@@ -0,0 +1,11 @@
+export interface GeolocationState {
+        snapshot: [GeolocationState]
+        geolocation: any
+        id: number
+        callback(): void
+        change(): void
+        mount(): void
+        clean(): void
+}
+
+export type GeolocationArg = Partial<GeolocationState> | GeolocationState['change']

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './battery'
+export * from './clipboard'
+export * from './geolocation'
+export * from './mediaQuery'
+export * from './online'
+export * from './orient'
+export * from './windowSize'

package/src/mediaQuery/index.ts

@@ -0,0 +1,5 @@
+import { event } from 'reev/src'
+
+export * from './types'
+
+export const mediaQueryEvent = () => {}

package/src/mediaQuery/react.ts

@@ -0,0 +1 @@
+export const useMediaQuery = () => {}

package/src/mediaQuery/types.ts

@@ -0,0 +1,9 @@
+export interface MediaQueryState {
+        snapshot: [MediaQueryState]
+        callback(): void
+        change(): void
+        mount(): void
+        clean(): void
+}
+
+export type MediaQueryArg = Partial<MediaQueryState> | MediaQueryState['change']

package/src/online/index.ts

@@ -0,0 +1,31 @@
+import { OnlineState } from './types'
+import { EventState, event } from 'reev/src'
+
+export * from './types'
+
+export const onlineEvent = () => {
+        const change = () => {
+                self.online = navigator.onLine
+                self.snapshot = [self]
+                self.callback()
+        }
+
+        const mount = () => {
+                self.change()
+                window.addEventListener('online', self.change)
+                window.addEventListener('offline', self.change)
+        }
+        const clean = () => {
+                window.removeEventListener('online', self.change)
+                window.removeEventListener('offline', self.change)
+        }
+        const self = event({
+                change,
+                mount,
+                clean,
+        }) as EventState<OnlineState>
+
+        self.snapshot = [self]
+
+        return self
+}

package/src/online/react.ts

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

package/src/online/types.ts

@@ -0,0 +1,10 @@
+export interface OnlineState {
+        snapshot: [OnlineState]
+        online: boolean
+        callback(): void
+        change(): void
+        mount(): void
+        clean(): void
+}
+
+export type OnlineArg = Partial<OnlineState> | OnlineState['change']

package/src/orient/index.ts

@@ -0,0 +1,56 @@
+import { EventState, event } from 'reev/src'
+import { OrientState } from './types'
+import { addVec3, subVec3, vec3 } from './utils'
+
+export * from './types'
+
+export const orientEvent = () => {
+        const initValues = () => {
+                self.active = self._active = false
+                vec3(0, 0, 0, self.value)
+                vec3(0, 0, 0, self._value)
+                vec3(0, 0, 0, self.delta)
+                vec3(0, 0, 0, self.movement)
+        }
+
+        const change = (e: any) => {
+                self._active = self.active
+                self._value = self.value
+                self.value = [90 - (e.alpha ?? 90), e.beta ?? 0, e.gamma ?? 0]
+                if (self._active) {
+                        subVec3(self.value, self._value, self.delta)
+                        addVec3(self.offset, self.delta, self.offset)
+                        addVec3(self.offset, self.delta, self.movement)
+                }
+                self.snapshot = [self]
+                self.callback()
+        }
+
+        const mount = () => {
+                initValues()
+                self.active = true
+                window.addEventListener('deviceorientation', self.change)
+        }
+
+        const clean = () => {
+                initValues()
+                window.removeEventListener('deviceorientation', self.change)
+        }
+
+        const self = event({
+                active: false,
+                _active: false,
+                _value: vec3(),
+                value: vec3(),
+                delta: vec3(),
+                offset: vec3(),
+                movement: vec3(),
+                mount,
+                clean,
+                change,
+        }) as EventState<OrientState>
+
+        self.snapshot = [self]
+
+        return self
+}

package/src/orient/react.ts

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

package/src/orient/types.ts

@@ -0,0 +1,19 @@
+import { Vec3 } from './utils'
+
+export interface OrientState {
+        snapshot: [OrientState]
+        active: boolean
+        _active: boolean
+        _value: Vec3
+        value: Vec3
+        delta: Vec3
+        offset: Vec3
+        movement: Vec3
+        memo: any
+        callback(): void
+        change(): void
+        mount(): void
+        clean(): void
+}
+
+export type OrientArg = Partial<OrientState> | OrientState['change']

package/src/orient/utils.ts

@@ -0,0 +1,36 @@
+/**
+ * CALCULATE VECTOR
+ * REF: https://github.com/toji/gl-matrix/blob/master/src/vec2.js
+ */
+
+const Vec = typeof Float32Array !== 'undefined' ? Float32Array : Array
+
+export const vec3 = (x = 0, y = 0, z = 0, out = new Vec(3)): Vec3 => {
+        out[0] = x
+        out[1] = y
+        out[2] = z
+        return out as Vec3
+}
+
+export type Vec3 = [x: number, y: number, z: number]
+
+export const addVec3 = (a: Vec3, b: Vec3, out = vec3()): Vec3 => {
+        out[0] = a[0] + b[0]
+        out[1] = a[1] + b[1]
+        out[2] = a[2] + b[2]
+        return out
+}
+
+export const subVec3 = (a: Vec3, b: Vec3, out = vec3()): Vec3 => {
+        out[0] = a[0] - b[0]
+        out[1] = a[1] - b[1]
+        out[2] = a[2] - b[2]
+        return out
+}
+
+export const cpVec3 = (a: Vec3, out = vec3()): Vec3 => {
+        out[0] = a[0]
+        out[1] = a[1]
+        out[2] = a[2]
+        return out
+}

package/src/react.ts

@@ -0,0 +1,7 @@
+export * from './battery/react'
+export * from './clipboard/react'
+export * from './geolocation/react'
+export * from './mediaQuery/react'
+export * from './online/react'
+export * from './orient/react'
+export * from './windowSize/react'

package/src/utils.ts

@@ -0,0 +1 @@
+export const isF = (f: unknown): f is Function => typeof f === 'function'