plusui-native-core 0.1.52 → 0.1.53

package/Core/Features/Connection/connection.ts

@@ -0,0 +1,186 @@
+export type ConnectionKind =
+  | "call"
+  | "fire"
+  | "result"
+  | "event"
+  | "stream"
+  | "sub"
+  | "unsub"
+  | "publish"
+  | "error";
+
+export type ConnectionEnvelope = {
+  kind: ConnectionKind;
+  id?: string;
+  name: string;
+  payload?: unknown;
+  error?: string;
+};
+
+type MessageCallback = (payload: any) => void;
+
+class ConnectionClient {
+  private pending = new Map<string, { resolve: (v: any) => void; reject: (e: Error) => void }>();
+  private listeners = new Map<string, Set<MessageCallback>>();
+
+  constructor() {
+    const host = globalThis as any;
+
+    host.__plusuiConnectionMessage = (message: unknown) => {
+      this.handleIncoming(message);
+    };
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("plusui:connection:message", (ev: Event) => {
+        const custom = ev as CustomEvent<unknown>;
+        this.handleIncoming(custom.detail);
+      });
+    }
+  }
+
+  private nextId(): string {
+    return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  }
+
+  private async send(env: ConnectionEnvelope): Promise<any> {
+    const host = globalThis as any;
+
+    if (typeof host.__invoke__ === "function") {
+      return host.__invoke__("connection.dispatch", env);
+    }
+
+    if (host.ipc?.postMessage) {
+      host.ipc.postMessage(JSON.stringify(env));
+      return null;
+    }
+
+    return null;
+  }
+
+  private decode(message: unknown): ConnectionEnvelope | null {
+    if (!message) {
+      return null;
+    }
+    if (typeof message === "string") {
+      try {
+        return JSON.parse(message) as ConnectionEnvelope;
+      } catch {
+        return null;
+      }
+    }
+    if (typeof message === "object") {
+      return message as ConnectionEnvelope;
+    }
+    return null;
+  }
+
+  private handleIncoming(message: unknown): void {
+    const env = this.decode(message);
+    if (!env) {
+      return;
+    }
+
+    if ((env.kind === "result" || env.kind === "error") && env.id) {
+      const entry = this.pending.get(env.id);
+      if (!entry) {
+        return;
+      }
+      this.pending.delete(env.id);
+      if (env.kind === "error") {
+        entry.reject(new Error(env.error || "Connection call failed"));
+      } else {
+        entry.resolve(env.payload);
+      }
+      return;
+    }
+
+    if (env.kind === "event" || env.kind === "stream" || env.kind === "publish") {
+      const handlers = this.listeners.get(env.name);
+      if (!handlers) {
+        return;
+      }
+      for (const handler of handlers) {
+        handler(env.payload);
+      }
+    }
+  }
+
+  async call<TOut = unknown, TIn = Record<string, unknown>>(name: string, payload: TIn): Promise<TOut> {
+    const id = this.nextId();
+    const promise = new Promise<TOut>((resolve, reject) => {
+      this.pending.set(id, { resolve, reject });
+    });
+
+    await this.send({ kind: "call", id, name, payload });
+    return promise;
+  }
+
+  fire<TIn = Record<string, unknown>>(name: string, payload: TIn): void {
+    void this.send({ kind: "fire", name, payload });
+  }
+
+  on<TData = unknown>(name: string, callback: (payload: TData) => void): () => void {
+    const existing = this.listeners.get(name) ?? new Set<MessageCallback>();
+    existing.add(callback as MessageCallback);
+    this.listeners.set(name, existing);
+
+    return () => {
+      const current = this.listeners.get(name);
+      if (!current) {
+        return;
+      }
+      current.delete(callback as MessageCallback);
+      if (current.size === 0) {
+        this.listeners.delete(name);
+      }
+    };
+  }
+
+  stream<TData = unknown>(name: string) {
+    return {
+      subscribe: (callback: (payload: TData) => void): (() => void) => {
+        void this.send({ kind: "sub", name });
+        const off = this.on<TData>(name, callback);
+        return () => {
+          off();
+          void this.send({ kind: "unsub", name });
+        };
+      },
+    };
+  }
+
+  channel<TData = unknown>(name: string) {
+    return {
+      subscribe: (callback: (payload: TData) => void): (() => void) => {
+        void this.send({ kind: "sub", name });
+        const off = this.on<TData>(name, callback);
+        return () => {
+          off();
+          void this.send({ kind: "unsub", name });
+        };
+      },
+      publish: (payload: TData): void => {
+        void this.send({ kind: "publish", name, payload });
+      },
+    };
+  }
+}
+
+// Create the connection client instance
+const connectionClient = new ConnectionClient();
+
+// Simple connection API - just emit() and on()
+export const connect = {
+  // Send a message to backend
+  emit: <TIn = Record<string, unknown>>(name: string, payload: TIn): void => {
+    connectionClient.fire(name, payload);
+  },
+
+  // Listen for messages from backend
+  on: <TData = unknown>(name: string, callback: (payload: TData) => void): (() => void) => {
+    return connectionClient.on<TData>(name, callback);
+  },
+};
+
+// Export the raw client for advanced use cases (call, fire, stream, channel)
+export const connection = connectionClient;

