Git Product home page Git Product logo

easypm's Introduction

easypm

easypm is a JavaScript library that provides an easy-to-use wrapper around window.postMessage, allowing you to send and receive messages within the same window. easypm simplifies the handling of events and data transmission, offering an enhanced capability over postMessage by enabling the passing of functions as well as data.

Features

  • Simplified message passing within the same window.
  • Event-based message handling.
  • Easy subscription and unsubscription to events.
  • Supports passing functions along with data, unlike window.postMessage.

Installation

To use easypm in your project, simply import the library.

import easypm from 'easypm';

Usage

1. Subscribing to Events

Use the on method to subscribe to an event. This method takes an event name and a callback function that will be called when the event is emitted.

easypm.on('myEvent', (data) => {
  console.log('Received data:', data);
});

2. Emitting Events

Use the emit method to emit an event. This method takes an event name and the data to be sent. Unlike window.postMessage, easypm allows you to pass functions as well as data.

easypm.emit('myEvent', { key: 'value', callback: () => console.log('Hello!') });

3. Unsubscribing from Events

Use the off method to unsubscribe from an event. This method takes an event name and the callback function to be removed.

const callback = (data) => {
  console.log('Received data:', data);
};

easypm.on('myEvent', callback);
easypm.off('myEvent', callback);

Example

Here's a complete example demonstrating how to use easypm to send and receive messages within the same window, including passing functions.

In the main script:

import easypm from './easypm';

// Subscribing to an event
easypm.on('customEvent', (data) => {
  console.log('Received:', data);
  if (data.callback) {
    data.callback(); // Execute the passed function
  }
});

// Emitting an event
easypm.emit('customEvent', {
  message: 'Hello, easypm!',
  callback: () => console.log('Function executed!'),
});

// Unsubscribing from an event
const callback = (data) => {
  console.log('Received:', data);
};

easypm.on('customEvent', callback);
easypm.off('customEvent', callback);

API Reference

on(event: string, callback: Function)

Subscribes to an event.

  • event: The name of the event to subscribe to.
  • callback: The function to call when the event is emitted.

off(event: string, callback: Function)

Unsubscribes from an event.

  • event: The name of the event to unsubscribe from.
  • callback: The function to remove from the subscription list.

emit(event: string, data: any)

Emits an event with the specified data. Supports passing functions along with data.

  • event: The name of the event to emit.
  • data: The data to send with the event, which can include functions.

License

This library is licensed under the MIT License. Feel free to use it in your projects.

Conclusion

easypm simplifies the process of sending and receiving messages within the same window by providing a convenient API for event-based communication. With its enhanced capability to pass functions as well as data, easypm offers more flexibility and power compared to window.postMessage. Whether you're building a complex web application or just need a reliable way to pass messages and functions within the same window, easypm can help streamline your development process.

easypm's People

Contributors

jaluik avatar

Watchers

Lucian avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.