@shellui/sdk 0.0.3 → 0.0.4

package/dist/utils/messageListenerRegistry.js

@@ -0,0 +1,197 @@
+/**
+ * Message Listener Registry
+ * Manages message listeners for ShellUI message types
+ */
+import { getLogger } from '../logger/logger.js';
+const logger = getLogger('shellsdk');
+export class MessageListenerRegistry {
+    constructor(frameRegistry = null) {
+        this.listeners = new Map();
+        this.messageHandler = null;
+        this.isListening = false;
+        this.frameRegistry = frameRegistry;
+    }
+    setupGlobalListener() {
+        if (typeof window === 'undefined' || this.isListening) {
+            return;
+        }
+        this.messageHandler = (event) => {
+            if (!event.data || typeof event.data !== 'object' || !event.data.type) {
+                return;
+            }
+            const messageType = event.data.type;
+            if (!messageType.startsWith('SHELLUI_')) {
+                return;
+            }
+            const fromUuid = this.frameRegistry?.getUuidByIframe(event.source);
+            const typeListeners = this.listeners.get(messageType) ?? [];
+            typeListeners.forEach((listener) => {
+                try {
+                    if (window.parent === window ||
+                        (event.data.to && (event.data.to.length === 0 || event.data.to.includes('*'))) ||
+                        messageType === 'SHELLUI_URL_CHANGED' ||
+                        messageType === 'SHELLUI_INITIALIZED') {
+                        listener({
+                            ...event.data,
+                            from: [fromUuid, ...(event.data.from || [])].filter(Boolean),
+                        }, event);
+                    }
+                }
+                catch (error) {
+                    logger.error(`Error in message listener for ${messageType}:`, {
+                        error,
+                    });
+                }
+            });
+            logger.debug('Message received:', event.data);
+            if (messageType === 'SHELLUI_URL_CHANGED' || messageType === 'SHELLUI_INITIALIZED') {
+                return;
+            }
+            if (fromUuid) {
+                this.sendMessageToParent({
+                    type: messageType,
+                    payload: event.data.payload,
+                    from: [fromUuid, ...(event.data.from || [])],
+                });
+            }
+            const fromParent = event.source === window.parent;
+            if (fromParent) {
+                this.sendMessage({
+                    type: messageType,
+                    payload: event.data.payload,
+                    to: [...(event.data.to || [])],
+                });
+            }
+        };
+        window.addEventListener('message', this.messageHandler);
+        this.isListening = true;
+        logger.debug('Global message listener set up');
+    }
+    teardownGlobalListener() {
+        if (!this.isListening || !this.messageHandler) {
+            return;
+        }
+        window.removeEventListener('message', this.messageHandler);
+        this.isListening = false;
+        this.messageHandler = null;
+        logger.debug('Global message listener torn down');
+    }
+    addMessageListener(messageType, listener) {
+        if (typeof messageType !== 'string' || !messageType.startsWith('SHELLUI_')) {
+            throw new Error('messageType must be a string starting with "SHELLUI_"');
+        }
+        if (typeof listener !== 'function') {
+            throw new Error('listener must be a function');
+        }
+        if (!this.listeners.has(messageType)) {
+            this.listeners.set(messageType, new Set());
+        }
+        const typeListeners = this.listeners.get(messageType);
+        typeListeners?.add(listener);
+        logger.debug(`Added listener for message type: ${messageType}`);
+        return () => {
+            this.removeMessageListener(messageType, listener);
+        };
+    }
+    removeMessageListener(messageType, listener) {
+        if (typeof messageType !== 'string' || !messageType.startsWith('SHELLUI_')) {
+            throw new Error('messageType must be a string starting with "SHELLUI_"');
+        }
+        const typeListeners = this.listeners.get(messageType);
+        if (!typeListeners) {
+            return false;
+        }
+        const removed = typeListeners.delete(listener);
+        if (typeListeners.size === 0) {
+            this.listeners.delete(messageType);
+        }
+        if (removed) {
+            logger.debug(`Removed listener for message type: ${messageType}`);
+        }
+        return removed;
+    }
+    getListenerCount(messageType) {
+        const typeListeners = this.listeners.get(messageType);
+        return typeListeners ? typeListeners.size : 0;
+    }
+    removeAllListeners(messageType) {
+        if (typeof messageType !== 'string' || !messageType.startsWith('SHELLUI_')) {
+            throw new Error('messageType must be a string starting with "SHELLUI_"');
+        }
+        const typeListeners = this.listeners.get(messageType);
+        if (!typeListeners) {
+            return 0;
+        }
+        const count = typeListeners.size;
+        this.listeners.delete(messageType);
+        logger.debug(`Removed all ${count} listeners for message type: ${messageType}`);
+        return count;
+    }
+    removeAllListenersForAllTypes() {
+        const totalCount = Array.from(this.listeners.values()).reduce((sum, set) => sum + set.size, 0);
+        this.listeners.clear();
+        logger.debug(`Removed all ${totalCount} listeners for all message types`);
+    }
+    sendMessage(message) {
+        if (typeof window === 'undefined') {
+            logger.warn('Cannot send message: window is undefined');
+            return 0;
+        }
+        if (!this.frameRegistry) {
+            logger.warn('Cannot send message: frameRegistry not available');
+            return 0;
+        }
+        if (typeof message.type !== 'string' || !message.type.startsWith('SHELLUI_')) {
+            throw new Error('messageType must be a string starting with "SHELLUI_"');
+        }
+        const sendToAll = message.to?.includes('*');
+        const allIframes = this.frameRegistry.getAllIframes();
+        if (allIframes.length === 0) {
+            logger.debug(`No iframes registered, message ${message.type} not sent`);
+            return 0;
+        }
+        let sentCount = 0;
+        for (const [uuid, iframe] of allIframes) {
+            if (sendToAll || message.to?.includes(uuid)) {
+                try {
+                    if (iframe?.contentWindow) {
+                        iframe.contentWindow.postMessage({
+                            type: message.type,
+                            payload: message.payload,
+                            to: (message.to || []).filter((t) => t !== uuid),
+                        }, '*');
+                        sentCount++;
+                        logger.debug(`Sent message ${message.type} to iframe ${uuid}`);
+                    }
+                    else {
+                        logger.warn(`Iframe ${uuid} has no contentWindow, skipping`);
+                    }
+                }
+                catch (error) {
+                    logger.error(`Error sending message to iframe ${uuid}:`, { error });
+                }
+            }
+        }
+        logger.debug(`Sent message ${message.type} to ${sentCount} iframe(s)`);
+        return sentCount;
+    }
+    propagateMessage(message) {
+        return this.sendMessage({
+            type: message.type,
+            payload: message.payload,
+            to: ['*'],
+        });
+    }
+    sendMessageToParent(message) {
+        if (typeof window === 'undefined') {
+            logger.warn('Cannot send message to parent: window is undefined');
+            return false;
+        }
+        if (window.parent !== window) {
+            window.parent.postMessage(message, '*');
+            logger.debug(`Sent message ${message.type} to parent window`);
+            return true;
+        }
+        return false;
+    }
+}

