@aspectly/transports 0.1.0

package/src/transports/ReactNativeTransport.ts

@@ -0,0 +1,73 @@
+import { BaseTransport } from '../BaseTransport';
+import type { TransportListener, TransportUnsubscribe, TransportDetector } from '../types';
+
+declare global {
+  interface Window {
+    ReactNativeWebView?: {
+      postMessage: (message: string) => void;
+    };
+  }
+}
+
+/**
+ * Transport for React Native WebView
+ * Used when web content is displayed inside a React Native app
+ *
+ * @example
+ * ```typescript
+ * import { ReactNativeTransport } from '@aspectly/transports/react-native';
+ *
+ * const transport = new ReactNativeTransport();
+ * if (transport.isAvailable()) {
+ *   transport.send(JSON.stringify({ type: 'hello' }));
+ * }
+ * ```
+ */
+export class ReactNativeTransport extends BaseTransport {
+  readonly name = 'react-native';
+
+  isAvailable(): boolean {
+    const win = this.getWindow();
+    return typeof win?.ReactNativeWebView?.postMessage === 'function';
+  }
+
+  send(message: string): void {
+    const win = this.getWindow();
+    if (!win?.ReactNativeWebView?.postMessage) {
+      console.warn('[ReactNativeTransport] ReactNativeWebView.postMessage is not available');
+      return;
+    }
+    // React Native WebView expects message wrapped in quotes (iOS quirk)
+    win.ReactNativeWebView.postMessage(`'${message}'`);
+  }
+
+  subscribe(listener: TransportListener): TransportUnsubscribe {
+    const win = this.getWindow();
+    if (!win) {
+      return () => {};
+    }
+
+    // React Native sends messages via window.postMessage
+    const handler = (event: MessageEvent): void => {
+      if (typeof event.data === 'string') {
+        listener(event.data);
+      }
+    };
+
+    win.addEventListener('message', handler);
+    return () => win.removeEventListener('message', handler);
+  }
+}
+
+/**
+ * Detector for auto-detection registry
+ */
+export const reactNativeDetector: TransportDetector = {
+  name: 'react-native',
+  priority: 90, // Second priority
+  detect: () => {
+    return typeof window !== 'undefined' &&
+           typeof window.ReactNativeWebView?.postMessage === 'function';
+  },
+  createTransport: () => new ReactNativeTransport(),
+};

package/src/transports/WindowTransport.ts

@@ -0,0 +1,84 @@
+import { BaseTransport } from '../BaseTransport';
+import type { TransportListener, TransportUnsubscribe, TransportDetector } from '../types';
+
+/**
+ * Transport for popup windows opened via window.open()
+ * Used when web content is displayed in a child window
+ *
+ * @example
+ * ```typescript
+ * // In child window (opened via window.open())
+ * import { WindowTransport } from '@aspectly/transports/window';
+ *
+ * const transport = new WindowTransport();
+ * if (transport.isAvailable()) {
+ *   transport.send(JSON.stringify({ type: 'hello' }));
+ * }
+ * ```
+ */
+export class WindowTransport extends BaseTransport {
+  readonly name = 'window';
+  private readonly targetOrigin: string;
+
+  /**
+   * Create a window transport
+   * @param targetOrigin Origin to send messages to (default: '*')
+   */
+  constructor(targetOrigin: string = '*') {
+    super();
+    this.targetOrigin = targetOrigin;
+  }
+
+  isAvailable(): boolean {
+    const win = this.getWindow();
+    if (!win) return false;
+    return win.opener !== null && !win.opener.closed;
+  }
+
+  send(message: string): void {
+    const win = this.getWindow();
+    if (!win) {
+      console.warn('[WindowTransport] Window is not available');
+      return;
+    }
+    if (!win.opener || win.opener.closed) {
+      console.warn('[WindowTransport] Opener window is not available');
+      return;
+    }
+    win.opener.postMessage(message, this.targetOrigin);
+  }
+
+  subscribe(listener: TransportListener): TransportUnsubscribe {
+    const win = this.getWindow();
+    if (!win) {
+      return () => {};
+    }
+
+    const handler = (event: MessageEvent): void => {
+      if (typeof event.data === 'string') {
+        listener(event.data);
+      }
+    };
+
+    win.addEventListener('message', handler);
+    return () => win.removeEventListener('message', handler);
+  }
+}
+
+/**
+ * Detector for auto-detection registry
+ */
+export const windowDetector: TransportDetector = {
+  name: 'window',
+  priority: 70, // Below iframe (80), above postmessage (10)
+  detect: () => {
+    try {
+      return typeof window !== 'undefined' &&
+        window.opener != null &&
+        !window.opener.closed;
+    } catch {
+      return false;
+    }
+  },
+  createTransport: () => new WindowTransport(),
+};

package/src/types.ts

@@ -0,0 +1,69 @@
+/**
+ * Message listener callback type
+ */
+export type TransportListener = (message: string) => void;
+
+/**
+ * Cleanup function returned by subscribe
+ */
+export type TransportUnsubscribe = () => void;
+
+/**
+ * Transport interface - defines how messages are sent and received
+ * between different environments (CefSharp, React Native, iframe, etc.)
+ */
+export interface Transport {
+  /**
+   * Unique name of the transport (e.g., 'cefsharp', 'react-native', 'iframe')
+   */
+  readonly name: string;
+
+  /**
+   * Check if this transport is available in the current environment
+   */
+  isAvailable(): boolean;
+
+  /**
+   * Send a message to the parent/host context
+   * @param message Serialized message string (usually JSON)
+   */
+  send(message: string): void;
+
+  /**
+   * Subscribe to incoming messages from the parent/host context
+   * @param listener Callback function for incoming messages
+   * @returns Cleanup function to unsubscribe
+   */
+  subscribe(listener: TransportListener): TransportUnsubscribe;
+}
+
+/**
+ * Transport factory function type
+ */
+export type TransportFactory = () => Transport;
+
+/**
+ * Transport detector - used for auto-detection
+ */
+export interface TransportDetector {
+  /**
+   * Name of the transport this detector is for
+   */
+  readonly name: string;
+
+  /**
+   * Priority for detection order (higher = checked first)
+   * Default priorities: CefSharp=100, ReactNative=90, Iframe=80
+   */
+  readonly priority: number;
+
+  /**
+   * Check if this transport is available
+   */
+  detect(): boolean;
+
+  /**
+   * Create the transport instance
+   */
+  createTransport(): Transport;
+}

package/src/window.ts

@@ -0,0 +1,3 @@
+// Window transport - standalone entry point
+export { WindowTransport, windowDetector } from './transports/WindowTransport';
+export type { Transport, TransportListener, TransportUnsubscribe } from './types';