feat: add echo options type to improve DX & use rollup to ship types

.eslintrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+        jest: true,
+        node: true,
+    },
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+    rules: {
+        '@typescript-eslint/ban-types': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        'prefer-const': 'off',
+        '@typescript-eslint/triple-slash-reference': 'off',
+    },
+};

.gitignore

@@ -3,3 +3,4 @@ dist/
 build/
 npm-debug.log
 package-lock.json
+pnpm-lock.yaml

.npmignore

@@ -1 +1,7 @@
 build/
+.eslintrc.cjs
+jest.config.cjs
+tsconfig.json
+src
+tests
+typings

bundlesize.config.json

@@ -0,0 +1,8 @@
+{
+    "files": [
+        {
+            "path": "./dist/**/*.js",
+            "maxSize": "6 kB"
+        }
+    ]
+}

package.json

@@ -2,6 +2,7 @@
     "name": "laravel-echo",
     "version": "1.15.0",
     "description": "Laravel Echo library for beautiful Pusher and Socket.IO integration",
+    "type": "module",
     "keywords": [
         "laravel",
         "pusher",
@@ -19,12 +20,17 @@
     "main": "dist/echo.common.js",
     "module": "dist/echo.js",
     "types": "dist/echo.d.ts",
+    "files": [
+        "dist"
+    ],
     "scripts": {
-        "build": "npm run compile && npm run declarations",
+        "build": "rimraf dist && npm run compile && npm run declarations",
         "compile": "./node_modules/.bin/rollup -c",
         "declarations": "./node_modules/.bin/tsc --emitDeclarationOnly",
-        "lint": "eslint --ext .js,.ts ./src ./tests",
+        "lint": "eslint --ext .js,.ts ./src ./tests ./typings",
         "prepublish": "npm run build",
+        "typecheck": "tsc --noEmit",
+        "bundlesize": "npx bundlesize",
         "release": "npm run test && standard-version && git push --follow-tags && npm publish",
         "test": "jest"
     },
@@ -35,20 +41,24 @@
         "@babel/plugin-proposal-numeric-separator": "^7.16.7",
         "@babel/plugin-proposal-throw-expressions": "^7.16.7",
         "@babel/plugin-transform-object-assign": "^7.16.7",
-        "@babel/preset-env": "^7.16.11",
-        "@rollup/plugin-babel": "^5.3.1",
-        "@types/jest": "^27.4.1",
-        "@types/node": "^18.11.9",
-        "@typescript-eslint/eslint-plugin": "^5.14.0",
-        "@typescript-eslint/parser": "^5.14.0",
-        "eslint": "^8.11.0",
-        "jest": "^27.5.1",
-        "rollup": "^2.70.1",
-        "rollup-plugin-typescript2": "^0.31.2",
-        "standard-version": "^9.3.2",
-        "ts-jest": "^27.1.3",
-        "tslib": "^2.3.1",
-        "typescript": "^4.6.2"
+        "@babel/preset-env": "^7.21.5",
+        "@rollup/plugin-babel": "^6.0.3",
+        "@rollup/plugin-json": "^6.0.0",
+        "@types/jest": "^29.5.1",
+        "@types/node": "^18.16.2",
+        "@typescript-eslint/eslint-plugin": "^5.59.1",
+        "@typescript-eslint/parser": "^5.59.1",
+        "bundlesize": "^0.18.1",
+        "eslint": "^8.39.0",
+        "jest": "^29.5.0",
+        "rimraf": "^5.0.0",
+        "rollup": "^3.21.0",
+        "rollup-plugin-dts": "^5.3.0",
+        "rollup-plugin-esbuild": "^5.0.0",
+        "standard-version": "^9.5.0",
+        "ts-jest": "^29.1.0",
+        "tslib": "^2.5.0",
+        "typescript": "^5.0.4"
     },
     "engines": {
         "node": ">=10"

rollup.config.js

@@ -1,8 +1,13 @@
 import babel from '@rollup/plugin-babel';
-import typescript from 'rollup-plugin-typescript2';
+import { builtinModules } from 'node:module';
+import json from '@rollup/plugin-json';
+import dts from 'rollup-plugin-dts';
+import pkg from './package.json' assert { type: 'json' };
+import { defineConfig } from 'rollup';
+import esbuild from 'rollup-plugin-esbuild';
 
 const plugins = [
-    typescript(),
+    esbuild(),
     babel({
         babelHelpers: 'bundled',
         exclude: 'node_modules/**',
@@ -17,20 +22,46 @@ const plugins = [
             '@babel/plugin-transform-object-assign',
         ],
     }),
+    json(),
 ];
 
-export default [
+const external = [
+    ...builtinModules,
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+];
+
+export default defineConfig([
     {
-        input: './src/echo.ts',
+        input: 'src/echo.ts',
         output: [
             { file: './dist/echo.js', format: 'esm' },
             { file: './dist/echo.common.js', format: 'cjs' },
         ],
+        external,
         plugins,
+        onwarn,
     },
     {
-        input: './src/index.iife.ts',
+        input: 'src/index.iife.ts',
         output: [{ file: './dist/echo.iife.js', format: 'iife', name: 'Echo' }],
         plugins,
+        onwarn,
     },
-];
+    {
+        input: 'src/echo.ts',
+        output: {
+            dir: 'dist',
+            entryFileNames: '[name].d.ts',
+            format: 'esm',
+        },
+        external,
+        plugins: [dts({ respectExternal: true })],
+        onwarn,
+    },
+]);
+
+function onwarn(message) {
+    if (['EMPTY_BUNDLE', 'CIRCULAR_DEPENDENCY'].includes(message.code)) return;
+    console.error(message);
+}

src/channel/channel.ts

@@ -2,11 +2,6 @@
  * This class represents a basic channel.
  */
 export abstract class Channel {
-    /**
-     * The Echo options.
-     */
-    options: any;
-
     /**
      * Listen for an event on the channel instance.
      */

src/channel/socketio-channel.ts

@@ -13,7 +13,7 @@ export class SocketIoChannel extends Channel {
     /**
      * The name of the channel.
      */
-    name: any;
+    name: string;
 
     /**
      * Channel options.

src/connector/connector.ts

@@ -1,10 +1,11 @@
+import { Options } from '../../typings';
 import { Channel, PresenceChannel } from './../channel';
 
 export abstract class Connector {
     /**
      * Default connector options.
      */
-    private _defaultOptions: any = {
+    private _defaultOptions: Options = {
         auth: {
             headers: {},
         },
@@ -24,12 +25,12 @@ export abstract class Connector {
     /**
      * Connector options.
      */
-    options: any;
+    options: Options;
 
     /**
      * Create a new class instance.
      */
-    constructor(options: any) {
+    constructor(options: Options) {
         this.setOptions(options);
         this.connect();
     }

src/echo.ts

@@ -1,4 +1,7 @@
-import { Channel, PresenceChannel } from './channel';
+/// <reference path="../typings/index.d.ts" />
+
+import type { Options } from '../typings/options';
+import { Channel, type PresenceChannel } from './channel';
 import { PusherConnector, SocketIoConnector, NullConnector } from './connector';
 
 /**
@@ -13,12 +16,12 @@ export default class Echo {
     /**
      * The Echo options.
      */
-    options: any;
+    options: Options;
 
     /**
      * Create a new class instance.
      */
-    constructor(options: any) {
+    constructor(options: Options) {
         this.options = options;
         this.connect();
 

tsconfig.json

@@ -1,23 +1,17 @@
 {
     "compilerOptions": {
-        "declaration": true,
         "module": "es6",
         "moduleResolution": "node",
         "outDir": "./dist",
         "sourceMap": false,
         "target": "es6",
         "isolatedModules": false,
         "esModuleInterop": true,
-        "typeRoots": [
-            "node_modules/@types"
-        ],
-        "lib": [
-            "es2017",
-            "dom"
-        ]
+        "inlineSourceMap": true,
+        "skipLibCheck": true,
+        "declaration": true,
+        "typeRoots": ["node_modules/@types"],
+        "lib": ["es2017", "dom"]
     },
-    "include": [
-        "./typings/*.ts",
-        "./src/*.ts"
-    ]
+    "exclude": ["node_modules", "**/dist/**", "**tests**", "./**/*.d.ts"]
 }

typings/index.ts

@@ -0,0 +1 @@
+export * from './options';

typings/options.ts

@@ -0,0 +1,57 @@
+export type BroadcasterOption = 'pusher' | 'socket.io' | 'null' | ((option: Options) => void);
+
+export type TransportOption = 'ws' | 'wss';
+
+/**
+ * The options available in echo
+ */
+export type Options = {
+    /**
+     * Pusher client.
+     */
+    Pusher?: (key: Options['key'], options: Options) => void;
+
+    broadcaster?: BroadcasterOption;
+
+    key?: string | null;
+
+    auth?: {
+        headers?: {
+            Authorization?: string;
+            [key: string]: string;
+        };
+    };
+
+    authEndpoint?: string;
+
+    userAuthentication?: {
+        endpoint?: string;
+        headers?: Record<string, any>;
+    };
+
+    csrfToken?: string | null;
+
+    bearerToken?: string | null;
+
+    host?: string | null;
+
+    namespace?: string | null;
+
+    wsHost?: string;
+
+    wsPort?: number;
+
+    wssPort?: number;
+
+    forceTLS?: boolean;
+
+    enabledTransports?: Array<TransportOption>;
+
+    encrypted?: boolean;
+
+    cluster?: string;
+
+    withoutInterceptors?: boolean;
+
+    client?: string;
+};