package/Core/Features/Connection/examples/simple_tags_example.hpp

@@ -0,0 +1,130 @@
+/**
+ * Example: Simple Tag-Based Connection (C++ Backend)
+ * 
+ * No schema file needed! Just tag your methods and bindgen does the rest.
+ */
+
+#pragma once
+#include <plusui/connection.hpp>
+#include <string>
+
+namespace example {
+
+class SimpleApp : public plusui::Connection {
+public:
+  
+  // ============================================
+  // CONNECT_CALL: Request/Response
+  // Frontend can await the result
+  // ============================================
+  
+  // Simple call with one parameter
+  CONNECT_CALL(greet, std::string, std::string name)
+  std::string greet(const std::string& name) {
+    return "Hello, " + name + "!";
+  }
+  
+  // Call with multiple parameters → returns object
+  CONNECT_CALL(calculate, double, double a, double b)
+  double calculate(double a, double b) {
+    return a + b;
+  }
+  
+  // Call with complex return (auto-generates struct)
+  CONNECT_CALL(getUser, {int id, std::string name, std::string email}, int userId)
+  auto getUser(int userId) {
+    struct Result { int id; std::string name; std::string email; };
+    return Result{ userId, "John Doe", "john@example.com" };
+  }
+
+  // ============================================
+  // CONNECT_FIRE: One-way to Backend
+  // No response expected
+  // ============================================
+  
+  CONNECT_FIRE(minimize, void)
+  void minimize() {
+    // Minimize window
+    std::cout << "Minimizing..." << std::endl;
+  }
+  
+  CONNECT_FIRE(log, void, std::string level, std::string message)
+  void log(const std::string& level, const std::string& message) {
+    std::cout << "[" << level << "] " << message << std::endl;
+  }
+
+  // ============================================
+  // CONNECT_EVENT: Backend → Frontend
+  // Backend emits, frontend listens
+  // ============================================
+  
+  CONNECT_EVENT(onResize, int width, int height)
+  void emitResize(int width, int height) {
+    // Auto-generated emit method
+    emit_onResize(width, height);
+  }
+  
+  CONNECT_EVENT(onFileDrop, std::vector<std::string> files)
+  void emitFileDrop(const std::vector<std::string>& files) {
+    emit_onFileDrop(files);
+  }
+
+  // ============================================
+  // CONNECT_STREAM: Continuous Data
+  // Backend streams, frontend subscribes
+  // ============================================
+  
+  CONNECT_STREAM(cpuUsage, double percent)
+  void startMonitoring() {
+    // Stream CPU usage continuously
+    std::thread([this]() {
+      while (running) {
+        double cpu = getCpuUsage();
+        emit_cpuUsage(cpu);
+        std::this_thread::sleep_for(std::chrono::seconds(1));
+      }
+    }).detach();
+  }
+
+  // ============================================
+  // CONNECT_CHANNEL: Bidirectional
+  // Both sides can send and receive
+  // ============================================
+  
+  CONNECT_CHANNEL(logBus, std::string level, std::string line)
+  
+  // Receive from frontend
+  void onLogFromFrontend(const std::string& level, const std::string& line) {
+    std::cout << "[Frontend] " << level << ": " << line << std::endl;
+  }
+  
+  // Send to frontend
+  void sendLogToFrontend(const std::string& level, const std::string& line) {
+    emit_logBus(level, line);
+  }
+
+private:
+  bool running = true;
+  
+  double getCpuUsage() {
+    return 50.0 + (rand() % 30);
+  }
+};
+
+} // namespace example
+
+/**
+ * This example shows how simple it is:
+ * 
+ * 1. Tag your methods with CONNECT_* macros
+ * 2. Run: npm run bindgen
+ * 3. Use in TypeScript:
+ * 
+ *    const result = await connect.greet({ name: 'World' });
+ *    connect.minimize();
+ *    connect.onResize((w, h) => updateUI(w, h));
+ *    connect.cpuUsage.subscribe((cpu) => showCpu(cpu));
+ *    connect.logBus.publish({ level: 'info', line: 'msg' });
+ * 
+ * That's it! No separate schema file, no manual typing.
+ */

