The StrictEventEmitter class that was defined in the socket.io-client
repository ([1]) is moved here, so we don't need to create an
intermediary class (Socket > StrictEventEmitter > Emitter) to get the
proper types.
As an additional benefit, the final bundle size should be decreased.
BREAKING CHANGE: we now use a named export instead of a default export
```js
// before
import Emitter from "@socket.io/component-emitter"
// after
import { Emitter } from "@socket.io/component-emitter"
```
[1]: a9e5b85580/lib/typed-events.ts
Removing the debug library and the debug calls from the final bundle is
unexpectedly quite hard.
Actually, there are several solutions, each with its own pro and cons:
> use webpack-remove-debug (our previous solution)
Pro: works well, even with ESM imports with a little hack
```js
import debugModule from "debug"; // debug()
const debug = debugModule("my-library"); // debug()
debug("hello world");
```
Cons: only for webpack
See also: https://github.com/johngodley/webpack-remove-debug
> NODE_ENV variable
```js
import debugModule from "debug";
let debug = () => {}
if (process.env.NODE_ENV !== "production") {
debug = debugModule("my-library");
}
```
Pro: the `debug()` calls are properly removed when bundling for
production
Cons: some bundlers leave the debug library in the bundle, even if it
is not called (for example, rollup needs an additional
"moduleSideEffects: true")
Reference: https://rollupjs.org/guide/en/#treeshake
> dynamic import
```js
let debug = () => {}
if (process.env.NODE_ENV !== "production") {
import("debug").then(debugModule => {
debug = debugModule.default("my-library");
});
}
```
Pro: the sanest solution, which allows to use debug in development
Cons: will likely break some bundlers due to the dynamic import (for
example, not supported for UMD bundles)
> browser field
```json
{
"browser": {
"debug": "./noop.js"
}
}
```
Pro: the safest solution from a compatibility point of view
Cons: some bundlers leave the noop debug calls, even after minification
> remove debug from the source code
We could also remove the debug calls, but the ability to turn them with
a single env variable on is quite appealing (at least in a Node.js
environment):
```
DEBUG=* node index.js
```
> dual packaging (our selected solution)
We provide two ESM builds, one with debug and one without.
Pros:
- no tricky configuration for bundlers
- debug logs are still available in Node.js
Cons:
- no more debug logs in the browser
We will go with the latest solution for now, until there is a better
alternative.
This change allows us to:
- reduce the size of the bundle
- provide an ESM bundle (for usage in <script type="module">)
BREAKING CHANGE: due to how default export works with ES modules, we
have removed the default export of the library, which means the
following code:
```js
require("engine.io-client")(...);
```
will not work anymore. The named export must be used instead:
```js
const { Socket } = require("engine.io-client);
// or import { Socket } from "engine.io-client";
const socket = new Socket(...);
```
Note: the UMD build still exposes a function though:
```html
<script src="/path/to/engine.io.js"></script>
<script>
const socket = eio(...);
</script>
```
Note: webpack is still used with zuul because of the custom builder
(zuul-builder-webpack)
This allows to control the behavior of mocked timers (@sinonjs/fake-timers),
depending on the value of the "useNativeTimers" option:
- true: use native setTimeout function
- false (default): use classic timers, that may be mocked
Related: 5d1d5bea11
