space-react-client 0.1.0 → 0.2.1

package/dist/index.d.ts

@@ -40,10 +40,11 @@ declare class SpaceClient$1 {
     readonly tokenService: TokenService$1;
     private userId;
     constructor(config: SpaceConfiguration);
+    disconnectWebSocket(): void;
     /**
      * Connects to the SPACE WebSocket and handles incoming events.
      */
-    private connectWebSocket;
+    connectWebSocket(): void;
     /**
      * Listen to SPACE and connection events.
      * @param event The event key to listen for.
@@ -108,9 +109,8 @@ interface SpaceClientContext{
 /**
  * SpaceProvider initializes and provides the SpaceClient instance to children.
  */
-declare const SpaceProvider: ({ config, loader, children, }: {
+declare const SpaceProvider: ({ config, children, }: {
     config: SpaceConfiguration;
-    loader?: React.ReactNode;
     children: React.ReactNode;
 }) => JSX.Element;
 
@@ -130,7 +130,19 @@ interface FeatureProps {
     id: string;
     children: React.ReactNode;
 }
+declare function On({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+declare function Default({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+declare function Loading({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+declare function ErrorFallback({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
 declare const Feature: ({ id, children }: FeatureProps) => JSX.Element;
 
-export { Feature, SpaceClient$1 as SpaceClient, SpaceProvider, TokenService$1 as TokenService, usePricingToken, useSpaceClient };
+export { Default, ErrorFallback, Feature, Loading, On, SpaceClient$1 as SpaceClient, SpaceProvider, TokenService$1 as TokenService, usePricingToken, useSpaceClient };
 export type { EventMessage, SpaceClientContext, SpaceConfiguration, SpaceEvents };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useMemo, useContext, useState, useEffect } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useMemo, useEffect, useContext, useState } from 'react';
 import { TinyEmitter } from 'tiny-emitter';
 import axios from 'axios';
 import { io } from 'socket.io-client';
@@ -105,6 +105,12 @@ class SpaceClient {
         });
         this.connectWebSocket();
     }
+    disconnectWebSocket() {
+        if (this.pricingSocketNamespace.connected) {
+            this.pricingSocketNamespace.disconnect();
+            this.emitter.off(); // Remove all listeners
+        }
+    }
     /**
      * Connects to the SPACE WebSocket and handles incoming events.
      */
@@ -113,11 +119,11 @@ class SpaceClient {
             console.log('Connected to SPACE');
             this.emitter.emit('synchronized', 'WebSocket connection established');
         });
-        this.pricingSocketNamespace.on('message', data => {
+        this.pricingSocketNamespace.on('message', (data) => {
             const event = data.code.toLowerCase();
             this.emitter.emit(event, data.details);
         });
-        this.pricingSocketNamespace.on('connect_error', error => {
+        this.pricingSocketNamespace.on('connect_error', (error) => {
             this.emitter.emit('error', error);
         });
     }
@@ -165,7 +171,8 @@ class SpaceClient {
             throw new Error('User ID must be a non-empty string.');
         }
         this.userId = userId;
-        this.tokenService.updatePricingToken(await this.generateUserPricingToken());
+        const userPricingToken = await this.generateUserPricingToken();
+        this.tokenService.updatePricingToken(userPricingToken);
     }
     /**
      * Performs a request to SPACE to retrieve a new pricing token for the user with the given userId.
@@ -178,7 +185,7 @@ class SpaceClient {
             throw new Error('User ID is not set. Please set the user ID with `setUserId(userId)` before trying to generate a pricing token.');
         }
         return this.axios
-            .post(`/features/${this.userId}`)
+            .post(`/features/${this.userId}/pricing-token`)
             .then((response) => {
             return response.data.pricingToken;
         })
@@ -194,10 +201,11 @@ const SpaceContext = createContext(undefined);
 /**
  * SpaceProvider initializes and provides the SpaceClient instance to children.
  */
-const SpaceProvider = ({ config, loader, children, }) => {
+const SpaceProvider = ({ config, children, }) => {
     // Memorize the client to avoid unnecessary re-instantiation
     const context = useMemo(() => {
-        const client = config.allowConnectionWithSpace ? new SpaceClient(config) : undefined;
+        const denyConnectionWithSpace = config.allowConnectionWithSpace === false;
+        const client = denyConnectionWithSpace ? undefined : new SpaceClient(config);
         let tokenService;
         if (!client) {
             tokenService = new TokenService();
@@ -210,29 +218,13 @@ const SpaceProvider = ({ config, loader, children, }) => {
             tokenService: tokenService,
         };
     }, [config.url, config.apiKey]);
-    const [connected, setConnected] = React.useState(false);
-    React.useEffect(() => {
-        if (!context.client) {
-            setConnected(true); // No connection needed if client is undefined
-            return;
-        }
-        const handleSync = () => setConnected(true);
-        context.client.on('synchronized', handleSync);
+    useEffect(() => {
+        return () => {
+            if (context.client && typeof context.client.disconnectWebSocket === 'function') {
+                context.client.disconnectWebSocket();
+            }
+        };
     }, [context.client]);
-    if (!connected)
-        return (jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', width: '100%' }, children: [loader ?? (jsx("div", { style: {
-                        border: '4px solid #e0e0e0',
-                        borderTop: '4px solid #1976d2',
-                        borderRadius: '50%',
-                        width: 48,
-                        height: 48,
-                        animation: 'spin 1s linear infinite',
-                    } })), jsx("style", { children: `
-        @keyframes spin {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
-      ` })] }));
     return jsx(SpaceContext.Provider, { value: context, children: children });
 };
 
@@ -266,10 +258,23 @@ function usePricingToken() {
     return spaceContext.tokenService;
 }
 
-// Helper to get a child by type name
-function getChildByType(children, typeName) {
-    const arr = React.Children.toArray(children);
-    return arr.find(child => child.type && child.type.name === typeName) || null;
+// Generic wrapper for feature children
+function On({ children }) {
+    return jsx(Fragment, { children: children });
+}
+function Default({ children }) {
+    return jsx(Fragment, { children: children });
+}
+function Loading({ children }) {
+    return jsx(Fragment, { children: children });
+}
+function ErrorFallback({ children }) {
+    return jsx(Fragment, { children: children });
+}
+// Helper to get the children of a specific subcomponent type
+function getChildrenOfType(children, type) {
+    const match = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.type === type);
+    return match ? match.props.children : null;
 }
 const Feature = ({ id, children }) => {
     const tokenService = usePricingToken();
@@ -279,12 +284,10 @@ const Feature = ({ id, children }) => {
     const isValidId = useMemo(() => id.includes('-'), [id]);
     useEffect(() => {
         if (!isValidId) {
-            console.error(`Invalid feature ID: ‘${id}’. A valid feature ID must contain a hyphen (’-’) and follow the format: ‘{serviceName in lowercase}-{featureName as defined in the pricing}’.`);
             setStatus('error');
             return;
         }
         if (tokenService.getPricingToken() === null) {
-            console.error(`Pricing token is either not set or expired. Please ensure the token is initialized and not expired before using the Feature component.`);
             setStatus('error');
             return;
         }
@@ -300,18 +303,18 @@ const Feature = ({ id, children }) => {
         }
     }, [id, isValidId]);
     if (status === 'loading') {
-        return getChildByType(children, 'Loading') || jsx(Fragment, {});
+        return jsx(Fragment, { children: getChildrenOfType(children, Loading) });
     }
     if (status === 'error') {
-        return getChildByType(children, 'ErrorFallback') || jsx(Fragment, {});
+        return jsx(Fragment, { children: getChildrenOfType(children, ErrorFallback) });
     }
     if (status === 'success' && result === true) {
-        return getChildByType(children, 'On') || jsx(Fragment, {});
+        return jsx(Fragment, { children: getChildrenOfType(children, On) });
     }
     if (status === 'success' && result === false) {
-        return getChildByType(children, 'Default') || jsx(Fragment, {});
+        return jsx(Fragment, { children: getChildrenOfType(children, Default) });
     }
     return jsx(Fragment, {});
 };
 
-export { Feature, SpaceProvider, usePricingToken, useSpaceClient };
+export { Default, ErrorFallback, Feature, Loading, On, SpaceProvider, usePricingToken, useSpaceClient };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "space-react-client",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,13 +28,14 @@
   "license": "ISC",
   "packageManager": "pnpm@10.10.0",
   "peerDependencies": {
-    "react": "^19.1.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-typescript": "^12.1.2",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.6",
+    "@types/react": "^18.3.1",
     "@vitejs/plugin-react": "^4.5.0",
     "eslint": "^9.28.0",
     "eslint-config-prettier": "^10.1.5",