package/Core/Features/Connection/examples/simple_tags_example.ts

@@ -0,0 +1,247 @@
+/**
+ * Example: Simple Tag-Based Connection (TypeScript Frontend)
+ * 
+ * After running bindgen, use the auto-generated connect API
+ */
+
+import { connect } from '../generated/bindings';
+
+/**
+ * All these methods are auto-generated from C++ CONNECT_* tags!
+ */
+
+// ============================================
+// CALL - Request/Response
+// ============================================
+
+async function callExamples() {
+  // Simple call
+  const greeting = await connect.greet({ name: 'PlusUI' });
+  console.log(greeting); // "Hello, PlusUI!"
+  
+  // Call with multiple params
+  const sum = await connect.calculate({ a: 10, b: 20 });
+  console.log(sum); // 30
+  
+  // Complex return type
+  const user = await connect.getUser({ userId: 123 });
+  console.log(user.name, user.email);
+}
+
+// ============================================
+// FIRE - One-way to Backend
+// ============================================
+
+function fireExamples() {
+  // Fire with no params
+  connect.minimize();
+  
+  // Fire with params
+  connect.log({ 
+    level: 'info', 
+    message: 'User clicked button' 
+  });
+  
+  // Fire and forget - doesn't wait
+  connect.log({ level: 'debug', message: 'Debug info' });
+  doSomethingElse(); // Runs immediately
+}
+
+// ============================================
+// EVENT - Listen to Backend
+// ============================================
+
+function eventExamples() {
+  // Listen for resize events
+  const unsubResize = connect.onResize((data) => {
+    console.log(`Window: ${data.width}x${data.height}`);
+    updateLayout(data.width, data.height);
+  });
+  
+  // Listen for file drops
+  connect.onFileDrop((data) => {
+    console.log('Files dropped:', data.files);
+    data.files.forEach(file => processFile(file));
+  });
+  
+  // Clean up when done
+  // unsubResize();
+}
+
+// ============================================
+// STREAM - Subscribe to Continuous Data
+// ============================================
+
+function streamExamples() {
+  // Subscribe to CPU usage stream
+  const unsub = connect.cpuUsage.subscribe((data) => {
+    updateCpuChart(data.percent);
+    
+    if (data.percent > 90) {
+      showWarning('High CPU!');
+    }
+  });
+  
+  // Unsubscribe when component unmounts
+  return unsub;
+}
+
+// ============================================
+// CHANNEL - Bidirectional Communication
+// ============================================
+
+function channelExamples() {
+  // Subscribe to receive from backend
+  connect.logBus.subscribe((msg) => {
+    const color = msg.level === 'error' ? 'red' : 'gray';
+    console.log(`%c[${msg.level}] ${msg.line}`, `color: ${color}`);
+    addToLogView(msg);
+  });
+  
+  // Publish to backend
+  connect.logBus.publish({ 
+    level: 'info', 
+    line: 'Frontend initialized' 
+  });
+  
+  // Both sides can communicate freely
+  document.onclick = () => {
+    connect.logBus.publish({ 
+      level: 'debug', 
+      line: 'User clicked somewhere' 
+    });
+  };
+}
+
+// ============================================
+// React Component Example
+// ============================================
+
+function ReactExample() {
+  const [greeting, setGreeting] = React.useState('');
+  const [cpu, setCpu] = React.useState(0);
+
+  React.useEffect(() => {
+    // Call on mount
+    connect.greet({ name: 'React' })
+      .then(result => setGreeting(result));
+
+    // Subscribe to events
+    const unsubResize = connect.onResize((data) => {
+      console.log('Resize:', data);
+    });
+
+    // Subscribe to stream
+    const unsubCpu = connect.cpuUsage.subscribe((data) => {
+      setCpu(data.percent);
+    });
+
+    // Subscribe to channel
+    const unsubLog = connect.logBus.subscribe((msg) => {
+      console.log(msg);
+    });
+
+    // Cleanup all subscriptions
+    return () => {
+      unsubResize();
+      unsubCpu();
+      unsubLog();
+    };
+  }, []);
+
+  const handleMinimize = () => {
+    connect.minimize();
+  };
+
+  const handleLog = () => {
+    connect.log({ 
+      level: 'info', 
+      message: 'Button clicked!' 
+    });
+  };
+
+  return (
+    <div>
+      <h1>{greeting}</h1>
+      <div>CPU: {cpu.toFixed(1)}%</div>
+      <button onClick={handleMinimize}>Minimize</button>
+      <button onClick={handleLog}>Log Message</button>
+    </div>
+  );
+}
+
+// ============================================
+// Vue Composition API Example
+// ============================================
+
+function vueExample() {
+  const greeting = ref('');
+  const cpu = ref(0);
+
+  onMounted(async () => {
+    // Call backend
+    const result = await connect.greet({ name: 'Vue' });
+    greeting.value = result;
+
+    // Subscribe to stream
+    const unsub = connect.cpuUsage.subscribe((data) => {
+      cpu.value = data.percent;
+    });
+
+    onUnmounted(() => {
+      unsub();
+    });
+  });
+
+  return {
+    greeting,
+    cpu,
+    minimize: () => connect.minimize(),
+    log: (msg: string) => connect.log({ level: 'info', message: msg }),
+  };
+}
+
+// ============================================
+// Helper Functions
+// ============================================
+
+function updateLayout(width: number, height: number) {
+  // Update UI layout
+}
+
+function processFile(file: string) {
+  // Process dropped file
+}
+
+function updateCpuChart(percent: number) {
+  // Update chart
+}
+
+function showWarning(msg: string) {
+  // Show warning toast
+}
+
+function addToLogView(msg: any) {
+  // Add to log view
+}
+
+function doSomethingElse() {
+  // Continue execution
+}
+
+/**
+ * THAT'S IT!
+ * 
+ * No schema file needed.
+ * No manual type definitions.
+ * Just tag your C++ methods and use them in TypeScript.
+ * 
+ * Bindgen automatically:
+ * - Finds all CONNECT_* tags
+ * - Generates TypeScript types
+ * - Creates the connect.* API
+ * - Handles all serialization
+ * - Manages subscriptions
+ * 
+ * Perfect developer experience! 🚀
+ */