package/dist/utils/setupKeyListener.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Sets up a listener for the Escape key to close modal
+ * If in an iframe, sends a message to the parent
+ * @returns Cleanup function to remove the event listener
+ */
+export declare function setupKeyListener(): () => void;
+//# sourceMappingURL=setupKeyListener.d.ts.map

package/dist/utils/setupKeyListener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupKeyListener.d.ts","sourceRoot":"","sources":["../../src/utils/setupKeyListener.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,IAAI,CA8B7C"}

package/dist/utils/setupKeyListener.js

@@ -0,0 +1,29 @@
+import { getLogger } from '../logger/logger.js';
+const logger = getLogger('shellsdk');
+/**
+ * Sets up a listener for the Escape key to close modal
+ * If in an iframe, sends a message to the parent
+ * @returns Cleanup function to remove the event listener
+ */
+export function setupKeyListener() {
+    if (typeof window === 'undefined') {
+        return () => { };
+    }
+    const handleEscape = (event) => {
+        if (event.key === 'Escape' || event.keyCode === 27) {
+            logger.info(`${event.key} (${event.keyCode}) pressed ${window.parent !== window ? 'inside iframe' : 'at top level'}`, {
+                key: event.key,
+                keyCode: event.keyCode,
+                code: event.code,
+            });
+            if (window.parent !== window) {
+                window.parent.postMessage({ type: 'SHELLUI_CLOSE_MODAL', payload: {} }, '*');
+                window.parent.postMessage({ type: 'SHELLUI_CLOSE_DRAWER', payload: {} }, '*');
+            }
+        }
+    };
+    window.addEventListener('keydown', handleEscape);
+    return () => {
+        window.removeEventListener('keydown', handleEscape);
+    };
+}

