added testing and finished ObservableProvider

react-providerx/package.json

@@ -1,16 +1,20 @@
 {
   "name": "react-providerx",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "0.0.1",
+  "description": "A state management library built for React, using RxJS and Observables",
+  "main": "lib/index.js",
+  "types": "lib",
+  "homepage": "https://github.com/DudeBro249/providerx",
   "scripts": {
-    "build": "tsc -p ."
+    "build": "npx tsc -p ."
   },
   "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "author": "DudeBro249",
+  "license": "Apache-2.0",
   "dependencies": {
-    "rxjs": "^6.6.6",
-    "rxjs-hooks": "^0.6.2"
+    "rxjs": "^6.6.6"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.3"
   }
 }

react-providerx/src/hooks/useProvider.ts

@@ -1,20 +1,27 @@
-import { useObservable } from "rxjs-hooks"
-import { ObservableProvider } from "../providers/observableProvider"
+import { ObservableProvider } from '../providers/observableProvider'
+import { useState, useEffect } from 'react'
+
+type UseProviderValues<T> = {
+    isLoading: boolean
+    data: T
+}
 
 export const useProvider = <T>(provider: ObservableProvider<T>) => {
-    try {
-        const value = useObservable(() => provider.behaviorSubject$.asObservable())
-        return {
-            isLoading: value === null,
-            data: value,
-            error: null
+    const [currentValue, setCurrentValue]  = useState<T | null>(null)
+
+    useEffect(() => {
+        const handleSubscriptionValue = (value: any) => {
+            setCurrentValue(value)
         }
-    }
-    catch (error) {
-        return {
-            isLoading: false,
-            data: null,
-            error: error,
+        const subscription = (provider.behaviorSubject$.asObservable() as any).subscribe(handleSubscriptionValue)
+        return () => {
+            subscription.unsubscribe()
         }
-    }
+    }, [provider.behaviorSubject$])
+
+    return {
+        isLoading: currentValue === null || currentValue === undefined,
+        data: currentValue,
+        error: null
+    } as UseProviderValues<T>
 }

react-providerx/src/providers/observableProvider.ts

@@ -1,18 +1,28 @@
-import { BehaviorSubject, Observable } from 'rxjs'
+import { BehaviorSubject, from, Observable } from 'rxjs'
 
 export class ObservableProvider<T> {
     behaviorSubject$: BehaviorSubject<T> | BehaviorSubject<null>
-    observable$: Observable<T>
-    constructor(observableCreator: () => Observable<T>) {
-        this.observable$ = observableCreator()
+    observableCreator: () => (Observable<T> | null)
+    observable$?: (Observable<T> | null)
+    constructor(observableCreator: () => (Observable<T> | null)) {
+        this.observableCreator = observableCreator
         this.behaviorSubject$ = new BehaviorSubject(null)
-        if(this.observable$ === null) {
-            throw 'observableCreator cannot return null. It must return an instance of Observable'
-        }
         this._compute()
     }
 
+    get value() {
+        return this.behaviorSubject$.value
+    }
+
+    static fromPromise<S>(promise: () => Promise<S>): ObservableProvider<S> {
+        return new ObservableProvider<S>(() => (from(promise()) as any))
+    }
+
     _compute = () => {
+        this.observable$ = this.observableCreator()
+        if(this.observable$ === null) {
+            throw 'observableCreator cannot return null. It must return an instance of Observable'
+        }
         this.observable$.subscribe((val: T) => {
             this.behaviorSubject$.next(val as any)
         })