@quartal/bridge-client/examples/postmessage-transport-example.ts

Universal client library for embedding applications with URL-configurable transport support (iframe, postMessage) and framework adapters for Angular and Vue

// Example: Using PostMessageTransport for Angular to Vue embedding
//
// This example shows how to use PostMessageTransport as an alternative to
// iframe-based embedding, which provides better UX (no scrolling issues)
// when both applications are on the same domain.

import { 
  PostMessageTransport, 
  TransportFactory,
  ParentClient, 
  ChildClient 
} from '../src/index';

// ===== PARENT APPLICATION (Angular - quartal-invoicing-ui) =====

class AngularEmbeddingExample {
  private client: ParentClient;

  async embedVueApp() {
    // Option 1: Create PostMessageTransport directly
    const transport = new PostMessageTransport({
      targetOrigin: 'https://quartal.fi', // Same domain as parent
      channel: 'quartal-accounting',
      timeout: 10000,
      debug: true
    });

    // Option 2: Use factory (cleaner)
    const factoryTransport = TransportFactory.create('postmessage', {
      targetOrigin: window.location.origin, // Same origin
      channel: 'quartal-accounting',
      debug: true
    });

    // Create parent client with PostMessage transport
    this.client = new ParentClient({
      // Note: iframeElement is required even for PostMessage, 
      // but can be a dummy element since PostMessage doesn't use it
      iframeElement: document.createElement('iframe'),
      // ... other parent config
    }, {
      // Callbacks here...
    }, transport); // Pass transport as 3rd parameter

    // Open child window or embed in iframe
    const childWindow = window.open('/quartal-accounting-embed', '_blank', 'width=800,height=600');
    
    // Note: Connection happens automatically, no need to call connect() manually
    
    console.log('✅ PostMessage transport configured');
  }
}

// ===== CHILD APPLICATION (Vue - quartal-accounting-embed) =====

class VueEmbeddedExample {
  private client: ChildClient;

  async initializeEmbedded() {
    // Create PostMessage transport for child
    const transport = new PostMessageTransport({
      targetWindow: window.parent, // Parent window
      targetOrigin: window.location.origin, // Same origin
      channel: 'quartal-accounting',
      debug: true
    });

    // Create child client
    this.client = new ChildClient({
      // Child config here...
    }, {
      // Callbacks here...
    }, transport); // Pass transport as 3rd parameter
    
    // Note: Connection happens automatically during initialization
    
    console.log('✅ PostMessage transport configured for child');
  }
}

// ===== CROSS-ORIGIN EXAMPLE =====

class CrossOriginExample {
  async embedCrossOrigin() {
    // For cross-origin, specify exact origin (not '*' for security)
    const transport = new PostMessageTransport({
      targetOrigin: 'https://app.quartal.fi', // Different subdomain
      channel: 'quartal-cross-origin',
      timeout: 15000, // Longer timeout for cross-origin
      debug: true
    });

    // Create client with transport passed as 3rd parameter
    const client = new ParentClient({
      // Note: iframeElement is required even for PostMessage
      iframeElement: document.createElement('iframe'),
      // ... other config
    }, {
      // Callbacks here...
    }, transport);
    
    // Transport handles connection automatically
    console.log('✅ Cross-origin PostMessage transport configured');
  }
}

export { 
  AngularEmbeddingExample, 
  VueEmbeddedExample, 
  CrossOriginExample 
};