@ramme-io/create-app 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "type": "module",
   "bin": {
     "create-ramme-app": "./index.js"

package/template/pkg.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@ramme-io/ui": "^1.1.1",
+    "mqtt": "^5.3.5",
     "ag-grid-community": "^31.3.1",
     "ag-grid-enterprise": "^31.3.1",  
     "ag-grid-react": "^31.3.1",       

package/template/src/contexts/MqttContext.tsx

@@ -0,0 +1,85 @@
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import mqtt, { MqttClient } from 'mqtt';
+
+interface MqttContextType {
+  isConnected: boolean;
+  lastMessage: Record<string, string>;
+  publish: (topic: string, message: string) => void;
+  subscribe: (topic: string) => void;
+  unsubscribe: (topic: string) => void;
+}
+
+const MqttContext = createContext<MqttContextType | null>(null);
+
+// Public Test Broker for "Out of the Box" functionality
+// In a real app, this comes from config.ts
+const DEFAULT_BROKER = 'wss://test.mosquitto.org:8081'; 
+
+export const MqttProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isConnected, setIsConnected] = useState(false);
+  const [lastMessage, setLastMessage] = useState<Record<string, string>>({});
+  const clientRef = useRef<MqttClient | null>(null);
+  
+  // Track active subscriptions to avoid double-subscribing
+  const subscriptions = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    console.log(`[MQTT] Connecting to ${DEFAULT_BROKER}...`);
+    
+    const client = mqtt.connect(DEFAULT_BROKER);
+    clientRef.current = client;
+
+    client.on('connect', () => {
+      console.log('[MQTT] Connected ✅');
+      setIsConnected(true);
+    });
+
+    client.on('message', (topic: any, message: { toString: () => any; }) => {
+      const payload = message.toString();
+      setLastMessage((prev) => ({ ...prev, [topic]: payload }));
+    });
+
+    client.on('error', (err: any) => {
+      console.error('[MQTT] Connection error: ', err);
+      client.end();
+    });
+
+    return () => {
+      console.log('[MQTT] Disconnecting...');
+      client.end();
+    };
+  }, []);
+
+  const subscribe = (topic: string) => {
+    if (clientRef.current && !subscriptions.current.has(topic)) {
+      console.log(`[MQTT] Subscribing to: ${topic}`);
+      clientRef.current.subscribe(topic);
+      subscriptions.current.add(topic);
+    }
+  };
+
+  const unsubscribe = (topic: string) => {
+    if (clientRef.current && subscriptions.current.has(topic)) {
+      clientRef.current.unsubscribe(topic);
+      subscriptions.current.delete(topic);
+    }
+  };
+
+  const publish = (topic: string, message: string) => {
+    if (clientRef.current) {
+      clientRef.current.publish(topic, message);
+    }
+  };
+
+  return (
+    <MqttContext.Provider value={{ isConnected, lastMessage, subscribe, unsubscribe, publish }}>
+      {children}
+    </MqttContext.Provider>
+  );
+};
+
+export const useMqtt = () => {
+  const context = useContext(MqttContext);
+  if (!context) throw new Error('useMqtt must be used within an MqttProvider');
+  return context;
+};

package/template/src/main.tsx

@@ -3,7 +3,8 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App.tsx';
 import { ThemeProvider, ToastProvider } from '@ramme-io/ui';
-import { AuthProvider } from './contexts/AuthContext'; // <-- 1. Import the AuthProvider
+import { AuthProvider } from './contexts/AuthContext'; 
+import { MqttProvider } from './contexts/MqttContext';
 import '@ramme-io/ui/style.css';
 import './index.css';
 
@@ -15,9 +16,10 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <BrowserRouter>
       <ThemeProvider>
         <ToastProvider>
-          {/* 2. Wrap the entire App component with the AuthProvider */}
           <AuthProvider>
-            <App />
+            <MqttProvider>
+              <App />
+            </MqttProvider>
           </AuthProvider>
         </ToastProvider>
       </ThemeProvider>