package/dist/utils/setupUrlMonitoring.d.ts

@@ -0,0 +1,12 @@
+export interface ShellSDKLike {
+    currentPath: string;
+}
+/**
+ * Handles URL changes and notifies parent if the path has changed
+ */
+export declare function handleUrlChange(sdk: ShellSDKLike): void;
+/**
+ * Sets up listeners for various URL change events
+ */
+export declare function setupUrlMonitoring(sdk: ShellSDKLike): void;
+//# sourceMappingURL=setupUrlMonitoring.d.ts.map

package/dist/utils/setupUrlMonitoring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupUrlMonitoring.d.ts","sourceRoot":"","sources":["../../src/utils/setupUrlMonitoring.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,CA0BvD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,CA2B1D"}

package/dist/utils/setupUrlMonitoring.js

@@ -0,0 +1,57 @@
+import { getLogger } from '../logger/logger.js';
+import { shellui } from '../index.js';
+const logger = getLogger('shellsdk');
+/**
+ * Handles URL changes and notifies parent if the path has changed
+ */
+export function handleUrlChange(sdk) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    const newPath = window.location.pathname + window.location.search + window.location.hash;
+    if (newPath !== sdk.currentPath) {
+        sdk.currentPath = newPath;
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const message = {
+            pathname: window.location.pathname,
+            search: window.location.search,
+            hash: window.location.hash,
+            fullPath: window.location.pathname + window.location.search + window.location.hash,
+        };
+        if (window.parent !== window) {
+            shellui.sendMessageToParent({
+                type: 'SHELLUI_URL_CHANGED',
+                payload: message,
+            });
+            logger.debug('Sent SHELLUI_URL_CHANGED message to parent', message);
+        }
+    }
+}
+/**
+ * Sets up listeners for various URL change events
+ */
+export function setupUrlMonitoring(sdk) {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return;
+    }
+    window.addEventListener('popstate', () => handleUrlChange(sdk));
+    window.addEventListener('hashchange', () => handleUrlChange(sdk));
+    const originalPushState = window.history.pushState;
+    const originalReplaceState = window.history.replaceState;
+    window.history.pushState = function (...args) {
+        originalPushState.apply(this, args);
+        handleUrlChange(sdk);
+    };
+    window.history.replaceState = function (...args) {
+        originalReplaceState.apply(this, args);
+        handleUrlChange(sdk);
+    };
+    document.addEventListener('click', (e) => {
+        const link = e.target?.closest('a');
+        if (link && link.href && new URL(link.href).origin === window.location.origin) {
+            setTimeout(() => handleUrlChange(sdk), 0);
+        }
+    });
+}

package/dist/utils/uuid.d.ts

@@ -0,0 +1,10 @@
+/**
+ * UUID Utility
+ * Generates UUID v4 identifiers
+ */
+/**
+ * Generates a UUID v4
+ * Uses crypto.randomUUID() if available, otherwise falls back to a manual implementation
+ */
+export declare function generateUuid(): string;
+//# sourceMappingURL=uuid.d.ts.map

package/dist/utils/uuid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uuid.d.ts","sourceRoot":"","sources":["../../src/utils/uuid.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAUrC"}

package/dist/utils/uuid.js

@@ -0,0 +1,18 @@
+/**
+ * UUID Utility
+ * Generates UUID v4 identifiers
+ */
+/**
+ * Generates a UUID v4
+ * Uses crypto.randomUUID() if available, otherwise falls back to a manual implementation
+ */
+export function generateUuid() {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@shellui/sdk",
-  "version": "0.0.3",
-  "description": "ShellUI SDK - JavaScript SDK for ShellUI integration",
-  "main": "src/index.js",
-  "types": "src/index.d.ts",
+  "version": "0.0.4",
+  "description": "ShellUI SDK - TypeScript/JavaScript SDK for ShellUI integration",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
-    "src",
+    "dist",
     "README.md",
     "package.json"
   ],
-  "scripts": {
-    "build": "echo 'SDK build complete'",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "keywords": [
     "shellui",
     "sdk",
@@ -22,8 +24,17 @@
   ],
   "author": "ShellUI",
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "roarr": "^7.21.2"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"No tests specified for @shellui/sdk\""
   }
-}
+}

package/src/index.d.ts

