CoolFace
Apppublic

AK-21/Graphite-Industrial-Intelligence

sourceHugging Faceupdated 3mo agoView on Hugging Face
0likes
README.md206 linesDownload Raw Back to mitt
1<p align="center">2  <img src="https://i.imgur.com/BqsX9NT.png" width="300" height="300" alt="mitt">3  <br>4  <a href="https://www.npmjs.org/package/mitt"><img src="https://img.shields.io/npm/v/mitt.svg" alt="npm"></a>5  <img src="https://github.com/developit/mitt/workflows/CI/badge.svg" alt="build status">6  <a href="https://unpkg.com/mitt/dist/mitt.js"><img src="https://img.badgesize.io/https://unpkg.com/mitt/dist/mitt.js?compression=gzip" alt="gzip size"></a>7</p>8 9# Mitt10 11> Tiny 200b functional event emitter / pubsub.12 13-   **Microscopic:** weighs less than 200 bytes gzipped14-   **Useful:** a wildcard `"*"` event type listens to all events15-   **Familiar:** same names & ideas as [Node's EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter)16-   **Functional:** methods don't rely on `this`17-   **Great Name:** somehow [mitt](https://npm.im/mitt) wasn't taken18 19Mitt was made for the browser, but works in any JavaScript runtime. It has no dependencies and supports IE9+.20 21## Table of Contents22 23-   [Install](#install)24-   [Usage](#usage)25-   [Examples & Demos](#examples--demos)26-   [API](#api)27-   [Contribute](#contribute)28-   [License](#license)29 30## Install31 32This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.33 34```sh35$ npm install --save mitt36```37 38Then with a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.js.org/), use as you would anything else:39 40```javascript41// using ES6 modules42import mitt from 'mitt'43 44// using CommonJS modules45var mitt = require('mitt')46```47 48The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):49 50```html51<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>52```53 54You can find the library on `window.mitt`.55 56## Usage57 58```js59import mitt from 'mitt'60 61const emitter = mitt()62 63// listen to an event64emitter.on('foo', e => console.log('foo', e) )65 66// listen to all events67emitter.on('*', (type, e) => console.log(type, e) )68 69// fire an event70emitter.emit('foo', { a: 'b' })71 72// clearing all events73emitter.all.clear()74 75// working with handler references:76function onFoo() {}77emitter.on('foo', onFoo)   // listen78emitter.off('foo', onFoo)  // unlisten79```80 81### Typescript82 83Set `"strict": true` in your tsconfig.json to get improved type inference for `mitt` instance methods.84 85```ts86import mitt from 'mitt';87 88type Events = {89  foo: string;90  bar?: number;91};92 93const emitter = mitt<Events>(); // inferred as Emitter<Events>94 95emitter.on('foo', (e) => {}); // 'e' has inferred type 'string'96 97emitter.emit('foo', 42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'. (2345)98```99 100Alternatively, you can use the provided `Emitter` type:101 102```ts103import mitt, { Emitter } from 'mitt';104 105type Events = {106  foo: string;107  bar?: number;108};109 110const emitter: Emitter<Events> = mitt<Events>();111```112 113## Examples & Demos114 115<a href="http://codepen.io/developit/pen/rjMEwW?editors=0110">116  <b>Preact + Mitt Codepen Demo</b>117  <br>118  <img src="https://i.imgur.com/CjBgOfJ.png" width="278" alt="preact + mitt preview">119</a>120 121* * *122 123## API124 125<!-- Generated by documentation.js. Update this documentation by updating the source code. -->126 127#### Table of Contents128 129-   [mitt](#mitt)130-   [all](#all)131-   [on](#on)132    -   [Parameters](#parameters)133-   [off](#off)134    -   [Parameters](#parameters-1)135-   [emit](#emit)136    -   [Parameters](#parameters-2)137 138### mitt139 140Mitt: Tiny (~200b) functional event emitter / pubsub.141 142Returns **Mitt** 143 144### all145 146A Map of event names to registered handler functions.147 148### on149 150Register an event handler for the given type.151 152#### Parameters153 154-   `type` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [symbol](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol))** Type of event to listen for, or `'*'` for all events155-   `handler` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** Function to call in response to given event156 157### off158 159Remove an event handler for the given type.160If `handler` is omitted, all handlers of the given type are removed.161 162#### Parameters163 164-   `type` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [symbol](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol))** Type of event to unregister `handler` from, or `'*'`165-   `handler` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** Handler function to remove166 167### emit168 169Invoke all handlers for the given type.170If present, `'*'` handlers are invoked after type-matched handlers.171 172Note: Manually firing '\*' handlers is not supported.173 174#### Parameters175 176-   `type` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [symbol](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol))** The event type to invoke177-   `evt` **Any?** Any value (object is recommended and powerful), passed to each handler178 179## Contribute180 181First off, thanks for taking the time to contribute!182Now, take a moment to be sure your contributions make sense to everyone else.183 184### Reporting Issues185 186Found a problem? Want a new feature? First of all see if your issue or idea has [already been reported](../../issues).187If don't, just open a [new clear and descriptive issue](../../issues/new).188 189### Submitting pull requests190 191Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.192 193-   Fork it!194-   Clone your fork: `git clone https://github.com/<your-username>/mitt`195-   Navigate to the newly cloned directory: `cd mitt`196-   Create a new branch for the new feature: `git checkout -b my-new-feature`197-   Install the tools necessary for development: `npm install`198-   Make your changes.199-   Commit your changes: `git commit -am 'Add some feature'`200-   Push to the branch: `git push origin my-new-feature`201-   Submit a pull request with full remarks documenting your changes.202 203## License204 205[MIT License](https://opensource.org/licenses/MIT) © [Jason Miller](https://jasonformat.com/)206