space-react-client 0.2.4 → 0.3.0

package/dist/index.js

@@ -22,12 +22,13 @@ function isTokenExpired(tokenPayload) {
 class TokenService {
     constructor() {
         this.tokenPayload = null;
+        this.listeners = new Set();
     }
     /**
      * Retrieves the stored pricing token's payload.
      * @returns The stored pricing token payload.
      */
-    getPricingToken() {
+    getPayload() {
         if (!this._validToken()) {
             return null;
         }
@@ -38,7 +39,7 @@ class TokenService {
      * @param key - A key of the stored pricing token whose is going to be retrieved.
      * @return The value of the key in the stored pricing token payload.
      */
-    getFromToken(key) {
+    getKey(key) {
         if (!this._validToken()) {
             return null;
         }
@@ -48,9 +49,10 @@ class TokenService {
      * Updates the stored pricing token with the payload of a new one.
      * @param token - Pricing token string
      */
-    updatePricingToken(token) {
+    update(token) {
         const parsedToken = parseJwt(token);
         this.tokenPayload = parsedToken;
+        this._notify();
     }
     evaluateFeature(featureId) {
         if (!this._validToken()) {
@@ -76,6 +78,26 @@ class TokenService {
         }
         return true;
     }
+    /**
+     * Subscribe to pricing token updates. Returns an unsubscribe function.
+     */
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    /** Notify all listeners that the token has changed. */
+    _notify() {
+        this.listeners.forEach((l) => {
+            try {
+                l();
+            }
+            catch (e) {
+                console.error(e);
+            }
+        });
+    }
 }
 
 /**
@@ -96,7 +118,7 @@ class SpaceClient {
         this.pricingSocketNamespace = this.socketClient.io.socket('/pricings');
         this.apiKey = config.apiKey;
         this.emitter = new TinyEmitter();
-        this.tokenService = new TokenService();
+        this.token = new TokenService();
         this.axios = axios.create({
             baseURL: this.httpUrl,
             headers: {
@@ -189,7 +211,7 @@ class SpaceClient {
         }
         this.userId = userId;
         const userPricingToken = await this.generateUserPricingToken();
-        this.tokenService.updatePricingToken(userPricingToken);
+        this.token.update(userPricingToken);
     }
     /**
      * Performs a request to SPACE to retrieve a new pricing token for the user with the given userId.
@@ -228,13 +250,13 @@ const SpaceProvider = ({ config, children, }) => {
             tokenService = new TokenService();
         }
         else {
-            tokenService = client.tokenService;
+            tokenService = client.token;
         }
         return {
             client: client,
             tokenService: tokenService,
         };
-    }, [config.url, config.apiKey]);
+    }, [config.url, config.apiKey, config.allowConnectionWithSpace]);
     useEffect(() => {
         return () => {
             if (context.client && typeof context.client.disconnectWebSocket === 'function') {
@@ -267,14 +289,33 @@ function useSpaceClient() {
  * Custom hook to access the service that manages the pricing token.
  * Throws an error if used outside of SpaceProvider.
  */
-function usePricingToken() {
+function useTokenService() {
     const spaceContext = useContext(SpaceContext);
     if (!spaceContext) {
-        throw new Error('usePricingToken must be used within a SpaceProvider');
+        throw new Error('useTokenService must be used within a SpaceProvider');
     }
     return spaceContext.tokenService;
 }
 
+/**
+ * React hook that returns the current pricing token payload and
+ * re-renders when the token changes.
+ */
+function usePricingTokenPayload() {
+    const tokenService = useTokenService();
+    const [payload, setPayload] = useState(() => tokenService.getPayload());
+    useEffect(() => {
+        // Ensure latest value on mount
+        setPayload(tokenService.getPayload());
+        // Subscribe to token updates
+        const unsubscribe = tokenService.subscribe(() => {
+            setPayload(tokenService.getPayload());
+        });
+        return () => unsubscribe();
+    }, [tokenService]);
+    return payload;
+}
+
 // Generic wrapper for feature children
 function On({ children }) {
     return jsx(Fragment, { children: children });
@@ -294,31 +335,43 @@ function getChildrenOfType(children, type) {
     return match ? match.props.children : null;
 }
 const Feature = ({ id, children }) => {
-    const tokenService = usePricingToken();
+    const tokenService = useTokenService();
+    const tokenPayload = usePricingTokenPayload();
     const [status, setStatus] = useState('loading');
     const [result, setResult] = useState(null);
     // Validate id
     const isValidId = useMemo(() => id.includes('-'), [id]);
     useEffect(() => {
-        if (!isValidId) {
-            setStatus('error');
-            return;
-        }
-        if (tokenService.getPricingToken() === null) {
-            setStatus('error');
-            return;
-        }
-        setStatus('loading');
-        setResult(null);
-        const evaluationResult = tokenService.evaluateFeature(id);
-        if (evaluationResult === null || evaluationResult === undefined) {
-            setStatus('error');
-        }
-        else {
-            setResult(evaluationResult);
-            setStatus('success');
-        }
-    }, [id, isValidId, tokenService.tokenPayload]);
+        const evaluate = () => {
+            if (!isValidId) {
+                setStatus('error');
+                return;
+            }
+            if (tokenService.getPayload() === null) {
+                setStatus('error');
+                return;
+            }
+            setStatus('loading');
+            setResult(null);
+            const evaluationResult = tokenService.evaluateFeature(id);
+            if (evaluationResult === null || evaluationResult === undefined) {
+                setStatus('error');
+            }
+            else {
+                setResult(evaluationResult);
+                setStatus('success');
+            }
+        };
+        // Initial evaluation
+        evaluate();
+        // Subscribe to token changes to re-evaluate
+        const unsubscribe = tokenService.subscribe(() => {
+            evaluate();
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [id, isValidId, tokenPayload, tokenService]);
     if (status === 'loading') {
         return jsx(Fragment, { children: getChildrenOfType(children, Loading) });
     }
@@ -334,4 +387,4 @@ const Feature = ({ id, children }) => {
     return jsx(Fragment, {});
 };
 
-export { Default, ErrorFallback, Feature, Loading, On, SpaceProvider, usePricingToken, useSpaceClient };
+export { Default, ErrorFallback, Feature, Loading, On, SpaceProvider, usePricingTokenPayload, useSpaceClient, useTokenService };

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "space-react-client",
   "type": "module",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     }