@rimori/react-client 0.1.0

package/dist/rimori-client/src/plugin/CommunicationHandler.js

@@ -0,0 +1,234 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { createClient } from '@supabase/supabase-js';
+import { EventBus } from '../fromRimori/EventBus';
+export class RimoriCommunicationHandler {
+    constructor(pluginId, standalone) {
+        this.port = null;
+        this.queryParams = {};
+        this.supabase = null;
+        this.rimoriInfo = null;
+        this.isMessageChannelReady = false;
+        this.pendingRequests = [];
+        this.pluginId = pluginId;
+        this.getClient = this.getClient.bind(this);
+        //no need to forward messages to parent in standalone mode or worker context
+        if (standalone)
+            return;
+        this.initMessageChannel(typeof WorkerGlobalScope !== 'undefined');
+    }
+    initMessageChannel(worker = false) {
+        const listener = (event) => {
+            console.log('[PluginController] window message', { origin: event.origin, data: event.data });
+            const { type, pluginId, queryParams, rimoriInfo } = event.data || {};
+            const [transferredPort] = event.ports || [];
+            if (type !== 'rimori:init' || !transferredPort || pluginId !== this.pluginId) {
+                console.log('[PluginController] message ignored (not init or wrong plugin)', {
+                    type,
+                    pluginId,
+                    hasPort: !!transferredPort,
+                });
+                return;
+            }
+            this.queryParams = queryParams || {};
+            this.port = transferredPort;
+            // Initialize Supabase client immediately with provided info
+            if (rimoriInfo) {
+                this.rimoriInfo = rimoriInfo;
+                this.supabase = createClient(rimoriInfo.url, rimoriInfo.key, {
+                    accessToken: () => Promise.resolve(rimoriInfo.token),
+                });
+            }
+            // Handle messages from parent
+            this.port.onmessage = ({ data }) => {
+                const { event, type, eventId, response, error } = data || {};
+                // no idea why this is needed but it works for now
+                if (type === 'response' && eventId) {
+                    EventBus.emit(this.pluginId, response.topic, response.data, eventId);
+                }
+                else if (type === 'error' && eventId) {
+                    EventBus.emit(this.pluginId, 'error', { error }, eventId);
+                }
+                else if (event) {
+                    const { topic, sender, data: eventData, eventId } = event;
+                    if (sender !== this.pluginId) {
+                        EventBus.emit(sender, topic, eventData, eventId);
+                    }
+                }
+            };
+            // Set theme from MessageChannel query params
+            if (!worker) {
+                const theme = this.queryParams['rm_theme'];
+                // setTheme(theme);
+                console.log('TODO: set theme from MessageChannel query params');
+            }
+            // Forward plugin events to parent (only after MessageChannel is ready)
+            EventBus.on('*', (ev) => {
+                var _a;
+                if (ev.sender === this.pluginId && !ev.topic.startsWith('self.')) {
+                    (_a = this.port) === null || _a === void 0 ? void 0 : _a.postMessage({ event: ev });
+                }
+            });
+            // Mark MessageChannel as ready and process pending requests
+            this.isMessageChannelReady = true;
+            // Process any pending requests
+            this.pendingRequests.forEach((request) => request());
+            this.pendingRequests = [];
+        };
+        if (worker) {
+            self.onmessage = listener;
+        }
+        else {
+            window.addEventListener('message', listener);
+        }
+        this.sendHello(worker);
+    }
+    sendHello(isWorker = false) {
+        try {
+            const payload = { type: 'rimori:hello', pluginId: this.pluginId };
+            if (isWorker) {
+                self.postMessage(payload);
+            }
+            else {
+                window.parent.postMessage(payload, '*');
+            }
+        }
+        catch (e) {
+            console.error('[PluginController] Error sending hello:', e);
+        }
+    }
+    getQueryParam(key) {
+        return this.queryParams[key] || null;
+    }
+    getClient() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Return cached client if valid
+            if (this.supabase && this.rimoriInfo && this.rimoriInfo.expiration > new Date()) {
+                return { supabase: this.supabase, info: this.rimoriInfo };
+            }
+            // If MessageChannel is not ready yet, queue the request
+            if (!this.isMessageChannelReady) {
+                return new Promise((resolve) => {
+                    this.pendingRequests.push(() => __awaiter(this, void 0, void 0, function* () {
+                        const result = yield this.getClient();
+                        resolve(result);
+                    }));
+                });
+            }
+            // If we have rimoriInfo from MessageChannel init, use it directly
+            if (this.rimoriInfo && this.supabase) {
+                return { supabase: this.supabase, info: this.rimoriInfo };
+            }
+            // Fallback: request from parent
+            if (!this.rimoriInfo) {
+                if (typeof WorkerGlobalScope !== 'undefined') {
+                    // In worker context, send request via self.postMessage to WorkerHandler
+                    const eventId = Math.floor(Math.random() * 1000000000);
+                    const requestEvent = {
+                        event: {
+                            timestamp: new Date().toISOString(),
+                            eventId,
+                            sender: this.pluginId,
+                            topic: 'global.supabase.requestAccess',
+                            data: {},
+                            debug: false,
+                        },
+                    };
+                    return new Promise((resolve) => {
+                        // Listen for the response
+                        const originalOnMessage = self.onmessage;
+                        self.onmessage = (event) => {
+                            var _a, _b;
+                            if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.topic) === 'global.supabase.requestAccess' && ((_b = event.data) === null || _b === void 0 ? void 0 : _b.eventId) === eventId) {
+                                this.rimoriInfo = event.data.data;
+                                this.supabase = createClient(this.rimoriInfo.url, this.rimoriInfo.key, {
+                                    accessToken: () => Promise.resolve(this.getToken()),
+                                });
+                                self.onmessage = originalOnMessage; // Restore original handler
+                                resolve({ supabase: this.supabase, info: this.rimoriInfo });
+                            }
+                            else if (originalOnMessage) {
+                                originalOnMessage.call(self, event);
+                            }
+                        };
+                        // Send the request
+                        self.postMessage(requestEvent);
+                    });
+                }
+                else {
+                    // In main thread context, use EventBus
+                    const { data } = yield EventBus.request(this.pluginId, 'global.supabase.requestAccess');
+                    console.log({ data });
+                    this.rimoriInfo = data;
+                    this.supabase = createClient(this.rimoriInfo.url, this.rimoriInfo.key, {
+                        accessToken: () => Promise.resolve(this.getToken()),
+                    });
+                }
+            }
+            return { supabase: this.supabase, info: this.rimoriInfo };
+        });
+    }
+    getToken() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.rimoriInfo && this.rimoriInfo.expiration && this.rimoriInfo.expiration > new Date()) {
+                return this.rimoriInfo.token;
+            }
+            // If we don't have rimoriInfo, request it
+            if (!this.rimoriInfo) {
+                const { data } = yield EventBus.request(this.pluginId, 'global.supabase.requestAccess');
+                this.rimoriInfo = data;
+                return this.rimoriInfo.token;
+            }
+            // If token is expired, request fresh access
+            const { data } = yield EventBus.request(this.pluginId, 'global.supabase.requestAccess');
+            this.rimoriInfo.token = data.token;
+            this.rimoriInfo.expiration = data.expiration;
+            return this.rimoriInfo.token;
+        });
+    }
+    /**
+     * Gets the Supabase URL.
+     * @returns The Supabase URL.
+     * @deprecated All endpoints should use the backend URL instead.
+     */
+    getSupabaseUrl() {
+        if (!this.rimoriInfo) {
+            throw new Error('Supabase info not found');
+        }
+        return this.rimoriInfo.url;
+    }
+    getBackendUrl() {
+        if (!this.rimoriInfo) {
+            throw new Error('Rimori info not found');
+        }
+        return this.rimoriInfo.backendUrl;
+    }
+    getGlobalEventTopic(preliminaryTopic) {
+        var _a, _b;
+        if (preliminaryTopic.startsWith('global.')) {
+            return preliminaryTopic;
+        }
+        if (preliminaryTopic.startsWith('self.')) {
+            return preliminaryTopic;
+        }
+        const topicParts = preliminaryTopic.split('.');
+        if (topicParts.length === 3) {
+            if (!topicParts[0].startsWith('pl') && topicParts[0] !== 'global') {
+                throw new Error("The event topic must start with the plugin id or 'global'.");
+            }
+            return preliminaryTopic;
+        }
+        else if (topicParts.length > 3) {
+            throw new Error(`The event topic must consist of 3 parts. <pluginId>.<topic area>.<action>. Received: ${preliminaryTopic}`);
+        }
+        const topicRoot = (_b = (_a = this.rimoriInfo) === null || _a === void 0 ? void 0 : _a.pluginId) !== null && _b !== void 0 ? _b : 'global';
+        return `${topicRoot}.${preliminaryTopic}`;
+    }
+}

