Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
framebus - npm Package Compare versions
Comparing version 5.1.2 to 6.0.0-rc.1
@@ -0,1 +1,44 @@ | ||
| # unreleased | ||
| - Changed export strategy from commonJS to ESM style | ||
| _Breaking Changes_ | ||
| - Drop support for browsers that do not support `Promise`s natively | ||
| - Framebus now uses a modular ESM style instead of an instance method style so you only include the code you actually use on your site | ||
| ```js | ||
| // v5 | ||
| var Framebus = require("framebus"); | ||
| var bus = new Framebus(); | ||
| bus.on(/* args */); | ||
| bus.emit(/* args */); | ||
| // v6, using ESM style | ||
| import { | ||
| initialize as initializeFramebus, | ||
| on, | ||
| emit | ||
| } from "framebus"; | ||
| const bus = initializeFramebus(); | ||
| on(bus /* args */); | ||
| emit(bus /* args */); | ||
| // v6, using commonJS style | ||
| const { | ||
| initialize as initializeFramebus, | ||
| on, | ||
| emit | ||
| } = require("framebus"); | ||
| const bus = initializeFramebus(); | ||
| on(bus /* args */); | ||
| emit(bus /* args */); | ||
| ``` | ||
| - Drop support for `target` method. Create a new framebus configuration using `initialize` instead. | ||
| - Static method `setPromise` is removed. Now only native `Promises` may be used. | ||
| # 5.1.2 | ||
@@ -2,0 +45,0 @@ |
@@ -1,2 +0,1 @@ | ||
| import { Framebus } from "./framebus"; | ||
| export = Framebus; | ||
| export * from "./methods"; |
| "use strict"; | ||
| var attach_1 = require("./lib/attach"); | ||
| var framebus_1 = require("./framebus"); | ||
| attach_1.attach(); | ||
| module.exports = framebus_1.Framebus; | ||
| var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
| if (k2 === undefined) k2 = k; | ||
| Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
| }) : (function(o, m, k, k2) { | ||
| if (k2 === undefined) k2 = k; | ||
| o[k2] = m[k]; | ||
| })); | ||
| var __exportStar = (this && this.__exportStar) || function(m, exports) { | ||
| for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); | ||
| }; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| __exportStar(require("./methods"), exports); |
@@ -9,3 +9,3 @@ { | ||
| "homepage": "https://github.com/braintree/framebus", | ||
| "version": "5.1.2", | ||
| "version": "6.0.0-rc.1", | ||
| "main": "dist/index.js", | ||
@@ -34,33 +34,36 @@ "files": [ | ||
| "devDependencies": { | ||
| "@types/jest": "^26.0.19", | ||
| "@wdio/cli": "^6.11.3", | ||
| "@wdio/local-runner": "^6.11.3", | ||
| "@wdio/mocha-framework": "^6.11.0", | ||
| "@wdio/spec-reporter": "^6.11.0", | ||
| "@wdio/sync": "^6.11.0", | ||
| "async": "^3.2.0", | ||
| "@types/jest": "^27.4.0", | ||
| "@typescript-eslint/eslint-plugin": "^5.10.2", | ||
| "@wdio/cli": "^7.16.14", | ||
| "@wdio/local-runner": "^7.16.14", | ||
| "@wdio/mocha-framework": "^7.16.14", | ||
| "@wdio/spec-reporter": "^7.16.14", | ||
| "@wdio/sync": "^7.16.14", | ||
| "async": "^3.2.3", | ||
| "browserify": "^17.0.0", | ||
| "chromedriver": "^87.0.5", | ||
| "chromedriver": "^97.0.4", | ||
| "del": "^6.0.0", | ||
| "ejs": "^3.1.5", | ||
| "eslint": "^7.17.0", | ||
| "eslint-config-braintree": "5.0.0-typescript-prep-rc.19", | ||
| "express": "^4.10.4", | ||
| "ejs": "^3.1.6", | ||
| "eslint": "^8.8.0", | ||
| "eslint-config-braintree": "6.0.0-typescript-prep-rc.2", | ||
| "eslint-plugin-prettier": "^4.0.0", | ||
| "express": "^4.17.2", | ||
| "gulp": "^4.0.2", | ||
| "gulp-concat": "^2.4.2", | ||
| "gulp-remove-code": "^3.0.4", | ||
| "gulp-size": "^3.0.0", | ||
| "gulp-size": "^4.0.1", | ||
| "gulp-streamify": "^1.0.2", | ||
| "gulp-uglify": "^3.0.2", | ||
| "jest": "^26.6.3", | ||
| "jest": "^27.4.7", | ||
| "morgan": "^1.10.0", | ||
| "prettier": "^2.2.1", | ||
| "ts-jest": "^26.4.4", | ||
| "tsify": "^5.0.2", | ||
| "typescript": "^4.1.3", | ||
| "prettier": "^2.5.1", | ||
| "ts-jest": "^27.1.3", | ||
| "tsify": "^5.0.4", | ||
| "typescript": "^4.5.5", | ||
| "vinyl-buffer": "^1.0.1", | ||
| "vinyl-source-stream": "^2.0.0", | ||
| "wdio-chromedriver-service": "^6.0.4" | ||
| "wdio-chromedriver-service": "^7.2.6" | ||
| }, | ||
| "jest": { | ||
| "testEnvironment": "jsdom", | ||
| "preset": "ts-jest", | ||
@@ -67,0 +70,0 @@ "restoreMocks": true, |
147
README.md
| # Framebus [](https://github.com/braintree/framebus/actions?query=workflow%3A%22Unit+Tests%22) [](https://github.com/braintree/framebus/actions?query=workflow%3A%22Functional+Tests%22) [](http://badge.fury.io/js/framebus) | ||
| Framebus allows you to easily send messages across frames (and iframes) with a simple bus. | ||
| Framebus allows you to easily send messages across frames (and iframes). | ||
@@ -8,6 +8,7 @@ In one frame: | ||
| ```js | ||
| var Framebus = require("framebus"); | ||
| var bus = new Framebus(); | ||
| import { initialize as initializeFramebus, emit } from "framebus"; | ||
| bus.emit("message", { | ||
| const bus = initializeFramebus(); | ||
| emit(bus, "message", { | ||
| from: "Ron", | ||
@@ -21,6 +22,7 @@ contents: "they named it...San Diago", | ||
| ```js | ||
| var Framebus = require("framebus"); | ||
| var bus = new Framebus(); | ||
| import { initialize as initializeFramebus, on } from "framebus"; | ||
| bus.on("message", function (data) { | ||
| const bus = initializeFramebus(); | ||
| on(bus, "message", (data) => { | ||
| console.log(data.from + " said: " + data.contents); | ||
@@ -40,5 +42,5 @@ }); | ||
| The `origin` sets the framebus instance to only operate on the chosen origin. | ||
| The `origin` sets the framebus configuration to only operate on the chosen origin. | ||
| The `channel` namespaces the events called with `on` and `emit` so you can have multiple bus instances on the page and have them only communicate with busses with the same channel value. | ||
| The `channel` namespaces the events called with `on` and `emit` so you can have multiple buses on the page and have them only communicate with buses with the same channel value. | ||
@@ -48,6 +50,6 @@ If a `verifyDomain` is passed, then the `on` listener will only fire if the domain of the origin of the post message matches the `location.href` value of page or the function passed for `verifyDomain` returns `true`. | ||
| ```js | ||
| var bus = new Framebus({ | ||
| verifyDomain: function (url) { | ||
| const bus = initializeFramebus({ | ||
| verifyDomain(url) { | ||
| // only return true if the domain of the url matches exactly | ||
| url.indexOf("https://my-domain") === 0; | ||
| return url.startsWith("https://my-domain/"); | ||
| }, | ||
@@ -59,51 +61,27 @@ }); | ||
| #### `target(options: FramebusOptions): framebus` | ||
| #### `emit<T = unknown>(config, 'event', data?, callback?): boolean` | ||
| **returns**: a chainable instance of framebus that operates on the chosen origin. | ||
| This method is used in conjuction with `emit`, `on`, and `off` to restrict their results to the given origin. By default, an origin of `'*'` is used. | ||
| ```javascript | ||
| framebus | ||
| .target({ | ||
| origin: "https://example.com", | ||
| }) | ||
| .on("my cool event", function () {}); | ||
| // will ignore all incoming 'my cool event' NOT from 'https://example.com' | ||
| ``` | ||
| | Argument | Type | Description | | ||
| | --------- | --------------- | ---------------------------------- | | ||
| | `options` | FramebusOptions | See above section for more details | | ||
| #### `emit('event', data?, callback?): boolean` | ||
| **returns**: `true` if the event was successfully published, `false` otherwise | ||
| | Argument | Type | Description | | ||
| | ---------------- | -------- | ---------------------------------------------------- | | ||
| | `event` | String | The name of the event | | ||
| | `data` | Object | The data to give to subscribers | | ||
| | `callback(data)` | Function | Give subscribers a function for easy, direct replies | | ||
| | Argument | Type | Description | | ||
| | ---------------- | -------------- | ---------------------------------------------------- | | ||
| | `config` | FramebusConfig | The Framebus configuration to use | | ||
| | `event` | String | The name of the event | | ||
| | `data` | Object | The data to give to subscribers | | ||
| | `callback(data)` | Function | Give subscribers a function for easy, direct replies | | ||
| #### `emitAsPromise('event', data?): Promise` | ||
| #### `emitAsPromise<T = unknown>('event', data?): Promise<T>` | ||
| **returns**: A promise that resolves when the emitted event is responded to the first time. It will reject if the event could not be succesfully published. | ||
| | Argument | Type | Description | | ||
| | -------- | ------ | ------------------------------- | | ||
| | `event` | String | The name of the event | | ||
| | `data` | Object | The data to give to subscribers | | ||
| | Argument | Type | Description | | ||
| | -------- | -------------- | --------------------------------- | | ||
| | `config` | FramebusConfig | The Framebus configuration to use | | ||
| | `event` | String | The name of the event | | ||
| | `data` | Object | The data to give to subscribers | | ||
| Using this method assumes the browser context you are using supports Promises. If it does not, set a polyfill for the Framebus class with `setPromise` | ||
| **Note:**: If the `replyCallback` is used with `on` (see below), `emitAsPromise` will only resolve for the first `replyCallback`. Any subsequent calls to `replyCallback` will be ignored. | ||
| ```js | ||
| // or however you want to polyfill the promise | ||
| const PolyfilledPromise = require("promise-polyfill"); | ||
| #### `on(config, 'event', fn): boolean` | ||
| Framebus.setPromise(PolyfilledPromise); | ||
| ``` | ||
| #### `on('event', fn): boolean` | ||
| **returns**: `true` if the subscriber was successfully added, `false` otherwise | ||
@@ -114,18 +92,20 @@ | ||
| | Argument | Type | Description | | ||
| | ---------------------- | -------- | ----------------------------------------------------------- | | ||
| | `event` | String | The name of the event | | ||
| | `fn(data?, callback?)` | Function | Event handler. Arguments are from the `emit` invocation | | ||
| | ↳ `this` | scope | The `MessageEvent` object from the underlying `postMessage` | | ||
| | Argument | Type | Description | | ||
| | ---------------------- | -------------- | ----------------------------------------------------------- | | ||
| | `config` | FramebusConfig | The Framebus configuration to use | | ||
| | `event` | String | The name of the event | | ||
| | `fn(data?, callback?)` | Function | Event handler. Arguments are from the `emit` invocation | | ||
| | ↳ `this` | scope | The `MessageEvent` object from the underlying `postMessage` | | ||
| #### `off('event', fn): boolean` | ||
| #### `off(config, 'event', fn): boolean` | ||
| **returns**: `true` if the subscriber was successfully removed, `false` otherwise | ||
| | Argument | Type | Description | | ||
| | -------- | -------- | -------------------------------- | | ||
| | `event` | String | The name of the event | | ||
| | `fn` | Function | The function that was subscribed | | ||
| | Argument | Type | Description | | ||
| | -------- | -------------- | --------------------------------- | | ||
| | `config` | FramebusConfig | The Framebus configuration to use | | ||
| | `event` | String | The name of the event | | ||
| | `fn` | Function | The function that was subscribed | | ||
| #### `include(popup): boolean` | ||
| #### `include(config, popup): boolean` | ||
@@ -135,11 +115,12 @@ **returns**: `true` if the popup was successfully included, `false` otherwise | ||
| ```javascript | ||
| var popup = window.open("https://example.com"); | ||
| const popup = window.open("https://example.com"); | ||
| framebus.include(popup); | ||
| framebus.emit("hello popup and friends!"); | ||
| include(bus, popup); | ||
| emit(bus, "hello popup and friends!"); | ||
| ``` | ||
| | Argument | Type | Description | | ||
| | -------- | ------ | -------------------------------------------- | | ||
| | `popup` | Window | The popup refrence returned by `window.open` | | ||
| | Argument | Type | Description | | ||
| | -------- | -------------- | -------------------------------------------- | | ||
| | `config` | FramebusConfig | The Framebus configuration to use | | ||
| | `popup` | Window | The popup refrence returned by `window.open` | | ||
@@ -151,11 +132,11 @@ #### `teardown(): void` | ||
| ```javascript | ||
| bus.on("event-name", handler); | ||
| on(bus, "event-name", handler); | ||
| // event-name listener is torn down | ||
| bus.teardown(); | ||
| // the listener for the "event-name" event is removed | ||
| teardown(bus); | ||
| // these now do nothing | ||
| bus.on("event-name", handler); | ||
| bus.emit("event-name", data); | ||
| bus.off("event-name", handler); | ||
| on(bus, "event-name", handler); | ||
| emit(bus, "event-name", data); | ||
| off(bus, "event-name", handler); | ||
| ``` | ||
@@ -172,3 +153,3 @@ | ||
| default it will broadcast events to all iframes on the page, regardless of | ||
| origin. Use the optional `target()` method when you know the exact domain of | ||
| origin. Use the optional `origin` parameter when you know the exact domain of | ||
| the iframes you are communicating with. This will protect your event data from | ||
@@ -203,7 +184,7 @@ malicious domains. | ||
| ```javascript | ||
| var callback = function (data) { | ||
| const callback = function (data) { | ||
| console.log("Got back %s as a reply!", data); | ||
| }; | ||
| framebus.emit("Marco!", callback, "http://listener.example.com"); | ||
| emit(bus, "Marco!", callback); | ||
| ``` | ||
@@ -220,7 +201,9 @@ | ||
| ```javascript | ||
| framebus | ||
| .target("http://emitter.example.com") | ||
| .on("Marco!", function (callback) { | ||
| callback("Polo!"); | ||
| }); | ||
| const bus = initializeFramebus({ | ||
| origin: "http://emitter.example.com") | ||
| }); | ||
| on(bus, "Marco!", function (callback) { | ||
| callback("Polo!"); | ||
| }); | ||
| ``` | ||
@@ -227,0 +210,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by14.83%
39249
- Number of package files
- increased by47.06%
50
- Lines of code
- increased by15.6%
578
Worsened metrics
- Dev dependency count
- increased by6.9%
31
- Number of low quality alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-7.56%
208
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes