-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
14 changed files
with
287 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
{ | ||
"presets": ["es2015"] | ||
"presets": ["es2015", "stage-2"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
{ | ||
"parser": "babel-eslint", | ||
"extends": "standard", | ||
"rules": { | ||
"comma-dangle": ["error", "always-multiline"], | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,49 +2,115 @@ | |
|
||
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) | ||
|
||
An event aggregate utility for front-end apps. | ||
|
||
When designing front-end apps it's best to keep modules/features loosely coupled. A great method for accomplishing this is events. "Event Sky" was designed to help your apps work without knowing about eachother by utilizing the events with Event Sky. | ||
An event pub-sub aggregate utility for javascript environments. | ||
|
||
eventSky is set as a property on the window object by default. | ||
### Usage | ||
|
||
The available trigger sequences are 'on', 'before', & 'after'. Each will return an eventId which can optionaly be stored: | ||
`EventSky` is bundled as a UMD (universal module design) and can be used in the following ways: | ||
|
||
#### Browser | ||
|
||
``` | ||
<script src="https://unpkg.com/[email protected]/build.js" /> | ||
<script> | ||
EventSky.on('testEvent', console.info) | ||
EventSke.trigger('testEvent', 'It works!') | ||
console.log(EventSky.events) | ||
</script> | ||
``` | ||
#### Commonjs - Node/Browserify/Webpack | ||
|
||
`npm i -S event-sky` or `yarn add event-sky` | ||
``` | ||
var newMessageEventId = eventSky.on('newMessage', function callback(data) { *do something with data* }); | ||
eventSky.before('newMessage'... | ||
eventSky.after('newMessage'... | ||
eventSky.once('newMessage'... | ||
const EventSky = require('event-sky') | ||
``` | ||
To trigger an event by name or by eventId: | ||
|
||
> Note: `EventSky` exports a singleton pattern module. This means it's the same | ||
object across require/import's in your commonjs environment, ie: | ||
|
||
``` | ||
eventSky.trigger('newMessage', 'this string will get passed to the callback, it can be an object, or whatever you like'); | ||
/* file1.js */ | ||
const eventSky = require('event-sky') | ||
eventSky.on('testSingleton', (msg) => console.log(msg)) | ||
``` | ||
OR | ||
|
||
``` | ||
eventSky.trigger(newMessageEventId, 'more data...'); | ||
eventSky.trigger(newMessageEventId, { key : 'value...'}); | ||
/* file2.js */ | ||
const eventSky = require('event-sky') | ||
eventSky.trigger('testSingleton', 'The singleton pattern works!') | ||
``` | ||
To remove an event: | ||
|
||
|
||
-------------------- | ||
|
||
## API | ||
|
||
### Event Hook Lifecycle | ||
|
||
You can add event handlers in different lifecycle hooks, `beforeAll`, `on`, `once`, `afterAll` | ||
|
||
``` | ||
eventSky.off(newMessageEventId); | ||
eventSky.off([newMessageEventId1, newMessageEventId2, newMessageEventId3]); | ||
eventSky.off({ event : eventId }); | ||
const eventSky = require('event-sky') | ||
eventSky.on('newMessage', (data) => { console.log(data) }) | ||
eventSky.beforeAll('newMessage'...) | ||
eventSky.afterAll('newMessage'...) | ||
eventSky.once('newMessage'...) | ||
``` | ||
For development purposes you can initialize eventSky to see all event activity in the console: | ||
|
||
### Trigger Events | ||
``` | ||
eventSky.init({ firehose : true }); // firehose=true will console.log all activity for events, helps with debugging | ||
const data = 'some string...' | ||
eventSky.trigger('newMessage', data) | ||
``` | ||
ALSO | ||
|
||
|
||
### Turn Handlers Off | ||
``` | ||
console.dir(eventSky.dev); | ||
// by event id | ||
const eventId = eventSky.on('newMessage', (data) => { console.log(data) }) | ||
eventSky.off(eventId) | ||
// or by event name and handler | ||
const handler = (data) => { console.log(data) } | ||
eventSky.on('newMessage', handler) | ||
eventSky.off('newMessage', handler) | ||
``` | ||
Configurable evnironment | ||
Node.js module: | ||
|
||
A convenience method is available to turn all handlers off associated with an event name, ie: | ||
|
||
``` | ||
GLOBAL.eventSky | ||
eventSky.beforeAll('eventName', () => { /* ... */ }) | ||
eventSky.on('eventName`, () => { /* ... */ }) | ||
// remove all lifecycle hooks for event name "eventName" | ||
eventSky.off.all('eventName') | ||
``` | ||
|
||
### Firehose | ||
|
||
For development purposes you can initialize eventSky to see all event activity in the console: | ||
``` | ||
Client/Browser: | ||
eventSky.config.firehose = true | ||
``` | ||
window.eventSky | ||
|
||
### Registered Events | ||
|
||
You can debug `EventSky` by checking the registered events and lifecycles via: | ||
|
||
``` | ||
Configurable namespace - at the top of the eventSky.js file, you can config the variable 'namespace' to be whatever you prefer. | ||
console.dir(eventSky.events) | ||
``` | ||
|
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
## Dev Server | ||
|
||
This is a simple dev server to use the event-sky module in a browser | ||
environment, ie: the browser console. The build is a UMD module and | ||
makes itself available under the global namespace `EventSky`. | ||
|
||
#### Useing Dev Server | ||
|
||
> `node dev/browserSync.js` | ||
Open browser to `http://localhost:3001/dev` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,7 +4,8 @@ | |
{ | ||
"modules": false | ||
} | ||
] | ||
], | ||
"stage-2" | ||
], | ||
"plugins": [ | ||
"transform-runtime", | ||
|
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.