@@ -1,55 +0,0 @@
-/**
- * ShellUI SDK Type Definitions
- */
-
-export interface ShellUIUrlPayload {
-  pathname: string;
-  search: string;
-  hash: string;
-  fullPath: string;
-}
-
-export interface ShellUIMessage {
-  type: 'SHELLUI_URL_CHANGED';
-  payload: ShellUIUrlPayload;
-}
-
-export class ShellUISDK {
-  private initialized: boolean;
-  private currentPath: string;
-  private version: string;
-
-  constructor();
-
-  /**
-   * Initialize the SDK and start monitoring URL changes
-   */
-  init(): this;
-
-  /**
-   * Sets up listeners for various URL change events
-   */
-  setupUrlMonitoring(): void;
-
-  /**
-   * Internal handler for URL changes
-   */
-  handleUrlChange(): void;
-
-  /**
-   * Sends a message to the parent frame with the current path information
-   */
-  notifyParent(): void;
-
-  /**
-   * Returns the current version of the SDK
-   */
-  getVersion(): string;
-}
-
-export const init: () => ShellUISDK;
-export const getVersion: () => string;
-export const shellui: ShellUISDK;
-
-declare const sdk: ShellUISDK;
-export default sdk;

package/src/index.js

@@ -1,118 +0,0 @@
-/**
- * ShellUI SDK
- * Handles communication between the iframe content and the ShellUI parent frame.
- */
-
-class ShellUISDK {
-  constructor() {
-    this.initialized = false;
-    // Don't access window in constructor - it may not exist during SSR
-    this.currentPath = typeof window !== 'undefined' 
-      ? window.location.pathname + window.location.search + window.location.hash
-      : '';
-    this.version = '0.0.1';
-  }
-
-  /**
-   * Initialize the SDK and start monitoring URL changes
-   */
-  init() {
-    if (this.initialized) return this;
-
-    // Monitor URL changes
-    this.setupUrlMonitoring();
-    
-    // Initial sync
-    this.notifyParent();
-
-    this.initialized = true;
-    console.log('ShellUI SDK initialized');
-    return this;
-  }
-
-  /**
-   * Sets up listeners for various URL change events
-   */
-  setupUrlMonitoring() {
-    // Guard against SSR - window and document may not exist
-    if (typeof window === 'undefined' || typeof document === 'undefined') {
-      return;
-    }
-
-    // Listen for popstate (back/forward buttons)
-    window.addEventListener('popstate', () => this.handleUrlChange());
-
-    // Listen for hashchange
-    window.addEventListener('hashchange', () => this.handleUrlChange());
-
-    // Intercept pushState and replaceState
-    const originalPushState = window.history.pushState;
-    const originalReplaceState = window.history.replaceState;
-
-    const self = this;
-    window.history.pushState = function(...args) {
-      originalPushState.apply(this, args);
-      self.handleUrlChange();
-    };
-
-    window.history.replaceState = function(...args) {
-      originalReplaceState.apply(this, args);
-      self.handleUrlChange();
-    };
-
-    // Monitor clicks on same-origin links to catch re-renders or local routing
-    document.addEventListener('click', (e) => {
-      const link = e.target.closest('a');
-      if (link && link.href && new URL(link.href).origin === window.location.origin) {
-        // Wait a bit for the framework to handle the route
-        setTimeout(() => this.handleUrlChange(), 0);
-      }
-    });
-  }
-
-  handleUrlChange() {
-    if (typeof window === 'undefined') {
-      return;
-    }
-    const newPath = window.location.pathname + window.location.search + window.location.hash;
-    if (newPath !== this.currentPath) {
-      this.currentPath = newPath;
-      this.notifyParent();
-    }
-  }
-
-  /**
-   * Sends a message to the parent frame with the current path information
-   */
-  notifyParent() {
-    if (typeof window === 'undefined') {
-      return;
-    }
-    const message = {
-      type: 'SHELLUI_URL_CHANGED',
-      payload: {
-        pathname: window.location.pathname,
-        search: window.location.search,
-        hash: window.location.hash,
-        fullPath: window.location.pathname + window.location.search + window.location.hash
-      }
-    };
-
-    // Send to parent frame
-    if (window.parent !== window) {
-      window.parent.postMessage(message, '*');
-    }
-  }
-
-  getVersion() {
-    return this.version;
-  }
-}
-
-const sdk = new ShellUISDK();
-
-export const init = () => sdk.init();
-export const getVersion = () => sdk.getVersion();
-export const shellui = sdk;
-
-export default sdk;