package/dist/rimori-client/src/plugin/Logger.d.ts

@@ -0,0 +1,73 @@
+import { RimoriClient } from './RimoriClient';
+/**
+ * Singleton Logger class for Rimori client plugins.
+ * Handles all logging levels, production filtering, and log transmission to Rimori.
+ * Overrides console methods globally for seamless integration.
+ */
+export declare class Logger {
+    private static instance;
+    private isProduction;
+    private logs;
+    private logIdCounter;
+    private originalConsole;
+    private mousePosition;
+    private constructor();
+    /**
+     * Initialize the Logger singleton and override console methods globally.
+     * @param rimori - Rimori client instance
+     * @param isProduction - Whether the environment is production
+     * @returns Logger instance
+     */
+    static getInstance(rimori: RimoriClient, isProduction?: boolean): Logger;
+    private validateIsProduction;
+    /**
+     * Expose log access to global scope for DevTools console access.
+     */
+    private exposeToDevTools;
+    /**
+     * Set up navigation event listeners to clear logs on page changes.
+     */
+    private setupNavigationClearing;
+    /**
+     * Override console methods globally to capture all console calls.
+     */
+    private overrideConsoleMethods;
+    /**
+     * Get caller information from stack trace.
+     * @returns Object with location string and CSS style, or empty values for production
+     */
+    private getCallerLocation;
+    /**
+     * Track mouse position for screenshot context.
+     */
+    private trackMousePosition;
+    /**
+     * Handle console method calls and create log entries.
+     * @param level - Log level
+     * @param args - Console arguments
+     */
+    private handleConsoleCall;
+    /**
+     * Get browser and system information for debugging.
+     * @returns Object with browser and system information
+     */
+    private getBrowserInfo;
+    /**
+     * Capture a screenshot of the current page.
+     * @returns Promise resolving to base64 screenshot or null if failed
+     */
+    private captureScreenshot;
+    /**
+     * Create a log entry with context information.
+     * @param level - Log level
+     * @param message - Log message
+     * @param data - Additional data
+     * @returns Log entry
+     */
+    private createLogEntry;
+    /**
+     * Add a log entry to the internal log array.
+     * @param entry - Log entry to add
+     */
+    private addLogEntry;
+}

