Comments (15)
Interesting! Would be curious to see the filesize hit.
from mitt.
Oookey, okey, let me think a bit, i'll try. Coding at github issue isn't feels good haha
from mitt.
Gotta get that size down somehow 😉 208 is pretty good though, basically just paying for one return ret
thanks to gzip.
from mitt.
adding getUnsubscribe()
would require that a fluent API return new instances of the interface for every call. I don't think that is possible given the size limitations here, and the performance would be quite poor.
from mitt.
I think the easiest fix is to make to exports. The default to be the "instance" (like invoking mitt()
) and the another to export the current function
export default mitt()
export const mitt
function mitt(all) {
// code ...
Something like that? So if users want to add initial events through mitt({})
they will use
import { mitt } from 'mit'
otherwise they will have directly all the methods
import emitter from 'mitt'
emitter.on().on()
from mitt.
Hmm - that'd be a singleton, which is generally not going to be a good thing (npm dupe issues, etc). I've used that pattern before with a similar EventEmitter, and that was actually one of the reasons I wrote this one - you can do this:
import mitt from 'mitt';
const { on, off, emit } = mitt();
export { on, off, emit };
That's probably the better option if you're looking to then import the singleton methods later on. You get to use an instantiable library (mitt) but then work with your own created singleton in your codebase.
Just my 2 cents :)
from mitt.
Actually, I did it :) But is 212bytes (tests passing) ;/ All of my above snippets was wrong. Idea is different.
We need to not just return an object with the methods but assign that object to const ret
, return that const and use that const in each method.
export default function mitt(all) {
// Arrays of event handlers, keyed by type
all = all || {};
// Get or create a named handler list
function list(type) {
let t = type.toLowerCase();
return all[t] || (all[t] = []);
}
const ret = {
/** Register an event handler for the given type.
* @param {String} type Type of event to listen for, or `"*"` for all events
* @param {Function} handler Function to call in response to the given event
* @memberof mitt
*/
on(type, handler) {
list(type).push(handler);
return ret;
},
/** Remove an event handler for the given type.
* @param {String} type Type of event to unregister `handler` from, or `"*"`
* @param {Function} handler Handler function to remove
* @memberof mitt
*/
off(type, handler) {
let e = list(type),
i = e.indexOf(handler);
if (~i) e.splice(i, 1);
return ret;
},
/** Invoke all handlers for the given type.
* If present, `"*"` handlers are invoked prior to type-matched handlers.
* @param {String} type The event type to invoke
* @param {Any} [event] An event object, passed to each handler
* @memberof mitt
*/
emit(type, event) {
list('*').concat(list(type)).forEach( f => { f(event); });
return ret;
}
};
return ret;
}
from mitt.
It will fit if we use #8. Damn.. that's freaking crazy haha
from mitt.
Seems like this issue and #1 are incompatible.
from mitt.
Oooh - good point. I totally did not think of that.
from mitt.
Yea, absolutely. But I believe this lib is meant to be with kind of compat with most common and to be small. Or at least it is promoted as that. I not mean that #1 will be with bigger size, but it is other thing and can be done in separate more smaller lib. 2c
from mitt.
Instead of returning unsuscribe method (#1) we can add the getUnsuscribe
on the fluent API. So you can get it whenever you need to.
from mitt.
@sospedra I'm not sure how viable a new method would be as the 200 B gzipped limit is quite a challenge to work around. @tunnckoCore has been doing some heroic with in #19.
from mitt.
Using Closure Compiler, you end up with 197 bytes after including the return
in each function by it converting all let
or const
to var
. If using let
& const
aren't a requirement, that's an easy way to get that gzip size down.
function mitt(b){function c(a){a=a.toLowerCase();return b[a]||(b[a]=[])}b=b||{};var d={on:function(a,e){c(a).push(e);return d},off:function(a,e){var b=c(a),f=b.indexOf(e);~f&&b.splice(f,1);return d},emit:function(a,b){c("*").concat(c(a)).forEach(function(a){a(b)});return d}};return d};
from mitt.
The source gets transpiled by Buble so those let
declarations actually are var
- good to know we could save a few bytes going with closure though.
from mitt.
Related Issues (20)
- Nuxt3 issues ? HOT 2
- Persist events that not yet have a handler HOT 1
- Is it possible to use mitt across two different tabs? Or via an iframe? HOT 10
- [TypeScript] define events interface HOT 3
- Mitt - some problems HOT 1
- Typescript issue with `moduleResolution: NodeNext` HOT 1
- `dist/mitt.mjs` must not have a sourcemap HOT 5
- mitt extension
- Unpkg CDN Version is down HOT 1
- Using Ag-grid cell renderer with Mitt HOT 1
- Bug: type issue in [email protected]+ with esm HOT 2
- Could we have a minor update? HOT 1
- Doesn't work with typescript 5 moduleResolution set to bundler HOT 11
- vue3 options methods use mitt Invalid HOT 1
- why use sllice & map HOT 2
- Can't pass multiple arguments with emit HOT 2
- How to declare type of event parameter when listen for event HOT 1
- error TS2349: This expression is not callable when using "module": "NodeNext". HOT 5
- Uncaught TypeError: (0 , mitt__WEBPACK_IMPORTED_MODULE_5__.default)(...) is not a function
- Emit issue on Vue 3. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mitt.