safe-frame-sync

Typesafe iframe and parent communication between Dotstudio and Dotclinic.

This library provides a Pub/Sub system for secure, typesafe communication between a parent host and an iframe, abstracting window.top.postMessage and window.onmessage. Events and corresponding payloads are typed to ensure error-free communication and improve developer experience.

Collaboration

Setup

Install dependencies with:

npm install

Build

To build the package, run:

npm run build

Publish

The package is published on npmjs.

npm publish

Usage

First, add the dependency to the project:

npm add @dotbase/safe-frame-sync

The package provides two essential functions:

• publishMessage for sending typed messages
• subscribeMessage for listening to specific typed messages

Currently there are three message types and each of them specifies a data interface:

• editResource
• createResource
• closeBuilder

Message Types

In Parent

import { subscribeMessage } from "@dotbase/safe-frame-sync"

// Somewhere in your code
subscribeMessage("createResource", (data) => {
    // Your callback implementation with type-safe data
    console.log(data)
})

In Iframe

import { publishMessage } from "@dotbase/safe-frame-sync"

// Somewhere in your code
publishMessage({
    type: "createResource";
    resourceId: "some-uuid";
    resourceName: "Some Name";
    workflowType: "document";
})