Poppy I/O
Poppy I/O is a JavaScript framework for sending data between web apps client-side through the user's web browser. It works by having one page (the client) launch another (the service) in a popup window, connecting the two through a common cross-document messaging protocol.
Poppy I/O is a client-side library. It should work on all reasonably modern
browsers and doesn't have any extra runtime dependencies, aside from a Promise
polyfill if you wish to support IE 11.
Installation
Install the poppyio
package from npm
:
$ npm install poppyio
Getting Started
To try it out and see what the API looks like, check out the Introduction.
Generated TypeDoc Documentation is available.
Module Formats
The public API consists of the following modules:
Name | Description |
---|---|
poppyio.js |
Main module in package.json ; exports everything from modal-request.js , modal-service.js , common.js , and injected.js
|
modal-request.js |
ModalRequest class, used by client pages to make requests of services |
modal-service.js |
ModalService class, used by service pages to handle client requests |
common.js |
Objects and types common to clients and services (currently just ) |
injected.js |
Injected class providing default implementations of user-interface elements; to enable import inject-en
|
inject-en.js |
Sets up Injected with English-language strings and configures ModalRequest to use it. Nothing is exported, only has side-effects. |
You can consume them in one of 4 ways:
ES6 Modules
The modern and recommended way, at the root level of the package are the ES Modules:
import ModalRequest from "poppyio/modal-request.js";
import "poppyio/inject-en";
CommonJS (ES5) Modules
If your project requires a legacy CommonJS bundler, the modules are available
in CommonJS form in the /cjs/
path, for instance:
const ModalRequest = require("poppyio/cjs/modal-request").default;
require("poppyio/cjs/inject-en");
(There's probably a better way of doing this...)
AMD (ES5) Modules
AMD versions are in the /amd/
path, for instance:
requirejs.configure({
paths: {
poppyio: "./node_modules/poppyio/amd"
}
})
require(["poppyio/modal-request", "poppyio/inject-en"], function (mr) {
var ModalRequest = mr.default;
});
Bundle Script
If you aren't using a module system at all, you can use the bundle script that sets
up a poppyio
global.
<script src="https://unpkg.com/poppyio@0.1.0/bundle/poppyio.min.js"></script>
<script src="https://unpkg.com/poppyio@0.1.0/bundle/poppyio.inject-en.js"></script>
<script>
var ModalRequest = poppyio.ModalRequest;
</script>
Equivalent to the first 2 script tags would also be:
<script src="https://unpkg.com/poppyio@0.1.0/bundle/poppyio.en.min.js"></script>
For convenience, the bundle scripts include a small Promise polyfill,
so you don't need to supply one yourself. It (or the global Promise
if available)
is exported as poppyio.Promise
if you want to use it yourself.