create-bluecopa-react-app 1.0.11 → 1.0.12

package/templates/latest/app/routes/websocket.tsx

@@ -0,0 +1,449 @@
+import { useState, useEffect, useRef } from "react";
+import { AppSidebar } from "~/components/app-sidebar";
+import { SiteHeader } from "~/components/site-header";
+import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Separator } from "~/components/ui/separator";
+import { Badge } from "~/components/ui/badge";
+import { copaUtils, copaSetConfig, copaGetConfig } from "@bluecopa/react";
+
+interface WebSocketEvent {
+  id: string;
+  timestamp: Date;
+  channel: string;
+  event: string;
+  data: any;
+}
+
+export default function WebsocketTestPage() {
+  const [isConnected, setIsConnected] = useState(false);
+  const [connectionUrl, setConnectionUrl] = useState("");
+  const [channel, setChannel] = useState("test-channel");
+  const [eventName, setEventName] = useState("message");
+  const [events, setEvents] = useState<WebSocketEvent[]>([]);
+  const [subscriptions, setSubscriptions] = useState<Set<string>>(new Set());
+  const wsProviderRef = useRef<any | null>(null);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (wsProviderRef && wsProviderRef.current) {
+        wsProviderRef.current.disconnect();
+      }
+    };
+  }, []);
+
+  const handleConnect = () => {
+    try {
+      // Get current config to use access token and userId
+      const config = copaGetConfig();
+      console.log("config", config);
+      
+      if (!config.accessToken || !config.userId) {
+        addEvent("system", "error", {
+          error: "Missing configuration. Ensure accessToken and userId are set via copaSetConfig()"
+        });
+        return;
+      }
+
+      // Create websocket provider using the factory
+      wsProviderRef.current = copaUtils.websocketUtils.WebsocketContextFactory.create(
+        "centrifugo",
+        {
+          connectionUrl: connectionUrl || undefined
+        }
+      );
+
+      setIsConnected(true);
+      addEvent("system", "connected", { url: connectionUrl || "default" });
+    } catch (error) {
+      console.error("Failed to connect:", error);
+      addEvent("system", "error", { error: String(error) });
+    }
+  };
+
+  const handleDisconnect = () => {
+    if (wsProviderRef.current) {
+      wsProviderRef.current.disconnect();
+      wsProviderRef.current = null;
+      setIsConnected(false);
+      setSubscriptions(new Set());
+      addEvent("system", "disconnected", {});
+    }
+  };
+
+  const handleSubscribe = () => {
+    if (!wsProviderRef.current || !isConnected) {
+      addEvent("system", "error", { error: "Not connected to websocket" });
+      return;
+    }
+
+    const subscriptionKey = `${channel}#${eventName}`;
+    
+    if (subscriptions.has(subscriptionKey)) {
+      addEvent("system", "warning", { warning: `Already subscribed to ${subscriptionKey}` });
+      return;
+    }
+
+    try {
+      // Bind to a private channel (user-specific)
+      wsProviderRef.current.bind(channel, eventName, (data: any) => {
+        addEvent(channel, eventName, data);
+      });
+
+      setSubscriptions(new Set([...subscriptions, subscriptionKey]));
+      addEvent("system", "subscribed", { channel, event: eventName });
+    } catch (error) {
+      console.error("Failed to subscribe:", error);
+      addEvent("system", "error", { error: String(error) });
+    }
+  };
+
+  const handleSubscribeGlobal = () => {
+    if (!wsProviderRef.current || !isConnected) {
+      addEvent("system", "error", { error: "Not connected to websocket" });
+      return;
+    }
+
+    const globalChannel = channel;
+    
+    if (subscriptions.has(`global:${globalChannel}`)) {
+      addEvent("system", "warning", { warning: `Already subscribed to global channel ${globalChannel}` });
+      return;
+    }
+
+    try {
+      // Bind to a global channel (not user-specific)
+      wsProviderRef.current.bindGlobal(globalChannel, (data: any) => {
+        addEvent(`global:${globalChannel}`, "publication", data);
+      });
+
+      setSubscriptions(new Set([...subscriptions, `global:${globalChannel}`]));
+      addEvent("system", "subscribed", { channel: `global:${globalChannel}` });
+    } catch (error) {
+      console.error("Failed to subscribe to global channel:", error);
+      addEvent("system", "error", { error: String(error) });
+    }
+  };
+
+  const handleUnsubscribe = () => {
+    if (!wsProviderRef.current || !isConnected) {
+      addEvent("system", "error", { error: "Not connected to websocket" });
+      return;
+    }
+
+    const subscriptionKey = `${channel}#${eventName}`;
+
+    try {
+      wsProviderRef.current.unbind(channel, eventName);
+      const newSubscriptions = new Set(subscriptions);
+      newSubscriptions.delete(subscriptionKey);
+      setSubscriptions(newSubscriptions);
+      addEvent("system", "unsubscribed", { channel, event: eventName });
+    } catch (error) {
+      console.error("Failed to unsubscribe:", error);
+      addEvent("system", "error", { error: String(error) });
+    }
+  };
+
+  const handleUnsubscribeAll = () => {
+    if (!wsProviderRef.current || !isConnected) {
+      addEvent("system", "error", { error: "Not connected to websocket" });
+      return;
+    }
+
+    try {
+      wsProviderRef.current.unbindAll(channel);
+      const newSubscriptions = new Set(
+        [...subscriptions].filter(sub => !sub.startsWith(channel))
+      );
+      setSubscriptions(newSubscriptions);
+      addEvent("system", "unsubscribed-all", { channel });
+    } catch (error) {
+      console.error("Failed to unsubscribe all:", error);
+      addEvent("system", "error", { error: String(error) });
+    }
+  };
+
+  const addEvent = (channel: string, event: string, data: any) => {
+    const newEvent: WebSocketEvent = {
+      id: `${Date.now()}-${Math.random()}`,
+      timestamp: new Date(),
+      channel,
+      event,
+      data
+    };
+    setEvents(prev => [newEvent, ...prev].slice(0, 100)); // Keep last 100 events
+  };
+
+  const clearEvents = () => {
+    setEvents([]);
+  };
+
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">
+            <div className="flex flex-col gap-2">
+              <h1 className="text-3xl font-bold">WebSocket Testing</h1>
+              <p className="text-muted-foreground">
+                Test websocket connections using @bluecopa/core utilities
+              </p>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              {/* Connection Panel */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    Connection
+                    <Badge variant={isConnected ? "default" : "secondary"}>
+                      {isConnected ? "Connected" : "Disconnected"}
+                    </Badge>
+                  </CardTitle>
+                  <CardDescription>
+                    Connect to the Centrifugo websocket server
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="connection-url">
+                      Connection URL (optional)
+                    </Label>
+                    <Input
+                      id="connection-url"
+                      placeholder="wss://your-centrifugo-server.com/connection/websocket"
+                      value={connectionUrl}
+                      onChange={(e) => setConnectionUrl(e.target.value)}
+                      disabled={isConnected}
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      Leave empty to use the default configured URL
+                    </p>
+                  </div>
+                  <div className="flex gap-2">
+                    <Button
+                      onClick={handleConnect}
+                      disabled={isConnected}
+                      className="flex-1"
+                    >
+                      Connect
+                    </Button>
+                    <Button
+                      onClick={handleDisconnect}
+                      disabled={!isConnected}
+                      variant="destructive"
+                      className="flex-1"
+                    >
+                      Disconnect
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Subscription Panel */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Subscriptions</CardTitle>
+                  <CardDescription>
+                    Subscribe to channels and events
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="channel">Channel</Label>
+                    <Input
+                      id="channel"
+                      placeholder="test-channel"
+                      value={channel}
+                      onChange={(e) => setChannel(e.target.value)}
+                      disabled={!isConnected}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="event">Event Name</Label>
+                    <Input
+                      id="event"
+                      placeholder="message"
+                      value={eventName}
+                      onChange={(e) => setEventName(e.target.value)}
+                      disabled={!isConnected}
+                    />
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <div className="flex gap-2">
+                      <Button
+                        onClick={handleSubscribe}
+                        disabled={!isConnected}
+                        className="flex-1"
+                        size="sm"
+                      >
+                        Subscribe (Private)
+                      </Button>
+                      <Button
+                        onClick={handleSubscribeGlobal}
+                        disabled={!isConnected}
+                        variant="outline"
+                        className="flex-1"
+                        size="sm"
+                      >
+                        Subscribe (Global)
+                      </Button>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        onClick={handleUnsubscribe}
+                        disabled={!isConnected}
+                        variant="secondary"
+                        className="flex-1"
+                        size="sm"
+                      >
+                        Unsubscribe
+                      </Button>
+                      <Button
+                        onClick={handleUnsubscribeAll}
+                        disabled={!isConnected}
+                        variant="destructive"
+                        className="flex-1"
+                        size="sm"
+                      >
+                        Unsubscribe All
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Active Subscriptions */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Active Subscriptions ({subscriptions.size})</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {subscriptions.size === 0 ? (
+                  <p className="text-sm text-muted-foreground">No active subscriptions</p>
+                ) : (
+                  <div className="flex flex-wrap gap-2">
+                    {[...subscriptions].map((sub) => (
+                      <Badge key={sub} variant="outline">
+                        {sub}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Events Log */}
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle>Events Log ({events.length})</CardTitle>
+                    <CardDescription>Real-time websocket events</CardDescription>
+                  </div>
+                  <Button
+                    onClick={clearEvents}
+                    variant="outline"
+                    size="sm"
+                  >
+                    Clear
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2 max-h-96 overflow-y-auto">
+                  {events.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">No events yet</p>
+                  ) : (
+                    events.map((event) => (
+                      <div
+                        key={event.id}
+                        className="rounded-lg border p-3 space-y-1"
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <Badge variant={event.channel === "system" ? "secondary" : "default"}>
+                              {event.channel}
+                            </Badge>
+                            <span className="text-sm font-mono">{event.event}</span>
+                          </div>
+                          <span className="text-xs text-muted-foreground">
+                            {event.timestamp.toLocaleTimeString()}
+                          </span>
+                        </div>
+                        <Separator />
+                        <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
+                          {JSON.stringify(event.data, null, 2)}
+                        </pre>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Usage Instructions */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Usage Instructions</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <h4 className="font-semibold">Before Using:</h4>
+                  <pre className="text-xs bg-muted p-3 rounded overflow-x-auto">
+{`import { copaSetConfig } from "@bluecopa/core";
+
+// Set configuration before connecting
+copaSetConfig({
+  apiBaseUrl: "https://api.example.com",
+  accessToken: "your-access-token",
+  workspaceId: "your-workspace-id",
+  userId: "your-user-id"
+});`}
+                  </pre>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold">Channel Types:</h4>
+                  <ul className="list-disc list-inside text-sm space-y-1 text-muted-foreground">
+                    <li>
+                      <strong>Private:</strong> Format is{" "}
+                      <code className="bg-muted px-1 rounded">private-{"{channel}"}-{"{userId}"}#{"{event}"}</code>
+                    </li>
+                    <li>
+                      <strong>Global:</strong> Format is just the channel name, accessible by all users
+                    </li>
+                  </ul>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold">Example Usage:</h4>
+                  <ol className="list-decimal list-inside text-sm space-y-1 text-muted-foreground">
+                    <li>Click "Connect" to establish a websocket connection</li>
+                    <li>Enter a channel name (e.g., "notifications")</li>
+                    <li>Enter an event name (e.g., "update")</li>
+                    <li>Click "Subscribe (Private)" or "Subscribe (Global)"</li>
+                    <li>Events will appear in the log below when received</li>
+                  </ol>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/templates/latest/app/routes.tsx

@@ -3,12 +3,18 @@ import { lazy } from "react";
 import "./app.css";
 
 const Home = lazy(() => import('~/routes/home'))
+const Comments = lazy(() => import('~/routes/comments'))
+const Websocket = lazy(() => import('~/routes/websocket'))
+const Payments = lazy(() => import('~/routes/payments'))
 
 
 export default function RouteConfig() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
+      <Route path="/comments" element={<Comments />} />
+      <Route path="/websocket" element={<Websocket />} />
+      <Route path="/payments" element={<Payments />} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );

package/templates/latest/dist/assets/{__federation_expose_App-C8_sl1dD.js → __federation_expose_App-B2IoFaIA.js}

@@ -1,12 +1,13 @@
-System.register(['./__federation_fn_import-CzfA7kmP.js', './client-Hh38T4k9.js'], (function (exports, module) {
+System.register(['./__federation_fn_import-CzfA7kmP.js', './index-D5og7-RT-BA7DwZw1.js', './client-LFBsfOjG.js'], (function (exports, module) {
   'use strict';
-  var importShared, clientExports, jsxRuntimeExports, MemoryRouter, BrowserRouter, App;
+  var importShared, jsxRuntimeExports, clientExports, MemoryRouter, BrowserRouter, App;
   return {
     setters: [module => {
       importShared = module.importShared;
     }, module => {
-      clientExports = module.c;
       jsxRuntimeExports = module.j;
+    }, module => {
+      clientExports = module.c;
       MemoryRouter = module.M;
       BrowserRouter = module.B;
       App = module.A;
@@ -55,7 +56,17 @@ System.register(['./__federation_fn_import-CzfA7kmP.js', './client-Hh38T4k9.js']
             root = null;
           }
           root = clientExports.createRoot(props.domElement);
-          root.render(/* @__PURE__ */ jsxRuntimeExports.jsx(MicrofrontendRoot, { isMicroFrontend: true }));
+          root.render(
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MicrofrontendRoot,
+              {
+                isMicroFrontend: true,
+                props: {
+                  basename: props.basename || "/app/external/microfrontend"
+                }
+              }
+            )
+          );
           console.log("Microfrontend mounted successfully");
           return;
         } catch (error) {