package/dist/rimori-client/src/plugin/Logger.js

@@ -0,0 +1,308 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import html2canvas from 'html2canvas';
+/**
+ * Singleton Logger class for Rimori client plugins.
+ * Handles all logging levels, production filtering, and log transmission to Rimori.
+ * Overrides console methods globally for seamless integration.
+ */
+export class Logger {
+    constructor(rimori, isProduction) {
+        this.logs = [];
+        this.logIdCounter = 0;
+        this.mousePosition = null;
+        this.isProduction = this.validateIsProduction(isProduction);
+        // Store original console methods
+        this.originalConsole = {
+            log: console.log,
+            info: console.info,
+            warn: console.warn,
+            error: console.error,
+            debug: console.debug,
+        };
+        // Override console methods globally
+        this.overrideConsoleMethods();
+        // Track mouse position
+        this.trackMousePosition();
+        // Expose logs to global scope for DevTools access
+        this.exposeToDevTools();
+        // Set up navigation clearing
+        this.setupNavigationClearing();
+        rimori.event.respond('logging.requestPluginLogs', () => __awaiter(this, void 0, void 0, function* () {
+            this.addLogEntry(yield this.createLogEntry('info', 'Screenshot capture', undefined, true));
+            const logs = {
+                logs: this.logs,
+                pluginId: rimori.plugin.pluginId,
+                timestamp: new Date().toISOString(),
+            };
+            this.logs = [];
+            this.logIdCounter = 0;
+            return logs;
+        }));
+    }
+    /**
+     * Initialize the Logger singleton and override console methods globally.
+     * @param rimori - Rimori client instance
+     * @param isProduction - Whether the environment is production
+     * @returns Logger instance
+     */
+    static getInstance(rimori, isProduction) {
+        if (!Logger.instance) {
+            Logger.instance = new Logger(rimori, isProduction);
+        }
+        return Logger.instance;
+    }
+    validateIsProduction(isProduction) {
+        if (isProduction !== undefined) {
+            return isProduction;
+        }
+        if (typeof window !== 'undefined' && window.location.href) {
+            return !window.location.href.includes('localhost');
+        }
+        return true;
+    }
+    /**
+     * Expose log access to global scope for DevTools console access.
+     */
+    exposeToDevTools() {
+        if (typeof window !== 'undefined') {
+            // Expose a global function to access logs from DevTools console
+            window.getRimoriLogs = () => this.logs;
+        }
+    }
+    /**
+     * Set up navigation event listeners to clear logs on page changes.
+     */
+    setupNavigationClearing() {
+        if (typeof window === 'undefined' || typeof history === 'undefined')
+            return;
+        // Clear logs on browser back/forward
+        window.addEventListener('popstate', () => (this.logs = []));
+        // Override history methods to clear logs on programmatic navigation
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+        history.pushState = (...args) => {
+            originalPushState.apply(history, args);
+            this.logs = [];
+        };
+        history.replaceState = (...args) => {
+            originalReplaceState.apply(history, args);
+            this.logs = [];
+        };
+        // Listen for URL changes (works with React Router and other SPAs)
+        let currentUrl = window.location.href;
+        const checkUrlChange = () => {
+            if (window.location.href !== currentUrl) {
+                currentUrl = window.location.href;
+                this.logs = [];
+            }
+        };
+        // Check for URL changes periodically
+        setInterval(checkUrlChange, 100);
+        // Also listen for hash changes (for hash-based routing)
+        window.addEventListener('hashchange', () => (this.logs = []));
+    }
+    /**
+     * Override console methods globally to capture all console calls.
+     */
+    overrideConsoleMethods() {
+        // Override console.log
+        console.log = (...args) => {
+            const { location, style } = this.getCallerLocation();
+            this.originalConsole.log(location, style, ...args);
+            this.handleConsoleCall('info', args);
+        };
+        // Override console.info
+        console.info = (...args) => {
+            const { location, style } = this.getCallerLocation();
+            this.originalConsole.info(location, style, ...args);
+            this.handleConsoleCall('info', args);
+        };
+        // Override console.warn
+        console.warn = (...args) => {
+            const { location, style } = this.getCallerLocation();
+            this.originalConsole.warn(location, style, ...args);
+            this.handleConsoleCall('warn', args);
+        };
+        // Override console.error
+        console.error = (...args) => {
+            const { location, style } = this.getCallerLocation();
+            this.originalConsole.error(location, style, ...args);
+            this.handleConsoleCall('error', args);
+        };
+        // Override console.debug
+        console.debug = (...args) => {
+            const { location, style } = this.getCallerLocation();
+            this.originalConsole.debug(location, style, ...args);
+            this.handleConsoleCall('debug', args);
+        };
+    }
+    /**
+     * Get caller information from stack trace.
+     * @returns Object with location string and CSS style, or empty values for production
+     */
+    getCallerLocation() {
+        const emptyResult = { location: '', style: '' };
+        const style = 'color: #0063A2; font-weight: bold;';
+        if (this.isProduction)
+            return emptyResult;
+        try {
+            const stack = new Error().stack;
+            if (!stack)
+                return emptyResult;
+            const stackLines = stack.split('\n');
+            // Skip the first 3 lines: Error, getCallerLocation, overrideConsoleMethods wrapper
+            const callerLine = stackLines[3];
+            if (!callerLine)
+                return emptyResult;
+            // Extract file name and line number from stack trace
+            // Format: "at functionName (file:line:column)" or "at file:line:column"
+            const match = callerLine.match(/(?:at\s+.*?\s+\()?([^/\\(]+\.(?:ts|tsx|js|jsx)):(\d+):(\d+)\)?/);
+            if (match) {
+                const [, fileName, lineNumber] = match;
+                return { style, location: `%c[${fileName}:${lineNumber}]` };
+            }
+            // Fallback: try to extract just the file name
+            const simpleMatch = callerLine.match(/([^/\\]+\.(?:ts|tsx|js|jsx))/);
+            if (simpleMatch) {
+                return { style, location: `%c[${simpleMatch[1]}]` };
+            }
+            return emptyResult;
+        }
+        catch (error) {
+            return emptyResult;
+        }
+    }
+    /**
+     * Track mouse position for screenshot context.
+     */
+    trackMousePosition() {
+        if (typeof window !== 'undefined') {
+            const updateMousePosition = (event) => {
+                this.mousePosition = {
+                    x: event.clientX,
+                    y: event.clientY,
+                    timestamp: new Date().toISOString(),
+                };
+            };
+            window.addEventListener('mousemove', updateMousePosition);
+            window.addEventListener('click', updateMousePosition);
+        }
+    }
+    /**
+     * Handle console method calls and create log entries.
+     * @param level - Log level
+     * @param args - Console arguments
+     */
+    handleConsoleCall(level, args) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Skip if this is a production log that shouldn't be stored
+            if (this.isProduction && (level === 'debug' || level === 'info')) {
+                return;
+            }
+            // Convert console arguments to message and data
+            const message = args
+                .map((arg) => {
+                if (typeof arg !== 'object')
+                    return arg;
+                try {
+                    return JSON.stringify(arg);
+                }
+                catch (error) {
+                    return 'Error adding object to log: ' + error.message + ' ' + String(arg);
+                }
+            })
+                .join(' ');
+            const data = args.length > 1 ? args.slice(1) : undefined;
+            const entry = yield this.createLogEntry(level, message, data);
+            this.addLogEntry(entry);
+        });
+    }
+    /**
+     * Get browser and system information for debugging.
+     * @returns Object with browser and system information
+     */
+    getBrowserInfo() {
+        return {
+            userAgent: navigator.userAgent,
+            language: navigator.language,
+            cookieEnabled: navigator.cookieEnabled,
+            onLine: navigator.onLine,
+            screenResolution: `${screen.width}x${screen.height}`,
+            windowSize: `${window.innerWidth}x${window.innerHeight}`,
+            timestamp: new Date().toISOString(),
+        };
+    }
+    /**
+     * Capture a screenshot of the current page.
+     * @returns Promise resolving to base64 screenshot or null if failed
+     */
+    captureScreenshot() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+                const canvas = yield html2canvas(document.body);
+                const screenshot = canvas.toDataURL('image/png');
+                // this.originalConsole.log("screenshot captured", screenshot)
+                return screenshot;
+            }
+            return null;
+        });
+    }
+    /**
+     * Create a log entry with context information.
+     * @param level - Log level
+     * @param message - Log message
+     * @param data - Additional data
+     * @returns Log entry
+     */
+    createLogEntry(level, message, data, forceScreenshot) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const context = {};
+            // Add URL if available
+            if (typeof window === 'undefined' || typeof document === 'undefined') {
+                return {
+                    id: `log_${++this.logIdCounter}_${Date.now()}`,
+                    timestamp: new Date().toISOString(),
+                    level,
+                    message,
+                    data,
+                };
+            }
+            context.url = window.location.href;
+            // Add browser info (this method now handles worker context internally)
+            context.browserInfo = this.getBrowserInfo();
+            context.userAgent = context.browserInfo.userAgent;
+            // Add screenshot and mouse position if level is error or warn
+            if (level === 'error' || level === 'warn' || forceScreenshot) {
+                context.screenshot = (yield this.captureScreenshot()) || undefined;
+                context.mousePosition = this.mousePosition || undefined;
+            }
+            return {
+                id: `log_${++this.logIdCounter}_${Date.now()}`,
+                timestamp: new Date().toISOString(),
+                level,
+                message,
+                data,
+                context: context,
+            };
+        });
+    }
+    /**
+     * Add a log entry to the internal log array.
+     * @param entry - Log entry to add
+     */
+    addLogEntry(entry) {
+        this.logs.push(entry);
+        // Maintain log size limit (1000 entries)
+        if (this.logs.length > 1000) {
+            this.logs = this.logs.slice(-1000);
+        }
+    }
+}