npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@meso-network/post-message-bus

v0.0.71

Published

Pass strongly typed messages across frames.

Downloads

5

Readme

@meso-network/post-message-bus

post-message-bus is a Meso-specific library for sending strongly typed messages across frames (iframes and parent windows) using postMessage.

It is currently unavailable for standalone use.

View the CHANGELOG or read the meso-js docs.

Usage

From a parent frame (window)

import { createPostMessageBus } from "@meso-network/post-message-bus";

// Initialize the bus by providing an origin of the iframe to communicate with.
const bus = createPostMessageBus("https://iframe.origin");

// Listen for events
bus.on("CLOSE", () => {
  console.log("close event called");
});

From inside an iframe

import { createPostMessageBus } from "@meso-network/post-message-bus";

// Initialize the bus by providing an origin of the parent frame to communicate with.
const bus = createPostMessageBus(window.location.ancestorOrigins[0]);

// Listen for events
bus.on("RETURN_SIGNED_MESSAGE_RESULT", (message) => {
  console.log(message); // { payload: { signedMessage: "some-string" }}
});

// Emit events
bus.emit("REQUEST_SIGNED_MESSAGE", {
  payload: {
    messageToSign: "a message to be signed",
  },
});

Reference

You can view the full type definitions here.

createPostMessageBus

The createPostMessageBus function accepts target origin to establish postMessage communication.

The origin must be valid (<protocol>://<domain>) and cannot be *.

The function returns either postMessageBus object or an initialization error.

PostMessageBus

type PostMessageBus = {
  /**
   * Subscribe to an event using the message kind (name).
   *
   * The attached handler will be invoked each time this event is seen until the event handler is detached.
   */
  on: (eventKind: MessageKind, handler: PostMessageHandlerFn) => PostMessageBus;

  /**
   * Send a message to a specific [origin](https://developer.mozilla.org/en-US/docs/Web/API/Location/origin). If the `targetOrigin` is omitted, the message will be broadcast to all origins (`*`).
   */
  emit: (message: Message, targetOrigin?: string) => PostMessageBus;

  /**
   * Detach event handlers and end post message communications.
   */
  destroy: () => void;
};

PostMessageBusInitializationError

type PostMessageBusInitializationError = {
  /**
   * A _developer_ friendly message containing details of the error.
   */
  message: string;
};

Subscribe to events

You can subscribe to message events by using the .on method from the returned instance.

The method takes two arguments:

  • eventKind: MessageKind – which message you'd like to subscribe to
    • REQUEST_SIGNED_MESSAGE: Request from Meso experience to parent window to initiate signing.
    • RETURN_SIGNED_MESSAGE_RESULT: Dispatch the result of a signature request from the parent window to the Meso experience.
    • CLOSE: Dispatch a message from the Meso experience to the parent window to close the experience.
    • TRANSFER_UPDATE: Dispatch a message from the Meso experience to the Partner Window when the transfer has been updated.
    • ERROR: Dispatch an error message from the Meso experience to the parent window.
  • handler: PostMessageHandlerFn – a callback that accepts two arguments:
    • message: Message – a strongly typed message (see types)
    • reply: (message: Message) => void – an optional reply callback to that the handler in the other frame can call with a structured message (see types).

Emit events

You can emit message events by using the .emit method from the returned instance.

The method takes two arguments:

  • message: Message – a strongly typed message (see types)
  • targetOrigin?: string – an optional, valid origin to send the postMessage to.