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

@contentstack/advanced-post-message

v0.0.2

Published

Inspired from post robot, this module is designed to provide a simple interface for cross domain communication for Contentstack's Live preview implementations.

Downloads

190

Readme

Contentstack Advanced Postmessage

A promise based library to communicate between frames using the native PostMessage API.

Installation

You can install the package using your preferred package manager.

npm install @contentstack/advanced-post-message
pnpm install @contentstack/advanced-post-message
yarn add @contentstack/advanced-post-message

Basic Usage

Initialize the EventManager class with a channel id and the target window. You can use the send method to send messages to the target window. You can use the on method to listen to messages from the target window.

In the primary project, you can use the EventManager class to send messages to the iframe.

import EventManager from "@contentstack/advanced-post-message";

const iframe = document.getElementById("iframe");
const eventManager = new EventManager("channel-id", {
  target: iframe.contentWindow,
});

eventManager.send("message", { data: "Hello, world!" });

In the iframe, you can use the EventManager class to receive messages from the primary project.

import EventManager from "@contentstack/advanced-post-message";

const eventManager = new EventManager("channel-id", {
  target: window.parent,
});

eventManager.on("message", (event) => {
  console.log(event.data); // { data: "Hello, world!" }
});

Returning values from the listener

You can return a value from the listener, which will be sent back to the target window.

In the primary project, you can use the EventManager class to send messages to the iframe and receive a response.

import EventManager from "@contentstack/advanced-post-message";

const iframe = document.getElementById("iframe");
const eventManager = new EventManager("channel-id", {
  target: iframe.contentWindow,
});

eventManager.send("sum", { num1: 10, num2: 11 }).then((sum) => {
  console.log(sum); // 21
});

In the iframe, you can use the EventManager class to receive messages from the primary project and send a response.

import EventManager from "@contentstack/advanced-post-message";

const eventManager = new EventManager("channel-id", {
  target: window.parent,
});

eventManager.on("sum", (event) => {
  return event.data.num1 + event.data.num2;
});

Debug mode

You can enable the debug mode to log the messages to the console.

import EventManager from "@contentstack/advanced-post-message";

const iframe = document.getElementById("iframe");
const eventManager = new EventManager("channel-id", {
  target: iframe.contentWindow,
  debug: true,
});

Supress error

When you are building a library or a plugin, you might want to suppress the error when the listeners are unavailable. You can set the suppressErrors option to true to suppress the error.

import EventManager from "@contentstack/advanced-post-message";

const iframe = document.getElementById("iframe");
const eventManager = new EventManager("channel-id", {
  target: iframe.contentWindow,
  suppressErrors: true,
});

Multiple channels

You can use the same EventManager class to communicate with multiple iframes. You can create a new instance of the EventManager class with a different channel id and target window.

Even if the events have the same type, they will not interfere with each other.

import EventManager from "@contentstack/advanced-post-message";

const iframe1 = document.getElementById("iframe1");
const eventManager1 = new EventManager("channel-id-1", {
  target: iframe1.contentWindow,
});

const iframe2 = document.getElementById("iframe2");
const eventManager2 = new EventManager("channel-id-2", {
  target: iframe2.contentWindow,
});

Typescript

This library is written in typescript, so it comes with its own types. You can use the types to get the type of the payload in the listener and the response from the send method.

import EventManager from "@contentstack/advanced-post-message";

const eventManager = new EventManager("channel-id", {
  target: window.parent,
});

eventManager.on<{ from: string }>("message", (event) => {
  const data = event.data;
  console.log(data.from); // Micheal

  return `Hello ${data.from}!`;
});

eventManager
  .send<string>("message", { from: "Micheal" })
  .then((response) => {
    console.log(response); // Hello Micheal!
  });

License

This project is licensed under the MIT License - see the LICENSE file for details.